提交 | 用户 | age
|
1fa546
|
1 |
<template> |
J |
2 |
<div v-if="isShow" class="mask" @click="hideDialog"> |
|
3 |
<div class="xio_room_status_chg_dialog" @click.stop="noop"> |
|
4 |
<div class="title">MIC通知卸麻!</div> |
|
5 |
<div class="btn_box flex flex-center"> |
|
6 |
<div class="btn_box_item flex flex-center" @click="confirm"> |
|
7 |
<div class="flex flex-ver"> |
|
8 |
<div class="tx">我已知晓</div> |
|
9 |
</div> |
|
10 |
</div> |
|
11 |
</div> |
|
12 |
</div> |
|
13 |
</div> |
|
14 |
</template> |
|
15 |
|
|
16 |
<script> |
|
17 |
export default { |
|
18 |
name: 'XioRoomStatusChg', |
|
19 |
props: { |
|
20 |
isActive: { |
|
21 |
type: Boolean, |
|
22 |
default: false |
|
23 |
} |
|
24 |
}, |
|
25 |
data() { |
|
26 |
return { |
|
27 |
isShow: false |
|
28 |
} |
|
29 |
}, |
|
30 |
methods: { |
|
31 |
noop() { |
|
32 |
return |
|
33 |
}, |
|
34 |
// 确认 |
|
35 |
confirm() { |
|
36 |
this.isShow = false |
|
37 |
this.$emit('confirm', { }) |
|
38 |
}, |
|
39 |
// 显示弹窗 |
|
40 |
showDialog() { |
|
41 |
this.isShow = true |
|
42 |
}, |
|
43 |
// 关闭弹窗 |
|
44 |
hideDialog() { |
|
45 |
this.isShow = false |
|
46 |
this.$emit('confirm', { }) |
|
47 |
} |
|
48 |
} |
|
49 |
} |
|
50 |
</script> |
|
51 |
|
|
52 |
<style scoped> |
|
53 |
.xio_room_status_chg_dialog { |
|
54 |
width: 1105px; |
|
55 |
min-height: 602px; |
|
56 |
/* border-radius: 10px; */ |
|
57 |
background-color: rgba(255,255,255,1); |
|
58 |
position: absolute; |
|
59 |
top: 50%; |
|
60 |
left: 50%; |
|
61 |
transform: translate(-50%, -50%); |
|
62 |
-webkit-transform: translate(-50%, -50%); |
|
63 |
z-index: 1; |
|
64 |
} |
|
65 |
.xio_room_status_chg_dialog .title { |
|
66 |
line-height: 112px; |
|
67 |
color: rgba(16,16,16,1); |
|
68 |
font-size: 80px; |
|
69 |
text-align: center; |
|
70 |
font-family: PingFangSC-medium; |
|
71 |
font-weight: bold; |
|
72 |
padding-top: 159px; |
|
73 |
} |
|
74 |
.xio_room_status_chg_dialog .btn_box { |
|
75 |
margin-top: 131px; |
|
76 |
} |
|
77 |
.xio_room_status_chg_dialog .btn_box .line { |
|
78 |
width: 100%; |
|
79 |
} |
|
80 |
.xio_room_status_chg_dialog .btn_box_item { |
|
81 |
width: 300px; |
|
82 |
height: 100px; |
|
83 |
line-height: 52px; |
|
84 |
border-radius: 4px; |
|
85 |
background-color: rgba(34,123,235,1); |
|
86 |
color: rgba(255,255,255,1); |
|
87 |
font-size: 36px; |
|
88 |
text-align: center; |
|
89 |
font-family: Microsoft Yahei; |
|
90 |
box-shadow: 0px 2px 6px 0px rgba(206,206,206,0.86); |
|
91 |
} |
|
92 |
/* .xio_room_status_chg_dialog .btn_box_item.white { |
|
93 |
background-color: rgba(255,255,255,1); |
|
94 |
} |
|
95 |
.xio_room_status_chg_dialog .btn_box_item.blue { |
|
96 |
background-color: rgba(46,77,124,1); |
|
97 |
} |
|
98 |
.xio_room_status_chg_dialog .btn_box_item.yellow { |
|
99 |
background-color: rgba(255,199,115,1); |
|
100 |
} |
|
101 |
.xio_room_status_chg_dialog .btn_box_item.gray { |
|
102 |
background-color: rgba(206,206,206,1); |
|
103 |
} */ |
|
104 |
.xio_room_status_chg_dialog .btn_box_item .icon { |
|
105 |
width: 60px; |
|
106 |
height: 60px; |
|
107 |
display: block; |
|
108 |
margin-right: 17px; |
|
109 |
} |
|
110 |
.xio_room_status_chg_dialog .btn_box_item .icon .img { |
|
111 |
width: 100%; |
|
112 |
height: 100%; |
|
113 |
} |
|
114 |
/* .xio_room_status_chg_dialog .btn_box_item .tx { |
|
115 |
line-height: 37px; |
|
116 |
color: rgba(51,51,51,1); |
|
117 |
font-size: 26px; |
|
118 |
text-align: center; |
|
119 |
font-family: PingFangSC-medium; |
|
120 |
} |
|
121 |
.xio_room_status_chg_dialog .btn_box_item .tx.white { |
|
122 |
color: #ffffff; |
|
123 |
} */ |
|
124 |
</style> |