分享页面背景模糊

web/src/views/gui/compomemt/share.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="share" :class="{ full: smBtn }">
-
     <div class="main">
       <h3>分享页面</h3>
       <div class="code">
@@ -83,6 +82,16 @@ export default {
   z-index: 998;
   width: calc(100% - 200px);
   height: 100%;
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(10px);
+    z-index: -1;
+  }
   .main {
     border-radius: 10px;
     padding-top: 50px;
@@ -92,7 +101,7 @@ export default {
     transform: translate(-50%, -50%);
     width: 400px;
     height: 550px;
-    background-color: rgba(161, 101, 59, .8);
+    background-color: rgba(161, 101, 59, 0.8);
     & > h3 {
       font-size: 30px;
       text-align: center;

webM/src/views/gui/component/share.vue

@@ -4,7 +4,7 @@
       <h3>分享页面</h3>
       <div class="code">
         <img src="@/assets/img/code.png" alt="" />
-        <p>长按保存二维码<br/>或点击 复制链接</p>
+        <p>长按保存二维码<br />或点击 复制链接</p>
       </div>
       <div class="btnn" @click="copyPcTxt">复制分享链接</div>
       <!-- 关闭按钮 -->
@@ -74,7 +74,16 @@ export default {
   bottom: 0;
   left: 0;
   z-index: 9998;
-
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(10px);
+    z-index: -1;
+  }
   .main {
     padding-top: 20px;
     border-radius: 8px;
@@ -84,7 +93,7 @@ export default {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background-color: rgba(161, 101, 59, .8);
+    background-color: rgba(161, 101, 59, 0.8);
     & > h3 {
       color: #fff6d2;
       font-size: 20px;

webM/src/views/gui/menu.vue

@@ -316,7 +316,7 @@
 import Share from "./component/share.vue";
 import MapNav from "./component/mapNav.vue";
 import Antique from "./component/antique.vue";
-import Hotspot from "./component/hotspot";
+import Hotspot from "./component/hotspot.vue";
 export default {
   components: { Share, MapNav, Antique, Hotspot },
   data() {