Merge branch 'dev-bxy' into 'dev'

style: 保卫保密样式修改

See merge request product-group-fe/sfy-safety-group/sfy-safety!238

src/views/security-confidentiality/confidentiality-position/monitor-records/components/InvasionSnapshot.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="invasion-snapshot-container">
     <div class="switch-container" v-if="monitorManagePermission">
-      <el-tooltip content="开关关闭后，抓拍到的入侵行为将不在此进行记录展示" placement="top">
-        <el-icon color="#1777ff" size="20"><QuestionFilled /></el-icon>
+      <el-tooltip effect="light" content="开关关闭后，抓拍到的入侵行为将不在此进行记录展示" placement="top">
+        <img src="@/assets/icons/help.png" alt="" />
       </el-tooltip>
       <span>抓拍启停</span>
       <el-switch v-model="switchStatus" @change="updateSwitchStatus" />
@@ -60,7 +60,7 @@
 <script setup lang="ts">
   import { ref, onMounted } from 'vue';
   import { ElMessage } from 'element-plus';
-  import { QuestionFilled, Search } from '@element-plus/icons-vue';
+  import { Search } from '@element-plus/icons-vue';
   import BasicTable from '@/components/BasicTable.vue';
   import { downloadByData } from '@/utils/file/download';
   import { msgConfirm } from '@/utils/element-plus/messageBox';
@@ -216,6 +216,7 @@
     gap: 10px;
     line-height: 32px;
     margin-bottom: 20px;
+    font-size: 14px;
   }
 
   .search-container {

src/views/security-confidentiality/confidentiality-position/monitor-records/config/table.ts

@@ -66,23 +66,16 @@ export const ACCESS_RECORD_LIST_TABLE_OPTIONS = {
 
 // 门禁记录表格列配置
 export const ACCESS_RECORD_LIST_TABLE_COLUMNS: TableColumnProps[] = [
-  // {
-  //   label: '序号',
-  //   prop: 'index',
-  //   width: '80px',
-  //   type: 'index',
-  //   align: 'center',
-  // },
   {
     label: '姓名',
     prop: 'username',
-    align: 'center',
+    align: 'left',
     minWidth: '120px',
   },
   {
     label: '卡号',
     prop: 'cardNum',
-    align: 'center',
+    align: 'left',
     minWidth: '150px',
   },
   {

src/views/security-confidentiality/overview/components/ConfidentialityPosition.vue

@@ -66,17 +66,17 @@
             <div class="table-header">
               <div class="table-cell">序号</div>
               <div class="table-cell">事件</div>
-              <div class="table-cell">地点</div>
+              <div class="table-cell left-align">地点</div>
               <div class="table-cell">抓拍照片</div>
-              <div class="table-cell">抓拍时间</div>
+              <div class="table-cell left-align">抓拍时间</div>
             </div>
             <div class="table-body">
               <div v-for="(item, index) in invasionSnapshotList" :key="item.id" class="table-row">
                 <div class="table-cell">{{ index + 1 }}</div>
                 <div class="table-cell">{{ item.event }}</div>
-                <div class="table-cell">{{ item.location }}</div>
+                <div class="table-cell left-align">{{ item.location }}</div>
                 <div class="table-cell"><ImageViewer :file-list="item.pictures" /></div>
-                <div class="table-cell">{{ item.eventTime }}</div>
+                <div class="table-cell left-align">{{ item.eventTime }}</div>
               </div>
             </div>
           </div>
@@ -300,7 +300,7 @@
   .outer-person-container {
     width: 100%;
     height: 100%;
-    padding: 14px;
+    padding: 14px 0;
     overflow: auto;
   }
 
@@ -347,7 +347,7 @@
           display: flex;
           align-items: center;
           padding: 5px 10px;
-          background: rgba(255, 255, 255, 0.2);
+          background: rgba(0, 0, 0, 0.2);
           border-radius: 8px;
           color: #fff;
           gap: 10px;
@@ -481,7 +481,7 @@
 
         .table-header {
           display: grid;
-          grid-template-columns: 60px 1fr 1fr 150px 1fr;
+          grid-template-columns: 60px 140px 1fr 150px 1fr;
           background-color: #f8f9fa;
           border-bottom: 1px solid #e9ecef;
 
@@ -497,12 +497,17 @@
               border-right: none;
             }
           }
+
+          .left-align {
+            text-align: left;
+            padding: 12px 28px;
+          }
         }
 
         .table-body {
           .table-row {
             display: grid;
-            grid-template-columns: 60px 1fr 1fr 150px 1fr;
+            grid-template-columns: 60px 140px 1fr 150px 1fr;
             border-bottom: 1px solid #f0f0f0;
             transition: background-color 0.2s;
 
@@ -529,6 +534,11 @@
                 border-right: none;
               }
             }
+
+            .left-align {
+              justify-content: left;
+              padding: 0 28px;
+            }
           }
         }
       }

src/views/security-confidentiality/overview/components/ConfidentialityPositionChart.vue

@@ -8,7 +8,7 @@
         <span class="record-count">{{ todayCount }}</span>
         <span class="title-text">条</span>
       </div>
-      <div class="subtitle">近7日抓拍记录变化折线图</div>
+      <!-- <div class="subtitle">近7日抓拍记录变化折线图</div> -->
     </div>
 
     <!-- 图表区域 -->
@@ -62,9 +62,9 @@
 
       const option: echarts.EChartsOption = {
         grid: {
-          left: '5%',
+          left: '12%',
           right: '5%',
-          top: '15%',
+          top: '25%',
           bottom: '0%',
           containLabel: true,
         },
@@ -84,6 +84,8 @@
           },
         },
         yAxis: {
+          name: '近7日抓拍记录变化折线图',
+          nameGap: 26,
           type: 'value',
           axisLine: {
             show: false,
@@ -205,7 +207,7 @@
         display: flex;
         align-items: baseline;
         justify-content: center;
-        margin-bottom: 20px;
+        // margin-bottom: 20px;
         gap: 8px;
 
         .warning-icon {
@@ -225,12 +227,6 @@
           color: #ff5f53;
         }
       }
-
-      .subtitle {
-        font-size: 12px;
-        color: #303133;
-        text-align: center;
-      }
     }
 
     .chart-container {
@@ -239,58 +235,4 @@
       flex: 1;
     }
   }
-
-  // 响应式设计
-  // @media (max-width: 768px) {
-  //   .confidentiality-position-chart {
-  //     padding: 15px;
-
-  //     .chart-header {
-  //       margin-bottom: 15px;
-
-  //       .main-title {
-  //         .title-text {
-  //           font-size: 14px;
-  //         }
-
-  //         .record-count {
-  //           font-size: 14px;
-  //         }
-  //       }
-
-  //       .subtitle {
-  //         font-size: 12px;
-  //       }
-  //     }
-
-  //     .chart-container {
-  //       height: 150px;
-  //     }
-  //   }
-  // }
-
-  // @media (max-width: 480px) {
-  //   .confidentiality-position-chart {
-  //     padding: 10px;
-
-  //     .chart-header {
-  //       .main-title {
-  //         flex-direction: column;
-  //         gap: 4px;
-
-  //         .title-text {
-  //           font-size: 13px;
-  //         }
-
-  //         .record-count {
-  //           font-size: 13px;
-  //         }
-  //       }
-  //     }
-
-  //     .chart-container {
-  //       height: 120px;
-  //     }
-  //   }
-  // }
 </style>