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