|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="w-full h-full overflow-hidden flex justify-between">
|
|
|
- <div class="shrink-0 min-w-[800px] flex-1">
|
|
|
+ <div class="shrink-0 min-w-[600px] 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">
|
|
|
@@ -12,58 +12,149 @@
|
|
|
<ArrowLeft />
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
- <div ref="scrollRef" class="overflow-x-auto bg-[#666]" style="width:calc(100% - 108px)">
|
|
|
+ <div ref="scrollRef" class="overflow-x-auto bg-[#fff]" 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 @click="catgroyClick" v-for="item in products"
|
|
|
+ class="flex items-center shrink-0 mr-[20px] h-[34px] ">{{ item.name }}
|
|
|
+ </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]">
|
|
|
+ <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 class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
|
+ <div v-for="product in products" :key="product.id"
|
|
|
+ class="bg-white rounded-xl shadow-sm transition-transform ">
|
|
|
+ <div class="relative flex items-center bg-[#fef8f4] justify-center mb-4 rounded overflow-hidden">
|
|
|
+ <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>
|
|
|
+ <p class="text-orange-500 font-semibold">${{ product.price.toFixed(2) }}</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
- <div class="h-[50px] " v-for="item in 50">{{ item }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="w-[400px] h-full overflow-hidden border-l border-gray-200">
|
|
|
-
|
|
|
+ <div class="w-[500px] h-full overflow-hidden border-l border-gray-200">
|
|
|
+ <rightOrder></rightOrder>
|
|
|
</div>
|
|
|
</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 rightOrder from './components/rightOrder/rightOrder.vue'
|
|
|
const { t } = useI18n()
|
|
|
const store = useStore()
|
|
|
const { count } = storeToRefs(store)
|
|
|
const scrollRef = ref(null)
|
|
|
-function handleRightClick(){
|
|
|
-
|
|
|
- scrollRef.value.scrollLeft += 100
|
|
|
-}
|
|
|
-onMounted(()=>{
|
|
|
-
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+
|
|
|
})
|
|
|
+const products = ref([
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: 'Spicy Seasoned Seafood Noodles',
|
|
|
+ price: 2.29,
|
|
|
+ image: 'https://ai-public.mastergo.com/ai/img_res/e53b11a05b7778db2bc50338e47047c4.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: 'Grilled Salmon Bowl',
|
|
|
+ price: 3.49,
|
|
|
+ image: 'https://ai-public.mastergo.com/ai/img_res/07e4619fc2f26fe9f6a0afaebc47dceb.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: 'Teriyaki Chicken Rice',
|
|
|
+ price: 2.99,
|
|
|
+ image: 'https://ai-public.mastergo.com/ai/img_res/1709d2e0e3495f8089da24be4ad2d26a.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: 'Vegetable Stir Fry Noodles',
|
|
|
+ price: 2.49,
|
|
|
+ image: 'https://ai-public.mastergo.com/ai/img_res/043e50f136a6ec7f5f37eb448cf298c7.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ name: 'Spicy Tuna Poke Bowl',
|
|
|
+ price: 3.99,
|
|
|
+ image: 'https://ai-public.mastergo.com/ai/img_res/7f8ad399ad651c8de6896bc611be1936.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ name: 'Beef Bulgogi Bowl',
|
|
|
+ price: 3.79,
|
|
|
+ image: 'https://ai-public.mastergo.com/ai/img_res/49b0d0fbf6654dcef422a7e3334c8b6a.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ name: 'Shrimp Pad Thai',
|
|
|
+ price: 3.29,
|
|
|
+ image: 'https://ai-public.mastergo.com/ai/img_res/ca1fef96dffcfa401768314721606c8f.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 8,
|
|
|
+ name: 'Miso Ramen Bowl',
|
|
|
+ price: 2.89,
|
|
|
+ image: 'https://ai-public.mastergo.com/ai/img_res/210debe79bb22fec1944cab575f2759f.jpg'
|
|
|
+ }
|
|
|
+]);
|
|
|
+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;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+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;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+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];
|
|
|
+};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
background-color: red;
|
|
|
}
|
|
|
+/* 隐藏整个滚动条 */
|
|
|
+::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* 或者仅隐藏滚动条的轨道，保留滑块可操作性，但视觉上不显示滚动条 */
|
|
|
+::-webkit-scrollbar-track {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
</style>
|
