弹窗样式

<template>
<view id="settings">
<global-header :imgSrcLeft="'/static/nav/back.png'" :title="'网店设置'"/>
<div class="settings_c pd">
<h1>说明：</h1>
<p style="margin-top: 32upx;">1.网店业务的开通需要进行验证，以确保是在您的操作下开 通的。 </p>
<p>2.可指定操作员来进行网店订单处理。</p>
<p style="margin-top: 32upx;">网店业务请严格管理，以使您能安全的开展网店业务。 主意保管好管理员的密码。</p>
<p style="margin-top: 32upx;">当前状态：<span>未开通网店</span></p>
<div class="btn_open" @click="member">
立即开通2
</div>
</div>
<!-- 弹窗1 -->
<view :hidden="userFeedbackHidden" class="popup_content">
<view class="popup_title">开通会员授权</view>
<view class="popup_textarea_item">
<input class="popup_textarea" placeholder='请输入网店名称' v-model="feedbackContent">
</input>

<!-- 单选框 -->
<view class="uni-padding-wrap uni-common-mt">
<view>
<checkbox-group class="checkbox">
<checkbox value="cb" checked="true" />与网点名称一致
</checkbox-group>
</view>
</view>

<view class="view_button" @click="submitFeedback()">
<button class="popup_button" @click="cancel">取消</button>
<button class="popup_button popup_button2" @click="nextstep">下一步</button>
</view>
</view>
</view>
<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()">hrthsrt</view>
<!-- 弹窗2 -->
  <view :hidden="userFeedbackHidden2" class="popup_content">
<view class="popup_title">开通授权</view>
<view class="popup_textarea_item">
<input class="popup_textarea" placeholder='请输入管理员密码' v-model="feedbackContent2">
</input>
<view class="view_button view_button2" @click="submitFeedback()">
<button class="popup_button popup_button02">确定</button>
<button class="popup_button002" @click="cancel2">上一步</button>
</view>
</view>
</view>
<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()">hrthsrt</view>


</view>
</template>
<script>
export default {
data() {
return {
userFeedbackHidden: true, // 默认隐藏
userFeedbackHidden2:true,//默认隐藏2
feedbackContent: '', // 用户反馈内容
feedbackContent2:'', //用户反馈内容 弹窗2

noMsg: false
};
},
methods: {
// 立即开通 弹窗
member(){
this.userFeedbackHidden=false

},
// 下一步 弹窗
nextstep(){
this.userFeedbackHidden2=false
},

//下一步 弹窗取消
cancel2(){
this.userFeedbackHidden2=true
},
//取消
cancel(){
this.userFeedbackHidden=true
},
showDiv() { // 显示输入弹出框
this.userFeedbackHidden = false;
},
hideDiv() { // 隐藏输入弹出框
this.userFeedbackHidden = true;
},
submitFeedback() { // 提交反馈

var _this =this;
// 提交反馈内容
console.log(_this.feedbackContent);
}

}
};
</script>
<style lang="less" scoped>
#settings{
.settings_c{
padding-top: 48upx;
h1{
font-size: 36upx;
font-weight: 500;
color: #333333;
letter-spacing: 2px;
}
p{
font-size: 26upx;
font-weight: 500;
color: #333333;
letter-spacing: 1px;
span{
color: #D81E06;
}
}
.btn_open{
width: 654upx;
height: 88upx;
background: #1081c7;
font-size: 36upx;
font-weight: 500;
text-align: center;
color: #ffffff;
letter-spacing: 2px;
line-height: 88upx;
margin: 350upx auto;
}
}
}

.popup_overlay {

position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=88);
}

.popup_content {
position: fixed;
top: 50%;
left: 50%;
width: 90%;
height: 550upx;
margin-left: -336upx;
margin-top: -270upx;
border: 10px solid white;
background-color: white;
z-index: 1002;
overflow: auto;
border-radius: 20upx;
}

.popup_title {
padding-top: 15upx;
width: 95%;

text-align: center;
font-size: 32upx;
}

.popup_textarea_item {
// padding-top: 55upx;
margin-top: 92upx;
height: 240upx;
width: 100%;
background-color: #F1F1F1;
margin-top: 30upx;
// margin-left: 20upx;
padding: 0 20upx;
}

.popup_textarea {
width: 410upx;
font-size: 26upx;
padding: 0 20px;
margin-top: 100upx;


}

.popup_button {

width: 250upx;
float: left;
// margin-left: 50upx;
color: white;
background-color: #4399FC;
border-radius: 20upx;

}
.popup_button2{
// margin-left: 80upx;
float: right;
}
// 单选
.checkbox{
font-size: 20upx;
color: #8a8a8a;

}

.uni-padding-wrap{
margin-top: 76upx;
}
// 下一步
.view_button{
margin-top: 76upx;
// border: 1px solid #4CD964;
}
.view_button:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.view_button{
width:100%;
// border: 1px solid #4CD964;

}
//按钮 弹窗2
.popup_button002{
width: 250upx;
float: left;
// margin-left: 50upx;
color: white;
background-color: #4399FC;
border-radius: 20upx;
}
.popup_button02{
// margin-left: 100upx;
float: right;
}
.view_button2{
margin-top: 170upx;
}

</style>