chenJinxu
/
HealthStudentWeb
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

新增“今日”静态页面

test
Dingei 11 months ago
parent
f5a46ebb1f
commit
938c528852
16 changed files with 723 additions and 5 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/icons/1_30.png
  2. BIN
      src/assets/icons/1_75.png
  3. BIN
      src/assets/today/icons/2_12.png
  4. BIN
      src/assets/today/icons/2_22.png
  5. BIN
      src/assets/today/icons/2_25.png
  6. BIN
      src/assets/today/icons/2_54.png
  7. BIN
      src/assets/today/icons/2_59.png
  8. BIN
      src/assets/today/icons/2_67.png
  9. BIN
      src/assets/today/icons/2_70.png
  10. BIN
      src/assets/today/icons/2_72.png
  11. BIN
      src/assets/today/images/2_03.png
  12. BIN
      src/assets/today/images/2_42.png
  13. BIN
      src/assets/today/images/2_48.png
  14. +59
    -0
      src/components/TopNavBar.vue
  15. +233
    -5
      src/views/today/index.vue
  16. +431
    -0
      src/views/today/scss/index.scss

BIN
src/assets/icons/1_30.png View File

Before After
Width: 52  |  Height: 64  |  Size: 597B

BIN
src/assets/icons/1_75.png View File

Before After
Width: 108  |  Height: 108  |  Size: 950B

BIN
src/assets/today/icons/2_12.png View File

Before After
Width: 36  |  Height: 41  |  Size: 344B

BIN
src/assets/today/icons/2_22.png View File

Before After
Width: 38  |  Height: 36  |  Size: 347B

BIN
src/assets/today/icons/2_25.png View File

Before After
Width: 29  |  Height: 47  |  Size: 463B

BIN
src/assets/today/icons/2_54.png View File

Before After
Width: 58  |  Height: 59  |  Size: 1.6KB

BIN
src/assets/today/icons/2_59.png View File

Before After
Width: 57  |  Height: 58  |  Size: 948B

BIN
src/assets/today/icons/2_67.png View File

Before After
Width: 58  |  Height: 58  |  Size: 982B

BIN
src/assets/today/icons/2_70.png View File

Before After
Width: 57  |  Height: 57  |  Size: 1.3KB

BIN
src/assets/today/icons/2_72.png View File

Before After
Width: 57  |  Height: 56  |  Size: 850B

BIN
src/assets/today/images/2_03.png View File

Before After
Width: 318  |  Height: 349  |  Size: 7.0KB

BIN
src/assets/today/images/2_42.png View File

Before After
Width: 180  |  Height: 151  |  Size: 3.9KB

BIN
src/assets/today/images/2_48.png View File

Before After
Width: 103  |  Height: 120  |  Size: 2.0KB

+ 59
- 0
src/components/TopNavBar.vue View File

@@ -0,0 +1,59 @@
<!-- -->
<template>
<div class="nav-bar">
<van-nav-bar
:title="title"
@click-left="onClickLeft"
@click-right="onClickRight"
>
<template #left>
<van-icon :name="LeftIcon" size="32" />
</template>
<template #right>
<van-icon :name="RightIcon" dot size="18" />
</template>
</van-nav-bar>
</div>
</template>

<script>
import LeftIcon from "@/assets/icons/1_75.png";
import RightIcon from "@/assets/icons/1_30.png";
export default {
components: {},
name: 'NavBar',
props: {
title: {
type: String,
default: '吕子宣 LV 10'
}
},
data() {
return {
LeftIcon,
RightIcon
};
},
created() {},
mounted() {},
methods: {
onClickLeft(value) {
this.$emit('on-click-left', value);
},
onClickRight(value) {
this.$emit('on-click-right', value);
}
}
};
</script>
<style scoped lang="scss">
.nav-bar {
position: absolute !important;
left: 0;
top: 0;
height: 100px;
width: 100%;
}

/* @import url(); 引入css类 */
</style>

+ 233
- 5
src/views/today/index.vue View File

