From 4a336ec9d502edca9b86b09ddf02af96339d99aa Mon Sep 17 00:00:00 2001
From: bruce68410 <kai326326@gmail.com>
Date: Sun, 12 Nov 2023 22:06:25 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BC=E9=80=81=E9=A0=81=E9=9D=A2=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Send/index.vue | 124 +++++++++++++++++++--------------------
 1 file changed, 62 insertions(+), 62 deletions(-)

diff --git a/src/views/Send/index.vue b/src/views/Send/index.vue
index 75ded8d..989988b 100644
--- a/src/views/Send/index.vue
+++ b/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%;
     }