page {
    background: #F8F8F8;
}

.moisture_test_report {
    padding: 0 30rpx 190rpx;
}

.moisture_test_report .time {
    font-family: Poppins, Poppins;
    font-size: 36rpx;
    font-weight: 700;
    color: #000000;
    line-height: 1;
    padding: 38rpx 0;
}

.report_data {
    position: relative;
    width: 100%;
    height: 850rpx;
    background: #FFFFFF;
    border-radius: 30rpx;
}

.report_data .moisture_block {
    width: 160rpx;
    height: 80rpx;
    border-radius: 20rpx;
    padding: 14rpx;
    box-sizing: border-box;
}

.report_data .moisture_img {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
}

.report_data .forehead {
    position: absolute;
    top: 52rpx;
    left: 28rpx;
    /*background: #FFEBDC;*/
}

.report_data .left_face {
    position: absolute;
    top: 172rpx;
    left: 28rpx;
    /*background: #FFE3E3;*/
}

.report_data .right_face {
    position: absolute;
    top: 172rpx;
    right: 41rpx;
    /*background: #F8F8F8;*/
}

.report_data .pos_info {
    margin-left: 7rpx;
}

.report_data .pos_info .top {
    font-size: 20rpx;
    font-weight: 500;
    color: #000000;
    line-height: 1;
}

.report_data .pos_info .bottom {
    font-size: 18rpx;
    font-weight: 500;
    color: #999999;
    line-height: 1;
    margin-top: 11rpx;
}

.report_data .example_box {
    position: relative;
    width: 100%;
    height: 309rpx;
    /*background: #ff6700;*/
}

.report_data .example_box image {
    position: absolute;
    top: 79rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 230rpx;
    height: 230rpx;
    border-radius: 50%;
}

.report_data .example_box .line1 {
    position: absolute;
    top: 120rpx;
    left: 180rpx;
    width: 170rpx;
    height: 1rpx;
    transform: rotate(17deg);
    background: #D0D4DF;
}

.report_data .example_box .line2 {
    position: absolute;
    top: 211rpx;
    left: 185rpx;
    width: 135rpx;
    height: 1rpx;
    background: #D0D4DF;
}

.report_data .example_box .line3 {
    position: absolute;
    top: 209rpx;
    right: 200rpx;
    width: 106rpx;
    height: 1rpx;
    background: #D0D4DF;
}

.moisture_level_info .level_info {
    padding: 36rpx 38rpx 0 33rpx;
}

.moisture_level_info .level_info .items {
    padding: 8rpx 0;
}

.level_info .pos_name {
    min-width: 83rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #000000;
}

.level_info .progress {
    overflow: hidden;
    position: relative;
    flex: 1;
    height: 12rpx;
    border-radius: 6rpx;
    background: #F8F8F8;
    margin: 0 51rpx 0 45rpx;
}

.level_info .progress_width {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.level_info .forehead_progress {
    background: #FFC58C;
    width: 30%;
}

.level_info .left_face_progress {
    background: #FF9393;
    width: 20%;
}

.level_info .right_face_progress {
    background: #C2E5F3;
    width: 70%;
}

.level_info .level {
    font-size: 26rpx;
    font-weight: 500;
    color: #666666;
}

.moisture_level {
    margin-top: 34rpx;
}

.moisture_level .level_txt {
    font-size: 26rpx;
    font-weight: 500;
    color: #000000;
    line-height: 1;
}

.moisture_level .level_txt .txt {
    margin-left: 31rpx;
}

.circle {
    width: 14rpx;
    height: 14rpx;
    background: #C2E5F3;
    border-radius: 50%;
}

.serious {
    background: #FF9393;
}

.moderate {
    background: #FFC58C;
}

.slight {
    background: #E5F3F9;
}

.normal {
    background: #C2E5F3;
}

.sufficient {
    background: #9FDBF3;
}

.level_list {
    padding: 0 33rpx;
    flex-wrap: wrap;
    margin-top: 40rpx;
}

.level_list .txt {
    font-size: 24rpx;
    font-weight: 500;
    color: #999999;
    margin-left: 29rpx;
}

.level_list .items {
    width: 50%;
    padding: 7rpx 0;
}

.moisture_level .pour {
    padding: 0 32rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #999999;
    line-height: 1;
    margin-top: 36rpx;
}

.report_chart {
    width: 100%;
    height: 328rpx;
    background: #FFFFFF;
    border-radius: 30rpx;
    margin: 20rpx 0;
}

.report_chart .chart_title {
    padding: 41rpx 37rpx 0;
}

.common_title {
    font-size: 28rpx;
    font-weight: bold;
    color: #000000;
}

.gear_recommend {
    width: 100%;
    height: 358rpx;
    background: #FFFFFF;
    border-radius: 30rpx;
}

.container {
    width: 100%;
    /*height: 100%;*/
    height: 460rpx;
}

ec-canvas {
    width: 100%;
    height: 100%;
}

.gear_recommend {
    padding: 0 39rpx;
    box-sizing: border-box;
}

.gear_recommend .gear_header {
    padding: 29rpx 0rpx 38rpx;
}

.gear_recommend .gear_header .gear_title {
    padding-left: 2rpx;
}

.gear_header .gear_btn {
    height: 60rpx;
    line-height: 60rpx;
    background: #000000;
    border-radius: 30rpx;
    padding: 0 29rpx;
    font-size: 26rpx;
    font-weight: 500;
    color: #FFFFFF;
}

.gear_content .left_content {
    text-align: center;
}

.gear_content .left_content .banner_img {
    width: 140rpx;
    height: 140rpx;
    border-radius: 20rpx;
}

.gear_content .left_content .type {
    font-size: 26rpx;
    font-weight: 500;
    color: #000000;
    line-height: 1;
    margin-top: 25rpx;
}

.gear_content .right_content {
    flex: 1;
    height: 190rpx;
    background: #f8f8f8;
    border-radius: 30rpx;
    margin-left: 34rpx;
}

.right_content .gear_list {
    width: 100%;
}

.right_content .gear_list .items {
    flex-direction: column;
    flex: 1;
}

.right_content .gear_list .items .gear_img {
    width: 59rpx;
    height: 57rpx;
}

.right_content .gear_list .items .name {
    font-size: 26rpx;
    font-weight: 500;
    color: #000000;
    line-height: 1;
    padding: 26rpx 0 12rpx;
}

.right_content .gear_list .items .level {
    font-size: 24rpx;
    font-weight: 500;
    color: #666666;
    line-height: 1;
}

.go_clock_in {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 153rpx;
    background: #ffffff;
    padding: 0 30rpx;
    box-sizing: border-box;
    box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173,191,207,0.21);
    border-bottom: 21rpx solid #ffffff;
}

