feat:添加首页点餐的静态页面

src/views/layout/index.vue

@@ -5,7 +5,7 @@
             <div class="h-full w-[75px] border-r-[1px] border-r-[#e6e6e6] flex flex-col justify-around">
                 <Menu @click="handleClick(item)" v-for="item in menus" :info="item" />
             </div>
-            <div class="h-full flex-1 overflow-y-auto">
+            <div class=" flex-1 overflow-y-auto">
                 <router-view />
             </div>
         </div>

src/views/menu/components/rightOrder/components/order.vue

@@ -24,18 +24,18 @@
               <div class="flex items-center space-x-4">
                 <button class="w-4 h-4 flex items-center justify-center bg-orange-100 text-orange-500 rounded-lg !rounded-button whitespace-nowrap"
                   @click="decreaseQuantity(index)">
-                  <img src="../../../../../assets/img/menu/reduce.svg" alt="">
+                  <img src="@/assets/img/menu/reduce.svg" alt="">
                   
                 </button>
                 <span class="w-4 text-center">{{ item.quantity }}</span>
                 <button class="w-4 h-4 flex items-center justify-center bg-orange-500 text-white rounded-lg !rounded-button whitespace-nowrap"
                   @click="increaseQuantity(index)">
-                  <img src="../../../../../assets/img/menu/add.svg" alt="">
+                  <img src="@/assets/img/menu/add.svg" alt="">
 
                 </button>
                 <button class="w-4 h-4 flex items-center justify-center text-gray-400 hover:text-red-500 !rounded-button whitespace-nowrap"
                   @click="removeItem(index)">
-                  <img src="../../../../../assets/img/menu/delete.svg" alt="">
+                  <img src="@/assets/img/menu/delete.svg" alt="">
                 </button>
               </div>
             </div>

src/views/menu/components/rightOrder/rightOrder.vue

@@ -3,13 +3,13 @@
 <template>
     <div class=" h-full bg-white flex flex-col items-center justify-between ">
       <!-- Empty state section -->
-      <div class="h-[70%]">
+      <div class="h-[80%]">
         <noProduct v-if="false"></noProduct>
         <order v-else></order>
       </div>
       <!-- Action buttons section -->
-      <div class="w-full max-w-md px-4 space-y-4">
-        <div class="grid grid-cols-2 gap-4">
+      <div class="w-full max-w-md px-1  h-[20%] bg-white">
+        <div class="grid grid-cols-2 gap-4 mb-1">
           <button class="rounded text-sm py-3 px-6 bg-white border border-gray-200 text-gray-700 !rounded-button whitespace-nowrap hover:bg-gray-50 transition-colors">
             Registration
           </button>
@@ -17,7 +17,7 @@
             Kitchen Receipt
           </button>
         </div>
-        <button class="rounded text-sm w-full py-3 px-6 text-white bg-[#999]  !rounded-button whitespace-nowrap hover:bg-gray-200 transition-colors">
+        <button class="rounded text-sm w-full py-3 px-6 mb-1 text-white bg-[#999]  !rounded-button whitespace-nowrap hover:bg-gray-200 transition-colors">
           Choose A Table For Payment
         </button>
       </div>
@@ -25,7 +25,7 @@
   </template>
   
   <script lang="ts" setup>
-  import noProduct from '../../../../components/noProduct.vue';
+  import noProduct from '@/components/noProduct.vue';
   import order from './components/order.vue';
   </script>
   

src/views/menu/index.vue

@@ -6,7 +6,7 @@
                     <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
+                            <div @click="handleLeftClick"
                                 class="text-[#999] shrink-0 flex items-center justify-center h-[34px] w-[44px] border border-[#e6e6e6] rounded-[12px]">
                                 <el-icon>
                                     <ArrowLeft />
@@ -35,7 +35,7 @@
                                     <img :src="product.image" :alt="product.name" class="w-25 h-25 my-1 object-cover rounded-full" />
                                 </div>
                                 <div class="text-left px-2">
-                                    <h3 class="text-gray-800 font-medium text-sm mb-2 h-8">{{ product.name }}</h3>
+                                    <h3 class="text-gray-800 font-medium text-sm mb-2 text-container w-full text-nowrap line-clamp-2  sm:line-clamp-1 md:line-clamp-2 lg:line-clamp-3">{{ product.name }}</h3>
                                     <p class="text-orange-500 font-semibold">${{ product.price.toFixed(2) }}</p>
                                 </div>
                             </div>
@@ -58,8 +58,21 @@ import rightOrder from './components/rightOrder/rightOrder.vue'
 const { t } = useI18n()
 const store = useStore()
 const { count } = storeToRefs(store)
+// 响应式数据
+const currentIndex = ref(0)
+const itemWidth = ref(0)
 const scrollRef = ref(null)
 
+// 计算元素宽度
+const calculateItemWidth = () => {
+  nextTick(() => {
+    const element = scrollRef.value?.children[0]
+    if (element) {
+      const style = window.getComputedStyle(element)
+      itemWidth.value = element.offsetWidth + parseInt(style.marginRight)
+    }
+  })
+}
 onMounted(() => {
 
 })
@@ -113,36 +126,33 @@ const products = ref([
         image: 'https://ai-public.mastergo.com/ai/img_res/210debe79bb22fec1944cab575f2759f.jpg'
     }
 ]);
+// 生命周期钩子
+onMounted(() => {
+  calculateItemWidth()
+})
+
+// 左按钮点击
 const handleLeftClick = () => {
-  if (!scrollRef.value) return;
-  const target = findTargetElement(scrollRef.value);
-  const leftSibling = target.previousElementSibling;
-  if (leftSibling) {
-    scrollRef.value.scrollLeft = leftSibling.offsetLeft - (scrollRef.value.offsetWidth - leftSibling.offsetWidth) / 2;
-  }
-};
+  if (currentIndex.value <= 0) return
+  currentIndex.value--
+  scrollToPosition()
+}
 
+// 右按钮点击
 const handleRightClick = () => {
-  if (!scrollRef.value) return;
-  const target = findTargetElement(scrollRef.value);
-  const rightSibling = target.nextElementSibling;
-  if (rightSibling) {
-    scrollRef.value.scrollLeft = rightSibling.offsetLeft - (scrollRef.value.offsetWidth - rightSibling.offsetWidth) / 2;
-  }
-};
+  // 假设products通过props传入
+  if (currentIndex.value >= products.value.length - 1) return
+  currentIndex.value++
+  scrollToPosition()
+}
 
-const findTargetElement = (scrollContainer) => {
-  const scrollLeft = scrollContainer.scrollLeft;
-  const children = scrollContainer.children[0].children;
-  for (let i = 0; i < children.length; i++) {
-    const child = children[i];
-    const childEnd = child.offsetLeft + child.offsetWidth;
-    if (child.offsetLeft <= scrollLeft + scrollContainer.offsetWidth && childEnd > scrollLeft) {
-      return child;
-    }
-  }
-  return children[0];
-};
+// 执行滚动
+const scrollToPosition = () => {
+  scrollRef.value?.scrollTo({
+    left: itemWidth.value * currentIndex.value,
+    behavior: 'smooth'
+  })
+}
 </script>
 <style scoped>
 ::-webkit-scrollbar-thumb {
@@ -157,4 +167,9 @@ const findTargetElement = (scrollContainer) => {
 ::-webkit-scrollbar-track {
     display: none;
 }
+.text-container {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 </style>