追加毛玻璃效果

components/layout/AiDvSummary/AiDvSummary.vue

@@ -88,6 +88,5 @@ export default {
 .AiSummary {
   width: 100%;
   height: 100%;
-  backdrop-filter: blur(1px);
 }
 </style>

components/layout/AiDvSummary/components/Summary5.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-  export default {
+export default {
   name: 'summary5',
 
   props: {
@@ -37,7 +37,7 @@
     }
   },
 
-    data () {
+  data() {
     return {
       img1: require('../asset/summary5-1.png'),
       img2: require('../asset/summary5-2.png'),
@@ -47,7 +47,7 @@
   },
 
   methods: {
-      getImg (index) {
+    getImg(index) {
       return {
         '0': this.img1,
         '1': this.img2,
@@ -56,11 +56,11 @@
       }[index]
     }
   }
-  }
+}
 </script>
 
 <style lang="scss" scoped>
-  .summary5 {
+.summary5 {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -76,6 +76,7 @@
     display: flex;
     position: relative;
     align-items: center;
+    backdrop-filter: blur(1px);
 
     .right {
       min-width: 90px;
@@ -100,20 +101,24 @@
         background-image: url(./../asset/corner.svg);
         background-repeat: no-repeat;
       }
+
       .corner.left-top {
         left: -6px;
         top: -6px;
         transform: rotateY(180deg);
       }
+
       .corner.right-top {
         right: -6px;
         top: -6px;
       }
+
       .corner.left-bottom {
         left: -6px;
         bottom: -6px;
         transform: rotateX(180deg) rotateY(180deg);
       }
+
       .corner.right-bottom {
         right: -6px;
         bottom: -6px;
@@ -134,5 +139,5 @@
       font-weight: 700;
     }
   }
-  }
+}
 </style>