样式调整

src/assets/css/home.scss

@@ -28,10 +28,41 @@
 // 点击模型弹出框
 .modelInfo {
     position: absolute;
-    background: rgba(255, 255, 255, 0.17);
+    // background: rgba(255, 255, 255, 0.17);
+    background-color: #ffffff00;
     border-radius: 10px;
     backdrop-filter: blur(30.5px);
-    z-index: 9988;
+    z-index: 8;
+
+   
+    .model-detail {
+        // background-color: #fff;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        overflow: hidden;
+        .list {
+            width: 202px;
+            text-align: center;
+            height: 30px;
+            line-height: 30px;
+            font-size: 12px;
+            color: #fff;
+            background-color: rgba(255, 255, 255, 0.31);
+            font-size: 12px;
+            font-family: Microsoft YaHei UI;
+            font-weight: 700;
+    
+
+        }
+        .listtitle {
+            width: 100%;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            background-color: rgba(142, 142, 142, 0.18);
+        }
+
+    }
 
     // .model-detail {
     //     position: absolute;
@@ -44,7 +75,6 @@
     //     // flex-wrap: wrap;
     //     // padding: 10px;
 
-
     //     span {
     //         font-size: 16px;
 
@@ -70,4 +100,12 @@
     //         }
     //     }
     // }
-}
+}
+
+// .asd  .list:first-child {
+//     /* Your styles here */
+//     // border-radius: 10px;
+//     border-top-left-radius: 10px;
+//     border-top-right-radius: 10px;
+//     // background-color: aqua;
+//   }

src/assets/css/right.scss

@@ -19,12 +19,12 @@
 ::v-deep  .el-carousel__arrow--left{
 
     left: -7px;
-    top: 54%;
+    top: 55%;
 }
 ::v-deep  .el-carousel__arrow--right{
 
     right: -7px;
-    top: 54%;
+    top: 55%;
 }
 ::v-deep .el-carousel {
 

src/components/UeVideo.vue

@@ -1,7 +1,7 @@
 
 <template>
-  <!-- <div  ref="video" id="player"></div> -->
-  <div style="background-color: rgba(156, 167, 84, 0.667); width: 100vw;height: 100vh;position: absolute;" ></div>
+  <div  ref="video" id="player"></div>
+  <!-- <div style="background-color: rgba(156, 167, 84, 0.667); width: 100vw;height: 100vh;position: absolute;" ></div> -->
   <Login :class="loginShow ? '' : 'hidden'"></Login>
   <home></home>
   <!-- <div @click="toUE" style="position: absolute;top: 5%; left: 50%;background-color: darkcyan;z-index: 200">向UE发信息</div> -->

src/components/home.vue

@@ -11,21 +11,20 @@
 
         </el-container>
         <div ref="popoverRef" id="popoverRef" class="modelInfo" >
-            <div class="model-detail" >
-                <div v-for="item in classDeviceInfo"  style="margin-bottom: 5px;">
+            <div class="model-detail"  >
+                <div v-for="item in classDeviceInfo" >
                     
-                    <div style="width: 180px;text-align: center;height: 30px;line-height: 30px;font-size: 12px;color: #fff; background-color: #49484890;: blur(20px);">
+                    <div class="list">
                     {{ item[0].value }}
                     </div>
-                    <div v-for="item2 in item"  style="width: 180px;height: 30px;display: flex;align-items: center;">
+                    <div   v-for="item2 in item" class="listtitle">
                         
-                       <span style="color: #fff;margin-left: 5px; font-weight: 700;"> {{ item2.name }} :</span>
+                       <span style="color: #fff;margin-left: 5px; font-weight: 700;padding-left: 8px; "> {{ item2.name }} :</span>
                        <span v-if="item2.value!='在线'" style=" font-family: 100; margin-left: 5px;color: #ffffffeb;">{{ item2.value }}</span>
                        <span v-else style=" font-family: 100; margin-left: 5px;color: #10C383;">{{ item2.value }}</span>
                     </div>
                    
-                    <!-- <span :class="item.online ? 'green' : item.online == 'false' ? 'red' : ''">213
-                    </span> -->
+      
 
                 </div>
             </div>