emm...

src/views/screen/engineering/issueListDia.vue

@@ -207,5 +207,31 @@ export default {
   height: 432px;
   box-shadow: 0 0 15px 5px rgba(21, 105, 107, 1); /* 发光效果 */
 }
+
+::v-deep .el-input__inner{
+  color: #00ffff;
+  background-color: rgba(15, 86, 86, 0.54);
+}
+::v-deep .el-input__prefix{
+  color: #00F6EC;
+}
+::v-deep .btn-prev{
+  color: #00F6EC !important;
+  background-color: rgba(21, 105, 107, 0.35) !important;
+  border: 1px #15696b solid;
+}
+::v-deep .btn-next{
+  color: #00F6EC !important;
+  background-color: rgba(21, 105, 107, 0.35) !important;
+  border: 1px #15696b solid;
+}
+::v-deep .el-pager li.active{
+  background-color: #00ffff !important;
+  color: rgba(9, 8, 8, 0.68) !important;
+}
+::v-deep .el-pager li{
+  background-color: rgba(21, 105, 107, 0.35) !important;
+  color: #00ffff !important;
+}
 </style>
 

src/views/screen/engineering/unitProjectDia.vue

@@ -1,20 +1,16 @@
 <template>
-  <div class="main-data data-weeks-foods">
-    <div class="title-area">工程现场监控接入情况</div>
-    <div class="close-btn" @click="close"></div>
-    <div class="content-area">
-      <div class="content">
-        <div class="table-cont">
-          <div class="table-top">
-            <div class="fir">项目名称</div>
-            <div class="snd">已接入摄像头数量</div>
-          </div>
-          <div class="table-bot">
-            <div class="table-list" v-for="(item,index) in unitDataList" :key="index" @click="choose()">
-              <div class="fir"><div class="said"></div>{{item.name}}</div>
-              <div class="snd">{{item.num}}</div>
-            </div>
-          </div>
+  <div class="myDiaList">
+    <div class="title">已接入项目数量</div>
+    <div class="closeBtn" @click="close"></div>
+    <div class="flex-container">
+      <div class="header">
+        <div class="flex-column">项目名称</div>
+        <div class="flex-column">摄像头数量</div>
+      </div>
+      <div class="dataList">
+        <div class="flex-row" v-for="(item,index) in dataList" :key="index" @click="choose()">
+          <div class="flex-column">{{item.name}}</div>
+          <div class="flex-column">{{item.num}}</div>
         </div>
       </div>
     </div>
