首页商品样式补充
This commit is contained in:
邝军华
parent
6741aa9656
commit
7ab37fcf4d
@ -13,7 +13,8 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "分类",
|
||||
"navigationBarBackgroundColor": "#f2f5f7",
|
||||
"enablePullDownRefresh": true
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -1,6 +1,177 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 分类页面 -->
|
||||
<view class="mian">
|
||||
<!-- 头部区域 -->
|
||||
<view class="head" :style="{'padding-top':headerHeight+3+'px'}">
|
||||
<view class="head_search">
|
||||
<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
|
||||
<input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
|
||||
</view>
|
||||
<view class="head_class">
|
||||
<scroll-view
|
||||
:enhanced="true"
|
||||
:show-scrollbar="false"
|
||||
scroll-x="true"
|
||||
:scroll-with-animation="true"
|
||||
:scroll-left="ScrollLeft"
|
||||
class="head_class_scroll">
|
||||
<view class="head_class_item head_class_item_active">
|
||||
<view class="head_class_title">为您推荐</view>
|
||||
<view class="head_class_active head_class_active_img"></view>
|
||||
</view>
|
||||
<view class="head_class_item">
|
||||
<view class="head_class_title">特惠专区</view>
|
||||
<view class="head_class_active"></view>
|
||||
</view>
|
||||
<view class="head_class_item">
|
||||
<view class="head_class_title">时令春菜</view>
|
||||
<view class="head_class_active"></view>
|
||||
</view>
|
||||
<view class="head_class_item">
|
||||
<view class="head_class_title">鸭货卤味</view>
|
||||
<view class="head_class_active"></view>
|
||||
</view>
|
||||
<view class="head_class_item">
|
||||
<view class="head_class_title">鸡/鹅肉类</view>
|
||||
<view class="head_class_active"></view>
|
||||
</view>
|
||||
<view class="head_class_item">
|
||||
<view class="head_class_title">轻食萨拉</view>
|
||||
<view class="head_class_active"></view>
|
||||
</view>
|
||||
<view class="head_class_item">
|
||||
<view class="head_class_title">猪肉类</view>
|
||||
<view class="head_class_active"></view>
|
||||
</view>
|
||||
<view class="head_class_item">
|
||||
<view class="head_class_title">羊肉肉类</view>
|
||||
<view class="head_class_active"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="head_class_btn">
|
||||
<view class="head_class_arrow_box"><text class="head_class_arrow_up"></text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品区域 -->
|
||||
<view class="shop_view" :style="{'padding-top':92+headerHeight+'px'}">
|
||||
<view class="shop_view_ul">
|
||||
<view class="shop_view_li">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@ -11,9 +182,12 @@ import { storeToRefs } from 'pinia';//实现解构付值
|
||||
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
|
||||
const counterStore = useCounterStore(); // 使用 Store
|
||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||
// const { count,doubleCount } = storeToRefs(counterStore);
|
||||
//const { count,doubleCount } = storeToRefs(counterStore);
|
||||
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
|
||||
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
|
||||
const ScrollLeft = ref(0);
|
||||
|
||||
// 使用 uni.onLoad 监听页面加载
|
||||
//使用 uni.onLoad 监听页面加载
|
||||
onLoad((options) => {
|
||||
|
||||
});
|
||||
@ -21,11 +195,11 @@ onShow(() => {
|
||||
|
||||
});
|
||||
onPullDownRefresh(()=>{
|
||||
|
||||
})
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
onReachBottom(()=>{
|
||||
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -0,0 +1,250 @@
|
||||
page{
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
.mian{
|
||||
// 头部样式
|
||||
.head{
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background:#FCF0F1;
|
||||
.head_search{
|
||||
width: 517rpx;
|
||||
margin:0rpx 0px 0rpx 10px;;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #FFFFFF;
|
||||
height: 38px;
|
||||
border-radius: 50rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
justify-content: space-between;
|
||||
.head_search_img{
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
margin-left: 13px;
|
||||
display: block;
|
||||
}
|
||||
.head_search_input{
|
||||
width: 500rpx;
|
||||
height: 100%;
|
||||
margin-left: 10px;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
.head_class{
|
||||
white-space: nowrap;
|
||||
padding-left: 5px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
position: relative;
|
||||
.head_class_scroll{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 50px;
|
||||
width: 90%;
|
||||
.head_class_item{
|
||||
padding: 0rpx 10px 0rpx 10px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
.head_class_title{
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.head_class_active{
|
||||
margin: 0 auto;
|
||||
width: 32px;
|
||||
height: 8px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.head_class_item_active{
|
||||
.head_class_title{
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
.head_class_active_img{
|
||||
background: url(../../static/act.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 32px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.head_class_btn{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(252, 240, 241, 0.3);
|
||||
backdrop-filter: blur(2px);
|
||||
.head_class_arrow_box{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background-color: #FFFFFF;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.head_class_arrow_up {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-top: 2rpx solid #7D7B88;
|
||||
border-right: 2rpx solid #7D7B88;
|
||||
transform: translate3d(0, -50%, 0) rotate(134deg);
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
// 商品区域样式
|
||||
.shop_view{
|
||||
padding: 13rpx 20rpx 0rpx 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(180deg, #FCF0F1 0%, #f6f6f6 50%);
|
||||
.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: 34rpx;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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: 24rpx;
|
||||
text-decoration: line-through;
|
||||
margin-left: 5rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<view class="main">
|
||||
<!-- 头部区域 -->
|
||||
<view class="head" :style="{'padding-top':headerHeight+'px'}">
|
||||
<view class="head_location">
|
||||
<image class="location_img" src="../../static/index/location_active.png" mode="widthFix"></image>
|
||||
<view class="location_title">常州体育中心</view>
|
||||
<image class="location_img" src="../../static/index/location.png" mode="widthFix"></image>
|
||||
<view class="location_title">未获取到定位</view>
|
||||
<view class="location_arrow_down"></view>
|
||||
</view>
|
||||
<view class="head_search">
|
||||
@ -14,16 +15,16 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 推荐区域 -->
|
||||
<view class="grid_wrap" :style="{'padding-top':105+headerHeight+'px'}">
|
||||
<view class="grid_wrap" :style="{'padding-top':95+headerHeight+'px'}">
|
||||
<view class="grid_wrap_l">
|
||||
<image class="grid_wrap_live" src="../../static/index/直播炒菜@2x.png"></image>
|
||||
<image class="grid_wrap_live" src=""></image>
|
||||
<view class="grid_wrap_live_title"><image class="grid_wrap_live_img" src="../../static/index/v.png"></image>直播</view>
|
||||
</view>
|
||||
<view class="grid_wrap_r">
|
||||
<view class="grid_wrap_li">
|
||||
<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_desc">好看又好吃</view>
|
||||
<view class="grid_wrap_li_desc">简单又快捷</view>
|
||||
</view>
|
||||
<image class="grid_wrap_li_r" src="../../static/index/AI.png" mode="widthFix"></image>
|
||||
</view>
|
||||
@ -41,18 +42,19 @@
|
||||
<scroll-view class="typescoll" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||||
<view class="scroll_view_li">
|
||||
<view class="scroll_view_banner">
|
||||
<image class="scroll_view_bannerimg" src="../../static/index/scroll_img.png" mode="widthFix"></image>
|
||||
<image class="scroll_view_bannerimg" src="../../static/Intersect@2x.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="scroll_view_shop">
|
||||
<view class="scroll_view_shop_l">
|
||||
<image class="scroll_view_shop_no" src="../../static/index/no1.png"></image>
|
||||
<image class="scroll_view_shop_img" src="../../static/index/img.png" mode="widthFix"></image>
|
||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="scroll_view_shop_r">
|
||||
<view class="scroll_view_shop_title">单人餐1<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
||||
<view class="scroll_view_shop_title">双人餐1<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
||||
<view class="scroll_view_shop_tag">
|
||||
<view class="scroll_view_shop_li">半小时送达</view>
|
||||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
||||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
||||
</view>
|
||||
<view class="scroll_view_shop_bottom">
|
||||
<view class="scroll_view_shop_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||
@ -65,10 +67,10 @@
|
||||
<view class="scroll_view_shop">
|
||||
<view class="scroll_view_shop_l">
|
||||
<image class="scroll_view_shop_no" src="../../static/index/no2.png"></image>
|
||||
<image class="scroll_view_shop_img" src="../../static/index/img.png" mode="widthFix"></image>
|
||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="scroll_view_shop_r">
|
||||
<view class="scroll_view_shop_title">单人餐1<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
||||
<view class="scroll_view_shop_title">双人餐2<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
||||
<view class="scroll_view_shop_tag">
|
||||
<view class="scroll_view_shop_li">半小时送达</view>
|
||||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
||||
@ -84,10 +86,10 @@
|
||||
<view class="scroll_view_shop">
|
||||
<view class="scroll_view_shop_l">
|
||||
<image class="scroll_view_shop_no" src="../../static/index/no3.png"></image>
|
||||
<image class="scroll_view_shop_img" src="../../static/index/img.png" mode="widthFix"></image>
|
||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="scroll_view_shop_r">
|
||||
<view class="scroll_view_shop_title">单人餐1<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
||||
<view class="scroll_view_shop_title">双人餐3<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
||||
<view class="scroll_view_shop_tag">
|
||||
<view class="scroll_view_shop_li">半小时送达</view>
|
||||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
||||
@ -103,12 +105,12 @@
|
||||
</view>
|
||||
<view class="scroll_view_li">
|
||||
<view class="scroll_view_banner">
|
||||
<image class="scroll_view_bannerimg" src="../../static/index/scroll_img.png" mode="widthFix"></image>
|
||||
<image class="scroll_view_bannerimg" src="../../static/image@2x.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="scroll_view_shop">
|
||||
<view class="scroll_view_shop_l">
|
||||
<image class="scroll_view_shop_no" src="../../static/index/no1.png"></image>
|
||||
<image class="scroll_view_shop_img" src="../../static/index/img.png" mode="widthFix"></image>
|
||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="scroll_view_shop_r">
|
||||
<view class="scroll_view_shop_title">单人餐1<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
||||
@ -127,10 +129,10 @@
|
||||
<view class="scroll_view_shop">
|
||||
<view class="scroll_view_shop_l">
|
||||
<image class="scroll_view_shop_no" src="../../static/index/no2.png"></image>
|
||||
<image class="scroll_view_shop_img" src="../../static/index/img.png" mode="widthFix"></image>
|
||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="scroll_view_shop_r">
|
||||
<view class="scroll_view_shop_title">单人餐1<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
||||
<view class="scroll_view_shop_title">单人餐2<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
||||
<view class="scroll_view_shop_tag">
|
||||
<view class="scroll_view_shop_li">半小时送达</view>
|
||||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
||||
@ -146,10 +148,10 @@
|
||||
<view class="scroll_view_shop">
|
||||
<view class="scroll_view_shop_l">
|
||||
<image class="scroll_view_shop_no" src="../../static/index/no3.png"></image>
|
||||
<image class="scroll_view_shop_img" src="../../static/index/img.png" mode="widthFix"></image>
|
||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="scroll_view_shop_r">
|
||||
<view class="scroll_view_shop_title">单人餐1<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
||||
<view class="scroll_view_shop_title">单人餐3<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
||||
<view class="scroll_view_shop_tag">
|
||||
<view class="scroll_view_shop_li">半小时送达</view>
|
||||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
||||
@ -165,8 +167,125 @@
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 商品区域 -->
|
||||
<view class="shop_view">
|
||||
<view class="shop_view_ul">
|
||||
<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-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>
|
||||
</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>
|
||||
</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>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<view class="shop_view_li">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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_cont_l">
|
||||
<view class="footer_cont_num">3</view>
|
||||
<image class="footer_cont_img" src="../../static/index/cart_img.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="footer_cont_btn">去下单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -208,11 +327,11 @@ onShow(() => {
|
||||
|
||||
});
|
||||
onPullDownRefresh(()=>{
|
||||
|
||||
})
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
onReachBottom(()=>{
|
||||
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -2,13 +2,19 @@ page{
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
.main{
|
||||
background:linear-gradient(to right bottom, #F4CECD 32%, #F6F1DC 75%,#F6F6F6 100%);
|
||||
background-size: 100% 13%; /* 调整大小以适应底部 */
|
||||
background-repeat: no-repeat; /* 防止重复 */
|
||||
// 头部样式
|
||||
.head{
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(405deg, #F4CECD 0%, #F6F1DC 100%);
|
||||
background: linear-gradient(to right, #F4CECD, #F6F1DC);
|
||||
background-size: 100% 100%; /* 调整大小以适应底部 */
|
||||
background-repeat: no-repeat; /* 防止重复 */
|
||||
padding-bottom: 10px;
|
||||
.head_location{
|
||||
display: flex;
|
||||
@ -17,21 +23,21 @@ page{
|
||||
.location_img{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 3px 5px 0 10px;
|
||||
margin: 0px 2px 0px 10px;
|
||||
}
|
||||
.location_title{
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
}
|
||||
.location_arrow_down{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 11rpx solid transparent;
|
||||
border-right: 11rpx solid transparent;
|
||||
border-top: 13rpx solid #000000;
|
||||
margin-left: 5px;
|
||||
margin-top: 3px;
|
||||
border-left: 10rpx solid transparent;
|
||||
border-right: 10rpx solid transparent;
|
||||
border-top: 11rpx solid #FFFFFF;
|
||||
margin-left: 2px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
.head_search{
|
||||
@ -48,6 +54,7 @@ page{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 13px;
|
||||
display: block;
|
||||
}
|
||||
.head_search_input{
|
||||
width: 500rpx;
|
||||
@ -69,13 +76,11 @@ page{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 推荐区域样式
|
||||
.grid_wrap{
|
||||
padding: 20rpx 20rpx 20rpx 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(124deg, #F4CECD 0%, #F6F6F6 50%);
|
||||
// background: linear-gradient(405deg, #F4CECD 0%, #F6F1DC 100%);
|
||||
.grid_wrap_l{
|
||||
width: 338rpx;
|
||||
height: 338rpx;
|
||||
@ -105,6 +110,8 @@ page{
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 10rpx;
|
||||
display: block;
|
||||
margin-top: 1rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -113,7 +120,7 @@ page{
|
||||
.grid_wrap_li{
|
||||
padding: 20rpx;
|
||||
width: 315rpx;
|
||||
height: 123rpx;
|
||||
height: 119rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
display: flex;
|
||||
@ -136,6 +143,7 @@ page{
|
||||
.grid_wrap_li_desc{
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
}
|
||||
.grid_wrap_li_r{
|
||||
@ -144,10 +152,11 @@ page{
|
||||
}
|
||||
}
|
||||
.grid_wrap_top{
|
||||
margin-top: 20rpx;
|
||||
margin-top: 21rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 滚动区域样式
|
||||
.scroll_view{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -169,6 +178,7 @@ page{
|
||||
.scroll_view_bannerimg{
|
||||
width: 100%;
|
||||
height: 340rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.scroll_view_shop{
|
||||
@ -187,6 +197,7 @@ page{
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-top-left-radius: 10rpx;
|
||||
}
|
||||
.scroll_view_shop_img{
|
||||
width:150rpx;
|
||||
@ -194,6 +205,7 @@ page{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
.scroll_view_shop_r{
|
||||
@ -210,6 +222,7 @@ page{
|
||||
}
|
||||
.scroll_view_shop_tag{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.scroll_view_shop_li{
|
||||
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
||||
border: 1rpx solid #FF6868;
|
||||
@ -231,20 +244,14 @@ page{
|
||||
font-size: 34rpx;
|
||||
color: #FF0000;
|
||||
font-weight: 500;
|
||||
.market_name{
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
text-decoration: line-through;
|
||||
margin-left: 5rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
}
|
||||
.scroll_view_shop_cart{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: flex-end;
|
||||
.scroll_view_shop_cart_img{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
@ -256,6 +263,182 @@ page{
|
||||
}
|
||||
}
|
||||
}
|
||||
// 商品区域样式
|
||||
.shop_view{
|
||||
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: 34rpx;
|
||||
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: 888;
|
||||
left: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
width: 100%;
|
||||
top: 100%;
|
||||
background: #FFFFFF;
|
||||
border-top: 1rpx solid #F6F6F6;
|
||||
border-bottom: 1rpx solid #F6F6F6;
|
||||
.footer_cont{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 17rpx 20rpx 40rpx;
|
||||
.footer_cont_l{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
position: relative;
|
||||
.footer_cont_num{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: -5rpx;
|
||||
top: 10rpx;
|
||||
font-size: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #FF0000;
|
||||
border-radius: 50rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.footer_cont_img{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.footer_cont_btn{
|
||||
width: 205rpx;
|
||||
height: 77rpx;
|
||||
background: linear-gradient( 90deg, #FD4955 0%, #FD343C 100%);
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.price::before {
|
||||
content: '¥';
|
||||
@ -268,3 +451,10 @@ page{
|
||||
margin-right: 5rpx;
|
||||
margin-left: 5rpx;
|
||||
}
|
||||
.market_name{
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
text-decoration: line-through;
|
||||
margin-left: 5rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
BIN
static/Intersect@2x.png
Normal file
BIN
static/Intersect@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 855 KiB |
BIN
static/Mask.png
Normal file
BIN
static/Mask.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 347 KiB |
BIN
static/act.png
Normal file
BIN
static/act.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 683 B |
BIN
static/image@2x.png
Normal file
BIN
static/image@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 218 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 398 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 857 KiB |
Loading…
Reference in New Issue
Block a user