syy

src/components/DetailDialog/eventDetail.vue

@@ -8,6 +8,7 @@
   <div>
     <el-dialog title="事件详情" :visible.sync="eventDialogVisible" custom-class="eventDialog"
                style="margin-top: 5vh !important;"
+               class="sj_rl"
                @close="cancelEventShow()"
     >
       <div class="transferBg d1">
@@ -75,7 +76,7 @@
       <div class="d3">
         <div class="transferBg video" >
           <h3>现场图片</h3>
-          <image-preview :src="otherInfo.picUrl?otherInfo.picUrl:require('@/assets/images/eventDetail/imgNull.png')" :width="580" :height="360"/>
+          <image-preview :src="otherInfo.picUrl?otherInfo.picUrl:require('@/assets/images/eventDetail/imgNull.png')" :width="580" :height="327"/>
         </div>
         <div class="mid">
           <div class="transferBg info" v-if="eventTypeDl == 100">
@@ -701,370 +702,420 @@ export default {
 </style>
 
 <style lang="scss">
-.eventDialog {
-  width: 97%;
-  height: 95%;
-  border-radius: 10px;
-
-  .el-dialog__body {
-    height: 93%;
-    color: #fff;
-  }
 
-  .transferBg {
-    padding: 15px 0 0 15px;
-    background: linear-gradient(to bottom, rgba(15, 42, 58, 0.9), rgba(35, 42, 48, .9));
-    border-radius: 10px;
-
-    h3 {
-      padding-left: 20px;
-      background: url("~@/assets/gas/leftlist_btn.png") no-repeat 0px 0px;
-      background-size: 12px 15px;
-      font-size: 16px;
-      font-weight: 600;
+  .sj_rl{
+    overflow: hidden;
+    .el-dialog{
+      background: #232c3f;
+      -webkit-box-shadow: rgb(33 54 104 / 94%) 0px 0px 18px inset;
+      box-shadow: rgb(33 54 104 / 94%) 0px 0px 18px inset;
+      border: 1px solid rgba(51, 70, 127, 0.7);
     }
 
-    .spsb_xx {
-      display: flex;
-      height: 130px;
+    .el-dialog__header {
+      padding: 15px 20px !important;
+      background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(44 51 76 / 80%)), to #354364);
+      background-image: linear-gradient(180deg, rgb(44 51 76 / 80%), #354364);
+      -webkit-box-shadow: 0 -0.2rem 0.5rem 0.3rem rgb(49 64 79 / 9%) inset;
+      box-shadow: 0 -0.2rem 0.5rem 0.3rem rgb(49 64 79 / 9%) inset;
+    }
+    .transferBg {
+      padding: 15px 0 0 15px;
+      background: -webkit-gradient(linear, left top, left bottom, from(rgb(41 52 78 / 88%)), to(rgb(29 39 70 / 90%)));
+      background: linear-gradient(to bottom, rgb(41 52 78 / 88%), rgb(29 39 70 / 90%));
       border-radius: 10px;
-      padding-left: 3%;
-
-      .spsb_text {
-        width: 60%;
-        height: 100%;
-        padding: 5px;
-        border-color: #22BCF3;
-        background: #14375A;
-        border-radius: 4px;
-        outline: 0px;
-        border-radius: 10px;
-        color: #fff;
-        line-height: 25px;
+
+      h3 {
+        padding-left: 20px;
+        background: url("~@/assets/gas/leftlist_btn.png") no-repeat 0px 0px;
+        background-size: 12px 15px;
+        font-size: 16px;
+        font-weight: 600;
+        margin-bottom: 10px;
       }
 
-      .btn_option {
-        width: 40%;
-        height: 100%;
+      .spsb_xx {
+        display: flex;
+        height: 130px;
+        border-radius: 10px;
+        padding-left: 3%;
+
+        .spsb_text {
+          width: 75%;
+          height: 100%;
+          padding: 5px;
+          border-color: #606b91;
+          background: #4c4d5f61;
+          border-radius: 4px;
+          outline: 0px;
+          color: #fff;
+          line-height: 25px;
+        }
 
-        .el-button {
-          width: 70%;
-          height: 20%;
-          margin: 2.5% 0 0 15% !important;
-          background-color: #14375A !important;
+        .btn_option {
+          width: 25%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          .el-button {
+            width: 80%;
+            margin: 2.5% 0 3px 15% !important;
+            border: 1px solid #93a5cd;
+            background-color: #4c4d5f61;
+            height: 30px;
+            padding: 0 20px;
+            color: #fff;
+          }
+          .el-button:hover{
+            border: 1px solid #93a5cd;
+            background-color: rgba(55, 59, 95, 0.73);
+          }
         }
       }
     }
-  }
-
-  .xczk_div {
-    margin-top: 15px !important;
-
-    div {
-      font-size: 14px;
-      line-height: 20px;
-      color: #c9e3f3;
-      padding-left: 19px;
+    .continueForm_contain {
+      position: absolute;
+      width: 8vh;
+      right: 3%;
+      top: 10%;
+      color: #fff;
+      background-color: #5bdddd;
+      border-radius: 10px;
+      border: 0px;
+      outline: 0px;
+      padding: 4px 0px;
     }
-  }
+    .d1 {
+      height: 20%;
 
-  .continueForm_contain {
-    position: absolute;
-    width: 8vh;
-    right: 3%;
-    top: 10%;
-    color: #fff;
-    background-color: #5bdddd;
-    border-radius: 10px;
-    border: 0px;
-    outline: 0px;
-    padding: 4px 0px;
-  }
-
-  .d1 {
-    height: 20%;
-
-    .eventInfo_contain {
-      display: flex;
-      height: 60%;
-      width: 100%;
-      flex-wrap: wrap;
-      margin-top: 1.5%;
+      .eventInfo_contain {
+        display: flex;
+        height: 60%;
+        width: 100%;
+        flex-wrap: wrap;
+        margin-top: 1.5%;
 
-      .sj_tit {
-        font-size: 14px;
-        font-weight: 600;
-        color: #22bcf3;
-      }
+        .sj_tit {
+          font-size: 14px;
+          font-weight: 600;
+          color: #22bcf3;
+        }
 
-      >div {
-        width: 250px;
-        color: #b9e5ff;
-      }
+        >div {
+          width: 250px;
+          color: #b9e5ff;
+        }
 
-      >div:not(:nth-child(4n+1)) {
-        margin-right: 5%;
-      }
+        >div:not(:nth-child(4n+1)) {
+          margin-right: 5%;
+        }
 
-      .videoLinkage {
-        position: absolute;
-        width: 200px !important;
-        height: 15%;
-        text-align: center;
-        top: 10%;
-        right: -3%;
-        cursor: pointer;
-        background: url("~@/assets/images/lookall/sxt.png") 0 0 no-repeat;
-        background-size: 100% 100%;
+        .videoLinkage {
+          position: absolute;
+          width: 200px !important;
+          height: 15%;
+          text-align: center;
+          top: 10%;
+          right: 2%;
+          cursor: pointer;
+          background: url("~@/assets/images/lookall/sxt.png") 0 0 no-repeat;
+          background-size: 100% 100%;
+        }
       }
     }
-  }
 
-  .d2 {
-    position: relative;
-    width: 69%;
-    height: 146px;
-    margin-top: 1%;
+    .d2 {
+      position: relative;
+      width: 69%;
+      height: 146px;
+      margin-top: 1%;
 
-    .progress_contain {
-      height: 60%;
-      margin-top: 1.5%;
+      .progress_contain {
+        height: 60%;
+        margin-top: 1.5%;
 
-      color: #c3e7ff;
+        color: #c3e7ff;
 
-      .line {
-        width: 99%;
-        height: 2px;
-        margin-top: 3%;
-        background-color: #09C2C4;
-      }
+        .line {
+          width: 99%;
+          height: 2px;
+          margin-top: 3%;
+          background-color: #09C2C4;
+        }
 
-      .e1 {
-        width: 60px;
-        position: absolute;
-        bottom: 18%;
-        left: 8%;
+        .e1 {
+          width: 60px;
+          position: absolute;
+          bottom: 18%;
+          left: 8%;
 
-        div {
-          height: 22px;
-          line-height: 35px;
+          div {
+            height: 22px;
+            line-height: 35px;
+          }
         }
-      }
 
-      .e2 {
-        width: 60px;
-        position: absolute;
-        bottom: 18%;
-        left: 32%;
+        .e2 {
+          width: 60px;
+          position: absolute;
+          bottom: 18%;
+          left: 32%;
 
-        div {
-          height: 22px;
-          line-height: 35px;
+          div {
+            height: 22px;
+            line-height: 35px;
+          }
         }
-      }
 
-      .e3 {
-        width: 60px;
-        position: absolute;
-        bottom: 18%;
-        left: 59%;
+        .e3 {
+          width: 60px;
+          position: absolute;
+          bottom: 18%;
+          left: 59%;
 
-        div {
-          height: 22px;
-          line-height: 35px;
+          div {
+            height: 22px;
+            line-height: 35px;
+          }
         }
-      }
 
-      .e4 {
-        width: 60px;
-        position: absolute;
-        bottom: 18%;
-        left: 86%;
+        .e4 {
+          width: 60px;
+          position: absolute;
+          bottom: 18%;
+          left: 86%;
 
-        div {
-          height: 22px;
-          line-height: 35px;
+          div {
+            height: 22px;
+            line-height: 35px;
+          }
         }
-      }
 
-      .z-lc-time {
-        width: 120px;
-        height: 23px;
-        background: linear-gradient(0deg, #2A6DCD 0%, rgba(43, 96, 152, 0.5) 100%);
-        border-radius: 50px;
-        font-size: 12px;
-        padding: 0 5px;
-        line-height: 24px !important;
-        color: #fff;
-        position: absolute;
-        left: 55px;
-        top: 15px;
-      }
+        .z-lc-time {
+          width: 120px;
+          height: 23px;
+          background: linear-gradient(0deg, #2A6DCD 0%, rgba(43, 96, 152, 0.5) 100%);
+          border-radius: 50px;
+          font-size: 12px;
+          padding: 0 5px;
+          line-height: 24px !important;
+          color: #fff;
+          position: absolute;
+          left: 55px;
+          top: 15px;
+        }
 
-      .z-clyj {
-        position: absolute;
-        left: 190px;
-        top: 9px;
+        .z-clyj {
+          position: absolute;
+          left: 190px;
+          top: 9px;
 
-        img {
-          width: 35px;
-          height: 35px;
+          img {
+            width: 35px;
+            height: 35px;
+          }
         }
       }
     }
-  }
 
-  .d3 {
-    display: flex;
-    height: 56%;
-    margin-top: 1%;
+    .d3 {
+      display: flex;
+      height: 56%;
+      margin-top: 1%;
 
-    .video {
-      width: 34%;
-    }
+      .video {
+        width: 34%;
+      }
 
-    .mid {
-      width: 34%;
-      margin-left: 1.5%;
+      .mid {
+        width: 34%;
+        margin-left: 1.5%;
 
-      .info {
-        width: 48.5%;
-        height: 48.5%;
-        float: left;
+        .info {
+          width: 48.5%;
+          height: 48.5%;
+          float: left;
 
-        >div {
-          margin-top: 2.5%;
-          height: 76%;
+          >div {
+            margin-top: 2.5%;
+            height: 76%;
 
-          >div:not(:nth-child(1)) {
-            margin-top: 2%;
+            >div:not(:nth-child(1)) {
+              margin-top: 2%;
+            }
           }
         }
-      }
 
-      .info_right {
-        float: left;
-        width: 48.5%;
-        height: 48.5%;
-        margin-left: 3%;
+        .info_right {
+          float: left;
+          width: 48.5%;
+          height: 48.5%;
+          margin-left: 3%;
 
-        >div {
-          margin-top: 3%;
+          >div {
+            margin-top: 3%;
 
-          >div:not(:nth-child(1)) {
-            margin-top: 2%;
+            >div:not(:nth-child(1)) {
+              margin-top: 2%;
+            }
+          }
+
+          .div_Option {
+            width: 96%;
+            height: 16vh;
           }
         }
 
-        .div_Option {
-          width: 96%;
-          height: 16vh;
+        .demoDeptStylesheet {
+          width: 100%;
+          position: relative;
+          left: -3%;
         }
-      }
 
-      .demoDeptStylesheet {
-        width: 100%;
-        position: relative;
-        left: -3%;
+        .pics {
+          width: 100%;
+          height: 48.5%;
+          float: left;
+          margin-top: 2%;
+
+          >div {
+            overflow-x: auto;
+            /* 横向滚动条 */
+            overflow-y: hidden;
+            /* 隐藏纵向滚动条 */
+            white-space: nowrap;
+            /* 防止换行（如果不是 flex） */
+            padding-top: 2%;
+
+            img {
+              flex-shrink: 0;
+              width: 200px;
+              height: 140px;
+            }
+
+            >img:not(:nth-child(1)) {
+              margin-left: 3%;
+            }
+          }
+        }
       }
 
-      .pics {
-        width: 100%;
-        height: 48.5%;
-        float: left;
-        margin-top: 2%;
+      .right {
+        width: 30%;
+        height: 140%;
+        margin-left: 1.5%;
+        margin-top: -168px;
+        padding-right: 1%;
 
         >div {
-          overflow-x: auto;
-          /* 横向滚动条 */
-          overflow-y: hidden;
-          /* 隐藏纵向滚动条 */
-          white-space: nowrap;
-          /* 防止换行（如果不是 flex） */
-          display: flex;
-          padding-top: 2%;
+          margin-top: 1.5%;
 
-          img {
-            flex-shrink: 0;
-            width: 200px;
-            height: 140px;
-          }
-
-          >img:not(:nth-child(1)) {
-            margin-left: 3%;
+          >div:not(:nth-child(1)) {
+            margin-top: 2%;
           }
         }
       }
     }
 
-    .right {
-      width: 30%;
-      height: 140%;
-      margin-left: 1.5%;
-      margin-top: -168px;
-      padding-right: 1%;
-
-      >div {
-        margin-top: 1.5%;
-
-        >div:not(:nth-child(1)) {
-          margin-top: 2%;
-        }
+    .el-card {
+      border: 1px solid #93a5cd;
+      background-color: #4c4d5f61;
+      color: #fff;
+      line-height: 25px;
+      h4{
+        margin-bottom: 10px;
       }
     }
+    .el-timeline-item__node {
+      background-color: #7180c5;
+      box-shadow: 0px 0px 5px #4f73c5;
+      box-shadow: 0px 0px 5px #4f73c5;
+    }
+    .el-timeline-item__tail {
+      border-left: 1px solid #4e6899;
+    }
+
   }
+.el-dialog__close{
+  color: #fff!important;
 }
 
+  .el-dialog__header .el-dialog__title {
+    color: #fff;
+  }
+.eventDialog {
+  width: 97%;
+  height: 95%;
+  border-radius: 10px;
 
-.eventDialog .transferBg .spsb_xx {
-  flex-direction: column;
-}
+  .el-dialog__body {
+    height: 93%;
+    color: #fff;
+  }
 
-.eventDialog .transferBg .spsb_xx .spsb_text {
-  width: 100% !important;
-  border: 1px solid #0672a3 !important;
-  background-color: rgba(4, 38, 73, 0.63) !important;
-}
 
-.eventDialog .transferBg .spsb_xx .btn_option {
-  display: flex;
-}
 
-.eventDialog .transferBg .spsb_xx .btn_option .el-button[data-v-d1d2bf40] {
-  height: 30px;
-  border: 1px solid #0672a3 !important;
-  background-color: #0395c5 !important;
-  padding: 0 20px;
-  color: #fff;
-}
 
-.eventDialog .d3 {
-  height: 386px !important;
-}
 
-.eventDialog .transferBg h3 {
-  color: #C9E1EF;
-}
+  .xczk_div {
+    margin-top: 0px !important;
+
+    div {
+      font-size: 14px;
+      line-height: 20px;
+      color: #c9e3f3;
+      padding-left: 19px;
+    }
+  }
+
+  .eventDialog .transferBg .spsb_xx .btn_option .el-button{
+
+  }
+
+  .eventDialog .d3 {
+    height: 386px !important;
+  }
+
+  .eventDialog .transferBg h3 {
+    color: #C9E1EF;
+    margin-bottom: 10px;
+  }
+
+  .eventDialog .d1 .eventInfo_contain>div {
+    width: 290px;
+    color: #b9e5ff;
+    padding: 5px;
+  }
+
+
+  .el-timeline-item__node--normal {
+    left: 0px;
+    width: 10px;
+    height: 10px;
+  }
+
+  /*.el-timeline-item__node {*/
+    /*background-color: #1fe3d2;*/
+    /*box-shadow: 0px 0px 5px #1fe3d2;*/
+  /*}*/
 
-.eventDialog .d1 .eventInfo_contain>div {
-  width: 290px;
-  color: #b9e5ff;
-  padding: 5px;
 }
 
 
-.el-timeline-item__node--normal {
-  left: 0px;
-  width: 10px;
-  height: 10px;
+.eventDialog .transferBg .spsb_xx {
+  flex-direction: row;
 }
 
-.el-timeline-item__node {
-  background-color: #1fe3d2;
-  box-shadow: 0px 0px 5px #1fe3d2;
+
+
+.eventDialog .transferBg .spsb_xx .btn_option {
+  display: flex;
 }
 
 
+
+
+
 .el-timeline-item__tail {
   position: absolute;
   left: 4px;
@@ -1081,6 +1132,7 @@ export default {
   font-weight: 900;
   display: block;
   margin-top: -11px !important;
+
 }
 
 .el-card {
@@ -1088,9 +1140,31 @@ export default {
   background-color: #00706b61;
   color: #fff;
   line-height: 25px;
+  h4{
+    margin-bottom: 10px;
+  }
 }
 
 .el-timeline-item {
   padding-bottom: 20px !important;
 }
+.otherPics{
+  overflow-x: scroll!important;
+  display: block;
+  height: 134px;
+  overflow-y: scroll!important;
+  padding-top: 0!important;
+  .el-image{
+    width: 140px;
+    height: 85px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    float: left;
+    img{
+      width: 100% !important;
+      height: 100%!important;
+    }
+  }
+}
+
 </style>

src/views/industry/lookall.vue

@@ -5433,8 +5433,8 @@
 	.el-button {
 		padding: 5px 0 !important;
 		color: #fff !important;
-		background-color: #394152 !important;
-		border: 1px solid #475b93 !important;
+		/*background-color: #394152 !important;*/
+		/*border: 1px solid #475b93 !important;*/
 	}
 
 	.el-pagination .btn-next,
@@ -5528,30 +5528,6 @@
 				border-radius: 10px;
 				padding-left: 3%;
 
-				.spsb_text {
-					width: 60%;
-					height: 100%;
-					padding: 5px;
-					border-color: #22BCF3;
-					background: #14375A;
-					border-radius: 4px;
-					outline: 0px;
-					border-radius: 10px;
-					color: #fff;
-					line-height: 25px;
-				}
-
-				.btn_option {
-					width: 40%;
-					height: 100%;
-
-					.el-button {
-						width: 70%;
-						height: 20%;
-						margin: 2.5% 0 0 15% !important;
-						background-color: #14375A !important;
-					}
-				}
 			}
 		}
 
@@ -5604,17 +5580,6 @@
 					margin-right: 5%;
 				}
 
-				.videoLinkage {
-					position: absolute;
-					width: 200px !important;
-					height: 15%;
-					text-align: center;
-					top: 10%;
-					right: -3%;
-					cursor: pointer;
-					background: url("~@/assets/images/lookall/sxt.png") 0 0 no-repeat;
-					background-size: 100% 100%;
-				}
 			}
 		}
 
@@ -5772,26 +5737,6 @@
 					float: left;
 					margin-top: 2%;
 
-					>div {
-						overflow-x: auto;
-						/* 横向滚动条 */
-						overflow-y: hidden;
-						/* 隐藏纵向滚动条 */
-						white-space: nowrap;
-						/* 防止换行（如果不是 flex） */
-						display: flex;
-						padding-top: 2%;
-
-						img {
-							flex-shrink: 0;
-							width: 200px;
-							height: 140px;
-						}
-
-						>img:not(:nth-child(1)) {
-							margin-left: 3%;
-						}
-					}
 				}
 			}
 
@@ -5898,7 +5843,7 @@
 	}
 
 	.el-dialog__header .el-dialog__title {
-		color: #22bcf3;
+		color: #fff;
 	}
 
 	.eventDialog .transferBg {
@@ -5910,15 +5855,15 @@
 		background-color: #22bcf3;
 	}
 
-	.el-timeline-item__node {
-		background-color: #22bcf3;
-		-webkit-box-shadow: 0px 0px 5px #22bcf3;
-		box-shadow: 0px 0px 5px #22bcf3;
-	}
+	/*.el-timeline-item__node {*/
+		/*background-color: #22bcf3;*/
+		/*-webkit-box-shadow: 0px 0px 5px #22bcf3;*/
+		/*box-shadow: 0px 0px 5px #22bcf3;*/
+	/*}*/
 
-	.el-timeline-item__tail {
-		border-left: 1px solid #22bcf3;
-	}
+	/*.el-timeline-item__tail {*/
+		/*border-left: 1px solid #22bcf3;*/
+	/*}*/
 
 	.el-card {
 		border: 1px solid #22bcf3;