@@ -39,7 +35,7 @@ export default {
   },
   data() {
     return {
-      unitDataList: [
+      dataList: [
         {
           name: "国网山西省电力公司",
           num: 56,
@@ -146,74 +142,72 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.said{
-  width: 2px;
-  margin-right: 8px;
-  height: 16px;
-  background-color: #00FFFF;
+.myDiaList {
+  position: relative;
+  width: 668px;
+  height: 432px;
+  background: url("../../../assets/images/main/dialog-bg.png") no-repeat;
+  background-size: cover;
 }
-.table-cont{
-  width:100%;
 
-  .table-top{
-    width:100%;
-    height: 26px;
-    background: url("../../../assets/images/building_guarantee/img_11.png") no-repeat;
-    background-size: 100% 100%;
-    padding:0 4px 0 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size:14px;
-    color:#00FFFF;
-  }
-  .table-bot{
-    width:100%;
-    height: 300px;
-    overflow: auto;
-    .table-list{
-      margin-bottom: 10px;
-      align-items: center;
-      background: radial-gradient(
-          190% 71% at 50% 49%,
-          rgba(21, 105, 107, 0.54) 0%,
-          rgba(27, 95, 97, 0) 100%
-      );
-      width:100%;
-      height:30px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size:14px;
-      color:#FFFFFF;
-      font-weight: 500;
-    }
-    .table-list:hover{
-      background: radial-gradient(
-          190% 71% at 50% 49%,
-          rgba(47, 204, 208, 0.74) 0%,
-          rgba(27, 95, 97, 0) 100%
-      );
-      cursor: pointer;
-    }
-  }
-  .table-bot::-webkit-scrollbar {
-    display: none; /* 隐藏滚动条 */
-  }
+.title {
+  color: #00FFFF;
+  height: 40px;
+  padding: 8px 0 8px 25px;
+}
 
-  .fir{
-    width:40%;
-    text-align: left;
-    display: flex;
-  }
-  .snd{
-    width:30%;
-    text-align: left;
-  }
-  .thd{
-    width:30%;
-    text-align: left;
-  }
+.closeBtn{
+  position: absolute;
+  right: 10px;
+  top: 5px;
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+}
+
+.flex-container {
+  width: 100%;
+  padding: 0 10px 0;
+}
+
+.header{
+  display: flex;  /* 每行使用 flexbox 布局 */
+  position: relative;
+  background-color: rgba(21, 105, 107, 0.5);
+}
+
+.dataList{
+  height: 400px;
+  overflow: auto;
+}
+
+.dataList::-webkit-scrollbar {
+  display: none;
+}
+
+.flex-row {
+  display: flex;  /* 每行使用 flexbox 布局 */
+  position: relative;
+}
+
+.flex-row::before{
+  content: "";
+  height: 15px;
+  border-left: 2px #00FFFF solid;
+  position: absolute;
+  left: 0;
+  top: 10px
+}
+
+.flex-column {
+  flex: 1;  /* 每列均分可用空间 */
+  padding: 8px 12px;
+  text-align: left;  /* 左对齐文本 */
+  color: white;
+}
+
+.header .flex-column {
+  color: #00ffff;
 }
 
 .el-scrollbar {
@@ -236,158 +230,7 @@ export default {
 .el-select .el-input .el-select__caret {
   display: none;
 }
-.data-weeks-foods {
-  position: relative;
-  width: 668px;
-  height: 432px;
-  background: url("../../../assets/images/main/dialog-bg.png") no-repeat;
-  background-size: cover;
-  .close-btn {
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 50px;
-    height: 50px;
-    cursor: pointer;
-  }
-  .choose-area {
-    position: absolute;
-    right: 100px;
-    top: 7px;
-    width: 80.05px;
-    height: 30px;
-    line-height: 30px;
-    padding-left: 15px;
-    font-size: 14px;
-    color: #00ffff;
-    background: url("../../../assets/images/main/choose_short.png") no-repeat;
-    cursor: pointer;
-  }
-  .choose-area.choose-week{
-    right: 200px;
-  }
-  .content-area {
-    display: flex;
-    flex-direction: column;
-    padding: 15px 20px 0 15px;
-    padding-top: 0 !important;
-  }
-
-  .content-title {
-    width: 515px;
-    height: 26px;
-    background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
-    background-size: 100% 100%;
-    font-family: "PingFangSC";
-    font-size: 16px;
-    font-weight: bold;
-    color: #00ffff;
-    padding-left: 17px;
-    .title {
-      display: block;
-    }
-  }
-
-  .content {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    .data-list {
-      background: radial-gradient(
-          190% 71% at 50% 49%,
-          rgba(21, 105, 107, 0.54) 0%,
-          rgba(27, 95, 97, 0) 100%
-      );
-      width: 100%;
-      height: 492px;
-      padding: 20px;
-      overflow: auto;
-      white-space: pre-wrap;
-      .data-item {
-        display: inline-block;
-        color: #00ffff;
-        font-weight: bold;
-        margin: 0 20px 20px 0;
-        font-size: 14px;
-        img {
-          width: 80px;
-          height: 80px;
-          object-fit: cover;
-        }
-        .name {
-          width: 80px;
-          display: block;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          text-align: center;
-        }
-      }
-    }
-  }
-
-  .title-format {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    img {
-      width: 6px;
-      height: 24px;
-      margin-right: 6px;
-    }
-    .title-info {
-      display: flex;
-      flex-direction: column;
-      font-size: 12px;
-      color: #ffffff;
-      .title-en {
-        font-size: 8px;
-        color: #ffffff;
-        opacity: 0.4;
-      }
-    }
-  }
-
-  .choose-area {
-    .el-select {
-      width: 90%;
-    }
-    .el-input {
-      input {
-        background: rgba(255, 255, 255, 0);
-        color: #00ffff;
-        border: none;
-        padding: 0;
-        width: 30px;
-      }
-    }
-  }
-
-  .no-data{
-    text-align: center;
-    color: #62ffe5;
-    font-size: 25px;
-    margin-top: 150px;
-  }
-
-  ::-webkit-scrollbar {
-    width: 3px;
-    height: 3px;
-  }
 
-  ::-webkit-scrollbar-thumb {
-    //滑块部分
-    // border-radius: 5px;
-    background-color: #58cbbb;
-  }
 
-  ::-webkit-scrollbar-track {
-    //轨道部分
-    // box-shadow: inset 0 0 5px #ddd;
-    background: #ddd;
-    // border-radius: 5px;
-  }
-}
 </style>