div部分
<
div
class=
"pop-win"
>
<
div
id=
"fade"
class=
"black-overlay"
:class="{
nothing:disapper,
happen:show}"
>
</
div
>
<
div
id=
"MyDiv"
class=
"white-content"
:class="{
nothing:disapper,
happen:show}"
>
<
div
class=
"remind-info"
>
<
div
class=
"flase"
></
div
>
{{
message}}
</
div
>
<
div
class=
"response-option"
>
<
span
class=
"back-check-btn"
@click="
closeDiv"
>返回值机首页
</
span
>
<
span
class=
"back-home-btn"
@click="
closeDiv"
>返回联航首页
</
span
>
</
div
>
</
div
>
style部分
.black-overlay {
position:
absolute;
top:
0%;
left:
0%;
width:
100%;
height:
100%;
background-color:
#000000;
// z-index: 1001;
opacity:
0.4;
// filter: alpha(opacity=80);
}
.nothing{
display:
none;
}
.happen{
display:
block;
}
.white-content {
position:
absolute;
top:
5.3rem
/* 250/75 */;
margin-left:
.226667rem
/* 17/75 */;
width:
90%;
border-radius:
.266667rem
/* 20/75 */;
background-color:
#ffffff;
}
.remind-info{
text-align:
center;
font-size:
.266667rem
/* 20/75 */;
padding:
.266667rem
/* 20/75 */
0;
border-bottom:
.026667rem
solid
#8a8988;
}
.flase{
width:
.66667rem
/* 50/75 */;
height:
.666667rem
/* 50/75 */;
margin:
.066667rem
/* 5/75 */
0
.2rem
/* 15/75 */
43%;
background-color:
#EE4C3B;
border:
.013333rem
/* 1/75 */
solid
white;
border-radius:
100%;
outline:
.2rem
/* 15/75 */
solid
white;
outline-offset:
-.52rem
/* 39/75 */;
cursor:
pointer;
transform:
rotate(
45deg);
}
.response-option{
text-align:
center;
padding:
.266667rem
/* 20/75 */
.133333rem
/* 10/75 */;
}
.back-check-btn{
font-size:
.133333rem
/* 10/75 */;
border:
.013333rem
/* 1/75 */
solid
#EE4C3B;
border-radius:
.106667rem
/* 8/75 */;
color:
#EE4C3B;
padding:
.106667rem
/* 8/75 */
.133333rem
/* 10/75 */;
margin-right:
.533333rem
/* 40/75 */;
// float: left;
}
.back-home-btn{
font-size:
.133333rem
/* 10/75 */;
color:
#ffffff;
border-radius:
.106667rem
/* 8/75 */;
background-color:
#EE4C3B;
padding:
.106667rem
/* 8/75 */
.133333rem
/* 10/75 */;
// float: right;
}