@@ -1,22 +1,250 @@
<!-- 今日 -->
<template>
<div>
<div class="today">
<!-- 头部导航 -->
<TopNavBar />
<!-- 今日状态 -->
<div class="today-status">
<img class="img" src="@/assets/today/images/2_03.png" />
<img class="icon" src="@/assets/today/icons/2_12.png" @click="show = true"/>
<div class="status">
<p>状态优秀</p>
<ul>
<li class="toobad"></li>
<li class="ordinary"></li>
<li class="sameas"></li>
<li class="excellent active"></li>
</ul>
</div>
<div class="interpret">
<p>工作学习要有度，适当摸鱼也很好，不用太卷哟！保持张弛
有度的节奏，是应对压力的有效方法。
综合今日的HRV(MSSD)和静息心率情况看，你今天整体状
态优秀，身体压力状态较小，能很好应对今日工作生活中的
挑战，请继续保持优秀状态。
相信自己，你一定可以实现你的目标！</p>
<hr />
<div class="bottom">
<p>详细解读</p>
<div>
<span>日记</span>
<img src="@/assets/today/icons/2_22.png" />
</div>
</div>
</div>
</div>
<!-- 今日情绪感知 -->
<div class="emotion">
<div class="title">
<p>今日情绪感知</p>
<div>
<p>4.28</p>
<van-icon name="arrow" size="18" />
</div>
</div>
<ul>
<li>
<h4>40</h4>
<p>抑郁倾向</p>
<span>无抑郁倾向</span>
<time>12:30</time>
</li>
<li>
<h4>55</h4>
<p>抑郁倾向</p>
<span>无抑郁倾向</span>
<time>12:30</time>
</li>
<li>
<h4>75</h4>
<p>抑郁倾向</p>
<span>无抑郁倾向</span>
<time>12:30</time>
</li>
</ul>
</div>
<!-- 今体征感知 -->
<div class="perception">
<div class="title">
<p>今体征感知</p>
<div>
<p>4.28</p>
<van-icon name="arrow" size="18" />
</div>
</div>
<ul>
<li>
<h4>36.8</h4>
<p>体温</p>
</li>
<li>
<h4>92</h4>
<p>心率</p>
</li>
<li>
<h4>6000</h4>
<p>步数</p>
</li>
</ul>
<div class="tip">
<img class="img" src="@/assets/today/icons/2_25.png" />
<p><span>温馨提示：</span>检测数据仅供参考，<span>不可做医疗诊断和治疗依据</span>，在运动、工作等场景会影响健康检测。</p>
</div>
</div>
<!-- 步数 -->
<div class="step">
<div class="main">
<ul>
<li>
<p class="specific"><span>10567</span>/6000步</p>
<p class="category">步数<span>达标</span></p>
</li>
<li>
<p class="specific"><span>4</span>/5千米</p>
<p class="category">行程<span>未达标</span></p>
</li>
<li>
<p class="specific"><span>588</span>/600里卡</p>
<p class="category">消耗<span>达标</span></p>
</li>
</ul>
<div class="annular">
<van-circle
v-model="currentRate1"
size="160px"
color="#179b3b"
layer-color="#F8F8F8"
:rate="90"
:speed="50"
:stroke-width="120"
/>
<van-circle
v-model="currentRate2"
size="129px"
color="#ff5f8b"
layer-color="#F8F8F8"
:rate="80"
:speed="50"
:stroke-width="140"
/>
<p>多走4567步</p>
</div>
</div>
</div>
<!-- 情绪日记 -->
<div class="diary">
<div class="title">
<p>情绪日记</p>
<div>
<div>
<p>保存</p>
<van-icon name="arrow" size="18" />
</div>
</div>
</div>
<div class="main">
<van-checkbox-group v-model="result">
<van-checkbox name="a" shape="square" checked-color="#179b3b">
<img src="@/assets/today/icons/2_72.png" />
</van-checkbox>
<van-checkbox name="b" shape="square" checked-color="#179b3b">
<img src="@/assets/today/icons/2_59.png" />
</van-checkbox>
<van-checkbox name="c" shape="square" checked-color="#179b3b">
<img src="@/assets/today/icons/2_54.png" />
</van-checkbox>
<van-checkbox name="d" shape="square" checked-color="#179b3b">
<img src="@/assets/today/icons/2_67.png" />
</van-checkbox>
<van-checkbox name="e" shape="square" checked-color="#179b3b">
<img src="@/assets/today/icons/2_72.png" />
</van-checkbox>
<van-checkbox name="f" shape="square" checked-color="#179b3b">
<img src="@/assets/today/icons/2_70.png" />
</van-checkbox>
</van-checkbox-group>
<div class="textarea">
<textarea placeholder="我要写亲密日记" rows="5"></textarea>
</div>
</div>
</div>
<!-- 情绪知识库 -->
<div class="knowledge">
<div class="title">
<p>情绪知识库</p>
</div>
<div class="main">
<ul>
<li>
<p>
健康同学 测量的
什么压力？
测量原理是什么？
</p>
<img src="@/assets/today/images/2_42.png" />
</li>
<li>
<p>
健康同学 测量的
什么压力？
测量原理是什么？
</p>
<img src="@/assets/today/images/2_48.png" />
</li>
</ul>
</div>
</div>
<!-- 底部导航 -->
<TabBar />
<!-- 日期选择 -->
<van-calendar
v-model="show"
:show-confirm="false"
@confirm="onConfirm"
:min-date="minDate"
:max-date="maxDate"
/>
</div>
</template>

