up

webM/src/views/Layout/index.vue

@@ -2,6 +2,7 @@
   <div class="Layout" ref="Layout" @scroll="scrollEvent">
     <!-- 顶部top -->
     <div class="top" :style="`background-color:${$route.meta.topColor}`">
+      <!-- <div class="MBL"></div> -->
       <div class="left">
         <img
           src="@/assets/img/Layout/mean.png"
@@ -11,6 +12,7 @@
       </div>
       <div class="right">
         <img
+          class="logoTop"
           src="@/assets/img/Layout/logo.png"
           alt=""
           @click="$router.push('/Layout/Home').catch(() => {})"
@@ -28,6 +30,8 @@
     <Router-view />
     <!-- 点击菜单 -->
     <div class="meanPage" v-show="meanPage">
+      <!-- 毛玻璃 -->
+      <div class="meanPageMBL"></div>
       <div class="conten">
         <div class="searchTop">
           <div class="back">
@@ -288,29 +292,31 @@ export default {
         else if (myId <= 47) temp = "/Layout/Exhibitions/Past";
         else temp = "/Layout/Exhibitions/Overseas";
       }
-      if(temp ==='/Layout/CollectionsDetail') {
-        let k =this.$route.query.k
-        if(k==='Bronzes') temp ='/Layout/Collections/Bronzes'
-        else if(k==='Ceramics') temp ='/Layout/Collections/Ceramics'
-        else if(k==='Buddhist') temp ='/Layout/Collections/Buddhist'
-        else if(k==='Jadewares') temp ='/Layout/Collections/Jadewares'
-        else if(k==='Calligraphies') temp ='/Layout/Collections/Calligraphies'
-        else if(k==='Paintings') temp ='/Layout/Collections/Paintings'
-        else if(k==='Gold') temp ='/Layout/Collections/Gold'
-        else if(k==='Coins') temp ='/Layout/Collections/Coins'
-        else if(k==='Brocades') temp ='/Layout/Collections/Brocades'
-        else if(k==='Cultural') temp ='/Layout/Collections/Cultural'
-        else temp ='/Layout/Collections/Miscellaneous'
+      if (temp === "/Layout/CollectionsDetail") {
+        let k = this.$route.query.k;
+        if (k === "Bronzes") temp = "/Layout/Collections/Bronzes";
+        else if (k === "Ceramics") temp = "/Layout/Collections/Ceramics";
+        else if (k === "Buddhist") temp = "/Layout/Collections/Buddhist";
+        else if (k === "Jadewares") temp = "/Layout/Collections/Jadewares";
+        else if (k === "Calligraphies")
+          temp = "/Layout/Collections/Calligraphies";
+        else if (k === "Paintings") temp = "/Layout/Collections/Paintings";
+        else if (k === "Gold") temp = "/Layout/Collections/Gold";
+        else if (k === "Coins") temp = "/Layout/Collections/Coins";
+        else if (k === "Brocades") temp = "/Layout/Collections/Brocades";
+        else if (k === "Cultural") temp = "/Layout/Collections/Cultural";
+        else temp = "/Layout/Collections/Miscellaneous";
       }
-      if(temp ==='/Layout/Learn/Info') {
-        if(myId<=39) temp ='/Layout/Learn/Students'
-        else if(myId<=72) temp ='/Layout/Learn/Adults'
-        else temp ='/Layout/Learn/Families'
+      if (temp === "/Layout/Learn/Info") {
+        if (myId <= 39) temp = "/Layout/Learn/Students";
+        else if (myId <= 72) temp = "/Layout/Learn/Adults";
+        else temp = "/Layout/Learn/Families";
       }
-      if(temp ==='/Layout/Publications/Info') temp ='/Layout/Publications/Magazines'
-      if(temp ==='/Layout/Join/Info') temp ='/Layout/Join/Volunteer'
-      if(temp ==='/Layout/AboutDirector') temp ='/Layout/About/1'
-      if(temp ==='/Layout/AboutLink') temp ='/Layout/About/3'
+      if (temp === "/Layout/Publications/Info")
+        temp = "/Layout/Publications/Magazines";
+      if (temp === "/Layout/Join/Info") temp = "/Layout/Join/Volunteer";
+      if (temp === "/Layout/AboutDirector") temp = "/Layout/About/1";
+      if (temp === "/Layout/AboutLink") temp = "/Layout/About/3";
       this.menaInd = temp;
 
       this.meanPage = false;
@@ -383,6 +389,7 @@ export default {
   //   pointer-events: none;
   // }
   .top {
+    position: relative;
     z-index: 990;
     display: flex;
     justify-content: space-between;
@@ -393,6 +400,7 @@ export default {
     left: 0;
     position: fixed;
     height: 50px;
+    z-index: 10;
     .left {
       width: 20px;
       height: 20px;
@@ -404,6 +412,12 @@ export default {
     .right {
       display: flex;
       align-items: center;
+      .logoTop {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
       & > img {
         width: 20px;
         height: 20px;
@@ -417,6 +431,17 @@ export default {
         }
       }
     }
+    // 毛玻璃
+    .MBL {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(210, 168, 127, 0.1);
+      backdrop-filter: blur(4px);
+      z-index: -1;
+    }
   }
   .erwei {
     margin-top: 30px;
@@ -525,6 +550,7 @@ export default {
   }
   // 菜单页面
   .meanPage {
+    position: relative;
     position: fixed;
     top: 0;
     left: 0;
@@ -532,9 +558,20 @@ export default {
     width: 100vw;
     height: 100vh;
     overflow-y: auto;
-    background-color: rgba(255, 255, 255, 0.9);
+    // m毛玻璃
+    .meanPageMBL {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.2);
+      backdrop-filter: blur(4px);
+      z-index: -1;
+    }
     .conten {
-      min-height: 100vh;
+      height: 100vh;
+      overflow-y: auto;
       width: 90%;
       background-color: #f6f4f1;
       .searchTop {