From 47757702b0262fbfcace238f530d1eb44f040f85 Mon Sep 17 00:00:00 2001 From: qsj <731458905@qq.com> Date: Fri, 29 Mar 2024 16:11:14 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E7=94=B5=E6=B5=81=E5=AE=9A=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/popup-We/popup-We.less | 111 +++++++++++++++++- .../components/popup-We/popup-We.tsx | 58 +++++---- src/pages/index/index.tsx | 110 +++++++++-------- 3 files changed, 208 insertions(+), 71 deletions(-) diff --git a/src/moduleIOT/pages/iotCarePlan/components/popup-We/popup-We.less b/src/moduleIOT/pages/iotCarePlan/components/popup-We/popup-We.less index ee3622a..f374864 100644 --- a/src/moduleIOT/pages/iotCarePlan/components/popup-We/popup-We.less +++ b/src/moduleIOT/pages/iotCarePlan/components/popup-We/popup-We.less @@ -8,6 +8,45 @@ } } +.van-step--horizontal .van-step__circle-container { + position: absolute; + bottom: 12rpx; + z-index: 1; + -webkit-transform: translate3d(-50%, 50%, 0); + transform: translate3d(-50%, 50%, 0); + background-color: transparent !important; + // background-color: no !important; + padding: 0 16rpx; + padding: 0 var(--padding-xs, 16rpx); +} + +.van-step--horizontal .van-step__line { + height: 14rpx; + border-radius: 15rpx; + // background-color: #dedede !important; +} + +.van-step--horizontal:first-child .van-step__circle-container { + padding: 0px 0rpx 0 0; +} + +.van-step--finish { + // background-color: red; +} + +.van-step__circle { + width: 25rpx; + height: 25rpx; +} + +.van-steps--horizontal .van-step__wrapper { + overflow: unset; +} +// 图标样式 +.van-step--horizontal.van-step--process .van-step__icon { + font-size: var(--step-icon-size, 30rpx); +} + .step-absolutely { width: 600rpx; height: 720rpx; @@ -38,6 +77,19 @@ } .Newpop { + .site-close{ + position: absolute; + right: 16rpx; + top: 44rpx; + color: #000; + font-size: 36rpx; + z-index: 100009; + background-color: transparent; + border-radius: 50%; + padding: 8rpx; + -webkit-box-sizing: border-box; + box-sizing: border-box; + } .center { // background-color: red; height: 720rpx; @@ -48,16 +100,73 @@ font-size: 25rpx; } - .titleSlogan{ + + .titleSlogan { font-size: 30rpx; font-family: 700; margin-bottom: 17rpx; } + .img { width: 100%; height: 500rpx; background-color: #666; } + .orange{ + background-color: #e6d9bc !important; + } + .drag_box{ + position: relative; + .line_left{ + position: absolute; + left: 4rpx; + top: 68rpx; + width: 22rpx; + height: 14rpx; + background-color: #e6d9bc; + border-radius: 7rpx; + } + .line_right{ + /* position: absolute; */ + top: 68rpx; + right: 0rpx; + position: absolute; + /* left: 4rpx; */ + /* top: 63rpx; */ + width: 35rpx; + height: 14rpx; + background-color: #f7f7f7; + border-radius: 7rpx; + } + } + .box { + display: flex; + + .box_item { + width: 25%; + // margin-left: 34rpx; + // .box_item:last-of-type{ + // background-color: red; + // } + } + + .box_item:nth-child(1) { + padding-left: 30rpx; + } + + .box_item:nth-child(2) { + padding-left: 42rpx; + } + + .box_item:nth-child(3) { + padding-left: 99rpx; + } + + .box_item:nth-child(4) { + text-align: right; + } + + } .text { margin: 20rpx; diff --git a/src/moduleIOT/pages/iotCarePlan/components/popup-We/popup-We.tsx b/src/moduleIOT/pages/iotCarePlan/components/popup-We/popup-We.tsx index 82f7d41..f7c3890 100644 --- a/src/moduleIOT/pages/iotCarePlan/components/popup-We/popup-We.tsx +++ b/src/moduleIOT/pages/iotCarePlan/components/popup-We/popup-We.tsx @@ -85,7 +85,7 @@ class PopupWe extends Component { isShow, isClose, isLarge, - values, + close, myClassName, zIndex, Page, @@ -93,7 +93,9 @@ class PopupWe extends Component { handlepopupCheck, WeCurrent, PreviousStep, - NextStep + NextStep, + handleSteps, + } = this.props; if (!zIndex) zIndex = 10001; return ( @@ -122,7 +124,14 @@ class PopupWe extends Component { > {title} + )} + { + close() + }} + > @@ -131,25 +140,26 @@ class PopupWe extends Component { {WeCurrent[Page - 1].titleSlogan} {Page > 3 ? 22222 - - + + + { + handleSteps(e) + }} direction="horizontal" + activeColor="#e6d3b0" inactiveColor="#f7f7f7" steps={[ + { activeIcon: 'circle',}, + { activeIcon: 'circle',}, + { activeIcon: 'circle',}, + { activeIcon: 'circle',}, + ]}>111111111111111111 + + + + 轻微 + 中度 + 重度 + + + : @@ -159,9 +169,9 @@ class PopupWe extends Component { { - console.info(e, WeCurrent, Page) + handlepopupCheck(e) }} @@ -183,7 +193,7 @@ class PopupWe extends Component { 上一步 : null} -