优化样式 新增版本号

addVersion.js

@@ -0,0 +1,20 @@
+//npm run build打包前执行此段代码
+const fs = require('fs')
+
+//返回package的json数据
+function getPackageJson() {
+    let data = fs.readFileSync('./package.json');//fs读取文件
+    return JSON.parse(data);//转换为json对象
+}
+
+let packageData = getPackageJson();//获取package的json
+let arr = packageData.version.split('.');//切割后的版本号数组
+arr[2] = parseInt(arr[2]) + 1;
+packageData.version = arr.join('.');//转换为以"."分割的字符串
+//用packageData覆盖package.json内容
+fs.writeFile(
+    './package.json',
+    JSON.stringify(packageData, null, "\t"
+    ),
+    (err) => { }
+);

dist-electron/main.js

@@ -7,9 +7,9 @@ electron.app.whenReady().then(() => {
     width: 1024,
     height: 768,
     fullscreenable: true,
-    fullscreen: false,
+    fullscreen: process.env.VITE_DEV_SERVER_URL ? false : true,
     simpleFullscreen: true,
-    frame: true,
+    frame: process.env.VITE_DEV_SERVER_URL ? true : false,
     webPreferences: {
       // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
       nodeIntegration: true,
@@ -31,6 +31,7 @@ electron.app.whenReady().then(() => {
   });
   const printWin = new electron.BrowserWindow({
     show: false,
+    width: 580,
     webPreferences: {
       // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
       nodeIntegration: true,
@@ -42,15 +43,16 @@ electron.app.whenReady().then(() => {
   } else {
     printWin.loadFile(path.resolve(__dirname, "../dist/print.html"));
   }
-  printWin.webContents.openDevTools();
   electron.ipcMain.on("printerInfoSync", (event, params) => {
-    console.log(JSON.parse(params));
     printWin.webContents.send("getParams", params);
   });
   electron.ipcMain.on("printStart", () => {
-    console.log("开始打印");
-    printWin.webContents.print({
-      silent: true
+    printWin.webContents.printToPDF({}, (error, data) => {
+      if (!error && data) {
+        console.log("成功生成PDF");
+      } else {
+        console.error("无法生成PDF", error);
+      }
     });
   });
 });

electron/main.js

@@ -7,9 +7,9 @@ app.whenReady().then(() => {
     width: 1024,
     height: 768,
     fullscreenable: true,
-    fullscreen: false,
+    fullscreen: process.env.VITE_DEV_SERVER_URL ? false : true,
     simpleFullscreen: true,
-    frame: true,
+    frame: process.env.VITE_DEV_SERVER_URL ? true : false,
     webPreferences: {
       // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
       nodeIntegration: true,
@@ -41,6 +41,7 @@ app.whenReady().then(() => {
   // 创建打印小票子窗口
   const printWin = new BrowserWindow({
     show: false,
+    width: 580,
     webPreferences: {
       // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
       nodeIntegration: true,
@@ -55,19 +56,26 @@ app.whenReady().then(() => {
     printWin.loadFile(path.resolve(__dirname, '../dist/print.html')); // 打包后使用文件路径访问应用
   }
 
-  printWin.webContents.openDevTools()
-
   ipcMain.on('printerInfoSync', (event, params) => {
-    console.log(JSON.parse(params))
+    // console.log(JSON.parse(params))
     printWin.webContents.send('getParams', params)
   })
 
   // 执行打印操作
   ipcMain.on('printStart', () => {
-    console.log('开始打印')
-    printWin.webContents.print({
-      silent: true
+    // console.log('开始打印')
+
+    printWin.webContents.printToPDF({}, (error, data) => {
+      if (!error && data) {
+        console.log("成功生成PDF")
+      } else {
+        console.error("无法生成PDF", error)
+      }
     })
+
+    // printWin.webContents.print({
+    //   silent: true
+    // })
   })
 });
 

package.json

@@ -1,68 +1,69 @@
 {
-  "name": "vite-electron",
-  "private": true,
-  "version": "0.0.0",
-  "main": "dist-electron/main.js",
-  "scripts": {
-    "dev": "chcp 65001 && vite",
-    "build": "vite build && electron-builder",
-    "preview": "vite preview",
-    "build:win": "vite build && electron-builder --w"
-  },
-  "dependencies": {
-    "@element-plus/icons-vue": "^2.3.1",
-    "axios": "^1.6.2",
-    "dayjs": "^1.11.10",
-    "element-plus": "^2.4.3",
-    "lodash": "^4.17.21",
-    "pinia": "^2.1.7",
-    "vue": "^3.3.8",
-    "vue-router": "^4.2.5"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^4.5.0",
-    "electron": "^28.2.3",
-    "electron-builder": "^24.13.3",
-    "path": "^0.12.7",
-    "sass": "^1.69.5",
-    "sass-loader": "^13.3.2",
-    "tree-kill": "^1.2.2",
-    "vite": "^5.0.0",
-    "vite-plugin-electron": "^0.15.4",
-    "vite-plugin-electron-renderer": "^0.14.5"
-  },
-  "build": {
-    "appId": "com.cashierdesktop.app",
-    "productName": "cashier_desktop",
-    "asar": true,
-    "files": [
-      "./dist/**/*",
-      "./dist-electron/**/*"
-    ],
-    "directories": {
-      "buildResources": "build",
-      "output": "release"
-    },
-    "win": {
-      "icon": "./public/logo.ico",
-      "target": [
-        {
-          "target": "nsis",
-          "arch": [
-            "ia32"
-          ]
-        }
-      ]
-    },
-    "nsis": {
-      "oneClick": false,
-      "allowElevation": true,
-      "allowToChangeInstallationDirectory": true,
-      "installerIcon": "./public/logo.ico",
-      "uninstallerIcon": "./public/logo.ico",
-      "installerHeaderIcon": "./public/logo.ico",
-      "createDesktopShortcut": true,
-      "createStartMenuShortcut": true
-    }
-  }
-}
+	"name": "vite-electron",
+	"private": true,
+	"version": "0.0.1",
+	"main": "dist-electron/main.js",
+	"scripts": {
+		"dev": "chcp 65001 && vite",
+		"build": "node ./addVersion.js && vite build && electron-builder",
+		"preview": "vite preview",
+		"build:win": "node ./addVersion.js && vite build && electron-builder --w"
+	},
+	"dependencies": {
+		"@element-plus/icons-vue": "^2.3.1",
+		"axios": "^1.6.2",
+		"dayjs": "^1.11.10",
+		"element-plus": "^2.4.3",
+		"html2canvas": "^1.4.1",
+		"lodash": "^4.17.21",
+		"pinia": "^2.1.7",
+		"vue": "^3.3.8",
+		"vue-router": "^4.2.5"
+	},
+	"devDependencies": {
+		"@vitejs/plugin-vue": "^4.5.0",
+		"electron": "^28.2.3",
+		"electron-builder": "^24.13.3",
+		"path": "^0.12.7",
+		"sass": "^1.69.5",
+		"sass-loader": "^13.3.2",
+		"tree-kill": "^1.2.2",
+		"vite": "^5.0.0",
+		"vite-plugin-electron": "^0.15.4",
+		"vite-plugin-electron-renderer": "^0.14.5"
+	},
+	"build": {
+		"appId": "com.cashierdesktop.app",
+		"productName": "cashier_desktop",
+		"asar": true,
+		"files": [
+			"./dist/**/*",
+			"./dist-electron/**/*"
+		],
+		"directories": {
+			"buildResources": "build",
+			"output": "release"
+		},
+		"win": {
+			"icon": "./public/logo.ico",
+			"target": [
+				{
+					"target": "nsis",
+					"arch": [
+						"ia32"
+					]
+				}
+			]
+		},
+		"nsis": {
+			"oneClick": false,
+			"allowElevation": true,
+			"allowToChangeInstallationDirectory": true,
+			"installerIcon": "./public/logo.ico",
+			"uninstallerIcon": "./public/logo.ico",
+			"installerHeaderIcon": "./public/logo.ico",
+			"createDesktopShortcut": true,
+			"createStartMenuShortcut": true
+		}
+	}
+}

public/print.html

@@ -7,41 +7,78 @@
     <meta charset="UTF-8" />
     <title>Print preview</title>
     <style>
-      @media print {
-        h1 {
-          font-size: 1.5em;
-          text-align: center;
-          font-weight: bold;
-        }
-        @page {
-          size: auto;
-          margin-top: 50px;
-          margin-bottom: 50px;
-        }
+      #app {
+        padding: 30px;
+      }
+      .header {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding-bottom: 30px;
+      }
+      .t1 {
+        font-size: 24px;
+        font-weight: bold;
+      }
+      .t2 {
+        font-size: 18px;
+      }
+      .time {
+        padding-bottom: 10px;
+      }
+      .thead {
+        display: flex;
+      }
+      .thead .item {
+        flex: 1;
+        font-weight: bold;
+      }
+      .tbody .tr {
+        padding: 10px 0;
+        display: flex;
+      }
+      .tbody .tr .item {
+        flex: 1;
+      }
+      .html2cavas {
+        width: 100%;
       }
     </style>
   </head>
 
   <body>
-    <section id="app">
-      <section>---------------------</section>
-      <section>---------------------</section>
-      <section>---------------------</section>
-      <section>---------------------</section>
-      <section>---------------------</section>
-      <section>---------------------</section>
-      <center><em>{{data.shop_name}}</em></center>
-      <section v-for="item in data.carts" :key="item.id">
-        {{item.name}} x{{item.number}} {{item.salePrice}}
-        <br />
-      </section>
-      <section>---------------------</section>
-      <section>---------------------</section>
-      <section>---------------------</section>
-      <section>---------------------</section>
-      <section>---------------------</section>
-      <section>---------------------</section>
-    </section>
+    <div id="app">
+      <div class="html2cavas" style="position: fixed; top: -1000%; left: 0">
+        <div class="header">
+          <div class="t1">{{data.shop_name || '结账单位'}}</div>
+          <div class="t2">结账单</div>
+        </div>
+        <div class="time">开始时间： 2024/3/7 09:56:23</div>
+        <div class="time">结束时间： 2024/3/8 13:11:07</div>
+        <div class="thead">
+          <div class="item">品相</div>
+          <div class="item">数量</div>
+          <div class="item">单位</div>
+          <div class="item">单价</div>
+          <div class="item">小计</div>
+          <div class="item">注</div>
+        </div>
+        <div class="tbody">
+          <div v-for="item in data.carts" :key="item.id" class="tr">
+            <div class="item">{{item.name}}</div>
+            <div class="item">x{{item.number}}</div>
+            <div class="item">{{item.unitName}}</div>
+            <div class="item">{{item.salePrice}}</div>
+            <div class="item"></div>
+            <div class="item"></div>
+          </div>
+        </div>
+        <div>优惠信息</div>
+        <div>赠送优惠：{{data.amount}}</div>
+        <div>结算方式</div>
+      </div>
+    </div>
     <script type="module">
       const { ipcRenderer } = require("electron");
       import {
@@ -49,6 +86,7 @@
         ref,
         onMounted,
       } from "../node_modules/vue/dist/vue.esm-browser.js";
+      import html2canvas from "../node_modules/html2canvas/dist/html2canvas.esm.js";
 
       createApp({
         setup() {
@@ -58,7 +96,14 @@
             ipcRenderer.on("getParams", (event, arg) => {
               console.log(arg);
               data.value = JSON.parse(arg);
-              ipcRenderer.send("printStart");
+              setTimeout(() => {
+                html2canvas(document.querySelector(".html2cavas")).then(
+                  function (canvas) {
+                    document.querySelector("#app").appendChild(canvas);
+                    ipcRenderer.send("printStart");
+                  }
+                );
+              }, 1000);
             });
           });
 

src/App.vue

@@ -76,7 +76,7 @@ router.beforeEach((to, from) => {
 
   --el-font-size-base: 16px !important;
   --el-message-close-size: var(--el-font-size-base) !important;
-  --el-component-size-large: 50px !important;
+  --el-component-size-large: 40px !important;
   --el-mask-color: rgba(255, 255, 255, 0.6) !important;
 }
 
@@ -136,7 +136,7 @@ html {
 }
 
 .el-button--large {
-  --el-button-size: 50px !important;
+  --el-button-size: var(--el-component-size-large) !important;
   font-size: var(--el-font-size-base) !important;
 }
 
@@ -187,7 +187,6 @@ html {
   background-color: #d3d3d3;
 }
 
-
 .mt50 {
   margin-top: 50px;
 }
@@ -198,7 +197,7 @@ html {
   .view {
     flex: 1;
     height: 100vh;
-    padding: 20px;
+    padding: var(--el-font-size-base);
     background-color: #efefef;
   }
 }

src/components/leftMenu.vue

@@ -64,7 +64,7 @@ const menus = ref([
 <style scoped lang="scss">
 .left_menu_wrap {
     height: 100vh;
-    width: 90px;
+    width: 60px;
     background-color: #555;
     display: flex;
     flex-direction: column;
@@ -104,12 +104,13 @@ const menus = ref([
 
         .icon {
             color: #999;
-            font-size: 32px;
+            font-size: 26px;
             margin-bottom: 4px;
         }
 
         .text {
             color: #999;
+            font-size: var(--el-font-size-base);
         }
     }
 }

src/components/payCard/payCard.vue

@@ -201,7 +201,7 @@ onMounted(() => {
 
     .t2 {
         display: flex;
-        gap: 20px;
+        gap: var(--el-font-size-base);
         color: #999;
         padding-top: 10px;
     }
@@ -241,7 +241,7 @@ onMounted(() => {
             }
 
             .img {
-                $size: 60px;
+                $size: 40px;
                 width: $size;
                 height: $size;
             }
@@ -261,9 +261,9 @@ onMounted(() => {
             display: flex;
             align-items: center;
             height: 60px;
-            border-radius: 10px;
+            border-radius: 6px;
             border: 1px solid var(--primary-color);
-            font-size: calc(var(--el-font-size-base) + 10px);
+            font-size: calc(var(--el-font-size-base) + 6px);
             padding: 0 var(--el-font-size-base);
         }
     }

src/components/payCard/scanModal.vue

@@ -12,7 +12,8 @@
                     <span class="n">{{ props.amount }}</span>
                 </div>
                 <div class="input">
-                    <el-input ref="inputRef" v-model="scanCode" style="height: 80px;" placeholder="请扫描付款码"
+                    <el-input ref="inputRef" v-model="scanCode"
+                        style="height: calc(var(--el-component-size-large) + 20px);" placeholder="请扫描付款码"
                         @keydown.enter="enterHandle" clearable></el-input>
                 </div>
                 <div class="number_warp">
@@ -26,7 +27,7 @@
                     </div>
                 </div>
                 <div class="btn">
-                    <el-button type="primary" style="width: 100%;height: 60px;" v-loading="loading"
+                    <el-button type="primary" style="width: 100%;" v-loading="loading"
                         @click="submitHandle">立即支付</el-button>
                 </div>
             </div>
@@ -184,43 +185,43 @@ defineExpose({
 
     .right {
         flex: 1;
-        padding: 0 20px;
+        padding: 0 var(--el-font-size-base);
 
         .amount {
             display: flex;
-            height: 80px;
+            height: calc(var(--el-component-size-large) + 20px);
             display: flex;
             align-items: center;
             justify-content: space-between;
             color: var(--primary-color);
             background-color: #555;
             border-radius: 6px;
-            padding: 0 20px;
-            font-size: 30px;
+            padding: 0 var(--el-font-size-base);
+            font-size: calc(var(--el-font-size-base) + 10px);
         }
 
         .input {
-            padding: 20px 0;
+            padding: var(--el-font-size-base) 0;
 
             :deep(.el-input__inner) {
-                font-size: 30px;
+                font-size: calc(var(--el-font-size-base) + 10px);
             }
         }
 
         .number_warp {
-            --h: 70px;
+            --h: 40px;
             display: grid;
             grid-template-columns: 1fr 1fr 1fr;
             grid-template-rows: var(--h) var(--h) var(--h) var(--h);
-            gap: 20px;
+            gap: var(--el-font-size-base);
 
             .item {
                 background-color: #dddddd;
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                font-size: 30px;
-                border-radius: 6px;
+                font-size: calc(var(--el-font-size-base) + 10px);
+                border-radius: 4px;
 
                 &.disabled {
                     color: #999;
@@ -245,7 +246,7 @@ defineExpose({
 
     .pay_wait {
         flex: 1;
-        padding: 0 20px;
+        padding: 0 var(--el-font-size-base);
         height: 600px;
         padding-bottom: 100px;
         display: flex;
@@ -265,7 +266,7 @@ defineExpose({
 
         .btn {
             width: 200px;
-            padding-top: 20px;
+            padding-top: var(--el-font-size-base);
         }
     }
 }

src/components/takeFoodCode.vue

@@ -73,19 +73,19 @@ defineExpose({
 
 <style scoped lang="scss">
 :deep(.el-input__inner) {
-    height: 70px;
+    height: 60px;
     font-size: 36px;
 }
 
 .keybord_wrap {
-    padding: 20px 0;
+    padding: var(--el-font-size-base) 0;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr 1fr;
-    gap: 20px;
+    gap: var(--el-font-size-base);
 
     :deep(.el-button--large) {
-        height: 70px;
+        height: 60px;
     }
 }
 </style>

src/views/home/components/cartOperation.vue

@@ -122,14 +122,14 @@ function skuConfirm(e) {
 
 <style scoped lang="scss">
 .operation_wrap {
-    padding: var(--el-font-size-base);
+    padding: 10px;
     display: flex;
     flex-direction: column;
-    gap: var(--el-font-size-base);
+    gap: 14px;
 
     .item {
-        width: 80px;
-        height: 34px;
+        width: 70px;
+        height: 30px;
         display: flex;
         align-items: center;
         justify-content: center;

src/views/home/components/goods.vue

@@ -40,10 +40,10 @@
             <div class="item">
                 <div class="dot" v-if="item.orderCount">{{ item.orderCount }}</div>
                 <div class="cover" v-if="shopListType == 'img'">
-                    <el-image :src="item.coverImg" style="width: 100%;height: 100%;" fit="cover"></el-image>
+                    <el-image :src="item.coverImg" style="width: 100%;height: 100%;background-color: #efefef;" fit="contain"></el-image>
                 </div>
                 <div class="name"><el-text line-clamp="2">{{ item.name }}</el-text></div>
-                <div class="empty" v-if="shopListType == 'text'"></div>
+                <div class="item_empty" v-if="shopListType == 'text'"></div>
                 <div class="price">
                     <el-text>￥{{ item.lowPrice }}</el-text>
                 </div>
@@ -210,7 +210,7 @@ defineExpose({
 
 .header {
     display: flex;
-    height: 60px;
+    height: var(--el-component-size-large);
     justify-content: space-between;
     border-bottom: 1px solid #ececec;
 }
@@ -227,7 +227,6 @@ defineExpose({
 
         span {
             font-size: var(--el-font-size-base);
-            font-weight: bold;
         }
 
         &.active {
@@ -250,7 +249,7 @@ defineExpose({
 }
 
 .all {
-    width: 80px;
+    width: var(--el-component-size-large);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -299,7 +298,7 @@ defineExpose({
     .item_wrap {
         width: 20%;
         padding: 0 5px;
-        padding-bottom: 5px;
+        padding-bottom: 10px;
 
         .item {
             border: 1px solid #ececec;
@@ -330,7 +329,7 @@ defineExpose({
 
             .name {
                 padding: 0 10px;
-                height: 50px;
+                height: 40px;
                 margin-top: 20px;
 
                 span {
@@ -338,12 +337,12 @@ defineExpose({
                 }
             }
 
-            .empty {
-                height: 50px;
+            .item_empty {
+                height: 30px;
             }
 
             .price {
-                padding: 10px 20px;
+                padding: 6px 10px;
                 background-color: var(--primary-color);
 
                 span {

src/views/home/components/settleAccount.vue

@@ -18,7 +18,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="list_wrap card" style="margin-top: 20px;">
+                <div class="list_wrap card" style="margin-top: var(--el-font-size-base);">
                     <div class="item" v-for="item in props.cart" :key="item.id">
                         <div class="top">
                             <span class="name">{{ item.name }}</span>
@@ -60,10 +60,13 @@
 
 <script setup>
 import { ref } from 'vue'
+import { useUser } from "@/store/user.js"
 import payCard from '@/components/payCard/payCard.vue'
 
 import { ipcRenderer } from 'electron'
 
+const store = useUser()
+
 const emit = defineEmits('paySuccess')
 
 const dialogVisible = ref(false)
@@ -95,7 +98,7 @@ const isPrint = ref(true)
 function printHandle() {
     if (!isPrint.value) return
     const data = {
-        shop_name: '大客餐饮',
+        shop_name: store.userInfo.merchantName,
         carts: props.cart,
         amount: props.amount,
         remark: props.remark,
@@ -183,11 +186,11 @@ defineExpose({
 
         .list_wrap {
             padding: var(--el-font-size-base);
-            height: calc(100vh - 220px);
+            height: calc(100vh - 200px);
             overflow-y: auto;
 
             .item {
-                padding-bottom: 20px;
+                padding-bottom: var(--el-font-size-base);
 
                 .top {
                     display: flex;
@@ -247,7 +250,7 @@ defineExpose({
 
         .footer {
             display: flex;
-            padding-top: 20px;
+            padding-top: var(--el-font-size-base);
             gap: var(--el-font-size-base);
 
             .editor {
@@ -263,7 +266,7 @@ defineExpose({
                 flex: 1;
 
                 :deep(.el-checkbox.el-checkbox--large) {
-                    height: 50px;
+                    height: var(--el-component-size-large);
                     background-color: #fff;
                 }
 

src/views/home/index.vue

@@ -91,6 +91,7 @@
     <div class="shop_manage card">
       <!-- 分类/商品列表 -->
       <goods ref="goodsRef" :masterId="masterId" @success="addCart" />
+      <!-- ©银收客 v{{ packageData.version }} -->
     </div>
   </div>
   <!-- 备注 -->
@@ -122,6 +123,9 @@ import { createCart, queryCart, createCode, packall, delCart, cartStatus, clearC
 // 商品列表
 import goods from '@/views/home/components/goods.vue'
 import member from '@/views/member/index.vue'
+
+// import packageData from '../../../package.json'
+
 const membershow = ref(false)
 const store = useUser()
 const remarkRef = ref(null)
@@ -289,11 +293,11 @@ async function queryCartAjax() {
 // 获取取餐码
 async function createCodeAjax() {
   try {
-    // const res = await createCode({
-    //   shopId: store.userInfo.shopId
-    // })
-    // masterId.value = res.code
-    masterId.value = '#50'
+    const res = await createCode({
+      shopId: store.userInfo.shopId
+    })
+    masterId.value = res.code
+    // masterId.value = '#8'
     queryCartAjax()
   } catch (error) {
     console.log(error)
@@ -315,8 +319,7 @@ onMounted(() => {
   .menu_top {
     flex-shrink: 0;
     display: flex;
-    height: 60px;
-    $fs: 20px;
+    height: var(--el-component-size-large);
 
     .menu {
       background-color: var(--el-color-warning);
@@ -327,7 +330,7 @@ onMounted(() => {
       justify-content: center;
 
       .icon {
-        font-size: 24px;
+        font-size: var(--el-font-size-base);
         position: relative;
         top: 2px;
       }
@@ -335,7 +338,7 @@ onMounted(() => {
       .t {
         color: #fff;
         margin-left: 4px;
-        font-size: $fs;
+        font-size: var(--el-font-size-base);
       }
     }
 
@@ -347,7 +350,7 @@ onMounted(() => {
       padding-left: var(--el-font-size-base);
 
       .t {
-        font-size: $fs;
+        font-size: var(--el-font-size-base);
       }
     }
 
@@ -363,7 +366,7 @@ onMounted(() => {
       }
 
       .t {
-        font-size: $fs;
+        font-size: var(--el-font-size-base);
         padding: 0 10px;
       }
 
@@ -382,7 +385,7 @@ onMounted(() => {
 
     .shop_list {
       flex: 1;
-      height: calc(100vh - 40px - 60px - 132px);
+      height: calc(100vh - 40px - 60px - 80px);
       overflow-y: auto;
       border-right: 1px solid #ececec;
 
@@ -405,6 +408,7 @@ onMounted(() => {
 
         .sku_list {
           display: flex;
+          flex-wrap: wrap;
           padding-top: 10px;
 
           .tag {
@@ -491,8 +495,8 @@ onMounted(() => {
     $h: 70px;
     display: flex;
     height: $h;
-    padding-top: 20px;
-    gap: 20px;
+    padding-top: var(--el-font-size-base);
+    gap: var(--el-font-size-base);
 
     .editor {
       width: $h;
@@ -502,7 +506,7 @@ onMounted(() => {
       align-items: center;
       justify-content: center;
       color: #555;
-      font-size: 22px;
+      font-size: var(--el-font-size-base);
     }
 
     .button {
@@ -513,7 +517,7 @@ onMounted(() => {
 
         .t {
           color: #fff;
-          font-size: 20px;
+          font-size: var(--el-font-size-base);
         }
       }
     }
@@ -521,8 +525,8 @@ onMounted(() => {
 }
 
 .shop_manage {
-  flex: 2.5;
-  margin-left: 20px;
+  flex: 3;
+  margin-left: var(--el-font-size-base);
   height: 100%;
 }
 </style>

src/views/login.vue

@@ -3,7 +3,7 @@
     <div class="logo">
       <el-image :src="logo" style="width: 180px"></el-image>
     </div>
-    <div class="form-wrap" style="display: flex;align-items: center;">
+    <div class="form-wrap">
       <div style="flex: 1;">
         <!-- <div class="reg-wrap">
         <router-link :to="{ name: 'register' }">
@@ -150,34 +150,36 @@ const logout = () => {
   .form-wrap {
     flex: 1.5;
     height: inherit;
-    padding: 50px;
+    padding: 0 50px;
+    display: flex;
+    align-items: center;
   }
 
   .reg-wrap {
     display: flex;
     justify-content: flex-end;
-    padding-bottom: 100px;
+    padding-bottom: 30px;
   }
 
   .header {
     display: flex;
     flex-direction: column;
-    padding-bottom: 100px;
+    padding-bottom: 20px;
 
     .t1 {
-      font-size: 52px;
+      font-size: 42px;
       color: #999;
     }
 
     .t2 {
-      font-size: 24px;
+      font-size: var(--el-font-size-base);
       color: #999;
     }
   }
 }
 
 .version {
-  padding-top: 50px;
+  padding-top: 20px;
   display: flex;
   flex-direction: column;
   justify-content: center;