update

src/components/Photo.vue

@@ -286,8 +286,8 @@ function validateAndSubmit() {
         {{ t("remove_mask_result") }}
       </p>
 
-      <div class="d-flex flex-column mt-10">
-        <v-btn variant="tonal" @click="reshoot()" class="mb-5">
+      <div class="d-flex mt-10">
+        <v-btn @click="reshoot()" class="me-5" variant="tonal">
           {{ t("retake") }}
         </v-btn>
         <v-btn @click="upload()" color="primary" variant="elevated">
@@ -458,16 +458,13 @@ video {
 }
 
 button {
-  // width: 100%;
   margin: auto;
-  padding: 1.5rem 3rem;
+  padding: 1.2rem 2rem;
   display: flex;
   justify-content: center;
   border-radius: 5px;
   letter-spacing: 3px;
-  // color: #fff;
-  font-size: 1.25rem;
-  // background-color: var(--main-color);
+  font-size: 1rem;
 }
 
 .countdown {

src/components/Photo101.vue

@@ -253,8 +253,14 @@ async function upload() {
       <p class="mb-10 text-center">{{ t("postcard_being_created") }}</p>
     </div>
 
-    <div v-if="isCompleted && imageUrl" class="my-10 d-flex justify-center">
+    <div
+      v-if="isCompleted && imageUrl"
+      class="my-10 d-flex flex-column align-center justify-center"
+    >
       <img :src="imageUrl" alt="" class="w-100" style="object-fit: contain" />
+      <p class="mt-5 font-weight-bold">
+        {{ t("qrcode_save_image") }}
+      </p>
     </div>
 
     <canvas ref="canvas" style="display: none"></canvas>
@@ -275,16 +281,13 @@ video {
 }
 
 button {
-  // width: 100%;
   margin: auto;
-  padding: 1.5rem 3rem;
+  padding: 1.2rem 2rem;
   display: flex;
   justify-content: center;
   border-radius: 5px;
   letter-spacing: 3px;
-  // color: #fff;
-  font-size: 1.25rem;
-  // background-color: var(--main-color);
+  font-size: 1rem;
 }
 
 .countdown {

src/language/en.json

@@ -36,7 +36,7 @@
   "retake": "Retake",
   "submit": "Submit",
   "remove_mask_result": "(Each postcard is for one user only. If you are wearing a mask, please remove it before taking the photo. Thank you for your cooperation.)",
-  "qrcode_save_image": "Scan QR Code to save image",
+  "qrcode_save_image": "Long press to save the image",
   "taipei_101_postcard": "Stunning View of Taipei 101",
   "taiwan_landmark_postcard": "Taiwan Landmark / Vlog",
   "select_gender": "Please select your gender",

src/language/ja.json

@@ -36,7 +36,7 @@
   "retake": "撮り直し",
   "submit": "送信",
   "remove_mask_result": "（各明はがきは一人の使用者のみご利用いただけます。マスクを着用されている場合は、撮影前にお外しいただきますようお願い申し上げます。ご協力ありがとうございます。）",
-  "qrcode_save_image": "QRコードをスキャンして画像を保存",
+  "qrcode_save_image": "長押しで画像を保存",
   "taipei_101_postcard": "台北101の絶景仰角",
   "taiwan_landmark_postcard": "台湾の名所 / Vlog",
   "select_gender": "性別を選択してください",

src/language/ko.json

@@ -36,7 +36,7 @@
   "retake": "다시 찍기",
   "submit": "제출",
   "remove_mask_result": "(각 명신카드는 한 명의 사용자만 사용 가능합니다. 마스크를 착용한 경우, 촬영 전에 마스크를 벗어 주시기 바랍니다. 협조해 주셔서 감사합니다)",
-  "qrcode_save_image": "QR 코드를 스캔하여 이미지를 저장하세요",
+  "qrcode_save_image": "길게 눌러 이미지를 저장하세요",
   "taipei_101_postcard": "타이베이 101 절경 앵글",
   "taiwan_landmark_postcard": "대만 명소 / Vlog",
   "select_gender": "성별을 선택하세요",

src/language/zh.json

@@ -36,7 +36,7 @@
   "retake": "重拍",
   "submit": "送出",
   "remove_mask_result": "（每張明信片僅限一位使用者使用，若有配戴口罩，請在拍攝前先取下，感謝您的配合。）",
-  "qrcode_save_image": "掃描 QR Code 儲存圖片",
+  "qrcode_save_image": "長按即可儲存圖片",
   "taipei_101_postcard": "台北101絕美仰角",
   "taiwan_landmark_postcard": "台灣名勝景點 / Vlog",
   "select_gender": "請選擇性別",

src/views/HomeView.vue

@@ -4520,7 +4520,7 @@ function checkBgImg() {
         </button>
       </v-card-title>
 
-      <v-card-text class="pb-10 px-0">
+      <v-card-text class="pb-5 pt-0 px-0">
         <!-- 選擇濾鏡 -->
         <div v-if="store.assignFilter === ''" class="px-5 options-btn">
           <!-- <p class="text-h5 my-10">請選擇濾鏡</p> -->
@@ -4659,7 +4659,7 @@ function checkBgImg() {
           "
         >
           <div v-if="!showBg" class="menu-content">
-            <p class="text-h5 my-5">{{ t("select_character") }}</p>
+            <p class="my-5">{{ t("select_character") }}</p>
 
             <div class="slider-btn">
               <button class="prev" @click="prevRace">
@@ -4728,7 +4728,7 @@ function checkBgImg() {
             </div>
 
             <div v-else class="menu-content bg-list">
-              <p class="my-10">{{ t("select_background") }}</p>
+              <p class="my-3">{{ t("select_background") }}</p>
 
               <div class="slider-btn">
                 <button class="prev" @click="prevBg">
@@ -4747,7 +4747,6 @@ function checkBgImg() {
                 <v-img
                   cover
                   class="cover"
-                  width="55vw"
                   :lazy-src="item.imgUrl"
                   :src="item.imgUrl"
                 >
@@ -4899,6 +4898,11 @@ function checkBgImg() {
   &:hover {
     background-color: #c19c75;
   }
+
+  @media (max-width: 575px) {
+    padding: 14px 60px;
+    font-size: 16px;
+  }
 }
 
 .lang-content {
@@ -4931,14 +4935,6 @@ function checkBgImg() {
 .main-containar {
   width: 100%;
   background-color: var(--sub-color);
-  // height: 150vh;
-  // min-height: -webkit-fill-available;
-  // display: flex;
-  // flex-direction: column;
-  // padding-bottom: 70vh;
-  // min-height: 100%;
-  // overflow-x: hidden;
-  // overflow-y: scroll;
 
   .video-content {
     width: 25vw;
@@ -4952,11 +4948,6 @@ function checkBgImg() {
     }
 
     video {
-      // position: fixed;
-      // top: 50px;
-      // left: 0;
-      // right: 0;
-      // z-index: 10;
       width: 100%;
       height: auto;
     }
@@ -5955,7 +5946,7 @@ function checkBgImg() {
 
   button {
     display: flex;
-    width: 18rem;
+    width: 15rem;
     padding: 0.8rem;
     margin-bottom: 2rem;
     border-radius: 100px;
@@ -6012,11 +6003,16 @@ function checkBgImg() {
       border-radius: 0 0 5px 5px;
       text-align: center;
       padding-bottom: 10px;
+
+      .cover {
+        width: 50vw;
+        height: 120px;
+      }
     }
   }
 
   .bg-img {
-    margin-top: 2rem;
+    margin-top: 1.5rem;
     cursor: pointer;
     position: relative;
 
@@ -6027,7 +6023,7 @@ function checkBgImg() {
 
     .cover {
       max-width: 100%;
-      width: 12rem;
+      width: 10rem;
       object-fit: cover;
     }
   }
@@ -6090,7 +6086,7 @@ function checkBgImg() {
   }
 
   .page-num {
-    margin: 2rem auto;
+    margin: 1rem auto;
     letter-spacing: 0.2rem;
   }