diff --git a/src/api/health-user.js b/src/api/health-user.js
index a7fda79..4e5dd7f 100644
--- a/src/api/health-user.js
+++ b/src/api/health-user.js
@@ -1,6 +1,13 @@
import request from '@/config/request';
export const APIHealthUser = {
- addPerson //添加人员
+ addPerson, //添加人员
+ personList, //人员列表
+ personInfo, //详情人员信息
+ updatePerson, //修改人员信息
+ deletePerson, // 删除人员信息
+ getHomeData, //今日体征感知
+ getHisData, //体征历史数据
+ getCalendar //体征历史数据日历
};
export default APIHealthUser;
function addPerson(params) {
@@ -10,3 +17,54 @@ function addPerson(params) {
data: params
});
}
+function personList(data) {
+ return request({
+ url: `/api/HealthyUser/PersonList`,
+ method: 'get',
+ params: data
+ });
+}
+function personInfo(data) {
+ return request({
+ url: `/api/HealthyUser/PersonInfo`,
+ method: 'get',
+ params: data
+ });
+}
+function updatePerson(params) {
+ return request({
+ url: `/api/HealthyUser/UpdatePerson`,
+ method: 'post',
+ data: params
+ });
+}
+function deletePerson(data) {
+ return request({
+ url: `/api/HealthyUser/DeletePerson`,
+ method: 'post',
+ params: data
+ });
+}
+
+function getHomeData(data) {
+ return request({
+ url: `/api/HealthyData/GetHomeData`,
+ method: 'post',
+ params: data
+ });
+}
+
+function getHisData(params) {
+ return request({
+ url: `/api/HealthyData/GetHisData`,
+ method: 'post',
+ data: params
+ });
+}
+function getCalendar(data) {
+ return request({
+ url: `/api/HealthyData/GetCalendar`,
+ method: 'post',
+ params: data
+ });
+}
diff --git a/src/api/psychological.js b/src/api/psychological.js
index 8256153..8ab9d9c 100644
--- a/src/api/psychological.js
+++ b/src/api/psychological.js
@@ -11,7 +11,10 @@ service.interceptors.request.use(request => {
return request;
});
export const APIPsy = {
- getHomeData
+ getHomeData,
+ getCalendarData,
+ getProgress,
+ getComprehensiveEvaluation //当天三大指标综合总评
};
export default APIPsy;
function getHomeData(data) {
@@ -21,3 +24,24 @@ function getHomeData(data) {
params: data
});
}
+function getCalendarData(data) {
+ return service({
+ url: `/api/Data/GetCalendarData`,
+ method: 'get',
+ params: data
+ });
+}
+function getProgress(data) {
+ return service({
+ url: `/api/Question/Progress`,
+ method: 'get',
+ params: data
+ });
+}
+function getComprehensiveEvaluation(data) {
+ return service({
+ url: `/api/Data/GetComprehensiveEvaluation`,
+ method: 'get',
+ params: data
+ });
+}
diff --git a/src/assets/today/images/2_39.png b/src/assets/today/images/2_39.png
new file mode 100644
index 0000000..85a58b5
Binary files /dev/null and b/src/assets/today/images/2_39.png differ
diff --git a/src/assets/today/images/2_62.png b/src/assets/today/images/2_62.png
new file mode 100644
index 0000000..67d7129
Binary files /dev/null and b/src/assets/today/images/2_62.png differ
diff --git a/src/components/DateSwitch.vue b/src/components/DateSwitch.vue
index 8d4ea11..dbc7925 100644
--- a/src/components/DateSwitch.vue
+++ b/src/components/DateSwitch.vue
@@ -34,7 +34,8 @@ export default {
// 当前月份,从 0(一月)开始
currentMonth: new Date().getMonth(),
// 当前年份
- currentYear: new Date().getFullYear()
+ currentYear: new Date().getFullYear(),
+ weekObj: {}
};
},
watch: {
@@ -70,12 +71,13 @@ export default {
break;
case 'week':
this.checkDate(dateType, this.$own.getNowFormatDate(this.count));
+ this.$emit('updateDate', this.weekObj);
break;
case 'month':
this.date = this.checkDate(dateType, this.date);
+ this.$emit('updateDate', this.formatDate(this.date));
break;
}
- this.$emit('updateDate', this.formatDate(this.date));
},
onPrevious() {},
onNext() {},
@@ -182,18 +184,30 @@ export default {
this.setDate(this.addDate(this.currentFirstDate, -7));
this.date = this.timeStamp[0] + '~' + this.timeStamp[6];
this.weekDate = this.timeStamp[0];
+ this.weekObj = {
+ start: this.timeStamp[0],
+ end: this.timeStamp[6]
+ };
},
// 下一周
nextWeek() {
this.setDate(this.addDate(this.currentFirstDate, 7));
this.date = this.timeStamp[0] + '~' + this.timeStamp[6];
this.weekDate = this.timeStamp[0];
+ this.weekObj = {
+ start: this.timeStamp[0],
+ end: this.timeStamp[6]
+ };
},
// 这周
currentWeek(date) {
this.setDate(this.addDate(new Date(), -1));
this.date = this.timeStamp[0] + '~' + this.timeStamp[6];
this.weekDate = new Date(date).Format('yyyy-MM-dd');
+ this.weekObj = {
+ start: this.timeStamp[0],
+ end: this.timeStamp[6]
+ };
},
// 上一月
preMonth() {
@@ -274,12 +288,13 @@ export default {
if (this.dateType === 'week') {
// 如果是周报,则不用返回
this.checkDate(this.dateType, this.$own.getNowFormatDate(this.count), 'add');
+ this.$emit('updateDate', this.weekObj);
} else {
this.nextMonth();
+ this.$emit('updateDate', this.formatDate(this.date));
/* this.date = this.checkDate(this.dateType, this.$own.getNowFormatDate(this.count)); */
}
this.isPreClick = true;
- this.$emit('updateDate', this.formatDate(this.date));
} else {
// 上一个
if (this.clickFlag && this.isPreClick) {
@@ -287,7 +302,7 @@ export default {
if (this.dateType === 'week') {
// 如果是周报,则不用返回
this.checkDate(this.dateType, this.$own.getNowFormatDate(this.count), 'pre');
- this.$emit('updateDate', this.formatDate(this.date));
+ this.$emit('updateDate', this.weekObj);
} else if (this.dateType === 'month') {
this.preMonth();
if (this.count <= -12) {
diff --git a/src/components/SubmenuList.vue b/src/components/SubmenuList.vue
index bd35044..491a82a 100644
--- a/src/components/SubmenuList.vue
+++ b/src/components/SubmenuList.vue
@@ -11,7 +11,7 @@
-
+
{{ item.text }}
@@ -107,13 +107,13 @@ export default {
break;
}
}
- } else {
+ } /* else {
this.$dialog.confirm({
title: '提示',
message: `功能开发中`,
showCancelButton: false
});
- }
+ } */
},
onClick(model) {
let val = null;
@@ -180,7 +180,7 @@ export default {
padding-left: 20px;
display: grid;
grid-template-columns: repeat(4, auto);
- grid-gap: 20px;
+ grid-gap: 50px;
.item {
position: relative;
/* height: 140px; */
diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index 69a8f0d..36ae2f7 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -1,9 +1,15 @@
-
+
-
+
@@ -15,6 +21,7 @@
-
+
-
+
\ No newline at end of file
diff --git a/src/views/today/index.vue b/src/views/today/index.vue
index 20e6c44..8c9056b 100644
--- a/src/views/today/index.vue
+++ b/src/views/today/index.vue
@@ -1,255 +1,448 @@
-
-
-
-
-
-
状态优秀
-
+
+
+
+
+
{{
+ currentPerson.nickName
+ }}
+
切换
-
-
- 工作学习要有度,适当摸鱼也很好,不用太卷哟!保持张弛 有度的节奏,是应对压力的有效方法。
- 综合今日的HRV(MSSD)和静息心率情况看,你今天整体状 态优秀,身体压力状态较小,能很好应对今日工作生活中的
- 挑战,请继续保持优秀状态。 相信自己,你一定可以实现你的目标!
-
-
-
-
详细解读
-
-
日记
-
+
+
+
+
+
+
+
+ {{ item.nickName }}
-
-
-
-
今日情绪感知
-
-
{{ now }}
-
+
+
+
+
+
+
+
+
+
+
状态{{ calcTodayStatus(todayLevel, 'text') }}
+
+
+
+
+
+
暂无信息
+
+
+
+
+
{{ todayResult.Describe || '' }}
+
{{ todayResult.TirDesc || '' }}
+
{{ todayResult.StressDesc || '' }}
+
{{ todayResult.DepDesc || '' }}
+
{{ todayResult.EncouragingLanguage || '' }}
+
+
+
+
-
-
-
- -
-
{{ item.value || '--' }}
- {{ item.name || '--' }}
- {{ item.result || '--' }}
-
-
-
-
-
-
-
-
今体征感知
-
-
{{ now }}
-
+
+
+
+
+ -
+
{{ item.value || '--' }}
+ {{ item.name || '--' }}
+ {{ item.result || '暂无数据' }}
+
+
+
-
-
- -
-
36.8
- 体温
-
-
- -
-
92
- 心率
-
-
- -
-
6000
- 步数
-
-
-
-
-
-
- 温馨提示:检测数据仅供参考,不可做医疗诊断和治疗依据,在运动、工作等场景会影响健康检测。
-
-
-
-
-
-
-
- -
-
10567/6000步
- 步数达标
-
- -
-
4/5千米
- 行程未达标
-
- -
-
588/600里卡
- 消耗达标
-
-
-
-
-
-
多走4567步
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 温馨提示:检测数据仅供参考,不可做医疗诊断和治疗依据,在运动、工作等场景会影响健康检测。
+
+
-
-
-
-
-
-
情绪日记
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ -
+
健康同学 测量的 什么压力? 测量原理是什么?
+
+
+ -
+
健康同学 测量的 什么压力? 测量原理是什么?
+
+
+
+
-
-
-
-
-
- -
-
健康同学 测量的 什么压力? 测量原理是什么?
-
-
- -
-
健康同学 测量的 什么压力? 测量原理是什么?
-
-
-
+
+
-
-
-
-
+
-
-
+
+
\ No newline at end of file
diff --git a/src/views/today/scss/emotion-details.scss b/src/views/today/scss/emotion-details.scss
index e5a62f1..3d074d7 100644
--- a/src/views/today/scss/emotion-details.scss
+++ b/src/views/today/scss/emotion-details.scss
@@ -1,12 +1,89 @@
.psychological-container {
- min-height: 100vh;
+ height: 100vh;
overflow: hidden;
background-color: #fff;
+
+
+ .calenddar-dialog {
+ overflow: scroll;
+ }
+
+
+ .modeling {
+ padding: 20px;
+ position: relative;
+
+ .modeling-main {
+ font-size: 32px;
+
+ .top {
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ padding: 0 20px;
+
+ .left {
+ padding-right: 30px;
+ }
+
+ .right {
+ p {
+ font-size: 32px;
+ font-weight: 450;
+ }
+
+ .tips {
+ color: #edb21d;
+ }
+ }
+
+
+ }
+
+ .bottom {
+ padding: 20px 0;
+ padding-left: 80px;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+
+ .font-26 {
+ font-size: 28px;
+ color: #8b8b8b;
+ }
+
+ .progress-bar {
+ width: 370px;
+ height: 30px;
+ background-color: #eeeeee;
+ margin: 0 20px;
+ border-radius: 20px;
+
+ .progress {
+ height: 35px;
+ background-color: #638ee4;
+ border-radius: 20px;
+ }
+
+
+
+
+ }
+
+ .progress-text {
+ color: #638ee4;
+ }
+ }
+
+ }
+ }
+
.tab-bar {
padding: 20px;
position: relative;
+
.date-tab-con {
- height: 50px;
+ height: 60px;
display: flex;
justify-content: flex-start;
align-items: center;
@@ -15,6 +92,7 @@
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
+
.date-tab-list {
display: flex;
justify-content: space-around;
@@ -22,6 +100,7 @@
color: #fff;
flex: 1;
height: 50px;
+
.date-tab-item {
position: relative;
padding: 0 20px;
@@ -36,39 +115,46 @@
img {
height: 50px;
width: 50px;
- padding: 0 16px;
+ padding: 0 px2rem(16);
}
+
.more {
width: 20px;
height: 12px;
}
+
&.active {
color: #fff;
background-color: $green;
}
+
&.notClick {
background-color: $border_color;
color: #fff;
border: 1px solid #fff;
}
}
+
.date-tab-item:nth-child(3) {
border-right: 1px solid #e0e0e0;
}
}
}
}
+
.psy-tab-bar {
- height: 50px;
+ height: 60px;
position: relative;
margin: 20px 0 0 0;
padding: 0 20px;
+
.psy-tab-con {
background-color: #eeeeee;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
+
.psy-tab-list {
display: flex;
justify-content: space-around;
@@ -76,6 +162,7 @@
color: #fff;
height: 50px;
width: 100%;
+
/* background-color: red; */
.psy-tab-item {
position: relative;
@@ -87,6 +174,7 @@
border-radius: 40px;
font-weight: bold;
@include center();
+
&.active {
color: #fff;
background-color: $green;
@@ -95,59 +183,75 @@
}
}
}
+
.main {
position: relative;
- height: calc(100vh - 100px);
+ height: calc(100vh - 150px);
overflow: scroll;
+
+
+
.top {
flex: 1;
+
.title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 32px 20px 26px;
font-size: 36px;
+
.title-left {
font-weight: bold;
+ @include center();
+
.van-icon {
margin-left: 5px;
font-size: 18px;
}
}
}
+
.monitoring-count {
text-align: left;
padding: 6px 28px;
line-height: 40px;
+
p {
font-size: 24px;
color: #8b8b8b;
}
}
+
.pie-chart-con {
flex: 1;
padding: 10px 0 20px 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
+
.pie-chart-left {
position: relative;
height: 300px;
padding-left: 30px;
width: 35%;
@include center();
+
#pieChart {
height: 212px;
width: 212px;
}
}
+
.pie-chart-right {
height: 300px;
width: 65%;
padding-right: 40px;
@include center();
+
.list {
flex-direction: column;
+
.item {
width: 100%;
display: flex;
@@ -155,24 +259,29 @@
align-items: center;
font-size: 24px;
padding: 18px 0;
+
.item-left {
display: flex;
justify-content: flex-start;
align-items: center;
padding-right: 20px;
+
.circle {
height: 24px;
width: 24px;
margin: 0 8px;
}
+
span {
font-size: 24px;
}
+
.text {
color: #000;
font-size: 24px;
}
}
+
.item-right {
display: flex;
justify-content: center;
@@ -182,15 +291,118 @@
}
}
}
+
+ .circle-con {
+ flex: 1;
+ padding: 20px 30px 20px 30px;
+ @include center();
+ flex-direction: column;
+
+ .out-circle {
+ position: relative;
+ z-index: 99;
+
+ .van-circle {
+ height: 200px !important;
+ width: 200px !important;
+ }
+
+ .circle-text {
+ height: 100%;
+ @include center();
+ font-size: 48px;
+ color: #333;
+
+ .left {
+ font-size: 76px;
+ padding: 0 10px;
+ font-weight: bold;
+ }
+
+ .right {
+ font-size: 23px;
+ }
+ }
+
+ .circle-white {
+ position: absolute;
+ top: -1.5px;
+ right: 41%;
+ height: 42px;
+ width: 42px;
+ border: 4px solid;
+ border-radius: 50%;
+ background: #fff;
+ }
+ }
+
+ .progress {
+ position: relative;
+ margin-top: 60px;
+ /* height: px2rem(90); */
+ flex: 1;
+ width: 100%;
+ font-size: 30px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .progress-circle {
+ position: absolute;
+ top: -10px;
+ left: 0;
+ height: 35px;
+ width: 35px;
+ background-color: #fff;
+ border-radius: 50%;
+ border: 10px solid;
+ z-index: 99;
+ }
+
+ .state-item {
+ width: 100%;
+
+ .state-line {
+ position: relative;
+ height: 30px;
+ font-size: 32px;
+
+ &.low {
+ border-top-left-radius: 10px;
+ border-bottom-left-radius: 10px;
+ }
+
+ &.blue {
+ background-color: $com_blue;
+ }
+
+ &.hight {
+ background-color: $com_red;
+ border-top-right-radius: 10px;
+ border-bottom-right-radius: 10px;
+ }
+ }
+
+ .state-text {
+ padding-top: 21px;
+ @include center();
+ }
+ }
+ }
+
+ }
+
.statistics {
- height: 100%;
- padding: 10px 40px;
+
+ /* padding: 40px 40px; */
.list {
+ padding: 40px 40px;
display: grid;
grid-template-columns: repeat(3, 1fr); //定义了一个 3x3 的网格布
/* grid-template-rows: repeat(3, 1fr); */
gap: 40px;
font-size: 32px;
+
.item {
display: flex;
justify-content: flex-start;
@@ -201,6 +413,7 @@
border: 1px solid $border_color;
border-radius: 40px;
color: #fff;
+
.top {
font-size: 24px;
}
@@ -215,77 +428,118 @@
}
}
}
+
+ .tip {
+ display: flex;
+ justify-content: flex-start;
+ padding: 20px 40px;
+
+ img {
+ width: 29px;
+ height: 47px;
+ object-fit: contain;
+ margin-right: 30px;
+ }
+
+ p {
+ font-size: 24px;
+ color: #434144;
+ line-height: 1.5em;
+
+ span {
+ color: #edb21d;
+ }
+ }
+ }
}
+
.line {
position: relative;
height: 22px;
background-color: $lineGray;
}
+
.bottom {
flex: 1;
overflow: scroll;
+
.echart-container {
position: relative;
min-height: 600px;
background-color: #fff;
padding: 0 10px;
+
.echart {
height: 200px;
padding: 0 10px;
}
}
+
.line-gray {
height: 22px;
width: 100%;
background-color: $lineGray;
margin-top: 20px;
}
+
.result {
+ padding-bottom: 40px;
+
.result-con {
height: 100%;
background-color: #fff;
border-radius: 40px;
overflow: hidden;
+
&.reminder {
padding: 0 32px 40px 32px;
}
+
.title {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
- margin-bottom: 20px;
+ margin-bottom: 60px;
+
span {
font-size: 36px;
font-weight: bold;
}
+
.font-28 {
font-weight: 400;
- font-size: 26px;
+ font-size: 24px;
color: #8b8b8b;
text-align: left;
}
+
.title-no-data {
padding: 68px 0 26px 30px;
}
+
p {
font-size: 24px;
color: $green;
}
+
.title-emo {
font-size: 48px;
padding: 28px 0 42px 0;
text-align: left;
}
+
.no-data {
height: 500px;
width: 100%;
@include center();
flex-direction: column;
+
img {
height: 220px;
width: 350px;
}
+
p {
color: #999;
font-size: 24px;
@@ -293,12 +547,15 @@
}
}
}
+
.title-text {
padding: 68px 0 26px 30px;
}
+
.title-reminder {
padding: 68px 0 0 0;
}
+
.friendly-reminder,
.warm-reminder {
display: flex;
@@ -308,53 +565,64 @@
margin-bottom: 20px;
background-color: #f2f2f2;
padding: 40px 38px 38px 28px;
+
p {
font-weight: bold;
text-align: left;
padding-bottom: 22px;
font-size: 30px;
}
+
span {
text-align: left;
font-size: 24px;
}
}
+
.mood-list {
display: grid;
grid-template-columns: repeat(2, auto); //定义了一个 2x2 的网格布
grid-template-rows: repeat(2, 1fr);
gap: 42px;
padding: 0 88px 40px 74px;
+
.item {
width: 274px;
height: 220px;
@include center();
flex-direction: column;
border-radius: 40px;
+
p {
font-size: 24px;
padding: 0;
color: #fff;
+
.day {
padding: 10px;
font-size: 56px;
}
+
.day-text {
font-size: 24px;
}
}
}
}
+
.mood-list-no-data {
height: 500px;
width: 100%;
+
.no-data {
@include center();
flex-direction: column;
+
img {
height: 220px;
width: 350px;
}
+
p {
color: #999;
font-size: 24px;
@@ -365,13 +633,16 @@
}
}
}
+
&.report {
position: relative;
height: calc(100vh - 300px);
overflow: scroll;
background-color: #f5f5f5;
+
.content {
position: relative;
+
.list {
position: relative;
@@ -382,21 +653,26 @@
padding: 68px 30px;
background-color: #fff;
margin-bottom: 22px;
+
.left {
display: flex;
justify-content: flex-start;
align-items: flex-start;
+
img {
height: 50px;
width: 50px;
}
+
.middle {
+
.title,
.overall,
.trend {
display: flex;
justify-content: flex-start;
align-items: center;
+
/* padding-left: 26px; */
span,
p {
@@ -407,24 +683,29 @@
line-height: 60px;
}
}
+
.title {
span {
padding-right: 40px;
}
+
p {
color: #282828;
}
}
+
.overall {
display: flex;
justify-content: space-between;
align-items: center;
+
.left {
p {
padding-left: 40px;
font-weight: bold;
}
}
+
.right {
img {
height: 30px;
@@ -432,12 +713,14 @@
}
}
}
+
.trend {
align-items: flex-start;
text-align: left;
}
}
}
+
.right {
img {
width: 18px;
@@ -445,15 +728,18 @@
}
}
}
+
&.no-data {
height: calc(100vh - 200px);
width: 100%;
@include center();
flex-direction: column;
+
img {
height: 220px;
width: 350px;
}
+
p {
color: #999;
font-size: 32px;
@@ -468,17 +754,20 @@
.title {
font-size: 32px;
}
+
.van-popup {
flex: 1;
- max-height: 600px;
+ min-height: 600px;
width: 100%;
background-color: $background;
}
+
.popup {
/* height: 100%;
width: 100%; */
background-color: $background;
padding: 40px;
+
.item {
flex: 1;
padding: 20px;
@@ -487,16 +776,20 @@
font-size: 28px;
background-color: #fff;
border-radius: 20px;
+
p {
margin: 10px 0;
}
+
h5 {
margin: 10px 0;
font-size: 32px;
}
+
&.first {
padding-top: 0;
}
+
&.science-tips {
.tips {
width: 120px;
@@ -510,11 +803,13 @@
}
}
}
+
.van-button {
- height: 40px;
+ height: 80px;
background-color: $green;
color: #fff;
- border-radius: 20px;
+ border-radius: 40px;
+ font-size: 32px;
}
}
-}
+}
\ No newline at end of file
diff --git a/src/views/today/scss/index.scss b/src/views/today/scss/index.scss
index f76470a..0051222 100644
--- a/src/views/today/scss/index.scss
+++ b/src/views/today/scss/index.scss
@@ -1,434 +1,777 @@
.today {
- 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;
+ /* z-index: 15; */
+ position: relative;
+ overflow: hidden;
+
+ .devicesSwitch {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 120px;
+ width: 100%;
+ z-index: 20;
+
+ .imgArea {
position: absolute;
- top: 40px;
- right: 40px;
- }
- .status {
+ top: 20px;
+ left: 20px;
+ padding: 8px;
display: flex;
- flex-wrap: wrap;
+ justify-content: flex-start;
align-items: center;
- align-content: space-between;
- justify-content: space-between;
+ background: #fff;
+ border-radius: 50px;
+ border: 4px solid $border_color;
+ z-index: 18;
+
+ &.cut {
+ border: 2px solid $com_light_green;
+ }
+
+ img {
+ width: 60px !important;
+ height: 60px !important;
+ border-radius: 50%;
+ object-fit: cover;
+ }
+
+ span {
+ padding: 0 12px;
+ @include colorAndFont(#333, 28);
+ }
+ }
+
+ .conArea {
+ position: absolute;
+ left: 0;
+ top: 0;
width: 100%;
- margin: 40px 0;
- p {
- font-size: 30px;
- color: #434144;
- font-weight: bold;
+ padding: 12px 0 12px 20px;
+ background: #fff;
+ box-sizing: border-box;
+ display: flex;
+ transform: translateX(-100%);
+ transition: left .4s ease-in-out;
+ z-index: 667;
+ overflow: scroll;
+ border: 1px solid $com_light_green;
+
+ &.active {
+ transform: translateX(0);
}
- ul {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: flex-start;
- li {
- width: 40px;
- height: 20px;
- border-radius: 20px;
+
+ .list {
+ @include center();
+ flex-direction: column;
+ @include colorAndFont(#333, 24);
+ margin-right: 20px;
+
+ .Myname {
+ @include center();
+ width: 120%;
+
+ &.active {
+ text-decoration: underline;
+ font-weight: bold;
+ }
+ }
+
+ .imgA {
+ width: 100px;
+ height: 100px;
+ background: #c5c5c5;
+ border-radius: 50%;
position: relative;
- & + li {
- margin-left: 10px;
+ @include center();
+ margin-bottom: 12px;
+ border: 1px solid;
+
+
+ &>img {
+ width: 88px;
+ height: 88px;
+ border-radius: 50%;
+ object-fit: cover;
}
- &.toobad {
- background-color: #ff5f8b;
- &:after{
- background-color: #ff5f8b;
+
+ &.active {
+ width: 105px;
+ height: 105px;
+ position: relative;
+ background: #c5c5c5;
+ box-shadow: 0 0 10px 4px rgba(185, 185, 185, 0.8);
+
+ &:after {
+ content: '';
+ position: absolute;
+ bottom: -15px;
+ width: 0;
+ height: 0;
+ border-top: 16px solid #c5c5c5;
+ border-left: 8px solid transparent;
+ border-right: 8px solid transparent;
}
}
- &.ordinary {
- background-color: #2ea7e0;
- &:after{
- background-color: #2ea7e0;
+
+ &.online {
+ background: #fff;
+
+ &.active {
+ position: relative;
+ background: #fff;
+ box-shadow: 0 0 10px 4px rgba(95, 204, 14, 0.8);
+
+ &:after {
+ content: '';
+ position: absolute;
+ bottom: -15px;
+ width: 0;
+ height: 0;
+ border-top: 16px solid #5fcc0e;
+ border-left: 8px solid transparent;
+ border-right: 8px solid transparent;
+ }
}
}
- &.sameas {
- background-color: #8dc21f;
- &:after{
- background-color: #8dc21f;
- }
+ }
+
+ }
+ }
+ }
+
+ .today-con,
+ .no-data {
+ position: relative;
+ height: calc(100vh - 150px);
+ overflow: scroll;
+
+ .calendar {
+ height: 800px;
+
+ .van-calendar {
+ height: 400px;
+ overflow: scroll;
+
+ .van-calendar__header {
+ display: 'inline-block';
+ }
+
+ .van-calendar__days .van-calendar__day {
+ width: 27px;
+ height: 27px;
+ margin: 10px 5px;
+ font-size: 24px;
+
+ &.custom-calendar {
+ width: 27px;
+ height: 27px;
}
- &.excellent {
- background-color: #179b3b;
- &:after{
- background-color: #179b3b;
+
+ &.highlight-border {
+ border: 1px solid #62bd48;
+ width: 27px;
+ height: 27px;
+ border-radius: 50%;
+
+ &.none {
+ border: 1px solid #62bd48;
}
- }
- &.active {
- width: 120px;
- &:after {
- opacity: 1;
+
+ &.mild {
+ border: 1px solid #8dc21f;
}
- &:before {
- opacity: 1;
+
+ &.moderate {
+ border: 1px solid #2ea7e0;
+ }
+
+ &.severe {
+ border: 1px solid #ff5f8b;
}
}
- &: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;
- }
+ }
+
+ .van-calendar__selected-day {
+ width: 27px;
+ height: 27px;
+ border-radius: 50%;
+ font-size: 12px;
}
}
}
- .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;
+
+ .today-status {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+ padding: 0 40px;
+
+ .img {
+ width: 100%;
+ height: 350px;
+ object-fit: contain;
+ padding-top: 140px;
}
- .bottom {
+
+ .icon {
+ width: 70px;
+ height: 70px;
+ object-fit: contain;
+ position: absolute;
+ top: 140px;
+ right: 40px;
+ z-index: 999;
+ }
+
+ .status {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ align-content: space-between;
+ justify-content: space-between;
width: 100%;
- position: relative;
+ margin: 40px 0;
+
p {
- text-align: center;
- color: #35a556;
+ font-size: 30px;
+ color: #434144;
+ font-weight: bold;
}
- div{
- position: absolute;
- top: 50%;
- right: 0;
- transform: translatey(-50%);
+
+ ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
- span{
- color: #35a556;
- font-size: 24px;
+
+ li {
+ width: 40px;
+ height: 20px;
+ border-radius: 60px;
+ 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 20px;
+ border-radius: 40px;
+ border: 1px solid $com_light_green;
+ width: calc(100% - 40px);
+
+ .no-text {
+ position: relative;
+ width: 100%;
+ @include center();
+ flex-direction: column;
+
img {
- width: 40px;
- height: 40px;
- object-fit: contain;
- margin-left: 10px;
+ height: 220px;
+ width: 350px;
+ }
+
+ p {
+ @include colorAndFont(#999, 28);
+ }
+ }
+
+ p {
+ font-size: 28px;
+ color: #434144;
+ white-space: pre-line;
+ padding: 10px 0;
+ }
+
+ .bottom {
+ width: 100%;
+ position: relative;
+
+ p {
+ text-align: center;
+ color: $com_light_green;
+ }
+
+ div {
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translatey(-50%);
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: flex-start;
+
+ span {
+ color: $com_light_green;
+ 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 {
+
+ .title {
display: flex;
flex-wrap: wrap;
align-items: center;
- justify-content: flex-start;
+ align-content: space-between;
+ justify-content: space-between;
+
p {
- margin-right: 10px;
+ font-size: 30px;
+ color: #434144;
+ font-weight: bold;
}
+
>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;
- }
- time {
- color: #fff;
- font-size: 24px;
- display: block;
+
+ >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;
+ }
}
}
}
- .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;
+
+ .emotion {
+ padding: 0 40px;
+ margin-top: 60px;
+ margin-bottom: 40px;
+
+ 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;
+ }
}
}
}
- }
- .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;
+
+ .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 {
- .specific {
- font-size: 40px;
- color: #434144;
- span {
- font-weight: bold;
- }
+ width: 25%;
+ border-radius: 40px;
+ padding: 50px 20px;
+ /* padding-bottom: px2rem(80); */
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ flex-direction: column;
+
+ &:nth-of-type(1) {
+ background-color: #179b3b;
}
- .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;
- }
+
+ &:nth-of-type(2) {
+ background-color: #ff5f8b;
}
- & + li {
- margin-top: 40px;
+
+ &: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;
+ }
+
+ time {
+ color: #fff;
+ font-size: 24px;
+ display: block;
}
}
}
- .annular {
- width: 50%;
- position: relative;
- transform: rotate(180deg);
- .van-circle {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translateX(-50%) translateY(-50%);
+
+ .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 {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translateX(-50%) translateY(-50%) rotate(180deg);
font-size: 28px;
color: #434144;
- font-weight: bold;
+ line-height: 1.5em;
+
+ span {
+ color: #edb21d;
+ }
}
}
}
- }
- .diary {
- padding:0 40px;
- margin: 50px 0;
- .main {
- width: 100%;
- .van-checkbox-group {
- width: 100%;
- margin-top: 50px;
+
+ .step {
+ padding: 0 40px;
+ margin-top: 50px;
+
+ .main {
+ border-radius: 30px;
+ border: 1px solid #179b3b;
+ padding: 40px 30px;
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: 30px;
+
+ 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;
+ }
+ }
}
- }
- .textarea {
- border-radius: 40px;
- border: 1px solid #179b3b;
- margin-top: 30px;
- overflow: hidden;
- textarea {
- width: 100%;
- padding: 30px;
- font-size: 28px;
+
+ .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;
+ }
}
}
}
- }
- .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;
+
+ .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;
- & + li {
- margin-left: 30px;
+ }
+
+ .van-checkbox {
+ width: 26%;
+ min-width: 88px;
+
+ &:nth-of-type(n+4) {
+ margin-top: 40px;
}
- p {
- width: 55%;
+
+ .van-checkbox__label img {
+ width: 30px;
+ }
+ }
+
+ .textarea {
+ border-radius: 40px;
+ border: 1px solid #179b3b;
+ margin-top: 30px;
+ overflow: hidden;
+
+ textarea {
+ width: 100%;
+ padding: 30px;
font-size: 28px;
- color: #fff;
- white-space: pre-line;
}
- img {
- height: 140px;
- object-fit: contain;
+ }
+ }
+ }
+
+ .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: 30px;
+ }
+
+ p {
+ width: 55%;
+ font-size: 28px;
+ color: #fff;
+ white-space: pre-line;
+ }
+
+ img {
+ height: 40px;
+ object-fit: contain;
+ }
}
}
}
}
}
-}
+
+ .bind-tips {
+ position: fixed;
+ bottom: 100px;
+ left: 0;
+ width: 100%;
+ overflow: hidden;
+
+ .con {
+ width: 100%;
+ padding: 15px 0;
+ @include center();
+ background-color: $next;
+ }
+
+ p {
+ font-size: 32px;
+ color: #fff;
+ }
+ }
+
+ .no-data {
+ @include center();
+ flex-direction: column;
+
+ img {
+ height: 220px;
+ width: 350px;
+ }
+
+ p {
+ @include colorAndFont(#999, 28);
+ }
+ }
+
+
+
+}
\ No newline at end of file
diff --git a/src/views/today/signsDetails.vue b/src/views/today/signsDetails.vue
index d4998f5..056ad02 100644
--- a/src/views/today/signsDetails.vue
+++ b/src/views/today/signsDetails.vue
@@ -1,35 +1,61 @@
-
-
-
-
-
-
-
-
-
-
{{ item.text }}
-
-
-
+
+
+
+
+
+
+
+
+
{{ item.text }}
+
+
+
+
+
-
- {{ titleLeft }}
-
-
+
@@ -62,13 +88,13 @@
-
-
监测次数:{{ monitoringCount || '0' }}次
+
+
{{ currentDesc || '--' }}
-
+
@@ -77,195 +103,333 @@
-
+
{{ item.text || '--' }}
- {{ item.count ? item.count + '次' : '0次' }}
-
+ {{ item.count ? item.count + unit : `0${unit}` }}
+
-
-
-
-
-
-
- {{ item.value || '--' }}
-
-
- {{ item.label || '--' }}
-
-
-
-
{{ item.time || '--' }}
+
+
+
+
+
+
+
+
{{ todayValue || '--' }}
+
{{ signUnit }}
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+ {{ item.label || '--' }}
+
+
+
+ {{ item.value || '--' }}
+
+
+
+ {{ item.time || '--' }}
+
+
+
-
+
+
- 温馨提示: 检测数据仅供参考,不可做医疗诊断和治疗依据。
+ 温馨提示:检测数据仅供参考,不可做医疗诊断和治疗依据,在运动、工作等场景会影响健康检测。
-
-
-
-
+
+
+
-
+
+
-
+
+
+
+
+
结果解读
+
+
+
暂无数据
+
-
+
+
+
+
+
+
结果解读
+
+
+ {{ result }}
+
+
+
{{ advice }}
-
- 您的心率属于正常水平值,请继续保持注意合理膳食,少吃太甜太 咸的东西,少吃高热量食物。
+
+
+
+
+
+
+
+
+
{{ surveyTitle }}
+
+
+
+ {{ item.days }}
+ 天
+
+
+
{{ item.text }}
+
+
+
+
+
+
暂无数据
+
+
-
-
温馨提示:
-
检测数据仅供参考,不可做医疗诊断和治疗依据
-
+
+
+
+
+
+
-
-
-
+
+
\ No newline at end of file