Explorar o código

style: 样式修改

wyf hai 6 meses
pai
achega
77ee7e35e2

+ 10 - 6
src/views/security-confidentiality/overview/components/ConfidentialityPositionChart.vue

@@ -202,30 +202,34 @@
 
     .chart-header {
       width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+      // display: flex;
+      // flex-direction: column;
+      // align-items: center;
       margin-bottom: 8px;
 
       .main-title {
         display: flex;
         align-items: baseline;
         justify-content: center;
-        // margin-bottom: 20px;
+        height: 30px;
         gap: 8px;
 
         .warning-icon {
-          width: 14px;
-          height: 14px;
+          position: relative;
+          top: 3px;
+          width: 20px;
+          height: 20px;
         }
 
         .title-text {
+          line-height: 20px;
           font-size: 16px;
           font-weight: 600;
           color: #303133;
         }
 
         .record-count {
+          line-height: 30px;
           font-size: 24px;
           font-weight: 600;
           color: #ff5f53;

+ 1 - 1
src/views/security-confidentiality/overview/components/OuterPerson.vue

@@ -2,7 +2,7 @@
   <div class="outer-person-container">
     <div class="container-title">
       <span class="line"></span>
-      <span class="title">外部人员管理</span>
+      <span class="title">今日访客</span>
     </div>
     <OuterPersonChart
       v-if="pieData.length > 0"

+ 36 - 12
src/views/security-confidentiality/overview/components/RegulationAndNotice.vue

@@ -25,13 +25,15 @@
       </el-tabs>
     </div>
     <div class="more">
-      <span style="padding-right: 5px; cursor: pointer" @click="handleMoreRedirect">更多</span>
-      <img
+      <span class="more-text" @click="handleMoreRedirect">更多</span>
+      <el-icon class="more-icon" @click="handleMoreRedirect"><DArrowRight /></el-icon>
+
+      <!-- <img
         style="cursor: pointer"
         @click="handleMoreRedirect"
         src="@/assets/images/security-confidientiality/overview-more.png"
         alt=""
-      />
+      /> -->
     </div>
   </div>
 </template>
@@ -40,6 +42,8 @@
   import { onUnmounted, ref, watch } from 'vue';
   import { useRouter } from 'vue-router';
   import type { RegulationItem } from '../types';
+  import { ElIcon } from 'element-plus';
+  import { DArrowRight } from '@element-plus/icons-vue';
   import { getSecurityOverview, getConfidentialityOverview } from '@/api/security-confidentiality-overview';
 
   const router = useRouter();
@@ -49,11 +53,15 @@
   const confidentialityRegulationData = ref<RegulationItem[]>([]);
 
   async function getSecurityRegulationData() {
-    securityRegulationData.value = await getSecurityOverview();
+    const res = await getSecurityOverview();
+    if (!res) return [];
+    return res.length > 4 ? res.slice(0, 4) : res;
   }
 
   async function getConfidentialityRegulationData() {
-    confidentialityRegulationData.value = await getConfidentialityOverview();
+    const res = await getConfidentialityOverview();
+    if (!res) return [];
+    return res.length > 4 ? res.slice(0, 4) : res;
   }
 
   onUnmounted(() => {
@@ -62,11 +70,11 @@
 
   watch(
     () => activeName.value,
-    (val) => {
+    async (val) => {
       if (val === 'security') {
-        getSecurityRegulationData();
+        securityRegulationData.value = await getSecurityRegulationData();
       } else if (val === 'confidentiality') {
-        getConfidentialityRegulationData();
+        confidentialityRegulationData.value = await getConfidentialityRegulationData();
       }
     },
     {
@@ -141,17 +149,33 @@
   .item-name {
     max-width: calc(100% - 12px);
     color: rgba($color: #000000, $alpha: 0.85);
-    font-size: 12px;
+    font-size: 14px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     cursor: pointer;
   }
+  .item-name:hover {
+    color: #1777ff;
+  }
   .more {
-    text-align: end;
-    color: #007bff;
+    width: 50px;
     font-size: 12px;
-    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    float: inline-end;
+    color: #007bff;
+  }
+  .more:hover {
+    color: #94c1ff;
+  }
+  .more-text {
+    cursor: pointer;
+    padding-right: 5px;
+  }
+
+  .more-icon {
+    cursor: pointer;
   }
 
   :deep(.el-tabs__header) {

+ 8 - 6
src/views/security-confidentiality/overview/components/VehicleManagement.vue

@@ -56,7 +56,7 @@
   }
 
   .vehicle-flow {
-    margin-top: 6px;
+    margin: 6px 0;
     height: 26px;
     display: flex;
     justify-content: center;
@@ -70,19 +70,21 @@
   }
 
   .vehicle-flow-label {
-    font-weight: 400;
+    font-weight: 600;
     font-size: 16px;
-    color: #000000;
+    color: #303133;
   }
 
   .vehicle-flow-value {
-    font-weight: 500;
-    font-size: 20px;
+    position: relative;
+    bottom: 3px;
+    font-weight: 600;
+    font-size: 28px;
     color: #1777ff;
   }
 
   .chart-container {
     width: 100%;
-    height: calc(100% - 56px);
+    height: calc(100% - 62px);
   }
 </style>

+ 1 - 1
src/views/security-confidentiality/person-management/inner-person/configs/table.ts

@@ -43,7 +43,7 @@ export const INNER_PERSON_TABEL_COLUMNS = [
   {
     prop: 'entryTime',
     slot: 'entryTime',
-    label: '进时间',
+    label: '进时间',
     align: 'left',
     minWidth: '120px',
   },

+ 1 - 1
src/views/traffic/overview/components/RegulationList.vue

@@ -134,7 +134,7 @@
       .regulation-item {
         width: 100%;
         height: 33px;
-        font-size: 16px;
+        font-size: 14px;
         color: #333333;
         border-bottom: 1px solid #ededed;
         text-overflow: ellipsis;