新增备注组件，优化el样式变量

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>