样式修改

src/views/mortgage/index.vue

@@ -112,7 +112,9 @@
           </div>
           <div class="mortgage_top_item_cons_right">
             <div class="mortgage_top_item_cons_right_top">
-              <div class="mortgage_top_item_cons_right_top_video"></div>
+              <div class="mortgage_top_item_cons_right_top_video">
+                <img src="/image/videos.jpg">
+              </div>
               <div class="mortgage_top_item_cons_right_top_foor">
                 <div class="invie">东北角摄像头1</div>
 
@@ -139,22 +141,22 @@
                       style="height: 16px; width: 16px"
                     />
                   </span>
-                  警告信息
+                  告警信息
                 </div>
                 <div class="titele_right"></div>
               </div>
               <div class="containers">
                 <div class="container_item">
-                  2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;摄像头1号离线
+                  2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
                 </div>
                 <div class="container_item">
-                  2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;摄像头1号离线
+                  2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
                 </div>
                 <div class="container_item">
-                  2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;摄像头1号离线
+                  2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
                 </div>
                 <div class="container_item">
-                  2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;摄像头1号离线
+                  2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
                 </div>
               </div>
             </div>
@@ -270,6 +272,15 @@
        <iframe src="http://jianguan.yyundong.com/map365/#/map" frameborder="0"></iframe> 
       </div>
     </el-dialog>
+
+    <el-dialog
+      title="查看视频"
+      :visible.sync="lookvideo"
+      width="50%">
+      <div class="loockvideo">
+        <video autoplay src="https://cloud.video.taobao.com/play/u/null/p/1/e/6/t/1/437270439243.mp4"></video>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -319,7 +330,8 @@ export default {
       ],
       dayValue: "15日",
       dialogVisible:false,
-      videos:true
+      videos:true,
+      lookvideo:false
     };
   },
   mounted(){
@@ -328,6 +340,7 @@ export default {
   methods:{
     clivideo(){
       this.videos = !this.videos
+      this.lookvideo = true
     }
   }
 };
@@ -337,7 +350,7 @@ export default {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  padding: 20px;
+  padding: 0px 20px 20px 20px;
   display: flex;
   flex-direction: column;
   position: relative;
@@ -349,16 +362,18 @@ export default {
   }
   .mortgage_top {
     width: 100%;
-    height: calc((100% - 25px) / 2);
+    height: calc((100% - 50px) / 2);
     position: relative;
     display: flex;
     justify-content: space-between;
-    margin-bottom: 20px;
+    margin-bottom: 40px;
     .mortgage_top_item {
       height: 100%;
       position: relative;
       &:nth-of-type(1) {
         width: 26%;
+        box-sizing: border-box;
+        padding-right: 30px;
         ::v-deep .el-select {
           width: 150px;
           .el-input {
@@ -504,6 +519,8 @@ export default {
         .mortgage_top_item_cons_right {
           width: 40%;
           height: 100%;
+          box-sizing: border-box;
+          padding-left: 30px;
           position: relative;
           .mortgage_top_item_cons_right_top {
             height: 50%;
@@ -512,12 +529,16 @@ export default {
             position: relative;
             .mortgage_top_item_cons_right_top_video {
               width: 100%;
-              height: 85%;
+              height: 90%;
               position: relative;
+              img{
+                width: 100%;
+                height: 100%;
+              }
             }
             .mortgage_top_item_cons_right_top_foor {
               width: 100%;
-              height: 15%;
+              height: 10%;
               display: flex;
               position: relative;
               .invie {
@@ -583,9 +604,13 @@ export default {
                 height: 30px;
                 line-height: 30px;
                 color: #999;
-                font-size: 18px;
+                font-size: 16px;
+                font-family: '微软雅黑';
                 box-sizing: border-box;
                 padding-left: 20px;
+                span{
+                  margin-left: 10px;
+                }
               }
             }
           }
@@ -710,7 +735,7 @@ export default {
   }
   .mortgage_bom {
     width: 100%;
-    height: calc((100% - 45px) / 2);
+    height: calc((100% - 75px) / 2);
     display: flex;
     align-items: center;
     position: relative;
@@ -718,9 +743,12 @@ export default {
       height: 100%;
       &:nth-of-type(1) {
         width: 26%;
+        box-sizing:border-box;
+        padding-right: 30px;
         .mortgage_bom_item_cont {
+          
           box-sizing: border-box;
-          padding-left: 25px;
+          padding: 20px;
           .mortgage_bom_item_cont_item {
             &:last-child {
               border-bottom: none;
@@ -737,7 +765,7 @@ export default {
         width: 28%;
         .mortgage_bom_item_cont {
           box-sizing: border-box;
-          padding-left: 25px;
+          padding-left: 45px;
           .mortgage_bom_item_cont_item {
             &:last-child {
               border-bottom: none;
@@ -791,12 +819,12 @@ export default {
       }
       .mortgage_bom_item_cont {
         width: 100%;
-        height: calc(100% - 50px);
+        height: calc(100% - 100px);
         position: relative;
 
         .mortgage_bom_item_cont_item {
           width: 100%;
-          height: 40px;
+          height: calc(100% / 5);
           position: relative;
           display: flex;
           border-bottom: solid 1px #dadada;
@@ -818,7 +846,7 @@ export default {
         }
       }
       .ditus {
-        height: 200px;
+        height: 160px;
         width: 100%;
         position: relative;
         cursor: pointer;
@@ -843,5 +871,13 @@ export default {
       height: 100%;
     }
   }
+  .loockvideo{
+    width: 100%;
+    height: 300px;
+    video{
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 </style>