anxiaoxia 2 месяцев назад
Родитель
Сommit
6ce5e29f8d
2 измененных файлов с 1357 добавлено и 261 удалено
  1. 1041 0
      src/views/envmonitor/taiguv1/index copy.vue
  2. 316 261
      src/views/envmonitor/taiguv1/index.vue

Разница между файлами не показана из-за своего большого размера
+ 1041 - 0
src/views/envmonitor/taiguv1/index copy.vue


+ 316 - 261
src/views/envmonitor/taiguv1/index.vue

@@ -140,9 +140,9 @@
         >
             <div
                 class="box"
+                 v-if="screenEquipList?.length"
             >
                 <Screen
-                    v-if="screenEquipList?.length"
                     :roomInfo="roomInfo"
                     :screenStatus="screenStatus"
                     :equipList="screenEquipList"
@@ -151,9 +151,9 @@
             <!--设备-->
             <div
                 class="box"
+                v-if="audioEquipList?.length"
             >
                 <Volumn
-                   v-if="audioEquipList?.length"
                     :audioStatus="audioStatus"
                     :equipList="audioEquipList"
                 ></Volumn>
@@ -240,13 +240,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'
@@ -758,284 +758,339 @@ onUnmounted(() => {
 </script>
 <style lang="scss">
 .main {
-    position: relative;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  // width: 900px;
+  // height: 600px;
+  background-size: 100% 100%;
+  // mask-image: linear-gradient(
+  //   113.73deg,
+  //   rgba(47, 36, 28, 0.4) 17.26%,
+  //   rgba(47, 36, 28, 0.8) 55.71%
+  // );
+
+  .video-image {
+    position: absolute;
+    left: 50%;
+    top: 0px;
+    transform: translateX(-50%);
+
+    //height: 120%;
+    object-fit: cover;
+    width: 110%;
+    height: 100%;
+  }
+  .video-model {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
     width: 100%;
     height: 100%;
-    overflow: hidden;
-    // width: 900px;
-    // height: 600px;
-    background-size: 100% 100%;
-    // mask-image: linear-gradient(
-    //   113.73deg,
-    //   rgba(47, 36, 28, 0.4) 17.26%,
-    //   rgba(47, 36, 28, 0.8) 55.71%
-    // );
-
-    .video-image {
-        position: absolute;
-        left: 50%;
-        top: 0px;
-        transform: translateX(-50%);
-
-        //height: 120%;
-        object-fit: cover;
-        width: 110%;
-        height: 100%;
+    background: linear-gradient(113.73deg, rgba(47, 36, 28, 0.4) 17.26%, rgba(47, 36, 28, 0.8) 55.71%);
+  }
+  .content {
+    position: relative;
+  }
+  .metting-info {
+    padding-left: 40px;
+    padding-top: 6vh;
+    display: flex;
+    align-items: center;
+    .logo {
+      width: 40px;
+      height: 40px;
+      margin-right: 9px;
     }
-    .video-model {
-        position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(
-            113.73deg,
-            rgba(47, 36, 28, 0.4) 17.26%,
-            rgba(47, 36, 28, 0.8) 55.71%
-        );
+    .name {
+      font-family: Jost;
+      font-size: 40px;
+      font-weight: 300;
+      line-height: 57.8px;
+      letter-spacing: 0.02em;
+      color: #fff;
+      text-align: left;
+      margin-right: 8px;
+      //
+      user-select: none; // 防止长按时出现选择文本
+      -webkit-user-select: none;
+      -webkit-touch-callout: none;
     }
-    .content {
-        position: relative;
+    .location {
+      //styleName: En/H3;
+      font-family: Jost;
+      font-size: 20px;
+      font-weight: 300;
+      line-height: 29px;
+      color: #fff;
+      margin-top: 15px;
     }
-    .metting-info {
-        padding-left: 40px;
-        padding-top: 6vh;
-        display: flex;
-        align-items: center;
-        .logo {
-            width: 40px;
-            height: 40px;
-            margin-right: 9px;
-        }
-        .name {
-            font-family: Jost;
-            font-size: 40px;
-            font-weight: 300;
-            line-height: 57.8px;
-            letter-spacing: 0.02em;
-            color: #fff;
-            text-align: left;
-            margin-right: 8px;
-            //
-            user-select: none; // 防止长按时出现选择文本
-            -webkit-user-select: none;
-            -webkit-touch-callout: none;
-        }
-        .location {
-            //styleName: En/H3;
-            font-family: Jost;
-            font-size: 20px;
-            font-weight: 300;
-            line-height: 29px;
-            color: #fff;
-            margin-top: 15px;
-        }
+  }
+  .language-box {
+    position: absolute;
+    z-index: 9;
+    top: 4.67vh;
+    right: 20px;
+    box-sizing: border-box;
+    padding: 2px;
+    width: 68px;
+    height: 28px;
+    border-radius: 60px;
+    background: rgba(255, 255, 255, 0.2);
+    // -webkit-backdrop-filter: blur(40px);
+    // backdrop-filter: blur(40px);
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 60px;
+      -webkit-backdrop-filter: blur(40px);
+      backdrop-filter: blur(40px);
+      z-index: -1;
     }
-    .language-box {
-        position: absolute;
-        z-index: 9;
-        top: 4.67vh;
-        right: 20px;
-        box-sizing: border-box;
-        padding: 2px;
-        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 {
-            display: inline-block;
-            vertical-align: middle;
-            font-family: PingFang SC;
-            font-size: 11px;
-            font-weight: 400;
-            line-height: 15px;
-            text-align: center;
-            color: rgba(255, 255, 255, 0.6);
-            width: 50%;
-            height: 100%;
-            line-height: 24px;
-            text-align: center;
-            &:nth-child(2) {
-                font-family: Jost;
-            }
-        }
-        .l-active {
-            border-radius: 60px;
-            color: rgba(0, 20, 40, 1);
-            background: rgba(255, 255, 255, 1);
-        }
+    .language-item {
+      display: inline-block;
+      vertical-align: middle;
+      font-family: PingFang SC;
+      font-size: 11px;
+      font-weight: 400;
+      line-height: 15px;
+      text-align: center;
+      color: rgba(255, 255, 255, 0.6);
+      width: 50%;
+      height: 100%;
+      line-height: 24px;
+      text-align: center;
+      &:nth-child(2) {
+        font-family: Jost;
+      }
     }
-    .env-box {
-        position: absolute;
-        box-sizing: border-box;
-        width: 360px;
-        // height: 268px;
-        bottom: 45vh;
-        // top: 6vh;
-        // left: 550px;
-        right: 50px;
-        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 {
-            position: absolute;
-            top: -10px;
-            left: -8px;
-            width: 360px;
-            height: 100%;
-            // height: 268px;
-        }
-        .line {
-            width: 244px;
-            height: 1px;
-            background: rgba(255, 255, 255, 0.2);
-        }
-        .env-info {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 14px 0;
-            // border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-            .item {
-                width: 120px;
-                .title {
-                    //styleName: Chi/Body XS;
-                    font-family: PingFang SC;
-                    font-size: 11px;
-                    font-weight: 400;
-                    line-height: 15px;
-                    letter-spacing: 0.02em;
-                    padding-bottom: 5px;
-                    color: rgba(228, 228, 228, 1);
-                }
-                .num-box {
-                    span {
-                        //styleName: En/H1;
-                        display: inline-block;
-                        padding-right: 4px;
-                        color: #fff;
-                        &:nth-child(1) {
-                            font-family: Jost;
-                            font-size: 36px;
-                            font-weight: 300;
-                            line-height: 36px;
-                        }
-                        &:nth-child(2) {
-                            font-family: Jost;
-                            font-size: 12px;
-                            font-weight: 400;
-                            // line-height: 17px;
-                        }
-                    }
-                }
-            }
-        }
+    .l-active {
+      border-radius: 60px;
+      color: rgba(0, 20, 40, 1);
+      background: rgba(255, 255, 255, 1);
     }
-    .mode-box {
-        margin-left: 40px;
-        margin-top: 162px;
-        display: flex;
-        align-items: center;
-        .item {
-            display: flex;
-            align-items: center;
-            box-sizing: border-box;
-            // width: 77px;
-            height: 40px;
-            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 {
-                widows: 24px;
-                height: 24px;
-                margin-right: 4px;
-            }
-            span {
-                //styleName: Chi/Body Small;
-                font-family: PingFang SC;
-                font-size: 12px;
-                font-weight: 400;
-                line-height: 16px;
-                letter-spacing: 0.02em;
-                color: rgba(255, 255, 255, 0.6);
-            }
+  }
+  .env-box {
+    position: absolute;
+    z-index: 9;
+    box-sizing: border-box;
+    width: 360px;
+    // height: 268px;
+    bottom: 45vh;
+    // top: 6vh;
+    // left: 550px;
+    right: 50px;
+    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);
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 24px 160px 24px 24px;
+      -webkit-backdrop-filter: blur(20px);
+      backdrop-filter: blur(20px);
+      // background: rgba(255, 255, 255, 0.2);
+      z-index: -1;
+    }
+    .box-line {
+      position: absolute;
+      top: -10px;
+      left: -8px;
+      width: 360px;
+      height: 100%;
+      // height: 268px;
+    }
+    .line {
+      width: 244px;
+      height: 1px;
+      background: rgba(255, 255, 255, 0.2);
+    }
+    .env-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 14px 0;
+      // border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+      .item {
+        width: 120px;
+        .title {
+          //styleName: Chi/Body XS;
+          font-family: PingFang SC;
+          font-size: 11px;
+          font-weight: 400;
+          line-height: 15px;
+          letter-spacing: 0.02em;
+          padding-bottom: 5px;
+          color: rgba(228, 228, 228, 1);
         }
-        .active {
-            background: rgba(255, 255, 255, 0.8);
-            span {
-                color: rgba(0, 20, 40, 1);
+        .num-box {
+          span {
+            //styleName: En/H1;
+            display: inline-block;
+            padding-right: 4px;
+            color: #fff;
+            &:nth-child(1) {
+              font-family: Jost;
+              font-size: 36px;
+              font-weight: 300;
+              line-height: 36px;
             }
+            &:nth-child(2) {
+              font-family: Jost;
+              font-size: 12px;
+              font-weight: 400;
+              // line-height: 17px;
+            }
+          }
         }
+      }
     }
-    .fotter {
-        position: fixed;
-        box-sizing: border-box;
-        padding: 16px;
-        // height: 264px;
+  }
+  .mode-box {
+    margin-left: 40px;
+    margin-top: 162px;
+    display: flex;
+    align-items: center;
+    .item {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      position: relative;
+      // width: 77px;
+      height: 40px;
+      padding: 8px 12px 8px 12px;
+      border-radius: 60px;
+      background: rgba(255, 255, 255, 0.2);
+      margin-right: 4px;
+      z-index: 9;
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
         left: 0;
-        bottom: 0;
         width: 100%;
-        // overflow-x: scroll;
-        border-radius: 24px;
+        height: 100%;
+        border-radius: 60px;
         -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);
-        display: flex;
-        gap: 12px;
-        // justify-content: space-between;
-        .box {
-            display: inline-block;
-            vertical-align: middle;
-            // margin-right: 12px;
-            width: 176px;
-            // height: 232px;
-            height: 38.7vh;
-            max-height: 232px;
-            // box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
-            // backdrop-filter: blur(40px);
-            // &:last-child {
-            //   margin-right: 0;
-            // }
-        }
+        z-index: -1;
+      }
+      img {
+        widows: 24px;
+        height: 24px;
+        margin-right: 4px;
+      }
+      span {
+        //styleName: Chi/Body Small;
+        font-family: PingFang SC;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 16px;
+        letter-spacing: 0.02em;
+        color: rgba(255, 255, 255, 0.6);
+      }
     }
-    .small {
-        .box {
-            width: 165px;
-        }
-        .air-box {
-            width: 220px;
-        }
+    .active {
+      background: rgba(255, 255, 255, 0.8);
+      span {
+        color: rgba(0, 20, 40, 1);
+      }
+    }
+  }
+  .fotter {
+    position: fixed;
+    box-sizing: border-box;
+    padding: 16px;
+    // height: 264px;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    // overflow-x: scroll;
+    border-radius: 24px;
+
+    background: rgba(255, 255, 255, 0.1);
+    box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.2);
+    display: flex;
+    z-index: 99;
+    gap: 12px;
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 24px;
+      -webkit-backdrop-filter: blur(20px);
+      backdrop-filter: blur(20px);
+      z-index: -1;
+    }
+    // justify-content: space-between;
+    .box {
+      display: inline-block;
+      vertical-align: middle;
+      // margin-right: 12px;
+      width: 176px;
+      // height: 232px;
+      height: 38.7vh;
+      max-height: 232px;
+      // box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
+      // backdrop-filter: blur(40px);
+      // &:last-child {
+      //   margin-right: 0;
+      // }
+    }
+  }
+  .small {
+    .box {
+      width: 165px;
+    }
+    .air-box {
+      width: 220px;
     }
+  }
 }
 .taigu-popup {
-    box-sizing: border-box;
-    width: 480px;
-    // height: 600px;
+  box-sizing: border-box;
+  width: 480px;
+  // position: relative;
+  // height: 600px;
+  height: 100%;
+  border-radius: 24px 0px 0px 24px;
+  // -webkit-backdrop-filter: blur(30px);
+  // backdrop-filter: blur(30px);
+  background: rgba(255, 255, 255, 0.8);
+  padding: 40px 90px;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
     height: 100%;
     border-radius: 24px 0px 0px 24px;
-    -webkit-backdrop-filter: blur(30px);
+    -webkit-backdrop-filter: blur(30px); // 兼容 WebKit 内核浏览器
     backdrop-filter: blur(30px);
-    background: rgba(255, 255, 255, 0.8);
-    padding: 40px 90px;
+    z-index: -1;
+  }
 }
 </style>
 <style scoped>
 .van-overlay {
-    background: linear-gradient(
-        113.73deg,
-        rgba(37, 21, 8, 0.4) 17.26%,
-        rgba(37, 21, 8, 0.8) 55.71%
-    );
+  background: linear-gradient(113.73deg, rgba(37, 21, 8, 0.4) 17.26%, rgba(37, 21, 8, 0.8) 55.71%);
 }
 </style>