新增记录模块页面
This commit is contained in:
@@ -1,39 +1,475 @@
|
||||
<!--
|
||||
* @Description:用于展示用户体重管理及体重记录饮食记录和饮水记录会员专享食谱和帮助小助手
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-05 09:01:12
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-11 08:57:30
|
||||
-->
|
||||
<template>
|
||||
<view>
|
||||
<view class="">
|
||||
健康档案基本信息（姓名，年龄，性别）
|
||||
</view>
|
||||
<view class="">
|
||||
体重
|
||||
</view>
|
||||
<view class="">
|
||||
喝水
|
||||
</view>
|
||||
<view class="">
|
||||
心率
|
||||
</view>
|
||||
<view class="">
|
||||
血压
|
||||
</view>
|
||||
<view class="">
|
||||
血糖
|
||||
</view>
|
||||
<view class="">
|
||||
血脂
|
||||
</view>
|
||||
</view>
|
||||
<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 {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user