.skin-box{ padding-left: 30rpx; padding-bottom: 40rpx; } /* 头部肤质 */ .skin-detail { width: 690rpx; height: 240rpx; background-color: #FFFFFF; border-radius: 12px; margin-top: 40rpx; padding: 30rpx 30rpx 40rpx 30rpx; box-sizing: border-box; } .skin-detail-top{ display: flex; font-size: 24rpx; justify-content: space-between; } .skin-time{ color: #999999; } .skin-history{ color: #333; } .skin-detail-bottom{ display: flex; } .skin-type{ width: 270rpx; height: 100rpx; text-align: center; margin-top: 38rpx; } .skin-type:first-child{ font-weight: 600; font-size: 36rpx; color: #333333; } .skin-type view:last-child{ margin-top: 8rpx; color: #FA7D22; font-size: 28rpx; } .skin-line{ height: 80rpx; width: 2rpx; background-color: #DEDEDE; margin-top: 52rpx; margin-left: 44rpx; } .skin-age{ margin-left: 54rpx; margin-top: 10rpx; position: relative; } .skin-age-one{ font-size: 36rpx; color: #333; } .skin-age-text{ font-weight: 600; } .skin-age .age{ color: #FA7D22; font-size: 56rpx; margin: 0 12rpx; } .skin-age-two{ margin-top: 14rpx; font-size: 24rpx; color: #333333; font-weight: 400; display: flex; align-items: center; } .skin-age image{ width: 24rpx; height: 24rpx; } /* 皮肤状态 */ .skin-status{ width: 690rpx; height: auto; background-color: #fff; border-radius: 24rpx; margin-top: 20rpx; padding: 30rpx; box-sizing: border-box; } .skin-status-title{ font-size: 32rpx; color: #333; font-weight: 600; position: relative; } .skin-status-title .title{ position: relative; } .title-line{ position: absolute; width: 192rpx; height: 14rpx; background-color: #FA7D22; bottom: 0; left: 0; } .skin-status-content{ font-size: 28rpx; color: #666666; margin-top: 40rpx; } .skin-status-problem{ margin-top: 20rpx; color: #333333; font-weight: 600; display: flex; align-items: center; } .skin-status-problem-circle{ width: 10rpx; height: 10rpx; background-color: #FF3007; border-radius: 50%; margin-right: 10rpx; } .problem-box{ margin-top: 40rpx; font-size: 28rpx; color: #333; } .problem-box .problem-item{ display: inline-block; margin-top: 20rpx; } .problem-box .problem-item:nth-child(1),.problem-item:nth-child(2){ margin-top: 0; } .problem-box .problem-item:nth-child(n+1){ margin-right: 168rpx; } /* 护理建议 */ .skin-suggest{ width: 690rpx; height: auto; background: #fff; border-radius: 24rpx; margin-top: 20rpx; padding: 30rpx; box-sizing: border-box; } .skin-suggest-title{ font-weight: 600; position: relative; } .skin-suggest-title .title{ position: relative; } .suggest-title-line{ width: 128rpx; height: 14rpx; background-color: #FA7D22; position: absolute; bottom: 0; left: 0; } .suggest-box{ } .suggest-item{ margin-top: 40rpx; } .suggest-item-title{ color: #333333; font-size: 28rpx; } .suggest-item-content{ margin-top: 20rpx; color: #666666; font-size: 28rpx; } /* 为你推荐 */ .skin-recommend{ width: 690rpx; padding: 30rpx; box-sizing: border-box; background-color: #fff; margin-top: 20rpx; border-radius: 24rpx; } .skin-recommend-title{ color: #333333; font-weight: 600; font-size: 32rpx; display: flex; } .recommend-line{ width: 8rpx; height: 40rpx; border-radius: 4rpx; background-color: #FA7D22; margin-right: 10rpx; } .recommend-box{ margin-top: 40rpx; } .recommend-item{ margin-top: 20rpx; display: flex; } .recommend-item-image image{ width: 80rpx; height: 80rpx; border-radius: 8rpx; } .recommend-item-title{ flex: 1; margin-left: 20rpx; font-size: 28rpx; color: #292929; text-overflow: ellipsis; overflow: hidden; white-space:nowrap; } .recommend-item-icon{ width:48rpx ; height: 48rpx; text-align: center; line-height: 48rpx; margin-top: 16rpx; } .recommend-item-icon image{ width:12rpx ; height: 24rpx; } /* 查看您的专属护理方案 */ .goPlan{ width: 690rpx; height: 84rpx; background-color: #FA7D22; color: #fff; line-height: 84rpx; text-align: center; border-radius: 42rpx; margin-top: 40rpx; }