.go_clock_in image {
    width: 10rpx;
    height: 20rpx;
    margin-left: 15rpx;
}

.go_clock_in .jump_box {
    margin: 0 14rpx 0 49rpx;
    /*box-sizing: border-box;*/
}

.go_clock_btn {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    background: #000000;
    border-radius: 45rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #FFFFFF;
}

.jump_box .txt {
    font-size: 32rpx;
    font-weight: bold;
    color: #000000;
}

.popbox {
    position: relative;
    width: 670rpx;
    height: 840rpx;
    border-radius: 30rpx;
    background: #FFF;
}

.popbox .title {
    font-weight: bold;
    text-align: center;
    font-size: 36rpx;
    color: #030000;
    padding-top: 39rpx;
}

.popbox_text {
    font-size: 28rpx;
    font-weight: 500;
    color: #000;
    text-align: center;
    margin-top: 64rpx;
}

.popbox_text text {
    font-weight: bold;
    font-size: 36rpx;
}

.popbox .info1 {
    border-bottom: 1rpx solid #D8D8D8;
    padding: 16rpx 0;
    margin: 0 24rpx;
    text-align: center;
}

.popbox .info1 .tip1 {
    color: #000;
    font-size: 26rpx;
}

.popbox .info1 .tip2 {
    color: #E9D3AE;
    font-size: 32rpx;
}

.popbox .info2 {
    padding: 16rpx 0 0;
}

.popbox .info2 .left {}

.popbox .info2 .left .tip1 {
    color: #000;
    font-size: 26rpx;
    font-weight: bold;
}

.popbox .info2 .switch {
    position: relative;
    top: 4rpx;
    margin-left: 12rpx;
}

.popbox .info3 {
    margin: 59rpx 30rpx 37rpx;
}

.popbox .info3 .imgbox {
}

.popbox .info3 .imgbox .img {
    position: relative;
    width: 180rpx;
    height: 180rpx;
    border: 1px solid #DDDDDD;
    border-radius: 20rpx;
    background: #FFF;
    overflow: hidden;
    margin-right: 18rpx;
}

.popbox .info3 .imgbox .img .item_img {
    width: 180rpx;
    height: 180rpx;
}

.popbox .info3 .imgbox .img:nth-child(n+3) {
    margin-right: 0;
}

.popbox .info3 .imgbox .img2 {
    width: 180rpx;
    height: 180rpx;
    border: 1px solid #DDDDDD;
    border-radius: 20rpx;
    background: #FFF;
}

.popbox .info3 .imgbox .img2 image {
    width: 70rpx;
}

.popbox .info3 .imgbox .img .close {
    width: 28rpx;
    height: 28rpx;
    position: absolute;
    z-index: 9;
    right: 4rpx;
    top: 4rpx;
    border-radius: 50%;
    background: rgba(0, 0, 0, .4);
}

.popbox .info4 {
    width: 610rpx;
    height: 186rpx;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 3rpx;
    position: relative;
    margin: 0 30rpx;
    overflow: hidden;
    padding: 22rpx 30rpx 50rpx;
    box-sizing: border-box;
}

.popbox .info4 .content {
    /*padding: 14rpx;*/
    width: 100%;
    height: 100%;
    font-size: 28rpx;
    font-weight: 500;
    color: #CCCCCC;
}

.popbox .info4 .content textarea {
    color: #CCCCCC;
    font-size: 28rpx;
    width: 100%;
    height: 100%;
}

.popbox .info4 .tip {
    position: absolute;
    right: 14rpx;
    color: #CCCCCC;
    font-size: 22rpx;
    bottom: 24rpx;
}

.popbox .popbtnbox {
    position: absolute;
    bottom: 54rpx;
    left: 0;
    right: 0;
}

.popbox .popbtnbox .btn1 {
    flex-shrink: 0;
    line-height: 90rpx;
    text-align: center;
    font-size: 30rpx;
    width: 270rpx;
    height: 90rpx;
    background: #000;
    border-radius: 45rpx;
    color: #fff;
}