diff --git a/miniprogram/app.json b/miniprogram/app.json index 9ca157d..04d605c 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -1,10 +1,11 @@ { "pages": [ - "pages/home/home", + "pages/detailedReport/detailedReport", "pages/login/login", "pages/supplementPersonal/supplementPersonal", "pages/connectedDevice/connectedDevice", "pages/connectedWifi/connectedWifi", + "pages/home/home", "pages/equipment/equipment", "pages/userManagement/userManagement", "pages/addUser/addUser", @@ -12,8 +13,7 @@ "pages/my/my", "pages/personalInformation/personalInformation", "pages/helpCenter/helpCenter", - "pages/questionDetails/questionDetails", - "pages/detailedReport/detailedReport" + "pages/questionDetails/questionDetails" ], "usingComponents": { "empty-data": "/components/emptyData/emptyData" diff --git a/miniprogram/images/addUser/calendar.png b/miniprogram/images/addUser/calendar.png new file mode 100644 index 0000000..89d1607 Binary files /dev/null and b/miniprogram/images/addUser/calendar.png differ diff --git a/miniprogram/images/data/droplet.png b/miniprogram/images/data/droplet.png new file mode 100644 index 0000000..b34b671 Binary files /dev/null and b/miniprogram/images/data/droplet.png differ diff --git a/miniprogram/images/data/user.png b/miniprogram/images/data/user.png new file mode 100644 index 0000000..e870169 Binary files /dev/null and b/miniprogram/images/data/user.png differ diff --git a/miniprogram/images/detailedReport/bg.jpg b/miniprogram/images/detailedReport/bg.jpg new file mode 100644 index 0000000..155cb1c Binary files /dev/null and b/miniprogram/images/detailedReport/bg.jpg differ diff --git a/miniprogram/images/detailedReport/calendar.png b/miniprogram/images/detailedReport/calendar.png new file mode 100644 index 0000000..9f8d216 Binary files /dev/null and b/miniprogram/images/detailedReport/calendar.png differ diff --git a/miniprogram/images/detailedReport/trendingDown.png b/miniprogram/images/detailedReport/trendingDown.png new file mode 100644 index 0000000..9e18206 Binary files /dev/null and b/miniprogram/images/detailedReport/trendingDown.png differ diff --git a/miniprogram/images/userManagement/reload.png b/miniprogram/images/userManagement/reload.png new file mode 100644 index 0000000..3db18dd Binary files /dev/null and b/miniprogram/images/userManagement/reload.png differ diff --git a/miniprogram/pages/detailedReport/detailedReport.less b/miniprogram/pages/detailedReport/detailedReport.less index a00e4bc..5316566 100644 --- a/miniprogram/pages/detailedReport/detailedReport.less +++ b/miniprogram/pages/detailedReport/detailedReport.less @@ -1,274 +1,341 @@ .detailedReport { width: 100%; height: 100%; - //padding: 24rpx 32rpx; - //box-sizing: border-box; - //background-color: #F5F7FB; .scrollViewContent { width: 100%; - padding: 24rpx 32rpx; - box-sizing: border-box; + position: relative; - /* 顶部头部 */ - .header { + .bg { + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; width: 100%; - height: 360rpx; - border-radius: 24rpx; - background: linear-gradient(135deg, #C0E0FD 0%, #E2E9F9 100%); - display: flex; - flex-direction: column; - justify-content: center; - padding: 0 40rpx; + height: 440rpx; + } + + .detailedReport-container { + width: 100%; + padding-top: 190rpx; box-sizing: border-box; - margin-bottom: 24rpx; - .header-slogan { - margin-bottom: 24rpx; + .title { + width: 100%; + margin-bottom: 20rpx; - .slogan-title { + .title_1 { color: #1A3F68; height: 32rpx; font-size: 32rpx; + font-weight: bolder; line-height: 32rpx; + margin-bottom: 20rpx; } - .slogan-sub { + .title_2 { color: #446D99; height: 26rpx; font-size: 26rpx; + font-weight: bolder; line-height: 26rpx; - margin-top: 12rpx; } } - .header-date { - color: #FFFFFF; - height: 26rpx; - font-size: 26rpx; - line-height: 26rpx; - } - - .header-weight { - display: flex; - align-items: flex-end; - margin-top: 24rpx; - - .weight-num { - color: #FFFFFF; - height: 120rpx; - font-size: 120rpx; - line-height: 120rpx; - } - - .weight-unit { - color: #FFFFFF; - height: 28rpx; - font-size: 28rpx; - line-height: 28rpx; - margin: 0 0 24rpx 12rpx; - } - } - - .header-info { - display: flex; - align-items: center; - margin-top: 16rpx; - - .header-bmi { - color: #FFFFFF; - height: 22rpx; - font-size: 22rpx; - line-height: 22rpx; - margin-right: 24rpx; - } - - .header-change { - color: #FFFFFF; - height: 22rpx; - font-size: 22rpx; - line-height: 22rpx; - } - } - } - - /* 卡片 */ - .card { - width: 100%; - padding: 32rpx; - border-radius: 24rpx; - background-color: #FFFFFF; - box-sizing: border-box; - margin-bottom: 24rpx; - - .card-title { - display: flex; - align-items: center; + /* 顶部头部 */ + .header { + width: 100%; + height: 280rpx; + border-radius: 32rpx; + box-shadow: 0 16rpx 32rpx 0 rgba(19, 133, 250, 0.16); + background: linear-gradient(90deg, #1385FA 0%, #0B6FD4 100%); + padding: 45rpx; + box-sizing: border-box; margin-bottom: 24rpx; - .title-bar { - width: 6rpx; - height: 20rpx; - border-radius: 4rpx; - background-color: #1385FA; - margin-right: 16rpx; - } + .header-top { + width: 100%; + height: 38rpx; + display: flex; + flex-wrap: nowrap; + align-items: center; + margin-bottom: 50rpx; - .title-text { - color: #252535; - height: 32rpx; - font-size: 32rpx; - line-height: 32rpx; - } - } + > view:nth-of-type(1) { + width: 38rpx; + height: 38rpx; + display: flex; + align-items: center; + margin-right: 16rpx; + } - /* 基础指标 2x2 */ - .basic-grid { - display: flex; - flex-wrap: wrap; - - .basic-item { - width: 50%; - box-sizing: border-box; - padding: 24rpx 0; - - .basic-label { - color: #808080; + > view:nth-of-type(2) { + color: #FFFFFF; height: 26rpx; font-size: 26rpx; line-height: 26rpx; - margin-bottom: 16rpx; + } + } + + .header-bottom { + width: 100%; + height: 120rpx; + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: end; + + .header-weight { + height: 120rpx; + display: flex; + flex-wrap: nowrap; + align-items: end; + + .weight-num1 { + color: #FFFFFF; + height: 120rpx; + font-size: 120rpx; + line-height: 120rpx; + } + + .weight-num2 { + color: #FFFFFF; + height: 68rpx; + font-size: 56rpx; + line-height: 68rpx; + margin-right: 10rpx; + } + + .weight-unit { + color: #FFFFFF; + height: 40rpx; + font-size: 28rpx; + line-height: 40rpx; + } } - .basic-value-row { + .header-info { + width: 200rpx; display: flex; - align-items: flex-end; + flex-wrap: wrap; + justify-content: right; - .basic-value { - color: #252535; - height: 48rpx; - font-size: 48rpx; - line-height: 48rpx; - } - - .basic-unit { - color: #252535; - height: 26rpx; - font-size: 26rpx; - line-height: 26rpx; - margin: 0 0 6rpx 8rpx; - } - - .basic-tag { - height: 30rpx; - padding: 0 10rpx; - font-size: 18rpx; - line-height: 30rpx; - border-radius: 8rpx; + .header-bmi { color: #FFFFFF; - background-color: #2AC79F; - margin: 0 0 6rpx 12rpx; + height: 48rpx; + font-size: 22rpx; + line-height: 48rpx; + border-radius: 24rpx; + padding: 0 20rpx; + margin-bottom: 16rpx; + border: 2rpx solid rgba(255, 255, 255, 0.20); + background-color: rgba(255, 255, 255, 0.12); + } + + .header-change { + color: #FFFFFF; + height: 48rpx; + font-size: 22rpx; + line-height: 48rpx; + border-radius: 24rpx; + padding: 0 20rpx; + border: 2rpx solid rgba(255, 255, 255, 0.20); + background-color: rgba(255, 255, 255, 0.12); } } } } - /* BMI 刻度 */ - .bmi-scale { - margin-top: 24rpx; + /* 卡片 */ + .card { + width: 100%; + padding: 32rpx; + border-radius: 24rpx; + background-color: #FFFFFF; + box-sizing: border-box; + margin-bottom: 24rpx; - .scale-track { + .card-title { display: flex; - height: 20rpx; - border-radius: 6rpx; - overflow: hidden; + align-items: center; + margin-bottom: 24rpx; - .scale-block { - flex: 1; - } - - .scale-block--low { + .title-bar { + width: 6rpx; + height: 20rpx; + border-radius: 4rpx; background-color: #1385FA; + margin-right: 16rpx; } - .scale-block--normal { - background-color: #2AC79F; - } - - .scale-block--over { - background-color: #FFA151; - } - - .scale-block--obese { - background-color: #F24439; + .title-text { + color: #252535; + height: 32rpx; + font-size: 32rpx; + line-height: 32rpx; } } - .scale-row { - display: flex; - margin-top: 16rpx; + /* 基础指标 3 列 2 行 */ + .basic-grid { + .basic-row { + display: flex; + border-bottom: 2rpx solid #EAECF1; - > view { + &:last-of-type { + border-bottom: none; + } + + .basic-cell { + flex: 1; + box-sizing: border-box; + padding: 24rpx 0; + border-right: 2rpx solid #EAECF1; + + &:last-of-type { + border-right: none; + } + + .basic-label { + color: #808080; + height: 26rpx; + font-size: 26rpx; + line-height: 26rpx; + margin-bottom: 16rpx; + } + + .basic-value-row { + display: flex; + align-items: flex-end; + + .basic-value { + color: #252535; + height: 48rpx; + font-size: 48rpx; + line-height: 48rpx; + } + + .basic-unit { + color: #252535; + height: 26rpx; + font-size: 26rpx; + line-height: 26rpx; + margin: 0 0 6rpx 8rpx; + } + + .basic-tag { + height: 30rpx; + padding: 0 10rpx; + font-size: 18rpx; + line-height: 30rpx; + border-radius: 8rpx; + color: #FFFFFF; + background-color: #2AC79F; + margin: 0 0 6rpx 12rpx; + } + } + } + } + } + + /* BMI 刻度 */ + .bmi-scale { + margin-top: 24rpx; + + .scale-track { + display: flex; + height: 20rpx; + border-radius: 6rpx; + overflow: hidden; + + .scale-block { + flex: 1; + } + + .scale-block--low { + background-color: #1385FA; + } + + .scale-block--normal { + background-color: #2AC79F; + } + + .scale-block--over { + background-color: #FFA151; + } + + .scale-block--obese { + background-color: #F24439; + } + } + + .scale-row { + display: flex; + margin-top: 16rpx; + + > view { + flex: 1; + text-align: center; + color: #77849E; + height: 24rpx; + font-size: 24rpx; + line-height: 24rpx; + } + } + + .scale-row--range { + margin-top: 12rpx; + + > view { + color: #B6B6B6; + height: 20rpx; + font-size: 20rpx; + line-height: 20rpx; + } + } + } + + /* 指标行 */ + .metric-row { + width: 100%; + display: flex; + align-items: center; + padding: 20rpx 0; + + .metric-label { flex: 1; - text-align: center; color: #77849E; + height: 28rpx; + font-size: 28rpx; + line-height: 28rpx; + } + + .metric-value { + color: #252535; + height: 28rpx; + font-size: 28rpx; + line-height: 28rpx; + margin-right: 24rpx; + } + + .metric-status { height: 24rpx; font-size: 24rpx; line-height: 24rpx; } - } - .scale-row--range { - margin-top: 12rpx; - - > view { - color: #B6B6B6; - height: 20rpx; - font-size: 20rpx; - line-height: 20rpx; + .metric-status--normal { + color: #2AC79F; } - } - } - /* 指标行 */ - .metric-row { - width: 100%; - display: flex; - align-items: center; - padding: 20rpx 0; + .metric-status--low { + color: #1385FA; + } - .metric-label { - flex: 1; - color: #77849E; - height: 28rpx; - font-size: 28rpx; - line-height: 28rpx; - } - - .metric-value { - color: #252535; - height: 28rpx; - font-size: 28rpx; - line-height: 28rpx; - margin-right: 24rpx; - } - - .metric-status { - height: 24rpx; - font-size: 24rpx; - line-height: 24rpx; - } - - .metric-status--normal { - color: #2AC79F; - } - - .metric-status--low { - color: #1385FA; - } - - .metric-status--high { - color: #F24439; + .metric-status--high { + color: #F24439; + } } } } diff --git a/miniprogram/pages/detailedReport/detailedReport.ts b/miniprogram/pages/detailedReport/detailedReport.ts index 0588860..c36b1f7 100644 --- a/miniprogram/pages/detailedReport/detailedReport.ts +++ b/miniprogram/pages/detailedReport/detailedReport.ts @@ -11,12 +11,19 @@ Page({ bmi: 'BMI正常', change: '较上次-0.3kg' }, - basic: [ - { label: '身高', value: '172', unit: 'cm', tag: '' }, - { label: 'BMI', value: '22.4', unit: '', tag: '标准' }, - { label: '身体得分', value: '73', unit: '分', tag: '一般' }, - { label: '体脂率', value: '22.1', unit: '%', tag: '' } - ], + basic: { + rows: [ + [ + { label: '身高', value: '172', unit: 'cm', tag: '' }, + { label: 'BMI', value: '22.4', unit: '', tag: '标准' }, + { label: '体脂率', value: '22.1', unit: '%', tag: '' } + ], + [ + { label: '身体得分', value: '73', unit: '分', tag: '' }, + { label: '健康评估', value: '一般', unit: '', tag: '' } + ] + ] + }, sections: [ { title: '身体成分', diff --git a/miniprogram/pages/detailedReport/detailedReport.wxml b/miniprogram/pages/detailedReport/detailedReport.wxml index b097eef..27dabb1 100644 --- a/miniprogram/pages/detailedReport/detailedReport.wxml +++ b/miniprogram/pages/detailedReport/detailedReport.wxml @@ -3,96 +3,114 @@ - - - - - 设备智联 · 掌握健康 - 留存测量记录,见证身形变化 - - {{ header.date }} - - {{ header.weight }} - {{ header.unit }} - - - {{ header.bmi }} - {{ header.change }} - + + - - - - - 基础指标 + + + 设备智联 · 掌握健康 + 留存测量记录,见证身形变化 - - - - {{ item.label }} - - {{ item.value }} - {{ item.unit }} - {{ item.tag }} + + + + + + + + {{ header.date }} + + + + 88 + .88 + kg + + + {{ header.bmi }} + {{ header.change }} + + + + + + + + + 基础指标 + + + + + + + {{ cell.label }} + + {{ cell.value }} + {{ cell.unit }} + {{ cell.tag }} + + + + + + + + + + + + + + 消瘦 + 正常 + 超重 + 肥胖 + + + BMI<18.5 + 18.5≤BMI<24 + 24≤BMI<28 + BMI≥28 - - - - - - - - - - - 消瘦 - 正常 - 超重 - 肥胖 - - - BMI<18.5 - 18.5≤BMI<24 - 24≤BMI<28 - BMI≥28 + + + + + + + {{ section.title }} + + + + {{ item.label }} + {{ item.value }} + {{ item.status }} + + + + + + + + + + + {{ section.title }} + + + + {{ item.label }} + {{ item.value }} + + + + - - - - - - - {{ section.title }} - - - - {{ item.label }} - {{ item.value }} - {{ item.status }} - - - - - - - - - - - {{ section.title }} - - - - {{ item.label }} - {{ item.value }} - - - -