TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

新增记录模块页面

Browse Source
This commit is contained in:
张冬雪
2022-01-11 17:15:00 +08:00
parent c810dbdb1d
commit f7b4468119
83 changed files with 16340 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

393
pages/record/drink.vue Normal file
View 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>