|
@@ -76,134 +76,80 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
-import { ref, onMounted, nextTick } 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'
|
|
|
-import OrderDrawer from './components/order-drawer.vue'
|
|
|
+ import { ref } from 'vue'
|
|
|
+ import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
|
|
|
+ import rightOrder from './components/rightOrder/rightOrder.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
|
|
|
-// }
|
|
|
+ const show = ref(false)
|
|
|
|
|
|
-// 计算元素宽度
|
|
|
-const calculateItemWidth = () => {
|
|
|
- nextTick(() => {
|
|
|
- const element = scrollRef.value?.children[0]
|
|
|
- if (element) {
|
|
|
- const style = window.getComputedStyle(element)
|
|
|
- itemWidth.value = element.offsetWidth + parseInt(style.marginRight)
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-// function handleRightClick() {
|
|
|
-// scrollRef.value.scrollLeft += 100
|
|
|
-// }
|
|
|
-
|
|
|
-const show = ref(false)
|
|
|
-
|
|
|
-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',
|
|
|
- },
|
|
|
-])
|
|
|
-// 生命周期钩子
|
|
|
-onMounted(() => {
|
|
|
- calculateItemWidth()
|
|
|
-})
|
|
|
-
|
|
|
-// 左按钮点击
|
|
|
-const handleLeftClick = () => {
|
|
|
- if (currentIndex.value <= 0) return
|
|
|
- currentIndex.value--
|
|
|
- scrollToPosition()
|
|
|
-}
|
|
|
-
|
|
|
-// 右按钮点击
|
|
|
-const handleRightClick = () => {
|
|
|
- // 假设products通过props传入
|
|
|
- if (currentIndex.value >= products.value.length - 1) return
|
|
|
- currentIndex.value++
|
|
|
- scrollToPosition()
|
|
|
-}
|
|
|
-
|
|
|
-// 执行滚动
|
|
|
-const scrollToPosition = () => {
|
|
|
- scrollRef.value?.scrollTo({
|
|
|
- left: itemWidth.value * currentIndex.value,
|
|
|
- behavior: 'smooth',
|
|
|
- })
|
|
|
-}
|
|
|
+ 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',
|
|
|
+ },
|
|
|
+ ])
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
-::-webkit-scrollbar-thumb {
|
|
|
- background-color: red;
|
|
|
-}
|
|
|
-/* 隐藏整个滚动条 */
|
|
|
-::-webkit-scrollbar {
|
|
|
- display: none;
|
|
|
-}
|
|
|
+ ::-webkit-scrollbar-thumb {
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+ /* 隐藏整个滚动条 */
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
-/* 或者仅隐藏滚动条的轨道,保留滑块可操作性,但视觉上不显示滚动条 */
|
|
|
-::-webkit-scrollbar-track {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-.text-container {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
-}
|
|
|
+ /* 或者仅隐藏滚动条的轨道,保留滑块可操作性,但视觉上不显示滚动条 */
|
|
|
+ ::-webkit-scrollbar-track {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .text-container {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
</style>
|