249 lines
7.9 KiB
Vue
249 lines
7.9 KiB
Vue
<template>
|
|
<view class="health-foods">
|
|
<view class="v12-justify-center">
|
|
<view class="v12-mr-3 v12-radius-100 v12-dark1 v12-dark-text v12-px-5 v12-py-2 v12-font-28 v12-font-bold" @click="toSanctun">养生圣地</view>
|
|
<view class="v12-radius-100 v12-primary v12-white-text v12-px-5 v12-py-2 v12-font-28 v12-font-bold" >养生食材</view>
|
|
</view>
|
|
<view class="v12-justify-between v12-align-center v12-mt-5">
|
|
<view class="v12-font-28 v12-secondary-dark-text v12-mr-3">昆明市</view>
|
|
<view class="flex-1"><u-search :showAction="false"></u-search></view>
|
|
</view>
|
|
<view class="v12-justify-between swap">
|
|
<view v-for="(item, index) in foodItems" :key="index" class="trave-item-wrap v12-mr-3 v12-mt-3" @click="toDetails">
|
|
<view class="trave-item"></view>
|
|
<view class="trave-btn">{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="rank-wrap v12-mt-3">
|
|
<view class="title-img"></view>
|
|
<view class="rank-items-wrap">
|
|
<view class="bee-rank">
|
|
<view class="rank-title-wrap">
|
|
<view class="rank-title v12-font-34 v12-font-bold">蜂蜜榜</view>
|
|
</view>
|
|
<view class="v12-px-2">
|
|
<view class="rank-item v12-justify-start v12-align-center v12-mb-4" v-for="(item, index) in rankItems" :key="index">
|
|
<view class="rank-tag">{{ index + 1 }}</view>
|
|
<view class="rank-img"></view>
|
|
<view class="v12-ml-2">
|
|
<view class="v12-font-bold v12-font-24 one-t" style="width: 160rpx">{{ item.label }}</view>
|
|
<view class="v12-font-22 more-t">{{ item.intro }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="drug-rank">
|
|
<view class="rank-title-wrap">
|
|
<view class="rank-title v12-font-34 v12-font-bold">药膳榜</view>
|
|
</view>
|
|
<view class="v12-px-2">
|
|
<view class="rank-item v12-justify-start v12-align-center v12-mb-4" v-for="(item, index) in rankItems" :key="index">
|
|
<view class="rank-tag">{{ index + 1 }}</view>
|
|
<view class="rank-img"></view>
|
|
<view class="v12-ml-2">
|
|
<view class="v12-font-bold v12-font-24 one-t" style="width: 160rpx">{{ item.label }}</view>
|
|
<view class="v12-font-22 more-t">{{ item.intro }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="recommend-wrap v12-mt-3">
|
|
<view class="recommend-title v12-px-3">
|
|
<text class="v12-dark-text v12-font-36 v12-font-bold">食补推荐</text>
|
|
<view class="slider"></view>
|
|
</view>
|
|
<view class="recommends v12-mt-3">
|
|
<view class="recommend-item" v-for="(item, index) in recommendItems" :key="index">
|
|
<view class="recommend-img">
|
|
<view class="name-wrap v12-white-text v12-text-center">{{ item.name }}</view>
|
|
</view>
|
|
<view class="v12-pa-2 v12-font-bold v12-font-28 more-t">{{ item.title }}</view>
|
|
<view class="v12-justify-between v12-primary-text v12-font-bold">
|
|
<view>
|
|
<text class="v12-font-32">￥</text>
|
|
<text class="v12-font-36">{{ item.price }}</text>
|
|
</view>
|
|
<view>
|
|
gouwuche
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default{
|
|
data() {
|
|
return {
|
|
foodItems: [
|
|
{img: '', value: '', name: '淮山党参鹌鹑汤'},
|
|
{img: '', value: '', name: '淮山党参鹌鹑汤'},
|
|
{img: '', value: '', name: '淮山党参鹌鹑汤'},
|
|
{img: '', value: '', name: '淮山党参鹌鹑汤'},
|
|
],
|
|
rankItems: [
|
|
{label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 1, img: ''},
|
|
{label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 2, img: ''},
|
|
{label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 3, img: ''},
|
|
],
|
|
recommendItems: [
|
|
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
|
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
|
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
|
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
|
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
|
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
|
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
|
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
toSanctun() {
|
|
uni.navigateTo({
|
|
url: '/pkg_product/views/healthSanctum'
|
|
})
|
|
},
|
|
toDetails() {
|
|
uni.navigateTo({
|
|
url: '/pkg_product/views/healthFoodDetails'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.recommends{
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-column-gap: 20rpx;
|
|
grid-row-gap: 20rpx;
|
|
}
|
|
.recommend-img{
|
|
width: 344rpx;
|
|
height: 344rpx;
|
|
background: #333;
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.name-wrap{
|
|
position: absolute;
|
|
background: rgba(0,0,0,0.2);
|
|
width: 100%;
|
|
padding: 8px 0;
|
|
bottom: 0;
|
|
}
|
|
.recommend-item{
|
|
height: 500rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
}
|
|
.recommend-title{
|
|
position: relative;
|
|
width: fit-content;
|
|
}
|
|
.slider{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 6rpx;
|
|
background: linear-gradient(to right, #C52733 0%, rgba(255,255,255,0) 100%);
|
|
border-radius: 6rpx;
|
|
bottom: 5rpx;
|
|
}
|
|
.rank-tag{
|
|
width: 50rpx; /* 宽度 */
|
|
height: 55rpx; /* 高度，根据正六边形的几何特性计算 */
|
|
background-color: #3498db; /* 背景颜色 */
|
|
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
|
position: absolute;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: 20rpx;
|
|
line-height: 55rpx;
|
|
top: -22.5rpx;
|
|
}
|
|
.rank-img{
|
|
min-width: 104rpx;
|
|
width: 104rpx;
|
|
height: 104rpx;
|
|
background: #666;
|
|
border-radius: 20rpx;
|
|
}
|
|
.bee-rank, .drug-rank{
|
|
width: 100%;
|
|
background: #999;
|
|
border-radius: 20rpx;
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
.rank-title-wrap{
|
|
height: 140rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.rank-title{
|
|
width: 200rpx;
|
|
padding: 10rpx 5rpx;
|
|
background: linear-gradient(to right, #FFFFFF 0%, rgba(255,255,255,0) 100%);
|
|
}
|
|
.rank-items-wrap{
|
|
background: #E2BC8D;
|
|
border-radius: 20rpx;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-column-gap: 20rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.rank-item{
|
|
width: 100%;
|
|
height: 116rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 0 10rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
.title-img{
|
|
height: 132rpx;
|
|
width: 100%;
|
|
}
|
|
.health-foods{
|
|
height: 100vh;
|
|
background-color: #FAEED8;
|
|
padding: 20rpx ;
|
|
}
|
|
.flex-1{
|
|
flex: 1;
|
|
}
|
|
.swap{
|
|
overflow: auto;
|
|
}
|
|
.trave-item-wrap{
|
|
position: relative;
|
|
}
|
|
.trave-btn{
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
bottom: 30rpx;
|
|
text-align: center;
|
|
width: 212rpx;
|
|
background: rgba(255,255,255,0.9);
|
|
border-radius: 60rpx;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
.trave-item{
|
|
width: 382rpx;
|
|
height: 272rpx;
|
|
background: rgba(230,178,178,0.39);
|
|
border-radius: 20rpx;
|
|
}
|
|
</style> |