分享功能具体值

.env

@@ -1,4 +1,5 @@
 VUE_APP_CDN_PATH=/goodsData/
 VUE_APP_SCENE_CODE_FLOOR_1=KJ-aigSkgvRWR
 VUE_APP_SCENE_CODE_FLOOR_2=KJ-ufjLwlSXba
+VUE_APP_MOBILE_URL=https://zzbbh.4dage.com/YHTM/index.html
 VUE_APP_PC_URL=http://zzbbh.4dage.com/YHT/index.html

src/components/ShareModal.vue

@@ -1,28 +1,30 @@
 <template>
   <div
-    class="share-modal"
+    class="mask"
   >
-    <h1>分享</h1>
-    <button
-      class="close-btn"
-      @click="$emit('close')"
-    >
-      <img
-        src="@/assets/images/close.png"
-        alt="关闭"
-        draggable="false"
+    <div class="share-modal">
+      <h1>分享</h1>
+      <button
+        class="close-btn"
+        @click="$emit('close')"
       >
-    </button>
-    <p>请使用手机扫描二维码或<br>复制分享链接</p>
-    <img
-      src="@/assets/images/search.png"
-      alt="二维码"
-      class="qr-code"
-    >
-    <div class="button-group">
-      <button @click="copyToClipBoard">
-        复制链接
+        <img
+          src="@/assets/images/close.png"
+          alt="关闭"
+          draggable="false"
+        >
       </button>
+      <p>请使用手机扫描二维码或<br>复制分享链接</p>
+      <img
+        src="@/assets/images/rcode.jpg"
+        alt="二维码"
+        class="qr-code"
+      >
+      <div class="button-group">
+        <button @click="copyToClipBoard">
+          复制链接
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -30,11 +32,11 @@
 <script>
 export default {
   mounted() {
-    globalUtils.showToast('长按二维码保存到手机')
+    // globalUtils.showToast('长按二维码保存到手机')
   },
   methods: {
     copyToClipBoard() {
-      globalUtils.copyToClipBoard('sfjlsflkjlsdfjkl')
+      globalUtils.copyToClipBoard(process.env.VUE_APP_MOBILE_URL)
       globalUtils.showToast('已复制链接')
     }
   }
@@ -42,69 +44,77 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.share-modal {
+.mask {
   position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 37.92rem;
-  height: 54.17rem;
-  background-image: url('@/assets/images/share-bg.png');
-  background-size: cover;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 4.63rem;
-  padding-top: 3.5rem;
-  h1 {
-    font-size: 2rem;
-    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
-    font-weight: bold;
-    color: #D8B275;
-    line-height: 2.34rem;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(4px);
+  .share-modal {
     position: absolute;
-    top: 2.42rem;
-    left: 1.58rem;
-  }
-  .close-btn {
-    position: absolute;
-    top: 1.83rem;
-    right: 1.25rem;
-    width: 4.17rem;
-    height: 4.17rem;
-    > img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  > p {
-    font-size: 1.67rem;
-    font-weight: bold;
-    line-height: 2.4rem;
-    color: #FFFFFF;
-    text-align: center;
-  }
-  > img {
-    width: 18.75rem;
-    height: 18.75rem;
-    object-fit: contain;
-  }
-  .button-group {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 37.92rem;
+    height: 54.17rem;
+    background-image: url('@/assets/images/share-bg.png');
+    background-size: cover;
     display: flex;
+    flex-direction: column;
     justify-content: center;
-    gap: 1.5rem;
-    > button {
-      width: 15rem;
-      height: 5.42rem;
-      background: #930909;
-      border-radius: 4.17rem 4.17rem 4.17rem 4.17rem;
-      border: 0.17rem solid #D8B275;
+    align-items: center;
+    gap: 4.63rem;
+    padding-top: 3.5rem;
+    h1 {
+      font-size: 2rem;
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      font-weight: bold;
+      color: #D8B275;
+      line-height: 2.34rem;
+      position: absolute;
+      top: 2.42rem;
+      left: 1.58rem;
+    }
+    .close-btn {
+      position: absolute;
+      top: 1.83rem;
+      right: 1.25rem;
+      width: 4.17rem;
+      height: 4.17rem;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    > p {
+      font-size: 1.67rem;
+      font-weight: bold;
+      line-height: 2.4rem;
       color: #FFFFFF;
-      font-size: 1.83rem;
+      text-align: center;
+    }
+    > img {
+      width: 18.75rem;
+      height: 18.75rem;
+      object-fit: contain;
     }
-    > a {
-      font-size: 1.83rem;
+    .button-group {
+      display: flex;
+      justify-content: center;
+      gap: 1.5rem;
+      > button {
+        width: 15rem;
+        height: 5.42rem;
+        background: #930909;
+        border-radius: 4.17rem 4.17rem 4.17rem 4.17rem;
+        border: 0.17rem solid #D8B275;
+        color: #FFFFFF;
+        font-size: 1.83rem;
+      }
+      > a {
+        font-size: 1.83rem;
+      }
     }
   }
 }