帮你配/商品详情页编写
This commit is contained in:
邝军华
parent
c80d8c4e20
commit
702bf43059
18
pages.json
18
pages.json
@ -21,7 +21,7 @@
|
|||||||
"path": "pages/sidedish/sidedish",
|
"path": "pages/sidedish/sidedish",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "帮你配",
|
"navigationBarTitleText": "帮你配",
|
||||||
"navigationBarBackgroundColor": "#f2f5f7",
|
"navigationBarBackgroundColor": "#F6F6F6",
|
||||||
"enablePullDownRefresh": true
|
"enablePullDownRefresh": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -81,6 +81,22 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"subPackages":[{
|
||||||
|
"root": "shopProDetail",
|
||||||
|
"pages": [{
|
||||||
|
"path": "detail/detail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}],
|
||||||
|
"preloadRule":{
|
||||||
|
"shopProDetail/detail/detail": {
|
||||||
|
"network": "all",
|
||||||
|
"packages": ["shopProDetail"]
|
||||||
|
}
|
||||||
|
},
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
"navigationBarTextStyle": "black",
|
"navigationBarTextStyle": "black",
|
||||||
"navigationBarTitleText": "外卖点餐",
|
"navigationBarTitleText": "外卖点餐",
|
||||||
|
|||||||
@ -67,17 +67,106 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<view class="cart_items">
|
||||||
|
<view class="cart_t">
|
||||||
|
<view class="cart_selected">
|
||||||
|
<view class="cart_selected_false"></view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_scroll">
|
||||||
|
<scroll-view class="cart_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||||||
|
<view class="cart_scroll_li">
|
||||||
|
<view class="cart_scroll_img">
|
||||||
|
<image class="cart_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="cart_scroll_title">火锅配菜青菜</view>
|
||||||
|
<view class="cart_scroll_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_scroll_li">
|
||||||
|
<view class="cart_scroll_img">
|
||||||
|
<image class="cart_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="cart_scroll_title">火锅配菜青菜</view>
|
||||||
|
<view class="cart_scroll_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_scroll_li">
|
||||||
|
<view class="cart_scroll_img">
|
||||||
|
<image class="cart_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="cart_scroll_title">火锅配菜青菜</view>
|
||||||
|
<view class="cart_scroll_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_scroll_li">
|
||||||
|
<view class="cart_scroll_img">
|
||||||
|
<image class="cart_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="cart_scroll_title">火锅配菜青菜</view>
|
||||||
|
<view class="cart_scroll_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_bottom">
|
||||||
|
<view class=""></view>
|
||||||
|
<view class="cart_counter">
|
||||||
|
<view class="cart_counter_btn border_l">
|
||||||
|
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="cart_counter_center">1</view>
|
||||||
|
<view class="cart_counter_btn border_r">
|
||||||
|
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 失效商品 -->
|
||||||
|
<view class="cart_lose">
|
||||||
|
<view class="cart_lose_top">
|
||||||
|
<view class="cart_lose_top_l">共5款失效商品</view>
|
||||||
|
<view class="cart_lose_top_r">一键清空</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_lose_bottom">
|
||||||
|
<view class="cart_lose_img">
|
||||||
|
<view class="cart_lose_bcg">
|
||||||
|
<view class="cart_lose_text">商品已下架</view>
|
||||||
|
</view>
|
||||||
|
<image class="cart_lose_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="cart_lose_ly">
|
||||||
|
<view class="cart_lose_title">糖醋排骨</view>
|
||||||
|
<view class="cart_lose_desc">商品下架了</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_lose_bottom">
|
||||||
|
<view class="cart_lose_img">
|
||||||
|
<view class="cart_lose_bcg">
|
||||||
|
<view class="cart_lose_text">商品已下架</view>
|
||||||
|
</view>
|
||||||
|
<image class="cart_lose_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="cart_lose_ly">
|
||||||
|
<view class="cart_lose_title">糖醋排骨</view>
|
||||||
|
<view class="cart_lose_desc">商品下架了</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<view class="user_title">
|
<view class="user_title">
|
||||||
<image class="user_img" src="../../static/user/leftimg.png"></image>
|
<text class="user_name">为您推荐</text>
|
||||||
<view class="user_name">为您推荐</view>
|
|
||||||
<image class="user_img" src="../../static/user/rightimg.png"></image>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 商品区域 -->
|
<!-- 商品区域 -->
|
||||||
<view class="shop_view">
|
<view class="shop_view">
|
||||||
<view class="shop_view_ul">
|
<view class="shop_view_ul">
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -99,7 +188,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -121,7 +210,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -146,7 +235,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="shop_view_ul">
|
<view class="shop_view_ul">
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -168,7 +257,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -223,7 +312,11 @@ const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
|
|||||||
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
|
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
|
||||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||||
//const { count,doubleCount } = storeToRefs(counterStore);
|
//const { count,doubleCount } = storeToRefs(counterStore);
|
||||||
|
const goDetail= ()=>{
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/shopProDetail/detail/detail`
|
||||||
|
})
|
||||||
|
}
|
||||||
// 使用 uni.onLoad 监听页面加载
|
// 使用 uni.onLoad 监听页面加载
|
||||||
onLoad((options) => {
|
onLoad((options) => {
|
||||||
|
|
||||||
|
|||||||
@ -46,13 +46,12 @@ page{
|
|||||||
.head_q{
|
.head_q{
|
||||||
color: #000000;
|
color: #000000;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 34rpx;
|
font-size: 32rpx;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
.head_w{
|
.head_w{
|
||||||
color: #333333;
|
color: #333333;
|
||||||
font-weight: 500;
|
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
padding-right: 15px;
|
padding-right: 15px;
|
||||||
@ -76,18 +75,15 @@ page{
|
|||||||
background: linear-gradient(180deg, #FCEEEF 0%, #f6f6f6 100%);
|
background: linear-gradient(180deg, #FCEEEF 0%, #f6f6f6 100%);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
.cart_item{
|
.cart_item{
|
||||||
margin-top: 20rpx;
|
margin: 0rpx 20rpx 20rpx 20rpx;
|
||||||
margin-left: 20rpx;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
border-radius: 25rpx;
|
border-radius: 25rpx;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 20rpx 20rpx 20rpx 0rpx;
|
padding: 20rpx 0rpx 20rpx 0rpx;
|
||||||
.cart_selected{
|
.cart_selected{
|
||||||
width: 50rpx;
|
width: 50rpx;
|
||||||
height: 180rpx;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -103,7 +99,8 @@ page{
|
|||||||
width: 180rpx;
|
width: 180rpx;
|
||||||
height: 180rpx;
|
height: 180rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 20rpx;
|
border-radius: 10rpx;
|
||||||
|
// border: 1rpx solid #F3F3F3;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.cart_shop_img{
|
.cart_shop_img{
|
||||||
width: 180rpx;
|
width: 180rpx;
|
||||||
@ -114,7 +111,7 @@ page{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.cart_shop_cont{
|
.cart_shop_cont{
|
||||||
width: 415rpx;
|
width: 410rpx;
|
||||||
.cart_title{
|
.cart_title{
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
@ -125,76 +122,251 @@ page{
|
|||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #FF2D41;
|
color: #FF2D41;
|
||||||
}
|
}
|
||||||
.cart_bottom{
|
|
||||||
margin-top: 10rpx;
|
}
|
||||||
display: flex;
|
.cart_scroll{
|
||||||
align-items: center;
|
width: 620rpx;
|
||||||
justify-content: space-between;
|
display: flex;
|
||||||
.cart_price{
|
overflow: hidden;
|
||||||
font-size: 34rpx;
|
white-space: nowrap;
|
||||||
color: #fe4301;
|
.cart_scroll_ul{
|
||||||
font-weight: 500;
|
.cart_scroll_li{
|
||||||
}
|
width: 180rpx;
|
||||||
.cart_counter{
|
display: inline-block;
|
||||||
display: flex;
|
margin-right: 20rpx;
|
||||||
align-items: center;
|
.cart_scroll_img{
|
||||||
.cart_counter_btn{
|
background: #FFFFFF;
|
||||||
width: 70rpx;
|
border-radius: 4rpx;
|
||||||
height: 48rpx;
|
border: 1rpx solid #F3F3F3;
|
||||||
display: flex;
|
width: 180rpx;
|
||||||
align-items: center;
|
height: 180rpx;
|
||||||
justify-content: center;
|
overflow: hidden;
|
||||||
border-top: 1px solid #E9E9E9;
|
.cart_scroll_img_url{
|
||||||
border-bottom: 1px solid #E9E9E9;
|
width: 180rpx;
|
||||||
.cart_counter_btn_img{
|
height: 180rpx;
|
||||||
width: 25rpx;
|
|
||||||
height: 25rpx;
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.cart_counter_center{
|
.cart_scroll_title{
|
||||||
width: 70rpx;
|
|
||||||
height: 48rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
color: #333333;
|
||||||
display: flex;
|
font-size: 26rpx;
|
||||||
align-items: center;
|
font-weight: 500;
|
||||||
justify-content: center;
|
white-space: break-spaces;
|
||||||
border:1px solid #E9E9E9;
|
text-overflow: ellipsis;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
margin-top: 20rpx;
|
||||||
}
|
}
|
||||||
.border_l{
|
.cart_scroll_price{
|
||||||
border-left: 1px solid #E9E9E9;
|
font-size: 34rpx;
|
||||||
border-top-left-radius: 50rpx;
|
color: #FF0000;
|
||||||
border-bottom-left-radius: 50rpx;
|
font-weight: 500;
|
||||||
|
margin-top: 20rpx;
|
||||||
}
|
}
|
||||||
.border_r{
|
.cart_scroll_market_name{
|
||||||
border-right: 1px solid #E9E9E9;
|
color: #999999;
|
||||||
border-top-right-radius: 50rpx;
|
font-size: 28rpx;
|
||||||
border-bottom-right-radius: 50rpx;
|
text-decoration: line-through;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.cart_items{
|
||||||
|
margin: 0rpx 20rpx 20rpx 20rpx;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||||
|
padding: 20rpx 0rpx 20rpx 0rpx;
|
||||||
|
.cart_t{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
.cart_selected{
|
||||||
|
width: 50rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
.cart_selected_false{
|
||||||
|
width: 35rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2rpx solid #bfbfbf;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cart_scroll{
|
||||||
|
width: 620rpx;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
.cart_scroll_ul{
|
||||||
|
.cart_scroll_li{
|
||||||
|
width: 180rpx;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
.cart_scroll_img{
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
border: 1rpx solid #F3F3F3;
|
||||||
|
width: 180rpx;
|
||||||
|
height: 180rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
.cart_scroll_img_url{
|
||||||
|
width: 180rpx;
|
||||||
|
height: 180rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cart_scroll_title{
|
||||||
|
color: #333333;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: break-spaces;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
.cart_scroll_price{
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #FF0000;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
.cart_scroll_market_name{
|
||||||
|
color: #999999;
|
||||||
|
font-size: 28rpx;
|
||||||
|
text-decoration: line-through;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cart_lose{
|
||||||
|
margin: 0rpx 20rpx 20rpx 20rpx;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||||
|
.cart_lose_top{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1rpx solid #f6f6f6;
|
||||||
|
.cart_lose_top_l{
|
||||||
|
color: #000000;
|
||||||
|
font-size: 28rpx;
|
||||||
|
padding:25rpx 20rpx 25rpx 20rpx;
|
||||||
|
}
|
||||||
|
.cart_lose_top_r{
|
||||||
|
color: #E60703;
|
||||||
|
font-size: 28rpx;
|
||||||
|
padding:25rpx 20rpx 25rpx 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cart_lose_bottom{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 20rpx 0rpx 20rpx;
|
||||||
|
.cart_lose_img{
|
||||||
|
width: 180rpx;
|
||||||
|
height: 180rpx;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
.cart_lose_bcg{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
.cart_lose_text{
|
||||||
|
width: 130rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
background: rgba(0,0,0,0.6);
|
||||||
|
font-size: 23rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cart_lose_img_url{
|
||||||
|
width: 180rpx;
|
||||||
|
height: 180rpx;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cart_lose_ly{
|
||||||
|
margin-left: 20rpx;
|
||||||
|
.cart_lose_title{
|
||||||
|
color: #333;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.cart_lose_desc{
|
||||||
|
color: #6CA1D2;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.user_title{
|
.user_title{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: 80rpx;
|
margin-top: 60rpx;
|
||||||
.user_img{
|
|
||||||
width: 28rpx;
|
|
||||||
height: 28rpx;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.user_name{
|
.user_name{
|
||||||
color: #FF0000;
|
color: #FF0000;
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin: 0 10rpx 0 10rpx;
|
margin: 0 10rpx 0 10rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.user_title::before{
|
||||||
|
content: "";
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-image: url('../../static/user/leftimg.png');
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
.user_title::after{
|
||||||
|
vertical-align: middle;
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-image: url('../../static/user/rightimg.png');
|
||||||
|
background-size: cover;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
// 商品区域样式
|
// 商品区域样式
|
||||||
.shop_view{
|
.shop_view{
|
||||||
margin-top: 48rpx;
|
margin-top: 48rpx;
|
||||||
@ -290,7 +462,7 @@ page{
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.shop_view_cont_price{
|
.shop_view_cont_price{
|
||||||
font-size: 34rpx;
|
font-size: 32rpx;
|
||||||
color: red;
|
color: red;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@ -363,7 +535,7 @@ page{
|
|||||||
margin-right: 15rpx;
|
margin-right: 15rpx;
|
||||||
}
|
}
|
||||||
.footer_price{
|
.footer_price{
|
||||||
font-size: 46rpx;
|
font-size: 43rpx;
|
||||||
color: #FF0000;
|
color: #FF0000;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@ -377,9 +549,8 @@ page{
|
|||||||
}
|
}
|
||||||
.footer_btn{
|
.footer_btn{
|
||||||
margin-left: 20rpx;
|
margin-left: 20rpx;
|
||||||
font-size: 32rpx;
|
font-size: 30rpx;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
font-weight: 500;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -407,9 +578,60 @@ page{
|
|||||||
}
|
}
|
||||||
.market_name{
|
.market_name{
|
||||||
color: #999999;
|
color: #999999;
|
||||||
font-size: 24rpx;
|
font-size: 23rpx;
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
margin-left: 5rpx;
|
margin-left: 5rpx;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
.cart_bottom{
|
||||||
|
margin-top: 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.cart_price{
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #fe4301;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.cart_counter{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
.cart_counter_btn{
|
||||||
|
width: 55rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-top: 1px solid #E9E9E9;
|
||||||
|
border-bottom: 1px solid #E9E9E9;
|
||||||
|
.cart_counter_btn_img{
|
||||||
|
width: 25rpx;
|
||||||
|
height: 25rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cart_counter_center{
|
||||||
|
width: 60rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border:1px solid #E9E9E9;
|
||||||
|
}
|
||||||
|
.border_l{
|
||||||
|
border-left: 1px solid #E9E9E9;
|
||||||
|
border-top-left-radius: 50rpx;
|
||||||
|
border-bottom-left-radius: 50rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
.border_r{
|
||||||
|
border-right: 1px solid #E9E9E9;
|
||||||
|
border-top-right-radius: 50rpx;
|
||||||
|
border-bottom-right-radius: 50rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -59,7 +59,7 @@
|
|||||||
<!-- 商品区域 -->
|
<!-- 商品区域 -->
|
||||||
<view class="shop_view" :style="{'padding-top':92+headerHeight+'px'}">
|
<view class="shop_view" :style="{'padding-top':92+headerHeight+'px'}">
|
||||||
<view class="shop_view_ul">
|
<view class="shop_view_ul">
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -81,7 +81,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -103,7 +103,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -128,7 +128,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="shop_view_ul">
|
<view class="shop_view_ul">
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -150,7 +150,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -189,7 +189,11 @@ const counterStore = useCounterStore(); // 使用 Store
|
|||||||
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
|
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
|
||||||
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
|
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
|
||||||
const ScrollLeft = ref(0);
|
const ScrollLeft = ref(0);
|
||||||
|
const goDetail= ()=>{
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/shopProDetail/detail/detail`
|
||||||
|
})
|
||||||
|
}
|
||||||
//使用 uni.onLoad 监听页面加载
|
//使用 uni.onLoad 监听页面加载
|
||||||
onLoad((options) => {
|
onLoad((options) => {
|
||||||
|
|
||||||
|
|||||||
@ -41,7 +41,6 @@ page{
|
|||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
position: relative;
|
position: relative;
|
||||||
.head_class_scroll{
|
.head_class_scroll{
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
@ -203,7 +202,7 @@ page{
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.shop_view_cont_price{
|
.shop_view_cont_price{
|
||||||
font-size: 34rpx;
|
font-size: 32rpx;
|
||||||
color: red;
|
color: red;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@ -239,7 +238,7 @@ page{
|
|||||||
}
|
}
|
||||||
.market_name{
|
.market_name{
|
||||||
color: #999999;
|
color: #999999;
|
||||||
font-size: 24rpx;
|
font-size: 23rpx;
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
margin-left: 5rpx;
|
margin-left: 5rpx;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|||||||
@ -23,14 +23,14 @@
|
|||||||
<view class="grid_wrap_r">
|
<view class="grid_wrap_r">
|
||||||
<view class="grid_wrap_li">
|
<view class="grid_wrap_li">
|
||||||
<view class="grid_wrap_li_l">
|
<view class="grid_wrap_li_l">
|
||||||
<view class="grid_wrap_li_title">AI学做菜<image class="grid_wrap_li_arrow" src="../../static/index/arrow.png" mode="widthFix"></image></view>
|
<view class="grid_wrap_li_title"><text>学做菜</text></view>
|
||||||
<view class="grid_wrap_li_desc">简单又快捷</view>
|
<view class="grid_wrap_li_desc">简单又快捷</view>
|
||||||
</view>
|
</view>
|
||||||
<image class="grid_wrap_li_r" src="../../static/index/AI.png" mode="widthFix"></image>
|
<image class="grid_wrap_li_r" src="../../static/index/AI.png" mode="widthFix"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="grid_wrap_li grid_wrap_top">
|
<view class="grid_wrap_li grid_wrap_top">
|
||||||
<view class="grid_wrap_li_l">
|
<view class="grid_wrap_li_l">
|
||||||
<view class="grid_wrap_li_title">极速退款<image class="grid_wrap_li_arrow" src="../../static/index/arrow.png" mode="widthFix"></image></view>
|
<view class="grid_wrap_li_title"><text>极速退款</text></view>
|
||||||
<view class="grid_wrap_li_desc">食材有问题？</view>
|
<view class="grid_wrap_li_desc">食材有问题？</view>
|
||||||
</view>
|
</view>
|
||||||
<image class="grid_wrap_li_r" src="../../static/index/refund_img.png" mode="widthFix"></image>
|
<image class="grid_wrap_li_r" src="../../static/index/refund_img.png" mode="widthFix"></image>
|
||||||
@ -44,7 +44,7 @@
|
|||||||
<view class="scroll_view_banner">
|
<view class="scroll_view_banner">
|
||||||
<image class="scroll_view_bannerimg" src="../../static/Intersect@2x.png" mode="widthFix"></image>
|
<image class="scroll_view_bannerimg" src="../../static/Intersect@2x.png" mode="widthFix"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="scroll_view_shop">
|
<view class="scroll_view_shop" @click="goDetail()">
|
||||||
<view class="scroll_view_shop_l">
|
<view class="scroll_view_shop_l">
|
||||||
<image class="scroll_view_shop_no" src="../../static/index/no1.png"></image>
|
<image class="scroll_view_shop_no" src="../../static/index/no1.png"></image>
|
||||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||||||
@ -64,7 +64,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="scroll_view_shop">
|
<view class="scroll_view_shop" @click="goDetail()">
|
||||||
<view class="scroll_view_shop_l">
|
<view class="scroll_view_shop_l">
|
||||||
<image class="scroll_view_shop_no" src="../../static/index/no2.png"></image>
|
<image class="scroll_view_shop_no" src="../../static/index/no2.png"></image>
|
||||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||||||
@ -83,7 +83,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="scroll_view_shop">
|
<view class="scroll_view_shop" @click="goDetail()">
|
||||||
<view class="scroll_view_shop_l">
|
<view class="scroll_view_shop_l">
|
||||||
<image class="scroll_view_shop_no" src="../../static/index/no3.png"></image>
|
<image class="scroll_view_shop_no" src="../../static/index/no3.png"></image>
|
||||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||||||
@ -107,7 +107,7 @@
|
|||||||
<view class="scroll_view_banner">
|
<view class="scroll_view_banner">
|
||||||
<image class="scroll_view_bannerimg" src="../../static/image@2x.png" mode="widthFix"></image>
|
<image class="scroll_view_bannerimg" src="../../static/image@2x.png" mode="widthFix"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="scroll_view_shop">
|
<view class="scroll_view_shop" @click="goDetail()">
|
||||||
<view class="scroll_view_shop_l">
|
<view class="scroll_view_shop_l">
|
||||||
<image class="scroll_view_shop_no" src="../../static/index/no1.png"></image>
|
<image class="scroll_view_shop_no" src="../../static/index/no1.png"></image>
|
||||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||||||
@ -126,7 +126,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="scroll_view_shop">
|
<view class="scroll_view_shop" @click="goDetail()">
|
||||||
<view class="scroll_view_shop_l">
|
<view class="scroll_view_shop_l">
|
||||||
<image class="scroll_view_shop_no" src="../../static/index/no2.png"></image>
|
<image class="scroll_view_shop_no" src="../../static/index/no2.png"></image>
|
||||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||||||
@ -145,7 +145,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="scroll_view_shop">
|
<view class="scroll_view_shop" @click="goDetail()">
|
||||||
<view class="scroll_view_shop_l">
|
<view class="scroll_view_shop_l">
|
||||||
<image class="scroll_view_shop_no" src="../../static/index/no3.png"></image>
|
<image class="scroll_view_shop_no" src="../../static/index/no3.png"></image>
|
||||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||||||
@ -173,17 +173,17 @@
|
|||||||
<view class="shop_view_li shop_view_bcg">
|
<view class="shop_view_li shop_view_bcg">
|
||||||
<swiper class="shop_view_li_swiper" indicator-dots interval="3000" autoplay indicator-active-color="#FFFFFF" indicator-color="rgba(246, 246, 246, .6)" circular>
|
<swiper class="shop_view_li_swiper" indicator-dots interval="3000" autoplay indicator-active-color="#FFFFFF" indicator-color="rgba(246, 246, 246, .6)" circular>
|
||||||
<swiper-item class="shop_view_li_swiper_item" >
|
<swiper-item class="shop_view_li_swiper_item" >
|
||||||
<image class="shop_view_li_swiper_img_url" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250107-c8e67d36b17249b4822df152fd5ae546.png" mode="widthFix" @load="imageLoad"></image>
|
<image class="shop_view_li_swiper_img_url" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250107-c8e67d36b17249b4822df152fd5ae546.png" mode="widthFix" @load="imageLoad" @click="goDetail()"></image>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
<swiper-item class="shop_view_li_swiper_item" >
|
<swiper-item class="shop_view_li_swiper_item" >
|
||||||
<image class="shop_view_li_swiper_img_url" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250107-c8e67d36b17249b4822df152fd5ae546.png" mode="widthFix" @load="imageLoad"></image>
|
<image class="shop_view_li_swiper_img_url" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250107-c8e67d36b17249b4822df152fd5ae546.png" mode="widthFix" @load="imageLoad" @click="goDetail()"></image>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
<swiper-item class="shop_view_li_swiper_item" >
|
<swiper-item class="shop_view_li_swiper_item" >
|
||||||
<image class="shop_view_li_swiper_img_url" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250107-c8e67d36b17249b4822df152fd5ae546.png" mode="widthFix" @load="imageLoad"></image>
|
<image class="shop_view_li_swiper_img_url" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250107-c8e67d36b17249b4822df152fd5ae546.png" mode="widthFix" @load="imageLoad" @click="goDetail()"></image>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
</view>
|
</view>
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -205,7 +205,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -230,7 +230,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="shop_view_ul">
|
<view class="shop_view_ul">
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -252,7 +252,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -307,7 +307,11 @@ const counterStore = useCounterStore(); // 使用 Store
|
|||||||
const { clickSType } = counterStore;
|
const { clickSType } = counterStore;
|
||||||
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
|
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
|
||||||
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
|
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
|
||||||
|
const goDetail= ()=>{
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/shopProDetail/detail/detail`
|
||||||
|
})
|
||||||
|
}
|
||||||
const classify = ()=>{
|
const classify = ()=>{
|
||||||
let params ={
|
let params ={
|
||||||
productImgUrl: "http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20240611-c7e219dab5864847bee8c3f0cffbb658.jpg"
|
productImgUrl: "http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20240611-c7e219dab5864847bee8c3f0cffbb658.jpg"
|
||||||
@ -323,8 +327,6 @@ const classify = ()=>{
|
|||||||
showCancel: false
|
showCancel: false
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
onLoad((options) => {
|
onLoad((options) => {
|
||||||
|
|
||||||
|
|||||||
@ -134,11 +134,20 @@ page{
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.grid_wrap_li_arrow{
|
}
|
||||||
width: 24rpx;
|
.grid_wrap_li_title text{
|
||||||
height: 24rpx;
|
vertical-align: middle;
|
||||||
margin-left: 10rpx;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
.grid_wrap_li_title::after{
|
||||||
|
vertical-align: middle;
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
background-image: url('../../static/index/arrow.png');
|
||||||
|
background-size: cover;
|
||||||
}
|
}
|
||||||
.grid_wrap_li_desc{
|
.grid_wrap_li_desc{
|
||||||
color: #999999;
|
color: #999999;
|
||||||
@ -241,7 +250,7 @@ page{
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-top: 12rpx;
|
margin-top: 12rpx;
|
||||||
.scroll_view_shop_price{
|
.scroll_view_shop_price{
|
||||||
font-size: 34rpx;
|
font-size: 32rpx;
|
||||||
color: #FF0000;
|
color: #FF0000;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
@ -357,7 +366,7 @@ page{
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.shop_view_cont_price{
|
.shop_view_cont_price{
|
||||||
font-size: 34rpx;
|
font-size: 32rpx;
|
||||||
color: red;
|
color: red;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@ -430,7 +439,7 @@ page{
|
|||||||
.footer_cont_m{
|
.footer_cont_m{
|
||||||
margin-left: 25rpx;
|
margin-left: 25rpx;
|
||||||
.footer_cont_m_price{
|
.footer_cont_m_price{
|
||||||
font-size: 46rpx;
|
font-size: 43rpx;
|
||||||
color: #FF0000;
|
color: #FF0000;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@ -453,7 +462,7 @@ page{
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 32rpx;
|
font-size: 30rpx;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -474,7 +483,7 @@ page{
|
|||||||
}
|
}
|
||||||
.market_name{
|
.market_name{
|
||||||
color: #999999;
|
color: #999999;
|
||||||
font-size: 24rpx;
|
font-size: 23rpx;
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
margin-left: 5rpx;
|
margin-left: 5rpx;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|||||||
@ -1,6 +1,108 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -10,9 +112,14 @@ import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
|||||||
import { storeToRefs } from 'pinia';//实现解构付值
|
import { storeToRefs } from 'pinia';//实现解构付值
|
||||||
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
|
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
|
||||||
const counterStore = useCounterStore(); // 使用 Store
|
const counterStore = useCounterStore(); // 使用 Store
|
||||||
|
const ScrollLeft = ref(0);
|
||||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||||
// const { count,doubleCount } = storeToRefs(counterStore);
|
// const { count,doubleCount } = storeToRefs(counterStore);
|
||||||
|
const goDetail= ()=>{
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/shopProDetail/detail/detail`
|
||||||
|
})
|
||||||
|
}
|
||||||
onLoad((options) => {
|
onLoad((options) => {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|||||||
@ -0,0 +1,200 @@
|
|||||||
|
page{
|
||||||
|
background-color: #151517;
|
||||||
|
}
|
||||||
|
.mian{
|
||||||
|
.banner{
|
||||||
|
width: 100%;
|
||||||
|
height: 455rpx;
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
.class_content{
|
||||||
|
background-color: #393333;
|
||||||
|
border-top-left-radius: 30rpx;
|
||||||
|
border-top-right-radius: 30rpx;
|
||||||
|
.class_scroll{
|
||||||
|
white-space: nowrap;
|
||||||
|
height: 90rpx;
|
||||||
|
position: relative;
|
||||||
|
background-color: #393333;
|
||||||
|
border-top-left-radius: 30rpx;
|
||||||
|
border-top-right-radius: 30rpx;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 999;
|
||||||
|
.class_scroll_ul{
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 90rpx;
|
||||||
|
.class_item{
|
||||||
|
padding: 0rpx 20rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 60rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
}
|
||||||
|
.class_item_active{
|
||||||
|
background-color: #725D48;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
padding: 0rpx 45rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
color: #FEF6D8;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
background-color: #725D48;
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-top-left-radius: 30rpx;
|
||||||
|
border-top-right-radius: 30rpx;
|
||||||
|
.content_item{
|
||||||
|
margin: 20rpx 20rpx 0rpx 20rpx;
|
||||||
|
height: 430rpx;
|
||||||
|
background: linear-gradient( 180deg, #FEF2E2 0%, #FFFFFF 20%, #FFFFFF 50%, #FFFFFF 90%, #FDF2E0 100%);
|
||||||
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
.content_head{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx;
|
||||||
|
.content_head_l{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.content_head_img{
|
||||||
|
width: 38rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
display: block;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
.content_head_title{
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content_head_btn{
|
||||||
|
width: 119rpx;
|
||||||
|
height: 42rpx;
|
||||||
|
.content_head_btnimg{
|
||||||
|
width: 119rpx;
|
||||||
|
height: 42rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content_shop{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
.content_shop_ul{
|
||||||
|
.content_shop_item{
|
||||||
|
width: 200rpx;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
.content_shop_item_img{
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
.content_shop_item_tag{
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.content_shop_item_tagImg{
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: url(../../static/sidedish/no4.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 44rpx;
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.content_shop_item_imgUrl{
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content_shop_item_title{
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #000000;
|
||||||
|
min-height: 45rpx;
|
||||||
|
white-space: break-spaces;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
.content_shop_item_bottom{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
.content_shop_item_l{
|
||||||
|
.content_shop_item_price{
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #FF0000;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 38rpx;
|
||||||
|
}
|
||||||
|
.content_shop_market{
|
||||||
|
font-size: 23rpx;
|
||||||
|
color: #999999;
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content_shop_item_cart{
|
||||||
|
width: 65rpx;
|
||||||
|
height: 65rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: flex-end;
|
||||||
|
.content_shop_item_cart_img{
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.price::before {
|
||||||
|
content: '¥';
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin-right: 5rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.prices::before {
|
||||||
|
content: '¥';
|
||||||
|
font-size: 20rpx;
|
||||||
|
margin-right: 5rpx;
|
||||||
|
margin-left: 5rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -31,6 +31,7 @@ page{
|
|||||||
.head_user_message_name{
|
.head_user_message_name{
|
||||||
color: #333333;
|
color: #333333;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.head_user_message_desc{
|
.head_user_message_desc{
|
||||||
color: #666666;
|
color: #666666;
|
||||||
@ -151,19 +152,36 @@ page{
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: 80rpx;
|
margin-top: 60rpx;
|
||||||
.user_img{
|
|
||||||
width: 28rpx;
|
|
||||||
height: 28rpx;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.user_name{
|
.user_name{
|
||||||
color: #FF0000;
|
color: #FF0000;
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin: 0 10rpx 0 10rpx;
|
margin: 0 10rpx 0 10rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.user_title::before{
|
||||||
|
content: "";
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-image: url('../../static/user/leftimg.png');
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
.user_title::after{
|
||||||
|
vertical-align: middle;
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-image: url('../../static/user/rightimg.png');
|
||||||
|
background-size: cover;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
// 商品区域样式
|
// 商品区域样式
|
||||||
.shop_view{
|
.shop_view{
|
||||||
margin-top: 48rpx;
|
margin-top: 48rpx;
|
||||||
@ -259,7 +277,7 @@ page{
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.shop_view_cont_price{
|
.shop_view_cont_price{
|
||||||
font-size: 34rpx;
|
font-size: 32rpx;
|
||||||
color: red;
|
color: red;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@ -295,7 +313,7 @@ page{
|
|||||||
}
|
}
|
||||||
.market_name{
|
.market_name{
|
||||||
color: #999999;
|
color: #999999;
|
||||||
font-size: 24rpx;
|
font-size: 23rpx;
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
margin-left: 5rpx;
|
margin-left: 5rpx;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|||||||
@ -50,15 +50,13 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="user_title">
|
<view class="user_title">
|
||||||
<image class="user_img" src="../../static/user/leftimg.png"></image>
|
<text class="user_name">为您推荐</text>
|
||||||
<view class="user_name">为您推荐</view>
|
|
||||||
<image class="user_img" src="../../static/user/rightimg.png"></image>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 商品区域 -->
|
<!-- 商品区域 -->
|
||||||
<view class="shop_view">
|
<view class="shop_view">
|
||||||
<view class="shop_view_ul">
|
<view class="shop_view_ul">
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -80,7 +78,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -102,7 +100,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -127,7 +125,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="shop_view_ul">
|
<view class="shop_view_ul">
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -149,7 +147,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="shop_view_li">
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
<view class="shop_view_img">
|
<view class="shop_view_img">
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view>
|
<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view>
|
||||||
<view class="shop_view_img_u">
|
<view class="shop_view_img_u">
|
||||||
@ -239,6 +237,11 @@ const contList = ref([
|
|||||||
name:'地址管理'
|
name:'地址管理'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
const goDetail= ()=>{
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/shopProDetail/detail/detail`
|
||||||
|
})
|
||||||
|
}
|
||||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||||
//const { count,doubleCount } = storeToRefs(counterStore);
|
//const { count,doubleCount } = storeToRefs(counterStore);
|
||||||
|
|
||||||
|
|||||||
274
shopProDetail/detail/detail.vue
Normal file
274
shopProDetail/detail/detail.vue
Normal file
@ -0,0 +1,274 @@
|
|||||||
|
<template>
|
||||||
|
<view class="mian">
|
||||||
|
<view id="top-layout">
|
||||||
|
<!-- 轮播图区域 -->
|
||||||
|
<view class="shop_swiper" :style="{'height':swiperHeight+'rpx'}" >
|
||||||
|
<swiper class="shop_swiper_wrap" interval="3000" :current="currentIndex" circular @change="onSwiperChange" :style="{'height':swiperHeight+'rpx'}">
|
||||||
|
<swiper-item class="shop_swiper_marquees" v-if="imglist.length" v-for="(item,index) in imglist" :key="index">
|
||||||
|
<view class="shop_swiper_img">
|
||||||
|
<image class="shop_swiper_imgUrl" :src="item" @load="onImageLoad" @click="previewImage(index)"></image>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<view class="currentNumber">
|
||||||
|
<view class="item_currentNumber item_currentNumber_width" v-if="imglist.length"><text>{{currentIndex+1}}/{{imglist.length}}</text></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 价格标题区域 -->
|
||||||
|
<view class="shop_head">
|
||||||
|
<view class="shop_price price">49.9<text class="market_name prices">79.9</text></view>
|
||||||
|
<view class="shop_title">新鲜黄牛牛肉200g+9g/份</view>
|
||||||
|
<view class="shop_desc">外红里黑属于牛肉内部缺氧导致，切开氧化静置会逐步 氧化发红，不影响食用</view>
|
||||||
|
</view>
|
||||||
|
<!-- 评论区域 -->
|
||||||
|
<view class="shop_comment">
|
||||||
|
<view class="shop_comment_head">
|
||||||
|
<view class="shop_comment_head_title">商品评论(1万+)</view>
|
||||||
|
<view class="shop_comment_head_arrow">全部</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_comment_tag">
|
||||||
|
<view class="shop_comment_item">很好吃33</view>
|
||||||
|
<view class="shop_comment_item">肉新鲜21</view>
|
||||||
|
<view class="shop_comment_item">继续回购9</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_comment_cont">
|
||||||
|
<view class="shop_comment_cont_ul">
|
||||||
|
<view class="shop_comment_cont_l"><image class="shop_comment_cont_userimg" src="" mode="widthFix"></image><view class="shop_comment_cont_username">蓝**v</view><view class="shop_comment_cont_amount">买过3次</view></view>
|
||||||
|
<view class="shop_comment_cont_ip">2025-02-25 来自上海</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_comment_m">
|
||||||
|
<view class="shop_comment_title"><text>速度很快，品质保证，一如既往的支持！就不一一评价了，赞👍👍</text></view>
|
||||||
|
<view class="shop_comment_item">
|
||||||
|
<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
|
||||||
|
<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
|
||||||
|
<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
|
||||||
|
<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 评论区域 -->
|
||||||
|
<view class="shop_comment">
|
||||||
|
<view class="shop_comment_head">
|
||||||
|
<view class="shop_comment_head_title">常见问题(2)</view>
|
||||||
|
<view class="shop_comment_head_arrow">全部</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_ask shop_padding"><text>有的虾头发黑是为什么?</text></view>
|
||||||
|
<view class="shop_ask shop_padding"><text>如何判定虾是否新鲜?</text></view>
|
||||||
|
<!-- <view class="shop_answer shop_padding">这里填写回答</view> -->
|
||||||
|
</view>
|
||||||
|
<!-- 图文详情 -->
|
||||||
|
<view class="shop_detail">
|
||||||
|
<view class="shop_detail_title">图文详情</view>
|
||||||
|
<view class="shop_detail_img">
|
||||||
|
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20241105-b286a4cf0d1148158e166b858112125a.jpg" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 推荐区域 -->
|
||||||
|
<view class="user_title">
|
||||||
|
<text class="user_name">为您推荐</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 商品区域 -->
|
||||||
|
<view class="shop_view">
|
||||||
|
<view class="shop_view_ul">
|
||||||
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
|
<view class="shop_view_img">
|
||||||
|
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
||||||
|
<view class="shop_view_img_u">
|
||||||
|
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_cont">
|
||||||
|
<view class="shop_view_cont_title">糖醋排骨</view>
|
||||||
|
<view class="shop_view_cont_desc">乡下土猪</view>
|
||||||
|
<view class="shop_view_cont_tag">
|
||||||
|
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
||||||
|
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_cont_bottom">
|
||||||
|
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||||
|
<view class="shop_view_cont_cart">
|
||||||
|
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
|
<view class="shop_view_img">
|
||||||
|
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
||||||
|
<view class="shop_view_img_u">
|
||||||
|
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_cont">
|
||||||
|
<view class="shop_view_cont_title">糖醋排骨</view>
|
||||||
|
<view class="shop_view_cont_desc">乡下土猪</view>
|
||||||
|
<view class="shop_view_cont_tag">
|
||||||
|
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
||||||
|
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_cont_bottom">
|
||||||
|
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||||
|
<view class="shop_view_cont_cart">
|
||||||
|
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
|
<view class="shop_view_img">
|
||||||
|
<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
|
||||||
|
<view class="shop_view_img_u">
|
||||||
|
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_cont">
|
||||||
|
<view class="shop_view_cont_title">泡椒田鸡</view>
|
||||||
|
<view class="shop_view_cont_desc">超大只田鸡</view>
|
||||||
|
<view class="shop_view_cont_tag">
|
||||||
|
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
||||||
|
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
||||||
|
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_cont_bottom">
|
||||||
|
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||||
|
<view class="shop_view_cont_cart">
|
||||||
|
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_ul">
|
||||||
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
|
<view class="shop_view_img">
|
||||||
|
<view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view>
|
||||||
|
<view class="shop_view_img_u">
|
||||||
|
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_cont">
|
||||||
|
<view class="shop_view_cont_title">泡椒田鸡</view>
|
||||||
|
<view class="shop_view_cont_desc">超大只田鸡</view>
|
||||||
|
<view class="shop_view_cont_tag">
|
||||||
|
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
||||||
|
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_cont_bottom">
|
||||||
|
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||||
|
<view class="shop_view_cont_cart">
|
||||||
|
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_li" @click="goDetail()">
|
||||||
|
<view class="shop_view_img">
|
||||||
|
<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view>
|
||||||
|
<view class="shop_view_img_u">
|
||||||
|
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_cont">
|
||||||
|
<view class="shop_view_cont_title">泡椒田鸡</view>
|
||||||
|
<view class="shop_view_cont_desc">超大只田鸡</view>
|
||||||
|
<view class="shop_view_cont_tag">
|
||||||
|
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
||||||
|
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_cont_bottom">
|
||||||
|
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||||
|
<view class="shop_view_cont_cart">
|
||||||
|
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view style="height: 200rpx;"></view>
|
||||||
|
<!-- 底部 -->
|
||||||
|
<view class="footer">
|
||||||
|
<view class="footer_cont">
|
||||||
|
<view class="footer_l">
|
||||||
|
<view class="footer_li">
|
||||||
|
<view class="footer_icon">
|
||||||
|
<image class="footer_icon_img" src="../../static/shopdetail/collect.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="footer_name">收藏</view>
|
||||||
|
</view>
|
||||||
|
<view class="footer_li" @click="goCart()">
|
||||||
|
<view class="footer_icon">
|
||||||
|
<view class="footer_amount">45</view>
|
||||||
|
<image class="footer_icon_img" src="../../static/shopdetail/cart.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="footer_name">购物车</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="footer_r">
|
||||||
|
<view class="footer_btn border_l">加入购物车</view>
|
||||||
|
<view class="footer_btn footer_btn_bcg border_r">立即下单</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 imglist = ref([
|
||||||
|
"http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg",
|
||||||
|
"http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-ebe6955a5db9476e9a525042eaba3d0e.jpg",
|
||||||
|
"http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-ac78893d51e54074bb7b27227873907a.jpg"
|
||||||
|
])
|
||||||
|
const swiperHeight = ref(200);
|
||||||
|
const imgheights = ref([])
|
||||||
|
const currentIndex = ref(0)
|
||||||
|
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||||
|
// const { count,doubleCount } = storeToRefs(counterStore);
|
||||||
|
|
||||||
|
//获取图片真实宽度
|
||||||
|
const onImageLoad = (event) => {
|
||||||
|
const { width, height } = event.detail;
|
||||||
|
const imageHeight = 750 / (height / width);
|
||||||
|
swiperHeight.value = imageHeight;
|
||||||
|
};
|
||||||
|
const onSwiperChange=(event)=>{
|
||||||
|
currentIndex.value = event.detail.current;
|
||||||
|
};
|
||||||
|
const previewImage=(i)=>{
|
||||||
|
uni.previewImage({
|
||||||
|
current: i,
|
||||||
|
urls:imglist.value
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const goCart=()=>{
|
||||||
|
uni.switchTab({
|
||||||
|
url:`/pages/cart/cart`
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
onLoad((options) => {
|
||||||
|
|
||||||
|
});
|
||||||
|
onShow(() => {
|
||||||
|
|
||||||
|
});
|
||||||
|
onPullDownRefresh(()=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
onReachBottom(()=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import './style.scss';
|
||||||
|
</style>
|
||||||
522
shopProDetail/detail/style.scss
Normal file
522
shopProDetail/detail/style.scss
Normal file
@ -0,0 +1,522 @@
|
|||||||
|
page{
|
||||||
|
background: #f6f6f6;
|
||||||
|
}
|
||||||
|
.mian{
|
||||||
|
.shop_swiper{
|
||||||
|
width: 100%;
|
||||||
|
height: 750rpx;
|
||||||
|
position: relative;
|
||||||
|
.shop_swiper_wrap{
|
||||||
|
width: 100%;
|
||||||
|
height: 750rpx;
|
||||||
|
.shop_swiper_marquees{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.shop_swiper_img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.shop_swiper_video_list{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.shop_swiper_imgUrl{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.currentNumber{
|
||||||
|
padding: 5rpx 5rpx 5rpx 5rpx;
|
||||||
|
position: absolute;
|
||||||
|
left: 43.5%;
|
||||||
|
bottom: 20rpx;
|
||||||
|
background-color: rgba(81, 63, 55, 0.8);
|
||||||
|
border-radius: 50rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.item_currentNumber{
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #cdcac6;
|
||||||
|
padding: 3rpx 10rpx 3rpx 10rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.item_currentNumber_img{
|
||||||
|
width: 15rpx;
|
||||||
|
height: 15rpx;
|
||||||
|
display: block;
|
||||||
|
margin-right:5rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_currentNumber_hover{
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
color: #fefefe;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.item_currentNumber_width{
|
||||||
|
width: 73rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_head{
|
||||||
|
background: #FFFFFF;
|
||||||
|
margin: 20rpx 20rpx 0rpx 20rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||||
|
.shop_price{
|
||||||
|
font-size: 43rpx;
|
||||||
|
color: #FF0000;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.shop_title{
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
.shop_desc{
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_comment{
|
||||||
|
background: #FFFFFF;
|
||||||
|
margin: 20rpx 20rpx 0rpx 20rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||||
|
.shop_comment_head{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 40rpx 20rpx 20rpx;
|
||||||
|
.shop_comment_head_title{
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.shop_comment_head_arrow{
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.shop_comment_head_arrow::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 100%;
|
||||||
|
transform: translate3d(0, -50%, 0) rotate(45deg);
|
||||||
|
width: 13rpx;
|
||||||
|
height: 13rpx;
|
||||||
|
border-top: 3rpx solid #999999;
|
||||||
|
border-right: 3rpx solid #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_comment_tag{
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 0rpx 20rpx 0rpx 20rpx;
|
||||||
|
border-bottom: 1rpx solid #f6f6f6;
|
||||||
|
.shop_comment_item{
|
||||||
|
padding: 0rpx 20rpx 0rpx 20rpx;
|
||||||
|
height: 45rpx;
|
||||||
|
background: #FFD7D7;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
border: 1rpx solid #FFA0A0;
|
||||||
|
color: #FF5D5D;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 23rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_comment_cont{
|
||||||
|
padding: 0rpx 20rpx 0rpx 20rpx;
|
||||||
|
.shop_comment_cont_ul{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
.shop_comment_cont_l{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.shop_comment_cont_userimg{
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background-color: #000000;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.shop_comment_cont_username{
|
||||||
|
color: #000000;
|
||||||
|
font-size: 26rpx;
|
||||||
|
margin-left: 15rpx;
|
||||||
|
}
|
||||||
|
.shop_comment_cont_amount{
|
||||||
|
padding: 0 10rpx;
|
||||||
|
height: 34rpx;
|
||||||
|
background: #FFF4CD;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
border: 1rpx solid #F9D448;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #D0AA1B;
|
||||||
|
margin-left: 15rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_comment_cont_ip{
|
||||||
|
color: #999;
|
||||||
|
font-size: 23rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_comment_m{
|
||||||
|
overflow: hidden;
|
||||||
|
.shop_comment_title{
|
||||||
|
font-size: 27rpx;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.shop_comment_item{
|
||||||
|
margin: 20rpx 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content:space-between;
|
||||||
|
.shop_comment_itemImg{
|
||||||
|
width: 155rpx;
|
||||||
|
height: 155rpx;
|
||||||
|
background-color: #666666;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_ask{
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.shop_answer{
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
.shop_padding{
|
||||||
|
padding: 0rpx 20rpx 20rpx 20rpx;
|
||||||
|
}
|
||||||
|
.shop_padding text{
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.shop_ask::before {
|
||||||
|
vertical-align: middle;
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-image: url('../../static/shopdetail/ask.png');
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10rpx; /* 调整图片与标题的间距 */
|
||||||
|
}
|
||||||
|
.shop_answer::before {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-image: url('../../static/shopdetail/answer.png');
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10rpx; /* 调整图片与标题的间距 */
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_detail{
|
||||||
|
margin: 20rpx 20rpx 0rpx 20rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-top-left-radius: 16rpx;
|
||||||
|
border-top-right-radius: 16rpx;
|
||||||
|
.shop_detail_title{
|
||||||
|
color: #333333;
|
||||||
|
font-size: 30rpx;
|
||||||
|
padding: 25rpx 20rpx 25rpx 20rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.shop_detail_title::before{
|
||||||
|
content: "";
|
||||||
|
width: 10rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background: linear-gradient(180deg, #FF3135 0%, #f2f5f7 100%);
|
||||||
|
margin-right: 10rpx;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.shop_detail_img image{
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.user_title{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 60rpx;
|
||||||
|
.user_name{
|
||||||
|
color: #FF0000;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0 10rpx 0 10rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.user_title::before{
|
||||||
|
content: "";
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-image: url('../../static/user/leftimg.png');
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
.user_title::after{
|
||||||
|
vertical-align: middle;
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-image: url('../../static/user/rightimg.png');
|
||||||
|
background-size: cover;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
// 商品区域样式
|
||||||
|
.shop_view{
|
||||||
|
margin-top: 48rpx;
|
||||||
|
padding: 13rpx 20rpx 0rpx 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.shop_view_ul{
|
||||||
|
width: 346rpx;
|
||||||
|
.shop_view_li{
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
.shop_view_li_swiper{
|
||||||
|
width: 100%;
|
||||||
|
height: 504rpx;
|
||||||
|
.shop_view_li_swiper_item{
|
||||||
|
width: 100%;
|
||||||
|
.shop_view_li_swiper_img_url{
|
||||||
|
width: 100%;
|
||||||
|
height: 504rpx;
|
||||||
|
display: block;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_view_img{
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
height: 320rpx;
|
||||||
|
.shop_view_tag{
|
||||||
|
width: 66rpx;
|
||||||
|
height: 42rpx;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
right: -15rpx;
|
||||||
|
top: 20rpx;
|
||||||
|
background: url(../../static/tag_img.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.shop_view_tag_text{
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
height: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_view_img_u{
|
||||||
|
width: 300rpx;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
left: 20rpx;
|
||||||
|
top: 20rpx;
|
||||||
|
.shop_view_img_url{
|
||||||
|
width: 100%;
|
||||||
|
height: 300rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_view_cont{
|
||||||
|
padding: 20rpx;
|
||||||
|
.shop_view_cont_title{
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #000000;
|
||||||
|
min-height: 80rpx;
|
||||||
|
}
|
||||||
|
.shop_view_cont_desc{
|
||||||
|
color: #666666;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
.shop_view_cont_tag{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.shop_view_cont_tag_text{
|
||||||
|
border-radius: 6rpx;
|
||||||
|
border: 1rpx solid #FF6868;
|
||||||
|
padding: 0rpx 10rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
color: #ff6868;
|
||||||
|
font-size: 18rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_view_cont_bottom{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.shop_view_cont_price{
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: red;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.shop_view_cont_cart{
|
||||||
|
width: 65rpx;
|
||||||
|
height: 65rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
.shop_view_cont_cart_img{
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_view_bcg{
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer{
|
||||||
|
position: fixed;
|
||||||
|
z-index: 998;
|
||||||
|
left: 0;
|
||||||
|
transform: translate3d(0, -100%, 0);
|
||||||
|
width: 100%;
|
||||||
|
top: 100%;
|
||||||
|
background: #FFFFFF;
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
padding-top: 20rpx;
|
||||||
|
border-top: 1rpx solid #F2F2F2;
|
||||||
|
.footer_cont{
|
||||||
|
padding-right: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.footer_l{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.footer_li{
|
||||||
|
width: 90rpx;
|
||||||
|
.footer_icon{
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
position: relative;
|
||||||
|
.footer_amount{
|
||||||
|
position: absolute;
|
||||||
|
right: -10rpx;
|
||||||
|
top:-10rpx;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
background-color: #FF3135;
|
||||||
|
font-size: 18rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.footer_icon_img{
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer_name{
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #666666;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer_r{
|
||||||
|
width:75%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.footer_btn{
|
||||||
|
width: 50%;
|
||||||
|
height: 75rpx;
|
||||||
|
font-size: 27rpx;
|
||||||
|
color: #9b5c1f;
|
||||||
|
background-color: #fbe7cf;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.footer_btn_bcg{
|
||||||
|
color: #FFFFFF;
|
||||||
|
background-color: #FD3F3F;
|
||||||
|
}
|
||||||
|
.border_l{
|
||||||
|
border-radius: 50rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
// border-top-left-radius: 20rpx;
|
||||||
|
// border-bottom-left-radius: 20rpx;
|
||||||
|
}
|
||||||
|
.border_r{
|
||||||
|
border-radius: 50rpx;
|
||||||
|
// border-top-right-radius: 20rpx;
|
||||||
|
// border-bottom-right-radius: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.price::before {
|
||||||
|
content: '¥';
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin-right: 5rpx;
|
||||||
|
}
|
||||||
|
.prices::before {
|
||||||
|
content: '¥';
|
||||||
|
font-size: 20rpx;
|
||||||
|
margin-right: 5rpx;
|
||||||
|
margin-left: 5rpx;
|
||||||
|
}
|
||||||
|
.market_name{
|
||||||
|
color: #999999;
|
||||||
|
font-size: 23rpx;
|
||||||
|
text-decoration: line-through;
|
||||||
|
margin-left: 5rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
static/shopdetail/answer.png
Normal file
BIN
static/shopdetail/answer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 733 B |
BIN
static/shopdetail/ask.png
Normal file
BIN
static/shopdetail/ask.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 519 B |
BIN
static/shopdetail/cart.png
Normal file
BIN
static/shopdetail/cart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 890 B |
BIN
static/shopdetail/collect.png
Normal file
BIN
static/shopdetail/collect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 982 B |
BIN
static/sidedish/addCart.png
Normal file
BIN
static/sidedish/addCart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
static/sidedish/banner.jpg
Normal file
BIN
static/sidedish/banner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
static/sidedish/flame.png
Normal file
BIN
static/sidedish/flame.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
static/sidedish/no1.png
Normal file
BIN
static/sidedish/no1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
static/sidedish/no2.png
Normal file
BIN
static/sidedish/no2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
static/sidedish/no3.png
Normal file
BIN
static/sidedish/no3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
static/sidedish/no4.png
Normal file
BIN
static/sidedish/no4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Loading…
Reference in New Issue
Block a user