<!--
 * @Description:用于展示用户体重管理及体重记录饮食记录和饮水记录会员专享食谱和帮助小助手
 * @Author: Aimee·Zhang
 * @Date: 2022-01-05 09:01:12
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-01-11 08:57:30
-->
<template>
    <view class="record">
        <!-- 搜索顶部 -->
        <view class="search">
            <!-- 头像 -->
            <view class="user">
                <u-image
                    class="avatar"
                    width="90rpx"
                    height="90rpx"
                    :src="require('../../static/imgs/avatar.png')"
                    :lazy-load="true"
                    shape="circle"
                />
                <u-icon
                    name="arrow-down-fill"
                    color="#525252"
                    size="10"
                    class="downIcon"
                    :bold="true"
                    space="1"
                    @click="$Router.push({name:'EvaluationIntroduce'})"
                />
            </view>
            <!-- 搜索框 -->
            <u-search
                placeholder="搜索食物营养和热量"
                shape="round"
                :show-action="false"
                searchIconColor="#34ce98"
                bgColor="#f8f8f8"
                :clearabled="false"
                :disabled="true"
                placeholderColor="#777"
                class="searchTem"
            />
            <!-- 消息中心 -->
            <view class="news">
                <u-icon
                    name="bell-fill"
                    color="#525252"
                    size="24"
                    :bold="true"
                    space="1"
                    @click="$Router.push({name:'EvaluationIntroduce'})"
                />
                <u-badge
                    class="dian"
                    :isDot="true"
                    bgColor="#e6576b"
                >
                </u-badge>
            </view>
        </view>
        <!-- 体重管理模块 -->
        <view class="weight-manage">
            <!-- 体重管理 -->
            <view
                class="manage"
                @click="$Router.push({name:'EssentialInfo'})"
            >体重管理</view>
            <!-- 单位:公斤 -->
            <u-icon
                class="eye"
                name="eye"
                color="#fff"
                size="14"
                :bold="true"
                label="单位 : 公斤"
                labelPos="left"
                labelSize="12"
                labelColor="#fff"
                space="6"
            />
            <!-- 进度条 -->
            <u-line-progress
                :percentage="30"
                :showText="false"
                inactiveColor="#d5f2e8"
                activeColor="none"
                height="16"
            >
                <text class="u-percentage-slot">{{20}}%</text>
            </u-line-progress>
            <!-- 开始目标 结束目标  当前目标 -->
            <view class="number">
                <view class="--item">70<span>初始</span></view>
                <view class="--item">66<span>当前</span></view>
                <view class="--item">50<span>目标</span></view>
            </view>
        </view>
        <!-- 实时消息 -->
        <view class="real-news">
            <view class="real-news-left">
                <view class="news-icon">
                    <u-icon
                        class="volume-fill"
                        name="volume-fill"
                        color="#24ccb3"
                        size="20"
                        :bold="true"
                        label="公告"
                        labelPos="right"
                        labelSize="14"
                        labelColor="#24ccb3"
                        space="6"
                    />
                </view>
                <swiper
                    class="news-info"
                    :autoplay="true"
                    :vertical="true"
                    :circular="true"
                >
                    <swiper-item
                        class="news-swiper-item"
                        v-for="item in 3"
                        :key="item"
                    >
                        <view>{{item}}洛基今天完成了健康状况测评1洛基今天完成了健康状况测评1洛基今天完成了健康状况测评</view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <!-- 健康测评 -->
        <u-image
            :src="require('../../static/imgs/health1.png')"
            class="eval-img"
            @click="$Router.push({name:'EvaluationList'})"
            :lazy-load="true"
            radius="10rpx"
            mode="widthFix"
            width="100%"
        />
        <!-- 健康记录 -->
        <view class="title">健康记录</view>
        <view
            class="health"
            @click="$Router.push({name:'RecordFoods'})"
        >
            <view>
                <view class="h-title">饮食&运动健康</view>
                <view class="h-date">11:55 更新</view>
                <view class="h-eat">还可以吃<span>1545 </span> 千卡</view>
            </view>
            <u-image
                :src="require('../../static/imgs/eat.png')"
                :lazy-load="true"
                radius="10rpx"
                mode="widthFix"
                width="140rpx"
            />
        </view>
        <view class="health-2">
            <view
                class="health"
                @click="$Router.push({name:'Drink'})"
            >
                <view>
                    <view class="h-title">饮水记录</view>
                    <view class="h-date">11:55 更新</view>
                    <view class="h-eat">还可以喝<span>1545 </span> 毫升</view>
                </view>
                <u-image
                    :src="require('../../static/imgs/drink.png')"
                    :lazy-load="true"
                    radius="10rpx"
                    mode="widthFix"
                    width="110rpx"
                    class="h-icon"
                />
            </view>
            <view
                class="health"
                @click="$Router.push({name:'Weight'})"
            >
                <view>
                    <view class="h-title">体重记录</view>
                    <view class="h-date">11:55 更新</view>
                    <view class="h-eat"><span>55 </span>公斤 </view>
                </view>
                <u-image
                    :src="require('../../static/imgs/weight.png')"
                    :lazy-load="true"
                    radius="10rpx"
                    mode="widthFix"
                    width="140rpx"
                    class="h-icon"
                />
            </view>

        </view>
        <!-- 营养管理 -->
        <view class="title">营养管理</view>
        <view class="nutrition">
            <view
                class="--item"
                @click="$Router.push({name:'VipFoods'})"
            >
                <u-icon
                    :name="require('../../static/icon/vip.png')"
                    size="24"
                    :bold="true"
                    label="会员专享食谱"
                    labelPos="right"
                    labelSize="17"
                    labelColor="#525252"
                    space="10"
                />
                <u-icon
                    name="arrow-right"
                    color="#999"
                />
            </view>
            <view
                class="--item mt20"
                @click="$Router.push({name:'NutritionHelper'})"
            >
                <u-icon
                    :name="require('../../static/icon/helper.png')"
                    size="24"
                    :bold="true"
                    label="营养小助手"
                    labelPos="right"
                    labelSize="17"
                    labelColor="#525252"
                    space="10"
                />
                <u-icon
                    name="arrow-right"
                    color="#999"
                />
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
};
</script>

