From 09b8bdb39b601cd20fe262c3b9b9e8bab7b3b7d2 Mon Sep 17 00:00:00 2001 From: rongweikang <1174906669@qq.com> Date: Fri, 15 Mar 2024 17:22:15 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E5=B0=81=E8=A3=85=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../iotCarePlan/components/Echart/index.less | 1567 ----------------- .../iotCarePlan/components/Echart/index.tsx | 323 +--- .../iotCarePlan/components/Gears/index.less | 266 +++ .../iotCarePlan/components/Gears/index.tsx | 235 +++ .../components/WaterTest/index.less | 557 ++++++ .../components/WaterTest/index.tsx | 139 ++ 6 files changed, 1207 insertions(+), 1880 deletions(-) create mode 100644 src/moduleIOT/pages/iotCarePlan/components/Gears/index.less create mode 100644 src/moduleIOT/pages/iotCarePlan/components/Gears/index.tsx create mode 100644 src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.less create mode 100644 src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.tsx diff --git a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less index 3813c5a..516b404 100644 --- a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less +++ b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less @@ -65,1570 +65,3 @@ page { background: #f8f8f8; background: #f3f3f3; } -.titlemain { - position: fixed; - z-index: 99; - width: 100%; - top: 0; - .logoicon { - width: 223rpx; - } - .title { - position: relative; - display: flex; - align-items: center; - justify-content: center; - } -} -.infobox1 { - background: #fff; - border-radius: 30rpx; - margin: 27rpx 30rpx 22rpx; - position: relative; - box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05); - .img { - width: 690rpx; - height: 690rpx; - box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05); - position: relative; - border-radius: 20rpx; - margin: auto; - .imgz { - border-radius: 20rpx; - width: 100%; - height: 100%; - overflow: hidden; - .video_tip { - position: absolute; - z-index: 99; - background: rgba(0, 0, 0, 0.5); - color: #fff; - font-size: 28rpx; - top: 50%; - left: 50%; - margin-top: -25rpx; - padding: 11rpx 34rpx; - font-weight: 500; - border-radius: 30rpx; - width: 500rpx; - transform: translateX(-50%); - text-align: center; - word-break: break-word; - box-sizing: border-box; - .icon { - width: 30rpx; - height: 30rpx; - margin-right: 17rpx; - } - } - .music { - width: 54rpx; - height: 54rpx; - background: rgba(255, 255, 255, 0.6); - border-radius: 50%; - position: absolute; - right: 20rpx; - top: 20rpx; - image { - width: 100%; - height: 100%; - } - } - } - .tipbox2 { - position: absolute; - z-index: 999999; - width: 500rpx; - bottom: -290rpx; - background: linear-gradient(#e2c6a3, #c7a274); - border-radius: 20rpx; - padding: 0 0 16rpx 0; - .jicon { - width: 26rpx; - position: absolute; - top: -20rpx; - left: 54rpx; - } - .tip1 { - color: #fefeff; - font-size: 36rpx; - padding: 34rpx 24rpx 0 24rpx; - } - .tip_btn { - background: #ffffff; - border-radius: 26rpx; - width: 154rpx; - height: 52rpx; - line-height: 52rpx; - text-align: center; - font-size: 30rpx; - font-weight: bold; - color: #c69962; - margin-top: 16rpx; - position: relative; - left: calc(500rpx - 36rpx - 154rpx); - } - } - .dottedLine { - border: 4rpx dashed #e2c6a3; - height: 100%; - position: absolute; - z-index: 999999; - border-radius: 20rpx; - right: 0; - left: 0; - } - .tipbox1 { - position: absolute; - z-index: 999999; - width: 480rpx; - bottom: -330rpx; - background: linear-gradient(#e2c6a3, #c7a274); - border-radius: 20rpx; - padding: 0 0 16rpx 0; - margin-left: 8rpx; - .jicon { - width: 26rpx; - position: absolute; - top: -20rpx; - left: 54rpx; - } - .tip1 { - color: #fefeff; - font-size: 36rpx; - padding: 34rpx 2rpx 0 24rpx; - } - .tip_btn { - background: #ffffff; - border-radius: 26rpx; - width: 154rpx; - height: 52rpx; - line-height: 52rpx; - text-align: center; - font-size: 30rpx; - font-weight: bold; - color: #c69962; - margin-top: 14rpx; - position: relative; - left: calc(460rpx - 22rpx - 154rpx); - } - } - } - .info1 { - height: 92rpx; - background: #fff; - border-radius: 20rpx; - position: relative; - .dottedLine { - border: 4rpx dashed #e2c6a3; - height: 100%; - position: absolute; - z-index: 999999; - border-radius: 20rpx; - right: 0; - left: 0; - } - .block { - width: 33%; - text-align: center; - .num { - font-size: 30rpx; - font-weight: 800; - color: #000000; - } - .color { - font-size: 30rpx; - font-weight: 800; - color: #000000; - } - .icon { - position: relative; - margin-left: 10rpx; - .num { - position: absolute; - color: #e8d3b0; - font-size: 22rpx; - font-weight: bold; - left: 50%; - margin-left: -8rpx; - top: 50%; - margin-top: -18rpx; - } - } - .dianliang1 { - background: linear-gradient(0deg, #efdcc2, #fff2df); - width: 10rpx; - height: 24rpx; - border-radius: 5rpx; - margin: 0 12rpx 0 0; - } - .dianliang2 { - background: #f8f8f8; - width: 10rpx; - height: 24rpx; - border-radius: 5rpx; - margin: 0 12rpx 0 0; - } - } - .border { - background: #dddddd; - width: 1rpx; - height: 50rpx; - } - } - .border_img { - position: absolute; - width: 700rpx; - z-index: 9999999; - bottom: -6rpx; - border: 6rpx dashed #e2c6a3; - border-radius: 20rpx; - padding: 4rpx; - left: -4rpx; - } - .tipbox4 { - position: absolute; - z-index: 999999; - width: 460rpx; - bottom: -260rpx; - background: linear-gradient(#e2c6a3, #c7a274); - border-radius: 20rpx; - padding: 0 0 16rpx 0; - .jicon { - width: 26rpx; - position: absolute; - top: -20rpx; - left: 54rpx; - } - .tip1 { - color: #fefeff; - font-size: 36rpx; - padding: 34rpx 0 0 24rpx; - } - .tip_btn { - background: #ffffff; - border-radius: 26rpx; - width: 154rpx; - height: 52rpx; - line-height: 52rpx; - text-align: center; - font-size: 30rpx; - font-weight: bold; - color: #c69962; - margin-top: 14rpx; - position: relative; - left: calc(460rpx - 22rpx - 154rpx); - } - } -} -.infobox1 .info1 .block .tip1, -.infobox1 .info1 .block .dang { - font-size: 26rpx; - font-weight: 500; - color: #000000; -} -.infobox2 { - position: relative; - border-radius: 20rpx; - height: 74rpx; - margin: 60rpx 20rpx 0; - .block { - width: 50%; - .icon { - width: 46rpx; - } - .name { - margin-left: 14rpx; - color: #202020; - font-size: 22rpx; - } - } - .border { - background: #696460; - width: 2rpx; - height: 16rpx; - } - .border_img4 { - height: 94rpx; - border: 6rpx dashed #e2c6a3; - position: absolute; - z-index: 99999; - left: -8rpx; - width: calc(100% + 8rpx); - border-radius: 20rpx; - } - .tipbox5 { - position: fixed; - z-index: 999999; - width: 460rpx; - background: linear-gradient(#e2c6a3, #c7a274); - border-radius: 20rpx; - padding: 0 0 24rpx 0; - left: 60rpx; - .jicon { - width: 26rpx; - position: absolute; - bottom: -20rpx; - left: 54rpx; - } - .tip1 { - color: #fefeff; - font-size: 36rpx; - padding: 26rpx 0 0 34rpx; - } - .tip_btn { - background: #ffffff; - border-radius: 26rpx; - width: 154rpx; - height: 52rpx; - line-height: 52rpx; - text-align: center; - font-size: 30rpx; - font-weight: bold; - color: #c69962; - margin-top: 14rpx; - position: relative; - left: calc(460rpx - 22rpx - 154rpx); - } - } -} -.action_box { - position: fixed; - bottom: 0; - width: 100%; - height: 138rpx; - background: #ffffff; - box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21); - border-bottom: 15rpx solid #ffffff; - .line { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 2rpx; - height: 70rpx; - background: #dddddd; - } - .items { - flex: 1; - } - .start_img { - width: 36rpx; - height: 36rpx; - } - .disabled { - opacity: 0.5 !important; - } - .end_img { - width: 36rpx; - height: 36rpx; - } - .text { - font-size: 32rpx; - font-weight: bold; - color: #000000; - margin-left: 18rpx; - } - .start_test { - width: 100%; - padding: 0 30rpx; - .txt { - width: 100%; - height: 90rpx; - line-height: 90rpx; - background: #000000; - border-radius: 45rpx; - text-align: center; - font-size: 32rpx; - font-weight: bold; - color: #ffffff; - } - } -} -.infobox3 { - margin: 4rpx 0 0 0; - height: 162rpx; - position: relative; - border-radius: 20rpx; - .tipbox4 { - position: absolute; - z-index: 999999; - width: 460rpx; - bottom: -260rpx; - background: linear-gradient(#e2c6a3, #c7a274); - border-radius: 20rpx; - padding: 0 0 16rpx 0; - .jicon { - width: 26rpx; - position: absolute; - top: -20rpx; - left: 54rpx; - } - .tip1 { - color: #fefeff; - font-size: 36rpx; - padding: 34rpx 0 0 24rpx; - } - .tip_btn { - background: #ffffff; - border-radius: 26rpx; - width: 154rpx; - height: 52rpx; - line-height: 52rpx; - text-align: center; - font-size: 30rpx; - font-weight: bold; - color: #c69962; - margin-top: 14rpx; - position: relative; - left: calc(460rpx - 22rpx - 154rpx); - } - } - .dottedLine { - border: 4rpx dashed #e2c6a3; - height: 100%; - position: absolute; - z-index: 999999; - border-radius: 20rpx; - right: 0; - left: 0; - } - .left { - display: inline-block; - width: 134rpx; - background: #fff; - border-radius: 0 18rpx 18rpx 0; - margin: 0 22rpx 0 0; - overflow: hidden; - .img { - width: 78rpx; - height: 78rpx; - margin-top: 10rpx; - margin: 4rpx auto 0; - } - .tip { - color: #000; - font-size: 22rpx; - padding: 4rpx 0; - text-align: center; - } - .checked { - text-align: center; - } - } - .info1 { - display: inline-block; - white-space: nowrap; - background: #fff; - flex-direction: column; - height: 100%; - border-radius: 20rpx; - overflow: hidden; - box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05); - .block1 { - .block1_1 { - height: 100%; - padding: 0 20rpx; - flex-direction: column; - .tip1 { - font-size: 26rpx; - font-weight: bold; - color: #000000; - } - .tip2 { - font-size: 24rpx; - font-weight: 500; - color: #666666; - padding-top: 3rpx; - } - } - } - .block2 { - display: inline-block; - height: 100%; - width: 0; - transition: all 0.3s; - .block2_info { - width: 140rpx; - text-align: center; - box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05); - height: calc(140rpx - 10rpx); - border-radius: 20rpx; - align-items: flex-end; - padding: 0 0 10rpx 0; - display: inline-block; - position: relative; - overflow: hidden; - .block2_img { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - } - .block3_img { - -webkit-filter: grayscale(100%); - -moz-filter: grayscale(100%); - -ms-filter: grayscale(100%); - -o-filter: grayscale(100%); - filter: grayscale(100%); - filter: gray; - opacity: 0.5; - } - .block2_bg { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: 0.5; - } - .block2_info1 { - height: 100%; - position: relative; - z-index: 99; - background: transparent; - .block2_info1_tip1 { - color: #202020; - font-weight: bold; - font-size: 22rpx; - position: absolute; - bottom: 20rpx; - width: 100%; - text-align: center; - } - .block2_info1_tip2 { - color: #202020; - font-size: 16rpx; - position: absolute; - bottom: 0; - text-align: center; - width: 100%; - } - } - } - } - .icon { - width: 28rpx; - margin-top: 20rpx; - } - } - .info2 { - width: calc(100% - 130rpx - 20rpx); - background: #fff; - height: 162rpx; - border-radius: 20rpx; - box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05); - .block1 { - padding: 0 16rpx; - } - } - .border_img2 { - width: calc(100% + 8rpx); - position: absolute; - z-index: 999999; - left: -8rpx; - } - .tipbox3 { - position: absolute; - z-index: 999999; - width: 460rpx; - bottom: -290rpx; - background: linear-gradient(#e2c6a3, #c7a274); - border-radius: 20rpx; - padding: 0 0 16rpx 0; - margin-left: 8rpx; - .jicon { - width: 26rpx; - position: absolute; - top: -20rpx; - left: 54rpx; - } - .tip1 { - color: #fefeff; - font-size: 36rpx; - padding: 34rpx 0 0 24rpx; - } - .tip_btn { - background: #ffffff; - border-radius: 26rpx; - width: 154rpx; - height: 52rpx; - line-height: 52rpx; - text-align: center; - font-size: 30rpx; - font-weight: bold; - color: #c69962; - margin-top: 14rpx; - position: relative; - left: calc(460rpx - 22rpx - 154rpx); - } - } -} -.infobox3 .info1 .block1, -.infobox3 .info2 .block1 { - flex-direction: column; - display: inline-block; - height: 100%; - text-align: center; -} -.infobox3 .info1 .tip1, -.infobox3 .info2 .tip1 { - color: #202020; - font-size: 22rpx; - font-weight: bold; -} -.infobox3 .info1 .tip2, -.infobox3 .info2 .tip2 { - color: #202020; - font-size: 22rpx; -} -.infobox3 .info1 .quan1, -.infobox3 .info2 .quan1 { - border-radius: 50%; - width: 30rpx; - height: 30rpx; - position: relative; - margin: 18rpx auto 0; - background: #fff; - box-sizing: border-box; - border: 4rpx solid #f1f1f1; -} -.infobox3 .info1 .quan1 .quan2, -.infobox3 .info2 .quan1 .quan2 { - position: absolute; - border-radius: 50%; - background: #000000; - width: 14rpx; - height: 14rpx; -} -.tipbox { - position: absolute; - z-index: 999999; - width: 100%; - bottom: 50rpx; - .tip1 { - color: #fefeff; - font-size: 36rpx; - text-align: center; - } - .tip_btn { - background: #e2c6a3; - border-radius: 32rpx; - width: 212rpx; - height: 66rpx; - line-height: 66rpx; - text-align: center; - margin: auto; - font-size: 30rpx; - font-weight: bold; - color: #ffffff; - margin-top: 54rpx; - } -} -.infobox4 { - height: 300rpx; - border-radius: 20rpx; - box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05); - margin: 22rpx 20rpx; - background: #fff; - position: relative; - .dottedLine { - border: 4rpx dashed #e2c6a3; - height: 100%; - position: absolute; - z-index: 999999; - border-radius: 20rpx; - right: 0; - left: 0; - } - .border_img3 { - width: calc(100% + 16rpx); - position: absolute; - z-index: 999999; - top: -15rpx; - left: -8rpx; - } - .tipbox5 { - position: absolute; - z-index: 999999; - width: 460rpx; - top: -280rpx; - background: linear-gradient(#e2c6a3, #c7a274); - border-radius: 20rpx; - padding: 0 0 24rpx 0; - margin-left: 60rpx; - .jicon { - width: 26rpx; - position: absolute; - bottom: -20rpx; - left: 54rpx; - } - .tip1 { - color: #fefeff; - font-size: 36rpx; - padding: 26rpx 0 0 34rpx; - } - .tip_btn { - background: #ffffff; - border-radius: 26rpx; - width: 154rpx; - height: 52rpx; - line-height: 52rpx; - text-align: center; - font-size: 30rpx; - font-weight: bold; - color: #c69962; - margin-top: 14rpx; - position: relative; - left: calc(460rpx - 22rpx - 154rpx); - } - } -} -ec-canvas { - width: 100%; - height: 100%; -} -.popbox2 { - width: 670rpx; - height: 1102rpx; - background: #ffffff; - border-radius: 30rpx; - & > .title { - text-align: center; - padding: 49rpx 0 61rpx; - font-size: 36rpx; - font-weight: bold; - color: #030000; - line-height: 1; - } - & > .tipimg { - margin: 20rpx 28rpx 0; - } - & > .tipvideo { - margin: 0 auto; - width: 600rpx; - height: 600rpx; - } - & > .tiptext { - margin: 65rpx 0 63rpx; - padding: 0 48rpx 0 36rpx; - font-size: 28rpx; - font-weight: 500; - color: #000000; - min-height: 76rpx; - } - & > .popbox2btn { - & > .nextbtn { - text-align: center; - color: #fff; - width: 270rpx; - height: 90rpx; - line-height: 90rpx; - background: #000000; - border-radius: 45rpx; - font-size: 32rpx; - font-weight: bold; - margin: 0 auto; - box-sizing: border-box; - } - & > .prebtn { - text-align: center; - width: 270rpx; - height: 90rpx; - line-height: 90rpx; - border-radius: 45rpx; - font-weight: bold; - font-size: 32rpx; - color: #000000; - border: 2rpx solid #000000; - background: #ffffff; - margin: 0 auto; - box-sizing: border-box; - } - } - & > .icon { - position: absolute; - top: 0; - right: 0; - width: 90rpx; - height: 90rpx; - display: flex; - justify-content: center; - align-items: center; - & > image { - width: 24rpx; - height: 24rpx; - } - } -} -.popbox2btn { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 25rpx; -} -.quantityTipShow { - position: absolute; - top: -50rpx; - right: 0; - background: rgba(0, 0, 0, 0.3); - font-size: 22rpx; - color: #fff; - border-radius: 30rpx; - padding: 8rpx 0rpx; - width: 260rpx; - .sanjiao { - position: absolute; - left: 50%; - margin-left: -15rpx; - width: 30rpx; - height: 30rpx; - transform: rotate(45deg); - bottom: -15rpx; - background: rgba(0, 0, 0, 0.3); - } -} -.async_box { - padding: 0 50rpx; - .title { - font-weight: bold; - text-align: center; - font-size: 32rpx; - padding: 30rpx 0; - } - .jindubox { - background: #dddddd; - height: 30rpx; - border-radius: 30rpx; - overflow: hidden; - position: relative; - .jindu { - width: 80%; - background: #dfc3a2; - height: 100%; - border-radius: 30rpx; - } - .baifenbi { - position: absolute; - font-size: 22rpx; - right: 20rpx; - color: #999; - top: 0; - } - } - .tip1 { - font-size: 26rpx; - padding: 30rpx 0 40rpx; - } -} -.infobox5 { - margin: 24rpx 20rpx 0; - border-radius: 18rpx; - background: #fff; - height: 260rpx; - padding: 20rpx; - position: relative; - .icon { - position: absolute; - width: 24rpx; - height: 24rpx; - right: 26rpx; - top: 32rpx; - } - .title { - color: #ccc; - font-size: 18rpx; - height: 42rpx; - line-height: 42rpx; - } - .info1 { - font-size: 14rpx; - color: #ccc; - display: flex; - margin-top: 10rpx; - .left { - border-right: 1px solid #e3e3e3; - padding: 0 8rpx; - width: 16rpx; - height: 180rpx; - display: flex; - align-items: center; - flex-direction: column; - justify-content: center; - .numblock { - padding: 0rpx 0; - } - } - .right { - width: calc(100% - 20rpx - 100rpx); - height: 180rpx; - border-bottom: 1px solid #e3e3e3; - padding: 0 10rpx 4rpx 20rpx; - position: relative; - .block { - flex-direction: column; - justify-content: flex-end; - position: relative; - .num { - position: absolute; - bottom: -30rpx; - } - .block_b0 { - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - .block_b1 { - background: #ffcf55; - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - .block_b2 { - background: #febb22; - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - .block_b3 { - background: #ffad28; - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - .block_b4 { - background: #ff8510; - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - .block_b5 { - background: #f85803; - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - .block_b6 { - background: #e02e13; - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - .block_b7 { - background: #b40016; - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - .block_b8 { - background: #750010; - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - } - .timetip { - position: absolute; - right: -40rpx; - bottom: -25rpx; - } - } - } - .tipbox5 { - position: absolute; - z-index: 999999; - width: 460rpx; - top: -280rpx; - background: linear-gradient(#e2c6a3, #c7a274); - border-radius: 20rpx; - padding: 0 0 24rpx 0; - margin-left: 60rpx; - .jicon { - width: 26rpx; - position: absolute; - bottom: -20rpx; - left: 54rpx; - } - .tip1 { - color: #fefeff; - font-size: 36rpx; - padding: 26rpx 0 0 34rpx; - } - .tip_btn { - background: #ffffff; - border-radius: 26rpx; - width: 154rpx; - height: 52rpx; - line-height: 52rpx; - text-align: center; - font-size: 30rpx; - font-weight: bold; - color: #c69962; - margin-top: 14rpx; - position: relative; - left: calc(460rpx - 22rpx - 154rpx); - } - } -} -.water_test { - 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; - } - .step_top { - position: relative; - .line { - position: absolute; - top: 50%; - right: -117rpx; - width: 97rpx; - height: 0; - border-top: 2rpx dashed #f1f1f1; - } - .drop { - width: 10rpx; - height: 10rpx; - background: #999999; - border-radius: 50%; - } - .step_num { - font-size: 24rpx; - font-weight: 500; - color: #666666; - margin-left: 14rpx; - } - } - .step_name { - font-size: 26rpx; - font-weight: bold; - color: #000000; - margin-left: 14rpx; - padding-top: 12rpx; - letter-spacing: 2rpx; - } - } - .test_txt { - font-size: 24rpx; - font-weight: 500; - color: #999999; - padding-top: 48rpx; - line-height: 36rpx; - letter-spacing: 2rpx; - } -} -.testing { - .testing_header { - .items { - flex: 1; - border-radius: 30rpx 30rpx 0rpx 0rpx; - padding: 25rpx 0 21rpx; - justify-content: space-evenly; - .finish_img { - width: 24rpx; - height: 24rpx; - border-radius: 50%; - } - .value { - font-size: 24rpx; - font-weight: 500; - color: #666666; - line-height: 1; - } - .name { - font-size: 26rpx; - font-weight: bold; - color: #000000; - line-height: 1; - } - } - } - .testing_content { - width: 100%; - height: 228rpx; - background: #ffffff; - border-radius: 0rpx 0rpx 30rpx 30rpx; - padding: 51rpx 30rpx 0 36rpx; - box-sizing: border-box; - .progress_box { - width: 100%; - height: 36rpx; - line-height: 36rpx; - .title { - font-size: 28rpx; - font-weight: bold; - color: #000000; - min-width: 200rpx; - margin-right: 60rpx; - letter-spacing: 2rpx; - } - } - .tips { - font-size: 24rpx; - font-weight: 500; - color: #999999; - margin-top: 45rpx; - line-height: 36rpx; - letter-spacing: 2rpx; - } - .progress_block { - flex: 1; - } - .finish_img { - width: 36rpx; - height: 36rpx; - margin-left: 49rpx; - } - } -} -.isquanpingclass { - position: fixed; - width: calc(100% - 100rpx); - padding: 20rpx 50rpx; - margin: 0; - z-index: 999; - top: 0; - left: 0; - right: 0; - height: 100vh; -} -.canvas { - position: fixed; - top: -9999999px; -} -.popbox1 { - width: 600rpx; - height: 360rpx; - border-radius: 28rpx; - flex-direction: column; - .tip1 { - font-size: 40rpx; - color: #000000; - text-align: center; - font-weight: 400; - margin-top: 28rpx; - } - .tip2 { - font-size: 32rpx; - color: #000000; - text-align: center; - font-weight: 400; - margin-top: 36rpx; - height: 110rpx; - } - .btnbox { - .btn1 { - font-size: 30rpx; - color: #000000; - text-align: center; - font-weight: 400; - width: 240rpx; - height: 100rpx; - line-height: 100rpx; - border: 2rpx solid rgba(0, 0, 0, 0.3); - border-radius: 28rpx; - } - .btn2 { - font-size: 30rpx; - color: #000000; - text-align: center; - font-weight: 400; - width: 240rpx; - height: 100rpx; - line-height: 100rpx; - margin-left: 40rpx; - background: #e2c5a3; - border-radius: 28rpx; - } - } -} -.van-tabs__scroll--line { - background: transparent !important; -} -image { - width: 100%; - height: 100%; - display: flex; -} -/* .color{ - color: #F1AB15; - } */ -.ellipsis2 { - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; -} -.nodata { - color: #666666; - text-align: center; - margin-top: 50rpx; - font-size: 28rpx; -} -.MT30 { - margin-top: 30rpx; -} -.submitbtn { - position: absolute; - bottom: 100rpx; - width: 400rpx; - left: 50%; - margin-left: -200rpx; - .btn { - position: absolute; - top: 20rpx; - color: #fff; - font-weight: bold; - font-size: 32rpx; - text-align: center; - width: 100%; - bottom: 0; - } -} -.avatar-wrapper { - position: absolute; - bottom: 0; - width: 100%; - height: 100%; - left: 0; - right: 0; - top: 0; - z-index: 99; - opacity: 0; -} -.permeate_model_box { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - padding: 52rpx 30rpx 38rpx 30rpx; - box-sizing: border-box; - .my_moisture_box { - width: 600rpx; - height: 600rpx; - margin: 0 auto; - } - .permeate_title { - font-size: 36rpx; - font-weight: bold; - color: #030000; - line-height: 1; - padding-bottom: 54rpx; - box-sizing: border-box; - } - .permeate_tips { - font-size: 28rpx; - font-weight: 500; - color: #030000; - line-height: 60rpx; - padding: 37rpx 0; - box-sizing: border-box; - .txt { - font-size: 26rpx; - font-weight: 500; - color: #666666; - margin-left: 12rpx; - } - } - .permeate_btn { - height: 90rpx; - line-height: 90rpx; - background: #000000; - border-radius: 45rpx; - font-size: 32rpx; - font-weight: bold; - color: #ffffff; - padding: 0 72rpx; - } - .close_box { - position: absolute; - top: 34rpx; - right: 29rpx; - padding: 50rpx; - } - .close_img { - position: absolute; - top: 0; - right: 0; - width: 24rpx; - height: 24rpx; - } -} -.gear_adjust { - padding: 2rpx 10rpx 40rpx 18rpx; - .title { - font-size: 28rpx; - font-weight: bold; - color: #000000; - } - .gear_box { - margin-top: 14rpx; - .slider_class { - height: 12rpx; - box-sizing: border-box; - flex: 1; - border-radius: 6rpx; - } - .gear { - padding: 20rpx 0; - } - .pos { - font-size: 26rpx; - font-weight: 500; - color: #666666; - min-width: 76rpx; - margin-right: 32rpx; - } - } -} - -.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 { - font-size: 16rpx; - font-weight: 500; - color: #cccccc; - } -} -.custom-button { - position: relative; - width: 32rpx; - height: 32rpx; - background: linear-gradient(90deg, #ffe9c7, #eecda1); - border: 4rpx solid #ffffff; - border-radius: 50%; - box-sizing: border-box; - .circle { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 12rpx; - height: 12rpx; - background: #ffffff; - border-radius: 50%; - } - .level { - position: absolute; - top: -30rpx; - left: 0; - width: 44rpx; - font-size: 20rpx; - font-weight: 500; - color: #bf8e49; - height: 28rpx; - } -} -.current-button { - background: #cccc; - .level { - color: #cccc; - } -} -.success_popup { - width: calc(100% - 110rpx); - box-sizing: border-box; - .popup_content { - width: 100%; - padding: 52rpx 0 60rpx; - box-sizing: border-box; - display: flex; - flex-direction: column; - align-items: center; - color: #030000; - .title { - font-size: 36rpx; - font-weight: bold; - } - .success_icon { - width: 120rpx; - height: 120rpx; - margin: 52rpx 0; - } - .tips { - font-size: 30rpx; - } - } - & > .infobox1 { - padding: 0rpx 0 35rpx; - .tip { - font-size: 36rpx; - font-weight: bold; - color: #030000; - text-align: center; - } - .tip1 { - text-align: center; - margin-top: 71rpx; - font-size: 30rpx; - color: #030000; - } - .tip2 { - color: #202020; - font-size: 40rpx; - text-align: center; - } - .btnbox { - margin-top: 71rpx; - padding: 0 3rpx 10rpx 15rpx; - display: flex; - align-items: center; - justify-content: space-between; - .btn1 { - background: #fff; - width: 212rpx; - height: 66rpx; - line-height: 66rpx; - text-align: center; - font-size: 30rpx; - color: #e2c6a3; - border-radius: 32rpx; - border: 2rpx solid #e2c6a3; - font-style: normal; - width: 270rpx; - height: 90rpx; - line-height: 90rpx; - background: #ffffff; - text-align: center; - border: 2rpx solid #000000; - border-radius: 45rpx; - font-size: 32rpx; - font-weight: bold; - color: #000000; - } - .btn2 { - width: 270rpx; - height: 90rpx; - line-height: 90rpx; - text-align: center; - background: #000000; - border-radius: 45rpx; - font-size: 32rpx; - font-weight: bold; - color: #ffffff; - font-style: normal; - width: 270rpx; - height: 90rpx; - line-height: 90rpx; - background: #000000; - text-align: center; - border-radius: 45rpx; - font-size: 32rpx; - font-weight: bold; - color: #ffffff; - } - } - } -} -.flex { - display: flex; -} -.aitems { - align-items: center; -} -.jcenter { - justify-content: center; -} -.sb { - justify-content: space-between; -} -.sa { - justify-content: space-around; -} -.wrap { - flex-wrap: wrap; -} diff --git a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx index 273c20d..414a36f 100644 --- a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx +++ b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx @@ -287,7 +287,7 @@ function Index() { return ( - + - - - 实时能量 + + + 实时能量 {level.map((item) => ( - - {item} - 8 + + {item} + 8 ))} - - 1 + + 1 - 时间 + 时间 - - - - - - {stepList.map((item, index) => { - return ( - - - - {item.value} - {index != 2 && } - - {item.name} - - ); - })} - - - 通过小紫弹的水分测试功能，对脸部的额头、左脸颊、右脸颊三个区域进行水分检测，并定制适合您的促渗档位方案 - - - - - - {stepList.map((item, index) => { - return ( - - {stepIndex > index && ( - - )} - {item.value} - {item.name} - - ); - })} - - - - - {stepList[stepIndex].name + "水分测试"} - - {/* */} - - {stepList[stepIndex].finish && 80 >= 99 ? ( - - ) : ( - - )} - {/* */} - - {/* */} - {/* 请参考视频指引，将仪器紧贴额头区域 */} - {/* */} - - - 请参考视频指引，将仪器紧贴 - {(testIndex == 1 || testIndex == 2 || testIndex == 4) && ( - - {stepList[stepIndex].name + "区域"} - - )} - {testIndex == 1 && ( - ，并点击下方启动检测按钮进行测试 - )} - - - - - - - - - 档位调节 - - - 额头 - - - - - {gearLevel.forehead + "档"} - - - - } - > - - - 左脸颊 - - - - - {gearLevel.leftCheek + "档"} - - - - } - > - - - 右脸颊 - - - - - {gearLevel.rightCheek + "档"} - - - - } - > - - {/* - {(10).map((item, index) => { - return ( - - {item + 1} - - ) - })} - */} - - - - - - - - 额头 - - - - - - 1档 - - - - - - - - 左脸颊 - - - - - - 1档 - - - - - - - - 右脸颊 - - - - - - 1档 - - - - - - - - - ); } diff --git a/src/moduleIOT/pages/iotCarePlan/components/Gears/index.less b/src/moduleIOT/pages/iotCarePlan/components/Gears/index.less new file mode 100644 index 0000000..a25487c --- /dev/null +++ b/src/moduleIOT/pages/iotCarePlan/components/Gears/index.less @@ -0,0 +1,266 @@ + +page { + background: #f8f8f8; + background: #f3f3f3; +} + +.gear_adjust { + padding: 2rpx 10rpx 40rpx 18rpx; + .title { + font-size: 28rpx; + font-weight: bold; + color: #000000; + } + .gear_box { + margin-top: 14rpx; + .slider_class { + height: 12rpx; + box-sizing: border-box; + flex: 1; + border-radius: 6rpx; + } + .gear { + padding: 20rpx 0; + } + .pos { + font-size: 26rpx; + font-weight: 500; + color: #666666; + min-width: 76rpx; + margin-right: 32rpx; + } + } +} + +.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 { + font-size: 16rpx; + font-weight: 500; + color: #cccccc; + } +} +.custom-button { + position: relative; + width: 32rpx; + height: 32rpx; + background: linear-gradient(90deg, #ffe9c7, #eecda1); + border: 4rpx solid #ffffff; + border-radius: 50%; + box-sizing: border-box; + .circle { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 12rpx; + height: 12rpx; + background: #ffffff; + border-radius: 50%; + } + .level { + position: absolute; + top: -30rpx; + left: 0; + width: 44rpx; + font-size: 20rpx; + font-weight: 500; + color: #bf8e49; + height: 28rpx; + } +} +.current-button { + background: #cccc; + .level { + color: #cccc; + } +} +.success_popup { + width: calc(100% - 110rpx); + box-sizing: border-box; + .popup_content { + width: 100%; + padding: 52rpx 0 60rpx; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + color: #030000; + .title { + font-size: 36rpx; + font-weight: bold; + } + .success_icon { + width: 120rpx; + height: 120rpx; + margin: 52rpx 0; + } + .tips { + font-size: 30rpx; + } + } + & > .infobox1 { + padding: 0rpx 0 35rpx; + .tip { + font-size: 36rpx; + font-weight: bold; + color: #030000; + text-align: center; + } + .tip1 { + text-align: center; + margin-top: 71rpx; + font-size: 30rpx; + color: #030000; + } + .tip2 { + color: #202020; + font-size: 40rpx; + text-align: center; + } + .btnbox { + margin-top: 71rpx; + padding: 0 3rpx 10rpx 15rpx; + display: flex; + align-items: center; + justify-content: space-between; + .btn1 { + background: #fff; + width: 212rpx; + height: 66rpx; + line-height: 66rpx; + text-align: center; + font-size: 30rpx; + color: #e2c6a3; + border-radius: 32rpx; + border: 2rpx solid #e2c6a3; + font-style: normal; + width: 270rpx; + height: 90rpx; + line-height: 90rpx; + background: #ffffff; + text-align: center; + border: 2rpx solid #000000; + border-radius: 45rpx; + font-size: 32rpx; + font-weight: bold; + color: #000000; + } + .btn2 { + width: 270rpx; + height: 90rpx; + line-height: 90rpx; + text-align: center; + background: #000000; + border-radius: 45rpx; + font-size: 32rpx; + font-weight: bold; + color: #ffffff; + font-style: normal; + width: 270rpx; + height: 90rpx; + line-height: 90rpx; + background: #000000; + text-align: center; + border-radius: 45rpx; + font-size: 32rpx; + font-weight: bold; + color: #ffffff; + } + } + } +} +.flex { + display: flex; +} +.aitems { + align-items: center; +} +.jcenter { + justify-content: center; +} +.sb { + justify-content: space-between; +} +.sa { + justify-content: space-around; +} +.wrap { + flex-wrap: wrap; +} diff --git a/src/moduleIOT/pages/iotCarePlan/components/Gears/index.tsx b/src/moduleIOT/pages/iotCarePlan/components/Gears/index.tsx new file mode 100644 index 0000000..cfcc78b --- /dev/null +++ b/src/moduleIOT/pages/iotCarePlan/components/Gears/index.tsx @@ -0,0 +1,235 @@ +import Taro from "@tarojs/taro"; +import classnames from "classnames"; +import { Block, View, Image, Text, Input } from "@tarojs/components"; +import { Popup, Progress, Slider } from "@antmjs/vantui"; + +import "./index.less"; + +interface Props { + Electricity: any; + matrixElectricity: any; + facialMaskConnectStatus: any; +} + +function Index() { + const gearLevel = { + currentGear: null, + //现在工作的档位 + currentGearMode: "forehead", + //现在工作模式 + forehead: 5, + leftCheek: 5, + rightCheek: 5, + }; + + + return ( + + + + 档位调节 + + + 额头 + + + + + {gearLevel.forehead + "档"} + + + + } + > + + + 左脸颊 + + + + + {gearLevel.leftCheek + "档"} + + + + } + > + + + 右脸颊 + + + + + {gearLevel.rightCheek + "档"} + + + + } + > + + {/* + {(10).map((item, index) => { + return ( + + {item + 1} + + ) + })} + */} + + + + + + + + 额头 + + + + + + 1档 + + + + + + + + 左脸颊 + + + + + + 1档 + + + + + + + + 右脸颊 + + + + + + 1档 + + + + + + + + + + ); +} + +export default Index; diff --git a/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.less b/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.less new file mode 100644 index 0000000..ca80bb4 --- /dev/null +++ b/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.less @@ -0,0 +1,557 @@ +page { + background: #f8f8f8; + background: #f3f3f3; +} + +.water_test { + 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; + } + .step_top { + position: relative; + .line { + position: absolute; + top: 50%; + right: -117rpx; + width: 97rpx; + height: 0; + border-top: 2rpx dashed #f1f1f1; + } + .drop { + width: 10rpx; + height: 10rpx; + background: #999999; + border-radius: 50%; + } + .step_num { + font-size: 24rpx; + font-weight: 500; + color: #666666; + margin-left: 14rpx; + } + } + .step_name { + font-size: 26rpx; + font-weight: bold; + color: #000000; + margin-left: 14rpx; + padding-top: 12rpx; + letter-spacing: 2rpx; + } + } + .test_txt { + font-size: 24rpx; + font-weight: 500; + color: #999999; + padding-top: 48rpx; + line-height: 36rpx; + letter-spacing: 2rpx; + } +} +.testing { + .testing_header { + .items { + flex: 1; + border-radius: 30rpx 30rpx 0rpx 0rpx; + padding: 25rpx 0 21rpx; + justify-content: space-evenly; + .finish_img { + width: 24rpx; + height: 24rpx; + border-radius: 50%; + } + .value { + font-size: 24rpx; + font-weight: 500; + color: #666666; + line-height: 1; + } + .name { + font-size: 26rpx; + font-weight: bold; + color: #000000; + line-height: 1; + } + } + } + .testing_content { + width: 100%; + height: 228rpx; + background: #ffffff; + border-radius: 0rpx 0rpx 30rpx 30rpx; + padding: 51rpx 30rpx 0 36rpx; + box-sizing: border-box; + .progress_box { + width: 100%; + height: 36rpx; + line-height: 36rpx; + .title { + font-size: 28rpx; + font-weight: bold; + color: #000000; + min-width: 200rpx; + margin-right: 60rpx; + letter-spacing: 2rpx; + } + } + .tips { + font-size: 24rpx; + font-weight: 500; + color: #999999; + margin-top: 45rpx; + line-height: 36rpx; + letter-spacing: 2rpx; + } + .progress_block { + flex: 1; + } + .finish_img { + width: 36rpx; + height: 36rpx; + margin-left: 49rpx; + } + } +} +.isquanpingclass { + position: fixed; + width: calc(100% - 100rpx); + padding: 20rpx 50rpx; + margin: 0; + z-index: 999; + top: 0; + left: 0; + right: 0; + height: 100vh; +} +.canvas { + position: fixed; + top: -9999999px; +} +.popbox1 { + width: 600rpx; + height: 360rpx; + border-radius: 28rpx; + flex-direction: column; + .tip1 { + font-size: 40rpx; + color: #000000; + text-align: center; + font-weight: 400; + margin-top: 28rpx; + } + .tip2 { + font-size: 32rpx; + color: #000000; + text-align: center; + font-weight: 400; + margin-top: 36rpx; + height: 110rpx; + } + .btnbox { + .btn1 { + font-size: 30rpx; + color: #000000; + text-align: center; + font-weight: 400; + width: 240rpx; + height: 100rpx; + line-height: 100rpx; + border: 2rpx solid rgba(0, 0, 0, 0.3); + border-radius: 28rpx; + } + .btn2 { + font-size: 30rpx; + color: #000000; + text-align: center; + font-weight: 400; + width: 240rpx; + height: 100rpx; + line-height: 100rpx; + margin-left: 40rpx; + background: #e2c5a3; + border-radius: 28rpx; + } + } +} +.van-tabs__scroll--line { + background: transparent !important; +} +image { + width: 100%; + height: 100%; + display: flex; +} +/* .color{ + color: #F1AB15; + } */ +.ellipsis2 { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} +.nodata { + color: #666666; + text-align: center; + margin-top: 50rpx; + font-size: 28rpx; +} +.MT30 { + margin-top: 30rpx; +} +.submitbtn { + position: absolute; + bottom: 100rpx; + width: 400rpx; + left: 50%; + margin-left: -200rpx; + .btn { + position: absolute; + top: 20rpx; + color: #fff; + font-weight: bold; + font-size: 32rpx; + text-align: center; + width: 100%; + bottom: 0; + } +} +.avatar-wrapper { + position: absolute; + bottom: 0; + width: 100%; + height: 100%; + left: 0; + right: 0; + top: 0; + z-index: 99; + opacity: 0; +} +.permeate_model_box { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + padding: 52rpx 30rpx 38rpx 30rpx; + box-sizing: border-box; + .my_moisture_box { + width: 600rpx; + height: 600rpx; + margin: 0 auto; + } + .permeate_title { + font-size: 36rpx; + font-weight: bold; + color: #030000; + line-height: 1; + padding-bottom: 54rpx; + box-sizing: border-box; + } + .permeate_tips { + font-size: 28rpx; + font-weight: 500; + color: #030000; + line-height: 60rpx; + padding: 37rpx 0; + box-sizing: border-box; + .txt { + font-size: 26rpx; + font-weight: 500; + color: #666666; + margin-left: 12rpx; + } + } + .permeate_btn { + height: 90rpx; + line-height: 90rpx; + background: #000000; + border-radius: 45rpx; + font-size: 32rpx; + font-weight: bold; + color: #ffffff; + padding: 0 72rpx; + } + .close_box { + position: absolute; + top: 34rpx; + right: 29rpx; + padding: 50rpx; + } + .close_img { + position: absolute; + top: 0; + right: 0; + width: 24rpx; + height: 24rpx; + } +} +.gear_adjust { + padding: 2rpx 10rpx 40rpx 18rpx; + .title { + font-size: 28rpx; + font-weight: bold; + color: #000000; + } + .gear_box { + margin-top: 14rpx; + .slider_class { + height: 12rpx; + box-sizing: border-box; + flex: 1; + border-radius: 6rpx; + } + .gear { + padding: 20rpx 0; + } + .pos { + font-size: 26rpx; + font-weight: 500; + color: #666666; + min-width: 76rpx; + margin-right: 32rpx; + } + } +} + +.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 { + font-size: 16rpx; + font-weight: 500; + color: #cccccc; + } +} +.custom-button { + position: relative; + width: 32rpx; + height: 32rpx; + background: linear-gradient(90deg, #ffe9c7, #eecda1); + border: 4rpx solid #ffffff; + border-radius: 50%; + box-sizing: border-box; + .circle { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 12rpx; + height: 12rpx; + background: #ffffff; + border-radius: 50%; + } + .level { + position: absolute; + top: -30rpx; + left: 0; + width: 44rpx; + font-size: 20rpx; + font-weight: 500; + color: #bf8e49; + height: 28rpx; + } +} +.current-button { + background: #cccc; + .level { + color: #cccc; + } +} +.success_popup { + width: calc(100% - 110rpx); + box-sizing: border-box; + .popup_content { + width: 100%; + padding: 52rpx 0 60rpx; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + color: #030000; + .title { + font-size: 36rpx; + font-weight: bold; + } + .success_icon { + width: 120rpx; + height: 120rpx; + margin: 52rpx 0; + } + .tips { + font-size: 30rpx; + } + } + & > .infobox1 { + padding: 0rpx 0 35rpx; + .tip { + font-size: 36rpx; + font-weight: bold; + color: #030000; + text-align: center; + } + .tip1 { + text-align: center; + margin-top: 71rpx; + font-size: 30rpx; + color: #030000; + } + .tip2 { + color: #202020; + font-size: 40rpx; + text-align: center; + } + .btnbox { + margin-top: 71rpx; + padding: 0 3rpx 10rpx 15rpx; + display: flex; + align-items: center; + justify-content: space-between; + .btn1 { + background: #fff; + width: 212rpx; + height: 66rpx; + line-height: 66rpx; + text-align: center; + font-size: 30rpx; + color: #e2c6a3; + border-radius: 32rpx; + border: 2rpx solid #e2c6a3; + font-style: normal; + width: 270rpx; + height: 90rpx; + line-height: 90rpx; + background: #ffffff; + text-align: center; + border: 2rpx solid #000000; + border-radius: 45rpx; + font-size: 32rpx; + font-weight: bold; + color: #000000; + } + .btn2 { + width: 270rpx; + height: 90rpx; + line-height: 90rpx; + text-align: center; + background: #000000; + border-radius: 45rpx; + font-size: 32rpx; + font-weight: bold; + color: #ffffff; + font-style: normal; + width: 270rpx; + height: 90rpx; + line-height: 90rpx; + background: #000000; + text-align: center; + border-radius: 45rpx; + font-size: 32rpx; + font-weight: bold; + color: #ffffff; + } + } + } +} +.flex { + display: flex; +} +.aitems { + align-items: center; +} +.jcenter { + justify-content: center; +} +.sb { + justify-content: space-between; +} +.sa { + justify-content: space-around; +} +.wrap { + flex-wrap: wrap; +} diff --git a/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.tsx b/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.tsx new file mode 100644 index 0000000..1446a2f --- /dev/null +++ b/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.tsx @@ -0,0 +1,139 @@ +import Taro from "@tarojs/taro"; +import classnames from "classnames"; +import { Block, View, Image, Text, Input } from "@tarojs/components"; +import { Popup, Progress, Slider } from "@antmjs/vantui"; + +import "./index.less"; + +interface Props { + Electricity: any; + matrixElectricity: any; + facialMaskConnectStatus: any; +} + +function Index() { + const stepIndex = 0; + const testIndex = 1; + + const stepList = [ + { + value: "Step1", + name: "额头", + finish: false, + }, + { + value: "Step2", + name: "左脸颊", + finish: false, + }, + { + value: "Step3", + name: "右脸颊", + finish: false, + }, + ]; + return ( + + + + + {stepList.map((item, index) => { + return ( + + + + {item.value} + {index != 2 && } + + {item.name} + + ); + })} + + + 通过小紫弹的水分测试功能，对脸部的额头、左脸颊、右脸颊三个区域进行水分检测，并定制适合您的促渗档位方案 + + + + + + {stepList.map((item, index) => { + return ( + + {stepIndex > index && ( + + )} + {item.value} + {item.name} + + ); + })} + + + + + {stepList[stepIndex].name + "水分测试"} + + {/* */} + + {stepList[stepIndex].finish && 80 >= 99 ? ( + + ) : ( + + )} + {/* */} + + {/* */} + {/* 请参考视频指引，将仪器紧贴额头区域 */} + {/* */} + + + 请参考视频指引，将仪器紧贴 + {(testIndex == 1 || testIndex == 2 || testIndex == 4) && ( + + {stepList[stepIndex].name + "区域"} + + )} + {testIndex == 1 && ( + ，并点击下方启动检测按钮进行测试 + )} + + + + + + + + + ); +} + +export default Index; From 99e964313ebc00ac70f24349bfe90adb754aa84d Mon Sep 17 00:00:00 2001 From: rongweikang <1174906669@qq.com> Date: Fri, 15 Mar 2024 17:23:47 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B0=B4=E5=88=86?= =?UTF-8?q?=E6=B5=8B=E8=AF=95=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.config.ts | 76 +++++++++---------- .../moisture_test_report.tsx | 74 ++++++++++++++++-- 2 files changed, 104 insertions(+), 46 deletions(-) diff --git a/src/app.config.ts b/src/app.config.ts index cd85c63..e1f9347 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -1,42 +1,43 @@ export default defineAppConfig({ __usePrivacyCheck__: true, pages: [ - 'pages/index/index', - 'pages/login/login', - 'pages/initiate/initiate', - 'pages/entry/entry', - 'pages/activity/activity', + "pages/index/index", + "pages/login/login", + "pages/initiate/initiate", + "pages/entry/entry", + "pages/activity/activity", "pages/detect/detect", "pages/shop/shop", "pages/user/user", "pages/userInfo/userInfo", - 'pages/userInfoDetail/userInfoDetail', + "pages/userInfoDetail/userInfoDetail", "pages/register/register", - 'pages/instrument/instrument', + "pages/instrument/instrument", "pages/instrument/intro", "pages/instrument_manage/index", "pages/instrument_detail/index", "pages/instrumentClickinUpload/index", - 'pages/privacyPolicy/privacyPolicy', - 'pages/userPolicy/userPolicy', - 'pages/about/about', - 'pages/message/message', - 'pages/consultant/consultant', - 'pages/integral_list/integral_list', + "pages/privacyPolicy/privacyPolicy", + "pages/userPolicy/userPolicy", + "pages/about/about", + "pages/message/message", + "pages/consultant/consultant", + "pages/integral_list/integral_list", "pages/recording/recording", "pages/webViewPage/webViewPage", - 'pages/template/template', - 'pages/face_report/face_report', + "pages/template/template", + "pages/face_report/face_report", "pages/connection_help/connection_help", "pages/errorpage/errorpage", + "pages/moisture_test_report/moisture_test_report", ], - "tabBar": { - "custom": true, - "color": "#707070", - "selectedColor": "#CAB18C", - "backgroundColor": "#ffffff", - "borderStyle": "black", - "list": [ + tabBar: { + custom: true, + color: "#707070", + selectedColor: "#CAB18C", + backgroundColor: "#ffffff", + borderStyle: "black", + list: [ { pagePath: "pages/index/index", text: "主页", @@ -67,28 +68,23 @@ export default defineAppConfig({ iconPath: "img/tabar/5.png", selectedIconPath: "img/tabar/55.png", }, - ] + ], }, - usingComponents: { - - }, - lazyCodeLoading: 'requiredComponents', + usingComponents: {}, + lazyCodeLoading: "requiredComponents", window: { - backgroundTextStyle: 'light', - navigationStyle: 'custom', - navigationBarBackgroundColor: '#fff', - navigationBarTitleText: 'WeChat', - navigationBarTextStyle: 'black', + backgroundTextStyle: "light", + navigationStyle: "custom", + navigationBarBackgroundColor: "#fff", + navigationBarTitleText: "WeChat", + navigationBarTextStyle: "black", // enablePullDownRefresh: true }, requiredPrivateInfos: ["getLocation"], subPackages: [ { - root: 'moduleIOT', - pages: [ - "pages/iotCarePlan/WL200", - "pages/iotCarePlan/FR200", - ] - } - ] -}) + root: "moduleIOT", + pages: ["pages/iotCarePlan/WL200", "pages/iotCarePlan/FR200"], + }, + ], +}); diff --git a/src/pages/moisture_test_report/moisture_test_report.tsx b/src/pages/moisture_test_report/moisture_test_report.tsx index a71d9e1..67baec6 100644 --- a/src/pages/moisture_test_report/moisture_test_report.tsx +++ b/src/pages/moisture_test_report/moisture_test_report.tsx @@ -12,7 +12,7 @@ import { setMobile } from "../../store/features/userInfo"; import { WCUserLogin } from "../../utils/Interface"; -import "./login.less"; +import "./moisture_test_report.less"; class MoistureTestReport extends Component { constructor(props) { @@ -60,6 +60,63 @@ class MoistureTestReport extends Component { async initData() { } + getStatusData(level) { + var bgCssData = { + serious: 'background: #FFE3E3', + moderate: 'background: #FFEBDC', + slight: 'background: #F6FCFF', + normal: 'background: #F8F8F8', + sufficient: 'background: #F8F8F8' + } + var progressBgData = { + serious: 'background: #FF9393', + moderate: 'background: #FFC58C', + slight: 'background: #E5F3F9', + normal: 'background: #C2E5F3', + sufficient: 'background: #9FDBF3' + } + if (level >= 1 && level <= 2) { + return { + bg: bgCssData.serious, + title: '严重缺水', + gear: 1, + img: 'serious', + progressBg: progressBgData.serious + } + } else if (level >= 3 && level <= 4) { + return { + bg: bgCssData.moderate, + title: '中度缺水', + gear: 2, + img: 'moderate', + progressBg: progressBgData.moderate + } + } else if (level >= 5 && level <= 6) { + return { + bg: bgCssData.slight, + title: '轻微缺水', + gear: 3, + img: 'slight', + progressBg: progressBgData.slight + } + } else if (level >= 7 && level <= 8) { + return { + bg: bgCssData.normal, + title: '水分正常', + gear: 4, + img: 'normal', + progressBg: progressBgData.normal + } + } else if (level >= 9 && level <= 10) { + return { + bg: bgCssData.sufficient, + title: '水分充足', + gear: 5, + img: 'sufficient', + progressBg: progressBgData.sufficient + } + } + } render() { let { name, imgUrl, reportData, bgCssData, isClock, xinde, imglist, id, show } = this.state @@ -70,24 +127,29 @@ class MoistureTestReport extends Component { - + 额头 - {util.getStatusData(reportData.shuifenLevel.head).title} + {/* {this.getStatusData(7).title} */} + + 左脸颊 - {util.getStatusData(reportData.shuifenLevel.leftFace).title} + {/* {this.getStatusData(reportData.shuifenLevel.leftFace).title} */} + + 右脸颊 - {util.getStatusData(reportData.shuifenLevel.rightFace).title} + {/* {this.getStatusData(reportData.shuifenLevel.rightFace).title} */} + @@ -213,4 +275,4 @@ const mapDispatchToProps = (dispatch) => ({ dispatch(setMobile(value)); }, }); -export default connect(mapStateToProps, mapDispatchToProps)(Login); +export default connect(mapStateToProps, mapDispatchToProps)(MoistureTestReport); From 99cdfc9d3973bd92eba901c5eec8384933140372 Mon Sep 17 00:00:00 2001 From: rongweikang <1174906669@qq.com> Date: Fri, 15 Mar 2024 17:31:17 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/moduleIOT/pages/iotCarePlan/WL200.tsx | 110 ++++++------- src/pages/index/index.tsx | 179 +++++++++++----------- 2 files changed, 144 insertions(+), 145 deletions(-) diff --git a/src/moduleIOT/pages/iotCarePlan/WL200.tsx b/src/moduleIOT/pages/iotCarePlan/WL200.tsx index 0dd73b3..dffae3b 100644 --- a/src/moduleIOT/pages/iotCarePlan/WL200.tsx +++ b/src/moduleIOT/pages/iotCarePlan/WL200.tsx @@ -10,10 +10,10 @@ import React, { useState, } from "react"; -// import Echarts from "./components/Echart/index"; +import Echarts from "./components/Echart/index"; import { Block, - View, + View, Text, Image, Video, @@ -235,9 +235,9 @@ class IotCarePlanWL200 extends Component { this.getWL200NursingHistory(); this.initData(); } - componentDidMount() {} + componentDidMount() { } - componentWillUnmount() {} + componentWillUnmount() { } componentDidShow() { console.log("页面显示了"); @@ -568,7 +568,7 @@ class IotCarePlanWL200 extends Component { this.onNursingTap(); // 倒计时弹窗: 倒计时完成后，自动开始，并判断弹窗 let downNum = CountDownTime[this.state.ActiveModeItem.modeType] || 3; - this.showCountdownFun(downNum, () => {}); + this.showCountdownFun(downNum, () => { }); }, 500); return; @@ -600,7 +600,7 @@ class IotCarePlanWL200 extends Component { }; // 绘制能量图 - drawProwerPicture() {} + drawProwerPicture() { } /** 切换光照 */ onSwitchChange = async () => { @@ -1365,7 +1365,7 @@ class IotCarePlanWL200 extends Component { // 仅在切换模式的时候，弹窗倒计时. if (type === "switch") { let downNum = CountDownTime[ActiveModeItem.modeType] || 3; - this.showCountdownFun(downNum, () => {}); // 倒计时弹窗 + this.showCountdownFun(downNum, () => { }); // 倒计时弹窗 } // 开始执行护理 @@ -2075,8 +2075,8 @@ class IotCarePlanWL200 extends Component { { isLarge isClose isShow={isEndCarePlan} - title="提示" - content="是否结束护理" - textAlgin="center" - cancelButtonText="取消" - confirmButtonText="确定" + title='提示' + content='是否结束护理' + textAlgin='center' + cancelButtonText='取消' + confirmButtonText='确定' close={this.cancelEndBtn} confirm={this.confirmEndBtn} /> @@ -2100,7 +2100,7 @@ class IotCarePlanWL200 extends Component { isLarge isClose isShow={isSwitchActiveMode} - title="护理模式切换" + title='护理模式切换' content={ { onEmitShowAll={this.openModeSwitch} /> } - textAlgin="center" - cancelButtonText="取消" - confirmButtonText="确定" + textAlgin='center' + cancelButtonText='取消' + confirmButtonText='确定' close={this.cancelModeSwitchBtn} confirm={this.confirmModeSwitchBtn} /> @@ -2125,7 +2125,7 @@ class IotCarePlanWL200 extends Component { isShow={isShowStepTips} isLarge isFirstEntry={false} - confirmButtonText="知道了" + confirmButtonText='知道了' data={ActiveModeItem.openSourceData} close={this.closeStepTips} /> @@ -2134,10 +2134,10 @@ class IotCarePlanWL200 extends Component { @@ -2146,11 +2146,11 @@ class IotCarePlanWL200 extends Component { isShow={isShowErrorTipsText} isClose zIndex={10020} - myClassName="level-up" - title="提示" + myClassName='level-up' + title='提示' content={errorTipsText} - confirmButtonText="知道了" - textAlgin="center" + confirmButtonText='知道了' + textAlgin='center' close={this.closeErrorTipsText} confirm={this.closeErrorTipsText} /> @@ -2159,17 +2159,17 @@ class IotCarePlanWL200 extends Component { isShow={isShowTipsSave} isClose zIndex={10020} - myClassName="level-up" - title="提示" + myClassName='level-up' + title='提示' content={ 当前模式已护理部分时间 是否保存护理记录 } - cancelButtonText="取消" - confirmButtonText="确认" - textAlgin="center" + cancelButtonText='取消' + confirmButtonText='确认' + textAlgin='center' close={this.closeTipsSave} cancel={this.cancelTipsSave} confirm={this.confirmTipsSave} @@ -2178,11 +2178,11 @@ class IotCarePlanWL200 extends Component { { /*不需要做处理*/ }} @@ -2193,28 +2193,28 @@ class IotCarePlanWL200 extends Component { deviceInfo={currentDevice} close={this.connectionClose} isDisconnect={!isConnectionBlutoot} - offlineChange={() => {}} + offlineChange={() => { }} pairingChange={this.pairingChange} - upgradeFun={() => {}} + upgradeFun={() => { }} /> )} - 正在同步护理记录... + 正在同步护理记录... - - + + {!isShowNurse && ( - - - + + + 护理时间： - {currentTime} + {currentTime} - + { /> )} - {/* */} +