238 lines
7.0 KiB
Vue
238 lines
7.0 KiB
Vue
<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> |