From 5298ff25694391961c199c0cc15cb98315db7daa Mon Sep 17 00:00:00 2001
From: gyq <875626088@qq.com>
Date: Thu, 22 Feb 2024 16:24:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=A4=87=E6=B3=A8=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96el=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    | 30 +++++++++++++-
 src/components/remarkModal.vue | 76 ++++++++++++++++++++++++++++++++++
 src/views/home.vue             | 42 ++++++-------------
 3 files changed, 117 insertions(+), 31 deletions(-)
 create mode 100644 src/components/remarkModal.vue

diff --git a/src/App.vue b/src/App.vue
index 6f408e3..caf4470 100644
--- a/src/App.vue
+++ b/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 {
diff --git a/src/components/remarkModal.vue b/src/components/remarkModal.vue
new file mode 100644
index 0000000..53cb2ed
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/home.vue b/src/views/home.vue
index b6fbb9e..fc00de8 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -105,16 +105,14 @@
           </div>
         </div>
         <div class="btm">
-          <div class="editor">
-            <el-icon>
-              <Edit />
-            </el-icon>
-          </div>
+          <el-button icon="Edit" @click="remarkRef.show()"></el-button>
           <div class="button">
-            <div class="js">
-              <el-text class="t">￥3.09</el-text>
-              <el-text class="t">结算</el-text>
-            </div>
+            <el-button type="primary" style="width: 100%;">
+              <div class="js">
+                <el-text class="t">￥3.09</el-text>
+                <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;
-        }
       }
     }
   }