liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat：康养页面

Browse Source
This commit is contained in:
modendeveloper
2024-10-08 00:25:03 +08:00
parent c51f177c7c
commit 566ef9de61
8 changed files with 901 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg_product/views/healthFoods.vue
+249
View File
@@ -0,0 +1,249 @@
<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>