diff --git a/src/pages/moisture_test_report/moisture_test_report.less b/src/pages/moisture_test_report/moisture_test_report.less
new file mode 100644
index 0000000..9ce13f2
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/pages/moisture_test_report/moisture_test_report.tsx b/src/pages/moisture_test_report/moisture_test_report.tsx
new file mode 100644
index 0000000..a71d9e1
--- /dev/null
+++ b/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);