自适应

package.json

@@ -37,9 +37,11 @@
     "@tauri-apps/cli": "^1.2.3",
     "@vitejs/plugin-vue": "^1.1.4",
     "@vue/compiler-sfc": "^3.0.5",
+    "amfe-flexible": "^2.2.1",
     "babel": "^6.23.0",
     "babel-plugin-component": "^1.1.1",
     "babel-plugin-import": "^1.13.3",
+    "postcss-pxtorem": "^6.1.0",
     "vite": "^2.0.1",
     "vite-babel-plugin": "^0.0.2",
     "vite-plugin-babel-import": "^2.0.2",

src/components/ExportPoint.vue

@@ -4,7 +4,7 @@
     <label class="filelabel" for="fileinput1">上传</label>
     <div class="fileName">
       <span>{{ fileName }}</span>
-      <delete style="width: 18px; height: 18px; margin-left: 8px;" @click="delFile" v-if="fileName" />
+      <delete class="delete" @click="delFile" v-if="fileName" />
     </div>
     <template #footer>
       <span class="dialog-footer">
@@ -85,5 +85,10 @@ export default {
 .fileName {
   margin: 15px 0;
   font-size: 16px;
+  .delete {
+    width: 18px; 
+    height: 18px; 
+    margin-left: 8px;
+  }
 }
 </style>

src/components/Header.vue

@@ -3,7 +3,7 @@
     <div class="header">
       <div class="left">
         <i v-if="hasBack" class="el-icon-back" @click="back"></i>
-        <span style="font-size: 20px">{{ name }}</span>
+        <span class="name">{{ name }}</span>
       </div>
       <div class="right">
         <el-popover
@@ -125,6 +125,14 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 0 20px;
+  .left {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .name {
+      font-size: 20px;
+    }
+  }
 }
 .el-icon-back {
   border: 1px solid #e9e9e9;

src/components/Sidebar.vue

@@ -128,19 +128,22 @@ export default {
 
 .head {
   display: flex;
-  align-items: center;
+  align-items: center; 
-  justify-content: center;
   height: 50px;
+  padding-left:10px;
+  font-family: '微软雅黑';
+  font-weight:700;
+  
   div {
     display: flex;
     align-items: center;
   }
   img {
     width: 40px;
-    margin-right: 10px;
+    margin-right: 5px;
   }
   span {
-    font-size: 20px;
+    font-size: 22px;
     color: #ffffff;
   }
 }

src/css/index.scss

@@ -214,24 +214,8 @@ s {
   -webkit-transition: max-height 0.5s cubic-bezier(1, 0.5, 0.8, 1);
   transition: max-height 0.5s cubic-bezier(1, 0.5, 0.8, 1);
 }
-/*滚动条样式*/
+
-::-webkit-scrollbar {
+ 
-  /*滚动条整体样式*/
-  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
-  height: 4px;
-}
-::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 5px;
-  -webkit-box-shadow: inset 0 0 5px #2B5451;
-  background: rgba(0, 0, 0, 0.2);
-}
-::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  -webkit-box-shadow: inset 0 0  20px #2B5451;
-  border-radius: 0;
-  background: rgba(0, 0, 0, 0.1);
-}
 .content-div {
   width:100%;
   height:100%;
@@ -253,11 +237,15 @@ s {
   background: rgba(243, 94, 94, 0.774) !important;
   color: #000000;
 }
+.el-table {
+  height: 700px;
+}
 .el-table tr {
   &:hover > td {
     // 悬停颜色 上面的不用管
-    background-color: #2b54515b !important;
+    background-color: #1da19aba !important;
-    color: #000000;
+    color: #fff;
+    font-size: 18px;
   }
 }
 .el-table th, .aside {
@@ -301,4 +289,4 @@ s {
 }
 .el-form-item__label {
   width: 100px !important;
-}
+}

src/main.js

@@ -5,6 +5,7 @@ import "element-plus/dist/index.css";
 import router from "./router/index";
 import store from "./store/index";
 import "./css/index.scss";
+import 'amfe-flexible'
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 const app = createApp(App);
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

src/views/Home.vue

@@ -210,6 +210,7 @@ export default {
   padding: 0 15px;
   >span {
     padding: 0 15px;
+    font-size: 26px;
   }
 }
 .top-div {
@@ -244,10 +245,12 @@ export default {
     width: 25%;
     border: 1px solid #c3c3c3;
     height: 100%;
+    font-size: 18px;
   }
   .value {
     width: 73%;
     border: 1px solid #c3c3c3;
+    font-size: 18px;
   }
   .process {
     width: 73%;
@@ -300,6 +303,7 @@ export default {
       // border: 1px solid red;
       .name {
         width: 20%;
+        font-size: 18px;
       }
       .dataValue {
         width: 80%;
@@ -312,7 +316,8 @@ export default {
           text-align: center;
           border-radius: 10px;
           padding: 8px 0;
-          color: #098658
+          color: #098658;
+          font-size: 16px;
         }
         .recv {
           background: #f8cecc;

src/views/Login.vue

@@ -158,6 +158,7 @@ export default {
   .middle-bottom {
     width: 690px;
     background: url("../assets/bg3.png") no-repeat center;
+    background-size: 100% 100%;
   }
 
   .right-bottom {

src/views/Model.vue

@@ -4,7 +4,7 @@
       <div class="top-div">
         <el-button type="primary" size="large" @click="addData">新增</el-button>
       </div>
-      <el-table :data="tableData" height="760" style="width: 100%" border stripe
+      <el-table :data="tableData" style="width: 100%" border stripe
         :header-cell-style="{ background: '#F6F7FC' }" size="large">
         <el-table-column type="index" label="序号" width="80" align="center" />
         <el-table-column prop="name" label="模板名称" width="240" align="center" show-overflow-tooltip />

src/views/Page.vue

@@ -4,7 +4,7 @@
       <div class="top-div">
         <el-button type="primary" size="large" @click="addData">新增</el-button>
       </div>
-      <el-table :data="tableData" height="760" border :row-class-name="tableRowClassName"
+      <el-table :data="tableData"  border :row-class-name="tableRowClassName"
         :header-cell-style="{ background: '#F6F7FC' }" size="large">
         <el-table-column type="index" label="序号" width="80" align="center" />
         <el-table-column prop="name" label="通讯名称" width="200" align="center" show-overflow-tooltip />
@@ -317,7 +317,7 @@ export default {
 
 .top-div {
   display: flex;
-  justify-content: flex-start;
+  justify-content: flex-end;
 }
 
 .txStatusDiv {

src/views/Report.vue

@@ -6,7 +6,7 @@
       </div>
       <el-table
         :data="tableData"
-        height="730"
+        height="230"
         style="width: 100%"
         border
         stripe

src/views/Rules.vue

@@ -6,7 +6,7 @@
       </div> 
       <el-table
         :data="tableData"
-        height="730"
+        height="230"
         style="width: 100%"
         border
         stripe

src/views/Transparent.vue

@@ -6,7 +6,7 @@
       </div>
       <el-table
         :data="tableData"
-        height="730"
+        height="230"
         style="width: 100%"
         border
         stripe

vite.config.js

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vitePluginImport from 'vite-plugin-babel-import';
 import path from 'path'
+import postCssPxToRem from "postcss-pxtorem";
 
 const baseUrl = {
   development: './',
@@ -21,6 +22,16 @@ export default ({ mode }) =>  defineConfig({
       '@': path.resolve(__dirname, 'src')
     }
   },
+  css: {
+    postcss: {
+      plugins: [
+        postCssPxToRem({
+          rootValue: 192, // （设计稿/10）1rem的大小
+          propList: ["*"], // 除 border/font-size 外所有px 转 rem
+        })
+      ]
+    },
+  },
   server: {
     proxy: {
       '/api': {