fix: 修复九宫格公共组件添加相机弹窗悬浮查看相机预览图问题

src/components/CameraGroupListAndTree/CameraGroupList/CameraTreeOfGroupList.vue

@@ -29,23 +29,27 @@
               selectedCamera: isSelected(node, data.id),
             }"
           >
-            <div v-if="data.nodeType === CameraTreeNodeType.camera" class="icons">
-              <VideoCamera class="cameraIcon" />
-              <WarningFilled v-if="isInvalid(data)" class="invalidCamera" style="color: red" />
-            </div>
-
-            <div class="cameraName">
-              {{ node.label }}
-            </div>
-
             <Thumbnail
               v-if="data.nodeType === CameraTreeNodeType.camera"
               :imageUrl="data.imageUrl"
               :code="data.code"
               position="right"
             >
-              <div class="mask"></div>
+              <div class="iconAndCameraName">
+                <div class="icons">
+                  <VideoCamera class="cameraIcon" />
+                  <WarningFilled v-if="isInvalid(data)" class="invalidCamera" style="color: red" />
+                </div>
+                <div class="cameraName">
+                  {{ node.label }}
+                </div>
+              </div>
             </Thumbnail>
+            <template v-else>
+              <div class="cameraName">
+                {{ node.label }}
+              </div>
+            </template>
           </div>
         </template>
       </el-tree>
@@ -188,7 +192,34 @@
         display: flex;
         align-items: center;
         color: black;
-        // position: relative;
+        position: relative;
+        width: 100%;
+        .iconAndCameraName {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          .icons {
+            display: flex;
+            align-items: center;
+            position: relative;
+            .cameraIcon {
+              height: 18px;
+              margin-right: 8px;
+              color: black;
+            }
+            .invalidCamera {
+              height: 14px;
+              color: #dd5869;
+              position: absolute;
+              right: 0px;
+              top: -5px;
+            }
+          }
+          .cameraName {
+            width: fit-content;
+            position: relative;
+          }
+        }
         .icons {
           display: flex;
           align-items: center;
@@ -198,30 +229,24 @@
             margin-right: 8px;
             color: black;
           }
-          .invalidCamera {
-            height: 14px;
-            color: #dd5869;
-            position: absolute;
-            right: 0px;
-            top: -5px;
-          }
         }
-      }
-      .mask {
-        height: 26px;
-        width: 100%;
+        .cameraName {
+          flex: 1;
+        }
       }
     }
   }
 
   :deep(.thumb-nail) {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 99;
+    display: flex;
+    align-items: center;
+    flex: 1;
+    height: 100%;
+  }
+
+  :deep(.thumb-nail > div) {
+    width: 100%;
+    height: 100%;
   }
 
   :deep(.el-tree-node__content) {