165 lines
4.8 KiB
Vue
165 lines
4.8 KiB
Vue
<!--
|
||
* @Description:
|
||
* @Author: Aimee·Zhang
|
||
* @Date: 2022-01-07 15:59:03
|
||
* @LastEditors: Aimee·Zhang
|
||
* @LastEditTime: 2022-01-14 09:32:24
|
||
-->
|
||
|
||
<template>
|
||
<div class="VipFoods">
|
||
<!-- 描述 -->
|
||
<view class="des">
|
||
<view>轻松健身食谱，</view>
|
||
<view>让改变放生</view>
|
||
</view>
|
||
<!-- 列表 -->
|
||
<view
|
||
class="lists-content"
|
||
v-for="(it,index) in lists"
|
||
:key="it.position_id"
|
||
>
|
||
<view class="lists-title">
|
||
<view>
|
||
<span>{{it.name}}</span>
|
||
{{it.description}}
|
||
</view>
|
||
<u-image
|
||
class="p-img"
|
||
width="260rpx"
|
||
radius="20rpx"
|
||
mode="widthFix"
|
||
:src="index === 0 ? require('../../static/imgs/5.png') : require('../../static/imgs/6.png')"
|
||
:lazy-load="true"
|
||
/>
|
||
</view>
|
||
<view
|
||
class="--item"
|
||
v-for="item in it.recipes"
|
||
:key="item.recipe_id"
|
||
@click="$Router.push({ name: 'menuDetails', params: {id: item.recipe_id, title: item.name }})"
|
||
>
|
||
<u-image
|
||
class="content-img"
|
||
width="200rpx"
|
||
height="160rpx"
|
||
radius="20rpx"
|
||
:src="item.cover"
|
||
:lazy-load="true"
|
||
/>
|
||
<view class="--title">
|
||
<view>{{item.name}}</view>
|
||
<view>{{item.sub_title}}</view>
|
||
<view>给你一天满满正能量</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { positions } from "@/apis/interfaces/foods.js";
|
||
export default {
|
||
data() {
|
||
return { lists: [] };
|
||
},
|
||
onShow() {
|
||
positions().then((res) => {
|
||
this.lists = res;
|
||
});
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.VipFoods {
|
||
padding: $padding;
|
||
// 描述
|
||
.des {
|
||
font-size: $title-size * 1.4;
|
||
font-weight: bold;
|
||
color: $main-color;
|
||
line-height: 1.3;
|
||
}
|
||
//列表
|
||
.lists-content {
|
||
background: $main-color;
|
||
padding: $padding;
|
||
margin: $margin * 2 0;
|
||
border-radius: $radius;
|
||
position: relative;
|
||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||
// 列表标题
|
||
.lists-title {
|
||
font-size: $title-size;
|
||
color: #fff;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
margin-bottom: $margin;
|
||
view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
span {
|
||
font-size: $title-size * 1.6;
|
||
font-weight: bold;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
}
|
||
.p-img {
|
||
position: absolute;
|
||
right: -$margin;
|
||
top: -$margin * 2;
|
||
}
|
||
}
|
||
// 列表
|
||
.--item {
|
||
background: rgba($color: #fff, $alpha: 1);
|
||
padding: $padding;
|
||
border-radius: $radius;
|
||
position: relative;
|
||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
margin-top: $margin * 0.6;
|
||
.--title {
|
||
width: 50vw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
color: $main-color;
|
||
view {
|
||
text-align: right;
|
||
font-size: $title-size-m + 1;
|
||
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
}
|
||
view:nth-child(1) {
|
||
font-size: $title-size * 1.5;
|
||
font-weight: bold;
|
||
}
|
||
view:nth-child(2) {
|
||
margin-top: $margin * 0.8;
|
||
}
|
||
view:nth-child(2) {
|
||
margin-top: $margin * 0.5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|