px to vw

src/components/Excel.vue

@@ -20,22 +20,7 @@ const getHeaderText = index => {
   if (index <= 14 && index > 1) {
     return index - 1
   }
-  const arr = [
-    'A',
-    'B',
-    'C',
-    'D',
-    'E',
-    'F',
-    'G',
-    'H',
-    'I',
-    'J',
-    'K',
-    'L',
-    'M',
-    'N',
-  ]
+  const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N']
   if (index % 14 == 1) {
     return arr[parseInt(index / 14) - 1]
   }
@@ -58,6 +43,7 @@ const getHeaderText = index => {
     .box {
       width: 100%;
       height: 100%;
+      padding: 7px;
       background: #ffffff;
       font-size: 18px;
       font-weight: 500;

src/pages/index.vue

@@ -42,6 +42,24 @@
       </svg>
       <div class="menu_list">
         <div class="menu">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            fill="none"
+            version="1.1"
+            width="26"
+            height="26"
+            viewBox="0 0 26 26"
+          >
+            <g>
+              <path
+                d="M3.71475,0L22.2853,0C24.3368,0,26,1.66316,26,3.71475L26,22.2852C26,24.3368,24.3368,26,22.2852,26L3.71475,26C1.66316,26,0,24.3368,0,22.2852L0,3.71475C0,1.66316,1.66316,0,3.71475,0ZM22.2878,24.1444C23.3131,24.1466,24.1452,23.3156,24.1444,22.2903L24.1444,3.71653C24.1457,2.68992,23.3144,1.85669,22.2878,1.85565L3.71905,1.85565C2.69109,1.85611,1.8575,2.68858,1.85565,3.71653L1.85565,22.2903C1.85565,22.7869,2.05107,23.2511,2.40227,23.6023C2.75348,23.9536,3.22243,24.1444,3.71905,24.1444L22.2878,24.1444ZM7.19905,9.83403L10.2578,6.77537C10.6209,6.41722,11.2049,6.41921,11.5655,6.77984C11.9261,7.14046,11.9281,7.72451,11.5699,8.08753L7.85513,11.8023C7.49279,12.1646,6.90531,12.1646,6.54297,11.8023L4.68565,9.94485C4.32301,9.58256,4.32286,8.99484,4.68533,8.63237C5.0478,8.2699,5.63552,8.27004,5.99781,8.63269L7.19905,9.83403ZM13.6999,8.35581L21.1294,8.35581C21.6418,8.35581,22.0572,8.77121,22.0572,9.28363C22.0572,9.79605,21.6418,10.2115,21.1294,10.2115L13.6999,10.2115C13.1875,10.2115,12.7721,9.79605,12.7721,9.28363C12.7721,8.77121,13.1875,8.35581,13.6999,8.35581ZM4.87782,16.7178C4.87782,14.9231,6.33267,13.4678,8.12782,13.4678C9.92297,13.4678,11.3778,14.9231,11.3778,16.7178C11.3778,18.5126,9.92255,19.9678,8.12782,19.9678C6.33309,19.9678,4.87782,18.5126,4.87782,16.7178ZM6.92075,17.4148C7.37884,18.2089,8.46548,18.3524,9.11404,17.7045C9.37661,17.4436,9.52384,17.0885,9.52291,16.7183C9.52291,15.8014,8.65347,15.134,7.76802,15.3711C6.88243,15.6082,6.46266,16.6207,6.92075,17.4148ZM13.6999,15.7889L21.1294,15.7889C21.6418,15.7889,22.0572,16.2043,22.0572,16.7167C22.0572,17.2291,21.6418,17.6445,21.1294,17.6445L13.6999,17.6445C13.1875,17.6445,12.7721,17.2291,12.7721,16.7167C12.7721,16.2043,13.1875,15.7889,13.6999,15.7889Z"
+                fill-rule="evenodd"
+                fill="#FFFFFF"
+                fill-opacity="1"
+              />
+            </g>
+          </svg>
           <p class="title">核查任务管理中心</p>
         </div>
         <div class="menu">
@@ -70,7 +88,24 @@
           <t-button @click="logout" size="large">退出登录</t-button>
         </template>
         <div class="account_wrap">
-          <UserIcon class="user_icon" />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            fill="none"
+            version="1.1"
+            width="26"
+            height="26.857648849487305"
+            viewBox="0 0 26 26.857648849487305"
+          >
+            <g>
+              <path
+                d="M9.8113,14.263C7.26753,13.0661,5.50684,10.4817,5.50684,7.48634C5.50684,3.35175,8.86161,0,12.9999,0C17.1383,0,20.493,3.35175,20.493,7.48634C20.4902,10.4813,18.7289,13.0649,16.185,14.262C21.8249,15.6812,26,20.7823,26,26.8576L24.5659,26.8576C24.5659,20.4757,19.3877,15.3022,13,15.3022C6.61232,15.3022,1.43409,20.4757,1.43409,26.8576L0,26.8576C0,20.7836,4.17323,15.6834,9.8113,14.263ZM6.94092,7.48634C6.94092,4.14306,9.65364,1.43279,12.9999,1.43279C16.3446,1.43674,19.055,4.1447,19.059,7.48634C19.059,10.8296,16.3462,13.5399,12.9999,13.5399C9.65364,13.5399,6.94092,10.8296,6.94092,7.48634Z"
+                fill-rule="evenodd"
+                fill="#FFFFFF"
+                fill-opacity="1"
+              />
+            </g>
+          </svg>
           <p class="username">管理员</p>
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -105,7 +140,6 @@
 </template>
 
 <script setup>
-import { UserIcon } from 'tdesign-icons-vue-next'
 import { useAccountStore } from '@/store'
 import Cookie from '@/utils/cookie'
 import Excel from 'cpns/Excel'
@@ -177,6 +211,7 @@ const logout = () => {
     padding: 30px;
     background: #f4f2f8;
     display: flex;
+    box-sizing: border-box;
     flex-direction: column;
     .two_content_container {
       flex: 1;

vite.config.js

@@ -1,6 +1,8 @@
 import { defineConfig } from 'vite'
 import { resolve } from 'path'
 import vue from '@vitejs/plugin-vue'
+import autoprefixer from 'autoprefixer'
+import postcsspxtoviewport from 'postcss-px-to-viewport'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -11,6 +13,10 @@ export default defineConfig({
     },
     extensions: ['.js', '.json', '.vue'],
   },
+  server: {
+    port: 5137,
+    host: '0.0.0.0',
+  },
   plugins: [vue()],
   //配置sass
   css: {
@@ -20,5 +26,33 @@ export default defineConfig({
           '@import "./src/assets/scss/globalVar.scss";@import "./src/assets/scss/globalMixin.scss";',
       },
     },
+    postcss: {
+      plugins: [
+        autoprefixer({
+          overrideBrowserslist: [
+            'Android 4.1',
+            'iOS 7.1',
+            'Chrome > 31',
+            'ff > 31',
+            'ie >= 8',
+          ],
+        }),
+        postcsspxtoviewport({
+          unitToConvert: 'px', // 要转化的单位
+          viewportWidth: 1920, // UI设计稿的宽度
+          unitPrecision: 6, // 转换后的精度，即小数点位数
+          propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
+          viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
+          fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
+          selectorBlackList: ['t-'], // 指定不转换为视窗单位的类名，
+          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
+          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
+          replace: true, // 是否转换后直接更换属性值
+          // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
+          exclude: [],
+          landscape: false, // 是否处理横屏情况
+        }),
+      ],
+    },
   },
 })