修改样式
qsj
2 years ago
parent
51051e6bfb
commit
f06b1d8cc1
@ -0,0 +1,162 @@
|
||||
.step-popup-content-box {
|
||||
margin: 0;
|
||||
|
||||
.absolutely-img {
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.step-absolutely {
|
||||
width: 600rpx;
|
||||
height: 720rpx;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.step-img {
|
||||
display: block;
|
||||
width: 600rpx;
|
||||
height: 600rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.common-popup-title-WE {
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #030000;
|
||||
text-align: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.whitePop {
|
||||
background-color: #fff !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.Newpop {
|
||||
.center {
|
||||
// background-color: red;
|
||||
height: 720rpx;
|
||||
|
||||
.page {
|
||||
color: #dedede;
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 25rpx;
|
||||
|
||||
}
|
||||
.titleSlogan{
|
||||
font-size: 30rpx;
|
||||
font-family: 700;
|
||||
margin-bottom: 17rpx;
|
||||
}
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 20rpx;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
background-color: #f8f8f8;
|
||||
// border: 1rpx solid;
|
||||
border-radius: 45rpx;
|
||||
padding: 5rpx 24rpx;
|
||||
}
|
||||
|
||||
.black {
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-close {
|
||||
position: absolute;
|
||||
right: 16rpx;
|
||||
top: 16rpx;
|
||||
color: #000;
|
||||
font-size: 36rpx;
|
||||
z-index: 100009;
|
||||
background-color: transparent;
|
||||
border-radius: 50%;
|
||||
padding: 8rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.step-popup-btn {
|
||||
position: absolute;
|
||||
bottom: 100rpx;
|
||||
left: calc(50% - 120rpx);
|
||||
width: 240rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
border: 1rpx solid #000;
|
||||
border-radius: 40rpx;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.step-tips-common-box {
|
||||
padding: 50rpx 35rpx 74rpx 35rpx;
|
||||
|
||||
.tips-message {
|
||||
margin-top: 70rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #030000;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-btn-one {
|
||||
display: flex;
|
||||
margin-top: 60rpx;
|
||||
justify-content: center;
|
||||
|
||||
.popup-btn {
|
||||
width: 270rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
border: 1rpx solid #000;
|
||||
border-radius: 45rpx;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
font-family: PingFang SC;
|
||||
}
|
||||
}
|
||||
|
||||
.setp-footer-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
height: 30rpx;
|
||||
// padding: 10rpx;
|
||||
margin-top: 50rpx;
|
||||
|
||||
.checked {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 26rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: PingFang SC;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,199 @@
|
||||
import classnames from "classnames";
|
||||
import { Component } from "react";
|
||||
|
||||
import {
|
||||
Block,
|
||||
View,
|
||||
Image,
|
||||
Text,
|
||||
Button,
|
||||
PageMeta,
|
||||
ScrollView,
|
||||
} from "@tarojs/components";
|
||||
|
||||
import { Popup, Checkbox, CheckboxGroup, Steps } from "@antmjs/vantui";
|
||||
|
||||
|
||||
import "@/components/popup/popup.less";
|
||||
import "@/components/popup/popup-alert.less";
|
||||
import "./popup-We.less"
|
||||
|
||||
import { go } from "@/utils/traoAPI";
|
||||
|
||||
/** props
|
||||
* isLarge 是否大尺寸
|
||||
* isShow 是否显示
|
||||
* isClose 右上角关闭图标
|
||||
* title 弹窗标题
|
||||
* content 弹窗内容
|
||||
* confirmButtonText 确定按钮
|
||||
* textAlgin 文本对齐 left right center
|
||||
* type: 1注册
|
||||
* @confirm 关闭回调
|
||||
*/
|
||||
|
||||
class PopupWe extends Component<any, any> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
name: "确认组件",
|
||||
// Page:1,
|
||||
type: "1",
|
||||
// titleSlogan:'请选择额头区域护理目标'
|
||||
};
|
||||
}
|
||||
|
||||
async onLoad() {
|
||||
console.log(this.props, '111111111111');
|
||||
|
||||
}
|
||||
componentDidMount() { }
|
||||
|
||||
componentWillUnmount() { }
|
||||
|
||||
componentDidShow() { }
|
||||
|
||||
componentDidHide() { }
|
||||
|
||||
async initData() { }
|
||||
|
||||
onClose = () => {
|
||||
this.props.close();
|
||||
};
|
||||
|
||||
onConfirm = () => {
|
||||
|
||||
};
|
||||
|
||||
onClickStop = (e) => {
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
onTouchMove = () => {
|
||||
return true;
|
||||
};
|
||||
html1_3 = () => {
|
||||
return <View className="img">22222</View>
|
||||
}
|
||||
render() {
|
||||
let {
|
||||
title,
|
||||
|
||||
content,
|
||||
confirmButtonText,
|
||||
textAlgin,
|
||||
isShow,
|
||||
isClose,
|
||||
isLarge,
|
||||
values,
|
||||
myClassName,
|
||||
zIndex,
|
||||
Page,
|
||||
type,
|
||||
handlepopupCheck,
|
||||
WeCurrent,
|
||||
PreviousStep,
|
||||
NextStep
|
||||
} = this.props;
|
||||
if (!zIndex) zIndex = 10001;
|
||||
return (
|
||||
<Block>
|
||||
<PageMeta pageStyle={isShow ? "overflow: hidden;" : ""} />
|
||||
<Popup
|
||||
className={myClassName}
|
||||
overlayStyle={`width: 100vw;padding: 0;z-index: ${zIndex} !important`}
|
||||
show={isShow}
|
||||
closeOnClickOverlay={false}
|
||||
round
|
||||
onClick={this.onClickStop}
|
||||
>
|
||||
|
||||
<View
|
||||
className={classnames("common-box Newpop", {
|
||||
"common-large": isLarge,
|
||||
})}
|
||||
catchMove
|
||||
>
|
||||
{title && (
|
||||
<View
|
||||
className={classnames("common-popup-title-WE", {
|
||||
"margin-samll": isLarge,
|
||||
})}
|
||||
>
|
||||
{title}
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="center">
|
||||
<View className="page">
|
||||
<View className="black">0{Page}</View>/06
|
||||
</View>
|
||||
<View className="titleSlogan">{WeCurrent[Page - 1].titleSlogan}</View>
|
||||
{Page > 3 ? <View>
|
||||
<View className="img">22222</View>
|
||||
<View>
|
||||
<Steps active={1} steps={[
|
||||
{
|
||||
text: '步骤一',
|
||||
desc: '描述信息',
|
||||
},
|
||||
{
|
||||
text: '步骤二',
|
||||
desc: '描述信息',
|
||||
},
|
||||
{
|
||||
text: '步骤三',
|
||||
desc: '描述信息',
|
||||
},
|
||||
{
|
||||
text: '步骤四',
|
||||
desc: '描述信息',
|
||||
},
|
||||
]}></Steps>
|
||||
</View>
|
||||
</View> : <View>
|
||||
<View className="img">
|
||||
111111
|
||||
</View>
|
||||
<View className="Checkbox ">
|
||||
|
||||
|
||||
<CheckboxGroup
|
||||
value={WeCurrent[Page - 1].values}
|
||||
onChange={(e) => {
|
||||
console.info(e, WeCurrent, Page)
|
||||
handlepopupCheck(e)
|
||||
|
||||
}}
|
||||
>
|
||||
<View className="text"><Checkbox name="1" shape="square" iconSize="15px" checkedColor="#0089d2"> {WeCurrent[Page - 1].text1} </Checkbox></View>
|
||||
<View className="text"><Checkbox name="2" shape="square" iconSize="15px" checkedColor="#0089d2">{WeCurrent[Page - 1].text2}</Checkbox></View>
|
||||
|
||||
</CheckboxGroup>
|
||||
</View>
|
||||
</View>}
|
||||
|
||||
|
||||
</View>
|
||||
|
||||
<View className="alert-popup-btns">
|
||||
{Page !== 1 ? <Button className="alert-popup-btn whitePop" onClick={(e) => {
|
||||
PreviousStep()
|
||||
}}>
|
||||
上一步
|
||||
</Button> : null}
|
||||
|
||||
<Button className="alert-popup-btn" disabled={WeCurrent[Page - 1].values.length === 0 ? true : false} onClick={(e) => {
|
||||
NextStep()
|
||||
}}>
|
||||
下一步
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
</Popup>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default PopupWe;
|
||||
Loading…
Reference in New Issue