新增记录模块页面
This commit is contained in:
679
pages/essentialInfo/index.vue
Normal file
679
pages/essentialInfo/index.vue
Normal file
@@ -0,0 +1,679 @@
|
||||
|
||||
<!--
|
||||
* @Description:
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-10 10:29:17
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-10 17:23:37
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="info">
|
||||
<!-- 进度 -->
|
||||
<view class="plan">
|
||||
<view class="plan-1">
|
||||
<span>基本信息</span>
|
||||
<u-line-progress
|
||||
:percentage="percentplan1"
|
||||
activeColor="#34ce98"
|
||||
class="line-progress"
|
||||
:showText="false"
|
||||
/>
|
||||
</view>
|
||||
<view class="plan-2">
|
||||
<span>健康目标</span>
|
||||
<u-line-progress
|
||||
:percentage="percentplan2"
|
||||
activeColor="#34ce98"
|
||||
width="200rpx"
|
||||
class="line-progress"
|
||||
:showText="false"
|
||||
/>
|
||||
</view>
|
||||
<view class="plan-3">
|
||||
<span>行为习惯</span>
|
||||
<u-line-progress
|
||||
:percentage="percentplan3"
|
||||
activeColor="#34ce98"
|
||||
width="200rpx"
|
||||
class="line-progress"
|
||||
:showText="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 进度1 基本信息 -->
|
||||
<view>
|
||||
<!-- 进度1 基本信息页面展示 性别 -->
|
||||
<view
|
||||
class="plan-content"
|
||||
v-if="sexShow"
|
||||
>
|
||||
<view class="info-des">生理性别和激素会影响我们的身体代谢食物的方式</view>
|
||||
<view class="info-title">您的性别是？</view>
|
||||
<view class="sex">
|
||||
<view
|
||||
class="sex-item"
|
||||
@click="clickSex(1)"
|
||||
>
|
||||
<u-image
|
||||
class="sex-item-avatar"
|
||||
width="150rpx"
|
||||
height="150rpx"
|
||||
:src="require('../../static/imgs/avatar-1.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>男性
|
||||
</view>
|
||||
<view
|
||||
class="sex-item"
|
||||
@click="clickSex(2)"
|
||||
>
|
||||
<u-image
|
||||
class="sex-item-avatar"
|
||||
width="150rpx"
|
||||
height="150rpx"
|
||||
:src="require('../../static/imgs/avatar-0.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>女性
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 进度1 基本信息页面展示 年龄 -->
|
||||
<view
|
||||
class="plan-content"
|
||||
v-if="ageShow"
|
||||
>
|
||||
<u-image
|
||||
class="sex-item-avatar"
|
||||
width="100rpx"
|
||||
height="100rpx"
|
||||
:src="require('../../static/imgs/avatar-1.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>
|
||||
<view class="age">
|
||||
<view class="info-title">你的出生日期是？</view>
|
||||
<view
|
||||
class="year"
|
||||
@change="dateShow = true"
|
||||
>{{age}}</view>
|
||||
<u-datetime-picker
|
||||
confirmColor="#34ce98"
|
||||
ref="datetimePicker"
|
||||
v-model="age"
|
||||
mode="date"
|
||||
:show="dateShow"
|
||||
:formatter="formatter"
|
||||
:minDate="-302688000"
|
||||
:maxDate="maxDate"
|
||||
:closeOnClickOverlay="true"
|
||||
@confirm="confirmAge"
|
||||
@cancel="camcelAge"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 进度1 基本信息页面展示 身高体重 -->
|
||||
<view
|
||||
class="plan-content weight-content"
|
||||
v-if="heightWeightShow"
|
||||
>
|
||||
<u-image
|
||||
class="sex-item-avatar"
|
||||
width="100rpx"
|
||||
height="100rpx"
|
||||
:src="require('../../static/imgs/avatar-1.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>
|
||||
<view class="info-des">身高体重信息对健康信息有重要参考价值</view>
|
||||
<view class="info-title">您的身高是？</view>
|
||||
<!-- -->
|
||||
<view class="weight">
|
||||
<view class='count'><span>{{heightU}}</span>厘米</view>
|
||||
<vue-scale
|
||||
:min="10"
|
||||
:max="100"
|
||||
:int="false"
|
||||
:single="10"
|
||||
:h="80"
|
||||
:styles="styles"
|
||||
@scroll="scrollHeight"
|
||||
:scrollLeft="160"
|
||||
/>
|
||||
</view>
|
||||
<view class="
|
||||
info-title">您的体重是？
|
||||
</view>
|
||||
<view class="weight">
|
||||
<view class='count'><span>{{weightU}}</span>公斤</view>
|
||||
<vue-scale
|
||||
:min="10"
|
||||
:max="100"
|
||||
:int="false"
|
||||
:single="10"
|
||||
:h="80"
|
||||
:styles="styles"
|
||||
@scroll="scrollWeight"
|
||||
:scrollLeft="55"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="pre-next">
|
||||
<view
|
||||
class="pro"
|
||||
@click="weightClick(1)"
|
||||
>上一步</view>
|
||||
<view
|
||||
class="next"
|
||||
@click="weightClick(2)"
|
||||
>下一步</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 进度2 健康目标 -->
|
||||
<view>
|
||||
<!-- 减脂类型 -->
|
||||
<view
|
||||
v-if="targetShow"
|
||||
class="plan-content target-content"
|
||||
>
|
||||
<u-image
|
||||
class="sex-item-avatar"
|
||||
width="100rpx"
|
||||
height="100rpx"
|
||||
:src="require('../../static/imgs/avatar-1.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>
|
||||
<view class="info-title">您的目标是？</view>
|
||||
<view class="target-type">
|
||||
<view class="target-type-item">
|
||||
<u-image
|
||||
class="target-img"
|
||||
width="160rpx"
|
||||
height="160rpx"
|
||||
@click="activedTarget ='1'"
|
||||
:src="activedTarget === '1'?require('../../static/imgs/ic-w-s.png'):require('../../static/imgs/ic-w-n.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>减肥
|
||||
</view>
|
||||
<view class="target-type-item">
|
||||
<u-image
|
||||
class="target-img"
|
||||
width="160rpx"
|
||||
height="160rpx"
|
||||
@click="activedTarget ='2'"
|
||||
:src="activedTarget === '2'?require('../../static/imgs/ic-b-s.png'):require('../../static/imgs/ic-b-n.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>保持体重
|
||||
</view>
|
||||
<view class="target-type-item">
|
||||
<u-image
|
||||
class="target-img"
|
||||
width="160rpx"
|
||||
height="160rpx"
|
||||
@click="activedTarget ='3'"
|
||||
:src="activedTarget === '3'?require('../../static/imgs/ic-m-s.png'):require('../../static/imgs/ic-m-n.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>增肌
|
||||
</view>
|
||||
</view>
|
||||
<view class="pre-next">
|
||||
<view
|
||||
class="pro"
|
||||
@click="targetClick(1)"
|
||||
>上一步</view>
|
||||
<view
|
||||
class="next"
|
||||
@click="targetClick(2)"
|
||||
>下一步</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 减脂体重 -->
|
||||
<view
|
||||
v-if="targetWeightShow"
|
||||
class="plan-content target-content"
|
||||
>
|
||||
<u-image
|
||||
class="sex-item-avatar"
|
||||
width="100rpx"
|
||||
height="100rpx"
|
||||
:src="require('../../static/imgs/avatar-1.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>
|
||||
<view class="info-title">您的打算减脂多少？</view>
|
||||
<view class="target-type">
|
||||
<view class="target-type-item">
|
||||
<view class='count'><span>{{weightTargetU}}</span>公斤</view>
|
||||
<vue-scale
|
||||
:min="10"
|
||||
:max="100"
|
||||
:int="false"
|
||||
:single="10"
|
||||
:h="80"
|
||||
:styles="styles"
|
||||
@scroll="scrollTargetWeight"
|
||||
:scrollLeft="50"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pre-next">
|
||||
<view
|
||||
class="pro"
|
||||
@click="targetWeightClick(1)"
|
||||
>上一步</view>
|
||||
<view
|
||||
class="next"
|
||||
@click="targetWeightClick(2)"
|
||||
>下一步</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 进度3 行为习惯 -->
|
||||
|
||||
<!-- 减脂类型 -->
|
||||
<view
|
||||
v-if="behaviorShow"
|
||||
class="plan-content target-content"
|
||||
>
|
||||
<u-image
|
||||
class="sex-item-avatar"
|
||||
width="100rpx"
|
||||
height="100rpx"
|
||||
:src="require('../../static/imgs/avatar-1.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>
|
||||
<view class="info-title">您的运动量是？</view>
|
||||
<view class="target-type">
|
||||
<view class="target-type-item">
|
||||
<u-image
|
||||
class="target-img"
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
@click="activedbehaviarTarget ='1'"
|
||||
:src="activedbehaviarTarget === '1'?require('../../static/imgs/ic-w-01.png'):require('../../static/imgs/ic-w-02.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>久坐不动
|
||||
</view>
|
||||
<view class="target-type-item">
|
||||
<u-image
|
||||
class="target-img"
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
@click="activedbehaviarTarget ='2'"
|
||||
:src="activedbehaviarTarget === '2'?require('../../static/imgs/ic-w-03.png'):require('../../static/imgs/ic-w-04.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>少量运动
|
||||
</view>
|
||||
<view class="target-type-item">
|
||||
<u-image
|
||||
class="target-img"
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
@click="activedbehaviarTarget ='3'"
|
||||
:src="activedbehaviarTarget === '3'?require('../../static/imgs/ic-w-05.png'):require('../../static/imgs/ic-w-06.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>中等运动量
|
||||
</view>
|
||||
<view class="target-type-item">
|
||||
<u-image
|
||||
class="target-img"
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
@click="activedbehaviarTarget ='4'"
|
||||
:src="activedbehaviarTarget === '4'?require('../../static/imgs/ic-w-07.png'):require('../../static/imgs/ic-w-08.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>超强度运动
|
||||
</view>
|
||||
</view>
|
||||
<view class="pre-next">
|
||||
<view
|
||||
class="pro"
|
||||
@click="targetBehaviorClick(1)"
|
||||
>上一步</view>
|
||||
<view
|
||||
class="next"
|
||||
@click="targetBehaviorClick(2)"
|
||||
>立即创建</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vueScale from "@/components/vueScale"; // 体重标尺
|
||||
export default {
|
||||
components: {
|
||||
vueScale,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 第一部分基本信息 start
|
||||
//#region
|
||||
percentplan1: 0,
|
||||
// 性别--start
|
||||
sex: "1", //1是男生2是女生
|
||||
sexShow: true, // 性别展示
|
||||
// 性别 -- end
|
||||
// 年龄 -- start
|
||||
age: Date.parse(new Date()), // 年龄默认是当前时间
|
||||
maxDate: Date.parse(new Date()), // 最大年龄为当前年月日
|
||||
dateShow: false, // 显示日期
|
||||
ageShow: false, // 显示年龄模块是否显示
|
||||
// 年龄 -- end
|
||||
// 身高体重 -- start
|
||||
heightWeightShow: false, // 身高体重模块展示
|
||||
weight: 11,
|
||||
height: 180,
|
||||
styles: {
|
||||
line: "#dbdbdb",
|
||||
bginner: "#fbfbfb",
|
||||
bgoutside: "#ffffff",
|
||||
font: "#404040",
|
||||
fontColor: "#404040",
|
||||
fontSize: 16,
|
||||
},
|
||||
weightU: "", //体重
|
||||
heightU: "", // 身高
|
||||
// 身高体重 -- end
|
||||
//#endregion
|
||||
// 第一部分基本信息 end
|
||||
// 第二部分
|
||||
//#region
|
||||
percentplan2: 0,
|
||||
targetShow: false, // 减脂目标模块 是否显示减脂类型
|
||||
activedTarget: "", // 减脂
|
||||
targetWeightShow: false, // 目标体重页面展示
|
||||
weightTargetU: 50,
|
||||
//#endregion
|
||||
behaviorShow: false, // 默认行为习惯页面不展示
|
||||
percentplan3: 0,
|
||||
activedbehaviarTarget: "", // 默认没有任何运动量
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//性别----------- 选择性别 1男2女
|
||||
clickSex(sex) {
|
||||
this.percentplan1 = 0;
|
||||
this.sex = sex;
|
||||
this.percentplan1 = uni.$u.range(0, 100, this.percentplan1 + 33.33);
|
||||
this.sexShow = false;
|
||||
this.ageShow = true;
|
||||
this.dateShow = true;
|
||||
console.log(this.percentplan1, this.sex);
|
||||
},
|
||||
|
||||
// 年龄-------------确认选择了出生年月日
|
||||
confirmAge(e) {
|
||||
this.age = e.value;
|
||||
this.ageShow = false; // 年龄页面弹窗不显示
|
||||
this.dateShow = false; // 关闭时间弹窗
|
||||
this.percentplan1 = uni.$u.range(0, 100, this.percentplan1 + 33.33); // 增加进度
|
||||
this.heightWeightShow = true; // 展示身高体重模块
|
||||
},
|
||||
// 年龄 ----- 取消选择年龄
|
||||
camcelAge() {
|
||||
this.ageShow = false; // // 年龄页面弹窗不显示
|
||||
this.dataShow = false; // 关闭时间弹窗
|
||||
this.percentplan1 = 0; // 进度为0
|
||||
this.sexShow = true; // 显示性别页面
|
||||
},
|
||||
//年龄------------- 过滤出生年月日
|
||||
formatter(type, value) {
|
||||
if (type === "year") {
|
||||
return `${value}年`;
|
||||
}
|
||||
if (type === "month") {
|
||||
return `${value}月`;
|
||||
}
|
||||
if (type === "day") {
|
||||
return `${value}日`;
|
||||
}
|
||||
return value;
|
||||
},
|
||||
// 体重---------标尺滚动
|
||||
scrollWeight(msg) {
|
||||
this.weightU = msg;
|
||||
},
|
||||
// 体重---------标尺滚动
|
||||
scrollHeight(msg) {
|
||||
this.heightU = msg;
|
||||
},
|
||||
// 体重 ------------ 点击 1 上一页 2 下一页
|
||||
weightClick(type) {
|
||||
if (type === 1) {
|
||||
this.percentplan1 = 33.33;
|
||||
this.heightWeightShow = false; // 关闭当前体重页面
|
||||
this.ageShow = true;
|
||||
this.dateShow = true;
|
||||
} else {
|
||||
this.percentplan1 = 100; // 第一个进度为100
|
||||
this.heightWeightShow = false; // 关闭当前体重页面
|
||||
this.targetShow = true; // 目标页面展示
|
||||
}
|
||||
},
|
||||
// 目标 ------------点击 1上一页 2 下一页
|
||||
targetClick(type) {
|
||||
if (type === 1) {
|
||||
console.log(1);
|
||||
this.percentplan1 = 66.66;
|
||||
this.heightWeightShow = true; // 打开体重身高页面
|
||||
this.targetShow = false; // 关闭目标页面 减重 塑性 增肌
|
||||
this.percentplan2 = 0;
|
||||
} else {
|
||||
console.log(2);
|
||||
this.percentplan2 = 50;
|
||||
this.targetShow = false; // 目标页面不展示 展示下一面目标体重
|
||||
this.targetWeightShow = true; // 目标体重页面展示
|
||||
}
|
||||
},
|
||||
//目标体重-------------标尺滚动
|
||||
scrollTargetWeight(msg) {
|
||||
this.weightTargetU = msg;
|
||||
},
|
||||
// 目标 体重的 --------- 1上一页 2 下一页
|
||||
targetWeightClick(type) {
|
||||
if (type === 1) {
|
||||
console.log(1);
|
||||
this.percentplan2 = 0;
|
||||
this.targetShow = true; // 打开目标页面 减重 塑性 增肌
|
||||
this.targetWeightShow = false; // 打开体重身高页面
|
||||
} else {
|
||||
console.log(2);
|
||||
this.percentplan2 = 100;
|
||||
this.targetWeightShow = false; // 隐藏目标体重页面
|
||||
this.behaviorShow = true; // 打开行为习惯页面
|
||||
}
|
||||
},
|
||||
// 目标 运动量--------- 1上一页 2 下一页
|
||||
targetBehaviorClick(type) {
|
||||
if (type === 1) {
|
||||
console.log(1);
|
||||
this.percentplan2 = 50;
|
||||
this.targetWeightShow = true; // 目标体重页面展示
|
||||
this.behaviorShow = false; // 关闭运动量选择页面
|
||||
} else {
|
||||
console.log(2);
|
||||
|
||||
console.log("创建成功了。。。");
|
||||
this.$refs.uToast.show({
|
||||
type: "success",
|
||||
title: "创建成功",
|
||||
message: "创建成功啦",
|
||||
iconUrl:
|
||||
"https://cdn.uviewui.com/uview/demo/toast/success.png",
|
||||
complete() {
|
||||
this.percentplan3 = 100;
|
||||
this.behaviorShow = false; // 关闭运动量页面
|
||||
uni.navigateBack({});
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.info {
|
||||
// 完善信息顶部进度条
|
||||
.plan {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-m;
|
||||
color: $text-color;
|
||||
padding: $padding;
|
||||
.plan-3,
|
||||
.plan-1,
|
||||
.plan-2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
span {
|
||||
padding-bottom: $padding * 0.6;
|
||||
}
|
||||
}
|
||||
.plan-2 {
|
||||
margin: $margin;
|
||||
}
|
||||
.line-progress {
|
||||
width: 180rpx;
|
||||
}
|
||||
}
|
||||
|
||||
//展示主要内容部分
|
||||
.plan-content {
|
||||
width: 100%;
|
||||
min-height: 70vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
.info-title {
|
||||
font-size: $title-size + 10;
|
||||
font-weight: bold;
|
||||
margin-top: $margin - 10;
|
||||
}
|
||||
.info-des {
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
margin-top: $margin;
|
||||
}
|
||||
// 性别
|
||||
.sex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
.sex-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin-top: $margin * 3;
|
||||
.sex-item-avatar {
|
||||
box-shadow: 0 0 10rpx 4rpx
|
||||
rgba($color: $main-color, $alpha: 0.1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
//年龄
|
||||
.age {
|
||||
padding-top: $padding * 0.6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
.year {
|
||||
font-size: $title-size * 1.9;
|
||||
font-weight: bold;
|
||||
color: $main-color;
|
||||
margin-top: $margin;
|
||||
}
|
||||
}
|
||||
// 体重
|
||||
}
|
||||
// 体重身高模块展示
|
||||
.count {
|
||||
color: $main-color;
|
||||
text-align: center;
|
||||
margin-top: $margin * 2;
|
||||
margin-bottom: $margin * 0.1;
|
||||
font-size: $title-size + 2;
|
||||
span {
|
||||
font-weight: bold;
|
||||
font-size: $title-size * 2.2;
|
||||
margin-right: $margin * 0.3;
|
||||
}
|
||||
}
|
||||
.pre-next {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
margin-top: $margin * 2;
|
||||
view {
|
||||
background-color: rgba($color: $main-color, $alpha: 0.5);
|
||||
color: $text-color;
|
||||
font-size: $title-size;
|
||||
font-weight: bold;
|
||||
padding: $padding * 0.6 $padding * 3;
|
||||
border-radius: 10rpx;
|
||||
margin: $margin;
|
||||
}
|
||||
.next {
|
||||
background-color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 健康目标模块展示
|
||||
.target-content {
|
||||
.target-type {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
margin-top: $margin * 2;
|
||||
flex-wrap: wrap;
|
||||
.target-type-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray-m;
|
||||
.target-img {
|
||||
background: #ececec;
|
||||
border-radius: $radius;
|
||||
margin: $margin $margin * 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
132
pages/evaluation/introduce.vue
Normal file
132
pages/evaluation/introduce.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<!--
|
||||
* @Description:测评前置,用于测试介绍展示
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-05 09:16:10
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-05 13:58:47
|
||||
-->
|
||||
<template>
|
||||
<view class="introduce">
|
||||
<view
|
||||
class="intro-history"
|
||||
@click="$Router.push({name:'EvaluationResult'})"
|
||||
>测评记录</view>
|
||||
<view class="intro-content">
|
||||
<view class="intro-title">肌肤年龄测评</view>
|
||||
<u-read-more
|
||||
class="intro-des"
|
||||
:toggle="true"
|
||||
showHeight="140"
|
||||
ref="uReadMore"
|
||||
:shadowStyle="shadowStyle"
|
||||
color='#34ce98'
|
||||
textIndent="0"
|
||||
>
|
||||
<rich-text :nodes="content"></rich-text>
|
||||
</u-read-more>
|
||||
<u-image
|
||||
class="intro-img"
|
||||
width="100%"
|
||||
radius="20rpx"
|
||||
height="700rpx"
|
||||
:src="require('../../static/imgs/indro.png')"
|
||||
:lazy-load="true"
|
||||
/>
|
||||
<view class="answer">开始测评</view>
|
||||
</view>
|
||||
<view class="remark">
|
||||
本评测会收集孕产情况、健康状况、家族病史、用药情况信息，用于开展相关评测，为你生成分析报告。
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: `本测试预计完成时间5-8分钟
|
||||
<br/>
|
||||
—
|
||||
<br/>
|
||||
适用于18-65岁，存在亚健康或尿酸偏高人群`,
|
||||
shadowStyle: {
|
||||
backgroundImage: "none",
|
||||
paddingTop: "0",
|
||||
marginTop: "20rpx",
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.introduce {
|
||||
background-color: $main-color;
|
||||
min-height: 100vh;
|
||||
.intro-history {
|
||||
padding: $padding * 1.5 $padding;
|
||||
color: $window-color;
|
||||
text-decoration: underline;
|
||||
font-size: $title-size-lg;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
// 测评展示
|
||||
.intro-content {
|
||||
background: rgba($color: #fff, $alpha: 1);
|
||||
min-height: 30vh;
|
||||
padding: 0 $padding;
|
||||
margin: $margin * 1.5;
|
||||
border-radius: $radius;
|
||||
position: relative;
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
// 标题
|
||||
.intro-title {
|
||||
font-size: $title-size * 1.8;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
position: relative;
|
||||
top: -40rpx;
|
||||
}
|
||||
// 介绍
|
||||
.intro-des {
|
||||
line-height: $title-size * 1.8;
|
||||
color: $text-color;
|
||||
position: relative;
|
||||
top: -10rpx;
|
||||
font-size: $title-size-m;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
// 图片
|
||||
.intro-img {
|
||||
margin-top: $padding * 0.8;
|
||||
}
|
||||
// 开始测评
|
||||
.answer {
|
||||
position: absolute;
|
||||
bottom: -30rpx;
|
||||
width: 400rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
left: 50%;
|
||||
text-align: center;
|
||||
background: rgba($color: #fff, $alpha: 0.94);
|
||||
margin-left: -200rpx;
|
||||
border-radius: $radius-m * 4;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
font-size: $title-size-m + 6;
|
||||
}
|
||||
}
|
||||
// 备注信息
|
||||
.remark {
|
||||
color: $text-gray;
|
||||
font-size: $title-size - 6;
|
||||
padding: $padding * 2 $padding;
|
||||
line-height: $title-size * 1.3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
186
pages/evaluation/list.vue
Normal file
186
pages/evaluation/list.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<!--
|
||||
* @Description:用于展示评测列表，带分页加载更多~
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-05 09:13:53
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-05 14:07:11
|
||||
-->
|
||||
<template>
|
||||
<view class="evaluation-list ">
|
||||
<view
|
||||
class="evaluation-item"
|
||||
v-for="(item,index) in evalList"
|
||||
:key="index"
|
||||
>
|
||||
<!-- 评测列表主要内容 标题 图片 描述 -->
|
||||
<view class="--content">
|
||||
<u-image
|
||||
class="content-img"
|
||||
width="170rpx"
|
||||
height="170rpx"
|
||||
radius="20rpx"
|
||||
:src="require('../../static/imgs/test.png')"
|
||||
:lazy-load="true"
|
||||
/>
|
||||
<view class="title-des">
|
||||
<view class="title">抗衰护肤测评抗衰护肤测评抗衰护肤测评</view>
|
||||
<view class="des">科学护肤，‘精准’防衰老，延缓</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分数 -->
|
||||
<view
|
||||
class="score"
|
||||
v-if="index === 0"
|
||||
><span>80</span>分</view>
|
||||
|
||||
<!-- 评测状态 -->
|
||||
<view class="--status">
|
||||
<!-- 已测试展示 状态-->
|
||||
<view
|
||||
class="status"
|
||||
v-if="index === 0"
|
||||
>
|
||||
<span class="dian">·</span>今日最新完成
|
||||
</view>
|
||||
<view
|
||||
v-if="index === 0"
|
||||
class="history"
|
||||
@click="$Router.push({name:'EvaluationResult'})"
|
||||
>
|
||||
查看历史结果
|
||||
</view>
|
||||
<!-- 未测试展示 状态-->
|
||||
<view
|
||||
class="status"
|
||||
v-if="index !== 0"
|
||||
>
|
||||
<span class="dian">·</span>
|
||||
<span class="person">32828837</span>
|
||||
人已测 | 约4~8分钟
|
||||
</view>
|
||||
<u-icon
|
||||
name="arrow-right"
|
||||
:color="index === 0?'#26a377':'#faa81a'"
|
||||
size="14"
|
||||
:bold="true"
|
||||
:label="index === 0?'重新评测':'开始测评'"
|
||||
labelPos="left"
|
||||
labelSize="14"
|
||||
space="1"
|
||||
:labelColor="index === 0?'#26a377':'#faa81a'"
|
||||
@click="$Router.push({name:'EvaluationIntroduce'})"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 没有更多 -->
|
||||
<view class="no-more">没有更多~</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
evalList: 4,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 列表
|
||||
.evaluation-item {
|
||||
background-color: #fff;
|
||||
padding: $padding;
|
||||
margin: $margin;
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
border-radius: $radius;
|
||||
position: relative;
|
||||
// 评测列表主要内容
|
||||
.--content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
.content-img {
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
.title-des {
|
||||
padding-left: $padding - 10;
|
||||
width: 440rpx;
|
||||
.title {
|
||||
font-size: $title-size + 4;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 340rpx;
|
||||
}
|
||||
.des {
|
||||
font-size: $title-size-lg;
|
||||
color: $text-gray;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-top: $padding - 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .测试状态
|
||||
.--status {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
color: $text-gray-m;
|
||||
font-size: $title-size-m;
|
||||
padding-top: $padding;
|
||||
.status {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
.dian {
|
||||
font-size: $title-size-lg;
|
||||
margin-right: $padding * 0.2;
|
||||
font-weight: bold;
|
||||
}
|
||||
.person {
|
||||
color: #faa81a;
|
||||
}
|
||||
}
|
||||
.history {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
// 分数
|
||||
.score {
|
||||
font-size: $title-size-m - 2;
|
||||
color: $text-gray-m;
|
||||
position: absolute;
|
||||
right: $padding;
|
||||
top: $padding - 10;
|
||||
span {
|
||||
font-size: 50rpx;
|
||||
color: $main-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 没有更多
|
||||
.no-more {
|
||||
color: $uni-text-color-disable;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: $padding;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
</style>
|
||||
279
pages/evaluation/result.vue
Normal file
279
pages/evaluation/result.vue
Normal file
@@ -0,0 +1,279 @@
|
||||
<!--
|
||||
* @Description:测评结果页面,用于展示测评结果内容
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-05 09:16:10
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-06 10:54:57
|
||||
-->
|
||||
<template>
|
||||
<view class="answer">
|
||||
<!-- 头像 -->
|
||||
<view class="user">
|
||||
<view class="left">
|
||||
<u-image
|
||||
width="80rpx"
|
||||
height="80rpx"
|
||||
:src="require('../../static/imgs/indro.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>
|
||||
<span class="name">Aimee·ZhangAimee·ZhangAimee·ZhangAimee·Zhang</span>
|
||||
</view>
|
||||
<view class="right">
|
||||
<u-icon
|
||||
name="arrow-right"
|
||||
color="#34ce98"
|
||||
size="14"
|
||||
:bold="true"
|
||||
label="重新评测"
|
||||
labelPos="left"
|
||||
labelSize="14"
|
||||
labelColor="#34ce98"
|
||||
space="1"
|
||||
@click="$Router.push({name:'EvaluationIntroduce'})"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 皮肤年龄 -->
|
||||
<view class="answer-item">
|
||||
<!-- 标题 -->
|
||||
<view class="title-content">
|
||||
<view class="title">你的肌肤年龄为35岁</view>
|
||||
<u-icon
|
||||
name="share-square"
|
||||
color="#333"
|
||||
size="30"
|
||||
/>
|
||||
</view>
|
||||
<!-- 雷达图 -->
|
||||
<view class="charts-box">
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts
|
||||
type="radar"
|
||||
:chartData="chartData"
|
||||
:loadingType="4"
|
||||
background="none"
|
||||
:tooltipShow="false"
|
||||
:tapLegend="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 描述 -->
|
||||
<view class="des">
|
||||
饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。
|
||||
</view>
|
||||
</view>
|
||||
<!-- 建议改进 -->
|
||||
<view class="answer-item">
|
||||
<!-- 标题 -->
|
||||
<view class="title-content">
|
||||
<view class="title">建议从一下几个方面改进</view>
|
||||
</view>
|
||||
<block
|
||||
v-for="(itme,index) in 3"
|
||||
:key="index"
|
||||
>
|
||||
<view class="title2">
|
||||
<u-image
|
||||
width="34rpx"
|
||||
height="34rpx"
|
||||
:src="require('../../static/icon/health.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>
|
||||
<span>严厉节食导致营养不良，内分泌紊乱</span>
|
||||
</view>
|
||||
<!-- 描述 -->
|
||||
<view class="des">
|
||||
饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 营养建议 -->
|
||||
<view class="answer-item">
|
||||
<!-- 标题 -->
|
||||
<view class="title-content">
|
||||
<view class="title">营养建议</view>
|
||||
</view>
|
||||
<block
|
||||
v-for="(item,index) in 3"
|
||||
:key="index"
|
||||
>
|
||||
<view class="title2">
|
||||
<span>{{item}}. 低Gi</span>
|
||||
</view>
|
||||
<!-- 描述 -->
|
||||
<view class="des">
|
||||
饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 更多 -->
|
||||
<view class="answer-item">
|
||||
<!-- 标题 -->
|
||||
<view class="title-content">
|
||||
<view class="title">更多护肤知识</view>
|
||||
<u-icon
|
||||
name="arrow-right"
|
||||
color="#333"
|
||||
size="20"
|
||||
/>
|
||||
</view>
|
||||
<!-- 横向滚动推荐 -->
|
||||
<scroll-view
|
||||
class="scroll-view_H"
|
||||
scroll-x="true"
|
||||
>
|
||||
<view
|
||||
v-for="(item,index) in 6"
|
||||
:key="index"
|
||||
id="demo1"
|
||||
class="scroll-view-item_H"
|
||||
>
|
||||
<u-image
|
||||
width="180rpx"
|
||||
height="180rpx"
|
||||
:src="require('../../static/imgs/indro.png')"
|
||||
:lazy-load="true"
|
||||
radius="4"
|
||||
/>
|
||||
<view class="title">{{item}}正确洗脸</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chartData: {
|
||||
categories: [
|
||||
"餐饮营养",
|
||||
"面部肌肤活力",
|
||||
"洗护习惯",
|
||||
"生活方式",
|
||||
"皮肤抵抗力",
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: [99, 34, 100, 45, 17, 92],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.answer {
|
||||
min-height: 100vh;
|
||||
padding-bottom: $padding;
|
||||
|
||||
// 用户头像
|
||||
.user {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: $padding;
|
||||
border-bottom: solid 1rpx #f7f7f7;
|
||||
margin-bottom: $margin * 1.5;
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-m;
|
||||
.name {
|
||||
padding-left: $padding;
|
||||
width: 320rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: $text-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
border: solid 1rpx rgba($color: $main-color, $alpha: 0.6);
|
||||
padding: 10rpx $padding * 0.4 10rpx $padding * 0.7;
|
||||
border-radius: $padding;
|
||||
}
|
||||
}
|
||||
// 展示列表
|
||||
.answer-item {
|
||||
background: rgba($color: #fff, $alpha: 1);
|
||||
padding: $padding * 1.3 $padding;
|
||||
margin: $margin;
|
||||
border-radius: $radius;
|
||||
position: relative;
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
//标题
|
||||
.title-content {
|
||||
font-size: $title-size + 6;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
.title {
|
||||
color: $text-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
// 描述
|
||||
.des {
|
||||
font-size: $title-size - 4;
|
||||
color: $text-color;
|
||||
line-height: $title-size * 2 - 18;
|
||||
}
|
||||
// 雷达图
|
||||
.charts-box {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
margin: $margin 0;
|
||||
}
|
||||
//二级标题
|
||||
.title2 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
span {
|
||||
font-size: $title-size-m + 2;
|
||||
font-weight: bold;
|
||||
margin-left: $margin * 0.3;
|
||||
}
|
||||
}
|
||||
// 横向滚动
|
||||
.scroll-view_H {
|
||||
white-space: nowrap;
|
||||
border-radius: $radius;
|
||||
.scroll-view-item_H {
|
||||
display: inline-block;
|
||||
width: 180rpx;
|
||||
margin: $margin * 1.6 $margin * 0.5 $margin * 0.3 $margin * 0.5;
|
||||
box-shadow: 0 0 10rpx 4rpx
|
||||
rgba($color: $main-color, $alpha: 0.1);
|
||||
.title {
|
||||
text-align: center;
|
||||
padding: $padding * 0.6 $padding * 0.3;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: $text-gray;
|
||||
font-size: $title-size - 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
79
pages/record/addFoods.vue
Normal file
79
pages/record/addFoods.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-11 11:27:17
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-11 16:52:38
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="add-foods">
|
||||
<!-- 搜索页面 -->
|
||||
<u-search
|
||||
:show-action="true"
|
||||
actionText="搜索"
|
||||
:animation="true"
|
||||
:clearabled="true"
|
||||
placeholder="请输入食品名称"
|
||||
/>
|
||||
<!-- 食品列表 -->
|
||||
<goodsList
|
||||
:lists='lists'
|
||||
type="dian"
|
||||
@addGoods="addGoods"
|
||||
/>
|
||||
<!-- 添加食谱弹窗 -->
|
||||
<addFoods
|
||||
:addShow="addShow"
|
||||
:selectGoods="selectGoods"
|
||||
:decimals="true"
|
||||
@confirm="confirmHandle"
|
||||
@close="closeHandle"
|
||||
max="999"
|
||||
/>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import goodsList from "@/components/foods";
|
||||
import addFoods from "@/components/addGoods";
|
||||
|
||||
export default {
|
||||
components: { goodsList, addFoods },
|
||||
data() {
|
||||
return {
|
||||
lists: [1, 2, 3, 4, 5, 6], // 食品列表
|
||||
addShow: false, // 添加食品显示
|
||||
selectGoods: [1], // 选择新增的食品
|
||||
digitKeyboardValue: 0, // 选择按钮返回的值
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 监听点击键盘触发返回值
|
||||
confirmHandle(value) {
|
||||
console.log(typeof value);
|
||||
//点击键盘完成的回调函数
|
||||
this.digitKeyboardValue = value;
|
||||
this.addShow = false;
|
||||
},
|
||||
closeHandle() {
|
||||
//键盘关闭的回调函数
|
||||
this.addShow = false;
|
||||
},
|
||||
// 监听子组件的新增方法
|
||||
addGoods(e) {
|
||||
console.log("父组件监听到了子组件的新增方法", e);
|
||||
this.addShow = true;
|
||||
},
|
||||
// 监听子组件的新增方法
|
||||
tabGoodsInfo(e) {
|
||||
console.log("父组件监听到了子组件的商品详情页面", e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.add-foods {
|
||||
padding: $padding;
|
||||
}
|
||||
</style>
|
||||
393
pages/record/drink.vue
Normal file
393
pages/record/drink.vue
Normal file
@@ -0,0 +1,393 @@
|
||||
<!--
|
||||
* @Description:喝水记录 ，记录当前的喝水情况
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-06 14:48:07
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-10 10:56:31
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="drink">
|
||||
<!-- 喝水及水杯文字 -->
|
||||
<view class="drink-content">
|
||||
<view class="title">再喝<span class="num">3.8</span>杯<span class="total">（1600ml）</span></view>
|
||||
<!-- 水杯动态图片 -->
|
||||
<view class="wave-content">
|
||||
<u-image
|
||||
class="grass"
|
||||
:src="require('../../static/imgs/gress.png')"
|
||||
:lazy-load="true"
|
||||
mode="scaleToFill"
|
||||
width="320rpx"
|
||||
height="520rpx"
|
||||
/>
|
||||
<view
|
||||
class="wave"
|
||||
:style="{'--ballPercent': -ballPercent+40+'%'}"
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 目标 -->
|
||||
<view class="water-target">
|
||||
<view
|
||||
class="target-item"
|
||||
@click="targetShow = true"
|
||||
>今日目标
|
||||
<u-icon
|
||||
class="target-icon"
|
||||
name="arrow-right"
|
||||
color="#666"
|
||||
size="14"
|
||||
:bold="true"
|
||||
label="1600ml"
|
||||
labelPos="left"
|
||||
labelSize="16"
|
||||
labelColor="#666"
|
||||
space="6"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
class="target-item"
|
||||
@click="waterCShow = true"
|
||||
>水杯容量
|
||||
<u-icon
|
||||
class="target-icon"
|
||||
name="arrow-right"
|
||||
color="#666"
|
||||
size="14"
|
||||
:bold="true"
|
||||
label="420ml"
|
||||
labelPos="left"
|
||||
labelSize="16"
|
||||
labelColor="#666"
|
||||
space="6"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 目标弹出层 -->
|
||||
<view>
|
||||
<u-picker
|
||||
:show="targetShow"
|
||||
:columns="targetcolumns"
|
||||
title="每天喝水目标"
|
||||
keyName="label"
|
||||
confirmColor="#34ce98"
|
||||
:closeOnClickOverlay="true"
|
||||
@close="targetShow = false"
|
||||
@confirm="targetSure"
|
||||
/>
|
||||
<u-picker
|
||||
:show="waterCShow"
|
||||
:columns="watercolumns"
|
||||
title="设置水杯容量"
|
||||
keyName="label"
|
||||
confirmColor="#34ce98"
|
||||
:closeOnClickOverlay="true"
|
||||
@close="waterCShow = false"
|
||||
@confirm="waterCSure"
|
||||
/>
|
||||
</view>
|
||||
<!-- 加水 -->
|
||||
<view
|
||||
class="add-water"
|
||||
@click="ballPercent += 10"
|
||||
>
|
||||
<u-image
|
||||
class="grass"
|
||||
:src="require('../../static/imgs/gress2.png')"
|
||||
:lazy-load="true"
|
||||
mode="scaleToFill"
|
||||
width="60rpx"
|
||||
height="80rpx"
|
||||
/>
|
||||
<span>一杯水</span>
|
||||
<u-icon
|
||||
class="add-icon"
|
||||
name="plus-circle-fill"
|
||||
color="#34ce98"
|
||||
size="24"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 喝水记录 -->
|
||||
<view class="--history">
|
||||
<view class="title">喝水记录</view>
|
||||
<view
|
||||
class="lists"
|
||||
v-for="item in 4"
|
||||
:key="item"
|
||||
>
|
||||
<view class="lists-water">
|
||||
<u-icon
|
||||
size="30"
|
||||
:name="require('../../static/icon/water-icon.png')"
|
||||
/>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<view class="list-item-title">水<span>14:39</span></view>
|
||||
420ml
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ballPercent: 0, // 喝水比例
|
||||
targetShow: false,
|
||||
targetcolumns: [
|
||||
[
|
||||
{
|
||||
label: "1600ml",
|
||||
// 其他属性值
|
||||
number: 1600,
|
||||
// ...
|
||||
},
|
||||
{
|
||||
label: "1700ml",
|
||||
number: 1700,
|
||||
},
|
||||
],
|
||||
],
|
||||
waterCShow: false,
|
||||
watercolumns: [
|
||||
[
|
||||
{
|
||||
label: "1600ml",
|
||||
// 其他属性值
|
||||
number: 1600,
|
||||
// ...
|
||||
},
|
||||
{
|
||||
label: "1700ml",
|
||||
number: 1700,
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 设置目标弹出点击了确认方法
|
||||
targetSure(e) {
|
||||
console.log("触发了targetSure");
|
||||
this.targetShow = false;
|
||||
console.log(e.value[0]);
|
||||
},
|
||||
|
||||
// 设置水杯容量点击确认触发方法
|
||||
waterCSure(e) {
|
||||
console.log("触发了waterCSure");
|
||||
this.targetShow = false;
|
||||
console.log(e.value[0]);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.drink {
|
||||
// 喝水 水杯及文字
|
||||
.drink-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: $padding * 2 0;
|
||||
position: relative;
|
||||
// 标题 再喝水
|
||||
.title {
|
||||
font-size: $title-size + 4;
|
||||
color: $main-color;
|
||||
font-weight: normal;
|
||||
margin: $margin * 2;
|
||||
.num {
|
||||
font-size: $title-size * 2.3;
|
||||
padding: 0 $padding * 0.3;
|
||||
font-weight: bold;
|
||||
}
|
||||
.total {
|
||||
font-size: $title-size;
|
||||
color: $text-gray-m;
|
||||
padding-left: $padding * 0.2;
|
||||
}
|
||||
}
|
||||
// 加一杯水
|
||||
.add-water {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size;
|
||||
color: $text-color;
|
||||
margin-top: $margin * 2;
|
||||
position: relative;
|
||||
span {
|
||||
padding-top: $padding * 0.4;
|
||||
}
|
||||
.add-icon {
|
||||
position: absolute;
|
||||
top: $margin + 8;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
// 目标
|
||||
.water-target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
color: $text-gray-m;
|
||||
font-size: $title-size;
|
||||
position: absolute;
|
||||
z-index: 110;
|
||||
right: $padding * 1.4;
|
||||
top: 50%;
|
||||
.target-item {
|
||||
margin-top: $margin * 1.6;
|
||||
.target-icon {
|
||||
padding-top: $padding * 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 喝水记录
|
||||
.--history {
|
||||
padding: $padding;
|
||||
// 标题
|
||||
.title {
|
||||
font-size: $title-size * 1.4;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
padding-left: $padding;
|
||||
padding-bottom: $padding;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 8rpx;
|
||||
height: 45rpx;
|
||||
left: 0;
|
||||
background-color: $main-color;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 列表
|
||||
.lists {
|
||||
// background-color: pink;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
border-bottom: solid 1rpx #f7f7f7;
|
||||
.lists-water {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
$main-color,
|
||||
$main-color * 0.9
|
||||
);
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.list-item {
|
||||
flex: 1;
|
||||
margin-left: $margin * 0.7;
|
||||
font-size: $title-size;
|
||||
color: $text-gray-m;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
margin: $margin 0 $margin $margin * 0.7;
|
||||
.list-item-title {
|
||||
font-size: $title-size + 3;
|
||||
color: $text-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
span {
|
||||
margin-top: $margin * 0.4;
|
||||
background-color: #f7f7f7;
|
||||
padding: 4rpx 10rpx;
|
||||
border-radius: 50rpx;
|
||||
font-weight: normal;
|
||||
font-size: $title-size - 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 水杯动画
|
||||
.wave-content {
|
||||
position: relative;
|
||||
z-index: 110;
|
||||
.grass {
|
||||
position: relative;
|
||||
z-index: 120099;
|
||||
}
|
||||
|
||||
.wave {
|
||||
position: absolute;
|
||||
width: 290rpx;
|
||||
height: 500rpx;
|
||||
background-color: rgba($color: $main-color, $alpha: 0.6);
|
||||
background-size: 100%;
|
||||
overflow: hidden;
|
||||
top: 10rpx;
|
||||
left: 20rpx;
|
||||
z-index: 10;
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1000rpx;
|
||||
height: 1000rpx;
|
||||
top: var(--ballPercent);
|
||||
left: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 45%;
|
||||
transform: translate(-50%, -70%) rotate(0);
|
||||
animation: rotate 4s linear infinite;
|
||||
z-index: 10;
|
||||
}
|
||||
&::after {
|
||||
border-radius: 47%;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
transform: translate(-50%, -70%) rotate(0);
|
||||
animation: rotate 6s linear -5s infinite;
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
50% {
|
||||
transform: translate(-50%, -73%) rotate(180deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -70%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
289
pages/record/foods.vue
Normal file
289
pages/record/foods.vue
Normal file
@@ -0,0 +1,289 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-11 08:54:49
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-11 15:41:12
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="record--foods">
|
||||
<!-- 饮食进度条 -->
|
||||
<view class="cricle-content">
|
||||
<view class="info">饮食摄入<span>879</span></view>
|
||||
<arprogress
|
||||
:percent="percent"
|
||||
inactiveColor="#f5f4f9"
|
||||
activeColor="#34ce98"
|
||||
width="300"
|
||||
class="cricle"
|
||||
borderWidth="20"
|
||||
>
|
||||
<span>还可以吃</span>
|
||||
<span class="num">1829</span>
|
||||
<span>推荐预算1829</span>
|
||||
</arprogress>
|
||||
<view class="info">运动消耗<span>879</span></view>
|
||||
<view class="ic-left">摄入量推荐</view>
|
||||
<u-icon
|
||||
class="ic-day"
|
||||
name="checkmark-circle"
|
||||
color="#34ce98"
|
||||
size="10"
|
||||
label="4天"
|
||||
labelColor="#34ce98"
|
||||
labelSize="10"
|
||||
space="3"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 没有饮食记录 -->
|
||||
<!-- <view class="no-foods">
|
||||
<u-image
|
||||
:src="require('../../static/imgs/no-foods.png')"
|
||||
:lazy-load="true"
|
||||
radius="10rpx"
|
||||
mode="widthFix"
|
||||
width="300rpx"
|
||||
class="no-foods-img"
|
||||
/>
|
||||
<view>还没有记录</view>
|
||||
<view>请点击屏幕下方按钮来添加</view>
|
||||
</view> -->
|
||||
<!-- 有饮食记录 -->
|
||||
<view
|
||||
class="foods-add"
|
||||
v-for="item in 2"
|
||||
:key="item"
|
||||
>
|
||||
<view class="foods-title">
|
||||
<view class="title-left">早餐<span>建议493~603千卡</span></view>
|
||||
<view class="title-right">
|
||||
558<span class="dw">千卡</span>
|
||||
<u-icon
|
||||
name="arrow-right"
|
||||
color="#ddd"
|
||||
size="13"
|
||||
:bold="true"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<goodsList
|
||||
:lists="lists"
|
||||
type="no-dian"
|
||||
@editGoods="editGoods"
|
||||
/>
|
||||
|
||||
</view>
|
||||
<!-- 加餐模块 -->
|
||||
<u-action-sheet
|
||||
:actions="addEatList"
|
||||
title="加餐模块"
|
||||
:closeOnClickOverlay="true"
|
||||
:closeOnClickAction="true"
|
||||
@select="selectClick"
|
||||
cancelText="取消"
|
||||
:show="addEatShow"
|
||||
@close="addEatShow = false"
|
||||
></u-action-sheet>
|
||||
<!-- 底部 早餐等菜单 -->
|
||||
<u-tabbar
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
:safeAreaInsetBottom="true"
|
||||
inactiveColor="#333"
|
||||
@click="tabbarClick"
|
||||
>
|
||||
<u-tabbar-item
|
||||
text="+早餐"
|
||||
@click="tabbarClick"
|
||||
:icon="require('../../static/imgs/foods-1.png')"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="+晚餐"
|
||||
@click="tabbarClick"
|
||||
:icon="require('../../static/imgs/foods-2.png')"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="+晚餐"
|
||||
@click="tabbarClick"
|
||||
:icon="require('../../static/imgs/foods-3.png')"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="+加餐"
|
||||
@click="tabbarClick"
|
||||
:icon="require('../../static/imgs/foods-4.png')"
|
||||
></u-tabbar-item>
|
||||
</u-tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import arprogress from "@/components/ar-circle-progress/index.vue";
|
||||
import goodsList from "@/components/foods";
|
||||
export default {
|
||||
components: {
|
||||
arprogress,
|
||||
goodsList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
percent: 1, // 摄入量 100 百分比
|
||||
tabarIndex: 0,
|
||||
lists: [1, 2, 3],
|
||||
addEatShow: false, // 加餐弹窗默认不显示
|
||||
addEatList: [
|
||||
{
|
||||
name: "上午加餐",
|
||||
},
|
||||
{
|
||||
name: "下午加餐",
|
||||
},
|
||||
{
|
||||
name: "晚上加餐",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 底部按钮点击触发的事件 早餐 午餐 晚餐 加餐
|
||||
tabbarClick(e) {
|
||||
console.log("点击事件,,,,");
|
||||
console.log(e);
|
||||
this.tabarIndex = e;
|
||||
if (e === 3) {
|
||||
this.addEatShow = true;
|
||||
} else {
|
||||
this.$Router.push({
|
||||
name: "AddFoods",
|
||||
});
|
||||
}
|
||||
},
|
||||
// 选择了加餐跳转
|
||||
selectClick(e) {
|
||||
console.log(e);
|
||||
this.$Router.push({
|
||||
name: "AddFoods",
|
||||
});
|
||||
// 选择加餐
|
||||
},
|
||||
// 编辑食品
|
||||
editGoods(e) {
|
||||
console.log("父组件监听到了子组件的商品详情页面", e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.record--foods {
|
||||
padding: $padding $padding $padding * 2 $padding;
|
||||
// background: green;
|
||||
}
|
||||
// 饮食进度条
|
||||
.cricle-content {
|
||||
box-shadow: 0 0 4rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
font-size: $title-size-m - 6;
|
||||
padding: $padding * 1.8 $padding;
|
||||
border-radius: $radius;
|
||||
color: $text-gray-m;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.cricle {
|
||||
.num {
|
||||
color: $text-color;
|
||||
font-size: $title-size * 1.8;
|
||||
font-weight: bold;
|
||||
padding: $padding * 0.2;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
span {
|
||||
font-size: $title-size + 10;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
padding-top: $padding * 0.5;
|
||||
}
|
||||
}
|
||||
.ic-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-image: linear-gradient(to right, #ffebb9, #fbd57b);
|
||||
color: #664710;
|
||||
padding: 10rpx $padding * 0.6;
|
||||
border-radius: 0 0 $radius 0;
|
||||
}
|
||||
.ic-day {
|
||||
position: absolute;
|
||||
right: $padding;
|
||||
top: $padding;
|
||||
}
|
||||
}
|
||||
// 没有饮食记录
|
||||
.no-foods {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-m - 4;
|
||||
color: $text-gray-m;
|
||||
min-height: 40vh;
|
||||
// background: pink;
|
||||
.no-foods-img {
|
||||
opacity: 0.5;
|
||||
}
|
||||
view {
|
||||
padding: $padding * 0.2;
|
||||
}
|
||||
}
|
||||
// 饮食记录 早中晚加餐等
|
||||
.foods-add {
|
||||
border-bottom: solid 1rpx #f7f7f7;
|
||||
margin-top: $margin;
|
||||
// 主标题
|
||||
.foods-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
color: $text-color;
|
||||
padding: $padding * 0.5 0;
|
||||
.title-left {
|
||||
font-size: $title-size;
|
||||
color: $text-color;
|
||||
font-weight: bold;
|
||||
span {
|
||||
font-weight: normal;
|
||||
font-size: $title-size-m - 6;
|
||||
color: $text-gray-m;
|
||||
margin-left: $margin - 10;
|
||||
}
|
||||
}
|
||||
.title-right {
|
||||
font-size: $title-size-m - 6;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
color: $main-color;
|
||||
.dw {
|
||||
margin: 0 $margin * 0.6 0 $margin * 0.4;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
|
||||
274
pages/record/weight.vue
Normal file
274
pages/record/weight.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<!--
|
||||
* @Description:记录体重页面
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-07 12:32:50
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-10 15:00:51
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="weight">
|
||||
<!-- 体重表 -->
|
||||
<view class="progress-top">
|
||||
<view class="unit">
|
||||
<span
|
||||
:class="isJin === 2?'active':''"
|
||||
@click="isJin = 2"
|
||||
>斤</span>
|
||||
<span
|
||||
:class="isJin === 1?'active':''"
|
||||
@click="isJin = 1"
|
||||
>公斤</span>
|
||||
</view>
|
||||
<view class="progress">
|
||||
<view>比原来轻</view>
|
||||
<u-count-to
|
||||
class="uCountTo"
|
||||
:startVal="0"
|
||||
:endVal="3.2"
|
||||
:decimals="1"
|
||||
color="#333"
|
||||
fontSize="36"
|
||||
:bold="true"
|
||||
/>
|
||||
<view>保持 / 塑性</view>
|
||||
</view>
|
||||
<view
|
||||
class="add-weight"
|
||||
@click="addWeight"
|
||||
>记录体重</view>
|
||||
</view>
|
||||
<!-- 体重列表 -->
|
||||
<view class="weight-list">
|
||||
<view
|
||||
class="list-item"
|
||||
v-for="item in 2"
|
||||
:key="item"
|
||||
>
|
||||
<view class="list-left">
|
||||
<view class="list-title">
|
||||
<span>64.9</span>公斤
|
||||
</view>
|
||||
初始体重
|
||||
</view>
|
||||
<view class="list-right">
|
||||
<span>开始保持 / 塑性</span>
|
||||
2021-12-22 12:23
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 记录体重弹窗 -->
|
||||
<u-popup
|
||||
:show="addWeightShow"
|
||||
:round="10"
|
||||
@close="addWeightShow = false"
|
||||
@open="open"
|
||||
:closeable="true"
|
||||
>
|
||||
<view class="addWeightContent">
|
||||
<view class="date">今天</view>
|
||||
<view class='count'><span>{{horizontaPointVal}}</span>公斤</view>
|
||||
<vue-scale
|
||||
:min="10"
|
||||
:max="100"
|
||||
:int="false"
|
||||
:single="10"
|
||||
:h="80"
|
||||
:styles="styles"
|
||||
@scroll="scroll"
|
||||
:scrollLeft="55"
|
||||
/>
|
||||
<view
|
||||
class="addBtn"
|
||||
@click="addWeightShow = false"
|
||||
>确认添加</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import vueScale from "@/components/vueScale";
|
||||
export default {
|
||||
components: {
|
||||
vueScale,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isJin: 1, // 是公斤 2 是斤 所有用到斤的直接乘以这个字段即可
|
||||
addWeightShow: true, // 是否添加体重展示
|
||||
weight: 11,
|
||||
height: 180,
|
||||
styles: {
|
||||
line: "#dbdbdb",
|
||||
bginner: "#fbfbfb",
|
||||
bgoutside: "#ffffff",
|
||||
font: "#404040",
|
||||
fontColor: "#404040",
|
||||
fontSize: 16,
|
||||
},
|
||||
horizontaPointVal: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
addWeight() {
|
||||
this.addWeightShow = true;
|
||||
},
|
||||
close() {},
|
||||
open() {},
|
||||
// 滚动标尺触发事件
|
||||
scroll(msg) {
|
||||
this.horizontaPointVal = msg;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
//体重top
|
||||
.progress-top {
|
||||
padding: $padding * 2 $padding;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-bottom: solid 1rpx #f7f7f7;
|
||||
// 单位
|
||||
.unit {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 100rpx;
|
||||
font-size: $title-size-m;
|
||||
color: $border-color;
|
||||
padding: $padding * 0.5 0;
|
||||
text-align: center;
|
||||
border: solid 1rpx $border-color;
|
||||
border-radius: 50rpx 0 0 50rpx;
|
||||
}
|
||||
span:nth-child(1) {
|
||||
border-radius: 50rpx 0 0 50rpx;
|
||||
border-style: solid;
|
||||
border-color: $border-color $main-color $border-color $border-color;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
border-radius: 0 50rpx 50rpx 0;
|
||||
border-style: solid;
|
||||
border-color: $border-color $border-color $border-color $main-color;
|
||||
}
|
||||
span.active {
|
||||
background-color: $main-color;
|
||||
color: #fff;
|
||||
border: solid 1rpx $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 展示圈
|
||||
.progress {
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
border: solid $padding * 0.7 #f7f7f7;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
color: $text-gray-m;
|
||||
font-size: $title-size-m;
|
||||
.uCountTo {
|
||||
padding: $padding * 0.5;
|
||||
}
|
||||
}
|
||||
// 记录按钮
|
||||
.add-weight {
|
||||
font-size: $title-size + 2;
|
||||
border-radius: $radius * 3;
|
||||
border: solid 2rpx $main-color;
|
||||
color: $main-color;
|
||||
padding: $padding * 0.8 $padding * 2.8;
|
||||
margin-top: $margin * 2;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
// 列表
|
||||
.weight-list {
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray-m;
|
||||
padding: $padding;
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
border-bottom: solid 1rpx #f9f9f9;
|
||||
padding: $padding 0;
|
||||
.list-title {
|
||||
color: $text-color;
|
||||
font-size: $title-size-m;
|
||||
margin-bottom: $margin * 0.4;
|
||||
span {
|
||||
font-size: $title-size + 14;
|
||||
font-weight: 500;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.list-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
margin-top: $margin * 0.4;
|
||||
span {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗
|
||||
.addWeightContent {
|
||||
width: 100%;
|
||||
height: 54vh;
|
||||
padding: $padding * 4 0;
|
||||
box-sizing: border-box;
|
||||
color: $text-gray;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
.date {
|
||||
font-size: $title-size + 9;
|
||||
text-align: center;
|
||||
}
|
||||
.count {
|
||||
color: $main-color;
|
||||
text-align: center;
|
||||
margin-top: $margin * 2;
|
||||
margin-bottom: $margin * 0.1;
|
||||
font-size: $title-size + 2;
|
||||
span {
|
||||
font-weight: bold;
|
||||
font-size: $title-size * 2.2;
|
||||
margin-right: $margin * 0.3;
|
||||
}
|
||||
}
|
||||
.addBtn {
|
||||
background-color: $main-color * 0.8;
|
||||
color: #fff;
|
||||
margin-top: $margin * 2;
|
||||
font-size: $title-size * 1.2;
|
||||
padding: $padding * 0.7 $padding * 4;
|
||||
border-radius: $radius * 3;
|
||||
font-size: $title-size + 6;
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
142
pages/vip/foods.vue
Normal file
142
pages/vip/foods.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<!--
|
||||
* @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>
|
||||
277
pages/vip/nutritionHelper.vue
Normal file
277
pages/vip/nutritionHelper.vue
Normal file
@@ -0,0 +1,277 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-07 16:02:01
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-10 17:31:22
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="NutritionHelper">
|
||||
<!-- 轮播图 -->
|
||||
<view class="swiper">
|
||||
<view class="swiper-box">
|
||||
<swiper autoplay @change="swiperCount = $event.detail.current">
|
||||
<swiper-item><image src="https://yanxuan.nosdn.127.net/static-union/163971170765382b.jpg" mode="aspectFill" /></swiper-item>
|
||||
<swiper-item><image src="https://yanxuan.nosdn.127.net/948240ec17accbb8bb2184bde9b62e8f.jpg" mode="aspectFill" /></swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-pages">
|
||||
<text class="pages-item" :class="{ show: swiperCount === 0 }"></text>
|
||||
<text class="pages-item" :class="{ show: swiperCount === 1 }"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 导航菜单 -->
|
||||
<scroll-view class="scroll-view_H" scroll-x="true">
|
||||
<view v-for="(item, index) in 5" :key="index" id="demo1" class="scroll-view-item_H">
|
||||
<u-image width="120rpx" height="120rpx" v-if="item === 1" :src="require('../../static/imgs/ic_loca.png')" :lazy-load="true" class="u-img" radius="4" />
|
||||
<u-image width="120rpx" height="120rpx" v-if="item === 2" :src="require('../../static/imgs/ic_Medicine.png')" :lazy-load="true" class="u-img" radius="4" />
|
||||
<u-image width="120rpx" height="120rpx" v-if="item === 3" :src="require('../../static/imgs/ic_report.png')" :lazy-load="true" class="u-img" radius="4" />
|
||||
<u-image width="120rpx" height="120rpx" v-if="item === 4" :src="require('../../static/imgs/ic_SignIn.png')" :lazy-load="true" class="u-img" radius="4" />
|
||||
<u-image width="120rpx" height="120rpx" v-if="item === 5" :src="require('../../static/imgs/ic_SignIn.png')" :lazy-load="true" class="u-img" radius="4" />
|
||||
<view class="title">正确洗脸</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 精品推荐 -->
|
||||
<view>
|
||||
<view class="page-title">
|
||||
精品推荐
|
||||
<u-icon name="arrow-right" color="#999" label="更多" labelPos="left" labelColor="#999" />
|
||||
</view>
|
||||
<!-- 消息列表 -->
|
||||
<view class="helper-list" v-for="item in 2" :key="item">
|
||||
<view class="help-logo">
|
||||
<view class="logo">ZH</view>
|
||||
<view class="info">
|
||||
<span class="title">ZH大健康</span>
|
||||
<span class="des">ZH健康官方账号</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="help-content">
|
||||
<view class="--content">
|
||||
<view class="title ellipsis">不要随意按摩,小心加重你的劲椎病小心加重你的劲椎病小心加重你的劲椎病</view>
|
||||
<view class="read-time">
|
||||
<view class="read">阅读4k+</view>
|
||||
<view class="zan">4k+ 点赞</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-image width="240rpx" height="180rpx" :src="require('../../static/imgs/newsss.png')" :lazy-load="true" class="u-img" radius="10" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 更多推荐 -->
|
||||
<view>
|
||||
<view class="page-title">
|
||||
更多推荐
|
||||
<u-icon name="arrow-right" color="#999" label="更多" labelPos="left" labelColor="#999" />
|
||||
</view>
|
||||
<!-- 消息列表 -->
|
||||
<view class="helper-list" v-for="item in 2" :key="item">
|
||||
<view class="help-logo">
|
||||
<view class="logo">ZH</view>
|
||||
<view class="info">
|
||||
<span class="title">ZH大健康</span>
|
||||
<span class="des">ZH健康官方账号</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="help-content">
|
||||
<view class="--content pt10">
|
||||
<u-image width="100%" :src="require('../../static/imgs/newsss.png')" :lazy-load="true" mode="widthFix" class="u-img" radius="2" />
|
||||
<view class="title2">为什么工作效率那么低呢？</view>
|
||||
<view class="des ellipsis">
|
||||
因为不爱工作呗，有自己的事情玩了玩晒因为不爱工作呗，有自己的事情玩了玩晒因为不爱工作呗，有自己的事情玩了玩晒因为不爱工作呗，有自己的事情玩了玩晒
|
||||
</view>
|
||||
<view class="read-time">
|
||||
<view class="read">阅读4k+</view>
|
||||
<view class="zan">4k+ 点赞</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperCount: 0
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.NutritionHelper {
|
||||
// swiper
|
||||
.swiper {
|
||||
background: linear-gradient(#fff, #f3f6fb);
|
||||
padding: $padding;
|
||||
.swiper-box {
|
||||
position: relative;
|
||||
padding-top: 40%;
|
||||
swiper,
|
||||
image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
image {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
.swiper-pages {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: $margin - 10;
|
||||
height: 7rpx;
|
||||
text-align: center;
|
||||
.pages-item {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
height: 7rpx;
|
||||
width: 25rpx;
|
||||
margin: 0 5rpx;
|
||||
background: rgba($color: #fff, $alpha: 0.5);
|
||||
&.show {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 横向滚动
|
||||
.scroll-view_H {
|
||||
white-space: nowrap;
|
||||
border-radius: $radius;
|
||||
.scroll-view-item_H {
|
||||
display: inline-block;
|
||||
width: 130rpx;
|
||||
margin: $margin * 1.6 $margin * 0.5 $margin * 0.3 $margin * 0.5;
|
||||
// box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
.title {
|
||||
text-align: center;
|
||||
padding: $padding * 0.6 $padding * 0.3;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: $text-gray;
|
||||
font-size: $title-size - 2;
|
||||
width: 160rpx;
|
||||
}
|
||||
.u-img {
|
||||
margin-left: $margin;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 标题
|
||||
.page-title {
|
||||
font-size: $title-size * 1.6;
|
||||
font-weight: bold;
|
||||
padding: $padding;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 消息列表
|
||||
.helper-list {
|
||||
padding: $padding;
|
||||
border-bottom: solid 1rpx #f9f9f9;
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
margin: $margin;
|
||||
border-radius: $radius;
|
||||
// 企业logo
|
||||
.help-logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
.logo {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
background: $main-color;
|
||||
border-radius: 50%;
|
||||
color: $text-color;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
font-size: $title-size + 12;
|
||||
font-weight: bold;
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
margin-left: $margin * 0.4;
|
||||
.title {
|
||||
font-size: $title-size + 4;
|
||||
color: $text-color;
|
||||
}
|
||||
.des {
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray-m;
|
||||
margin-top: $title-size * 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 标题部分
|
||||
.help-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
.pt10 {
|
||||
padding-top: $padding;
|
||||
}
|
||||
.--content {
|
||||
font-size: $title-size;
|
||||
margin-right: $margin * 0.4;
|
||||
.title {
|
||||
font-size: $title-size + 6;
|
||||
font-weight: bold;
|
||||
margin-top: $margin;
|
||||
}
|
||||
.title2 {
|
||||
font-size: $title-size + 2;
|
||||
margin-top: $margin;
|
||||
}
|
||||
.des {
|
||||
color: $text-gray-m;
|
||||
font-size: $title-size-m + 2;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.read-time {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size;
|
||||
padding: $padding * 1.4 0 0 0;
|
||||
.read {
|
||||
background: #fdf7ec;
|
||||
color: #ffcb79;
|
||||
padding: $padding * 0.2 $padding * 0.8;
|
||||
border-radius: $radius * 0.4;
|
||||
}
|
||||
.zan {
|
||||
margin-left: $margin;
|
||||
color: $text-gray-m;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user