电视墙 资源详情 样式

src/assets/styles/base.scss

@@ -91,6 +91,117 @@ $date-state3: #d6333b;
 .TVWallCustomWidth {
   width: 1200px !important;
   height: 740px !important;
+  .el-descriptions__body{
+    background:transparent !important;
+    color: #fff;
+    .el-descriptions-item__label{
+      background:transparent !important;
+      color: #fff;
+      width: 100px;
+    }
+  }
+}
+
+.TVWallCustomWidth-right {
+  width: 1500px !important;
+  height: 750px !important;
+  background: #04080c !important;
+  box-shadow: $barShadow !important;
+  border: 1px $barBorder !important;
+
+  .el-dialog__header {
+    padding: 15px 20px !important;
+    background-image: -moz-linear-gradient($GradualGreen) !important;
+    background-image: -webkit-linear-gradient($GradualGreen) !important;
+    background-image: linear-gradient($GradualGreen) !important;
+    box-shadow: $shadowTitle !important;
+
+    .el-dialog__title {
+      font-weight: bolder !important;
+      color: #3cd7ef !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;
+        vertical-align: middle;
+      }
+      .td1 {
+        width: 6rem;
+      }
+      .td2 {
+        width: 15rem;
+      }
+      //.td-height-16{
+      //  height: 23px;
+      //}
+      //.td-height-14{
+      //  height: 26px;
+      //}
+      //.td-height-13{
+      //  height: 31px;
+      //}
+      //.td-height-12{
+      //  height: 35px;
+      //}
+      //.td-height-11{
+      //  height: 39px;
+      //}
+      //.td-height-7{
+      //  height: 52px;
+      //}
+      .td-height-16{
+        height: 38px;
+      }
+      .td-height-14{
+        height: 44px;
+      }
+      .td-height-13{
+        height: 47px;
+      }
+      .td-height-12{
+        height: 51px;
+      }
+      .td-height-11{
+        height: 54px;
+      }
+      .td-height-7{
+        height: 88px;
+      }
+      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;
+    }
+  }
 }
 
 //公共

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>-->
@@ -23,6 +23,19 @@
       <!--<div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>-->
       <!--</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 label-class-name="detailLabel"
+                                content-class-name="detailLabel"
+                                labelStyle="background-color: #0d3164"
+                                contentStyle="background-color: #0d3164"
+                                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">
@@ -30,11 +43,11 @@
             <h4>电话：{{user.phone}}</h4>
           </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>
-          </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>-->
+          <!--</div>-->
+        <!--</div>-->
       </div>
     </el-dialog>
   </div>