vue彈出框
<template>
<div class="mineOrderserver-container">
<p>預(yù)約服務(wù)</p>
<input class="row" type="text" placeholder="請輸入聯(lián)系電話">
<div class="row row_box">
<span>請選擇服務(wù)類型</span>
<img src="../assets/images/more@2x.png" alt="">
</div>
<div class="row row_box" @click="choosemember">
<span>請選擇改裝套件</span>
<img src="../assets/images/more@2x.png" alt="">
</div>
<!-- 改裝套件 -->
<div v-if="isShowmember" ref="edit" class="edit" @click="isHide($event)">
<div class="bottom" ref='bottom'>
<p class="pleasechoose">請選擇套件</p>
<div @click="blue(index)" :class='index==selected?"blue":""' class="box" v-for="(item,index) in boxList" :key="index">
<p class="title">{{item.title}}</p>
<p class="details">{{item.details}}</p>
<img v-if="index==selected" src="../assets/images/xz.svg" alt="">
</div>
</div>
</div>
<!-- 服務(wù)門店 -->
<div class="row row_box" @click="choosedoor">
<span>請選擇服務(wù)門店</span>
<img src="../assets/images/more@2x.png" alt="">
</div>
<div v-if="isShowdoor" ref="edit" class="edit" @click="isHide2($event)">
<div class="bottom" ref='bottom2'>
<p class="pleasechoose">請選擇門店</p>
<div class="bottom_secttion">
<div class="part" :key="index" v-for="(item,index) in doors" @click="door(index)">
<span class="doorname">{{item.name}}</span>
<div class="distance">
<span>{{item.distance}}</span>
<img v-if="index==selected2" src="../assets/images/xz.svg" alt="">
<p v-else class="gray"></p>
</div>
</div>
</div>
</div>
</div>
<div class="row row_box">
<span>請選擇服務(wù)時間</span>
<img src="../assets/images/more@2x.png" alt="">
</div>
<input @click="gotoPersonal" class="btn" type="button" value="提交預(yù)約">
</div>
</template>
<script>
export default {
data(){
return{
isShowmember:false,
isShowdoor:false,
selected:0,
selected2:0,
isBlue:true,
boxList:[
{
title:'基礎(chǔ)版',
details:'E100基礎(chǔ)版改裝件 1 套'
},
{
title:'精英版',
details:'E100基礎(chǔ)版改裝件 1 套'
},
{
title:'豪華版',
details:'E100基礎(chǔ)版改裝件 1 套'
},
],
doors:[
{
name:'柳州改裝服務(wù)門店-1',
distance:'2km'
},
{
name:'柳州改裝服務(wù)門店-2',
distance:'5km'
},
{
name:'柳州改裝服務(wù)門店-3',
distance:'8km'
},
{
name:'柳州改裝服務(wù)門店-4',
distance:'15km'
},
{
name:'柳州改裝服務(wù)門店-5',
distance:'25km'
},
]
}
},
mounted(){
// this.$refs.bg.style.height=window.innerHeight-document.querySelector('.bottom').clientHeight+'px'
},
methods:{
gotoPersonal(){
this.$router.push('/MinePersonal')
},
choosemember(){
this.isShowmember=true;
console.log(this.isShowmember);
},
choosedoor(){
this.isShowdoor=true;
console.log(this.isShowdoor);
},
blue(index){
this.selected=index;
},
door(index){
this.selected2=index;
},
isHide(ev){
if (!this.$refs.bottom.contains(ev.target)) {
this.isShowmember = false;
}
},
isHide2(ev){
if (!this.$refs.bottom2.contains(ev.target)) {
this.isShowdoor = false;
}
}
}
}
</script>
<style lang="scss" scoped>
.mineOrderserver-container{
padding:px2rem(48) px2rem(50);
background: rgba(255,255,255,0.90);
font-family: PingFangSC-Regular;
font-size: 14px;
img{
display: inline-block;
}
&>p{
font-family: PingFangSC-Semibold;
font-size: 24px;
color: #000000;
letter-spacing: 1.33px;
// margin: 0;
margin-bottom: px2rem(16);
}
input::-webkit-input-placeholder{
color: #B2B2B2;
}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
color: #B2B2B2;
}
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color: #B2B2B2;
}
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color: #B2B2B2;
}
input{
width: 100%;
border-radius: 2px;
height: px2rem(88);
line-height: px2rem(88);
}
.row{
border: 1px solid #E4E4E4;
margin-top: px2rem(36);
padding: 0 px2rem(30);
box-sizing: border-box;
height: px2rem(88);
line-height: px2rem(88);
}
.row_box{
display: flex;
justify-content: space-between;
padding: 0 px2rem(20) 0 px2rem(30);
color: #222222;
img{
width: px2rem(52);
height: px2rem(52);
margin-top: px2rem(18);
display: inline-block;
vertical-align: middle;
}
}
.edit{
background: rgba(0,0,0,0.40);
width: 100%;
height: 100%;
bottom: 0;
left: 0;
position: fixed;
z-index: 998;
.bottom{
z-index: 999;
position: fixed;
bottom: 0px;
width: 100%;
background: #FFFFFF;
height: px2rem(660);
overflow: scroll;
padding: px2rem(38) px2rem(40);
.pleasechoose{
font-family: PingFangSC-Medium;
font-size: 20px;
color: #000000;
letter-spacing: 1px;
height: px2rem(56);
}
.box{
padding: px2rem(30) px2rem(40) px2rem(32) px2rem(64);
background: #FBFBFB;
border: 1px solid #E4E4E4;
border-radius: 2px;
height: px2rem(160);
text-align: left;
margin-top: px2rem(16);
.title{
font-family: PingFangSC-Medium;
font-size: 16px;
color: #000000;
letter-spacing: 0;
height: px2rem(44);
}
.details{
color: #6A6A6A;
letter-spacing: 0.58px;
line-height: 14px;
height: px2rem(40);
margin-top: px2rem(14);
}
}
.blue{
border: 1px solid #0069DB;
position: relative;
img{
width: px2rem(40);
height: px2rem(40);
position: absolute;
right: -.5px;
top: 0;
}
}
}
}
.btn{
margin-top: px2rem(118);
background: #0069DB;
color: #FFFFFF;
}
//門店底部
.bottom_secttion{
margin-top: -10px;
}
.part{
overflow: hidden;
margin-top: px2rem(70);
padding: 0 px2rem(16) 0 px2rem(8);
.doorname{
color: #232323;
line-height: 15px;
}
.distance{
float: right;
span{
font-family: Helvetica;
color: #0069DB;
line-height: 15px;
margin-right: px2rem(54);
}
p{
display: inline-block;
width: px2rem(40);
height: px2rem(40);
border: 2px solid #E4E4E4;
border-radius: 2px;
}
img{
display: inline-block;
width: px2rem(40);
height: px2rem(40);
border-radius: 2px;
vertical-align: middle;
}
}
}
}
</style>
