From 878885c5872fe2fcd153a6571e75a27cb1025e97 Mon Sep 17 00:00:00 2001
From: jazz <jazzxhunter@163.com>
Date: 星期五, 08 十二月 2023 12:17:12 +0800
Subject: [PATCH] update_202312071736_项目-治疗室屏幕web-样式调整,适配ios浏览器v1

---
 src/pages/room/detail.vue |  702 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 687 insertions(+), 15 deletions(-)

diff --git a/src/pages/room/detail.vue b/src/pages/room/detail.vue
index 03022fe..244a76c 100644
--- a/src/pages/room/detail.vue
+++ b/src/pages/room/detail.vue
@@ -1,38 +1,249 @@
 <!--room-detail.vue-->
 <template>
-  <div class="page">
+  <div class="page flex flex-col">
     <div class="page_header flex flex-ver">
-      <div class="left flex flex-ver">
-        <img class="page_logo_1" src="../../assets/img/logo_1.png">
-        <img class="page_logo_2" src="../../assets/img/logo_2.png">
+      <div class="left flex flex-ver" @click="back">
+        <div class="page_logo_1">
+          <img class="img" src="static/imgs/logo_1.png">
+        </div>
+        <div class="page_logo_2">
+          <img class="img" src="static/imgs/logo_2.png">
+        </div>
       </div>
       <div class="right flex-1 flex flex-jcfe flex-ver">
+        <div class="reset_btn flex flex-center" @click="resetStatus">閲嶇疆鎴块棿鐘舵��</div>
         <div class="page_date">
-          <div class="page_week">{{timeObj.week}}</div>
-          <div class="page_day">{{timeObj.date}}</div>
+          <div class="page_week">{{ timeObj.week }}</div>
+          <div class="page_day">{{ timeObj.date }}</div>
         </div>
-        <div class="page_time">{{timeObj.timeMin}}</div>
-        <!-- <div class="page_time">{{timeObj.time}}</div> -->
+        <div class="page_time">{{ timeObj.timeMin }}</div>
+        <!-- <div class="page_time">{{ timeObj.time }}</div> -->
       </div>
     </div>
