diff --git a/src/api/index.js b/src/api/index.js
index 41d4384..831f18c 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -10,7 +10,11 @@ export const bindCard = async (params) =>
 export const checkLineId = async (lineid) =>
   ajax(`/auth/checkLineId`, { lineid }, "GET");
 
-export const getUserInfo = async () => ajax(`/user/getUserInfo`);
+export const getUserInfo = async () =>
+  ajax(`/user/getUserInfo`);
+
+export const updateUserInfo = async () =>
+  ajax(`/user/updateUserInfo`);
 
 export const setUserLevel = async (level) =>
   ajax(`/user/setUserLevel`, { level }, "POST");
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 8906a4c..ce5d091 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -27,16 +27,16 @@
 }
 
 .text-moBlue {
-  color: #486499 !important;
+  color: #4a677d !important;
 }
 
 .bg-moBlue {
-  background-color: #486499 !important;
+  background-color: #4a677d !important;
 }
 
 .bd-moBlue {
   border-style: solid;
-  border-color: #486499 !important;
+  border-color: #4a677d !important;
 }
 
 .text-darkBlue {
@@ -339,13 +339,13 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .btn-moBlue {
-  border: 1px solid #486499 !important;
+  border: 1px solid #4a677d !important;
   color: #fff;
-  background-color: #486499;
+  background-color: #4a677d;
 }
 .btn-moBlue:hover {
   color: #fff;
-  background-color: #384d76;
+  background-color: #374d5d;
 }
 
 .btn-darkBlue {
@@ -431,14 +431,14 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .btn-outline-moBlue {
-  border: 1px solid #486499;
-  color: #486499;
+  border: 1px solid #4a677d;
+  color: #4a677d;
   background-color: transparent;
   background-color: #fff;
 }
 .btn-outline-moBlue:hover {
   color: #fff;
-  background-color: #486499;
+  background-color: #4a677d;
 }
 
 .btn-outline-darkBlue {
@@ -639,6 +639,11 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 /* =========================================  stage  ============================================= */
+.page {
+  min-height: 100vh;
+  background-color: #f1e6e2;
+}
+
 .content {
   padding: 15px 0;
   background-color: #b2c4ce;
diff --git a/src/assets/sass/base/_global.scss b/src/assets/sass/base/_global.scss
index 3e73285..dc3f189 100644
--- a/src/assets/sass/base/_global.scss
+++ b/src/assets/sass/base/_global.scss
@@ -18,7 +18,7 @@ $radius: (
 $basicColor: (
    lightBlue:#b2c4ce,
    skyBlue:#5b7b94,
-   moBlue:#486499,
+   moBlue:#4a677d,
    darkBlue:#345068,
    lightPink:#f1e6e2,
    cherry:#E31D64,
diff --git a/src/assets/sass/layout/_layout.scss b/src/assets/sass/layout/_layout.scss
index b27e847..3ee3198 100644
--- a/src/assets/sass/layout/_layout.scss
+++ b/src/assets/sass/layout/_layout.scss
@@ -93,6 +93,11 @@
 
 /* =========================================  stage  ============================================= */
 
+.page{
+    min-height:100vh;
+    background-color: #f1e6e2 ;
+}
+
 .content{
     padding: 15px 0;
     background-color: #b2c4ce;
@@ -103,19 +108,19 @@
     justify-content: center;
     align-items: center;
     .upload-img{
-      width: 100px;
-      aspect-ratio: 1/1;
-      border-radius: 50%;
-      border:1px #d8d8d8 solid;
+        width: 100px;
+        aspect-ratio: 1/1;
+        border-radius: 50%;
+        border:1px #d8d8d8 solid;
     }
-  }
-  
-  .cropper {
+}
+
+.cropper {
     height: 300px;
     background: #DDD;
-  }
-  
-  .cropper-section{
+}
+
+.cropper-section{
     margin: 0 auto;
     position: fixed;
     text-align: center;
@@ -124,14 +129,14 @@
     max-width: 500px;
     z-index: 8888;
     .crop-area{
-      margin: 5 auto;
-      width: 100%;
+        margin: 5 auto;
+        width: 100%;
     }
     .crop-btn{
-      background-color: #666;
-      text-align: center;
+        background-color: #666;
+        text-align: center;
     }
-  }
+}
 
 /* =========================================  other  ============================================= */
 
diff --git a/src/views/Card/Edit.vue b/src/views/Card/Edit.vue
index 2c383c4..116edac 100644
--- a/src/views/Card/Edit.vue
+++ b/src/views/Card/Edit.vue
@@ -1,553 +1,3 @@
-<template>
-  <van-nav-bar
-    title="商務卡片"
-    right-text="關閉"
-    @click-right="$router.push('/')"
-  />
-  <keep-alive>
-    <div id="app" class="container my-4">
-      <div class="card-title">
-        <div></div>
-        <div>
-          <van-button
-            icon="video"
-            type="primary"
-            @click="$router.push('/card/video')"
-            >教學影片</van-button
-          >
-        </div>
-        <div>
-          <van-button
-            icon="browsing-history"
-            type="primary"
-            @click="handlePreview"
-          >
-            預覽
-          </van-button>
-        </div>
-      </div>
-      <div class="card my-2">
-        <div class="card-header">
-          <ul class="card-header-tabs nav nav-tabs">
-            <li class="nav-item" @click="form.page = 'setting'">
-              <button
-                type="button"
-                class="nav-link"
-                :class="{ active: form.page === 'setting' }"
-              >
-                設定
-              </button>
-            </li>
-            <li
-              class="nav-item"
-              v-for="(card, index) in form.json5.cards"
-              :key="index"
-              @click="form.page = index + 1"
-            >
-              <button
-                type="button"
-                class="nav-link"
-                :class="{ active: form.page === index + 1 }"
-              >
-                {{ index + 1 }}
-              </button>
-            </li>
-            <li
-              class="nav-item"
-              @click="addCard"
-              v-if="form.json5.cards.length < 10"
-            >
-              <button type="button" class="nav-link">
-                <i class="fa fa-plus-circle"></i> +
-              </button>
-            </li>
-          </ul>
-        </div>
-        <!---->
-        <div class="card-content" v-if="form.page === 'setting'">
-          <div class="card-body">
-            <div class="form-group mb-2 was-validated">
-              <label for="utel-altText">標題文字</label>
-              <input
-                pattern=".+"
-                required="required"
-                id="utel-altText"
-                class="form-control form-control-sm"
-                v-model="form.title"
-              />
-              <small class="form-text text-muted"
-                >與我的名片切換時顯示的文字。</small
-              >
-            </div>
-            <div class="form-group mb-2 was-validated">
-              <label for="utel-showNfc">是否顯示於感應名片</label>
-              <br />
-              <van-switch v-model="form.showNfc" />
-              <small class="form-text text-muted"
-                >與我的名片切換時顯示的文字。</small
-              >
-            </div>
-          </div>
-        </div>
-
-        <div class="card-content" v-else>
-          <div class="card-body pb-2 pt-3">
-            <div class="row">
-              <div class="col-sm-12" v-if="form.json5.cards.length > 1">
-                <div class="form-group mb-2 mb-2">
-                  <label>控制卡片</label>
-                  <div class="d-flex btn-group mb-1">
-                    <button
-                      type="button"
-                      class="btn btn-sm btn-outline-info"
-                      @click="moveCard(0, form.page)"
-                    >
-                      <i class="iconfont icon-arrow-o-l"></i> 前移
-                    </button>
-                    <button
-                      type="button"
-                      class="btn btn-sm btn-outline-info"
-                      @click="moveCard(1, form.page)"
-                    >
-                      <i class="iconfont icon-arrow-o-r"></i> 後移
-                    </button>
-                    <button
-                      type="button"
-                      class="btn btn-sm btn-outline-danger"
-                      @click="delCard(form.page)"
-                    >
-                      <i class="iconfont icon-delete"></i> 刪除
-                    </button>
-                  </div>
-                  <small class="form-text text-muted"
-                    >你可以點選前後移按鈕來移動卡片。</small
-                  >
-                </div>
-              </div>
-              <div class="col-sm-12">
-                <div class="form-group mb-2 was-validated">
-                  <label for="vcard-ratio">圖片長寬比</label>
-                  <input
-                    pattern=".+"
-                    required="required"
-                    id="vcard-ratio"
-                    class="form-control form-control-sm"
-                    v-model="form.json5.cards[form.page - 1].ratio"
-                  />
-                  <small class="form-text text-muted">20:13 1:1 6:8。</small>
-                </div>
-                <div class="form-group mb-2 was-validated">
-                  <label for="vcard-image"> 卡片圖片 </label>
-                  <div>
-                    <van-uploader
-                      :after-read="afterRead"
-                      :max-count="1"
-                      name="cardimage"
-                      @delete="handleDelete"
-                    >
-                      <template
-                        v-if="form.json5.cards[form.page - 1].image.length > 0"
-                      >
-                        <div class="upload-main">
-                          <img
-                            class="upload-img"
-                            :src="form.json5.cards[form.page - 1].image"
-                            alt=""
-                          />
-                        </div>
-                      </template>
-                      <template v-else>
-                        <div class="upload-main">
-                          <img
-                            class="upload-img"
-                            src="@/assets/images/upload.jpg"
-                          />
-                          <p>請上傳圖片</p>
-                        </div>
-                      </template>
-                    </van-uploader>
-                  </div>
-                  <small class="form-text text-muted"></small>
-                </div>
-                <div class="form-group mb-2 was-validated">
-                    <label for="vcard-link">圖片網址連結</label>
-                    <input
-                        pattern="(https?://|line://|tel:|mailto:)\S+"
-                        id="vcard-link"
-                        inputmode="url"
-                        type="url"
-                        class="form-control form-control-sm"
-                        v-model="form.json5.cards[form.page - 1].link"
-                    />
-                    <small class="form-text text-muted">
-                    連結(需輸入完整網址,http://..,https://...)
-                    </small>
-                </div>
-                <div class="form-group mb-2 was-validated">
-                  <label for="vcard-titleColor">卡片底色</label>
-                  <div class="input-group input-group-sm">
-                    <input
-                      pattern="#[0-9a-fA-F]{6}"
-                      required="required"
-                      id="vcard-bgColor"
-                      inputmode="url"
-                      class="form-control"
-                      v-model="form.json5.cards[form.page - 1].bgColor"
-                    />
-                    <div class="input-group-append">
-                      <input
-                        type="color"
-                        class="form-control form-control-color"
-                        v-model="form.json5.cards[form.page - 1].bgColor"
-                      />
-                      &nbsp;色卡
-                    </div>
-                  </div>
-                  <small class="form-text text-muted"
-                    >請填寫卡片標題文字的顏色。</small
-                  >
-                </div>
-                <div class="form-group mb-2 was-validated">
-                  <label for="vcard-title">卡片標題</label>
-                  <input
-                    pattern=".+"
-                    required="required"
-                    id="vcard-title"
-                    class="form-control form-control-sm"
-                    v-model="form.json5.cards[form.page - 1].title"
-                  />
-                  <small class="form-text text-muted">請填寫卡片標題。</small>
-                </div>
-                <div class="form-group mb-2 was-validated">
-                  <label for="vcard-titleSize">標題文字大小(最大5xl，最小xxs)</label>
-                  <div class="input-group input-group-sm">
-                    <input
-                      pattern="[0-9a-zA-Z]+"
-                      required="required"
-                      id="vcard-titleSize"
-                      class="form-control form-control-sm"
-                      v-model="form.json5.cards[form.page - 1].titleSize"
-                    />
-                    <div class="input-group-append">
-                      <button
-                        type="button"
-                        data-toggle="dropdown"
-                        class="btn btn-outline-secondary dropdown-toggle"
-                        aria-expanded="false"
-                      >
-                        請選擇文字大小
-                      </button>
-                      <div class="dropdown-menu py-0" style="">
-                        <button type="button" class="dropdown-item" @click="changeSize('titleSize',size)" v-for="(size,index) in sizeArr" :key="index">{{size}}</button>
-                      </div>
-                    </div>
-                  </div>
-                  <small class="form-text text-muted"
-                    >請填寫卡片標題的文字大小。
-                    </small>
-                </div>
-                <div class="form-group mb-2 was-validated">
-                  <label for="vcard-titleColor">標題文字顏色</label>
-                  <div class="input-group input-group-sm">
-                    <input
-                      pattern="#[0-9a-fA-F]{6}"
-                      required="required"
-                      id="vcard-titleColor"
-                      inputmode="url"
-                      class="form-control"
-                      v-model="form.json5.cards[form.page - 1].titleColor"
-                    />
-                    <div class="input-group-append">
-                      <input
-                        type="color"
-                        class="form-control form-control-color"
-                        v-model="form.json5.cards[form.page - 1].titleColor"
-                      />
-                    </div>
-                  </div>
-                  <small class="form-text text-muted"
-                    >請填寫卡片標題文字的顏色。</small
-                  >
-                </div>
-                <div class="form-group mb-2 was-validated">
-                  <label for="vcard-desc">卡片說明</label>
-                  <textarea
-                    id="vcard-desc"
-                    pattern=".+"
-                    required="required"
-                    class="form-control form-control-sm"
-                    v-model="form.json5.cards[form.page - 1].desc"
-                    style="height: 100px"
-                  ></textarea>
-                  <small class="form-text text-muted">請填寫卡片說明。</small>
-                </div>
-                <div class="form-group mb-2 was-validated">
-                  <label for="vcard-descSize">說明文字大小(最大5xl，最小xxs)</label>
-                  <div class="input-group input-group-sm">
-                    <input
-                      pattern="[0-9a-zA-Z]+"
-                      required="required"
-                      id="vcard-descSize"
-                      class="form-control form-control-sm"
-                      v-model="form.json5.cards[form.page - 1].descSize"
-                    />
-                    <div class="input-group-append">
-                      <button
-                        type="button"
-                        data-toggle="dropdown"
-                        class="btn btn-outline-secondary dropdown-toggle"
-                        aria-expanded="false"
-                      >
-                        請選擇文字大小
-                      </button>
-                      <div class="dropdown-menu py-0" style="">
-                        <button type="button" class="dropdown-item" @click="changeSize('descSize',size)" v-for="(size,index) in sizeArr" :key="index">{{size}}</button>
-                      </div>
-                    </div>
-                  </div>
-                  <small class="form-text text-muted"
-                    >請填寫卡片標題的文字大小。
-                    </small>
-                </div>
-                <div class="form-group mb-2 was-validated">
-                  <label for="vcard-titleColor">說明文字顏色</label>
-                  <div class="input-group input-group-sm">
-                    <input
-                      pattern="#[0-9a-fA-F]{6}"
-                      required="required"
-                      id="vcard-titleColor"
-                      inputmode="url"
-                      class="form-control"
-                      v-model="form.json5.cards[form.page - 1].descColor"
-                    />
-                    <div class="input-group-append">
-                      <input
-                        type="color"
-                        class="form-control form-control-color"
-                        v-model="form.json5.cards[form.page - 1].descColor"
-                      />
-                    </div>
-                  </div>
-                  <small class="form-text text-muted"
-                    >請填寫卡片標題文字的顏色。</small
-                  >
-                </div>
-                <!-- <div class="form-group mb-2 was-validated">
-                  <label for="vcard-title">卡片連結</label>
-                  <input
-                    pattern=".+"
-                    required="required"
-                    id="vcard-title"
-                    class="form-control form-control-sm"
-                    v-model="form.json5.cards[form.page - 1].title"
-                  />
-                  <small class="form-text text-muted">請填寫卡片標題。</small>
-                </div> -->
-              </div>
-            </div>
-          </div>
-          <ul class="list-group list-group-flush">
-            <li
-              class="list-group-item pb-2 pt-3"
-              v-for="(btn, index) in form.json5.cards[form.page - 1].btns"
-              :key="index"
-            >
-              <div class="row">
-                <div class="col-sm-12">
-                  <div class="form-group mb-2">
-                    <label>控制按鈕 {{ index + 1 }}</label>
-                    <div class="d-flex btn-group mb-1">
-                      <button
-                        type="button"
-                        class="btn btn-sm btn-outline-info"
-                        @click="moveBtn(0, index)"
-                        v-if="form.json5.cards[form.page - 1].btns.length > 1"
-                      >
-                        <i class="iconfont icon-arrow-o-u"></i> 上移
-                      </button>
-                      <button
-                        type="button"
-                        class="btn btn-sm btn-outline-info"
-                        @click="moveBtn(1, index)"
-                        v-if="form.json5.cards[form.page - 1].btns.length > 1"
-                      >
-                        <i class="iconfont icon-arrow-o-d"></i> 下移
-                      </button>
-                      <button
-                        type="button"
-                        class="btn btn-sm btn-outline-danger"
-                        @click="delBtn(index)"
-                      >
-                        <i class="iconfont icon-delete"></i> 刪除
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-sm-12">
-                  <div class="form-group mb-2 was-validated">
-                    <label for="cardbtn-text-0"
-                      >按鈕 {{ index + 1 }} 文字</label
-                    >
-                    <input
-                      pattern=".+"
-                      required="required"
-                      id="cardbtn-text-0"
-                      class="form-control form-control-sm"
-                      v-model="btn.text"
-                    />
-                  </div>
-                  <div class="form-group mb-2 was-validated">
-                    <label for="cardbtn-link-0"
-                      >按鈕
-                      {{
-                        index + 1
-                      }}
-                      連結(需輸入完整網址,http://..,https://...)</label
-                    >
-                    <input
-                      pattern="(https?://|line://|tel:|mailto:)\S+"
-                      required="required"
-                      inputmode="url"
-                      type="url"
-                      id="cardbtn-link-0"
-                      class="form-control form-control-sm"
-                      v-model="btn.link"
-                    />
-                  </div>
-                  <div class="form-group mb-2 was-validated">
-                    <label for="vcard-titleColor">按鈕背景顏色</label>
-                    <div class="input-group input-group-sm">
-                      <input
-                        pattern="#[0-9a-fA-F]{6}"
-                        required="required"
-                        id="vcard-titleColor"
-                        inputmode="url"
-                        class="form-control"
-                        v-model="btn.color"
-                      />
-                      <div class="input-group-append">
-                        <input
-                          type="color"
-                          class="form-control form-control-color"
-                          v-model="btn.color"
-                        />
-                      </div>
-                    </div>
-                    <!-- <small class="form-text text-muted">請填寫卡片標題文字的顏色。</small> -->
-                  </div>
-                <div class="form-group mb-2 was-validated">
-                  <label for="vcard-btnHeight">按鈕大小</label>
-                  <div class="input-group input-group-sm">
-                    <input
-                      pattern="[0-9a-zA-Z]+"
-                      required="required"
-                      id="vcard-btnHeight"
-                      class="form-control form-control-sm"
-                      v-model="btn.btnHeight"
-                    />
-                    <div class="input-group-append">
-                      <button
-                        type="button"
-                        data-toggle="dropdown"
-                        class="btn btn-outline-secondary dropdown-toggle"
-                        aria-expanded="false"
-                      >
-                        請選擇按鈕大小
-                      </button>
-                      <div class="dropdown-menu py-0" style="">
-                        <button type="button" class="dropdown-item" @click="btn.btnHeight='sm'" >sm</button>
-                        <button type="button" class="dropdown-item" @click="btn.btnHeight='md'" >md</button>
-                      </div>
-                    </div>
-                  </div>
-                  <small class="form-text text-muted"
-                    >請填寫卡片標題的文字大小。
-                    </small>
-                </div>
-
-                </div>
-              </div>
-            </li>
-            <li class="list-group-item">
-              <button
-                type="button"
-                class="btn btn-outline-success"
-                @click="addBtn(form.page)"
-              >
-                <i class="fa fa-plus-circle"></i> 新增按鈕
-              </button>
-              <button
-                type="button"
-                class="btn btn-outline-success"
-                @click="addShareBtn(form.page)"
-              >
-                <i class="fa fa-plus-circle"></i> 新增分享按鈕
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="d-flex mx-n2 my-2 row">
-        <div class="btn flex-fill mx-2 my-1 btn-primary" @click="handleSubmit">
-          <i class="fa mr-2 fa-id-card-o"></i> 建立名片
-        </div>
-      </div>
-      <div
-        id="modal-exportimport"
-        data-backdrop="static"
-        data-keyboard="false"
-        tabindex="-1"
-        class="fade modal"
-      >
-        <div
-          class="align-items-stretch modal-dialog modal-dialog-centered modal-xl"
-        >
-          <div class="modal-content">
-            <div class="d-flex flex-column modal-body">
-              <textarea
-                class="form-control form-control-sm flex-fill"
-              ></textarea>
-              <small class="form-text text-muted"
-                >請複製匯出的資料，或貼上之前的資料並點一下「匯入」按鈕。</small
-              >
-            </div>
-            <div class="modal-footer">
-              <button type="button" class="btn btn-outline-success">
-                複製
-              </button>
-              <button type="button" class="btn btn-secondary">關閉</button>
-              <button type="button" class="btn btn-primary">匯入</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </keep-alive>
-  <Footer v-if="showFooter" />
-  <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: 20 / 13,
-        }"
-        :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>
-  </div>
-</template>
-
 <script>
 import Footer from "@/components/Footer.vue";
 import FlexView from "@/components/FlexView.vue";
@@ -974,6 +424,566 @@ export default defineComponent({
 });
 </script>
 
+<template>
+  <div class="edit page">    
+    <van-nav-bar class="bg-skyBlue py-1" left-arrow @click-left="$router.push('/')">
+      <template #title>
+        <h5 class="text-white mb-1"><strong>商務卡片</strong></h5>
+      </template>
+      <template #left>
+        <h4><i class="fa-solid fa-angle-left text-white" :style="{opacity:0.5}"></i></h4>
+      </template>
+    </van-nav-bar>
+
+    <div class="content">
+      <van-cell-group inset class="">
+        <van-cell class="bg-lightPink">
+          <template #title>
+            <h6 class="text-darkBlue"><strong>卡片設定</strong></h6>
+          </template>
+          <template #value>
+            <van-button size="small" class="ml-1 btn-moBlue" icon="tv-o" hairline>教學影片</van-button>
+            <van-button size="small" class="ml-1 btn-skyBlue" icon="eye-o" hairline>預覽</van-button>
+          </template>
+        </van-cell>
+        
+        <div class="form-group mb-2 was-validated">
+          <label for="utel-altText">標題文字</label>
+          <input
+            pattern=".+"
+            required="required"
+            id="utel-altText"
+            class="form-control form-control-sm"
+            v-model="form.title"
+          />
+          <small class="form-text text-muted"
+            >與我的名片切換時顯示的文字。</small
+          >
+        </div>
+        <div class="form-group mb-2 was-validated">
+          <label for="utel-showNfc">是否顯示於感應名片</label>
+          <br />
+          <van-switch v-model="form.showNfc" />
+          <small class="form-text text-muted"
+            >與我的名片切換時顯示的文字。</small
+          >
+        </div>
+
+      </van-cell-group>
+
+    </div>
+
+    <van-cell-group inset class="mt-3">
+      <keep-alive>
+        <div id="app" class="container my-4">
+          
+          <div class="card my-2">
+            <div class="card-header">
+              <ul class="card-header-tabs nav nav-tabs">
+                <li class="nav-item" @click="form.page = 'setting'">
+                  <button
+                    type="button"
+                    class="nav-link"
+                    :class="{ active: form.page === 'setting' }"
+                  >
+                    設定
+                  </button>
+                </li>
+                <li
+                  class="nav-item"
+                  v-for="(card, index) in form.json5.cards"
+                  :key="index"
+                  @click="form.page = index + 1"
+                >
+                  <button
+                    type="button"
+                    class="nav-link"
+                    :class="{ active: form.page === index + 1 }"
+                  >
+                    {{ index + 1 }}
+                  </button>
+                </li>
+                <li
+                  class="nav-item"
+                  @click="addCard"
+                  v-if="form.json5.cards.length < 10"
+                >
+                  <button type="button" class="nav-link">
+                    <i class="fa fa-plus-circle"></i> +
+                  </button>
+                </li>
+              </ul>
+            </div>
+            <!---->
+            <div class="card-content" v-if="form.page === 'setting'">
+              <div class="card-body">
+                  
+              </div>
+            </div>
+
+            <div class="card-content" v-else>
+              <div class="card-body pb-2 pt-3">
+                <div class="row">
+                  <div class="col-sm-12" v-if="form.json5.cards.length > 1">
+                    <div class="form-group mb-2 mb-2">
+                      <label>控制卡片</label>
+                      <div class="d-flex btn-group mb-1">
+                        <button
+                          type="button"
+                          class="btn btn-sm btn-outline-info"
+                          @click="moveCard(0, form.page)"
+                        >
+                          <i class="iconfont icon-arrow-o-l"></i> 前移
+                        </button>
+                        <button
+                          type="button"
+                          class="btn btn-sm btn-outline-info"
+                          @click="moveCard(1, form.page)"
+                        >
+                          <i class="iconfont icon-arrow-o-r"></i> 後移
+                        </button>
+                        <button
+                          type="button"
+                          class="btn btn-sm btn-outline-danger"
+                          @click="delCard(form.page)"
+                        >
+                          <i class="iconfont icon-delete"></i> 刪除
+                        </button>
+                      </div>
+                      <small class="form-text text-muted"
+                        >你可以點選前後移按鈕來移動卡片。</small
+                      >
+                    </div>
+                  </div>
+                  <div class="col-sm-12">
+                    <div class="form-group mb-2 was-validated">
+                      <label for="vcard-ratio">圖片長寬比</label>
+                      <input
+                        pattern=".+"
+                        required="required"
+                        id="vcard-ratio"
+                        class="form-control form-control-sm"
+                        v-model="form.json5.cards[form.page - 1].ratio"
+                      />
+                      <small class="form-text text-muted">20:13 1:1 6:8。</small>
+                    </div>
+                    <div class="form-group mb-2 was-validated">
+                      <label for="vcard-image"> 卡片圖片 </label>
+                      <div>
+                        <van-uploader
+                          :after-read="afterRead"
+                          :max-count="1"
+                          name="cardimage"
+                          @delete="handleDelete"
+                        >
+                          <template
+                            v-if="form.json5.cards[form.page - 1].image.length > 0"
+                          >
+                            <div class="upload-main">
+                              <img
+                                class="upload-img"
+                                :src="form.json5.cards[form.page - 1].image"
+                                alt=""
+                              />
+                            </div>
+                          </template>
+                          <template v-else>
+                            <div class="upload-main">
+                              <img
+                                class="upload-img"
+                                src="@/assets/images/upload.jpg"
+                              />
+                              <p>請上傳圖片</p>
+                            </div>
+                          </template>
+                        </van-uploader>
+                      </div>
+                      <small class="form-text text-muted"></small>
+                    </div>
+                    <div class="form-group mb-2 was-validated">
+                        <label for="vcard-link">圖片網址連結</label>
+                        <input
+                            pattern="(https?://|line://|tel:|mailto:)\S+"
+                            id="vcard-link"
+                            inputmode="url"
+                            type="url"
+                            class="form-control form-control-sm"
+                            v-model="form.json5.cards[form.page - 1].link"
+                        />
+                        <small class="form-text text-muted">
+                        連結(需輸入完整網址,http://..,https://...)
+                        </small>
+                    </div>
+                    <div class="form-group mb-2 was-validated">
+                      <label for="vcard-titleColor">卡片底色</label>
+                      <div class="input-group input-group-sm">
+                        <input
+                          pattern="#[0-9a-fA-F]{6}"
+                          required="required"
+                          id="vcard-bgColor"
+                          inputmode="url"
+                          class="form-control"
+                          v-model="form.json5.cards[form.page - 1].bgColor"
+                        />
+                        <div class="input-group-append">
+                          <input
+                            type="color"
+                            class="form-control form-control-color"
+                            v-model="form.json5.cards[form.page - 1].bgColor"
+                          />
+                          &nbsp;色卡
+                        </div>
+                      </div>
+                      <small class="form-text text-muted"
+                        >請填寫卡片標題文字的顏色。</small
+                      >
+                    </div>
+                    <div class="form-group mb-2 was-validated">
+                      <label for="vcard-title">卡片標題</label>
+                      <input
+                        pattern=".+"
+                        required="required"
+                        id="vcard-title"
+                        class="form-control form-control-sm"
+                        v-model="form.json5.cards[form.page - 1].title"
+                      />
+                      <small class="form-text text-muted">請填寫卡片標題。</small>
+                    </div>
+                    <div class="form-group mb-2 was-validated">
+                      <label for="vcard-titleSize">標題文字大小(最大5xl，最小xxs)</label>
+                      <div class="input-group input-group-sm">
+                        <input
+                          pattern="[0-9a-zA-Z]+"
+                          required="required"
+                          id="vcard-titleSize"
+                          class="form-control form-control-sm"
+                          v-model="form.json5.cards[form.page - 1].titleSize"
+                        />
+                        <div class="input-group-append">
+                          <button
+                            type="button"
+                            data-toggle="dropdown"
+                            class="btn btn-outline-secondary dropdown-toggle"
+                            aria-expanded="false"
+                          >
+                            請選擇文字大小
+                          </button>
+                          <div class="dropdown-menu py-0" style="">
+                            <button type="button" class="dropdown-item" @click="changeSize('titleSize',size)" v-for="(size,index) in sizeArr" :key="index">{{size}}</button>
+                          </div>
+                        </div>
+                      </div>
+                      <small class="form-text text-muted"
+                        >請填寫卡片標題的文字大小。
+                        </small>
+                    </div>
+                    <div class="form-group mb-2 was-validated">
+                      <label for="vcard-titleColor">標題文字顏色</label>
+                      <div class="input-group input-group-sm">
+                        <input
+                          pattern="#[0-9a-fA-F]{6}"
+                          required="required"
+                          id="vcard-titleColor"
+                          inputmode="url"
+                          class="form-control"
+                          v-model="form.json5.cards[form.page - 1].titleColor"
+                        />
+                        <div class="input-group-append">
+                          <input
+                            type="color"
+                            class="form-control form-control-color"
+                            v-model="form.json5.cards[form.page - 1].titleColor"
+                          />
+                        </div>
+                      </div>
+                      <small class="form-text text-muted"
+                        >請填寫卡片標題文字的顏色。</small
+                      >
+                    </div>
+                    <div class="form-group mb-2 was-validated">
+                      <label for="vcard-desc">卡片說明</label>
+                      <textarea
+                        id="vcard-desc"
+                        pattern=".+"
+                        required="required"
+                        class="form-control form-control-sm"
+                        v-model="form.json5.cards[form.page - 1].desc"
+                        style="height: 100px"
+                      ></textarea>
+                      <small class="form-text text-muted">請填寫卡片說明。</small>
+                    </div>
+                    <div class="form-group mb-2 was-validated">
+                      <label for="vcard-descSize">說明文字大小(最大5xl，最小xxs)</label>
+                      <div class="input-group input-group-sm">
+                        <input
+                          pattern="[0-9a-zA-Z]+"
+                          required="required"
+                          id="vcard-descSize"
+                          class="form-control form-control-sm"
+                          v-model="form.json5.cards[form.page - 1].descSize"
+                        />
+                        <div class="input-group-append">
+                          <button
+                            type="button"
+                            data-toggle="dropdown"
+                            class="btn btn-outline-secondary dropdown-toggle"
+                            aria-expanded="false"
+                          >
+                            請選擇文字大小
+                          </button>
+                          <div class="dropdown-menu py-0" style="">
+                            <button type="button" class="dropdown-item" @click="changeSize('descSize',size)" v-for="(size,index) in sizeArr" :key="index">{{size}}</button>
+                          </div>
+                        </div>
+                      </div>
+                      <small class="form-text text-muted"
+                        >請填寫卡片標題的文字大小。
+                        </small>
+                    </div>
+                    <div class="form-group mb-2 was-validated">
+                      <label for="vcard-titleColor">說明文字顏色</label>
+                      <div class="input-group input-group-sm">
+                        <input
+                          pattern="#[0-9a-fA-F]{6}"
+                          required="required"
+                          id="vcard-titleColor"
+                          inputmode="url"
+                          class="form-control"
+                          v-model="form.json5.cards[form.page - 1].descColor"
+                        />
+                        <div class="input-group-append">
+                          <input
+                            type="color"
+                            class="form-control form-control-color"
+                            v-model="form.json5.cards[form.page - 1].descColor"
+                          />
+                        </div>
+                      </div>
+                      <small class="form-text text-muted"
+                        >請填寫卡片標題文字的顏色。</small
+                      >
+                    </div>
+                    <!-- <div class="form-group mb-2 was-validated">
+                      <label for="vcard-title">卡片連結</label>
+                      <input
+                        pattern=".+"
+                        required="required"
+                        id="vcard-title"
+                        class="form-control form-control-sm"
+                        v-model="form.json5.cards[form.page - 1].title"
+                      />
+                      <small class="form-text text-muted">請填寫卡片標題。</small>
+                    </div> -->
+                  </div>
+                </div>
+              </div>
+              <ul class="list-group list-group-flush">
+                <li
+                  class="list-group-item pb-2 pt-3"
+                  v-for="(btn, index) in form.json5.cards[form.page - 1].btns"
+                  :key="index"
+                >
+                  <div class="row">
+                    <div class="col-sm-12">
+                      <div class="form-group mb-2">
+                        <label>控制按鈕 {{ index + 1 }}</label>
+                        <div class="d-flex btn-group mb-1">
+                          <button
+                            type="button"
+                            class="btn btn-sm btn-outline-info"
+                            @click="moveBtn(0, index)"
+                            v-if="form.json5.cards[form.page - 1].btns.length > 1"
+                          >
+                            <i class="iconfont icon-arrow-o-u"></i> 上移
+                          </button>
+                          <button
+                            type="button"
+                            class="btn btn-sm btn-outline-info"
+                            @click="moveBtn(1, index)"
+                            v-if="form.json5.cards[form.page - 1].btns.length > 1"
+                          >
+                            <i class="iconfont icon-arrow-o-d"></i> 下移
+                          </button>
+                          <button
+                            type="button"
+                            class="btn btn-sm btn-outline-danger"
+                            @click="delBtn(index)"
+                          >
+                            <i class="iconfont icon-delete"></i> 刪除
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-sm-12">
+                      <div class="form-group mb-2 was-validated">
+                        <label for="cardbtn-text-0"
+                          >按鈕 {{ index + 1 }} 文字</label
+                        >
+                        <input
+                          pattern=".+"
+                          required="required"
+                          id="cardbtn-text-0"
+                          class="form-control form-control-sm"
+                          v-model="btn.text"
+                        />
+                      </div>
+                      <div class="form-group mb-2 was-validated">
+                        <label for="cardbtn-link-0"
+                          >按鈕
+                          {{
+                            index + 1
+                          }}
+                          連結(需輸入完整網址,http://..,https://...)</label
+                        >
+                        <input
+                          pattern="(https?://|line://|tel:|mailto:)\S+"
+                          required="required"
+                          inputmode="url"
+                          type="url"
+                          id="cardbtn-link-0"
+                          class="form-control form-control-sm"
+                          v-model="btn.link"
+                        />
+                      </div>
+                      <div class="form-group mb-2 was-validated">
+                        <label for="vcard-titleColor">按鈕背景顏色</label>
+                        <div class="input-group input-group-sm">
+                          <input
+                            pattern="#[0-9a-fA-F]{6}"
+                            required="required"
+                            id="vcard-titleColor"
+                            inputmode="url"
+                            class="form-control"
+                            v-model="btn.color"
+                          />
+                          <div class="input-group-append">
+                            <input
+                              type="color"
+                              class="form-control form-control-color"
+                              v-model="btn.color"
+                            />
+                          </div>
+                        </div>
+                        <!-- <small class="form-text text-muted">請填寫卡片標題文字的顏色。</small> -->
+                      </div>
+                    <div class="form-group mb-2 was-validated">
+                      <label for="vcard-btnHeight">按鈕大小</label>
+                      <div class="input-group input-group-sm">
+                        <input
+                          pattern="[0-9a-zA-Z]+"
+                          required="required"
+                          id="vcard-btnHeight"
+                          class="form-control form-control-sm"
+                          v-model="btn.btnHeight"
+                        />
+                        <div class="input-group-append">
+                          <button
+                            type="button"
+                            data-toggle="dropdown"
+                            class="btn btn-outline-secondary dropdown-toggle"
+                            aria-expanded="false"
+                          >
+                            請選擇按鈕大小
+                          </button>
+                          <div class="dropdown-menu py-0" style="">
+                            <button type="button" class="dropdown-item" @click="btn.btnHeight='sm'" >sm</button>
+                            <button type="button" class="dropdown-item" @click="btn.btnHeight='md'" >md</button>
+                          </div>
+                        </div>
+                      </div>
+                      <small class="form-text text-muted"
+                        >請填寫卡片標題的文字大小。
+                        </small>
+                    </div>
+
+                    </div>
+                  </div>
+                </li>
+                <li class="list-group-item">
+                  <button
+                    type="button"
+                    class="btn btn-outline-success"
+                    @click="addBtn(form.page)"
+                  >
+                    <i class="fa fa-plus-circle"></i> 新增按鈕
+                  </button>
+                  <button
+                    type="button"
+                    class="btn btn-outline-success"
+                    @click="addShareBtn(form.page)"
+                  >
+                    <i class="fa fa-plus-circle"></i> 新增分享按鈕
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="p-5">
+            <van-button block class="btn-darkBlue" @click="handleSubmit">
+              建立名片
+            </van-button>
+          </div>
+          <div
+            id="modal-exportimport"
+            data-backdrop="static"
+            data-keyboard="false"
+            tabindex="-1"
+            class="fade modal"
+          >
+            <div
+              class="align-items-stretch modal-dialog modal-dialog-centered modal-xl"
+            >
+              <div class="modal-content">
+                <div class="d-flex flex-column modal-body">
+                  <textarea
+                    class="form-control form-control-sm flex-fill"
+                  ></textarea>
+                  <small class="form-text text-muted"
+                    >請複製匯出的資料，或貼上之前的資料並點一下「匯入」按鈕。</small
+                  >
+                </div>
+                <div class="modal-footer">
+                  <button type="button" class="btn btn-outline-success">
+                    複製
+                  </button>
+                  <button type="button" class="btn btn-secondary">關閉</button>
+                  <button type="button" class="btn btn-primary">匯入</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </keep-alive>
+    </van-cell-group>
+
+    
+  </div>
+  
+  <!-- <Footer v-if="showFooter" /> -->
+  <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: 20 / 13,
+        }"
+        :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>
+  </div>
+</template>
+
 <style lang="less" scoped>
 .form-control.form-control-color,
 .was-validated .form-control.form-control-color:valid {
diff --git a/src/views/Card/Notice.vue b/src/views/Card/Notice.vue
index a6b90ea..aa4930c 100644
--- a/src/views/Card/Notice.vue
+++ b/src/views/Card/Notice.vue
@@ -1,73 +1,38 @@
-<template>
-  <div>
-    <van-nav-bar 
-      title="自製名片" 
-      right-text="關閉"
-      @click-right="$router.push('/')"
-    />
-    <div class="recommend">
-    <div style="text-align: center; line-height: 24px; font-weight: bold;">
-    <br />
-    <span style="font-size: 19px; color: #cc0000;">
-    您沒有設定自製名片權限<br />
-    請點選下方立即購買按鈕<br />
-    開通自製名片相關服務<br />
-    </span>
-    <br />
-    <ul>
-    <li><img src="./images/0001.png" width="100%"></li>
-    <li><img src="./images/0002.png" width="100%"></li>
-    <li><img src="./images/0003.png" width="100%"></li>
-    <li><img src="./images/0004.png" width="100%"></li>
-    </ul>
-    <form name="" class="fbqs" style="text-align: center;">
-    <input type="button" value="立即購買" class="submit" style="padding: 3%; width: 50%; margin-left: auto; margin-right: auto;"
-      @click="router.push('/shop')"
-    >
-    </form>
-    </div>
-    </div>
-  <Footer/>
-  </div>
-</template>
-
 <script setup>
+  import { useRouter} from 'vue-router'
+  import Footer from '@/components/Footer.vue'
 
-import { useRouter} from 'vue-router'
+  const router = useRouter()
 
-import Footer from '@/components/Footer.vue'
+</script>
 
-const router = useRouter()
 
-</script>
+<template>
+  <div class="level page">
+    
+    <van-nav-bar class="bg-skyBlue py-1" left-arrow @click-left="$router.push('/')">
+      <template #title>
+        <h5 class="text-white mb-1"><strong>自製名片</strong></h5>
+      </template>
+      <template #left>
+        <h4><i class="fa-solid fa-angle-left text-white" :style="{opacity:0.5}"></i></h4>
+      </template>
+    </van-nav-bar>
+    
+    <van-cell-group inset class="mt-3">
+      <div class="text-darkBlue text-center py-5">
+        <div class="text-tomatoRed text-center mb-4"><i class="fa-solid fa-triangle-exclamation fa-5x"></i></div>
+        <h5 class="text-darkBlue text-center mb-2"><strong>您沒有設定自製名片權限</strong></h5>
+        <h6 class="text-darkBlue text-center mb-5">請點選下方立即購買按鈕<br />開通自製名片相關服務</h6>
+
+        <van-button class="btn-darkBlue px-5" icon="balance-o" size="normal" @click="router.push('/shop')">立即購買</van-button>
+      </div>
+    </van-cell-group>
+  </div>
+</template>
+
+<style src="@/assets/css/main.css"></style>
 
 <style lang="less" scoped>
-.recommend {
-	width: 100%;
-	padding-top: 2%;
-}
-.recommend ul {
-	width: 80%;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	margin: 0 auto 5% auto;
-}
-.recommend ul li {
-	width: 21%;
-	display: flex;
-	flex-direction: column;
-	margin: 1%;
-}
-.recommend ul li p {
-	margin-top: 2%;
-	font-size: 15px;
-	color: #333;
-}
-.recommend ul li span {
-	font-size: 0.24rem;
-	color: #999;
-	padding-top: 0.15rem;
-}
 
 </style>
\ No newline at end of file
diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue
index 1b5107b..5b3979c 100644
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -199,7 +199,8 @@ const overdue = computed(() => {
 });
 
 const goCardEdit = () => {
-  if (userInfo.value.nc_type < 2) {
+  // if (userInfo.value.nc_type < 2) {
+  if (userInfo.value.level < 2) {
     router.push("/card/notice");
   } else {
     router.push("/card/edit");
@@ -225,6 +226,11 @@ const doCopyUid = () => {
   showToast("已放入剪貼簿");
 };
 
+const doShare = () => {
+  toClipboard(`https://liff.line.me/${import.meta.env.VITE_APP_LINE_LIFF_ID}/?aid=${store.state.user.userInfo.agent_prefix}`)
+  showToast("已放入剪貼簿");
+};
+
 const bindTggo = () => {
   console.log(userInfo.value);
   let url = `https://www.tggo.com.tw/u.cgi?&mnm=mybinding&ncode=${userInfo.value.uniqid}&name=${userInfo.value.real_name}&openExternalBrowser=1`;
@@ -243,7 +249,7 @@ const handleLogout = () => {
 </script>
 
 <template>
-  <div class="home bg-lightPink" v-cloak>
+  <div class="home page" v-cloak>
     <van-nav-bar class="bg-darkBlue py-3">
       <template #title>
         <h4 class="text-white mb-1"><strong>UTEL電子名片系統</strong></h4>
@@ -287,7 +293,7 @@ const handleLogout = () => {
           </div>
         </div>
         <div class="right">
-          <div class="btn btn-sm text-darkBlue" @click="handleLogout">
+          <div class="btn btn-sm text-darkBlue" @click="doShare">
             <h4><i class="fa fa-share-alt" aria-hidden="true"></i></h4>
           </div>
           <div class="btn btn-sm text-darkBlue" @click="handleLogout">
@@ -475,115 +481,117 @@ const handleLogout = () => {
 <style src="@/assets/css/main.css"></style>
 
 <style lang="less" scoped>
-.wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  height: 100%;
-  .clip {
-    position: absolute;
+.home{
+  .wrapper {
     display: flex;
+    justify-content: center;
     align-items: center;
-    color: #ffffff;
-    background-color: rgba(#000000, 0.8);
-    top: 5px;
-    right: 5px;
-    margin-left: auto;
-    padding: 10px;
-    cursor: pointer;
-    z-index: 1005;
-  }
-  .top {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    flex: 1 0 0;
-  }
-  .bottom {
-    position: relative;
-    width: 100%;
-    flex: 0 0 auto;
-    padding: 15px;
-    .title {
+    flex-direction: column;
+    height: 100%;
+    .clip {
+      position: absolute;
+      display: flex;
+      align-items: center;
       color: #ffffff;
-      font-weight: bold;
-      margin-bottom: 15px;
+      background-color: rgba(#000000, 0.8);
+      top: 5px;
+      right: 5px;
+      margin-left: auto;
+      padding: 10px;
+      cursor: pointer;
+      z-index: 1005;
     }
-    .desc {
-      color: #ffffff;
-      margin-bottom: 30px;
+    .top {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      flex: 1 0 0;
+    }
+    .bottom {
+      position: relative;
+      width: 100%;
+      flex: 0 0 auto;
+      padding: 15px;
+      .title {
+        color: #ffffff;
+        font-weight: bold;
+        margin-bottom: 15px;
+      }
+      .desc {
+        color: #ffffff;
+        margin-bottom: 30px;
+      }
     }
   }
-}
 
-.my-account {
-	position: relative;
-	width: 100%;
+  .my-account {
+    position: relative;
+    width: 100%;
     padding: 20px 25px;
     .avatar{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .left{
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        .left{
-            display: flex;
-            align-items: center;
-            flex: 1 0 0;
-            .imgCnt{
-                width:80px;
-                height: 80px;
-                min-width: 80px;
-                border-radius: 50%;
-                border:2px #fff solid;
-                overflow: hidden;
-                margin-right: 15px;
-                img{
-                    width:100%;
-                    height: 100%;
-                    object-fit: cover;
-                }
-            } 
-            .info{
-                .name{
-                    font-weight: bold;
-                    color: #303a47;
-                }
-                .conpany{
-                    margin-top: 5px;
-                }
-            }  
-        }
-        .right{
-            flex: 0 0 auto;
-        }
+        flex: 1 0 0;
+        .imgCnt{
+          width:80px;
+          height: 80px;
+          min-width: 80px;
+          border-radius: 50%;
+          border:2px #fff solid;
+          overflow: hidden;
+          margin-right: 15px;
+          img{
+            width:100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        } 
+        .info{
+          .name{
+            font-weight: bold;
+            color: #303a47;
+          }
+          .conpany{
+            margin-top: 5px;
+          }
+        }  
+      }
+      .right{
+        flex: 0 0 auto;
+      }
     }
     .recommend{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px 0 10px;
+      .btn{
         display: flex;
-        justify-content: space-between;
+        justify-content: center;
         align-items: center;
-        padding: 20px 0 10px;
-        .btn{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-            width:30%;
-            height: 100px;
-            background-color: #fff;
-            border-radius: 0;
-            .img{
-                font-size: 35px;
-                line-height: 45px;
-                color: #345068;
-            }
-            .text{
-                font-size: 16px;
-                font-weight: bold;
-                color: #345068;
-            }
+        flex-direction: column;
+        width:30%;
+        height: 100px;
+        background-color: #fff;
+        border-radius: 0;
+        .img{
+          font-size: 35px;
+          line-height: 45px;
+          color: #345068;
         }
+        .text{
+          font-size: 16px;
+          font-weight: bold;
+          color: #345068;
+        }
+      }
     }
+  }
 }
 
 </style>
diff --git a/src/views/Member/index.vue b/src/views/Member/index.vue
index 12362f3..1121d99 100644
--- a/src/views/Member/index.vue
+++ b/src/views/Member/index.vue
@@ -14,7 +14,7 @@ import { useRouter } from 'vue-router'
 import { showToast } from 'vant'
 import { showLoadingToast,showSuccessToast } from 'vant';
 
-import { getUserInfo , updateCard , searchConnection, addUserFavi, setUserNfcTpl} from '@/api'
+import { getUserInfo, updateUserInfo, updateCard, searchConnection, addUserFavi, setUserNfcTpl} from '@/api'
 
 const URL = window.URL || window.webkitURL;
 
@@ -25,6 +25,7 @@ const form = ref({addon:[]})
 
 const genderChecked = ref()
 
+const resourceActive = ref('1');
 
 const fileList = ref([]);
 
@@ -71,6 +72,7 @@ const validatorTel = (val) => {
 if (userRes.data.nfc_addon && (userRes.data.nfc_addon.length > 0)) {
     form.value.addon = JSON.parse(userRes.data.nfc_addon)
 }
+console.log(form,"form")
 
 const onCrop = () => {
   const { canvas } = myCrop.value.getResult();
@@ -150,11 +152,11 @@ const onSubmit = async () => {
       message: '資料更新中...',
       forbidClick: true,
     });
-
+    // console.log(form.value,"test");
     let res = await updateCard(form.value)
     if(res.code===200){
         showSuccessToast('更新成功')
-        store.commit('user/setUserInfo',form.value)
+        store.commit('user/setUserInfo',form.value) 
         router.push('/member')
     }else{
         showToast.fail('更新失敗')
@@ -231,17 +233,17 @@ const tab2OnSearch = () => {
 
 const tab3list = ref([]);
 onBeforeMount(async () => {
-    let res = await setUserNfcTpl();
-    console.log(res);
-    if(res.code===200){
-      tab3list.value = res.data;
-    }
+  let res = await setUserNfcTpl();
+  console.log(res);
+  if(res.code===200){
+    tab3list.value = res.data;
+  }
 });
 
 </script>
 
 <template>
-  <div class="member bg-lightPink">
+  <div class="member page">
     <van-nav-bar class="bg-skyBlue py-1" left-arrow @click-left="$router.push('/')">
       <template #title>
         <h5 class="text-white mb-1"><strong>會員資料</strong></h5>
@@ -284,7 +286,7 @@ onBeforeMount(async () => {
                     <p class="text-skyBlue mb-2">上傳圖片，預設為Line頭像</p>
                     <van-button class="btn-darkBlue" icon="plus" block size="small">上傳檔案</van-button>
                   </div>
-                </div>            
+                </div>
               </van-uploader>
               <van-field
                   v-model="form.mark"
@@ -420,7 +422,7 @@ onBeforeMount(async () => {
               </template>
             </van-field>
             
-            <van-collapse accordion>
+            <van-collapse v-model="resourceActive" accordion>
               <van-collapse-item name="1">
                 <template #title>
                   <i class="fa-regular fa-gem text-darkBlue"></i> 我能分享的資源
@@ -438,7 +440,7 @@ onBeforeMount(async () => {
                   name="pattern" 
                   placeholder="分享網址" 
                   :rules="[
-                     { validator: validatorUrl, message: '網址格式不正確,Ex. http://' },
+                    { validator: validatorUrl, message: '網址格式不正確,Ex. http://' },
                   ]"
                 />
               </van-collapse-item>
@@ -635,7 +637,9 @@ onBeforeMount(async () => {
             />
           </van-col>
         </van-row>
-
+      </van-cell-group>
+      
+      <van-cell-group inset>
         <van-list
           v-model:loading="loading"
           :finished="finished"
@@ -678,10 +682,11 @@ onBeforeMount(async () => {
             <div class="bottom collapse" :id="`c${index}`" data-parent="#accordion">
               <h6 class="text-darkBlue"><strong>我能分享的資源</strong></h6>
               <div class="desc">{{item.supply}}</div>
-              <div class="url py-2">網址：<a href=""></a></div>
+              <div class="url py-2">網址：<a :href="item.supply_link" class="text-moBlue">{{item.supply_link}}</a></div>
               <hr/>
               <h6 class="text-darkBlue"><strong>我需要的資源</strong></h6>
               <div class="desc">{{item.demand}}</div>
+              <div class="url py-2">網址：<a :href="item.demand_link" class="text-moBlue">{{item.demand_link}}</a></div>
             </div>
           </div>
 
@@ -701,10 +706,9 @@ onBeforeMount(async () => {
             </template>
           </van-cell>
 
-          <div class="text-center bg-dark px-5 pt-3">
+          <div class="block">
             <van-image 
               width="100%" 
-              height="500"
               position="top" 
               fit="cover"
               src="/src/assets/images/tp/tp_1.jpg"
@@ -725,8 +729,8 @@ onBeforeMount(async () => {
       <van-cell-group inset>
         <van-row>
           <van-col span="12" v-for="(item, index) in tab3list" :key="index">
-            <div class="imgBtn">
-              <div class="imgCnt">{{ item }}
+            <div class="imgBtn" :data-id="index">
+              <div class="imgCnt">
                 <van-image 
                   src="/src/assets/images/tp/tp_1.jpg"
                 />
@@ -780,6 +784,7 @@ onBeforeMount(async () => {
         align-items: center;
         .avatar{
           width: 55px;
+          min-width: 55px;
           aspect-ratio: 1/1;
           border-radius: 50%;
           margin-right: 10px;
@@ -814,6 +819,14 @@ onBeforeMount(async () => {
 } 
 
 .cnt3{
+  .block{
+    height:500px;
+    text-align: center;
+    background-color: #000;
+    padding: 20px 35px;
+    overflow: hidden;
+    overflow-y: auto;
+  }
   .imgBtn{
     padding: 10px;
     margin: 10px;
diff --git a/src/views/Register/index.vue b/src/views/Register/index.vue
index 9d94756..a90eea6 100644
--- a/src/views/Register/index.vue
+++ b/src/views/Register/index.vue
@@ -152,7 +152,7 @@ const onSubmit = async () => {
 </script>
 
 <template>
-  <div class="reg-container bg-lightPink">
+  <div class="reg-container page">
     <van-nav-bar class="bg-skyBlue py-2">
       <template #title>
         <h5 class="text-white mb-1"><strong>{{title}}</strong></h5>