适配小屏

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 {