diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 179907c..30f140f 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -541,20 +541,37 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 /* =========================================  vant  ============================================= */
-.van-field__label {
-  position: relative;
-  font-weight: bold;
+.van-notice-bar {
+  font-size: 18px;
 }
-.van-field__label:before {
-  position: absolute;
-  left: -8px;
+
+.van-popup.van-toast {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 30px;
+}
+.van-popup.cropPopup {
+  display: block;
+  max-width: 400px;
+  width: 90%;
+  height: 430px;
+  top: 30%;
+  margin: auto;
+  padding: 0;
 }
 
 .van-tabs {
   padding: 20px 0 0px;
 }
 .van-tabs .van-tabs__wrap {
-  height: initial;
+  height: initial !important;
 }
 .van-tabs .van-tabs__wrap .van-tabs__nav {
   padding: 0;
@@ -583,13 +600,45 @@ h1, h2, h3, h4, h5, h6 {
 
 .van-cell-group {
   border-radius: 5px;
+  margin-bottom: 15px;
   overflow: hidden;
 }
+.van-cell-group .van-cell {
+  padding: 6px 16px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
 .van-cell-group .van-cell::after {
   border-bottom: 1px #e3e3e3 solid;
   -webkit-transform: none;
           transform: none;
 }
+.van-cell-group .van-cell.longText .van-field__label {
+  width: 160px;
+}
+.van-cell-group .van-cell .van-field__label {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 4px 0;
+  font-weight: bold;
+}
+.van-cell-group .van-cell .van-field__label:before {
+  position: absolute;
+  left: -8px;
+}
+.van-cell-group .van-cell .van-field__label i, .van-cell-group .van-cell .van-field__label svg {
+  color: #5b7b94;
+  margin-top: 5px;
+  margin-right: 5px;
+}
+.van-cell-group .van-cell .van-field__label--top i, .van-cell-group .van-cell .van-field__label--top svg {
+  color: #5b7b94;
+  margin-top: 0px;
+  margin-right: 5px;
+}
 
 /* =========================================  stage  ============================================= */
 .content {
@@ -597,49 +646,45 @@ h1, h2, h3, h4, h5, h6 {
   background-color: #b2c4ce;
 }
 
-.card {
-  border: none;
-  margin-bottom: 15px;
-}
-.card .card-body {
-  padding: 5px 15px;
-}
-.card .card-body .item {
-  position: relative;
+.upload-main {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  width: 100%;
-  font-size: 15px;
 }
-.card .card-body .item + .item {
-  border-top: 1px solid #e3e3e3;
+.upload-main .upload-img {
+  width: 100px;
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+  border: 1px #d8d8d8 solid;
 }
-.card .card-body .item .left {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
-  padding: 8px 0;
-  font-weight: bold;
+
+.cropper {
+  height: 300px;
+  background: #DDD;
 }
-.card .card-body .item .right {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 0 0px;
-          flex: 1 0 0;
-  color: #666;
+
+.cropper-section {
+  margin: 0 auto;
+  position: fixed;
+  text-align: center;
+  top: 60px;
+  width: 100%;
+  max-width: 500px;
+  z-index: 8888;
 }
-.card .card-body .item .right a {
-  color: #666;
+.cropper-section .crop-area {
+  margin: 5 auto;
+  width: 100%;
 }
-.card .card-body .item i, .card .card-body .item svg {
-  color: #839eb6;
-  margin-right: 6px;
+.cropper-section .crop-btn {
+  background-color: #666;
+  text-align: center;
 }
 
 /* =========================================  other  ============================================= */
diff --git a/src/assets/sass/layout/_layout.scss b/src/assets/sass/layout/_layout.scss
index 9da8651..7b2bf2a 100644
--- a/src/assets/sass/layout/_layout.scss
+++ b/src/assets/sass/layout/_layout.scss
@@ -4,20 +4,32 @@
 
 /* =========================================  vant  ============================================= */
 
-.van-field__label{
-    position: relative;
-    font-weight: bold;
-    &:before{
-        position: absolute;
-        left:-8px;
-    }
+.van-notice-bar{
+    font-size: 18px;
 }
 
+.van-popup{
+    &.van-toast{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 30px;
+    }
+    &.cropPopup{
+        display: block;
+        max-width: 400px;
+        width: 90%;
+        height: 430px;
+        top: 30%;
+        margin: auto;
+        padding: 0;
+    }
+}
 
 .van-tabs{
     padding:20px 0 0px;        
     .van-tabs__wrap{
-        height:initial;
+        height:initial !important;
         .van-tabs__nav{
             padding:0;
             background-color: transparent;
@@ -44,12 +56,42 @@
 
 .van-cell-group{
     border-radius: 5px;
+    margin-bottom: 15px;
     overflow: hidden;
     .van-cell{
+        padding: 6px 16px;
+        align-items: center;
         &::after{
             border-bottom:1px #e3e3e3 solid;
             transform: none;
         }
+        &.longText{
+            .van-field__label{
+                width:160px;
+            }
+        }
+        .van-field__label{
+            position: relative;
+            display: flex;
+            padding: 4px 0;  
+            font-weight: bold;
+            &:before{
+                position: absolute;
+                left:-8px;
+            }          
+            i,svg{
+                color: #5b7b94;
+                margin-top: 5px;
+                margin-right: 5px;
+            }
+        }
+        .van-field__label--top{
+            i,svg{
+                color: #5b7b94;
+                margin-top: 0px;
+                margin-right: 5px;
+            }
+        }
     }
 }
 
@@ -60,41 +102,40 @@
     background-color: #b2c4ce;
 }
 
-.card {
-    border: none;
-    // border-radius: 0;
-    margin-bottom: 15px;
-    .card-body{
-        padding: 5px 15px;
-        .item {
-            position: relative;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            width:100%;                          
-            font-size: 15px;     
-            &+.item{
-                border-top: 1px solid #e3e3e3;
-            }      
-            .left{
-                flex: 0 0 auto;
-                padding: 8px 0;  
-                font-weight: bold;
-            }
-            .right{
-                flex: 1 0 0;
-                color: #666;
-                a{
-                    color: #666;
-                }
-            }
-            i,svg{
-                color: #839eb6;
-                margin-right: 6px;
-            }
-        }
+.upload-main{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .upload-img{
+      width: 100px;
+      aspect-ratio: 1/1;
+      border-radius: 50%;
+      border:1px #d8d8d8 solid;
     }
-}
+  }
+  
+  .cropper {
+    height: 300px;
+    background: #DDD;
+  }
+  
+  .cropper-section{
+    margin: 0 auto;
+    position: fixed;
+    text-align: center;
+    top: 60px;
+    width: 100%;
+    max-width: 500px;
+    z-index: 8888;
+    .crop-area{
+      margin: 5 auto;
+      width: 100%;
+    }
+    .crop-btn{
+      background-color: #666;
+      text-align: center;
+    }
+  }
 
 /* =========================================  other  ============================================= */
 
diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue
index 2f6deba..58a7217 100644
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -321,148 +321,81 @@ const handleLogout = () => {
       ></a>
     </div>
 
-    <div class="content">
-      <div class="card shadow" v-if="userInfo">
-        <div class="card-body">
-          <div class="item">
-            <div class="left">
-              <i class="fa-regular fa-fw fa-calendar-days"></i> 建立日期
-            </div>
-            <div class="right text-right">
-              {{ userInfo.create_time }}
-            </div>
-          </div>
-          <div class="item">
-            <div class="left">
-              <i class="fa-solid fa-fw fa-fingerprint"></i> 會員編號
-            </div>
-            <div class="right text-right">
-              <a href="javascript:;" @click="doCopyUid">{{
-                userInfo.user_id
-              }}</a>
-              <!-- <span class="btn btn-sm btn-tomatoRed" @click="doCopyUid">複製</span>       -->
-            </div>
-          </div>
-          <div class="item">
-            <div class="left">
-              <i class="fa-solid fa-fw fa-layer-group"></i> 會員等級
-            </div>
-            <div class="right text-right">
-              {{ userInfo.level_name }}
-            </div>
-          </div>
-          <div class="item">
-            <div class="left">
-              <i class="fa-regular fa-fw fa-calendar-check"></i> 使用期限
-            </div>
-            <div class="right text-right">
-              {{ overdue }}
-            </div>
-
-            <!-- <div class="col text-right" @click="router.push('/shop/inputsn')" v-if="!is_due">{{overdue}}<br/>點此輸入購買序號</div>
-            <div class="col text-right input-sn" @click="router.push('/shop/inputsn')" v-else>已到期,<br/>點此輸入購買序號</div> -->
-          </div>
-          <div class="item">
-            <div class="left">
-              <i class="fa-solid fa-fw fa-qrcode"></i> 會員QRcode
-            </div>
-            <div class="right text-right">
-              <div class="btn btn-sm btn-darkBlue" @click="handleShowNfc">
-                開啟掃描
-              </div>
-            </div>
-          </div>
-          <div class="item">
-            <div class="left">
-              <i class="fa-solid fa-fw fa-link"></i> 名片連結
-            </div>
-            <div class="right text-right">
-              <div class="btn btn-sm btn-tomatoRed" @click="doCopy">
-                複製連結
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="card shadow" v-if="userInfo">
-        <div class="card-body">
-          <div class="item">
-            <div class="left">
-              <i class="fa-regular fa-fw fa-building"></i> 職稱
-            </div>
-            <div class="right text-right">
-              {{ userInfo.title }}
-            </div>
-          </div>
-          <div class="item">
-            <div class="left">
-              <i class="fa-solid fa-fw fa-mobile-retro"></i> 手機
-            </div>
-            <div class="right text-right">
-              {{ userInfo.phone }}
-            </div>
-          </div>
-          <div class="item">
-            <div class="left"><i class="fa-solid fa-fw fa-phone"></i> 市話</div>
-            <div class="right text-right">
-              {{ userInfo.tel }}
-            </div>
-          </div>
-          <div class="item">
-            <div class="left">
-              <i class="fa-regular fa-fw fa-envelope"></i> Email
-            </div>
-            <div class="right text-right">
-              {{ userInfo.email }}
-            </div>
-          </div>
-          <div class="item">
-            <div class="left">
-              <i class="fa-solid fa-fw fa-location-dot"></i> 住址
-            </div>
-            <div class="right text-right">
-              {{ userInfo.address }}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="card shadow" v-if="userInfo">
-        <div class="card-body">
-          <div class="item">
-            <div class="left">
-              <i class="fa-solid fa-fw fa-user-tie"></i> 授權商務卡片編輯
-            </div>
-            <div class="right text-right">
-              <a href="javascript:;" @click="$router.push('/auth/auth')"
-                >授權</a
-              >
-            </div>
-          </div>
-          <div class="item">
-            <div class="left">
-              <i class="fa-regular fa-fw fa-handshake"></i> 代客編輯商務卡片
-            </div>
-            <div class="right text-right">
-              <a href="javascript:;" @click="$router.push('/auth/getauth')"
-                >編輯</a
-              >
-            </div>
-          </div>
-          <div class="item" v-if="userInfo.uniqid">
-            <div class="left">
-              <i class="fa-solid fa-fw fa-award"></i> 綁定UTel淘金購會員
-            </div>
-            <div class="right text-right">
-              <a href="javascript:;" @click="bindTggo">點擊後前往綁定</a>
-            </div>
-          </div>
-          <div class="item">
-            <div class="left">
-              <i class="fa-regular fa-fw fa-paper-plane"></i> 發送名片帶廣告
-            </div>
-            <div class="right text-right">
+    <div class="content" v-if="userInfo">
+      <van-cell-group inset>
+          <van-field :model-value="userInfo.create_time" input-align="right" readonly>
+            <template #label><i class="fa-regular fa-fw fa-calendar-days"></i> 建立日期</template>
+          </van-field>
+          <van-field :model-value="userInfo.user_id" input-align="right" readonly>
+            <template #label><i class="fa-solid fa-fw fa-fingerprint"></i> 會員編號</template>
+            <template #button>
+              <van-button size="small" @click="doCopyUid">
+                <i class="fa-regular fa-copy"></i>
+              </van-button>
+            </template>
+          </van-field>
+          <van-field :model-value="userInfo.level_name" input-align="right" readonly>
+            <template #label><i class="fa-solid fa-fw fa-layer-group"></i> 會員等級</template>
+          </van-field>
+          <van-field :model-value="overdue" input-align="right" readonly>
+            <template #label><i class="fa-regular fa-fw fa-calendar-check"></i> 使用期限</template>
+          </van-field>
+          <van-field input-align="right" readonly>
+            <template #label><i class="fa-solid fa-fw fa-qrcode"></i> QRcode</template>
+            <template #button><van-button size="small" class="bg-darkBlue text-white border-0" @click="handleShowNfc">開啟掃描</van-button></template>
+          </van-field>
+          <van-field input-align="right" readonly>
+            <template #label><i class="fa-solid fa-fw fa-link"></i> 名片連結</template>
+            <template #button><van-button size="small" class="bg-tomatoRed text-white border-0" @click="doCopy">複製連結</van-button></template>
+          </van-field>
+      </van-cell-group>
+
+      <van-cell-group inset>
+          <van-field :model-value="userInfo.title" input-align="right" readonly>
+            <template #label><i class="fa-regular fa-fw fa-building"></i> 職稱</template>
+          </van-field>
+          <van-field :model-value="userInfo.phone" input-align="right" readonly>
+            <template #label><i class="fa-solid fa-fw fa-mobile-retro"></i> 手機</template>
+          </van-field>
+          <van-field :model-value="userInfo.tel" input-align="right" readonly>
+            <template #label><i class="fa-solid fa-fw fa-phone"></i> 市話</template>
+          </van-field>
+          <van-field :model-value="userInfo.email" input-align="right" readonly>
+            <template #label><i class="fa-regular fa-fw fa-envelope"></i> Email</template>
+          </van-field>
+          <van-field :model-value="userInfo.address" input-align="right" readonly>
+            <template #label><i class="fa-solid fa-fw fa-location-dot"></i> 住址</template>
+          </van-field>
+      </van-cell-group>
+
+      <van-cell-group inset>
+          <van-field input-align="right" class="longText" readonly>
+            <template #label><i class="fa-solid fa-fw fa-user-tie"></i> 授權商務卡片編輯</template>
+            <template #button>
+              <van-button size="small" @click="$router.push('/auth/auth')">
+                授權
+              </van-button>
+            </template>
+          </van-field>
+          <van-field input-align="right" class="longText" readonly>
+            <template #label><i class="fa-regular fa-fw fa-handshake"></i> 代客編輯商務卡片</template>
+            <template #button>
+              <van-button size="small" @click="$router.push('/auth/getauth')">
+                編輯
+              </van-button>
+            </template>
+          </van-field>
+          <van-field input-align="right" class="longText" readonly>
+            <template #label><i class="fa-solid fa-fw fa-award"></i> 綁定UTel淘金購會員</template>
+            <template #button>
+              <van-button size="small" @click="bindTggo">
+                點擊後前往綁定
+              </van-button>
+            </template>
+          </van-field>
+          <van-field input-align="right" class="longText" readonly>
+            <template #label><i class="fa-regular fa-fw fa-paper-plane"></i> 發送名片帶廣告</template>
+            <template #input>
               <van-switch
                 v-model="adSwitchStatus"
                 @update:model-value="onUpdateValue"
@@ -470,10 +403,9 @@ const handleLogout = () => {
                 active-color="#345068"
                 inactive-color="#888888"
               />
-            </div>
-          </div>
-        </div>
-      </div>
+            </template>
+          </van-field>
+      </van-cell-group>
     </div>
 
     <!-- <Footer /> -->
@@ -586,7 +518,7 @@ const handleLogout = () => {
 .my-account {
 	position: relative;
 	width: 100%;
-    padding: 20px 15px;
+    padding: 20px 25px;
     .avatar{
         display: flex;
         justify-content: space-between;
diff --git a/src/views/Member/index.vue b/src/views/Member/index.vue
index bed62b8..1bb11b1 100644
--- a/src/views/Member/index.vue
+++ b/src/views/Member/index.vue
@@ -22,6 +22,7 @@ const store = useStore()
 const router = useRouter()
 
 const form = ref({addon:[]})
+const activeName = ref(0)
 
 
 const fileList = ref([]);
@@ -62,6 +63,7 @@ const validatorTel = (val) => {
   let userRes = await getUserInfo()
   if(userRes.code===200){
     form.value = userRes.data
+    console.log(form);
   }else{
 
   }
@@ -177,7 +179,7 @@ const onSubmit = async () => {
     </van-nav-bar>
 
     <van-tabs class="van-tabs" :lazy-render="true" v-model:active="tabActive">
-      <van-tab v-for="(item, index) in tabItemObj">
+      <van-tab v-for="(item,index) in tabItemObj" :key="index">
         <template #title>
           <div class="tab_item">
             <i :class="`fa-solid ${item.icon} fa-2x mb-1`"></i>
@@ -187,30 +189,40 @@ const onSubmit = async () => {
       </van-tab>
     </van-tabs>
 
-    <div class="content">
-      
-        <van-cell-group v-show="tabActive === 0">
+    <div class="content" v-show="tabActive === 0">      
+        <van-cell-group inset>
           <van-form @submit="onSubmit">
-            <van-uploader :after-read="afterRead" :max-count="1" name="averter" class="my-4">
-              <div class="upload-main">
-                <img
-                  class="upload-img"
-                  :src="form.avatar"
-                  alt=""
-                  v-if="form.avatar"
-                />
-                <img
-                  class="upload-img"
-                  src="@/assets/images/upload.jpg"
-                  alt=""
-                  v-else
-                />
-                <div class="ml-3">
-                  <p class="text-skyBlue mb-2">上傳圖片，預設為Line頭像</p>
-                  <van-button class="btn-darkBlue" icon="plus" block type="primary" size="small">上傳檔案</van-button>
-                </div>
-              </div>            
-            </van-uploader>
+            <div class="text-center p-4">
+              <van-uploader :after-read="afterRead" :max-count="1" name="averter" class="mb-4">
+                <div class="upload-main">
+                  <img
+                    class="upload-img"
+                    :src="form.avatar"
+                    alt=""
+                    v-if="form.avatar"
+                  />
+                  <img
+                    class="upload-img"
+                    src="@/assets/images/upload.jpg"
+                    alt=""
+                    v-else
+                  />
+                  <div class="ml-3">
+                    <p class="text-skyBlue mb-2">上傳圖片，預設為Line頭像</p>
+                    <van-button class="btn-darkBlue" icon="plus" block size="small">上傳檔案</van-button>
+                  </div>
+                </div>            
+              </van-uploader>
+              <van-field
+                  v-model="form.mark"
+                  rows="3"
+                  type="textarea"
+                  maxlength="100"
+                  placeholder="請輸入100字以內的簡介"
+                  show-word-limit
+                  :style="{border:'1px #e3e3e3 solid',borderRadius:'6px'}"
+              />
+            </div>
             
             <van-field
               v-model="form.real_name"
@@ -263,53 +275,198 @@ const onSubmit = async () => {
             />
             <van-field
               v-model="form.url"
-              label="網址"
+              label="年齡"
               name=""
-              placeholder="請輸入您的網址"
-              :rules="[{ validator: validatorUrl, message: '網址格式不正確,Ex. http://' }]"      
+              placeholder="請輸入您的年齡"   
+            />
+            <van-field name="radio" label="性別">
+              <template #input>
+                <van-radio-group v-model="checked" direction="horizontal">
+                  <van-radio name="1">男</van-radio>
+                  <van-radio name="2">女</van-radio>
+                </van-radio-group>
+              </template>
+            </van-field>
+
+
+            <van-field
+              v-model="fieldValue"
+              is-link
+              readonly
+              label="區域"
+              placeholder="請選擇縣市區域"
+              @click="show = true"
+            />
+            <van-popup v-model:show="show" round position="bottom">
+              <van-cascader
+                v-model="cascaderValue"
+                title="請選擇縣市區域"
+                :options="options"
+                @close="show = false"
+                @finish="onFinish"
+              />
+            </van-popup>
+
+
+            <van-field
+              v-model="fieldValue"
+              is-link
+              readonly
+              label="工作性質"
+              placeholder="請選擇工作性質"
+              @click="show = true"
+            />
+            <van-popup v-model:show="show" round position="bottom">
+              <van-cascader
+                v-model="cascaderValue"
+                title="請選擇工作性質"
+                :options="options"
+                @close="show = false"
+                @finish="onFinish"
+              />
+            </van-popup>
+            
+
+            <van-field readonly>
+              <template #label>是否公開<br/>資料搜尋</template>
+              <template #input>
+                <van-switch
+                  v-model="adSwitchStatus"
+                  @update:model-value="onUpdateValue"
+                  size="18px"
+                  active-color="#345068"
+                  inactive-color="#888888"
+                />
+              </template>
+            </van-field>
+
+
+
+            <div class="p-5">
+              <van-button block class="btn-darkBlue" native-type="submit">
+                確認修改
+              </van-button>
+            </div>
+          </van-form>
+        </van-cell-group>
+
+        <van-cell-group inset>
+          <van-form @submit="onSubmit12">
+            <van-nav-bar class="bg-lightPink">
+              <template #title>
+                <h6 class="text-darkBlue"><strong>人脈資訊</strong></h6>
+              </template>
+            </van-nav-bar>
+
+            <van-field 
+              name="pattern" 
+              placeholder="請輸入簡短的自我介紹" 
+              label-align="top" 
+            >
+              <template #label>
+                <h6><i class="fa-regular fa-gem text-darkBlue"></i> 一句話介紹自己</h6>
+              </template>
+            </van-field>
+            
+            <van-collapse v-model="activeName" accordion>
+              <van-collapse-item name="1">
+                <template #title>
+                  <h6><i class="fa-regular fa-gem text-darkBlue"></i> 我能分享的資源</h6>
+                </template>
+                <van-field  
+                  rows="3" 
+                  type="textarea"
+                  maxlength="100" 
+                  placeholder="請填寫能分享的資源" 
+                  show-word-limit 
+                >                  
+                </van-field>
+                <van-field 
+                  name="pattern" 
+                  placeholder="分享網址" 
+                />
+              </van-collapse-item>
+              <van-collapse-item title="标题2" name="2">
+                技术无非就是那些开发它的人的共同灵魂。
+              </van-collapse-item>
+              <van-collapse-item title="标题3" name="3">
+                在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
+              </van-collapse-item>
+            </van-collapse>
+
+            
+          </van-form>
+        </van-cell-group>
+    </div>
+    <!-- <div class="content" v-show="tabActive === 1" v-for="(v,idx) in form.addon" :key="idx">  -->
+    <div class="content" v-show="tabActive === 1"> 
+        <van-cell-group inset>
+          <van-form @submit="onSubmit2">            
+            <van-field
+              v-model="form.real_name"
+              label="姓名"
+              name="pattern"
+              placeholder="請輸入您的姓名"
+              :rules="[{ required: true, message: '姓名為必填' }]"
             />
             <van-field
-              v-model="form.line"
-              label="Line"
+              v-model="form.company"
+              label="公司名稱"
               name=""
-              placeholder="請輸入您的Line ID"
+              placeholder="請輸入您的公司名稱"
+              :rules="[{ required: true, message: '公司名稱必填' }]"
             />
             <van-field
-              v-model="form.facebook"
-              label="Facebook"
+              v-model="form.title"
+              label="職稱"
               name=""
-              placeholder="請輸入您的臉書連結"
+              placeholder="請輸入您的職稱"
             />
             <van-field
-              v-model="form.ig"
-              label="IG"
+              v-model="form.phone"
+              label="手機"
               name=""
-              placeholder="請輸入您的IG ID"
+              type="tel"
+              placeholder="Ex. 0900000001 不要有空格"
+              :rules="[{ required: true, message: '手機號必填' },{ pattern: /\d{10}/ , message: '手機號格式錯誤' }]"
             />
             <van-field
-              v-model="form.youtube"
-              label="YouTube"
+              v-model="form.tel"
+              label="市話"
               name=""
-              placeholder="請輸入您的Youtube連結"
+              type="tel"
+              placeholder="請輸入您的市話"
+              :rules="[{ validator: validatorTel, message: '市話格式不正確,Ex. 02xxxx or 02-xxxx' }]"      
             />
             <van-field
-              v-model="form.mark"
-              rows="3"
-              autosize
-              label="簡介"
-              type="textarea"
-              maxlength="100"
-              placeholder="請輸入簡介"
-              show-word-limit
-            />    
-            
-            <van-button round block type="primary" native-type="submit">
-              送出
-            </van-button>
+              v-model="form.email"
+              label="Email"
+              name=""
+              placeholder="請輸入您的Email"
+              :rules="[{ required: true, message: 'Email必填' },{ pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/ , message: 'Email格式錯誤' }]"
+            />
+            <van-field
+              v-model="form.address"
+              label="住址"
+              name=""
+              placeholder="請輸入您的地址"
+            />
+            <van-field
+              v-model="form.url"
+              label="年齡"
+              name=""
+              placeholder="請輸入您的年齡"   
+            />
+
+            <div class="p-5">
+              <van-button block class="btn-darkBlue" native-type="submit">
+                確認修改
+              </van-button>
+            </div>
           </van-form>
         </van-cell-group>
 
-        <van-cell-group v-show="tabActive === 1" v-for="(v,idx) in form.addon" :key="idx">
+        <!-- <van-cell-group inset>
           <div class="text-center">
             <van-button type="primary" icon="arrow-up" plain hairline @click="onMoveBtn(0,idx)">上移</van-button>
             <van-button type="primary" icon="arrow-down" plain hairline @click="onMoveBtn(1,idx)">下移</van-button>
@@ -330,36 +487,56 @@ const onSubmit = async () => {
           <div class="add-btn" @click="onAddBtn">
             <van-button type="success" plain hairline>新增按鈕</van-button>
           </div>
-        </van-cell-group>
-
-        <van-cell-group v-show="tabActive === 2">
-        </van-cell-group>
-
-        <van-cell-group v-show="tabActive === 3">
-        </van-cell-group>
-
+        </van-cell-group> -->
+    </div>
+    <div class="content" v-show="tabActive === 2"> 
+      <van-cell-group inset>
+        <form action="/">
+          <van-search
+            v-model="value"
+            show-action
+            placeholder="请输入搜索关键词"
+            @search="onSearch"
+            @cancel="onCancel"
+          />
+          <van-list
+            v-model:loading="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+            @load="onLoad"
+          >
+            <van-cell v-for="item in list" :key="item" :title="item" />
+          </van-list>
+        </form>
+      </van-cell-group>
+    </div>
+    <div class="content" v-show="tabActive === 3"> 
+      <van-cell-group inset>
+        test3
+      </van-cell-group>
     </div>
 
     <!-- <Footer/> -->
     
-    <van-overlay :show="crop.show" @click="crop.show = false" />
-    <div class="cropper-section" v-if="crop.show">
-      <div class="crop-area">
-        <cropper
+    <van-popup class="cropPopup" v-model:show="crop.show" closeable>
+      <h5 class="text-center mt-3">檔案裁切上傳</h5>
+      <div class="cropper-section">
+        <div class="crop-area">
+          <cropper
             class="cropper"
             ref="myCrop"
             :src="crop.img"
             :stencil-props="{
-                aspectRatio: 1/1
+              aspectRatio: 1 / 1,
             }"
             :auto-zoom="true"
-        />          
-      </div>
-      <div class="crop-btn">
-        <van-button type="primary" size="small" plain @click="onClose">取消</van-button>
-        <van-button type="success" size="small" plain @click="onCrop">剪裁</van-button>    
+          />
+        </div>
+        <van-button round class="btn-tomatoRed rounded-pill w-50 mt-3" size="small" @click="onCrop">
+          裁切確認
+        </van-button>
       </div>
-    </div>
+    </van-popup> 
 
   </div>
 </template>
@@ -367,42 +544,5 @@ const onSubmit = async () => {
 <style src="@/assets/css/main.css"></style>
 
 <style lang="less" scoped>
-.upload-main{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.upload-img{
-  width: 80px;
-  aspect-ratio: 1/1;
-  border-radius: 50%;
-}
 
-.cropper {
-  height: 300px;
-  // width: 300px;
-  background: #DDD;
-}
-
-.cropper-section{
-  margin: 0 auto;
-  position: fixed;
-  text-align: center;
-  top: 50px;
-  // left: 0;
-  height: 350px;
-  width: 100%;
-  max-width: 500px;
-  background: #DDD;
-  z-index: 8888;
-  .crop-area{
-    margin: 5 auto;
-    width: 100%;
-    height: 330px;
-  }
-  .crop-btn{
-    background-color: #666;
-    text-align: center;
-  }
-}
 </style>
\ No newline at end of file
diff --git a/src/views/Register/index.vue b/src/views/Register/index.vue
index a8fc9c5..9d94756 100644
--- a/src/views/Register/index.vue
+++ b/src/views/Register/index.vue
@@ -153,31 +153,37 @@ const onSubmit = async () => {
 
 <template>
   <div class="reg-container bg-lightPink">
-    <van-nav-bar class="bg-skyBlue py-1" :title="title" />
+    <van-nav-bar class="bg-skyBlue py-2">
+      <template #title>
+        <h5 class="text-white mb-1"><strong>{{title}}</strong></h5>
+      </template>
+    </van-nav-bar>
     
     <div class="content">
       <van-form @submit="onSubmit">
-        <van-cell-group inset class="text-center">
-          <van-uploader :after-read="afterRead" :max-count="1" name="averter" class="my-4">
-            <div class="upload-main">
-              <img
-                class="upload-img"
-                :src="form.avatar"
-                alt=""
-                v-if="form.avatar"
-              />
-              <img
-                class="upload-img"
-                src="@/assets/images/upload.jpg"
-                alt=""
-                v-else
-              />
-              <div class="ml-3">
-                <p class="text-skyBlue mb-2">上傳圖片，預設為Line頭像</p>
-                <van-button class="btn-darkBlue" icon="plus" block type="primary" size="small">上傳檔案</van-button>
-              </div>
-            </div>            
-          </van-uploader>
+        <van-cell-group inset>
+          <div class="text-center">
+            <van-uploader :after-read="afterRead" :max-count="1" name="averter" class="my-4">
+              <div class="upload-main">
+                <img
+                  class="upload-img"
+                  :src="form.avatar"
+                  alt=""
+                  v-if="form.avatar"
+                />
+                <img
+                  class="upload-img"
+                  src="@/assets/images/upload.jpg"
+                  alt=""
+                  v-else
+                />
+                <div class="ml-3">
+                  <p class="text-skyBlue mb-2">上傳圖片，預設為Line頭像</p>
+                  <van-button class="btn-darkBlue" icon="plus" block type="primary" size="small">上傳檔案</van-button>
+                </div>
+              </div>            
+            </van-uploader>
+          </div>
 
           <van-field
             v-model="form.real_name"
@@ -274,80 +280,39 @@ const onSubmit = async () => {
         </van-cell-group>
         <div class="m-3 d-flex">
           <van-button round block class="btn-skyBlue rounded-pill mx-1" @click="leaveReg">
-            以後在說
+            <h6>以後在說</h6>
           </van-button>
           <van-button round block class="btn-darkBlue rounded-pill mx-1" native-type="submit">
-            送出註冊
+            <h6>送出註冊</h6>
           </van-button>
-          <br />
         </div>
       </van-form>
     </div>
 
-    <van-overlay :show="crop.show" @click="crop.show = false" />
-    <div class="cropper-section" v-if="crop.show">
-      <div class="crop-area">
-        <cropper
-          class="cropper"
-          ref="myCrop"
-          :src="crop.img"
-          :stencil-props="{
-            aspectRatio: 1 / 1,
-          }"
-          :auto-zoom="true"
-        />
-      </div>
-      <div class="crop-btn">
-        <van-button type="primary" size="small" plain @click="onClose">
-          取消
-        </van-button>
-        <van-button type="success" size="small" plain @click="onCrop">
-          剪裁
+    <van-popup class="cropPopup" v-model:show="crop.show" round closeable>
+      <h5 class="text-center mt-3">檔案裁切上傳</h5>
+      <div class="cropper-section">
+        <div class="crop-area">
+          <cropper
+            class="cropper"
+            ref="myCrop"
+            :src="crop.img"
+            :stencil-props="{
+              aspectRatio: 1 / 1,
+            }"
+            :auto-zoom="true"
+          />
+        </div>
+        <van-button round class="btn-tomatoRed rounded-pill w-50 mt-3" size="small" @click="onCrop">
+          <h6>裁切確認</h6>
         </van-button>
       </div>
-    </div>
+    </van-popup> 
   </div>
 </template>
 
 <style src="@/assets/css/main.css"></style>
 
 <style lang="less" scoped>
-.upload-main{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.upload-img{
-  width: 80px;
-  aspect-ratio: 1/1;
-  border-radius: 50%;
-}
-
-.cropper {
-  height: 300px;
-  // width: 300px;
-  background: #DDD;
-}
 
-.cropper-section{
-  margin: 0 auto;
-  position: fixed;
-  text-align: center;
-  top: 50px;
-  // left: 0;
-  height: 350px;
-  width: 100%;
-  max-width: 500px;
-  background: #DDD;
-  z-index: 8888;
-  .crop-area{
-    margin: 5 auto;
-    width: 100%;
-    height: 330px;
-  }
-  .crop-btn{
-    background-color: #666;
-    text-align: center;
-  }
-}
 </style>