电视墙 资源详情 样式

src/assets/styles/base.scss

@@ -89,8 +89,8 @@ $date-state3: #d6333b;
 }
 //电视墙视频摄像头预览弹层样式
 .TVWallCustomWidth {
-  width: 1500px !important;
-  height: 740px !important;
+  width: 1185px !important;
+  height: 790px !important;
   .el-descriptions__body{
     background:transparent !important;
     color: #fff;
@@ -104,11 +104,21 @@ $date-state3: #d6333b;
 
 .TVWallCustomWidth-right {
   width: 1500px !important;
-  height: 750px !important;
+  height: 740px !important;
   background: #04080c !important;
   box-shadow: $barShadow !important;
   border: 1px $barBorder !important;
 
+  .el-descriptions__body{
+    background:transparent !important;
+    color: #fff;
+    .el-descriptions-item__label{
+      background:transparent !important;
+      color: #fff;
+      width: 100px;
+    }
+  }
+
   .el-dialog__header {
     padding: 15px 20px !important;
     background-image: -moz-linear-gradient($GradualGreen) !important;
@@ -143,6 +153,40 @@ $date-state3: #d6333b;
       box-shadow: $shadowListHover !important;
       border-radius: 5px;
 
+      h4 {
+        margin: .4rem 0;
+        color: $white;
+      }
+    }
+
+    .leader-info-list-con:hover {
+      background-image: -moz-linear-gradient($popupBG) !important;
+      background-image: -webkit-linear-gradient($popupBG) !important;
+      background-image: linear-gradient($popupBG) !important;
+    }
+  }
+
+  .leader-info-container {
+    // padding: .5rem;
+    display: flex;
+    height: 650px;
+    width: 28rem;
+    overflow-y: hidden;
+    flex-direction: column;
+    padding: 0 1rem;
+    float: right;
+
+    .leader-info-list-con {
+      width: 100%;
+      padding: 1rem;
+      margin-bottom: .5rem;
+      background-image: -moz-linear-gradient($GradualGreen) !important;
+      background-image: -webkit-linear-gradient($GradualGreen) !important;
+      background-image: linear-gradient($GradualGreen) !important;
+      border: solid 1px #7dc2eb;
+      box-shadow: $shadowListHover !important;
+      border-radius: 5px;
+
       td {
         margin: .4rem 0;
         color: $white;

src/components/TVWalls.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-dialog :title="title" :visible.sync="TVWallVisible" v-if="TVWallVisible" customClass="TVWallCustomWidth"
+    <el-dialog :title="title" :visible.sync="TVWallVisible" v-if="TVWallVisible" customClass="TVWallCustomWidth-right"
                @close="cancelEventLocationShow()">
 
       <!--<div @click="findCameraByEventCoordinate()">视频联动</div>-->
@@ -24,21 +24,38 @@
       <!--</div>-->
       <div style="display: flex;" >
         <!-- 新增落点详情侧边栏 -->
-        <el-descriptions v-if="resourceDataShow" class="margin-top" title="" :column="1" :size="size" direction="horizontal" style="width: 20%;margin-right: 0;position: absolute;right:18px; height:648px; overflow-y: scroll;" border >
-          <el-descriptions-item v-for="resource in resourceData">
-            <template slot="label">
-              {{resource.key}}
-            </template>
-            {{resource.value}}
-          </el-descriptions-item>
-        </el-descriptions>
+        <!--<el-descriptions v-if="resourceDataShow" class="margin-top" title="" :column="1" :size="size" direction="horizontal" style="width: 20%;margin-right: 0;position: absolute;right:18px; height:648px; overflow-y: scroll;" border >-->
+          <!--<el-descriptions-item v-for="resource in resourceData">-->
+            <!--<template slot="label">-->
+              <!--{{resource.key}}-->
+            <!--</template>-->
+            <!--{{resource.value}}-->
+          <!--</el-descriptions-item>-->
+        <!--</el-descriptions>-->
         <div id="dom1" class="dom1"></div>
-        <div class="leader-info-container" v-if="userDataShow">
-          <div class="leader-info-list-con" v-for="user in userData">
-            <h4 style="">{{user.position}}：{{user.name}}</h4>
+          <div class="leader-info-container" v-if="userDataShow">
+            <div class="leader-info-list-con" v-for="user in userData">
+              <h4 style="">{{user.position}}：{{user.name}}</h4>
             <h4>电话：{{user.phone}}</h4>
           </div>
         </div>
+
+        <div class="leader-info-container" v-if="resourceDataShow">
+          <div class="leader-info-list-con">
+            <div v-for="resource in resourceData">
+              <el-descriptions class="margin-top" title="" :column="1" :size="size" direction="horizontal" border >
+                <el-descriptions-item >
+                  <template slot="label">
+                    {{resource.key}}
+                  </template>
+                  {{resource.value}}
+                </el-descriptions-item>
+              </el-descriptions>
+            </div>
+          </div>
+        </div>
+
+
         <!--<div class="leader-info-container" v-if="resourceDataShow">-->
           <!--<div class="leader-info-list-con" >-->
             <!--<h4 style="" v-for="resource in resourceData">{{resource.key}}：{{resource.value}}</h4>-->