From 1fa546e22f9b913868cdeb5a84f3fc3c4f500ffb Mon Sep 17 00:00:00 2001
From: jazz <jazzxhunter@163.com>
Date: 星期四, 21 十二月 2023 19:39:48 +0800
Subject: [PATCH] update_202312211937_增加卸麻通知和称谓显示
---
src/components/xio_room_status_chg/index.vue | 130 +++++++++++++++++++++++++++++++++++++++++-
1 files changed, 125 insertions(+), 5 deletions(-)
diff --git a/src/components/xio_room_status_chg/index.vue b/src/components/xio_room_status_chg/index.vue
index 1e9034d..3d06852 100644
--- a/src/components/xio_room_status_chg/index.vue
+++ b/src/components/xio_room_status_chg/index.vue
@@ -1,6 +1,48 @@
<template>
- <div class="mask">
- <div class="xio_room_status_chg_dialog"></div>
+ <div v-if="isShow" class="mask" @click="hideDialog">
+ <div class="xio_room_status_chg_dialog" @click.stop="noop">
+ <div class="title">鍒濆鍖栨埧闂寸姸鎬侊紙鐐瑰嚮涓嬫柟鎸夐挳鐩存帴鏇存敼鎴块棿鐘舵�侊級</div>
+ <div class="btn_box flex flex-center">
+ <div style="width: 100%;">
+ <div class="line flex flex-ver flex-sb">
+ <div class="btn_box_item flex flex-center white" @click="changeStatus('绌洪棽', 0)">
+ <div class="flex flex-ver">
+ <div class="icon">
+ <img class="img" src="static/imgs/free.png">
+ </div>
+ <div class="tx">绌洪棽</div>
+ </div>
+ </div>
+ <div class="btn_box_item flex flex-center blue" @click="changeStatus('浣跨敤涓�', 1)">
+ <div class="flex flex-ver">
+ <div class="icon">
+ <img class="img" src="static/imgs/using.png">
+ </div>
+ <div class="tx white">浣跨敤涓�</div>
+ </div>
+ </div>
+ </div>
+ <div class="line flex flex-ver flex-sb">
+ <div class="btn_box_item flex flex-center yellow" @click="changeStatus('瀹汉浼戞伅', 2)">
+ <div class="flex flex-ver">
+ <div class="icon">
+ <img class="img" src="static/imgs/rest.png">
+ </div>
+ <div class="tx">瀹汉浼戞伅</div>
+ </div>
+ </div>
+ <div class="btn_box_item flex flex-center gray" @click="changeStatus('閫氱煡鎵撴壂', 3)">
+ <div class="flex flex-ver">
+ <div class="icon">
+ <img class="img" src="static/imgs/clear.png">
+ </div>
+ <div class="tx">閫氱煡鎵撴壂</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</template>
@@ -19,13 +61,91 @@
}
},
methods: {
- toggleClick() {
- this.$emit('toggleClick')
+ noop() {
+ return
+ },
+ // 鏇存崲鐘舵��
+ changeStatus(tx, status) {
+ this.$emit('changeStatus', { statusTx: tx, status: status * 1 })
+ },
+ // 鏄剧ず寮圭獥
+ showDialog() {
+ this.isShow = true
+ },
+ // 鍏抽棴寮圭獥
+ hideDialog() {
+ this.isShow = false
}
}
}
</script>
<style scoped>
-
+.xio_room_status_chg_dialog {
+ width: 1105px;
+ min-height: 602px;
+ border-radius: 10px;
+ background-color: rgba(255,255,255,1);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ -webkit-transform: translate(-50%, -50%);
+ z-index: 1;
+}
+.xio_room_status_chg_dialog .title {
+ line-height: 37px;
+ color: rgba(16,16,16,1);
+ font-size: 26px;
+ text-align: left;
+ font-family: PingFangSC-medium;
+ padding: 37px 31px 16px 31px;
+}
+.xio_room_status_chg_dialog .btn_box {
+ padding: 0 193px;
+}
+.xio_room_status_chg_dialog .btn_box .line {
+ width: 100%;
+}
+.xio_room_status_chg_dialog .btn_box_item {
+ width: 250px;
+ height: 120px;
+ line-height: 20px;
+ border-radius: 10px;
+ text-align: center;
+ box-shadow: 0px 2px 6px 0px rgba(206,206,206,0.86);
+ margin-top: 76px;
+}
+.xio_room_status_chg_dialog .btn_box_item.white {
+ background-color: rgba(255,255,255,1);
+}
+.xio_room_status_chg_dialog .btn_box_item.blue {
+ background-color: rgba(46,77,124,1);
+}
+.xio_room_status_chg_dialog .btn_box_item.yellow {
+ background-color: rgba(255,199,115,1);
+}
+.xio_room_status_chg_dialog .btn_box_item.gray {
+ background-color: rgba(206,206,206,1);
+}
+.xio_room_status_chg_dialog .btn_box_item .icon {
+ width: 60px;
+ height: 60px;
+ display: block;
+ margin-right: 17px;
+}
+.xio_room_status_chg_dialog .btn_box_item .icon .img {
+ width: 100%;
+ height: 100%;
+}
+.xio_room_status_chg_dialog .btn_box_item .tx {
+ line-height: 37px;
+ color: rgba(51,51,51,1);
+ font-size: 26px;
+ text-align: center;
+ font-family: PingFangSC-medium;
+}
+.xio_room_status_chg_dialog .btn_box_item .tx.white {
+ color: #ffffff;
+}
</style>
--
Gitblit v1.8.0