From 396d237710c46963bb98f64df991d3a506c39f6d Mon Sep 17 00:00:00 2001
From: gyq <875626088@qq.com>
Date: Thu, 7 Mar 2024 09:47:25 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8D=E5=B0=8F=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                 |  7 ++-
 src/components/leftMenu.vue                 |  2 +-
 src/components/payCard/payCard.vue          | 54 ++++++++++-----------
 src/components/skuModal.vue                 | 20 ++------
 src/views/home/components/cartOperation.vue |  8 +--
 src/views/home/components/goods.vue         | 18 +++----
 src/views/home/components/settleAccount.vue | 31 ++++++------
 src/views/home/index.vue                    | 20 ++++----
 8 files changed, 73 insertions(+), 87 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e7a3676..a184b28 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -52,7 +52,7 @@ router.beforeEach((to, from) => {
 }
 
 :root {
-  --r:24;
+  --r: 24;
   --g: 124;
   --b: 170;
   --r-lighter: calc(var(--r) + (255 - var(--r)) * 0.2);
@@ -74,13 +74,12 @@ router.beforeEach((to, from) => {
   --el-color-primary-dark-2: rgb(var(--r-darker), var(--g-darker), var(--b-darker)) !important;
   --el-color-primary-light-5: rgb(var(--r-lighter2), var(--g-lighter2), var(--b-lighter2)) !important;
 
-  --el-font-size-base: 20px !important;
-  --el-message-close-size: 20px !important;
+  --el-font-size-base: 16px !important;
+  --el-message-close-size: var(--el-font-size-base) !important;
   --el-component-size-large: 50px !important;
   --el-mask-color: rgba(255, 255, 255, 0.6) !important;
 }
 
-
 @font-face {
   font-family: 'num';
   src: url('@/assets/font/Ignotum-Regular.ttf');
diff --git a/src/components/leftMenu.vue b/src/components/leftMenu.vue
index ffe83f0..bcefb94 100644
--- a/src/components/leftMenu.vue
+++ b/src/components/leftMenu.vue
@@ -64,7 +64,7 @@ const menus = ref([
 <style scoped lang="scss">
 .left_menu_wrap {
     height: 100vh;
-    width: 120px;
+    width: 90px;
     background-color: #555;
     display: flex;
     flex-direction: column;
diff --git a/src/components/payCard/payCard.vue b/src/components/payCard/payCard.vue
index 3e6b82a..bf5e188 100644
--- a/src/components/payCard/payCard.vue
+++ b/src/components/payCard/payCard.vue
@@ -15,7 +15,7 @@
                 <div class="item" :class="{ active: payActive == index }" v-for="(item, index) in payList"
                     :key="item.id" @click="payTypeChange(index, item)">
                     <div class="icon">
-                        <el-image :src="item.icon" style="width: 50px;height: 50px;"></el-image>
+                        <el-image :src="item.icon" class="img"></el-image>
                     </div>
                     <span class="title">{{ item.payName }}</span>
                 </div>
@@ -175,12 +175,12 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .card {
-    padding: 20px;
+    padding: var(--el-font-size-base);
     height: 100%;
 }
 
 .header {
-    padding-bottom: 30px;
+    padding-bottom: var(--el-font-size-base);
     border-bottom: 1px solid #ececec;
 
     .t1 {
@@ -189,13 +189,13 @@ onMounted(() => {
         font-weight: bold;
 
         .title {
-            font-size: 24px;
+            font-size: var(--el-font-size-base);
             position: relative;
             top: 14px;
         }
 
         .num {
-            font-size: 40px;
+            font-size: 30px;
         }
     }
 
@@ -208,21 +208,21 @@ onMounted(() => {
 }
 
 .number_wrap {
-    padding: 20px 0;
+    padding: var(--el-font-size-base) 0;
 
     .menus {
         display: flex;
-        gap: 20px;
+        gap: var(--el-font-size-base);
 
         .item {
-            height: 196px;
+            height: 130px;
             flex: 1;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             background-color: #efefef;
-            padding: 50px 0;
+            padding: 10px 0;
             border-radius: 10px;
             position: relative;
             $lineHeight: 4px;
@@ -230,18 +230,20 @@ onMounted(() => {
             &.active {
                 &::after {
                     content: "";
-                    width: 60%;
+                    width: 50%;
                     height: $lineHeight;
                     background-color: var(--primary-color);
                     position: absolute;
                     bottom: 0;
-                    left: 20%;
+                    left: 25%;
                     border-radius: $lineHeight;
                 }
             }
 
-            .icon {
-                font-size: 30px;
+            .img {
+                $size: 60px;
+                width: $size;
+                height: $size;
             }
 
             .title {
@@ -252,38 +254,36 @@ onMounted(() => {
 
     .input_wrap {
         display: flex;
-        gap: 20px;
-        padding: 20px 0;
+        gap: var(--el-font-size-base);
+        padding: var(--el-font-size-base) 0;
 
         .input {
             display: flex;
             align-items: center;
-            height: 80px;
+            height: 60px;
             border-radius: 10px;
             border: 1px solid var(--primary-color);
-            font-size: 26px;
-            font-weight: 400;
-            padding: 0 30px;
+            font-size: calc(var(--el-font-size-base) + 10px);
+            padding: 0 var(--el-font-size-base);
         }
     }
 
     .blance {
         color: var(--el-color-danger);
-        font-size: 26px;
+        font-size: calc(var(--el-font-size-base) + 10px);
     }
 }
 
 .keybord_wrap {
     display: flex;
-    padding-top: 20px;
 
     .left {
-        --item-height: calc((100vh - 650px) / 4);
+        --item-height: calc((100vh - 440px) / 4);
         flex: 1;
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         grid-template-rows: var(--item-height) var(--item-height) var(--item-height) var(--item-height);
-        gap: 20px;
+        gap: var(--el-font-size-base);
 
         .item {
             background-color: #efefef;
@@ -291,7 +291,7 @@ onMounted(() => {
             align-items: center;
             justify-content: center;
             border-radius: 6px;
-            font-size: 28px;
+            font-size: calc(var(--el-font-size-base) + 10px);
 
             &:active {
                 background-color: #dbdbdb;
@@ -300,16 +300,16 @@ onMounted(() => {
     }
 
     .pay_btn {
+        flex: 0.3;
         border-radius: 6px;
-        width: 200px;
         color: #fff;
         background-color: var(--el-color-warning);
-        margin-left: 20px;
+        margin-left: var(--el-font-size-base);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        font-size: 26px;
+        font-size: calc(var(--el-font-size-base) + 10px);
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/skuModal.vue b/src/components/skuModal.vue
index c58ea38..4339db3 100644
--- a/src/components/skuModal.vue
+++ b/src/components/skuModal.vue
@@ -176,34 +176,20 @@ defineExpose({
 
 .row {
     border-bottom: 1px solid #ececec;
-    margin-top: 20px;
+    margin-top: var(--el-font-size-base);
 
     .title {
-        font-size: 20px;
+        font-size: var(--el-font-size-base);
     }
 
     .sku_wrap {
         display: flex;
         padding: 14px 0;
-
-        .item {
-            color: var(--primary-color);
-            padding: 8px 16px;
-            font-size: 18px;
-            border: 1px solid var(--primary-color);
-            margin-right: 14px;
-            border-radius: 2px;
-
-            &.active {
-                background-color: var(--primary-color);
-                color: #fff;
-            }
-        }
     }
 }
 
 .footer {
-    padding-top: 100px;
+    padding-top: 30px;
 
     .info {
         height: 50px;
diff --git a/src/views/home/components/cartOperation.vue b/src/views/home/components/cartOperation.vue
index ea63eaf..3b2c699 100644
--- a/src/views/home/components/cartOperation.vue
+++ b/src/views/home/components/cartOperation.vue
@@ -122,14 +122,14 @@ function skuConfirm(e) {
 
 <style scoped lang="scss">
 .operation_wrap {
-    padding: 20px;
+    padding: var(--el-font-size-base);
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: var(--el-font-size-base);
 
     .item {
-        width: 100px;
-        height: 40px;
+        width: 80px;
+        height: 34px;
         display: flex;
         align-items: center;
         justify-content: center;
diff --git a/src/views/home/components/goods.vue b/src/views/home/components/goods.vue
index ea8fe08..24be0bf 100644
--- a/src/views/home/components/goods.vue
+++ b/src/views/home/components/goods.vue
@@ -210,7 +210,7 @@ defineExpose({
 
 .header {
     display: flex;
-    height: 80px;
+    height: 60px;
     justify-content: space-between;
     border-bottom: 1px solid #ececec;
 }
@@ -226,7 +226,8 @@ defineExpose({
         position: relative;
 
         span {
-            font-size: 24px;
+            font-size: var(--el-font-size-base);
+            font-weight: bold;
         }
 
         &.active {
@@ -279,11 +280,11 @@ defineExpose({
     display: flex;
     justify-content: flex-end;
     gap: 10px;
-    padding: 20px;
+    padding: var(--el-font-size-base);
 }
 
 .shop_list {
-    max-height: calc(100vh - 40px - 80px - 80px);
+    max-height: calc(100vh - 40px - 80px - 60px);
     overflow-y: auto;
     display: flex;
     flex-wrap: wrap;
@@ -297,8 +298,8 @@ defineExpose({
 
     .item_wrap {
         width: 20%;
-        padding: 0 10px;
-        padding-bottom: 20px;
+        padding: 0 5px;
+        padding-bottom: 5px;
 
         .item {
             border: 1px solid #ececec;
@@ -311,7 +312,7 @@ defineExpose({
             }
 
             .dot {
-                padding: 0 14px;
+                padding: 0 8px;
                 background-color: var(--el-color-danger);
                 color: #fff;
                 border-radius: 20px;
@@ -320,12 +321,11 @@ defineExpose({
                 right: 4px;
                 z-index: 1;
                 font-size: 12px;
-                font-size: 18px;
             }
 
             .cover {
                 width: 100%;
-                height: 150px;
+                height: 80px;
             }
 
             .name {
diff --git a/src/views/home/components/settleAccount.vue b/src/views/home/components/settleAccount.vue
index d0ec269..4216736 100644
--- a/src/views/home/components/settleAccount.vue
+++ b/src/views/home/components/settleAccount.vue
@@ -66,7 +66,7 @@ import { ipcRenderer } from 'electron'
 
 const emit = defineEmits('paySuccess')
 
-const dialogVisible = ref(true)
+const dialogVisible = ref(false)
 const props = defineProps({
     cart: {
         type: Array,
@@ -130,7 +130,7 @@ defineExpose({
     width: 100%;
     height: 100%;
     display: flex;
-    padding: 20px 0;
+    padding: var(--el-font-size-base) 0;
 
     .cart_list {
         flex: 1;
@@ -138,38 +138,40 @@ defineExpose({
         .nav_wrap {
             display: flex;
             align-items: center;
-            padding: 0 20px;
+            padding: 0 var(--el-font-size-base);
 
             .return {
-                width: 60px;
-                height: 60px;
+                $size: 50px;
+                width: $size;
+                height: $size;
                 border-radius: 50%;
-                border: 3px solid #333;
+                border: 2px solid #333;
                 display: flex;
                 align-items: center;
                 justify-content: center;
 
                 .icon {
                     color: #333;
-                    font-size: 26px;
+                    font-size: var(--el-font-size-base);
                 }
             }
 
             .info {
                 flex: 1;
-                padding-left: 20px;
+                padding-left: var(--el-font-size-base);
+                $padding: 10px;
 
                 .master_id {
                     font-size: calc(var(--el-font-size-base) + 10px);
                     border-bottom: 1px solid #ececec;
-                    padding: 16px 0;
+                    padding: $padding 0;
                 }
 
                 .btm {
                     display: flex;
                     align-items: center;
                     justify-content: space-between;
-                    padding: 16px 0;
+                    padding: $padding 0;
 
 
                     .p {
@@ -180,8 +182,8 @@ defineExpose({
         }
 
         .list_wrap {
-            padding: 20px;
-            height: calc(100vh - 260px);
+            padding: var(--el-font-size-base);
+            height: calc(100vh - 220px);
             overflow-y: auto;
 
             .item {
@@ -218,7 +220,7 @@ defineExpose({
                     padding-bottom: 10px;
 
                     .tag {
-                        padding: 4px 10px;
+                        padding: 2px 6px;
                         background-color: var(--el-color-danger);
                         color: #fff;
                         margin-right: 10px;
@@ -246,7 +248,7 @@ defineExpose({
         .footer {
             display: flex;
             padding-top: 20px;
-            gap: 20px;
+            gap: var(--el-font-size-base);
 
             .editor {
                 border: 1px solid #ececec;
@@ -255,7 +257,6 @@ defineExpose({
                 align-items: center;
                 justify-content: center;
                 color: #555;
-                font-size: 22px;
             }
 
             .button {
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index d103158..65bd535 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -344,7 +344,7 @@ onMounted(() => {
       display: flex;
       align-items: center;
       background-color: var(--el-color-info-light-7);
-      padding-left: 20px;
+      padding-left: var(--el-font-size-base);
 
       .t {
         font-size: $fs;
@@ -355,7 +355,7 @@ onMounted(() => {
       display: flex;
       align-items: center;
       background-color: var(--el-color-info-light-8);
-      padding: 0 20px;
+      padding: 0 var(--el-font-size-base);
 
       .icon {
         color: var(--el-color-primary);
@@ -382,12 +382,12 @@ onMounted(() => {
 
     .shop_list {
       flex: 1;
-      height: calc(100vh - 40px - 60px - 130px);
+      height: calc(100vh - 40px - 60px - 132px);
       overflow-y: auto;
       border-right: 1px solid #ececec;
 
       .item {
-        padding: 20px;
+        padding: var(--el-font-size-base);
 
         &.active {
           background-color: #f5f5f5;
@@ -400,7 +400,7 @@ onMounted(() => {
         .name_wrap {
           display: flex;
           justify-content: space-between;
-          font-size: 20px;
+          font-size: var(--el-font-size-base);
         }
 
         .sku_list {
@@ -408,7 +408,7 @@ onMounted(() => {
           padding-top: 10px;
 
           .tag {
-            padding: 4px 10px;
+            padding: 2px 6px;
             background-color: var(--el-color-danger);
             color: #fff;
             margin-right: 10px;
@@ -416,7 +416,7 @@ onMounted(() => {
         }
 
         .num {
-          padding-top: 20px;
+          padding-top: var(--el-font-size-base);
           display: flex;
           align-items: center;
           justify-content: space-between;
@@ -448,7 +448,7 @@ onMounted(() => {
 }
 
 .footer {
-  padding: 20px;
+  padding: var(--el-font-size-base);
   border-top: 1px solid #ececec;
 
   .left {
@@ -465,7 +465,7 @@ onMounted(() => {
 
       .icon {
         display: block;
-        font-size: 20px;
+        font-size: var(--el-font-size-base);
         color: var(--primary-color);
       }
 
@@ -521,7 +521,7 @@ onMounted(() => {
 }
 
 .shop_manage {
-  flex: 2;
+  flex: 2.5;
   margin-left: 20px;
   height: 100%;
 }