安全监控分站-更新

src/views/vent/safetyList/index.vue

@@ -33,7 +33,7 @@
               @click="cardClick(item, index)">
               <div class="card-item-label">{{ item.strname }}</div>
             </div>
-            <div :class="activeIndex % 3 == 2 ? 'card-modal1' : 'card-modal'" v-if="activeIndex == index && isShow">
+            <div :class="activeIndex % 4 == 3 ? 'card-modal1' : 'card-modal'" v-if="activeIndex==index && isShow" >
               <div class="modal-name">站点名称：</div>
               <a-input v-model:value="stationName" size="small" placeholder="请输入" @blur="changeName" />
               <div class="modal-lj">连接状态：</div>
@@ -44,7 +44,7 @@
       </div>
       <div class="right-box">
         <div class="right-title">详细信息：</div>
-        <a-table size="small" :scroll="{ y: 720 }" :columns="columns" :data-source="tableData" :pagination="pagination" @change="pageChange" />
+        <a-table size="small" :scroll="{ y: 680 }" :columns="columns" :data-source="tableData" :pagination="pagination" @change="pageChange" />
       </div>
     </div>
   </div>
@@ -175,6 +175,7 @@ onMounted(() => {
         height: 30px;
         align-items: center;
         font-size: 14px;
+        margin-bottom: 10px;
 
         span {
           color: #fff;
@@ -198,21 +199,22 @@ onMounted(() => {
         justify-content: flex-start;
         align-items: flex-start;
         flex-wrap: wrap;
-        height: calc(100% - 30px);
+        height: calc(100% - 40px);
         overflow-y: auto;
 
         .card-box {
           position: relative;
-          width: 242px;
-          height: 146px;
-          margin-bottom: 20px;
+          // width: 242px;
+          width: 182px;
+          height: 110px;
+          margin-bottom: 15px;
           display: flex;
           justify-content: center;
 
           .card-itemN {
             position: relative;
-            width: 110px;
-            height: 146px;
+            width: 85px;
+            height: 110px;
             background: url('../../../assets/images/zd-2.png') no-repeat center;
             background-size: 100% 100%;
             cursor: pointer;
@@ -229,8 +231,8 @@ onMounted(() => {
 
           .card-itemL {
             position: relative;
-            width: 110px;
-            height: 146px;
+            width: 85px;
+            height: 110px;
             background: url('../../../assets/images/zd-3.png') no-repeat center;
             background-size: 100% 100%;
             cursor: pointer;
@@ -247,8 +249,8 @@ onMounted(() => {
 
           .card-itemD {
             position: relative;
-            width: 110px;
-            height: 146px;
+            width: 85px;
+            height: 110px;
             background: url('../../../assets/images/zd-1.png') no-repeat center;
             background-size: 100% 100%;
             cursor: pointer;
@@ -264,9 +266,9 @@ onMounted(() => {
           }
 
           .card-modal {
-            width: 120px;
+            width: 86px;
             position: absolute;
-            left: 181px;
+            left: 140px;
             color: #FFF;
             top: 50%;
             transform: translate(0, -50%);
@@ -274,9 +276,9 @@ onMounted(() => {
           }
 
           .card-modal1 {
-            width: 120px;
+            width: 86px;
             position: absolute;
-            left: -60px;
+            left: -42px;
             color: #FFF;
             top: 50%;
             transform: translate(0, -50%);
@@ -301,6 +303,7 @@ onMounted(() => {
         align-items: center;
         font-size: 14px;
         color: #fff;
+        margin-bottom: 10px;
       }
     }
   }