Browse Source

fix:毛玻璃添加兼容

anxiaoxia 2 weeks ago
parent
commit
e021ac85d8

+ 2 - 0
src/views/envmonitor/taiguv1/components/Air/index.vue

@@ -270,6 +270,7 @@ const searchMore = () => {
   height: 100%;
   border-radius: 24px 24px 44px 24px;
   background-color: rgba(255, 255, 255, 0.2);
+  -webkit-backdrop-filter: blur(40px);
   backdrop-filter: blur(40px);
   box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
   .filter-box {
@@ -357,6 +358,7 @@ const searchMore = () => {
 }
 .activeShow {
   background: rgba(255, 255, 255, 0.8);
+  -webkit-backdrop-filter: blur(40px);
   backdrop-filter: blur(40px);
   box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
 

+ 2 - 0
src/views/envmonitor/taiguv1/components/Curtain/index.vue

@@ -151,6 +151,7 @@ onMounted(() => {})
   height: 100%;
   border-radius: 24px 24px 44px 24px;
   background: rgba(255, 255, 255, 0.2);
+  -webkit-backdrop-filter: blur(40px);
   backdrop-filter: blur(40px);
   box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
 
@@ -226,6 +227,7 @@ onMounted(() => {})
 }
 .active {
   background: rgba(255, 255, 255, 0.8);
+  -webkit-backdrop-filter: blur(40px);
   backdrop-filter: blur(40px);
   box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
 

+ 2 - 0
src/views/envmonitor/taiguv1/components/Lamp/index.vue

@@ -153,6 +153,7 @@ const setLampStatus = type => {
   height: 100%;
   border-radius: 24px 24px 44px 24px;
   background-color: rgba(255, 255, 255, 0.2);
+  -webkit-backdrop-filter: blur(40px);
   backdrop-filter: blur(40px);
   box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
   .top {
@@ -245,6 +246,7 @@ const setLampStatus = type => {
 }
 .active {
   background: rgba(255, 255, 255, 0.8);
+  -webkit-backdrop-filter: blur(40px);
   backdrop-filter: blur(40px);
   box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
 

+ 3 - 0
src/views/envmonitor/taiguv1/components/Screen/index.vue

@@ -112,6 +112,7 @@ const setScreenStatus = (type, value) => {
     height: 100%;
     border-radius: 24px 24px 44px 24px;
     background-color: rgba(255, 255, 255, 0.2);
+    -webkit-backdrop-filter: blur(40px);
     backdrop-filter: blur(40px);
     box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
     display: flex;
@@ -166,12 +167,14 @@ const setScreenStatus = (type, value) => {
         .btn-active {
             background: rgba(255, 255, 255, 0.8);
             color: rgba(0, 20, 40, 1);
+            -webkit-backdrop-filter: blur(20px);
             backdrop-filter: blur(20px);
         }
     }
 }
 .active {
     background: rgba(255, 255, 255, 0.8);
+    -webkit-backdrop-filter: blur(40px);
     backdrop-filter: blur(40px);
     box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
     .top {

+ 2 - 0
src/views/envmonitor/taiguv1/components/Volumn/index.vue

@@ -142,6 +142,7 @@ const compareStatus = data => {
   height: 100%;
   border-radius: 24px 24px 44px 24px;
   background-color: rgba(255, 255, 255, 0.2);
+  -webkit-backdrop-filter: blur(40px);
   backdrop-filter: blur(40px);
   box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
   .top {
@@ -216,6 +217,7 @@ const compareStatus = data => {
 }
 .active {
   background: rgba(255, 255, 255, 0.8);
+  -webkit-backdrop-filter: blur(40px);
   backdrop-filter: blur(40px);
   box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
 

+ 11 - 7
src/views/envmonitor/taiguv1/index.vue

@@ -238,13 +238,13 @@ import { ENV_CONFIG, FORUMArr, lanageArr, roomSourceData } from './const'
 const boxLine = require('@/assets/taiguv1/svg/box_line.png')
 // import "vue3-video-play/dist/style.css";
 import {
-    findForServe,
-    httpGetByMeetingId,
-    HttpGetSpaceInfo,
-    queryAirStatus,
-    queryAudioStatus,
-    queryLampStatus,
-    queryScreenCastingStatus
+findForServe,
+httpGetByMeetingId,
+HttpGetSpaceInfo,
+queryAirStatus,
+queryAudioStatus,
+queryLampStatus,
+queryScreenCastingStatus
 } from '@/apis/taiguv1'
 import useDeviceControl from '@/hooks/useDeviceControl'
 import { useStore } from '@/store'
@@ -839,6 +839,7 @@ onUnmounted(() => {
         width: 68px;
         height: 28px;
         border-radius: 60px;
+        -webkit-backdrop-filter: blur(40px);
         backdrop-filter: blur(40px);
         background: rgba(255, 255, 255, 0.2);
         .language-item {
@@ -876,6 +877,7 @@ onUnmounted(() => {
         padding: 8px 56px;
         border-radius: 24px 160px 24px 24px;
         background: rgba(255, 255, 255, 0.2);
+        -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px);
         box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
         .box-line {
@@ -946,6 +948,7 @@ onUnmounted(() => {
             padding: 8px 12px 8px 12px;
             border-radius: 60px;
             background: rgba(255, 255, 255, 0.2);
+            -webkit-backdrop-filter: blur(20px);
             backdrop-filter: blur(20px);
             margin-right: 4px;
             img {
@@ -980,6 +983,7 @@ onUnmounted(() => {
         width: 100%;
         // overflow-x: scroll;
         border-radius: 24px;
+        -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px);
         background: rgba(255, 255, 255, 0.1);
         box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.2);