修改

src/views/Card/Edit.vue

@@ -442,11 +442,13 @@ export default defineComponent({
             <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-moBlue" icon="tv-o" hairline @click="$router.push('/card/video')">教學影片</van-button>
-            <van-button size="small" class="ml-1 btn-skyBlue" icon="eye-o" hairline>預覽</van-button>
+            <van-button size="small" class="ml-1 btn-skyBlue" icon="eye-o" hairline @click="handlePreview">預覽</van-button>
           </template>
         </van-cell>
         
+        <div class="card">
+          <div class="card-body">
             <div class="form-group mb-2 was-validated">
               <label for="utel-altText">標題文字</label>
               <input
@@ -456,39 +458,26 @@ export default defineComponent({
                 class="form-control form-control-sm"
                 v-model="form.title"
               />
-          <small class="form-text text-muted"
+              <small class="form-text text-muted">與我的名片切換時顯示的文字。</small>
-            >與我的名片切換時顯示的文字。</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 class="form-text text-muted">與我的名片切換時顯示的文字。</small>
-            >與我的名片切換時顯示的文字。</small
+            </div>
-          >
+          </div>
         </div>
 
       </van-cell-group>
 
-    </div>
-
       <van-cell-group inset class="mt-3">
         <keep-alive>
-        <div id="app" class="container my-4">
+          <div id="app">
   
-          <div class="card my-2">
+            <div class="card">
-            <div class="card-header">
+              <div class="card-header bg-lightPink">
                 <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"
@@ -515,13 +504,9 @@ export default defineComponent({
                 </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-content">
                 <div class="card-body pb-2 pt-3">
                   <div class="row">
                     <div class="col-sm-12" v-if="form.json5.cards.length > 1">
@@ -955,6 +940,8 @@ export default defineComponent({
           </div>
         </keep-alive>
       </van-cell-group>
+    </div>
+
 
     
   </div>