476 lines
14 KiB
Vue
476 lines
14 KiB
Vue
<!--
|
|
* @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>
|