-    <div>123</div>
+    <!-- 鏈湁瀹夋帓 -->
+    <div v-if="!occupyInfoView && (!assignTreatList || !assignTreatList.length)" class="page_container flex flex-1">
+      <div class="main flex-1">
+        <div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
+        <div v-if="roomInfo" class="room_main_tip" style="margin-top: 93px;line-height: 186px;font-size: 140px;">-{{ statusTx[roomInfo.status] }}-</div>
+        <div class="btn_box flex flex-center">
+          <div class="flex flex-ver">
+            <div class="btn_box__item flex flex-center white" data-tx="绌洪棽" data-status="0" @click="statusChg">
+              <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" data-tx="浣跨敤涓�" data-status="1" @click="statusChg">
+              <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 class="btn_box__item flex flex-center yellow" data-tx="瀹汉浼戞伅" data-status="2" @click="statusChg">
+              <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" data-tx="閫氱煡鎵撴壂" data-status="3" @click="statusChg">
+              <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 v-if="!occupyInfoView && (assignTreatList && assignTreatList.length)" class="page_container flex flex-1">
+      <div class="main flex-1">
+        <div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
+        <div v-if="roomInfo" class="room_main_tip">-{{ statusTx[roomInfo.status] }}-</div>
+        <div v-if="roomInfo && roomInfo.status >= 1" class="room_left_btn_box flex flex-ver">
+          <div v-if="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center yellow" @click="setStatus('瀹汉浼戞伅', 2)">瀹汉浼戞伅</div>
+          <div v-if="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center gray" @click="setStatus('鎵撴壂涓�', 3)">閫氱煡鎵撴壂</div>
+          <div v-if="roomInfo.status == 2" class="room_left_btn_box__item flex flex-center green" @click="setStatus('鎵撴壂涓�', 3)">閫氱煡鎵撴壂</div>
+          <div v-if="roomInfo.status == 3" class="room_left_btn_box__item flex flex-center green" @click="setStatus('绌洪棽', 0)">缁撴潫鎵撴壂</div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="right_block flex flex-col">
+          <div class="guest_title flex flex-center">绛夊緟璇婄枟</div>
+          <div class="guest_block flex-1">
+            <div class="guest_list">
+              <div v-for="(item, index) in assignTreatList" :key="index" class="guest_list__row flex flex-ver" @click="selectCustomer(item)">
+                <div class="guest_list__td">
+                  <div class="tx flex flex-ver">
+                    <div class="flex-1 flex-1-w1 ell">{{ item.userName }}</div>
+                  </div>
+                  <div class="tx" style="font-size: 14px;line-height: 20px;">{{ item.ciq || '' }}</div>
+                </div>
+                <div class="guest_list__td flex flex-center">
+                  <span class="tx">{{ item.startTime?item.startTime+'寮�濮�':'' }}</span>
+                </div>
+                <div class="guest_list__td flex flex-center">
+                  <span class="tx flex-1 flex-1-w1 ell">{{ item.aDoctorName?item.aDoctorName+'(鍖荤敓)銆�':'' }}{{ item.aNurseName?item.aNurseName+'(鎶ゅ+)':'' }}</span>
+                </div>
+                <div class="guest_list__td flex flex-center">
+                  <div class="icon">
+                    <img class="img" src="static/imgs/choose.png">
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 瀹汉鍜屾湁瀹夋帓 -->
+    <div v-if="occupyInfoView && (assignTreatList && assignTreatList.length)" class="page_container flex flex-1">
+      <div class="main flex-1">
+        <div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
+        <div class="room_content">
+          <div class="tip">璇婄枟瀹夋帓</div>
+          <!-- <div class="name">{{ occupyInfoView.userName }}</div> -->
+          <div class="name">
+            <el-popover
+              placement="top"
+              width="400"
+              popper-class="top_tx"
+              trigger="click"
+              :popper-options="{ removeOnDestroy: true }"
+            >
+              <div>{{ occupyInfoView.userName }}</div>
+              <div slot="reference" class="tx ell">{{ occupyInfoView.userName }}</div>
+            </el-popover>
+          </div>
+          <div v-if="occupyInfoView.ciq" class="ciq">({{ occupyInfoView.ciq }})</div>
+          <div v-if="occupyInfoView.startTime" class="time">瀹夋帓娌荤枟鏃堕棿锛歿{ occupyInfoView.startTime }} 寮�濮�</div>
+        </div>
+        <div v-if="roomInfo" class="room_left_btn_box flex flex-ver" style="margin-top: 105px;">
+          <div v-if="roomInfo.status == 0" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('浣跨敤涓�', 1)">寮�濮嬫不鐤�</div>
+          <div v-if="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center yellow" @click="setStatus('瀹汉浼戞伅', 2)">瀹汉浼戞伅</div>
+          <div v-if="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center gray" @click="setStatus('鎵撴壂涓�', 3)">閫氱煡鎵撴壂</div>
+          <div v-if="roomInfo.status == 2" class="room_left_btn_box__item flex flex-center green" @click="setStatus('鎵撴壂涓�', 3)">閫氱煡鎵撴壂</div>
+          <div v-if="roomInfo.status == 3" class="room_left_btn_box__item flex flex-center green" @click="setStatus('绌洪棽', 0)">缁撴潫鎵撴壂</div>
+        </div>
+      </div>
+      <div class="right flex flex-col">
+        <div class="room_info flex-1">
+          <div class="staff_box flex flex-ver flex-sb">
+            <div class="staff_box_item flex-1 flex flex-center">
+              <div>
+                <div class="staff_box_item__title">鍒嗚瘖椤鹃棶</div>
+                <div class="staff_box_item__name">{{ occupyInfoView.adviserName || '' }}</div>
+              </div>
+            </div>
+            <div class="staff_box_item flex-1 flex flex-center">
+              <div>
+                <div class="staff_box_item__title">鎵ц鍖荤敓</div>
+                <div class="staff_box_item__name">{{ occupyInfoView.aDoctorName || '' }}</div>
+              </div>
+            </div>
+            <div class="staff_box_item flex-1 flex flex-center">
+              <div>
+                <div class="staff_box_item__title">鎵ц鎶ゅ+</div>
+                <div class="staff_box_item__name">{{ occupyInfoView.aNurseName || '' }}</div>
+              </div>
+            </div>
+          </div>
+          <div class="room_info_project">
+            <div class="room_info_project_block">
+              <div class="tx">{{ occupyInfoView.projectName || '' }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="guest_box flex flex-col">
+          <div class="guest_title flex flex-center">绛夊緟璇婄枟</div>
+          <div class="guest_block flex-1">
+            <div class="guest_list">
+              <div v-for="(item, index) in assignTreatList" :key="index" class="guest_list__row flex flex-ver" @click="selectCustomer(item)">
+                <div class="guest_list__td">
+                  <div class="tx flex flex-ver">
+                    <div class="flex-1 flex-1-w1 ell">{{ item.userName }}</div>
+                  </div>
+                  <div class="tx" style="font-size: 14px;line-height: 20px;">{{ item.ciq || '' }}</div>
+                </div>
+                <div class="guest_list__td flex flex-center">
+                  <span class="tx">{{ item.startTime?item.startTime+'寮�濮�':'' }}</span>
+                </div>
+                <div class="guest_list__td flex flex-center">
+                  <span class="tx flex-1 flex-1-w1 ell">{{ item.aDoctorName?item.aDoctorName+'(鍖荤敓)銆�':'' }}{{ item.aNurseName?item.aNurseName+'(鎶ゅ+)':'' }}</span>
+                </div>
+                <div class="guest_list__td flex flex-center">
+                  <div class="icon">
+                    <img class="img" src="static/imgs/choose.png">
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 閫夋嫨瀹汉寮圭獥 -->
+    <XioCustomerSelect ref="XioCustomerSelect" @cancel="selectCustomerCancel" @submit="selectCustomerSubmit" />
+    <!-- 鏇存敼鎴块棿鐘舵�佺獥 -->
+    <XioRoomStatusChg ref="XioRoomStatusChg" @changeStatus="changeStatus" />
   </div>
 </template>
 
 <script>
+// 绌洪棽 0
+// 浣跨敤涓� 1
+// 瀹汉浼戞伅 2
+// 寰呮墦鎵�/閫氱煡鎵撴壂 3
 // import Login from '../utils/jun_login.js'
-
+// 閫夋嫨瀹汉寮圭獥
+import XioCustomerSelect from '@/components/xio_customer_select'
+// 鏇存敼鎴块棿鐘舵�佺獥
+import XioRoomStatusChg from '@/components/xio_room_status_chg'
+import Req from '../../utils/jun_httpInstall' // http 璇锋眰
+var isUseDefault = false // 鏄惁宸蹭娇鐢ㄩ粯璁ゅ浜�
+var isUseDefaultChg = 0// 宸蹭娇鐢ㄩ粯璁ゅ浜哄悗鎴块棿鏄惁鏈夋敼鍙樼姸鎬�
 export default {
   name: 'RoomDetail',
-  components: {},
+  components: {
+    XioCustomerSelect,
+    XioRoomStatusChg
+  },
   inject: ['noop'],
   data() {
     return {
-      timeObj: {}// week锛氭槦鏈燂紝date锛氬勾鏈堟棩锛宼imeMin锛氭椂鍒嗭紝time锛氭椂鍒嗙锛宼imeStamp锛氭椂闂存埑
+      id: this.$route.query.id || '',
+      roomInfo: {},
+      occupyInfo: '', // 褰撳墠鍗犵敤浜虹殑淇℃伅
+      assignTreatList: [],
+      statusTx: ['绌洪棽', '浣跨敤涓�', '瀹汉浼戞伅', '鎵撴壂涓�'],
+      timeObj: {} // week锛氭槦鏈燂紝date锛氬勾鏈堟棩锛宼imeMin锛氭椂鍒嗭紝time锛氭椂鍒嗙锛宼imeStamp锛氭椂闂存埑
     }
   },
   computed: {
-
+    occupyInfoView() {
+      // 鏈夊崰鐢�
+      if (this.occupyInfo) {
+        return this.occupyInfo
+      // 娌℃湁鍗犵敤
+      } else {
+        // 杩樻病浣跨敤榛樿瀹汉鍊兼垨鑰呭凡浣跨敤榛樿瀹汉鍊艰繕娌℃敼鍙樼姸鎬侊紙閫傞厤杞锛�
+        if ((!isUseDefault || (isUseDefault && isUseDefaultChg === 0)) && this.assignTreatList && this.assignTreatList.length) {
+          isUseDefault = true
+          return this.assignTreatList[0]
+        // 宸蹭娇鐢ㄨ繃榛樿瀹汉鍊�
+        } else {
+          return ''
+        }
+      }
+    }
   },
   mounted() {
     console.log('roomDetail mounted')
@@ -43,11 +254,472 @@
   },
   methods: {
     init() {
-      this.countGetTime(this, 'timeObj')
+      // 璁℃椂
+      this.countGetTime(this, 'timeObj', 'detail')
+      // 杞getData锛�8绉掍竴娆�
+      this.pollingAjaxFn(this, 'getData', 'detail', 8000)
+      // this.getData()
+    },
+    // 鑾峰彇鎴块棿璇︽儏
+    getData() {
+      var params = {}
+      // 鎴块棿id
+      if (this.id) {
+        params.shopRoomId = this.id
+      }
+      Req.http.post({
+        url: 'guide/treat/screen/room/info',
+        data: params,
+        udData: { noLoading: true },
+        header: { 'Content-Type': 'application/json' },
+        mockData: {
+          code: 100,
+          msg: '',
+          data: {
+            roomInfo: {
+              roomNo: 'xx',
+              status: 0 // 0绌洪棽 1浣跨敤 2浼戞伅 3鎵撴壂
+            },
+            assignTreatList: [{
+              startTime: '2023-12-08 00:00:00'
+            }],
+            occupyInfo: null
+          }
+        }
+      }).then((res) => {
+        if (res && res.data) {
+          // 娌荤枟鏃堕棿澶勭悊
+          if (res.data.assignTreatList && res.data.assignTreatList.length) {
+            res.data.assignTreatList.forEach((o) => {
+              var st = (o.startTime).split(' ')[1].split(':')
+              o.startTime = `${st[0]}:${st[1]}`
+            })
+          }
+          // 宸叉湁鍗犵敤鐨勶紝鏇存敼宸蹭娇鐢ㄩ粯璁ゅ浜虹殑鐘舵��
+          res.data.occupyInfo && (isUseDefaultChg = 1)
+          res.data.occupyInfo && (isUseDefault = 1)
+          // 鍗犵敤淇℃伅娌荤枟鏃堕棿澶勭悊
+          if (res.data.occupyInfo && res.data.occupyInfo.startTime) {
+            var ost = (res.data.occupyInfo.startTime).split(' ')[1].split(':')
+            res.data.occupyInfo.startTime = `${ost[0]}:${ost[1]}`
+          }
+          for (const key in res.data) {
+            this[key] = res.data[key]
+          }
+        }
+        // console.log('999999999999999999999999999', res)
+      })
+    },
+    // 杩斿洖
+    back() {
+      isUseDefault = false
+      isUseDefaultChg = 0
+      // 鍏抽棴璁℃椂
+      this.stopCountGetTime('detail')
+      // 鍏抽棴杞
+      this.stopPollingAjaxFn('detail')
+      // 杩斿洖
+      this.$router.go(-1)
+    },
+    // 鏈湁瀹夋帓鐩存帴鐘舵�佸彉鏇�
+    statusChg(e) {
+      var { tx, status } = e.currentTarget.dataset
+      var { occupyInfoView, roomInfo } = this
+      console.log(tx, status)
+      // if (roomInfo && status * 1 == roomInfo.status) {
+      //   return
+      // }
+      this.changeStatusFn(occupyInfoView, status, () => {
+        this.getData()
+      })
+    },
+    // 鎸夋祦绋嬭缃埧闂寸姸鎬�
+    setStatus(tx, status) {
+      var { occupyInfoView, roomInfo } = this
+      console.log(tx, status)
+      this.changeStatusFn(occupyInfoView, status, () => {
+        // 鍒锋柊璇︽儏
+        this.getData()
+      })
+    },
+    // 鏀瑰彉鎴块棿鐘舵�佸紓姝ユ柟娉�
+    changeStatusFn(item = {}, status, cb) {
+      var params = {}
+      // 鏇存敼鐨勭姸鎬�
+      params.status = status * 1
+      // 鎴块棿id
+      if (this.id) {
+        params.shopRoomId = this.id
+      }
+      // 娌荤枟璁板綍id
+      if (item && item.id) {
+        params.treatRecordId = item.id
+      }
+      Req.http.post({
+        url: 'guide/treat/screen/room/status/update',
+        data: params,
+        header: { 'Content-Type': 'application/json' },
+        mockData: {
+          code: 100,
+          msg: '',
+          data: {}
+        }
+      }).then((res) => {
+        // 鍦ㄥ凡鏈夐粯璁ゅ浜虹殑鎯呭喌涓嬶紝鏀瑰彉鐘舵�佹洿鏀规爣璇嗭紙閫傞厤杞锛�
+        if (isUseDefault) {
+          isUseDefaultChg = 1
+        }
+        // console.log('8888888888888888888888888888888888', res)
+        cb && cb()
+      })
+    },
+    // 閲嶇疆鐘舵��
+    resetStatus() {
+      // 鎵撳紑寮圭獥
+      this.$refs['XioRoomStatusChg'].showDialog()
+    },
+    // 鏇存敼鎴块棿鐘舵�侊紙閲嶇疆鐘舵�佺殑鏇存敼鏂规硶锛�
+    changeStatus(opt) {
+      var { occupyInfoView, roomInfo } = this
+      console.log(opt.statusTx, opt.status)
+      // if (roomInfo && opt.status * 1 == roomInfo.status) {
+      //   return
+      // }
+      this.changeStatusFn(occupyInfoView, opt.status, () => {
+        // 鍒锋柊璇︽儏
+        this.getData()
+        // 鍏抽棴寮圭獥
+        this.$refs['XioRoomStatusChg'].hideDialog()
+      })
+    },
+    // 閫夋嫨瀹㈡埛
+    selectCustomer(item = {}) {
+      // 鎵撳紑寮圭獥
+      this.$refs['XioCustomerSelect'].showDialog()
+      // 缁勪欢瀹㈡埛鏁版嵁澶勭悊
+      this.$refs['XioCustomerSelect'].dataInit(item)
+    },
+    // 閫夋嫨瀹㈡埛鍙栨秷
+    selectCustomerCancel(opt) {
+      console.log('cancel', opt)
+      this.$refs['XioCustomerSelect'].hideDialog()
+    },
+    // 閫夋嫨瀹㈡埛纭畾
+    selectCustomerSubmit(opt) {
+      console.log('submit', opt)
+      this.changeStatusFn(opt, 1, () => {
+        // 鍒锋柊璇︽儏
+        this.getData()
+        // 鍏抽棴寮圭獥
+        this.$refs['XioCustomerSelect'].hideDialog()
+      })
     }
   }
 }
 </script>
 
+<style>
+.el-popper.top_tx {
+  text-align: center;
+  font-size: 25px;
+}
+</style>
+
 <style scoped>
-</style>
\ No newline at end of file
+.page{
+  overflow: auto;
+}
+.page_header .reset_btn {
+  width: 200px;
+  height: 60px;
+  line-height: 35px;
+  border-radius: 5px;
+  background-color: rgba(47,174,206,1);
+  color: rgba(255,255,255,1);
+  font-size: 24px;
+  text-align: center;
+  font-family: Microsoft Yahei;
+  cursor: pointer;
+}
+.page_container .main {
+  /* height: 100%; */
+  border-radius: 10px;
+  background-color: rgba(255,255,255,1);
+  color: rgba(16,16,16,1);
+  font-size: 14px;
+  /* text-align: center; */
+  font-family: Roboto;
+}
+.page_container .main .room_title {
+  line-height: 50px;
+  color: rgba(255,255,255,1);
+  font-size: 36px;
+  text-align: center;
+  font-family: PingFangSC-medium;
+  padding: 10px 0;
+  background-color: rgba(34,123,235,1);
+  width: 400px;
+  margin: 39px auto 0 auto;
+}
+.page_container .main .room_main_tip {
+  line-height: 168px;
+  font-size: 120px;
+  color: rgba(46,77,124,1);
+  text-align: center;
+  font-family: PingFangSC-medium;
+  margin-top: 107px;
+  /* font-weight: bold; */
+}
+.page_container .main .room_main_tip.gray {
+  color: rgba(154,154,154,1);
+}
+.page_container .main .btn_box {
+  margin-top: 130px;
+}
+.page_container .main .btn_box__item {
+  width: 250px;
+  height: 120px;
+  border-radius: 10px;
+  box-shadow: 0px 2px 6px 0px rgba(206,206,206,1);
+  margin-right: 70px;
+  cursor: pointer;
+}
+.page_container .main .btn_box__item:last-child {
+  margin-right: 0;
+}
+.page_container .main .btn_box__item.white {
+  background-color: rgba(255,255,255,1);
+}
+.page_container .main .btn_box__item.blue {
+  background-color: rgba(46,77,124,1);
+}
+.page_container .main .btn_box__item.yellow {
+  background-color: rgba(255,199,115,1);
+}
+.page_container .main .btn_box__item.gray {
+  background-color: rgba(206,206,206,1);
+}
+.page_container .main .btn_box__item .icon {
+  width: 60px;
+  height: 60px;
+  display: block;
+  margin-right: 17px;
+}
+.page_container .main .btn_box__item .icon .img {
+  width: 100%;
+  height: 100%;
+}
+.page_container .main .btn_box__item .tx {
+  line-height: 37px;
+  color: rgba(51,51,51,1);
+  font-size: 26px;
+  text-align: center;
+  font-family: PingFangSC-medium;
+}
+.page_container .main .btn_box__item .tx.white {
+  color: rgba(255,255,255,1);
+}
+.page_container .main .room_left_btn_box {
+  padding: 0 23px;
+  margin-top: 163px;
+}
+.page_container .main .room_left_btn_box__item {
+  height: 150px;
+  line-height: 58px;
+  border-radius: 10px;
+  font-size: 40px;
+  text-align: center;
+  font-family: Microsoft Yahei;
+  margin-right: 20px;
+  font-weight: bold;
+}
+.page_container .main .room_left_btn_box__item:last-child {
+  margin-right: 0;
+}
+.page_container .main .room_left_btn_box__item.yellow {
+  color: rgba(255,255,255,1);
+  background-color: rgba(233,157,66,1);
+}
+.page_container .main .room_left_btn_box__item.gray {
+  background-color: rgba(206,206,206,1);
+  color: rgba(79,79,79,1);
+}
+.page_container .main .room_left_btn_box__item.green {
+  width: 500px;
+  height: 150px;
+  line-height: 73px;
+  border-radius: 10px;
+  background-color: rgba(47,174,206,1);
+  color: rgba(255,255,255,1);
+  font-size: 50px;
+  text-align: center;
+  margin: auto;
+}
+.page_container .main .room_content {
+  margin-top: 30px;
+}
+.page_container .main .room_content .tip {
+  line-height: 33px;
+  color: rgba(79,79,79,1);
+  font-size: 24px;
+  text-align: center;
+  font-family: PingFangSC-medium;
+}
+.page_container .main .room_content .name {
+  line-height: 168px;
+  color: rgba(51,51,51,1);
+  font-size: 120px;
+  text-align: center;
+  font-family: PingFangSC-medium;
+  margin-top: 13px;
+}
+.page_container .main .room_content .name .tx {
+  max-width: 666px;
+  margin: auto;
+}
+.page_container .main .room_content .ciq {
+  line-height: 42px;
+  color: rgba(51,51,51,1);
+  font-size: 30px;
+  text-align: center;
+  font-family: PingFangSC-regular;
+  margin-top: -5px;
+}
+.page_container .main .room_content .time {
+  line-height: 42px;
+  color: rgba(0,0,0,1);
+  font-size: 30px;
+  text-align: center;
+  font-family: PingFangSC-medium;
+  font-weight: bold;
+  margin-top: 21px;
+}
+.page_container .right {
+  width: 686px;
+  margin-left: 30px;
+  /* height: 100%; */
+}
+.page_container .right_block {
+  width: 100%;
+  height: 100%;
+}
+.page_container .right .guest_title {
+  height: 60px;
+  line-height: 28px;
+  border-radius: 10px 10px 0px 0px;
+  background-color: rgba(255,255,255,1);
+  color: rgba(34,123,235,1);
+  font-size: 20px;
+  text-align: center;
+  font-family: Roboto;
+  font-weight: bold;
+}
+.page_container .right .guest_block {
+  background-color: #fff;
+  overflow: auto;
+}
+.page_container .right .guest_list {
+  background-color: #fff;
+  padding-bottom: 23px;
+}
+.page_container .right .guest_list__row {
+  min-height: 75px;
+  background-color: rgba(34,123,235,0.1);
+}
+.page_container .right .guest_list__row:nth-child(2n) {
+  background-color: #fff;
+}
+.page_container .right .guest_list__td {}
+.page_container .right .guest_list__td .tx {
+  line-height: 30px;
+  color: rgba(16,16,16,1);
+  font-size: 22px;
+  text-align: center;
+  font-family: PingFangSC-regular;
+  box-sizing: border-box;
+  padding: 0 5px;
+}
+.page_container .right .guest_list__td .icon {
+  width: 20px;
+  height: 20px;
+  display: block;
+}
+.page_container .right .guest_list__td .icon .img {
+  width: 100%;
+  height: 100%;
+}
+.page_container .right .guest_list__td:nth-child(1) {
+  width: 19.54%;
+}
+.page_container .right .guest_list__td:nth-child(2) {
+  width: 21.86%;
+}
+.page_container .right .guest_list__td:nth-child(3) {
+  width: 46.06%;
+}
+.page_container .right .guest_list__td:nth-child(4) {
+  width: 12.54%;
+}
+.page_container .right .room_info {
+  width: 100%;
+  border-radius: 10px;
+  background-color: rgba(255,255,255,0.3);
+}
+.page_container .right .room_info .staff_box {
+  margin-top: 30px;
+}
+.page_container .right .room_info .staff_box_item {
+  height: 180px;
+}
+.page_container .right .room_info .staff_box_item:nth-child(1) {
+  background-color: rgba(255,255,255,0.1);
+}
+.page_container .right .room_info .staff_box_item:nth-child(2) {
+  background-color: rgba(255,255,255,0.3);
+  margin: 0 10px;
+}
+.page_container .right .room_info .staff_box_item:nth-child(3) {
+  background-color: rgba(255,255,255,0.1);
+}
+.page_container .right .room_info .staff_box_item__title {
+  line-height: 28px;
+  color: rgba(255,255,255,1);
+  font-size: 20px;
+  text-align: center;
+  font-family: PingFangSC-regular;
+}
+.page_container .right .room_info .staff_box_item__name {
+  line-height: 56px;
+  color: rgba(255,255,255,1);
+  font-size: 40px;
+  text-align: center;
+  font-family: PingFangSC-medium;
+  margin-top: 5px;
+}
+.page_container .right .room_info .room_info_project {
+  padding: 36px 20px 20px 20px;
+  height: 138px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.page_container .right .room_info .room_info_project_block {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.page_container .right .room_info .room_info_project .tx {
+  line-height: 39px;
+  color: rgba(255,255,255,1);
+  font-size: 28px;
+  text-align: center;
+  font-family: PingFangSC-regular;
+}
+.page_container .right .guest_box {
+  margin-top: 65px;
+  width: 100%;
+  height: 345px;
+  background-color: #fff;
+  overflow: hidden;
+}
+</style>

--
Gitblit v1.8.0