@@ -2250,87 +2250,6 @@ | |||
"webpack-chain": "^6.4.0", | |||
"webpack-dev-server": "^3.11.0", | |||
"webpack-merge": "^4.2.2" | |||
}, | |||
"dependencies": { | |||
"ansi-styles": { | |||
"version": "4.3.0", | |||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", | |||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", | |||
"dev": true, | |||
"optional": true, | |||
"requires": { | |||
"color-convert": "^2.0.1" | |||
} | |||
}, | |||
"chalk": { | |||
"version": "4.1.2", | |||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", | |||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", | |||
"dev": true, | |||
"optional": true, | |||
"requires": { | |||
"ansi-styles": "^4.1.0", | |||
"supports-color": "^7.1.0" | |||
} | |||
}, | |||
"color-convert": { | |||
"version": "2.0.1", | |||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", | |||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", | |||
"dev": true, | |||
"optional": true, | |||
"requires": { | |||
"color-name": "~1.1.4" | |||
} | |||
}, | |||
"color-name": { | |||
"version": "1.1.4", | |||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", | |||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", | |||
"dev": true, | |||
"optional": true | |||
}, | |||
"has-flag": { | |||
"version": "4.0.0", | |||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", | |||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", | |||
"dev": true, | |||
"optional": true | |||
}, | |||
"loader-utils": { | |||
"version": "2.0.4", | |||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", | |||
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", | |||
"dev": true, | |||
"optional": true, | |||
"requires": { | |||
"big.js": "^5.2.2", | |||
"emojis-list": "^3.0.0", | |||
"json5": "^2.1.2" | |||
} | |||
}, | |||
"supports-color": { | |||
"version": "7.2.0", | |||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", | |||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", | |||
"dev": true, | |||
"optional": true, | |||
"requires": { | |||
"has-flag": "^4.0.0" | |||
} | |||
}, | |||
"vue-loader-v16": { | |||
"version": "npm:vue-loader@16.8.3", | |||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz", | |||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==", | |||
"dev": true, | |||
"optional": true, | |||
"requires": { | |||
"chalk": "^4.1.0", | |||
"hash-sum": "^2.0.0", | |||
"loader-utils": "^2.0.0" | |||
} | |||
} | |||
} | |||
}, | |||
"@vue/cli-shared-utils": { | |||
@@ -15020,6 +14939,87 @@ | |||
} | |||
} | |||
}, | |||
"vue-loader-v16": { | |||
"version": "npm:vue-loader@16.8.3", | |||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz", | |||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==", | |||
"dev": true, | |||
"optional": true, | |||
"requires": { | |||
"chalk": "^4.1.0", | |||
"hash-sum": "^2.0.0", | |||
"loader-utils": "^2.0.0" | |||
}, | |||
"dependencies": { | |||
"ansi-styles": { | |||
"version": "4.3.0", | |||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", | |||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", | |||
"dev": true, | |||
"optional": true, | |||
"requires": { | |||
"color-convert": "^2.0.1" | |||
} | |||
}, | |||
"chalk": { | |||
"version": "4.1.2", | |||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", | |||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", | |||
"dev": true, | |||
"optional": true, | |||
"requires": { | |||
"ansi-styles": "^4.1.0", | |||
"supports-color": "^7.1.0" | |||
} | |||
}, | |||
"color-convert": { | |||
"version": "2.0.1", | |||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", | |||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", | |||
"dev": true, | |||
"optional": true, | |||
"requires": { | |||
"color-name": "~1.1.4" | |||
} | |||
}, | |||
"color-name": { | |||
"version": "1.1.4", | |||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", | |||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", | |||
"dev": true, | |||
"optional": true | |||
}, | |||
"has-flag": { | |||
"version": "4.0.0", | |||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", | |||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", | |||
"dev": true, | |||
"optional": true | |||
}, | |||
"loader-utils": { | |||
"version": "2.0.4", | |||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", | |||
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", | |||
"dev": true, | |||
"optional": true, | |||
"requires": { | |||
"big.js": "^5.2.2", | |||
"emojis-list": "^3.0.0", | |||
"json5": "^2.1.2" | |||
} | |||
}, | |||
"supports-color": { | |||
"version": "7.2.0", | |||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", | |||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", | |||
"dev": true, | |||
"optional": true, | |||
"requires": { | |||
"has-flag": "^4.0.0" | |||
} | |||
} | |||
} | |||
}, | |||
"vue-router": { | |||
"version": "3.5.3", | |||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz", | |||
@@ -65,6 +65,8 @@ const routes = [ | |||
{ path: '/psychologicalReport', name: 'psychologicalReport', component: resolve => require(['@/views/health/psychological/report/index'], resolve) }, | |||
// 周报/月报-入口 | |||
{ path: '/psychiclReportEntry', name: 'psychiclReportEntry', component: resolve => require(['@/views/health/psychological/report/report-entry'], resolve) }, | |||
// 周报/月报 | |||
{ path: '/reportDetails', name: 'reportDetails', component: resolve => require(['@/views/health/psychological/reportDetails/index'], resolve) }, | |||
// 告警详情-中间页 | |||
{ path: '/aiCallAlarm', name: 'aiCallAlarm', component: resolve => require(['@/views/ai-call-alarm'], resolve) }, | |||
@@ -420,10 +420,12 @@ $newBlue: #638EE4; | |||
} | |||
.overall { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
justify-content: flex-start; | |||
align-items: flex-start; | |||
width: 100%; | |||
.left { | |||
flex-direction: column; | |||
p { | |||
padding-left: 20px; | |||
font-weight: bold; | |||
@@ -21,7 +21,7 @@ | |||
</div> | |||
</div> | |||
<!-- 情绪切换 --> | |||
<div class="psy-tab-bar"> | |||
<div class="psy-tab-bar" v-if="pageType !== 1"> | |||
<div class="psy-tab-con"> | |||
<div class="psy-tab-list"> | |||
<div :class="[ | |||
@@ -193,8 +193,8 @@ | |||
<!-- 周报菜单 --> | |||
<div class="main report" v-show="current == 3"> | |||
<div class="content"> | |||
<div class="list" v-if="weekList.length > 0"> | |||
<div class="item" v-for="(item, index) in weekList" :key="index" @click="onClickItem(item.recordId)"> | |||
<div class="list" v-if="pageType === 0 && weekList.length > 0"> | |||
<div class="item" v-for="(item, index) in weekList" :key="index" @click="onClickItem(item)"> | |||
<div class="left"> | |||
<img :src="weekImg" alt /> | |||
<div class="middle"> | |||
@@ -203,13 +203,48 @@ | |||
<p>{{ item.name }}</p> | |||
</div> | |||
<div class="overall"> | |||
<span>总评</span> | |||
<div class="left"> | |||
<span>总评</span> | |||
<p :style="{ color: calcResultColor(item.summaryLevel) }"> | |||
{{ item.summary }} | |||
</p> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="right"> | |||
<img :src="moreImg" alt /> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="list" v-if="pageType === 1 && weekResultList.length > 0"> | |||
<div class="item" v-for="(item, index) in weekResultList" :key="index" @click="onClickItem(item[1])"> | |||
<div class="left"> | |||
<img :src="weekImg" alt /> | |||
<div class="middle"> | |||
<div class="title"> | |||
<span>周报</span> | |||
<p>{{ item[1].name }}</p> | |||
</div> | |||
<div class="overall"> | |||
<span>总评</span> | |||
<div class="left"> | |||
<p v-for="(su, index) in item[1].summaryDetails" :key="index" :style="{ color: calcResultColor(su.summaryLevel) }"> | |||
{{ su.summary }} | |||
</p> | |||
<!-- <p :style="{ color: calcResultColor(item.summaryLevel) }"> | |||
{{ item.summary }} | |||
</p> | |||
<p :style="{ color: calcResultColor(item.summaryLevel) }"> | |||
{{ item.summary }} | |||
</p> | |||
<p :style="{ color: calcResultColor(item.summaryLevel) }"> | |||
{{ item.summary }} | |||
</p> --> | |||
</div> | |||
</div> | |||
<!-- <div class="trend"> | |||
<p>( <span>无抑郁倾向</span><span>5%</span>,<span>轻度抑郁倾向</span> <span>5%</span> )</p> | |||
</div>--> | |||
@@ -221,7 +256,7 @@ | |||
</div> | |||
</div> | |||
</div> | |||
<div class="list no-data" v-else> | |||
<div class="list no-data" v-if="weekList.length < 1 && weekResultList.length < 1 "> | |||
<img :src="noDataImg" alt /> | |||
<p>连续佩戴两周产生对比数据</p> | |||
</div> | |||
@@ -385,9 +420,14 @@ export default { | |||
startDate: "", //接口需要的开始时间 | |||
endDate: "", //接口需要的结束时间 | |||
currentEmoName: "", //当前情绪名称 | |||
weekResultList: [], //周报新详情周报列表 | |||
}; | |||
}, | |||
computed: { | |||
// 页面类型,0 保持不动,1显示方式为新页面显示方式 | |||
pageType() { | |||
return Number(this.$route.query.pageType) || 0 | |||
}, | |||
anxietyText() { | |||
const appTypeList = ['1']; | |||
return appTypeList.indexOf(this.$store.getters.appType) > -1 ? `忧郁` : `抑郁` | |||
@@ -739,6 +779,9 @@ export default { | |||
); | |||
this.psyCurrent = this.calcPsyTabindex(EmotionModel[this.params.name].type); | |||
window.document.title = "心理监测"; | |||
if(this.pageType === 1) { | |||
this.getWeekResultAny(); | |||
} | |||
}, | |||
methods: { | |||
loadParams() { | |||
@@ -1271,7 +1314,13 @@ export default { | |||
this.endDate = dateList[1]; | |||
} else { | |||
// 周报菜单 | |||
this.getWeekResult(); | |||
if(this.pageType !== 1) { | |||
this.getWeekResult(); | |||
} else { | |||
this.getWeekResultAny(); | |||
} | |||
} | |||
}, | |||
// 点击情绪tab | |||
@@ -1433,7 +1482,79 @@ export default { | |||
onClose() { | |||
this.isPopup = false; | |||
}, | |||
getWeekResult() { | |||
//循环调用3次 GetWeekResult 接口 | |||
async getWeekResultAny() { | |||
Promise.all([ | |||
await this.getWeekResultPro(1), | |||
await this.getWeekResultPro(2), | |||
await this.getWeekResultPro(3), | |||
]).then(res =>{ | |||
let weekResultLists = res.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []) | |||
let typeMap = {}; | |||
weekResultLists.forEach(item => { | |||
if (!typeMap[item.name]) { | |||
typeMap[item.name] = { | |||
name: item.name, | |||
recordId: [], | |||
summary: [], | |||
summaryLevel: [], | |||
summaryDetails: [], | |||
type: item.type, | |||
}; | |||
weekResultLists.push(typeMap[item.name]); | |||
} | |||
typeMap[item.name].recordId.push(item.recordId); | |||
typeMap[item.name].summary.push(item.summary); | |||
typeMap[item.name].summaryLevel.push(item.summaryLevel); | |||
let combinedArray = typeMap[item.name].summary.map((sum, index) => ({summary: sum, summaryLevel: typeMap[item.name].summaryLevel[index]})); | |||
console.log(combinedArray); | |||
typeMap[item.name].summaryDetails = combinedArray | |||
}); | |||
let array = Object.entries(typeMap); | |||
this.weekResultList = array; | |||
console.log("weekResultLists", this.weekResultList); | |||
console.log("typeMap", typeMap); | |||
}); | |||
}, | |||
getWeekResultPro(type) { | |||
let baseUrl = | |||
process.env.NODE_ENV === "production" | |||
? "https://dbmq.rzliot.com/auth_heart" | |||
: "https://dbmq.rzliot.com/heart"; | |||
let reqUrl = `${baseUrl}/api/Data/GetWeekResult`; | |||
let reqParams = { | |||
uid: /* this.uid */ '2023101521270090082', | |||
type: type || this.emoType, | |||
}; | |||
return new Promise(resolve => { | |||
axios | |||
.get(reqUrl, { | |||
params: { ...reqParams }, | |||
/* headers: { 'AccessToken': this.$store.getters.ssjlToken } */ | |||
}).then(res => { | |||
const data = res.data.response; | |||
let summaryList = data.map(item => { | |||
return { | |||
name: item.Name.replace("周报", "") | |||
.replace(/-/g, ".") | |||
.replace(/~/g, "-"), | |||
recordId: item.RecordId, | |||
summary: this.$replaceAll(item.Summary, '抑郁', '忧郁'), | |||
summaryLevel: item.SummaryLevel, | |||
type: item.Type, | |||
}; | |||
}); | |||
resolve(summaryList) | |||
}) | |||
}) | |||
}, | |||
getWeekResult(type) { | |||
this.$toast.loading("数据加载中"); | |||
let baseUrl = | |||
process.env.NODE_ENV === "production" | |||
@@ -1441,7 +1562,7 @@ export default { | |||
: "https://dbmq.rzliot.com/heart"; | |||
let reqUrl = `${baseUrl}/api/Data/GetWeekResult`; | |||
let reqParams = { | |||
uid: this.uid /* '2023101521270090082 */, | |||
uid: /* this.uid */ '2023101521270090082', | |||
type: this.emoType, | |||
}; | |||
axios | |||
@@ -1468,16 +1589,32 @@ export default { | |||
this.$toast.success("数据加载完成"); | |||
}); | |||
}, | |||
onClickItem(recordId) { | |||
this.$router.push({ | |||
name: "psychologicalReport", | |||
query: { | |||
recordId: recordId, | |||
name: this.currentEmoName, | |||
isShowLeft: true, | |||
uid: this.uid, | |||
}, | |||
}); | |||
onClickItem(item) { | |||
if(this.pageType === 1) { | |||
// 跳转去新的周报详情页 | |||
this.$router.push({ | |||
name: "reportDetails", | |||
query: { | |||
recordId: item.recordId[Number(this.psyCurrent) - 1], | |||
name: this.currentEmoName, | |||
isShowLeft: true, | |||
uid: this.uid, | |||
time: item.name | |||
}, | |||
}); | |||
} else { | |||
this.$router.push({ | |||
name: "psychologicalReport", | |||
query: { | |||
recordId: item.recordId, | |||
name: this.currentEmoName, | |||
isShowLeft: true, | |||
uid: this.uid, | |||
}, | |||
}); | |||
} | |||
}, | |||
}, | |||
}; | |||
@@ -0,0 +1,319 @@ | |||
.main-details { | |||
height: 100vh; | |||
width: 100%; | |||
overflow: hidden; | |||
background-color: #F5F5F5; | |||
font-family: Source Han Sans CN; | |||
.report-details { | |||
height: calc(100vh - 120px); | |||
overflow: scroll; | |||
background-color: #fff; | |||
.line { | |||
height: 11px; | |||
background-color: $lineGray; | |||
} | |||
.overall-rating { | |||
padding: 23px 15px; | |||
margin-bottom: 9px; | |||
.con { | |||
padding: 17px 18px; | |||
display: flex; | |||
justify-content: flex-start; | |||
align-items: flex-start; | |||
flex-direction: column; | |||
font-size: 14px; | |||
background: #FFFFFF; | |||
border: 1px solid #535353; | |||
box-shadow: 4px 5px 0px 0px #638EE4; | |||
border-radius: 5px; | |||
p { | |||
font-size: 18px; | |||
font-family: Source Han Sans CN; | |||
color: #666666; | |||
.bold { | |||
color: #282828; | |||
font-weight: bold; | |||
} | |||
} | |||
.space-between { | |||
width: 100%; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
.time { | |||
font-size: 12px; | |||
} | |||
} | |||
.normal { | |||
font-size: 13px; | |||
line-height: 21px; | |||
text-align: left; | |||
color: #666666; | |||
} | |||
.bold-pro { | |||
color: #282828; | |||
font-size: 24px; | |||
font-weight: bold; | |||
padding: 12px 0; | |||
} | |||
} | |||
} | |||
.pie-chart-top { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: flex-start; | |||
padding: 23px 15px 16px 15px; | |||
p { | |||
font-size: 12px; | |||
font-family: Source Han Sans CN; | |||
line-height: 21px; | |||
} | |||
.bold { | |||
font-size: 18px; | |||
font-weight: bold; | |||
color: #282828; | |||
line-height: 18px; | |||
} | |||
} | |||
.count { | |||
padding: 0 15px 5px 15px; | |||
text-align: left; | |||
p { | |||
font-size: 12px; | |||
font-family: Source Han Sans CN; | |||
font-weight: 400; | |||
color: #8B8B8B; | |||
line-height: 18px; | |||
} | |||
} | |||
.pie-chart-con { | |||
flex: 1; | |||
padding: 5px 0 10px 0; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: flex-start; | |||
background-color: #fff; | |||
.pie-chart-left { | |||
position: relative; | |||
height: 150px; | |||
padding-left: 15px; | |||
width: 35%; | |||
@include center(); | |||
#pieChart { | |||
height: 106px; | |||
width: 106px; | |||
} | |||
} | |||
.pie-chart-right { | |||
height: 150px; | |||
width: 65%; | |||
@include center(); | |||
.list { | |||
display: flex; | |||
justify-content: center; | |||
flex-direction: column; | |||
.item { | |||
width: 100%; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
font-size: 12px; | |||
padding: 9px 0; | |||
.item-left { | |||
display: flex; | |||
justify-content: flex-start; | |||
align-items: center; | |||
padding-right: 10px; | |||
.circle { | |||
height: 12px; | |||
width: 12px; | |||
margin: 0 4px; | |||
} | |||
span { | |||
font-size: 12px; | |||
} | |||
.text { | |||
color: #000; | |||
font-size: 12px; | |||
} | |||
} | |||
.item-right { | |||
@include center(); | |||
span { | |||
font-size: 12px; | |||
} | |||
} | |||
.status { | |||
padding: 0 5px; | |||
@include center(); | |||
img { | |||
height: 15px; | |||
width: 9px; | |||
padding: 0 3px ; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.statistics { | |||
position: relative; | |||
padding: 5px 14px 5px 14px; | |||
.list { | |||
flex: 1; | |||
width: 100%; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
font-size: 16px; | |||
.item { | |||
@include center(); | |||
width: 58px; | |||
/* height: px2rem(136); */ | |||
flex-direction: column; | |||
.top { | |||
font-size: 12px; | |||
} | |||
.middle { | |||
font-size: 24px; | |||
font-weight: bold; | |||
padding: 5px; | |||
} | |||
.bottom { | |||
font-size: 9px | |||
} | |||
} | |||
} | |||
} | |||
.bar-chart { | |||
height: 350px; | |||
background-color: #fff; | |||
padding: 0 5px; | |||
.echart { | |||
height: 350px; | |||
padding: 0 5px; | |||
} | |||
} | |||
.advice { | |||
padding: 26px 15px 30px 15px; | |||
.content { | |||
background: #F2F6FF; | |||
border-radius: 10px; | |||
padding: 20px 15px; | |||
text-align: left; | |||
p { | |||
font-size: 15px; | |||
font-weight: 400; | |||
color: #707070; | |||
line-height: 23px; | |||
} | |||
.title { | |||
font-size: 18px; | |||
font-weight: bold; | |||
color: #638EE4; | |||
line-height: 18px; | |||
padding-bottom: 13px; | |||
} | |||
} | |||
} | |||
.overview { | |||
padding: 0 15px 16px 15px; | |||
.content { | |||
.title { | |||
text-align: left; | |||
.title-text { | |||
font-size: 18px; | |||
font-weight: bold; | |||
color: #282828; | |||
line-height: 18px; | |||
} | |||
.mood-list { | |||
display: grid; | |||
grid-template-columns: repeat(2, 1fr); //定义了一个 2x2 的网格布 | |||
grid-template-rows: repeat(2, 1fr); | |||
gap: 21px; | |||
padding: 21px 21px 22px 20px; | |||
.item { | |||
width: 107px; | |||
height: 94px; | |||
background-color: #F2F6FF; | |||
display: flex; | |||
justify-content: center; | |||
align-items: flex-start; | |||
flex-direction: column; | |||
padding-left: 30px; | |||
p { | |||
font-size: 14px; | |||
padding: 0; | |||
color: #666666; | |||
@include center(); | |||
/* align-items: flex-end; */ | |||
.day { | |||
/* padding: 5px; */ | |||
font-size: 28px; | |||
} | |||
.day-text { | |||
font-size: 12px; | |||
padding: 0 5px; | |||
} | |||
img { | |||
height: 15px; | |||
width: 9px; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
&.no-data { | |||
@include center(); | |||
flex-direction: column; | |||
p { | |||
font-size: 16px; | |||
} | |||
} | |||
} | |||
} |