hulei_ip
/
h5
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'jxg_test_h5' into prod

This commit is contained in:
xg-29 2024-09-26 19:00:56 +08:00
parent 4b489b36b6 ffff646a26
commit c846ca4c6f
4 changed files with 594 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages.json
View File

@ -447,5 +447,23 @@
"navigationBarTitleText": ""
}
}]
}]
},
{
"root": "pages/largeScreenEvaluation",
"pages": [
{
"path": "evaluationIndex",
"style": {
"navigationBarTitleText": "评估首页"
}
},
{
"path": "evaluationList",
"style": {
"navigationBarTitleText": "评估列表"
}
}
]
}
]
}

88
src/pages/largeDataScreen/largeDataScreen.vue
View File

@ -247,7 +247,7 @@ export default {
textStyle: {
fontFamily: 'PingFang SC, PingFang SC',
fontSize: 22,
fontSize: 25,
fontStyle: 'normal',
fontWeight: '500',
color: '#7AFFFF'
@ -259,7 +259,7 @@ export default {
data: data.datas,
axisLabel: {
textStyle: {
fontSize: 20,
fontSize: 23,
color: '#fff'
}
}
@ -268,7 +268,7 @@ export default {
type: 'value',
axisLabel: {
textStyle: {
fontSize: 20,
fontSize: 23,
color: '#fff'
}
}
@ -405,7 +405,7 @@ export default {
tooltip: {
trigger: 'item',
textStyle: {
fontSize: 20,
fontSize: 23,
}
},
legend: {
@ -413,7 +413,7 @@ export default {
right: '10',
top: 'center',
textStyle: {
fontSize: 20,
fontSize: 23,
color: '#fff',
},
formatter: function (name) { // 添加
@ -446,7 +446,7 @@ export default {
},
textStyle: { // 提示文字的样式
color: '#fff',
fontSize: 20
fontSize: 23
}
}
},
@ -494,7 +494,7 @@ export default {
},
axisLabel: {
textStyle: {
fontSize: 20,
fontSize: 23,
color: '#fff'
}
}
@ -591,7 +591,7 @@ export default {
type: 'shadow'
},
textStyle: {
fontSize: 22
fontSize: 24
}
},
xAxis: {
@ -673,7 +673,7 @@ export default {
},
axisLabel: {
textStyle: {
fontSize: 20,
fontSize: 23,
color: '#fff'
}
}
@ -730,7 +730,7 @@ export default {
tooltip: {
trigger: 'item',
textStyle: {
fontSize: 20,
fontSize: 23,
}
},
legend: {
@ -738,7 +738,7 @@ export default {
right: '10',
top: 'center',
textStyle: {
fontSize: 20,
fontSize: 23,
color: '#fff'
},
formatter: function (name) { // 添加
@ -811,7 +811,7 @@ export default {
},
axisLabel: {
textStyle: {
fontSize: 20,
fontSize: 23,
color: '#fff'
}
}
@ -868,7 +868,7 @@ export default {
tooltip: {
trigger: 'item',
textStyle: {
fontSize: 20,
fontSize: 23,
}
},
legend: {
@ -876,7 +876,7 @@ export default {
right: '10',
top: 'center',
textStyle: {
fontSize: 20,
fontSize: 23,
color: '#fff'
},
formatter: function (name) { // 添加
@ -948,7 +948,7 @@ export default {
},
axisLabel: {
textStyle: {
fontSize: 20,
fontSize: 23,
color: '#fff'
}
}
@ -1005,7 +1005,7 @@ export default {
tooltip: {
trigger: 'item',
textStyle: {
fontSize: 20,
fontSize: 23,
}
},
legend: {
@ -1013,7 +1013,7 @@ export default {
right: '10',
top: 'center',
textStyle: {
fontSize: 20,
fontSize: 23,
color: '#fff'
},
formatter: function (name) { // 添加
@ -1086,7 +1086,7 @@ export default {
},
axisLabel: {
textStyle: {
fontSize: 20,
fontSize: 23,
color: '#fff'
}
}
@ -1143,7 +1143,7 @@ export default {
tooltip: {
trigger: 'item',
textStyle: {
fontSize: 20,
fontSize: 23,
}
},
legend: {
@ -1151,7 +1151,7 @@ export default {
right: '10',
top: 'center',
textStyle: {
fontSize: 20,
fontSize: 23,
color: '#fff'
},
formatter: function (name) { // 添加
@ -1224,7 +1224,7 @@ export default {
},
axisLabel: {
textStyle: {
fontSize: 20,
fontSize: 23,
color: '#fff'
}
}
@ -1282,20 +1282,20 @@ export default {
title: {
text: '健康人群比例趋势',
textStyle: {
fontSize: 20,
fontSize: 25,
color: '#fff'
}
},
tooltip: {
trigger: 'axis',
textStyle: {
fontSize: 20,
fontSize: 25,
}
},
legend: {
data: data.valueNames,
textStyle: {
fontSize: 20,
fontSize: 25,
color: "#fff"
}
},
@ -1325,7 +1325,7 @@ export default {
show: true,
fontFamily: '微软雅黑',
color: "#fff",
fontSize: '20',
fontSize: '25',
},
}
},
@ -1415,7 +1415,7 @@ export default {
distance: 5,
rotate: 90,
verticalAlign: 'middle',
fontSize: 16,
fontSize: 25,
color: 'white',
formatter: function (params) {
if (Number(params.value) > 0) {
@ -1441,12 +1441,12 @@ export default {
type: 'shadow'
},
textStyle: {
fontSize: 20,
fontSize: 23,
}
},
legend: {
textStyle: {
fontSize: 20,
fontSize: 23,
color: '#fff'
}
},
@ -1482,22 +1482,22 @@ export default {
},
rich: {
a: {
fontSize: 12,
fontSize: 13,
lineHeight: 24,
color: 'white',
padding: [0, 3]
},
b: {
fontSize: 16,
fontSize: 17,
color: 'white',
lineHeight: 24
},
c: {
fontSize: 12,
fontSize: 13,
color: 'red'
},
d: {
fontSize: 12,
fontSize: 13,
color: 'green'
}
},
@ -1518,7 +1518,7 @@ export default {
show: true,
fontFamily: '微软雅黑',
color: "#fff",
fontSize: '20',
fontSize: '25',
},
}
}
@ -1593,8 +1593,8 @@ export default {
<style lang="scss" scoped>
.large-data-screen-container {
// width: 3840px;
width: 100%;
width: 3840px;
// width: 100%;
height: 2160px;
// width: 100%;
// height: 100vh;
@ -1639,7 +1639,7 @@ export default {
width: 100%;
.one-data-part {
margin-top: 34px;
margin-top: 28px;
width: 100%;
height: 450px;
@ -1652,7 +1652,7 @@ export default {
justify-content: space-between;
.left-content {
width: 49%;
width: 49.6%;
height: 100%;
background: rgba(3, 220, 223, 0.04);
box-shadow: inset 0px 0px 60px 0px rgba(3, 220, 223, 0.14);
@ -1780,7 +1780,7 @@ export default {
}
.right-content {
width: 49%;
width: 49.6%;
height: 100%;
display: flex;
flex-direction: row;
@ -1859,7 +1859,7 @@ export default {
.two-data-part {
height: 719px;
width: 100%;
margin-top: 34px;
margin-top: 28px;
.content {
width: 100%;
@ -1870,7 +1870,7 @@ export default {
justify-content: space-between;
.left {
width: 49%;
width: 49.6%;
height: 100%;
display: flex;
flex-direction: row;
@ -1934,7 +1934,7 @@ export default {
}
.right {
width: 49%;
width: 49.6%;
height: 100%;
display: flex;
flex-direction: row;
@ -2000,7 +2000,7 @@ export default {
}
.three-data-part {
margin-top: 34px;
margin-top: 28px;
height: 749px;
width: 100%;
@ -2013,7 +2013,7 @@ export default {
justify-content: space-between;
.left {
width: 49%;
width: 49.6%;
height: 100%;
background: rgba(3, 220, 223, 0.04);
border-radius: 0px 0px 0px 0px;
@ -2082,7 +2082,7 @@ export default {
}
.right {
width: 49%;
width: 49.6%;
height: 100%;
background: rgba(3, 220, 223, 0.04);
border-radius: 0px 0px 0px 0px;

176
src/pages/largeScreenEvaluation/evaluationIndex.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<!-- 大屏首页 -->
<view class="evaluation-index-container">
<view class="top-part">
<image src="https://shayu5qny.yhy.ren/company_icon.png" class="icon"></image>
<view class="userInfo-group">
<image src="" class="avatar"></image>
<view class="name">一只小蜜蜂</view>
</view>
</view>
<view class="center-part">
<image src="https://shayu5qny.yhy.ren/evaluationIndex_bg.png" class="center-part_bg"></image>
</view>
<view class="bottom-part">
<view class="check-group">
<image class="icon1" src="https://shayu5qny.yhy.ren/life_icon.png"></image>
<view class="descri">生活方式评估</view>
<view class="english-decsri">lifestyle</view>
</view>
<view class="check-group">
<image class="icon1" src="https://shayu5qny.yhy.ren/illness_icon.png"></image>
<view class="descri">疾病风险评估</view>
<view class="english-decsri">lifestyle</view>
</view>
<view class="check-group">
<image class="icon1" src="https://shayu5qny.yhy.ren/mind_icon.png"></image>
<view class="descri">心理健康评估</view>
<view class="english-decsri">lifestyle</view>
</view>
</view>
<view class="btn-part">
退出登录
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.evaluation-index-container {
width: 1080px;
height: 1920px;
background: linear-gradient(225deg, #E3F5FF 0%, #ECF8FF 100%);
border-radius: 0px 0px 0px 0px;
padding: 40px;
box-sizing: border-box;
.top-part {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.icon {
width: 254px;
height: 80px;
}
.userInfo-group {
background: rgba(255, 255, 255, 0.4);
border-radius: 43px 43px 43px 43px;
border: 1px solid #FFFFFF;
padding: 7px 24px 7px 7px;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
.avatar {
height: 66px;
width: 66px;
border-radius: 50%;
background: red;
margin-right: 20px;
}
.name {
font-weight: 400;
font-size: 24px;
color: #333333;
line-height: 28px;
font-style: normal;
text-transform: none;
}
}
}
.center-part {
width: 100%;
height: 1138px;
margin-top: 40px;
.center-part_bg {
width: 100%;
height: 100%;
}
}
.bottom-part {
margin-top: 40px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.check-group {
height: 420px;
width: 312px;
background: rgba(255, 255, 255, 0.4);
border-radius: 12px 12px 12px 12px;
border: 2px solid #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.icon1 {
height: 110px;
width: 110px;
}
.descri {
margin-top: 48px;
font-weight: 500;
font-size: 32px;
color: #333333;
line-height: 38px;
font-style: normal;
text-transform: none;
}
.english-decsri {
margin-top: 6px;
font-weight: 400;
font-size: 20px;
color: #666666;
line-height: 23px;
font-style: normal;
text-transform: none;
}
}
}
.btn-part {
margin-top: 40px;
width: 100%;
height: 80px;
background: rgba(255, 255, 255, 0.4);
border-radius: 40px 40px 40px 40px;
border: 2px solid #FFFFFF;
font-weight: 500;
font-size: 24px;
color: #FF3B30;
line-height: 80px;
text-align: center;
font-style: normal;
text-transform: none;
}
}
</style>

355
src/pages/largeScreenEvaluation/evaluationList.vue Normal file
View File

@ -0,0 +1,355 @@
<template>
<!-- 评估列表 -->
<view class="evaluation-list-container">
<view class="evaluation-list-content">
<view class="title-group">
<view class="title">疾病风险评估</view>
</view>
<view class="list-content">
<scroll-view scroll-y="true" class="scroll-Y">
<view class="content">
<!-- <view class="status">高风险</view> -->
<!-- <view class="status status1">中风险</view> -->
<view class="status status2">低风险</view>
<view class="content-info">
<iamge src="" class="thumb"></iamge>
<view class="descri-group">
<view class="name">基础评估</view>
<view class="descri">高血压是指以体循环动脉血压增高（收收收...</view>
</view>
</view>
<!-- <view class="bottom-info">
<view class="detail-info">
10天前测过
</view>
<view class="btn-group">
<view class="btn1">查看历史结果</view>
<view class="btn1 btn2">重新评估</view>
</view>
</view> -->
<view class="bottom-info">
<view class="detail-info">
1109人测过<text style="margin:0 10px">|</text>约20题
</view>
<view class="btn">去评估</view>
</view>
</view>
<view class="content">
<!-- <view class="status">高风险</view> -->
<!-- <view class="status status1">中风险</view> -->
<view class="status status2">低风险</view>
<view class="content-info">
<iamge src="" class="thumb"></iamge>
<view class="descri-group">
<view class="name">基础评估</view>
<view class="descri">高血压是指以体循环动脉血压增高（收收收...</view>
</view>
</view>
<!-- <view class="bottom-info">
<view class="detail-info">
10天前测过
</view>
<view class="btn-group">
<view class="btn1">查看历史结果</view>
<view class="btn1 btn2">重新评估</view>
</view>
</view> -->
<view class="bottom-info">
<view class="detail-info">
1109人测过<text style="margin:0 10px">|</text>约20题
</view>
<view class="btn">去评估</view>
</view>
</view>
<view class="content">
<!-- <view class="status">高风险</view> -->
<!-- <view class="status status1">中风险</view> -->
<view class="status status2">低风险</view>
<view class="content-info">
<iamge src="" class="thumb"></iamge>
<view class="descri-group">
<view class="name">基础评估</view>
<view class="descri">高血压是指以体循环动脉血压增高（收收收...</view>
</view>
</view>
<!-- <view class="bottom-info">
<view class="detail-info">
10天前测过
</view>
<view class="btn-group">
<view class="btn1">查看历史结果</view>
<view class="btn1 btn2">重新评估</view>
</view>
</view> -->
<view class="bottom-info">
<view class="detail-info">
1109人测过<text style="margin:0 10px">|</text>约20题
</view>
<view class="btn">去评估</view>
</view>
</view>
<view class="content">
<!-- <view class="status">高风险</view> -->
<!-- <view class="status status1">中风险</view> -->
<view class="status status2">低风险</view>
<view class="content-info">
<iamge src="" class="thumb"></iamge>
<view class="descri-group">
<view class="name">基础评估</view>
<view class="descri">高血压是指以体循环动脉血压增高（收收收...</view>
</view>
</view>
<!-- <view class="bottom-info">
<view class="detail-info">
10天前测过
</view>
<view class="btn-group">
<view class="btn1">查看历史结果</view>
<view class="btn1 btn2">重新评估</view>
</view>
</view> -->
<view class="bottom-info">
<view class="detail-info">
1109人测过<text style="margin:0 10px">|</text>约20题
</view>
<view class="btn">去评估</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="search">
<image src="https://shayu5qny.yhy.ren/search_bg.png"></image>
<input placeholder="搜索评估关键词" class="inputClass" v-model="contentText" @input="input" maxlength="17" />
<view class="searchTitle" @tap="searchChange">搜索</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
contentText:""
}
},
methods: {
searchChange(){
}
}
}
</script>
<style lang="scss" scoped>
.evaluation-list-container {
width: 1080px;
height: 1920px;
background: linear-gradient(225deg, #E3F5FF 0%, #ECF8FF 100%);
border-radius: 0px 0px 0px 0px;
padding: 40px;
box-sizing: border-box;
.evaluation-list-content {
height: 1378px;
width: 100%;
background: #FFFFFF;
border-radius: 12px 12px 12px 12px;
padding: 0 40px;
.title-group {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.title {
margin-top: 48px;
margin-bottom: 40px;
font-weight: bold;
font-size: 48px;
color: #17191A;
line-height: 56px;
font-style: normal;
text-transform: none;
}
}
.list-content {
height: calc(100% - 160px);
width: 100%;
.scroll-Y {
width: 100%;
height: 100%;
.content {
width: 100%;
height: 326px;
background: rgba(233, 246, 248, 0.6);
border-radius: 12px 12px 12px 12px;
margin-bottom: 32px;
padding: 32px;
position: relative;
.status {
position: absolute;
right: 32px;
top: 32px;
font-weight: 500;
font-size: 32px;
color: #FF3B30;
line-height: 38px;
font-style: normal;
text-transform: none;
}
.status1 {
color: #ED7D2B;
}
.status2 {
color: #10AB4A;
}
.content-info {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
.thumb {
width: 174px;
height: 174px;
margin-right: 28px;
background: red;
}
.descri-group {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
.name {
font-weight: 500;
font-size: 42px;
color: #333333;
line-height: 49px;
font-style: normal;
text-transform: none;
margin-bottom: 20px;
}
.descri {
font-weight: 400;
font-size: 32px;
color: #666666;
line-height: 38px;
font-style: normal;
text-transform: none;
overflow: hidden;
/* 隐藏超出容器的内容 */
white-space: nowrap;
/* 保持文本在一行内显示 */
text-overflow: ellipsis;
/* 超出内容用省略号表示 */
}
}
}
.bottom-info {
margin-top: 32px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.detail-info {
font-weight: 400;
font-size: 32px;
color: #666666;
line-height: 38px;
font-style: normal;
text-transform: none;
}
.btn {
width: 182px;
height: 70px;
background: linear-gradient(#3AAFB8 0%, #6ACBD1 100%);
border-radius: 35px 35px 35px 35px;
font-weight: 400;
font-size: 34px;
color: #FFFFFF;
line-height: 60px;
text-align: center;
font-style: normal;
text-transform: none;
}
.btn-group {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
.btn1 {
font-weight: 400;
font-size: 32px;
color: #3AAFB8;
line-height: 38px;
text-align: left;
font-style: normal;
text-decoration-line: underline;
text-transform: none;
}
.btn2 {
margin-left: 32px;
}
}
}
}
}
}
}
.search {
width: 100%;
height: 112px;
position: relative;
margin-top: 40px;
display: flex;
align-items: center;
image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.inputClass {
width: 100%;
height: 100%;
font-size: 40px;
padding-left: 40px;
}
.searchTitle {
position: absolute;
right: 66px;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 52px;
color: #FFFFFF;
}
}
}
</style>