feat:1.添加一个主题色的设置。

src/element.scss

@@ -0,0 +1,16 @@
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': rgb(246, 127, 32),
+    ),
+    'info': (
+      'base': #999999,
+    ),
+  )
+);
+
+:root {
+  --el-color-primary: rgba(246, 127, 32, 1);
+  --el-color-primary-light-3: rgba(246, 127, 32, 0.8);
+  --el-color-primary-dark-2: rgba(246, 127, 32, 0.95);
+}

src/main.ts

@@ -7,6 +7,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import { createPinia } from 'pinia'
 import i18n from './i18n'
 import './styles.css'
+import './element.scss'
 
 const pinia = createPinia()
 const app = createApp(App).use(pinia).use(ElementPlus).use(i18n).use(router).mount('#app')

src/styles.css

@@ -1 +1,9 @@
-@import "tailwindcss";
+
+@import "tailwindcss";
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': green,
+    ),
+  ),
+)

src/views/menu/components/order-drawer.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-drawer v-model="show" :show-close="false" direction="rtl" size="700px">
+    <template #header>
+      <div>
+        <h1 class="">Search for products</h1>
+        <el-divider />
+      </div>
+    </template>
+    <template #footer>
+      <div style="flex: auto">
+        <el-button type="primary" @click="cancelClick">cancel</el-button>
+        <el-button type="primary" @click="confirmClick">confirm</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup>
+const show = defineModel('show')
+const showInput = defineModel('showInput')
+</script>
+
+<style lang="scss" scoped></style>

src/views/menu/index.vue

@@ -1,69 +1,89 @@
 <template>
-    <div class="w-full h-full overflow-hidden flex justify-between">
-        <div class="shrink-0 min-w-[800px] flex-1">
-            <div class="w-full h-full overflow-y-auto relative hide-bar">
-                <div class="sticky top-0 w-full bg-[#fff] p-[10px]">
-                    <div class="h-[60px] flex justify-between items-center">
-                        <div
-                            class="flex-1 h-full pr-[10px] flex items-center justify-between cursor-pointer overflow-hidden">
-                            <div
-                                class="text-[#999] shrink-0 flex items-center justify-center h-[34px] w-[44px] border border-[#e6e6e6] rounded-[12px]">
-                                <el-icon>
-                                    <ArrowLeft />
-                                </el-icon>
-                            </div>
-                            <div ref="scrollRef" class="overflow-x-auto bg-[#666]" style="width:calc(100% - 108px)">
-                                <div ref="" class="flex flex-nowrap items-center ">
-                                    <div @click="catgroyClick" v-for="item in 50"  class="flex items-center shrink-0 mr-[20px] h-[34px] w-[55px] border">{{ item }}</div>
-                                </div>
-                            </div>
-                            <div @click="handleRightClick" class="text-[#999] shrink-0 flex items-center justify-center h-[34px] w-[44px] border border-[#e6e6e6] rounded-[12px]">
-                                <el-icon>
-                                    <ArrowRight />
-                                </el-icon>
-                            </div>
-                            <!-- <div class="w-full h-full overflow-hidden flex items-center justify-between">
+  <div class="w-full h-full overflow-hidden flex justify-between">
+    <div class="shrink-0 min-w-[800px] flex-1">
+      <div class="w-full h-full overflow-y-auto relative hide-bar">
+        <div class="sticky top-0 w-full bg-[#fff] p-[10px]">
+          <div class="h-[60px] flex justify-between items-center">
+            <div
+              class="flex-1 h-full pr-[10px] flex items-center justify-between cursor-pointer overflow-hidden"
+            >
+              <div
+                class="text-[#999] shrink-0 flex items-center justify-center h-[34px] w-[44px] border border-[#e6e6e6] rounded-[12px]"
+              >
+                <el-icon>
+                  <ArrowLeft />
+                </el-icon>
+              </div>
+              <div
+                ref="scrollRef"
+                class="overflow-x-auto bg-[#666]"
+                style="width: calc(100% - 108px)"
+              >
+                <div ref="" class="flex flex-nowrap items-center">
+                  <div
+                    @click="catgroyClick"
+                    v-for="item in 50"
+                    class="flex items-center shrink-0 mr-[20px] h-[34px] w-[55px] border"
+                  >
+                    {{ item }}
+                  </div>
+                </div>
+              </div>
+              <div
+                @click="handleRightClick"
+                class="text-[#999] shrink-0 flex items-center justify-center h-[34px] w-[44px] border border-[#e6e6e6] rounded-[12px]"
+              >
+                <el-icon>
+                  <ArrowRight />
+                </el-icon>
+              </div>
+              <!-- <div class="w-full h-full overflow-hidden flex items-center justify-between">
                                 
                                 
                             </div> -->
-                        </div>
-                        <div
-                            class="h-[34px] px-[10px] cursor-pointer shrink-0 border rounded border-[#e6e6e6] flex items-center justify-between hover:bg-[#f67f20] hover:text-[#fff]">
-                            <span>{{ t('menu.pendingOrders') }}</span>
-                            <div class="ml-[10px] text-[#fff] rounded-full bg-[#f67f20] text-[14px] px-[3px]">
-                                99+
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="h-[50px] " v-for="item in 50">{{ item }}</div>
             </div>
+            <div
+              class="h-[34px] px-[10px] cursor-pointer shrink-0 border rounded border-[#e6e6e6] flex items-center justify-between hover:bg-[#f67f20] hover:text-[#fff]"
+            >
+              <span>{{ t('menu.pendingOrders') }}</span>
+              <div class="ml-[10px] text-[#fff] rounded-full bg-[#f67f20] text-[14px] px-[3px]">
+                99+
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="w-[400px] h-full overflow-hidden border-l border-gray-200">
-
+        <div @click="show = !show" class="h-[50px] border" v-for="item in 50">
+          {{ item }}
         </div>
+      </div>
     </div>
+    <div class="w-[700px] h-full overflow-hidden border-l border-gray-200"></div>
+
+    <OrderDrawer v-model:="show" />
+  </div>
 </template>
 <script setup>
-import { ref,onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useStore } from '../../stores'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
+import OrderDrawer from './components/order-drawer.vue'
+
 const { t } = useI18n()
 const store = useStore()
 const { count } = storeToRefs(store)
 const scrollRef = ref(null)
-function handleRightClick(){
-    
-    scrollRef.value.scrollLeft += 100
+function handleRightClick() {
+  scrollRef.value.scrollLeft += 100
 }
-onMounted(()=>{
-    
-})
+
+const show = ref(false)
+
+onMounted(() => {})
 </script>
 <style scoped>
 ::-webkit-scrollbar-thumb {
-    background-color: red;
+  background-color: red;
 }
-</style>
+</style>