<!--
 * @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>
