分布和趋势布局调整，卡片布局大小适配

src/html/DataStatistics.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="alert-container">
+  <div class="alert-container" >
     <el-row class="bottom-pan">
       <el-col class="panel-bottom">
         <Cameras/>
@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted,computed, onBeforeUnmount} from 'vue';
 import Statistics from '@/components/Statistics.vue';
 import AlertChart from '@/components/AlertChart.vue';
 import  Cameras from '@/components/Cameras.vue';
@@ -30,6 +30,19 @@ import { BoxApi } from '@/utils/boxApi.ts';  // 导入 BoxApi
 const boxApi = new BoxApi();
 const typeMapping = reactive({});
 const token = ref(null);
+// const scale = ref(1);
+
+// const scaleStyle = computed(() => ({
+//   transform: `scale(${scale.value})`,
+//   transformOrigin: 'top left', 
+//   width: `${100 / scale.value}%`, 
+// }));
+
+// const handleResize = () => {
+//   const clientWidth = document.documentElement.clientWidth;
+//   const scaleFactor = clientWidth / 1920;  
+//   scale.value = scaleFactor < 1 ? scaleFactor : 1;  
+// };
 
 // 获取类型映射
 const fetchTypeMapping = async (token) => {
@@ -47,7 +60,13 @@ const fetchTypeMapping = async (token) => {
 onMounted(async () => {
   token.value = localStorage.getItem('alertToken');
   await fetchTypeMapping(token.value);
+  // handleResize();
+  // window.addEventListener('resize', handleResize);
 });
+
+// onBeforeUnmount(() => {
+//   window.removeEventListener('resize', handleResize);
+// });
 </script>
 
 <style scoped>
@@ -56,8 +75,9 @@ onMounted(async () => {
   padding: 0;
   margin: 0;
   background-color: #f5f7fa;
-  overflow: auto;
+  overflow-x: hidden;
   height: 100vh;
+  width: 100%;
 }
 
 .top-pan {
@@ -69,13 +89,16 @@ onMounted(async () => {
   /* overflow: hidden; */
   /* height: 55vh; */
   /* max-height: 450px; */
-  padding-left: 10px;
-  padding-right:10px ;
-  overflow-y: auto;
+  /* padding-left: 1vh; */
+  /* padding-right:1vh ; */
+  /* overflow: hidden; */
+  height: 55vh;
+  margin-top: 60px;
 }
 .bottom-pan{
   margin: 0;
   padding: 0;
+  height: 33vh;
 }
 
 .panel-top-left {
@@ -88,7 +111,7 @@ onMounted(async () => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  /* gap: 20px; */
 }
 
 .panel-bottom{

src/html/Home.vue

@@ -160,10 +160,6 @@ onMounted(() => {
 <style scoped>
 .camera-container {
   display: flex;
-  overflow-x: auto;
-  /* 横向滚动条 */
-  min-width: 0;
-  /* 避免内容挤压 */
 }
 
 .camera-list {

src/html/UserList.vue

@@ -36,7 +36,7 @@
                 <el-col :span="24">
                     <div class="table-part">
                         <el-table v-loading="loading" :data="tableData" 
-                            class="user-table" border max-height="550px">
+                            class="user-table" border max-height="700px">
                             <el-table-column v-if="getColumnVisibility('selection')" type="selection"
                                 min-width="55"></el-table-column>
                             <el-table-column v-if="getColumnVisibility('id')" prop="id" label="序号"