<style lang="scss" scoped>
.record {
    padding: $padding;
    // 顶部搜索
    .search {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        .user {
            display: flex;
            flex-direction: row;
            .downIcon {
                margin: 0 0 0 $margin * 0.4;
            }
            .avatar {
                box-shadow: 0 0 10rpx 4rpx
                    rgba($color: $main-color, $alpha: 0.1);
                border-radius: 50%;
            }
        }
        .searchTem {
            margin: 0 $margin * 0.6 !important;
        }
        .news {
            position: relative;
            .dian {
                position: absolute;
                top: 0;
                right: 0;
            }
        }
    }
    // 体重管理
    .weight-manage {
        height: 288rpx;
        background-image: url(../../static/imgs/banner-bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: $radius + 1;
        box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
        margin-top: $margin + 6;
        padding: 0 $padding;
        .eye {
            margin-bottom: $margin * 0.6;
        }
        // 体重管理
        .manage {
            font-size: $margin + 2;
            color: #fff;
            display: inline-block;
            padding: $padding * 0.3 $padding;
            position: relative;
            box-shadow: 0 0 10rpx 4rpx rgba($color: #fff, $alpha: 0.3);
            left: -$padding;
            top: 0;
            border-radius: $radius + 1 0 $radius - 6;
        }
        // 进度条线上样式
        .u-percentage-slot {
            padding: 4rpx 10rpx;
            background-color: #fff;
            color: #26a377;
            border-radius: 200rpx;
            font-size: $title-size - 10;
            margin-right: -5px;
        }
        // 数值
        .number {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            justify-content: space-around;
            box-sizing: border-box;
            color: #fff;
            font-size: $title-size + 18;
            font-weight: bold;
            margin-top: $margin * 0.6;
            .--item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-end;
                box-sizing: border-box;

                span {
                    font-size: $title-size - 6;
                    font-weight: normal;
                    margin-top: $margin * 0.3;
                }
            }
            .--item:nth-child(1),
            .--item:nth-child(3) {
                font-size: $margin + 4 !important;
            }
        }
    }
    // 实时消息
    .real-news {
        font-size: $title-size - 2;
        color: $text-color;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: $padding 0;
        .real-news-left {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;
            flex: 1;
            // 消息图标
            .news-icon {
                background-color: #e9fbf8;
                display: inline-block;
                padding: 10rpx 20rpx 6rpx 20rpx;
                border-radius: $margin;
                // margin-right: $margin * 0.5;
            }
            // 轮播图
            .news-info {
                flex: 1;
                margin: 0 $margin * 0.4;
                height: 80rpx;
                line-height: 80rpx;

                .news-swiper-item {
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
    // 评测图片
    .eval-img {
        box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
    }
    // 标题
    .title {
        font-size: $title-size * 1.4;
        font-weight: bold;
        margin: $margin * 1.5 0;
    }
    // 健康记录
    .health-2 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        margin-top: $margin;
        .h-icon {
            position: absolute;
            right: 0;
            z-index: 0;
        }
        .health:nth-child(1) {
            flex: 1 !important;
            margin-right: $margin * 0.5;
        }
        .health:nth-child(2) {
            flex: 1 !important;
            margin-left: $margin * 0.5;
        }
    }
    .health {
        box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
        padding: $padding * 1 $padding;
        border-radius: $radius - 10;
        color: #a3a3a3;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        position: relative;

        .h-title {
            color: $text-color;
            font-size: $title-size + 2;
            font-weight: bold;
        }
        .h-date {
            margin-top: $margin * 0.4;
            font-size: $title-size-sm + 2;
        }
        .h-eat {
            font-size: $title-size-sm;
            margin-top: $margin;
            z-index: 10;

            span {
                font-size: $title-size * 1.2;
                color: $main-color;
                font-weight: bold;
                padding: $padding * 0.2;
            }
        }
    }
    // 营养管理
    .nutrition {
        box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
        padding: $padding * 1.5 $padding;
        border-radius: $radius - 10;

        .--item {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }
        .mt20 {
            margin-top: 60rpx;
        }
    }
}
</style>
