發送頁面修改

src/views/Send/index.vue

@@ -1,52 +1,3 @@
-<template>
-  <div id="home">
-    <van-nav-bar title="名片分享" />
-    <div class="tab-section" v-cloak>
-      <van-tabs :lazy-render="true" v-model:active="activeName" v-show="userInfo.nc_type > 1">
-        <van-tab title="我的名片" name="0">
-        </van-tab>
-        <van-tab :title="state.card_title" name="1" v-if="state.showCusCard">
-        </van-tab>
-        <van-tab :title="card.title" :name="card.id.toString()" v-for="card of state.vip_card" :key="card.id">
-        </van-tab>
-      </van-tabs>
-      <div class="flex-section">
-        <div class="table-responsive">
-          <div class="chatbox">
-            <div id="flex" ref="flexRef"></div>
-          </div>
-        </div>
-      </div>
-      <div class="preview-text">上面圖內「分享」無效，請點下列「分享」</div>
-    </div>
-    <div class="btn-area" @click="sendEcard">
-      <van-button type="primary" block>分享好友</van-button>
-    </div>
-    <div class="btn-area" @click="showChangeTpl" v-show="activeName == '0'">
-      <van-button type="success" block>切換樣版</van-button>
-    </div>
-    <Footer />
-    <van-popup v-model:show="showDraw" position="right" :style="{ height: '100%', width: '200px' }">
-      <div>
-        <ul class="tpl-list">
-          <li class="tpl-item" @click="changeTpl(0)">
-            <img src="@/assets/images/tpl/tpl0.png">
-          </li>
-          <li class="tpl-item" @click="changeTpl(1)">
-            <img src="@/assets/images/tpl/tpl1.png">
-          </li>
-          <li class="tpl-item" @click="changeTpl(2)">
-            <img src="@/assets/images/tpl/tpl2.png">
-          </li>
-          <li class="tpl-item" @click="changeTpl(3)">
-            <img src="@/assets/images/tpl/tpl3.png">
-          </li>
-        </ul>
-      </div>
-    </van-popup>
-  </div>
-</template>
-
 <script setup>
 import liff from "@line/liff";
 
@@ -62,9 +13,6 @@ import { genCard1 } from '@/utils/card2'
 import { genVipCard } from '@/utils/vipcard'
 import { useStore } from 'vuex'
 
-
-import Footer from '@/components/Footer.vue'
-
 const store = useStore()
 
 const state = ref({
@@ -228,6 +176,65 @@ const changeTpl = (val) => {
 
 </script>
 
+<template>
+  <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>
+      </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="tab-section" v-cloak>
+      <van-tabs :lazy-render="true" v-model:active="activeName" v-show="userInfo.nc_type > 1">
+        <van-tab title="我的名片" name="0"/>
+        <van-tab :title="state.card_title" name="1" v-if="state.showCusCard"/>
+        <van-tab :title="card.title" :name="card.id.toString()" v-for="card of state.vip_card" :key="card.id"/>
+      </van-tabs>
+
+      <div class="flex-section">
+        <div class="table-responsive">
+          <div class="chatbox">
+            <div id="flex" ref="flexRef"></div>
+          </div>
+        </div>
+      </div>
+      <h6 class="text-center text-white bg-darkBlue py-2">上面圖內「分享」無效，請點下列「分享」</h6>
+    </div>
+
+    <div class="d-flex p-4">
+      <van-button block class="btn-skyBlue m-2" @click="sendEcard">        
+        <h6><i class="fa-solid fa-share-from-square"></i> 分享好友</h6>
+      </van-button>
+      <van-button block class="btn-tomatoRed m-2" @click="showChangeTpl" v-show="activeName == '0'">        
+        <h6><i class="fa-solid fa-right-left"></i> 切換樣版</h6>
+      </van-button>
+    </div>
+
+    <van-popup v-model:show="showDraw" round position="bottom">
+      <div>
+        <ul class="tpl-list d-flex flex-wrap">
+          <li class="tpl-item" @click="changeTpl(0)">
+            <img src="@/assets/images/tpl/tpl0.png">
+          </li>
+          <li class="tpl-item" @click="changeTpl(1)">
+            <img src="@/assets/images/tpl/tpl1.png">
+          </li>
+          <li class="tpl-item" @click="changeTpl(2)">
+            <img src="@/assets/images/tpl/tpl2.png">
+          </li>
+          <li class="tpl-item" @click="changeTpl(3)">
+            <img src="@/assets/images/tpl/tpl3.png">
+          </li>
+        </ul>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
 <style lang="less" scoped>
 .btn-area {
   padding: 5px 15px
@@ -236,12 +243,12 @@ const changeTpl = (val) => {
 .flex-section {
   // color: white;
   // z-index: 99999;
-  background-color: #666;
+  background-color: #333;
 }
 
 
 .chatbox {
-  background-color: #666;
+  background-color: #333;
   margin-top: 10px;
   padding-top: 10px;
 }
@@ -252,18 +259,11 @@ const changeTpl = (val) => {
   overflow-x: auto;
 }
 
-.preview-text {
-  width: 100%;
-  background-color: #8e0325;
-  color: #FFF;
-  font-size: 18px;
-  text-align: center;
-}
 
 .tpl-list {
   .tpl-item {
+    width:150px;
     padding: 10px;
-
     img {
       width: 100%;
     }