Merge branch 'gyq' of https://gitee.com/shaanxi-super-shopkeeper_1/cashierdesktop into wwz

src/App.vue

@@ -68,13 +68,41 @@ router.beforeEach((to, from) => {
   --el-button-hover-bg-color: var(--primary-color) !important;
   --el-color-primary-light-3: rgb(var(--r-lighter), var(--g-lighter), var(--b-lighter)) !important;
   --el-color-primary-dark-2: rgb(var(--r-darker), var(--g-darker), var(--b-darker)) !important;
+
+  --el-font-size-base: 20px !important;
+  --el-message-close-size: 20px !important;
+  --el-component-size-large: 50px !important;
 }
 
 html {
-  font-size: 20px;
+  font-size: var(--el-font-size-base);
   color: #333;
 }
 
+.el-textarea {
+  font-size: var(--el-font-size-base) !important;
+}
+
+.el-dialog__header {
+  background-color: #555;
+  margin-right: 0 !important;
+  padding-bottom: 20px !important;
+  border-radius: var(--el-dialog-border-radius) var(--el-dialog-border-radius) 0 0;
+}
+
+.el-dialog__title {
+  color: #fff !important;
+}
+
+.el-button--large {
+  --el-button-size: 50px !important;
+  font-size: var(--el-font-size-base) !important;
+}
+
+.el-input--large {
+  font-size: var(--el-font-size-base) !important;
+}
+
 /*定义滚动条高宽及背景
  高宽分别对应横竖滚动条的尺寸*/
 ::-webkit-scrollbar {

src/components/remarkModal.vue

@@ -0,0 +1,76 @@
+<template>
+    <el-dialog title="备注" width="800" v-model="dialogVisible">
+        <div class="tag_wrap">
+            <div class="item" v-for="item in tagList" :key="item.remark" @click="remark = item.remark">
+                {{ item.remark }}
+            </div>
+        </div>
+        <div class="content">
+            <el-input type="textarea" :rows="6" v-model="remark" placeholder="请输入备注"></el-input>
+        </div>
+        <div class="footer_wrap">
+            <div class="btn">
+                <el-button type="primary" style="width: 100%;">确认</el-button>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const dialogVisible = ref(false)
+
+const remark = ref('')
+
+const tagList = ref([
+    {
+        remark: '味道淡一点'
+    },
+    {
+        remark: '味道大一点'
+    }
+])
+
+// 显示组件
+const show = () => {
+    dialogVisible.value = true
+}
+
+defineExpose({
+    show
+})
+</script>
+
+<style scoped lang="scss">
+.tag_wrap {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+
+    .item {
+        padding: 10px 20px;
+        border: 1px solid var(--primary-color);
+        border-radius: 4px;
+        color: var(--primary-color);
+        font-size: var(--el-font-size-base);
+
+        &:hover {
+            cursor: pointer;
+            background-color: var(--primary-color);
+            color: #fff;
+        }
+    }
+}
+
+.content {
+    padding: 20px 0;
+}
+
+.footer_wrap {
+    display: flex;
+
+    .btn {
+        flex: 1;
+    }
+}
+</style>

src/views/home.vue

@@ -105,16 +105,14 @@
           </div>
         </div>
         <div class="btm">
-          <div class="editor">
+          <el-button icon="Edit" @click="remarkRef.show()"></el-button>
-            <el-icon>
-              <Edit />
-            </el-icon>
-          </div>
           <div class="button">
-            <div class="js">
+            <el-button type="primary" style="width: 100%;">
-              <el-text class="t">￥3.09</el-text>
+              <div class="js">
-              <el-text class="t">结算</el-text>
+                <el-text class="t">￥3.09</el-text>
-            </div>
+                <el-text class="t" style="margin-left: 250px;">结算</el-text>
+              </div>
+            </el-button>
           </div>
         </div>
       </div>
@@ -166,12 +164,17 @@
     </div>
   </div>
   <skuModal />
+  <remarkModal ref="remarkRef" />
 </template>
 
 <script setup>
 import skuModal from '@/components/skuModal.vue'
+import remarkModal from '@/components/remarkModal.vue'
 
 import { ref } from 'vue'
+
+const remarkRef = ref(null)
+
 const shopListType = ref('text')
 
 // 切换商品显示模式
@@ -385,35 +388,14 @@ function changeShopListType() {
 
     .button {
       flex: 1;
-      display: flex;
-      align-items: center;
-      border-radius: 6px;
-      background-color: var(--primary-color);
-      padding: 0 20px;
 
-      &:hover {
-        cursor: pointer;
-        background-color: var(--el-color-primary-light-3);
-      }
-
-      &:active {
-        background-color: var(--el-color-primary-dark-2);
-      }
 
       .js {
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
 
         .t {
           color: #fff;
           font-size: 20px;
         }
-
-        :deep(span) {
-          width: auto;
-          display: inline;
-        }
       }
     }
   }