Merge branch 'rwkdev' into lzwdev

src/pages/index/index.tsx

@@ -259,7 +259,7 @@ class Index extends Component<any, any> {
     let token = getStorageSync("token");
     if (!token) {
       // 如果token过期，先登录，登录完成后自动初始化
-      await this.WCUserLogin();
+      // await this.WCUserLogin();
     } else {
       // token没过期，直接请求数据
       this.initPageData();

src/pages/iotCarePlan/components/Echart/index.less

@@ -7,6 +7,7 @@
   padding: 35rpx 25rpx 25rpx 35rpx;
   box-sizing: border-box;
   position: relative;
+  z-index: 0;
 }
 .box_background {
   position: absolute;
@@ -23,7 +24,7 @@
     font-size: 18rpx;
     color: #cccccc;
   }
-  .full{
+  .full {
     width: 24rpx;
     height: 24rpx;
     position: absolute;
@@ -50,7 +51,6 @@
     }
   }
 
-
   .time {
     position: absolute;
     bottom: 22rpx;
@@ -61,9 +61,6 @@
   }
 }
 
-
-
-
 page {
   background: #f8f8f8;
   background: #f3f3f3;
@@ -88,11 +85,11 @@ page {
   border-radius: 30rpx;
   margin: 27rpx 30rpx 22rpx;
   position: relative;
-  box-shadow: -2rpx 0 12rpx .5rpx rgba(129, 129, 129, 0.05);
+  box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
   .img {
     width: 690rpx;
     height: 690rpx;
-    box-shadow: -2rpx 0 12rpx .5rpx rgba(129, 129, 129, 0.05);
+    box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
     position: relative;
     border-radius: 20rpx;
     margin: auto;
@@ -325,7 +322,7 @@ page {
   }
 }
 .infobox1 .info1 .block .tip1,
-  .infobox1 .info1 .block .dang {
+.infobox1 .info1 .block .dang {
   font-size: 26rpx;
   font-weight: 500;
   color: #000000;
@@ -401,7 +398,7 @@ page {
   width: 100%;
   height: 138rpx;
   background: #ffffff;
-  box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173,191,207,0.21);
+  box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21);
   border-bottom: 15rpx solid #ffffff;
   .line {
     position: absolute;
@@ -420,7 +417,7 @@ page {
     height: 36rpx;
   }
   .disabled {
-    opacity: 0.5!important;
+    opacity: 0.5 !important;
   }
   .end_img {
     width: 36rpx;
@@ -527,7 +524,7 @@ page {
     height: 100%;
     border-radius: 20rpx;
     overflow: hidden;
-    box-shadow: -2rpx 0 12rpx .5rpx rgba(129, 129, 129, 0.05);
+    box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
     .block1 {
       .block1_1 {
         height: 100%;
@@ -550,11 +547,11 @@ page {
       display: inline-block;
       height: 100%;
       width: 0;
-      transition: all .3s;
+      transition: all 0.3s;
       .block2_info {
         width: 140rpx;
         text-align: center;
-        box-shadow: -2rpx 0 12rpx .5rpx rgba(129, 129, 129, 0.05);
+        box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
         height: calc(140rpx - 10rpx);
         border-radius: 20rpx;
         align-items: flex-end;
@@ -576,7 +573,7 @@ page {
           -o-filter: grayscale(100%);
           filter: grayscale(100%);
           filter: gray;
-          opacity: .5;
+          opacity: 0.5;
         }
         .block2_bg {
           position: absolute;
@@ -584,7 +581,7 @@ page {
           left: 0;
           right: 0;
           bottom: 0;
-          opacity: .5;
+          opacity: 0.5;
         }
         .block2_info1 {
           height: 100%;
@@ -621,7 +618,7 @@ page {
     background: #fff;
     height: 162rpx;
     border-radius: 20rpx;
-    box-shadow: -2rpx 0 12rpx .5rpx rgba(129, 129, 129, 0.05);
+    box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
     .block1 {
       padding: 0 16rpx;
     }
@@ -669,25 +666,25 @@ page {
   }
 }
 .infobox3 .info1 .block1,
-  .infobox3 .info2 .block1 {
+.infobox3 .info2 .block1 {
   flex-direction: column;
   display: inline-block;
   height: 100%;
   text-align: center;
 }
 .infobox3 .info1 .tip1,
-  .infobox3 .info2 .tip1 {
+.infobox3 .info2 .tip1 {
   color: #202020;
   font-size: 22rpx;
   font-weight: bold;
 }
 .infobox3 .info1 .tip2,
-  .infobox3 .info2 .tip2 {
+.infobox3 .info2 .tip2 {
   color: #202020;
   font-size: 22rpx;
 }
 .infobox3 .info1 .quan1,
-  .infobox3 .info2 .quan1 {
+.infobox3 .info2 .quan1 {
   border-radius: 50%;
   width: 30rpx;
   height: 30rpx;
@@ -698,7 +695,7 @@ page {
   border: 4rpx solid #f1f1f1;
 }
 .infobox3 .info1 .quan1 .quan2,
-  .infobox3 .info2 .quan1 .quan2 {
+.infobox3 .info2 .quan1 .quan2 {
   position: absolute;
   border-radius: 50%;
   background: #000000;
@@ -732,7 +729,7 @@ page {
 .infobox4 {
   height: 300rpx;
   border-radius: 20rpx;
-  box-shadow: -2rpx 0 12rpx .5rpx rgba(129, 129, 129, 0.05);
+  box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
   margin: 22rpx 20rpx;
   background: #fff;
   position: relative;
@@ -1084,7 +1081,13 @@ ec-canvas {
   }
 }
 .water_test {
-  padding: 22rpx 46rpx;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 42rpx 48rpx;
+  width: 690rpx;
+  height: 292rpx;
+  background: #ffffff;
+  border-radius: 30rpx;
   .test_step {
     .step_block {
       flex-direction: column;
@@ -1118,6 +1121,7 @@ ec-canvas {
       color: #000000;
       margin-left: 14rpx;
       padding-top: 12rpx;
+      letter-spacing: 2rpx;
     }
   }
   .test_txt {
@@ -1125,6 +1129,8 @@ ec-canvas {
     font-weight: 500;
     color: #999999;
     padding-top: 48rpx;
+    line-height: 36rpx;
+    letter-spacing: 2rpx;
   }
 }
 .testing {
@@ -1158,7 +1164,7 @@ ec-canvas {
     height: 228rpx;
     background: #ffffff;
     border-radius: 0rpx 0rpx 30rpx 30rpx;
-    padding: 51rpx 28rpx 0 39rpx;
+    padding: 51rpx 30rpx 0 36rpx;
     box-sizing: border-box;
     .progress_box {
       width: 100%;
@@ -1170,6 +1176,7 @@ ec-canvas {
         color: #000000;
         min-width: 200rpx;
         margin-right: 60rpx;
+        letter-spacing: 2rpx;
       }
     }
     .tips {
@@ -1177,6 +1184,8 @@ ec-canvas {
       font-weight: 500;
       color: #999999;
       margin-top: 45rpx;
+      line-height: 36rpx;
+      letter-spacing: 2rpx;
     }
     .progress_block {
       flex: 1;
@@ -1390,6 +1399,83 @@ image {
     }
   }
 }
+
+.gear_adjustment {
+  box-sizing: border-box;
+  width: 690rpx;
+  height: 300rpx;
+  background: #ffffff;
+  border-radius: 30rpx;
+  padding: 30rpx;
+  margin: 30rpx auto 200rpx;
+  .gear_box {
+    .gear {
+      margin-bottom: 30rpx;
+      .pos {
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #666666;
+        min-width: 76rpx;
+        margin-right: 32rpx;
+      }
+      .gear_button {
+        width: 500rpx;
+        height: 60rpx;
+        background: #f8f8f8;
+        border-radius: 30rpx;
+        justify-content: space-between;
+        font-size: 20rpx;
+
+        .button_minus {
+          width: 90rpx;
+          height: 60rpx;
+          background: #e5e5e5;
+          border-radius: 30rpx 0rpx 0rpx 30rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .image {
+            width: 28rpx;
+            height: 28rpx;
+          }
+        }
+
+        .button_plus {
+          width: 90rpx;
+          height: 60rpx;
+          background: #e5e5e5;
+          border-radius: 0rpx 30rpx 30rpx 0rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .image {
+            width: 28rpx;
+            height: 28rpx;
+          }
+        }
+
+        .button_value {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 24rpx;
+          width: 320rpx;
+          height: 60rpx;
+          line-height: 60rpx;
+          color: #666;
+          .number {
+            font-family: PingFang SC;
+            font-weight: 800;
+            font-size: 30rpx;
+            color: #000000;
+            margin-right: 4rpx;
+          }
+        }
+      }
+    }
+  }
+}
+
 .level_box {
   padding-left: 109rpx;
   .level_num {
@@ -1428,9 +1514,9 @@ image {
   }
 }
 .current-button {
-  background: #CCCC;
+  background: #cccc;
   .level {
-    color: #CCCC;
+    color: #cccc;
   }
 }
 .success_popup {

src/pages/iotCarePlan/components/Echart/index.tsx

@@ -1,6 +1,6 @@
 import Taro from '@tarojs/taro';
 import classnames from 'classnames';
-import { Block, View, Image, Text } from '@tarojs/components';
+import { Block, View, Image, Text, Input } from '@tarojs/components';
 import { Popup, Progress, Slider } from '@antmjs/vantui';
 import { useRef } from 'react'
 import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts'
@@ -52,6 +52,10 @@ function Index() {
       right: '28rpx',
       bottom: '17rpx'
     },
+    legend: {
+      show: false,
+      zlevel: -1
+    },
     xAxis: {
       // name: '',
       // nameGap: 5,
@@ -369,21 +373,23 @@ function Index() {
                 {/*  <view class='progress_block flex aitems'> */}
                 <Progress
                   style={{
-                    width: '6.75rem',
+                    width: '300rpx',
                   }}
                   percentage='80'
-                  strokeWidth='6'
+                  strokeWidth='14'
+                  showPivot={false}
+                  color='#C2E5F3'
                 ></Progress>
                 {stepList[stepIndex].finish && 80 >= 99 ? (
                   <Image
                     className='finish_img'
-                    src={require('@/img/full-scran.png')}
+                    src={require('@/img/finished.png')}
                     mode='aspectFill'
                   ></Image>
                 ) : (
                   <Image
                     className='finish_img'
-                    src={require('@/img/full-scran.png')}
+                    src={require('@/img/no-finish.png')}
                     mode='aspectFill'
                   ></Image>
                 )}
@@ -403,7 +409,7 @@ function Index() {
                           color: '#000000',
                         }}
                       >
-                        {stepList[stepIndex].name + '区域。'}
+                        {stepList[stepIndex].name + '区域'}
                       </Text>
                     )}
                   {testIndex == 1 && (
@@ -556,6 +562,36 @@ function Index() {
             </View>
           </View>
         </View>
+
+
+        <View className='gear_adjustment'>
+          <View className='gear_box'>
+            <View className='gear flex aitems'>
+              <View className='pos'>额头</View>
+              <View className='gear_button flex aitems'>
+                <View className='button_minus'><Image className='image' src={require('@/img/fr200/minus.png')}></Image></View>
+                <View className='button_value'><View className='number'>1</View>档</View>
+                <View className='button_plus'><Image className='image' src={require('@/img/fr200/add.png')}></Image></View>
+              </View>
+            </View>
+            <View className='gear flex aitems'>
+              <View className='pos'>左脸颊</View>
+              <View className='gear_button flex aitems'>
+                <View className='button_minus'><Image className='image' src={require('@/img/fr200/minus.png')}></Image></View>
+                <View className='button_value'><View className='number'>1</View>档</View>
+                <View className='button_plus'><Image className='image' src={require('@/img/fr200/add.png')}></Image></View>
+              </View>
+            </View>
+            <View className='gear flex aitems'>
+              <View className='pos'>右脸颊</View>
+              <View className='gear_button flex aitems'>
+                <View className='button_minus'><Image className='image' src={require('@/img/fr200/minus.png')}></Image></View>
+                <View className='button_value'><View className='number'>1</View>档</View>
+                <View className='button_plus'><Image className='image' src={require('@/img/fr200/add.png')}></Image></View>
+              </View>
+            </View>
+          </View>
+        </View>
       </Block>
     </Block>
 

src/pages/iotCarePlan/iotCarePlan.tsx

@@ -2180,7 +2180,7 @@ class IotCarePlan extends Component<any, any> {
               ActiveModeItem={ActiveModeItem}
             />
 
-            {/* <Echarts></Echarts> */}
+            <Echarts></Echarts>
           </View>
 
           <Footer

src/pages/moisture_test_report/moisture_test_report.less

@@ -0,0 +1,571 @@
+page {
+    background: #F8F8F8;
+}
+
+.moisture_test_report {
+    padding: 0 30rpx 190rpx;
+}
+
+.moisture_test_report .time {
+    font-size: 36rpx;
+    font-weight: 500;
+    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: 500rpx;
+    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;
+}

src/pages/moisture_test_report/moisture_test_report.tsx

@@ -0,0 +1,216 @@
+import { Block, View, Text, Image, Input, Button } from "@tarojs/components";
+import { Component, PropsWithChildren, useEffect, useState } from "react";
+
+import "taro-ui/dist/style/components/button.scss"; // 按需引入
+import Taro from "@tarojs/taro";
+// 引入 Swiper, SwiperItem 组件
+
+/*** redux ***/
+import { connect } from "react-redux";
+import { setMobile } from "../../store/features/userInfo";
+/*** redux end ***/
+
+import { WCUserLogin } from "../../utils/Interface";
+
+import "./login.less";
+
+class MoistureTestReport extends Component<any, any> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: "重新登录",
+      imgUrl: '',
+      reportData: {
+        curDate: '',
+        shuifenLevel: {
+          head: 2,
+          leftFace: 3,
+          rightFace: 7
+        },
+        shuifenList: [],
+        shuifenGear: {
+          head: 0,
+          leftFace: 0,
+          rightFace: 0
+        }
+      },
+      bgCssData: {
+        serious: 'background: #FFE3E3',
+        moderate: 'background: #FFEBDC',
+        slight: 'background: #F6FCFF',
+        normal: 'background: #F8F8F8',
+        sufficient: 'background: #F8F8F8'
+      },
+      isClock: false,
+      xinde: '',
+      imglist: [],
+      id: 0,
+      show: false
+    };
+  }
+
+  async onLoad() { }
+  componentDidMount() { }
+
+  componentWillUnmount() { }
+
+  componentDidShow() { }
+
+  componentDidHide() { }
+
+  async initData() { }
+
+
+  render() {
+    let { name, imgUrl, reportData, bgCssData, isClock, xinde, imglist, id, show } = this.state
+    return (
+      <Block>
+        <View className='moisture_test_report'>
+          <View className='time'>{reportData.curDate || ''}</View>
+
+          <View className='report_data'>
+            <View className='forehead moisture_block flex' style='{util.getStatusData(reportData.shuifenLevel.head).bg}'>
+              <Image className='moisture_img'  src={require("/img/fr200/{util.getStatusData(reportData.shuifenLevel.head).img}.png")} mode='aspectFill'></Image>
+              <View className='pos_info'>
+                <View className='top'>额头</View>
+                <View className='bottom'>{util.getStatusData(reportData.shuifenLevel.head).title}</View>
+              </View>
+            </View>
+            <View className='left_face moisture_block flex' style='{util.getStatusData(reportData.shuifenLevel.leftFace).bg}'>
+              <Image className='moisture_img' src='/img/fr200/{util.getStatusData(reportData.shuifenLevel.leftFace).img}.png' mode='aspectFill'></Image>
+              <View className='pos_info'>
+                <View className='top'>左脸颊</View>
+                <View className='bottom'>{util.getStatusData(reportData.shuifenLevel.leftFace).title}</View>
+              </View>
+            </View>
+            <View className='right_face moisture_block flex' style='{util.getStatusData(reportData.shuifenLevel.rightFace).bg}'>
+              <Image className='moisture_img' src='/img/fr200/{util.getStatusData(reportData.shuifenLevel.rightFace).img}.png' mode='aspectFill'></Image>
+              <View className='pos_info'>
+                <View className='top'>右脸颊</View>
+                <View className='bottom'>{util.getStatusData(reportData.shuifenLevel.rightFace).title}</View>
+              </View>
+            </View>
+            <View className='example_box'>
+              <Image className='banner_img' src='/img/fr200/shuifen.png' mode='aspectFill'></Image>
+              <View className='line1'></View>
+              <View className='line2'></View>
+              <View className='line3'></View>
+            </View>
+            <View className='moisture_level_info'>
+              <View className='level_info'>
+                <View className='items flex aitems'>
+                  <View className='pos_name'>额头</View>
+                  <View className='progress'>
+                    <View className='progress_width' style='width: {reportData.shuifenLevel.head * 10}%;{util.getStatusData(reportData.shuifenLevel.head).progressBg}'></View>
+                  </View>
+                  <View className='level'>{reportData.shuifenLevel.head}级</View>
+                </View>
+                <View className='items flex aitems'>
+                  <View className='pos_name'>左脸颊</View>
+                  <View className='progress'>
+                    <View className='progress_width left_face_progress' style='width: {reportData.shuifenLevel.leftFace * 10}%;{util.getStatusData(reportData.shuifenLevel.leftFace).progressBg}'></View>
+                  </View>
+                  <View className='level'>{reportData.shuifenLevel.leftFace}级</View>
+                </View>
+                <View className='items flex aitems'>
+                  <View className='pos_name'>右脸颊</View>
+                  <View className='progress'>
+                    <View className='progress_width right_face_progress' style='width: {reportData.shuifenLevel.rightFace * 10}%;{util.getStatusData(reportData.shuifenLevel.rightFace).progressBg}'></View>
+                  </View>
+                  <View className='level'>{reportData.shuifenLevel.rightFace}级</View>
+                </View>
+              </View>
+              <View className='moisture_level'>
+                <View className='level_txt flex aitems jcenter'>
+                  <View className='circle normal'></View>
+                  <View className='txt'>水分等级</View>
+                </View>
+                <View className='level_list flex'>
+                  <View className='items flex aitems'>
+                    <View className='circle serious'></View>
+                    <View className='txt'>严重缺水：1-2级</View>
+                  </View>
+                  <View className='items flex aitems'>
+                    <View className='circle moderate'></View>
+                    <View className='txt'>中度缺水：3-4级</View>
+                  </View>
+                  <View className='items flex aitems'>
+                    <View className='circle slight'></View>
+                    <View className='txt'>轻微缺水：5-6级</View>
+                  </View>
+                  <View className='items flex aitems'>
+                    <View className='circle normal'></View>
+                    <View className='txt'>水分正常：7-8级</View>
+                  </View>
+                  <View className='items flex aitems'>
+                    <View className='circle sufficient'></View>
+                    <View className='txt'>水分充足：9-10级</View>
+                  </View>
+                </View>
+                <View className='pour'>注：各水分等级依据测量得出肌肤含水量划分</View>
+              </View>
+            </View>
+          </View>
+
+          <View className='report_chart'>
+            <View className='chart_title common_title'>肌肤整体</View>
+            <View className='container'>
+              {/* <ec-canvas id='mychart' style='width: 100%;height: 100%' canvas-id='mychart-line' ec='{ ec }'></ec-canvas> */}
+            </View>
+          </View>
+
+          <View className='gear_recommend'>
+            <View className='gear_header flex aitems sb'>
+              <View className='gear_title common_title'>促渗档位推荐</View>
+              <View className='gear_btn'>前往护理</View>
+            </View>
+            <View className='gear_content flex aitems sb'>
+              <View className='left_content'>
+                <Image className='banner_img' src='/img/fr200/mian-mo.png' mode='aspectFill'></Image>
+                <View className='type'>面膜促渗</View>
+              </View>
+              <View className='right_content flex aitems'>
+                <View className='gear_list flex aitems sa'>
+                  <View className='items flex aitems jcenter'>
+                    <Image className='gear_img' src='/img/fr200/{util.getStatusData(reportData.shuifenGear.head).gear}.png' mode='aspectFill'></Image>
+                    <View className='name'>额头</View>
+                    <View className='level'>{reportData.shuifenGear.head}档</View>
+                  </View>
+                  <View className='items flex aitems jcenter'>
+                    <Image className='gear_img' src='/img/fr200/{util.getStatusData(reportData.shuifenGear.leftFace).gear}.png' mode='aspectFill'></Image>
+                    <View className='name'>左脸颊</View>
+                    <View className='level'>{reportData.shuifenGear.leftFace}档</View>
+                  </View>
+                  <View className='items flex aitems jcenter'>
+                    <Image className='gear_img' src='/img/fr200/{util.getStatusData(reportData.shuifenGear.rightFace).gear}.png' mode='aspectFill'></Image>
+                    <View className='name'>右脸颊</View>
+                    <View className='level'>{reportData.shuifenGear.rightFace}档</View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+
+        <View className='go_clock_in flex sb aitems' >
+          <View className='go_clock_btn'>继续护理</View>
+          <View className='jump_box flex aitems'>
+            <View className='txt'>主页</View>
+            <Image src='/img/fr200/right.png' mode='aspectFill'></Image>
+          </View>
+        </View>
+
+      </Block>
+    );
+  }
+}
+
+const mapStateToProps = (state) => ({
+  mobile: state.userInfo.mobile,
+});
+const mapDispatchToProps = (dispatch) => ({
+  setMobile(value) {
+    dispatch(setMobile(value));
+  },
+});
+export default connect(mapStateToProps, mapDispatchToProps)(Login);