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/healthFoodDetails.vue
+238
View File
@@ -0,0 +1,238 @@
<template>
<view class="food-wrap">
<view class="v12-mb-3 banner-wrap">
</view>
<view class="inro-wrap v12-mb-3 ">
<view class="v12-font-36 v12-font-bold v12-dark-text v12-mb-3">淮山党参鹌鹑汤</view>
<view class="v12-font-28 v12-secondary-dark-text">淮山党参鹌鹑汤是一种具有补益作用的汤品，非常适合在
季节变换或身体虚弱时饮用</view>
</view>
<view class="details-list-wrap v12-mb-3 ">
<view class="v12-justify-start v12-align-center">
<view class="primary-title">
<text class="v12-font-34 v12-font-bold">食材清单</text>
<view class="slider"></view>
</view>
<view class="v12-dark1-text v12-font-24 v12-ml-3">/ 新鲜的食材决定药膳的作用</view>
</view>
<view class="v12-white v12-radius-20 v12-pa-2 v12-mt-3">
<view class="v12-font-28 v12-font-bold v12-mb-2">主料</view>
<view class="v12-d-grid-columns-2 primary-item-wrap">
<view v-for="(item, index) in primaryList" :key="index" class="primary-item v12-justify-start v12-align-center">
<view class="primary-img"></view>
<view class="v12-ml-2">
<view class="v12-font-26 one-t v12-mb-1">{{ item.label }}</view>
<view class="v12-font-20 v12-primary v12-white-text v12-nowrap v12-px-2 v12-py-1 v12-radius-60">+加入团购食材</view>
</view>
</view>
</view>
</view>
<view class="v12-white v12-radius-20 v12-pa-2 v12-mt-3">
<view class="v12-font-28 v12-font-bold v12-mb-2">辅料</view>
<view class="v12-d-grid-columns-2 primary-item-wrap">
<view v-for="(item, index) in secondaryList" :key="index" class="primary-item v12-justify-start v12-align-center">
<view class="v12-ml-2">
<view class="v12-font-26 one-t v12-mb-1">
<text class="v12-mr-2 v12-font-bold">·</text>
<text>{{ item }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="step-wrap v12-mb-3">
<view class="step-title">
<view>烹饪步骤</view>
<view class="slider"></view>
</view>
<view class="steps v12-mt-3">
<view v-for="(item, index) in steps" :key="index" class="step-item">
<view class="step-img"></view>
<view class="v12-ml-2 step-info">
<view class="v12-font-26 v12-font-bold v12-mb-3">{{ item.label }}</view>
<view class="v12-font-26 v12-secondary-dark-text">{{ item.describle }}</view>
</view>
</view>
</view>
</view>
<view class="tips-wrap">
<view class="step-title">
<view>养生小tips</view>
<view class="slider"></view>
</view>
<view class="card-wrap v12-mt-3">
<view class="card-item">
<view class="card-tag v12-primary v12-white-text">选材</view>
<view class="v12-mt-6">
<view v-for="(item, index) in tips" :key="index">
<text class="v12-primary-text v12-font-bold v12-mr-2">·</text>
<text class="v12-font-26 v12-dark-text">{{ item }}</text>
</view>
</view>
</view>
<view class="card-item v12-mt-3">
<view class="card-tag v12-primary v12-white-text">注意事项</view>
<view class="v12-mt-6">
<view v-for="(item, index) in tips" :key="index">
<text class="v12-primary-text v12-font-bold v12-mr-2">·</text>
<text class="v12-font-26 v12-dark-text">{{ item }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default{
data() {
return {
tips: [
'鹌鹑：选择新鲜的鹌鹑，处理清洗干净，去除内脏和杂质',
'淮山：选择肉质雪白、无黑点的淮山，去皮切块后应立即',
'放入清水中浸泡，以防氧化变黑',
'党参：选择色泽黄亮、无霉变、无虫蛀的党参'
],
primaryList: [
{img: '', label: '鹌鹑(2只)'},
{img: '', label: '鹌鹑(2只)'},
{img: '', label: '鹌鹑(2只)'},
{img: '', label: '鹌鹑(2只)'},
],
secondaryList: [
'枸杞（适量）',
'姜片（适量）',
'盐（适量）',
'清水（适量）'
],
steps: [
{img: '', label: '步骤1：', step: 1, describle: '所有食材洗净备用'},
{img: '', label: '步骤2：', step: 2, describle: '所有食材洗净备用'},
{img: '', label: '步骤3：', step: 3, describle: '所有食材洗净备用'},
{img: '', label: '步骤4：', step: 4, describle: '所有食材洗净备用'},
]
}
}
}
</script>
<style lang="less" scoped>
.card-tag{
width: fit-content;
padding: 10rpx 20rpx;
border-radius: 10rpx 0 20rpx 20rpx;
position: absolute;
top: -12rpx;
}
.card-tag::after{
content: '';
width: 0;
height: 0;
border-left: 8rpx solid transparent !important;
border-right: 8rpx solid transparent !important;
right: -4px;
border-top: 8rpx solid #7D393F !important;
border-bottom: 8rpx solid transparent!important;
position: absolute;
top: 4rpx;
rotate: 45deg;
}
.card-item{
position: relative;
background: #fff;
border-radius: 20rpx;
padding: 20rpx;
}
.tips-wrap{
background: #F2F2F2;
border-radius: 40rpx;
padding: 20rpx;
box-sizing: border-box;
}
.steps{
display: flex;
overflow: auto;
}
.step-info{
height: inherit;
padding: 20rpx;
box-sizing: border-box;
}
.step-item{
min-width: 482rpx;
width: 482rpx;
height: 232rpx;
background: #fff;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: flex-start;
margin-right: 24rpx;
padding: 0 20rpx;
}
.step-item:last-child{
margin-right: 0 !important;
}
.step-img{
width: 200rpx;
height: 200rpx;
background: rgba(195,126,126,0.39);
border-radius: 20rpx;
}
.step-title{
position: relative;
width: fit-content;
font-weight: bold;
font-size: 34rpx;
}
.step-wrap{
background: #F2F2F2;
border-radius: 40rpx;
padding: 20rpx 20rpx 30rpx 20rpx;
box-sizing: border-box;
}
.primary-item-wrap{
grid-column-gap: 20rpx;
grid-row-gap: 20rpx;
}
.primary-img{
width: 124rpx;
height: 90rpx;
background: rgba(63,20,20,0.39);
border-radius: 20rpx;
}
.primary-item{
}
.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;
}
.primary-title{
position: relative;
width: fit-content;
}
.food-wrap{
min-height: 100vh;
background: #fff;
padding: 20rpx 20rpx 60rpx 20rpx;
}
.banner-wrap{
width: 100%;
height: 360rpx;
background: rgba(180,18,18,0.39);
border-radius: 40rpx;
box-sizing: border-box;
}
.details-list-wrap{
background: #F2F2F2;
border-radius: 40rpx;
padding: 20rpx 20rpx 30rpx 20rpx;
}
</style>