143 lines
3.1 KiB
Vue
143 lines
3.1 KiB
Vue
<!--
|
||
* @Description:
|
||
* @Author: Aimee·Zhang
|
||
* @Date: 2022-01-07 15:59:03
|
||
* @LastEditors: Aimee·Zhang
|
||
* @LastEditTime: 2022-01-07 16:55:30
|
||
-->
|
||
|
||
<template>
|
||
<div class="VipFoods">
|
||
<!-- 描述 -->
|
||
<view class="des">
|
||
<view>轻松健身食谱，</view>
|
||
<view>让改变放生</view>
|
||
</view>
|
||
<!-- 列表 -->
|
||
<view class="lists-content" v-for="it in 2" :key="it">
|
||
<view class="lists-title">
|
||
<view>
|
||
<span>一日三餐</span>
|
||
三餐很重要，搭配不能少
|
||
</view>
|
||
<u-image
|
||
class="p-img"
|
||
width="260rpx"
|
||
radius="20rpx"
|
||
mode="widthFix"
|
||
:src="it === 1 ? require('../../static/imgs/5.png') : require('../../static/imgs/6.png')"
|
||
:lazy-load="true"
|
||
/>
|
||
</view>
|
||
<view class="--item" v-for="item in 3" :key="item">
|
||
<u-image class="content-img" width="200rpx" height="160rpx" radius="20rpx" :src="require('../../static/imgs/1.png')" :lazy-load="true" />
|
||
<view class="--title">
|
||
<view>减脂早餐</view>
|
||
<view>早餐吃的好</view>
|
||
<view>给你一天满满正能量</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {};
|
||
}
|
||
};
|
||
</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>
|