治疗室屏幕web
查看 | 历史 | 提交 | 提交对比
jazz
2023-12-05 aeb317703c9c82edb7c4c7ecc5985eef62864c7c
提交 | 用户 | age
bb2b08 1 <template>
aeb317 2   <div v-if="isShow" class="mask" @click="hideDialog">
J 3     <div class="xio_room_status_chg_dialog" @click.stop="noop">
4       <div class="title">初始化房间状态（点击下方按钮直接更改房间状态）</div>
5       <div class="btn_box flex flex-center">
6         <div style="width: 100%;">
7           <div class="line flex flex-ver flex-sb">
8             <div class="btn_box_item flex flex-center white" @click="changeStatus('空闲')">
9               <div class="flex flex-ver">
10                 <img class="icon" src="../../assets/img/free.png">
11                 <div class="tx">空闲</div>
12               </div>
13             </div>
14             <div class="btn_box_item flex flex-center blue" @click="changeStatus('使用中')">
15               <div class="flex flex-ver">
16                 <img class="icon" src="../../assets/img/using.png">
17                 <div class="tx white">使用中</div>
18               </div>
19             </div>
20           </div>
21           <div class="line flex flex-ver flex-sb">
22             <div class="btn_box_item flex flex-center yellow" @click="changeStatus('客人休息')">
23               <div class="flex flex-ver">
24                 <img class="icon" src="../../assets/img/rest.png">
25                 <div class="tx">客人休息</div>
26               </div>
27             </div>
28             <div class="btn_box_item flex flex-center gray" @click="changeStatus('通知打扫')">
29               <div class="flex flex-ver">
30                 <img class="icon" src="../../assets/img/clear.png">
31                 <div class="tx">通知打扫</div>
32               </div>
33             </div>
34           </div>
35         </div>
36       </div>
37     </div>
bb2b08 38   </div>
J 39 </template>
40
41 <script>
42 export default {
43   name: 'XioRoomStatusChg',
44   props: {
45     isActive: {
46       type: Boolean,
47       default: false
48     }
49   },
50   data() {
51     return {
52       isShow: false
53     }
54   },
55   methods: {
aeb317 56     noop() {
J 57       return
58     },
59     // 更换状态
60     changeStatus(tx) {
61       this.$emit('changeStatus', { statusTx: tx })
62     },
63     // 显示弹窗
64     showDialog() {
65       this.isShow = true
66     },
67     // 关闭弹窗
68     hideDialog() {
69       this.isShow = false
bb2b08 70     }
J 71   }
72 }
73 </script>
74
75 <style scoped>
aeb317 76 .xio_room_status_chg_dialog {
J 77   width: 1105px;
78   min-height: 602px;
79   border-radius: 10px;
80   background-color: rgba(255,255,255,1);
81   position: absolute;
82   top: 50%;
83   left: 50%;
84   transform: translate(-50%, -50%);
85   -webkit-transform: translate(-50%, -50%);
86   z-index: 1;
87 }
88 .xio_room_status_chg_dialog .title {
89   line-height: 37px;
90   color: rgba(16,16,16,1);
91   font-size: 26px;
92   text-align: left;
93   font-family: PingFangSC-medium;
94   padding: 37px 31px 16px 31px;
95 }
96 .xio_room_status_chg_dialog .btn_box {
97   padding: 0 193px;
98 }
99 .xio_room_status_chg_dialog .btn_box .line {
100   width: 100%;
101 }
102 .xio_room_status_chg_dialog .btn_box_item {
103   width: 250px;
104   height: 120px;
105   line-height: 20px;
106   border-radius: 10px;
107   text-align: center;
108   box-shadow: 0px 2px 6px 0px rgba(206,206,206,0.86);
109   margin-top: 76px;
110 }
111 .xio_room_status_chg_dialog .btn_box_item.white {
112   background-color: rgba(255,255,255,1);
113 }
114 .xio_room_status_chg_dialog .btn_box_item.blue {
115   background-color: rgba(46,77,124,1);
116 }
117 .xio_room_status_chg_dialog .btn_box_item.yellow {
118   background-color: rgba(255,199,115,1);
119 }
120 .xio_room_status_chg_dialog .btn_box_item.gray {
121   background-color: rgba(206,206,206,1);
122 }
123 .xio_room_status_chg_dialog .btn_box_item .icon {
124   width: 60px;
125   height: 60px;
126   display: block;
127   margin-right: 17px;
128 }
129 .xio_room_status_chg_dialog .btn_box_item .tx {
130   line-height: 37px;
131   color: rgba(51,51,51,1);
132   font-size: 26px;
133   text-align: center;
134   font-family: PingFangSC-medium;
135 }
136 .xio_room_status_chg_dialog .btn_box_item .tx.white {
137   color: #ffffff;
138 }
bb2b08 139 </style>