diff --git a/miniprogram/pages/home/home.less b/miniprogram/pages/home/home.less index 4466927..89355e1 100644 --- a/miniprogram/pages/home/home.less +++ b/miniprogram/pages/home/home.less @@ -1,496 +1,350 @@ -.header { +.home { width: 100%; - position: relative; - height: 450rpx; - margin-bottom: 25rpx; + height: 100%; .bg { - width: 100%; - height: 450rpx; - } - - .device { position: absolute; - z-index: 2; - top: 285rpx; - left: 60rpx; - right: 60rpx; - bottom: 0; - display: flex; - align-items: center; - - .device-icon { - width: 90rpx; - height: 90rpx; - overflow: hidden; - border-radius: 24rpx; - margin-right: 24rpx; - } - - .device-info { - flex: 1; - - .device-name { - color: #FFFFFF; - font-size: 32rpx; - font-weight: 700; - line-height: 36rpx; - margin-bottom: 14rpx; - } - - .device-status { - display: flex; - align-items: center; - - .status-dot { - width: 12rpx; - height: 12rpx; - border-radius: 50%; - margin-right: 10rpx; - } - - .dot-on { - background-color: #FFFFFF; - } - - .dot-off { - background-color: rgba(255, 255, 255, 0.5); - } - - .status-text { - color: #FFFFFF; - font-size: 28rpx; - line-height: 28rpx; - } - } - } - - .device-switch { - color: #FFFFFF; - height: 48rpx; - padding: 0 20rpx; - font-size: 24rpx; - font-weight: 500; - line-height: 44rpx; - border-radius: 8rpx; - box-sizing: border-box; - border: 2rpx solid #FFFFFF; - } } -} -.scrollViewContent { - width: 100%; - padding: 0 30rpx; - box-sizing: border-box; - - /* ===== 最近测量卡 ===== */ - .weight-card { + .home-container { width: 100%; - position: relative; - margin-bottom: 24rpx; - padding: 2rpx 2rpx 50rpx; - border-radius: 24rpx; + height: 100%; + padding-top: 160rpx; box-sizing: border-box; - background-color: #FFFFFF; - /* 卡头(带渐变背景) */ - .card-header { + .title { width: 100%; - height: 88rpx; - padding-left: 30rpx; - padding-right: 10rpx; - box-sizing: border-box; - display: flex; - align-items: center; - margin-bottom: 18rpx; - justify-content: space-between; - background: linear-gradient(180deg, rgba(211, 233, 255, 0.6) 0%, rgba(252, 251, 253, 0.6) 100%); + margin-bottom: 30rpx; - .card-header-left { - display: flex; - align-items: center; - - .card-title-bar { - width: 6rpx; - height: 24rpx; - border-radius: 3rpx; - background-color: #1385FA; - margin-right: 14rpx; - } - - .card-title { - color: #252535; - font-size: 30rpx; - font-weight: 700; - line-height: 30rpx; - } + .title_1 { + color: #1A3F68; + height: 48rpx; + font-size: 48rpx; + line-height: 48rpx; + margin-bottom: 24rpx; } - .card-header-right { - display: flex; - align-items: center; + .title_2 { + color: #446D99; + height: 26rpx; + font-size: 26rpx; + line-height: 26rpx; + } + } - .link-text { - color: #77849E; - font-size: 24rpx; - line-height: 24rpx; + .user { + width: 100%; + padding: 30rpx; + display: flex; + flex-wrap: nowrap; + align-items: center; + border-radius: 24rpx; + margin-bottom: 24rpx; + box-sizing: border-box; + border: 2rpx solid #ffffff; + background: linear-gradient(180deg, #D3E9FF 0%, #FFFFFF 30%, #FFFFFF 100%); + + .userAvatar { + width: 88rpx; + height: 88rpx; + overflow: hidden; + border-radius: 24rpx; + margin-right: 15rpx; + background-color: red; + } + + .userInfo { + width: 0; + flex: 1; + + .userName { + color: #252535; + height: 32rpx; + font-size: 32rpx; + line-height: 32rpx; + margin-bottom: 20rpx; } - .arrow { - padding-right: 40rpx; - box-sizing: border-box; + .userSex { + color: #77849E; + height: 26rpx; + font-size: 26rpx; + line-height: 26rpx; + + text { + color: #EAECFA; + } } } } - .card-content { + .recentMeasurements { width: 100%; - padding: 0 30rpx; + border-radius: 24rpx; + padding: 40rpx 30rpx 30rpx; box-sizing: border-box; - - /* ===== 最近测量:体重主数据行 ===== */ - .weight-row { + border: 2rpx solid #ffffff; + margin-bottom: 24rpx; + background: linear-gradient(180deg, #D3E9FF 0%, #FFFFFF 12%, #FFFFFF 100%); + + .recentMeasurementsTitle { + width: 100%; display: flex; - align-items: flex-end; + flex-wrap: nowrap; + align-items: center; margin-bottom: 30rpx; - .weight-main { - flex: 1; - display: flex; - flex-direction: column; - - .weight-num-wrap { - height: 96rpx; - display: flex; - margin-bottom: 20rpx; - align-items: baseline; - - .weight-int { - color: #252535; - height: 96rpx; - font-size: 96rpx; - font-weight: bold; - line-height: 96rpx; - } - - .weight-dec { - color: #252535; - font-size: 56rpx; - font-weight: bold; - line-height: 56rpx; - margin-right: 6rpx; - } - - .weight-unit { - color: #808080; - font-size: 28rpx; - font-weight: bold; - line-height: 28rpx; - } - } - - .weight-date { - color: #B6B6B6; - height: 24rpx; - font-size: 24rpx; - line-height: 24rpx; - } + > view:nth-of-type(1) { + width: 6rpx; + height: 20rpx; + margin-right: 15rpx; + border-radius: 16rpx; + background-color: #1385FA; } - /* 右侧变化量 */ - .weight-diff { - width: 250rpx; + > view:nth-of-type(2) { + color: #252535; + flex: 1; + height: 32rpx; + font-size: 32rpx; + line-height: 32rpx; + } + + > view:nth-of-type(3) { + color: #808080; + height: 32rpx; + font-size: 26rpx; + line-height: 32rpx; + padding-right: 50rpx; + } + } + + .recentMeasurementsContent { + width: 100%; + + .recentMeasurementsContentTop { + width: 100%; display: flex; - flex-direction: column; - align-items: flex-start; + flex-wrap: nowrap; + justify-content: space-between; + margin-bottom: 30rpx; - .diff-num-wrap { - display: flex; - align-items: flex-end; - margin-bottom: 14rpx; + .recentMeasurementsContentTopL { + width: 240rpx; - .diff-num { - height: 48rpx; - font-size: 48rpx; - font-weight: bold; - line-height: 48rpx; - margin-right: 6rpx; - } - - .diff-unit { - position: relative; - color: #808080; - height: 28rpx; - font-weight: bold; - font-size: 28rpx; - line-height: 28rpx; + > view:nth-of-type(1) { + width: 100%; + height: 80rpx; + display: flex; + flex-wrap: nowrap; + align-items: end; + margin-bottom: 15rpx; - text { - position: absolute; - left: 0; - bottom: 42rpx; + > view:nth-of-type(1) { + color: #252535; + height: 80rpx; + font-size: 80rpx; + font-weight: bolder; + line-height: 80rpx; + } + + > view:nth-of-type(2) { + color: #252535; + height: 56rpx; + font-size: 56rpx; + font-weight: bolder; + line-height: 56rpx; + margin-right: 10rpx; + } + + > view:nth-of-type(3) { + color: #808080; + height: 28rpx; + font-size: 28rpx; + line-height: 28rpx; } } - /* 向下箭头(减轻) */ - .arrow-down { - border-left: 10rpx solid transparent; - border-right: 10rpx solid transparent; - border-top: 16rpx solid #2AC79F; - } - - /* 向上箭头(增重) */ - .arrow-up { - border-left: 10rpx solid transparent; - border-right: 10rpx solid transparent; - border-bottom: 16rpx solid #FF4D4F; - } - - .diff-down { - color: #2AC79F; - } - - .diff-up { - color: #FF4D4F; - } - - .diff-neutral { - color: #000000; + > view:nth-of-type(2) { + width: 100%; + color: #B6B6B6; + height: 24rpx; + font-size: 24rpx; + line-height: 24rpx; } } - .diff-label { - color: #B6B6B6; - font-size: 24rpx; - line-height: 28rpx; - margin-top: 8rpx; + .recentMeasurementsContentTopR { + width: 240rpx; + + > view:nth-of-type(1) { + width: 100%; + height: 80rpx; + display: flex; + flex-wrap: nowrap; + align-items: end; + margin-bottom: 15rpx; + + > view:nth-of-type(1) { + color: #2AC79F; + height: 48rpx; + font-size: 48rpx; + font-weight: bolder; + line-height: 48rpx; + margin-right: 10rpx; + } + + > view:nth-of-type(2) { + flex: 1; + width: 0; + + > view:nth-of-type(1) { + width: 14rpx; + height: 18rpx; + font-size: 18rpx; + line-height: 18rpx; + text-align: center; + margin-bottom: 6rpx; + } + + > view:nth-of-type(2) { + color: #808080; + height: 28rpx; + font-size: 28rpx; + line-height: 28rpx; + } + } + } + + > view:nth-of-type(2) { + width: 100%; + color: #B6B6B6; + height: 24rpx; + font-size: 24rpx; + line-height: 24rpx; + } } } - } - /* 分割线 */ - .card-divider { - width: 100%; - height: 2rpx; - background-color: #EAECF1; - margin-bottom: 35rpx; - } + .recentMeasurementsContentLine { + width: 100%; + height: 2rpx; + margin-bottom: 40rpx; + background-color: #EAECF1; + } - /* 身高 / BMI / 标准体重 指标行 */ - .metrics-row { - display: flex; - padding: 0 10rpx; - justify-content: space-between; - - .metric-col { + .recentMeasurementsContentBottom { + width: 100%; display: flex; - flex-direction: column; + flex-wrap: nowrap; + padding: 0 24rpx; + box-sizing: border-box; + justify-content: space-between; - .metric-label { - color: #808080; - height: 30rpx; - display: flex; - font-size: 26rpx; - line-height: 30rpx; - margin-bottom: 20rpx; + > view { + width: 150rpx; - .metric-label-text { + > view:nth-of-type(1) { color: #808080; + width: 100%; height: 30rpx; font-size: 26rpx; line-height: 30rpx; - margin-right: 6rpx; + margin-bottom: 20rpx; + + text { + color: #FFFFFF; + height: 18rpx; + font-size: 18rpx; + padding: 2rpx 6rpx; + border-radius: 8rpx; + line-height: 18rpx; + margin-left: 16rpx; + background-color: #2AC79F; + } } - .metric-label-value { - color: #FFFFFF; - height: 30rpx; - padding: 0 6rpx; - font-size: 18rpx; - line-height: 30rpx; - background-color: #2AC79F; - border-radius: 8rpx; - } - } - - /* BMI 行(标签 + badge 并排) */ - .metric-label-row { - height: 30rpx; - display: flex; - align-items: center; - margin-bottom: 20rpx; - - .metric-label { - margin-bottom: 0; - } - - /* BMI 标准/偏高 badge */ - .bmi-badge { - height: 30rpx; - padding: 0 10rpx; - margin-left: 10rpx; - font-size: 18rpx; - line-height: 30rpx; - border-radius: 8rpx; - color: #FFFFFF; - background-color: #2AC79F; - } - } - - .metric-value-row { - display: flex; - align-items: baseline; - - .metric-value { + > view:nth-of-type(2) { color: #252535; height: 44rpx; font-size: 44rpx; - font-weight: 700; + font-weight: bolder; line-height: 44rpx; - margin-right: 6rpx; - } - .metric-unit { - color: #252535; - height: 26rpx; - font-size: 26rpx; - font-weight: bold; - line-height: 26rpx; + text { + font-size: 26rpx; + } } } } } } - .card-lianjie { - position: absolute; - right: 24rpx; - width: 32rpx; - height: 84rpx; - bottom: -55rpx; - } - } - - /* ===== 详细数据卡 ===== */ - .detail-card { - width: 100%; - margin-bottom: 24rpx; - padding: 2rpx 2rpx 30rpx; - border-radius: 24rpx; - box-sizing: border-box; - background-color: #FFFFFF; - - /* 卡头(带渐变背景) */ - .card-header { + .detailedData { width: 100%; - height: 88rpx; - padding-left: 30rpx; - padding-right: 50rpx; + border-radius: 24rpx; + padding: 40rpx 30rpx 30rpx; box-sizing: border-box; - display: flex; - align-items: center; - justify-content: space-between; + border: 2rpx solid #ffffff; + background-color: #FFFFFF; - .card-header-left { + .detailedDataTitle { + width: 100%; display: flex; + flex-wrap: nowrap; align-items: center; + margin-bottom: 30rpx; - .card-title-bar { + > view:nth-of-type(1) { width: 6rpx; - height: 24rpx; - border-radius: 3rpx; + height: 20rpx; + margin-right: 15rpx; + border-radius: 16rpx; background-color: #1385FA; - margin-right: 14rpx; } - .card-title { + > view:nth-of-type(2) { color: #252535; - font-size: 30rpx; - font-weight: 700; - line-height: 30rpx; + height: 32rpx; + font-size: 32rpx; + line-height: 32rpx; } } - .card-header-right { + .detailedDataContent { + width: 100%; display: flex; - align-items: center; + flex-wrap: nowrap; + justify-content: space-between; - .link-text { - color: #77849E; - height: 24rpx; - font-size: 24rpx; - line-height: 24rpx; - } - } - } + > view { + width: 195rpx; + box-sizing: border-box; + border-radius: 16rpx; + padding: 24rpx 0 18rpx 24rpx; + background-color: #F5F7FB; - /* ===== 详细数据:三格 ===== */ - .detail-grid { - display: flex; - padding: 0 30rpx; - justify-content: space-between; - - .detail-item { - width: 195rpx; - padding: 24rpx; - box-sizing: border-box; - border-radius: 16rpx; - background-color: #F3F4F6; - display: flex; - flex-direction: column; - - .detail-label { - color: #808080; - font-size: 24rpx; - line-height: 24rpx; - margin-bottom: 30rpx; - } - - .detail-value-row { - display: flex; - align-items: baseline; - - .detail-value { - color: #252535; - height: 44rpx; - font-size: 44rpx; - font-weight: bold; - line-height: 44rpx; - margin-right: 2rpx; - } - - .detail-unit { - color: #252535; + > view:nth-of-type(1) { + color: #808080; height: 26rpx; font-size: 26rpx; line-height: 26rpx; + margin-bottom: 20rpx; + } + + > view:nth-of-type(2) { + color: #252535; + height: 44rpx; + font-size: 44rpx; + font-weight: bolder; + line-height: 44rpx; + + text { + font-size: 26rpx; + } } } } } } - - /* ===== 空态 ===== */ - .empty-state { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - padding-top: 280rpx; - - .empty-icon { - width: 193rpx; - height: 138rpx; - margin-bottom: 40rpx; - border-radius: 20rpx; - } - - .empty-text { - color: #808080; - height: 30rpx; - font-size: 30rpx; - line-height: 30rpx; - } - } -} +} \ No newline at end of file diff --git a/miniprogram/pages/home/home.wxml b/miniprogram/pages/home/home.wxml index da4a84e..b72ff48 100644 --- a/miniprogram/pages/home/home.wxml +++ b/miniprogram/pages/home/home.wxml @@ -1,143 +1,84 @@ - - - - - + + - - - - {{ device.name }} - - - {{ device.connected ? '设备已连接' : '未连接' }} - - - 切换设备 - - + + + 智能体重秤 + 设备智联 · 掌握健康 + - - - + + + + 张晓敏 + 男·36岁172cm + + - - - - - - - 最近测量 - - - 查看历史 - - - - - - - - - - {{ record.weight }} - {{ record.weightDecimal }} - kg - - {{ record.date }} - - - - {{ record.diff < 0 ? -record.diff : record.diff }} - - kg - - - - {{ record.diff < 0 ? '体重较上次减轻' : (record.diff > 0 ? '体重较上次增加' : '与上次持平') }} - - - - - - - - - - - 身高 - - - {{ record.height }} - cm - - - - - BMI - {{ record.bmiLabel }} - - - {{ record.bmi }} - - - - - 标准体重 - - - {{ record.stdWeight }} - kg - - - - - - - + + + + 最近测量 + 详细报告 + + + + + + 68 + .20 + kg + + 07-22 09:30 + + + + 2.6 + + + kg + + + 体重较上次减轻 + - + + + + 身高 + 172cm + + + BMI标准 + 22.4 + + + 体脂率 + 22.1% + + + + - - - - - - - 详细数据 - - - - - - - 体脂率 - - {{ record.bodyFat }} - % - - - - 体脂肪 - - {{ record.bodyFatMass }} - kg - - - - 基础代谢 - - {{ record.bmr }} - kcal - - - - - - - - - - - - + + + + 详细数据 + + + + 体脂肪量 + 16.0kg + + + 体水分量 + 39.8kg + + + 蛋白质量 + 1680kcal + + + + + \ No newline at end of file