139 lines
5.3 KiB
Vue
139 lines
5.3 KiB
Vue
<template>
|
||
<view class="mian">
|
||
<image class="banner" src="../../static/sidedish/banner.jpg" mode="widthFix"></image>
|
||
<view class="class_content">
|
||
<view class="class_scroll">
|
||
<scroll-view
|
||
:enhanced="true"
|
||
:show-scrollbar="false"
|
||
scroll-x="true"
|
||
:scroll-with-animation="true"
|
||
:scroll-left="ScrollLeft"
|
||
class="class_scroll_ul">
|
||
<view class="class_item class_item_active">推荐</view>
|
||
<view class="class_item">特惠专区</view>
|
||
<view class="class_item">时令春菜</view>
|
||
<view class="class_item">鸭货卤味</view>
|
||
<view class="class_item">鸡/鹅肉类</view>
|
||
<view class="class_item">轻食萨拉</view>
|
||
<view class="class_item ">猪肉类</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="content">
|
||
<view class="content_item">
|
||
<view class="content_head">
|
||
<view class="content_head_l">
|
||
<image class="content_head_img" src="../../static/sidedish/flame.png"></image>
|
||
<view class="content_head_title">鲜花人气榜</view>
|
||
</view>
|
||
<view class="content_head_btn">
|
||
<image class="content_head_btnimg" src="../../static/sidedish/addCart.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="content_shop">
|
||
<scroll-view class="content_shop_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||
<view class="content_shop_item" @click="goDetail()">
|
||
<view class="content_shop_item_img">
|
||
<!-- <view class="content_shop_item_tag"></view> -->
|
||
<image class="content_shop_item_tag" src="../../static/sidedish/no1.png"></image>
|
||
<image class="content_shop_item_imgUrl" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="content_shop_item_title">火锅配菜青菜</view>
|
||
<view class="content_shop_item_bottom">
|
||
<view class="content_shop_item_l">
|
||
<view class="content_shop_item_price price">39.9</view>
|
||
<view class="content_shop_market prices">59.9</view>
|
||
</view>
|
||
<view class="content_shop_item_cart">
|
||
<image class="content_shop_item_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content_shop_item" @click="goDetail()">
|
||
<view class="content_shop_item_img">
|
||
<image class="content_shop_item_tag" src="../../static/sidedish/no2.png"></image>
|
||
<image class="content_shop_item_imgUrl" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="content_shop_item_title">火锅配菜青菜</view>
|
||
<view class="content_shop_item_bottom">
|
||
<view class="content_shop_item_l">
|
||
<view class="content_shop_item_price price">39.9</view>
|
||
<view class="content_shop_market prices">59.9</view>
|
||
</view>
|
||
<view class="content_shop_item_cart">
|
||
<image class="content_shop_item_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content_shop_item" @click="goDetail()">
|
||
<view class="content_shop_item_img">
|
||
<image class="content_shop_item_tag" src="../../static/sidedish/no3.png"></image>
|
||
<image class="content_shop_item_imgUrl" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="content_shop_item_title">火锅配菜青菜</view>
|
||
<view class="content_shop_item_bottom">
|
||
<view class="content_shop_item_l">
|
||
<view class="content_shop_item_price price">39.9</view>
|
||
<view class="content_shop_market prices">59.9</view>
|
||
</view>
|
||
<view class="content_shop_item_cart">
|
||
<image class="content_shop_item_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content_shop_item" @click="goDetail()">
|
||
<view class="content_shop_item_img">
|
||
<view class="content_shop_item_tagImg">4</view>
|
||
<image class="content_shop_item_imgUrl" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="content_shop_item_title">火锅配菜青菜</view>
|
||
<view class="content_shop_item_bottom">
|
||
<view class="content_shop_item_l">
|
||
<view class="content_shop_item_price price">39.9</view>
|
||
<view class="content_shop_market prices">59.9</view>
|
||
</view>
|
||
<view class="content_shop_item_cart">
|
||
<image class="content_shop_item_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed,ref } from 'vue';
|
||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||
import { storeToRefs } from 'pinia';//实现解构付值
|
||
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
const ScrollLeft = ref(0);
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
// const { count,doubleCount } = storeToRefs(counterStore);
|
||
const goDetail= ()=>{
|
||
uni.navigateTo({
|
||
url:`/shopProDetail/detail/detail`
|
||
})
|
||
}
|
||
onLoad((options) => {
|
||
|
||
});
|
||
onShow(() => {
|
||
|
||
});
|
||
onPullDownRefresh(()=>{
|
||
|
||
})
|
||
onReachBottom(()=>{
|
||
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |