update

src/components/Chat.vue

@@ -124,6 +124,28 @@ function openQrcodeDialog(item) {
   qrcodeImgDialog.value = true;
 }
 
+// 國際貴賓卡網址
+function genTouristCardUrl() {
+  let lang = getLang();
+
+  let baseUrl = "https://stage.taipei101mall.com.tw";
+  let path = "/join-member/AIsystem";
+  let url;
+
+  // 根據語言選擇對應網址
+  if (lang === "en") {
+    url = `${baseUrl}/en${path}`;
+  } else if (lang === "ja") {
+    url = `${baseUrl}/ja${path}`;
+  } else if (lang === "ko") {
+    url = `${baseUrl}/ko${path}`;
+  } else {
+    url = `${baseUrl}${path}`; // 預設中文
+  }
+
+  openQrcodeDialog(url);
+}
+
 // 判斷 vue-qrcode-reader 是否加載完成
 function onInit(capabilities) {
   qrCodeLoading.value = false;
@@ -2876,24 +2898,28 @@ onBeforeUnmount(() => {
             <p class="text-center mb-3" v-html="t('stop_recording')"></p>
           </span>
           <!-- 錄音按鈕 -->
-          <v-btn
-            v-if="!isRecording"
-            @click="recStart"
-            icon="mdi-circle"
-            size="x-large"
-          >
-            <v-icon icon="mdi-circle" color="red" size="large"></v-icon>
-          </v-btn>
-
-          <v-btn
-            v-else
-            @click="recStop"
-            icon="mdi-circle"
-            size="large"
-            color="success"
-          >
-            <v-icon icon="mdi-square" size="large"></v-icon>
-          </v-btn>
+          <div class="position-relative">
+            <v-btn
+              v-if="!isRecording"
+              @click="recStart"
+              icon="mdi-circle"
+              class="rec-btn"
+            >
+              <v-icon icon="mdi-circle" color="red" size="large"></v-icon>
+            </v-btn>
+
+            <v-btn
+              v-else
+              @click="recStop"
+              icon="mdi-circle"
+              color="success"
+              class="rec-btn"
+            >
+              <v-icon icon="mdi-square" size="large"></v-icon>
+            </v-btn>
+
+            <img src="../assets/img/click.png" alt="" class="click-img" />
+          </div>
         </div>
 
         <div class="d-flex justify-space-between mt-3 mx-10">
@@ -3481,7 +3507,8 @@ onBeforeUnmount(() => {
             <!-- 票券 -->
             <swiper
               v-if="message.body.ticketList.length"
-              :slidesPerView="1"
+              :slidesPerView="'auto'"
+              :spaceBetween="20"
               :navigation="true"
               :modules="modules"
               class="ticket-slide"
@@ -3562,7 +3589,7 @@ onBeforeUnmount(() => {
               <swiper-slide v-for="(item, index) in message.body.ticketList">
                 <div class="slide-item">
                   <img
-                    class="cover-img aa"
+                    class="cover-img"
                     :src="item.info.img || item.info.cover_img"
                     alt=""
                   />
@@ -3597,7 +3624,8 @@ onBeforeUnmount(() => {
             <!-- 美食/伴手禮 -->
             <swiper
               v-if="message.body.length"
-              :slidesPerView="1"
+              :slidesPerView="'auto'"
+              :spaceBetween="20"
               :navigation="true"
               :modules="modules"
               class="ticket-slide"
@@ -3614,18 +3642,20 @@ onBeforeUnmount(() => {
                       {{ item.info.name || item.info.title }}
                     </h3>
 
-                    <div
-                      v-if="item.info.phone !== ''"
-                      class="d-flex align-center mt-3 mb-5"
-                    >
-                      <img
-                        src="../assets/img/phone-solid.svg"
-                        width="15"
-                        alt=""
-                      />
-                      <p class="ms-2">
-                        {{ item.info.phone }}
-                      </p>
+                    <div class="mt-3 mb-5 phone-item">
+                      <span
+                        v-if="item.info.phone !== ''"
+                        class="d-flex align-center"
+                      >
+                        <img
+                          src="../assets/img/phone-solid.svg"
+                          width="15"
+                          alt=""
+                        />
+                        <p class="ms-2">
+                          {{ item.info.phone }}
+                        </p>
+                      </span>
                     </div>
 
                     <div class="price-info">
@@ -3645,58 +3675,14 @@ onBeforeUnmount(() => {
                       </div>
                     </div>
 
-                    <p class="description">
-                      {{ item.info.content || item.info.description }}
-                    </p>
+                    <p
+                      v-html="item.info.content || item.info.description"
+                      class="description"
+                    ></p>
                   </section>
                 </div>
               </swiper-slide>
             </swiper>
-
-            <!-- <swiper
-              v-if="message.body.length"
-              :slidesPerView="'auto'"
-              :spaceBetween="20"
-              :modules="modules"
-            >
-              <swiper-slide v-for="item in message.body">
-                <img
-                  class="cover-img"
-                  :src="item.info.img || item.info.cover_img"
-                  alt=""
-                />
-                <section>
-                  <h3 class="title">{{ item.info.name || item.info.title }}</h3>
-
-                  <div
-                    v-if="item.info.phone !== ''"
-                    class="d-flex align-center mt-3 mb-5"
-                  >
-                    <img
-                      src="../assets/img/phone-solid.svg"
-                      width="15"
-                      alt=""
-                    />
-                    <p class="ms-2">
-                      {{ getPhoneNumber(item.info.phone) }}
-                    </p>
-                  </div>
-
-                  <div class="price-info">
-                    <span>{{ item.info.floor || item.info.price }}</span>
-                    <div class="link-btn">
-                      <a :href="item.info.url" target="_blank">
-                        {{ t("cta_url") }}
-                      </a>
-                    </div>
-                  </div>
-
-                  <p class="description">
-                    {{ item.info.content || item.info.description }}
-                  </p>
-                </section>
-              </swiper-slide>
-            </swiper> -->
           </div>
 
           <!-- 推薦資訊 -->
@@ -3773,7 +3759,12 @@ onBeforeUnmount(() => {
             }"
           >
             <p v-html="t('shopping_discounts_info.tourist_card.content')"></p>
-            <button
+
+            <button @click="genTouristCardUrl()" class="ar-link mt-5 mb-3">
+              {{ t("shopping_discounts_info.tourist_card.apply") }}
+            </button>
+
+            <!-- <button
               @click="
                 openQrcodeDialog(
                   'https://stage.taipei101mall.com.tw/join-member/AIsystem'
@@ -3782,7 +3773,8 @@ onBeforeUnmount(() => {
               class="ar-link mt-5 mb-3"
             >
               {{ t("shopping_discounts_info.tourist_card.apply") }}
-            </button>
+            </button> -->
+
             <!-- <a
               href="https://stage.taipei101mall.com.tw/join-member/AIsystem"
               class="ar-link mb-3"
@@ -4053,15 +4045,16 @@ onBeforeUnmount(() => {
       <!-- <v-card-title class="text-center">
         請掃描 QR Code 前往 
       </v-card-title> -->
-      <v-card-text>
+      <v-card-text class="d-flex flex-column align-center">
         <p class="text-h5 mb-5" style="font-weight: 600">
           {{ t("scan_qr_code") }}
         </p>
 
         <qrcode-vue
           :value="qrcodeImgUrl"
-          class="w-100 h-100"
-          style="max-width: 300px"
+          class="w-100 h-100 mb-2"
+          size="150"
+          level="H"
         />
       </v-card-text>
     </v-card>
@@ -4203,6 +4196,36 @@ onBeforeUnmount(() => {
         letter-spacing: 1px;
         text-shadow: 1px 1px 2px #333;
       }
+
+      .rec-btn {
+        width: 8vw;
+        height: 8vw;
+        margin-bottom: 20px;
+
+        .v-icon--size-large {
+          font-size: 3vw !important;
+        }
+      }
+
+      .click-img {
+        position: absolute;
+        bottom: 0px;
+        left: 100px;
+        width: 5rem;
+        animation: move 2s infinite ease-in-out; /* 設定動畫 */
+      }
+
+      @keyframes move {
+        0% {
+          transform: translateX(0); /* 開始位置 */
+        }
+        50% {
+          transform: translateX(20px); /* 向右移動 20px */
+        }
+        100% {
+          transform: translateX(0); /* 回到原始位置 */
+        }
+      }
     }
   }
 
@@ -4417,7 +4440,7 @@ onBeforeUnmount(() => {
     .ticket-item {
       .cover-img {
         width: 100%;
-        height: 22.5vh;
+        height: 15vh;
         object-fit: contain;
         overflow: hidden;
         border-radius: 10px 10px 0 0;
@@ -4442,6 +4465,7 @@ onBeforeUnmount(() => {
         }
 
         .description {
+          height: 145px;
           line-height: 1.8;
           // text-align: justify;
           font-size: 1rem;
@@ -4477,6 +4501,10 @@ onBeforeUnmount(() => {
       }
     }
 
+    .phone-item {
+      min-height: 25px;
+    }
+
     .store-item {
       width: 350px;
 
@@ -4540,7 +4568,7 @@ onBeforeUnmount(() => {
       }
 
       .ticket-slide {
-        width: 63%;
+        width: 100%;
         margin: 0;
         position: relative;
 
@@ -4549,10 +4577,11 @@ onBeforeUnmount(() => {
         }
 
         .swiper-slide {
+          width: auto;
           margin-left: 1px;
 
           .slide-item {
-            max-width: 50vw;
+            max-width: 310px;
             border-radius: 10px;
             background-color: white;