jazz
2023-12-26 4b4920c2d811f4a8b4fdc6cad7b06454905fc29c
提交 | 用户 | 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>