<script>
import TabBar from '@/components/TabBar';
import TopNavBar from '@/components/TopNavBar';
import { Calendar, Circle, Checkbox, CheckboxGroup } from 'vant';
export default {
components: { TabBar },
components: {
TabBar,
TopNavBar,
[Circle.name]: Circle,
[Calendar.name]: Calendar,
[Checkbox.name]: Checkbox,
[CheckboxGroup.name]: CheckboxGroup
},
data() {
return {};
return {
date: '',
show: false,
minDate: new Date(2023, 12, 1),
maxDate: new Date(2023, 12, 18),
currentRate1: 0,
currentRate2: 0,
result: [],
};
},
created() {},
mounted() {},
methods: {}
methods: {
formatDate(date) {
return `${date.getMonth() + 1}/${date.getDate()}`;
},
onConfirm(date) {
this.show = false;
console.log(date)
console.log(this.formatDate(date))
},
}
};
</script>
<style scoped>
/* @import url(); 引入css类 */
@import url("./scss/index.scss");
</style>

+ 431
- 0
src/views/today/scss/index.scss View File

@@ -0,0 +1,431 @@
.today {
padding: 100.06px 0;
background-color: #fff;
min-height: 100vh;
.today-status {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
padding:0 40px;
.img {
width: 40%;
object-fit: contain;
margin-top: 20px;
}
.icon{
width: 60px;
height: 60px;
object-fit: contain;
position: absolute;
top: 40px;
right: 40px;
}
.status {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: space-between;
justify-content: space-between;
width: 100%;
margin: 40px 0;
p {
font-size: 30px;
color: #434144;
font-weight: bold;
}
ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
li {
width: 40px;
height: 20px;
border-radius: 20px;
position: relative;
& + li {
margin-left: 10px;
}
&.toobad {
background-color: #ff5f8b;
&:after{
background-color: #ff5f8b;
}
}
&.ordinary {
background-color: #2ea7e0;
&:after{
background-color: #2ea7e0;
}
}
&.sameas {
background-color: #8dc21f;
&:after{
background-color: #8dc21f;
}
}
&.excellent {
background-color: #179b3b;
&:after{
background-color: #179b3b;
}
}
&.active {
width: 120px;
&:after {
opacity: 1;
}
&:before {
opacity: 1;
}
}
&:after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 40px;
height: 40px;
opacity: 0;
border-radius: 50%;
}
&:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 25px;
height: 25px;
opacity: 0;
border-radius: 50%;
background-color:#fff;
z-index: 2;
}
}
}
}
.interpret {
padding: 50px 60px;
border-radius: 40px;
border: 1px solid bisque;
p{
font-size: 28px;
color: #434144;
white-space: pre-line;
line-height: 1.8em;
}
.bottom {
width: 100%;
position: relative;
p {
text-align: center;
color: #35a556;
}
div{
position: absolute;
top: 50%;
right: 0;
transform: translatey(-50%);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
span{
color: #35a556;
font-size: 24px;
}
img {
width: 40px;
height: 40px;
object-fit: contain;
margin-left: 10px;
}
}
}
}
}
.title {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: space-between;
justify-content: space-between;
p {
font-size: 30px;
color: #434144;
font-weight: bold;
}
>div {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
p {
margin-right: 10px;
}
>div {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
p {
font-size: 26px;
color: #fff;
background-color: #179b3b;
border-radius: 20px;
padding: 8px 20px;
margin-right: 10px;
font-weight: normal;
}
}
}
}
.emotion {
padding:0 40px;
margin-top: 60px;
ul {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: space-between;
justify-content: space-between;
margin-top: 30px;
li {
width: 25%;
border-radius: 40px;
padding: 20px;
&:nth-of-type(1) {
background-color: #179b3b;
}
&:nth-of-type(2) {
background-color: #ff5f8b;
}
&:nth-of-type(3) {
background-color: #8dc21f;
}
h4 {
color: #fff;
font-size: 50px;
font-weight: normal;
}
p {
color: #fff;
font-size: 32px;
margin-top: 0px;
}
span {
color: #fff;
font-size: 24px;
border-top: 1px solid #fff;
padding-top: 12px;
}
time {
color: #fff;
font-size: 24px;
display: block;
}
}
}
}
.perception {
padding:0 40px;
margin-top: 60px;
ul {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: space-between;
justify-content: space-between;
margin-top: 30px;
li {
width: 25%;
border-radius: 40px;
padding: 20px;
padding-bottom: 80px;
&:nth-of-type(1) {
background-color: #179b3b;
}
&:nth-of-type(2) {
background-color: #ff5f8b;
}
&:nth-of-type(3) {
background-color: #8dc21f;
}
h4 {
color: #fff;
font-size: 46px;
font-weight: normal;
}
p {
color: #fff;
font-size: 30px;
margin-top: 0px;
}
}
}
.tip {
margin-top: 30px;
display: flex;
justify-content: flex-start;
border-bottom: 1px solid #dfdfdf;
padding-bottom: 40px;
img {
width: 29px;
height: 47px;
object-fit: contain;
margin-right: 30px;
}
p {
font-size: 28px;
color: #434144;
line-height: 1.5em;
span {
color: #edb21d;
}
}
}
}
.step {
padding:0 40px;
margin-top: 50px;
.main {
border-radius: 30px;
border: 1px solid #179b3b;
padding: 40px 30px;
display: flex;
align-items: center;
align-content: space-between;
justify-content: space-between;
ul {
li {
.specific {
font-size: 40px;
color: #434144;
span {
font-weight: bold;
}
}
.category {
font-size: 28px;
color: #434144;
font-weight: bold;
margin-top: 6px;
span {
font-weight: normal;
padding: 5px 15px;
background-color: #434144;
color: #fff;
font-size: 24px;
border-radius: 20px;
margin-left: 10px;
}
}
& + li {
margin-top: 40px;
}
}
}
.annular {
width: 50%;
position: relative;
transform: rotate(180deg);
.van-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
p {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) rotate(180deg);
font-size: 28px;
color: #434144;
font-weight: bold;
}
}
}
}
.diary {
padding:0 40px;
margin: 50px 0;
.main {
width: 100%;
.van-checkbox-group {
width: 100%;
margin-top: 50px;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: space-between;
justify-content: space-between;
}
.van-checkbox {
width: 26%;
min-width: 88px;
&:nth-of-type(n+4) {
margin-top: 40px;
}
.van-checkbox__label img {
width: 50px;
}
}
.textarea {
border-radius: 40px;
border: 1px solid #179b3b;
margin-top: 30px;
overflow: hidden;
textarea {
width: 100%;
padding: 30px;
font-size: 28px;
}
}
}
}
.knowledge {
padding: 0 0 40px 40px;
.main {
width: 100%;
overflow-x: scroll;
ul {
width: max-content;
margin-top: 30px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
li {
width: 480px;
background-color: #179b3b;
padding: 40px;
border-radius: 50px;
display: flex;
align-items: center;
align-content: space-between;
justify-content: space-between;
& + li {
margin-left: 40px;
}
p {
width: 55%;
font-size: 28px;
color: #fff;
white-space: pre-line;
}
img {
height: 140px;
object-fit: contain;
}
}
}
}
}
}

Write Preview
Loading…
Cancel
Save