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 @@
-
-
+
+
+
+ 详细数据
+
+
+
+ 体脂肪量
+ 16.0kg
+
+
+ 体水分量
+ 39.8kg
+
+
+ 蛋白质量
+ 1680kcal
+
+
+
+
+
\ No newline at end of file