治疗室屏幕web
查看 | 历史 | 提交 | 提交对比
jazz
2023-12-08 bf4dca5344dee1a84b75d9993f4dfc59de3f3ee9
提交 | 用户 | age
3ac5f2 1 <!--room-detail.vue-->
J 2 <template>
878885 3   <div class="page flex flex-col">
6da3c1 4     <div class="page_header flex flex-ver">
J 5       <div class="left flex flex-ver" @click="back">
878885 6         <div class="page_logo_1">
J 7           <img class="img" src="static/imgs/logo_1.png">
8         </div>
9         <div class="page_logo_2">
10           <img class="img" src="static/imgs/logo_2.png">
11         </div>
3ac5f2 12       </div>
J 13       <div class="right flex-1 flex flex-jcfe flex-ver">
bf4dca 14         <el-button type="primary" icon="el-icon-refresh" class="reset_btn flex flex-center" size="small" style="width: 100px;" @click="getData">刷新</el-button>
aeb317 15         <div class="reset_btn flex flex-center" @click="resetStatus">重置房间状态</div>
3ac5f2 16         <div class="page_date">
bb2b08 17           <div class="page_week">{{ timeObj.week }}</div>
J 18           <div class="page_day">{{ timeObj.date }}</div>
3ac5f2 19         </div>
bb2b08 20         <div class="page_time">{{ timeObj.timeMin }}</div>
J 21         <!-- <div class="page_time">{{ timeObj.time }}</div> -->
3ac5f2 22       </div>
J 23     </div>
bb2b08 24     <!-- 未有安排 -->
878885 25     <div v-if="!occupyInfoView && (!assignTreatList || !assignTreatList.length)" class="page_container flex flex-1">
bb2b08 26       <div class="main flex-1">
6da3c1 27         <div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
J 28         <div v-if="roomInfo" class="room_main_tip" style="margin-top: 93px;line-height: 186px;font-size: 140px;">-{{ statusTx[roomInfo.status] }}-</div>
bb2b08 29         <div class="btn_box flex flex-center">
J 30           <div class="flex flex-ver">
6da3c1 31             <div class="btn_box__item flex flex-center white" data-tx="空闲" data-status="0" @click="statusChg">
bb2b08 32               <div class="flex flex-ver">
878885 33                 <div class="icon">
J 34                   <img class="img" src="static/imgs/free.png">
35                 </div>
bb2b08 36                 <div class="tx">空闲</div>
J 37               </div>
38             </div>
6da3c1 39             <div class="btn_box__item flex flex-center blue" data-tx="使用中" data-status="1" @click="statusChg">
bb2b08 40               <div class="flex flex-ver">
878885 41                 <div class="icon">
J 42                   <img class="img" src="static/imgs/using.png">
43                 </div>
bb2b08 44                 <div class="tx white">使用中</div>
J 45               </div>
46             </div>
6da3c1 47             <div class="btn_box__item flex flex-center yellow" data-tx="客人休息" data-status="2" @click="statusChg">
bb2b08 48               <div class="flex flex-ver">
878885 49                 <div class="icon">
J 50                   <img class="img" src="static/imgs/rest.png">
51                 </div>
bb2b08 52                 <div class="tx">客人休息</div>
J 53               </div>
54             </div>
6da3c1 55             <div class="btn_box__item flex flex-center gray" data-tx="通知打扫" data-status="3" @click="statusChg">
bb2b08 56               <div class="flex flex-ver">
878885 57                 <div class="icon">
J 58                   <img class="img" src="static/imgs/clear.png">
59                 </div>
bb2b08 60                 <div class="tx">通知打扫</div>
J 61               </div>
62             </div>
63           </div>
64         </div>
65       </div>
66     </div>
6da3c1 67     <!-- 没有客人和有安排 -->
878885 68     <div v-if="!occupyInfoView && (assignTreatList && assignTreatList.length)" class="page_container flex flex-1">
bb2b08 69       <div class="main flex-1">
6da3c1 70         <div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
J 71         <div v-if="roomInfo" class="room_main_tip">-{{ statusTx[roomInfo.status] }}-</div>
72         <div v-if="roomInfo && roomInfo.status >= 1" class="room_left_btn_box flex flex-ver">
bf4dca 73           <div v-if="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center yellow btn_ani" @click="setStatus('客人休息', 2)">客人休息</div>
J 74           <div v-if="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center gray btn_ani" @click="setStatus('打扫中', 3)">通知打扫</div>
75           <div v-if="roomInfo.status == 2" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('打扫中', 3)">通知打扫</div>
76           <div v-if="roomInfo.status == 3" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('空闲', 0)">结束打扫</div>
bb2b08 77         </div>
J 78       </div>
79       <div class="right">
80         <div class="right_block flex flex-col">
81           <div class="guest_title flex flex-center">等待诊疗</div>
82           <div class="guest_block flex-1">
bf4dca 83             <div v-if="assignTreatList && assignTreatList.length" class="guest_list">
6da3c1 84               <div v-for="(item, index) in assignTreatList" :key="index" class="guest_list__row flex flex-ver" @click="selectCustomer(item)">
cf3e3e 85                 <div class="guest_list__td">
J 86                   <div class="tx flex flex-ver">
87                     <div class="flex-1 flex-1-w1 ell">{{ item.userName }}</div>
bb2b08 88                   </div>
cf3e3e 89                   <div class="tx" style="font-size: 14px;line-height: 20px;">{{ item.ciq || '' }}</div>
bb2b08 90                 </div>
J 91                 <div class="guest_list__td flex flex-center">
6da3c1 92                   <span class="tx">{{ item.startTime?item.startTime+'开始':'' }}</span>
bb2b08 93                 </div>
J 94                 <div class="guest_list__td flex flex-center">
cf3e3e 95                   <span class="tx flex-1 flex-1-w1 ell">{{ item.aDoctorName?item.aDoctorName+'(医生)、':'' }}{{ item.aNurseName?item.aNurseName+'(护士)':'' }}</span>
bb2b08 96                 </div>
J 97                 <div class="guest_list__td flex flex-center">
bf4dca 98                   <div class="tx">切换</div>
J 99                   <!-- <div class="icon">
878885 100                     <img class="img" src="static/imgs/choose.png">
bf4dca 101                   </div> -->
bb2b08 102                 </div>
J 103               </div>
bf4dca 104             </div>
J 105             <div v-if="!assignTreatList || !assignTreatList.length" class="guest_list">
106               <div class="guest_list__row flex flex-center rowtip">暂无数据</div>
bb2b08 107             </div>
J 108           </div>
109         </div>
110       </div>
111     </div>
6da3c1 112     <!-- 客人和有安排 -->
bf4dca 113     <div v-if="occupyInfoView" class="page_container flex flex-1">
bb2b08 114       <div class="main flex-1">
6da3c1 115         <div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
bb2b08 116         <div class="room_content">
J 117           <div class="tip">诊疗安排</div>
cf3e3e 118           <!-- <div class="name">{{ occupyInfoView.userName }}</div> -->
J 119           <div class="name">
120             <el-popover
121               placement="top"
122               width="400"
123               popper-class="top_tx"
124               trigger="click"
125               :popper-options="{ removeOnDestroy: true }"
126             >
127               <div>{{ occupyInfoView.userName }}</div>
128               <div slot="reference" class="tx ell">{{ occupyInfoView.userName }}</div>
129             </el-popover>
130           </div>
6da3c1 131           <div v-if="occupyInfoView.ciq" class="ciq">({{ occupyInfoView.ciq }})</div>
J 132           <div v-if="occupyInfoView.startTime" class="time">安排治疗时间：{{ occupyInfoView.startTime }} 开始</div>
bb2b08 133         </div>
6da3c1 134         <div v-if="roomInfo" class="room_left_btn_box flex flex-ver" style="margin-top: 105px;">
J 135           <div v-if="roomInfo.status == 0" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('使用中', 1)">开始治疗</div>
bf4dca 136           <div v-if="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center yellow btn_ani" @click="setStatus('客人休息', 2)">客人休息</div>
J 137           <div v-if="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center gray btn_ani" @click="setStatus('打扫中', 3)">通知打扫</div>
138           <div v-if="roomInfo.status == 2" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('打扫中', 3)">通知打扫</div>
139           <div v-if="roomInfo.status == 3" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('空闲', 0)">结束打扫</div>
bb2b08 140         </div>
J 141       </div>
142       <div class="right flex flex-col">
143         <div class="room_info flex-1">
144           <div class="staff_box flex flex-ver flex-sb">
145             <div class="staff_box_item flex-1 flex flex-center">
146               <div>
147                 <div class="staff_box_item__title">分诊顾问</div>
6da3c1 148                 <div class="staff_box_item__name">{{ occupyInfoView.adviserName || '' }}</div>
bb2b08 149               </div>
J 150             </div>
151             <div class="staff_box_item flex-1 flex flex-center">
152               <div>
153                 <div class="staff_box_item__title">执行医生</div>
6da3c1 154                 <div class="staff_box_item__name">{{ occupyInfoView.aDoctorName || '' }}</div>
bb2b08 155               </div>
J 156             </div>
157             <div class="staff_box_item flex-1 flex flex-center">
158               <div>
159                 <div class="staff_box_item__title">执行护士</div>
6da3c1 160                 <div class="staff_box_item__name">{{ occupyInfoView.aNurseName || '' }}</div>
bb2b08 161               </div>
J 162             </div>
163           </div>
164           <div class="room_info_project">
165             <div class="room_info_project_block">
6da3c1 166               <div class="tx">{{ occupyInfoView.projectName || '' }}</div>
bb2b08 167             </div>
J 168           </div>
169         </div>
170         <div class="guest_box flex flex-col">
171           <div class="guest_title flex flex-center">等待诊疗</div>
172           <div class="guest_block flex-1">
bf4dca 173             <div v-if="assignTreatList && assignTreatList.length" class="guest_list">
6da3c1 174               <div v-for="(item, index) in assignTreatList" :key="index" class="guest_list__row flex flex-ver" @click="selectCustomer(item)">
cf3e3e 175                 <div class="guest_list__td">
J 176                   <div class="tx flex flex-ver">
177                     <div class="flex-1 flex-1-w1 ell">{{ item.userName }}</div>
bb2b08 178                   </div>
cf3e3e 179                   <div class="tx" style="font-size: 14px;line-height: 20px;">{{ item.ciq || '' }}</div>
bb2b08 180                 </div>
J 181                 <div class="guest_list__td flex flex-center">
6da3c1 182                   <span class="tx">{{ item.startTime?item.startTime+'开始':'' }}</span>
bb2b08 183                 </div>
J 184                 <div class="guest_list__td flex flex-center">
cf3e3e 185                   <span class="tx flex-1 flex-1-w1 ell">{{ item.aDoctorName?item.aDoctorName+'(医生)、':'' }}{{ item.aNurseName?item.aNurseName+'(护士)':'' }}</span>
bb2b08 186                 </div>
J 187                 <div class="guest_list__td flex flex-center">
bf4dca 188                   <div class="tx">切换</div>
J 189                   <!-- <div class="icon">
878885 190                     <img class="img" src="static/imgs/choose.png">
bf4dca 191                   </div> -->
bb2b08 192                 </div>
J 193               </div>
bf4dca 194             </div>
J 195             <div v-if="!assignTreatList || !assignTreatList.length" class="guest_list">
196               <div class="guest_list__row flex flex-center rowtip">暂无数据</div>
bb2b08 197             </div>
J 198           </div>
199         </div>
200       </div>
201     </div>
aeb317 202     <!-- 选择客人弹窗 -->
J 203     <XioCustomerSelect ref="XioCustomerSelect" @cancel="selectCustomerCancel" @submit="selectCustomerSubmit" />
204     <!-- 更改房间状态窗 -->
205     <XioRoomStatusChg ref="XioRoomStatusChg" @changeStatus="changeStatus" />
3ac5f2 206   </div>
J 207 </template>
208
209 <script>
6da3c1 210 // 空闲 0
J 211 // 使用中 1
212 // 客人休息 2
213 // 待打扫/通知打扫 3
3ac5f2 214 // import Login from '../utils/jun_login.js'
aeb317 215 // 选择客人弹窗
bb2b08 216 import XioCustomerSelect from '@/components/xio_customer_select'
aeb317 217 // 更改房间状态窗
J 218 import XioRoomStatusChg from '@/components/xio_room_status_chg'
6da3c1 219 import Req from '../../utils/jun_httpInstall' // http 请求
J 220 var isUseDefault = false // 是否已使用默认客人
878885 221 var isUseDefaultChg = 0// 已使用默认客人后房间是否有改变状态
3ac5f2 222 export default {
J 223   name: 'RoomDetail',
bb2b08 224   components: {
aeb317 225     XioCustomerSelect,
J 226     XioRoomStatusChg
bb2b08 227   },
3ac5f2 228   inject: ['noop'],
J 229   data() {
230     return {
6da3c1 231       id: this.$route.query.id || '',
J 232       roomInfo: {},
233       occupyInfo: '', // 当前占用人的信息
234       assignTreatList: [],
235       statusTx: ['空闲', '使用中', '客人休息', '打扫中'],
236       timeObj: {} // week：星期，date：年月日，timeMin：时分，time：时分秒，timeStamp：时间戳
3ac5f2 237     }
J 238   },
239   computed: {
6da3c1 240     occupyInfoView() {
bf4dca 241       // console.log('00000000000000000000000', this.occupyInfo, isUseDefault, isUseDefaultChg)
6da3c1 242       // 有占用
J 243       if (this.occupyInfo) {
244         return this.occupyInfo
245       // 没有占用
246       } else {
878885 247         // 还没使用默认客人值或者已使用默认客人值还没改变状态（适配轮询）
J 248         if ((!isUseDefault || (isUseDefault && isUseDefaultChg === 0)) && this.assignTreatList && this.assignTreatList.length) {
6da3c1 249           isUseDefault = true
J 250           return this.assignTreatList[0]
251         // 已使用过默认客人值
252         } else {
253           return ''
254         }
255       }
256     }
3ac5f2 257   },
bf4dca 258   activated() {
3ac5f2 259     console.log('roomDetail mounted')
bf4dca 260     this.id = this.$route.query.id || ''
3ac5f2 261     this.init()
J 262   },
bf4dca 263   mounted() {},
3ac5f2 264   destroyed() {
J 265
266   },
267   methods: {
268     init() {
bf4dca 269       // 进入页面先初始化常量标识
J 270       isUseDefault = false
271       isUseDefaultChg = 0
6da3c1 272       // 计时
bb2b08 273       this.countGetTime(this, 'timeObj', 'detail')
6da3c1 274       // 轮询getData，8秒一次
878885 275       this.pollingAjaxFn(this, 'getData', 'detail', 8000)
J 276       // this.getData()
6da3c1 277     },
J 278     // 获取房间详情
279     getData() {
280       var params = {}
281       // 房间id
282       if (this.id) {
283         params.shopRoomId = this.id
284       }
285       Req.http.post({
878885 286         url: 'guide/treat/screen/room/info',
6da3c1 287         data: params,
J 288         udData: { noLoading: true },
289         header: { 'Content-Type': 'application/json' },
290         mockData: {
291           code: 100,
292           msg: '',
878885 293           data: {
J 294             roomInfo: {
295               roomNo: 'xx',
296               status: 0 // 0空闲 1使用 2休息 3打扫
297             },
298             assignTreatList: [{
299               startTime: '2023-12-08 00:00:00'
300             }],
301             occupyInfo: null
302           }
6da3c1 303         }
J 304       }).then((res) => {
305         if (res && res.data) {
cf3e3e 306           // 治疗时间处理
J 307           if (res.data.assignTreatList && res.data.assignTreatList.length) {
308             res.data.assignTreatList.forEach((o) => {
309               var st = (o.startTime).split(' ')[1].split(':')
310               o.startTime = `${st[0]}:${st[1]}`
311             })
312           }
878885 313           // 已有占用的，更改已使用默认客人的状态
J 314           res.data.occupyInfo && (isUseDefaultChg = 1)
315           res.data.occupyInfo && (isUseDefault = 1)
cf3e3e 316           // 占用信息治疗时间处理
J 317           if (res.data.occupyInfo && res.data.occupyInfo.startTime) {
318             var ost = (res.data.occupyInfo.startTime).split(' ')[1].split(':')
319             res.data.occupyInfo.startTime = `${ost[0]}:${ost[1]}`
320           }
6da3c1 321           for (const key in res.data) {
J 322             this[key] = res.data[key]
323           }
324         }
325         // console.log('999999999999999999999999999', res)
326       })
aeb317 327     },
J 328     // 返回
329     back() {
cf3e3e 330       isUseDefault = false
878885 331       isUseDefaultChg = 0
6da3c1 332       // 关闭计时
aeb317 333       this.stopCountGetTime('detail')
6da3c1 334       // 关闭轮询
aeb317 335       this.stopPollingAjaxFn('detail')
6da3c1 336       // 返回
bf4dca 337       // console.log('111111111', this.$route.meta.isPush)
J 338       if (this.$route && this.$route.meta && this.$route.meta.isPush) {
339         this.$router.go(-1)
340       } else {
341         this.$router.push({
342           path: `/`
343         })
344       }
6da3c1 345     },
cf3e3e 346     // 未有安排直接状态变更
6da3c1 347     statusChg(e) {
J 348       var { tx, status } = e.currentTarget.dataset
349       var { occupyInfoView, roomInfo } = this
350       console.log(tx, status)
351       // if (roomInfo && status * 1 == roomInfo.status) {
352       //   return
353       // }
354       this.changeStatusFn(occupyInfoView, status, () => {
355         this.getData()
356       })
357     },
358     // 按流程设置房间状态
359     setStatus(tx, status) {
360       var { occupyInfoView, roomInfo } = this
361       console.log(tx, status)
362       this.changeStatusFn(occupyInfoView, status, () => {
363         // 刷新详情
364         this.getData()
365       })
366     },
cf3e3e 367     // 改变房间状态异步方法
6da3c1 368     changeStatusFn(item = {}, status, cb) {
J 369       var params = {}
cf3e3e 370       // 更改的状态
J 371       params.status = status * 1
6da3c1 372       // 房间id
J 373       if (this.id) {
374         params.shopRoomId = this.id
375       }
376       // 治疗记录id
377       if (item && item.id) {
cf3e3e 378         params.treatRecordId = item.id
6da3c1 379       }
J 380       Req.http.post({
878885 381         url: 'guide/treat/screen/room/status/update',
6da3c1 382         data: params,
J 383         header: { 'Content-Type': 'application/json' },
384         mockData: {
385           code: 100,
386           msg: '',
387           data: {}
388         }
389       }).then((res) => {
878885 390         // 在已有默认客人的情况下，改变状态更改标识（适配轮询）
J 391         if (isUseDefault) {
392           isUseDefaultChg = 1
393         }
6da3c1 394         // console.log('8888888888888888888888888888888888', res)
J 395         cb && cb()
396       })
aeb317 397     },
J 398     // 重置状态
399     resetStatus() {
400       // 打开弹窗
401       this.$refs['XioRoomStatusChg'].showDialog()
402     },
cf3e3e 403     // 更改房间状态（重置状态的更改方法）
aeb317 404     changeStatus(opt) {
6da3c1 405       var { occupyInfoView, roomInfo } = this
J 406       console.log(opt.statusTx, opt.status)
407       // if (roomInfo && opt.status * 1 == roomInfo.status) {
408       //   return
409       // }
410       this.changeStatusFn(occupyInfoView, opt.status, () => {
411         // 刷新详情
412         this.getData()
413         // 关闭弹窗
414         this.$refs['XioRoomStatusChg'].hideDialog()
415       })
aeb317 416     },
J 417     // 选择客户
418     selectCustomer(item = {}) {
419       // 打开弹窗
420       this.$refs['XioCustomerSelect'].showDialog()
6da3c1 421       // 组件客户数据处理
aeb317 422       this.$refs['XioCustomerSelect'].dataInit(item)
J 423     },
424     // 选择客户取消
425     selectCustomerCancel(opt) {
426       console.log('cancel', opt)
427       this.$refs['XioCustomerSelect'].hideDialog()
428     },
429     // 选择客户确定
430     selectCustomerSubmit(opt) {
431       console.log('submit', opt)
6da3c1 432       this.changeStatusFn(opt, 1, () => {
J 433         // 刷新详情
434         this.getData()
435         // 关闭弹窗
436         this.$refs['XioCustomerSelect'].hideDialog()
437       })
3ac5f2 438     }
J 439   }
440 }
441 </script>
cf3e3e 442
J 443 <style>
444 .el-popper.top_tx {
445   text-align: center;
446   font-size: 25px;
447 }
448 </style>
3ac5f2 449
J 450 <style scoped>
878885 451 .page{
J 452   overflow: auto;
453 }
bb2b08 454 .page_header .reset_btn {
J 455   width: 200px;
456   height: 60px;
457   line-height: 35px;
458   border-radius: 5px;
459   background-color: rgba(47,174,206,1);
460   color: rgba(255,255,255,1);
461   font-size: 24px;
462   text-align: center;
463   font-family: Microsoft Yahei;
6da3c1 464   cursor: pointer;
bf4dca 465   border: 0;
J 466   margin-left: 20px;
bb2b08 467 }
J 468 .page_container .main {
878885 469   /* height: 100%; */
bb2b08 470   border-radius: 10px;
J 471   background-color: rgba(255,255,255,1);
472   color: rgba(16,16,16,1);
473   font-size: 14px;
474   /* text-align: center; */
475   font-family: Roboto;
476 }
477 .page_container .main .room_title {
478   line-height: 50px;
479   color: rgba(255,255,255,1);
480   font-size: 36px;
481   text-align: center;
482   font-family: PingFangSC-medium;
483   padding: 10px 0;
484   background-color: rgba(34,123,235,1);
485   width: 400px;
486   margin: 39px auto 0 auto;
487 }
488 .page_container .main .room_main_tip {
489   line-height: 168px;
490   font-size: 120px;
491   color: rgba(46,77,124,1);
492   text-align: center;
493   font-family: PingFangSC-medium;
494   margin-top: 107px;
495   /* font-weight: bold; */
496 }
497 .page_container .main .room_main_tip.gray {
498   color: rgba(154,154,154,1);
499 }
500 .page_container .main .btn_box {
501   margin-top: 130px;
502 }
503 .page_container .main .btn_box__item {
504   width: 250px;
505   height: 120px;
506   border-radius: 10px;
507   box-shadow: 0px 2px 6px 0px rgba(206,206,206,1);
508   margin-right: 70px;
6da3c1 509   cursor: pointer;
bb2b08 510 }
J 511 .page_container .main .btn_box__item:last-child {
512   margin-right: 0;
513 }
514 .page_container .main .btn_box__item.white {
515   background-color: rgba(255,255,255,1);
516 }
517 .page_container .main .btn_box__item.blue {
518   background-color: rgba(46,77,124,1);
519 }
520 .page_container .main .btn_box__item.yellow {
521   background-color: rgba(255,199,115,1);
522 }
523 .page_container .main .btn_box__item.gray {
524   background-color: rgba(206,206,206,1);
525 }
526 .page_container .main .btn_box__item .icon {
527   width: 60px;
528   height: 60px;
529   display: block;
530   margin-right: 17px;
878885 531 }
J 532 .page_container .main .btn_box__item .icon .img {
533   width: 100%;
534   height: 100%;
bb2b08 535 }
J 536 .page_container .main .btn_box__item .tx {
537   line-height: 37px;
538   color: rgba(51,51,51,1);
539   font-size: 26px;
540   text-align: center;
541   font-family: PingFangSC-medium;
542 }
543 .page_container .main .btn_box__item .tx.white {
544   color: rgba(255,255,255,1);
545 }
546 .page_container .main .room_left_btn_box {
547   padding: 0 23px;
548   margin-top: 163px;
549 }
550 .page_container .main .room_left_btn_box__item {
551   height: 150px;
552   line-height: 58px;
553   border-radius: 10px;
554   font-size: 40px;
555   text-align: center;
556   font-family: Microsoft Yahei;
557   margin-right: 20px;
558   font-weight: bold;
559 }
560 .page_container .main .room_left_btn_box__item:last-child {
561   margin-right: 0;
562 }
563 .page_container .main .room_left_btn_box__item.yellow {
564   color: rgba(255,255,255,1);
565   background-color: rgba(233,157,66,1);
566 }
567 .page_container .main .room_left_btn_box__item.gray {
568   background-color: rgba(206,206,206,1);
569   color: rgba(79,79,79,1);
570 }
571 .page_container .main .room_left_btn_box__item.green {
572   width: 500px;
573   height: 150px;
574   line-height: 73px;
575   border-radius: 10px;
576   background-color: rgba(47,174,206,1);
577   color: rgba(255,255,255,1);
578   font-size: 50px;
579   text-align: center;
580   margin: auto;
581 }
582 .page_container .main .room_content {
583   margin-top: 30px;
584 }
585 .page_container .main .room_content .tip {
586   line-height: 33px;
587   color: rgba(79,79,79,1);
588   font-size: 24px;
589   text-align: center;
590   font-family: PingFangSC-medium;
591 }
592 .page_container .main .room_content .name {
593   line-height: 168px;
594   color: rgba(51,51,51,1);
595   font-size: 120px;
596   text-align: center;
597   font-family: PingFangSC-medium;
598   margin-top: 13px;
599 }
cf3e3e 600 .page_container .main .room_content .name .tx {
J 601   max-width: 666px;
602   margin: auto;
603 }
bb2b08 604 .page_container .main .room_content .ciq {
J 605   line-height: 42px;
606   color: rgba(51,51,51,1);
607   font-size: 30px;
608   text-align: center;
609   font-family: PingFangSC-regular;
610   margin-top: -5px;
611 }
612 .page_container .main .room_content .time {
613   line-height: 42px;
614   color: rgba(0,0,0,1);
615   font-size: 30px;
616   text-align: center;
617   font-family: PingFangSC-medium;
618   font-weight: bold;
619   margin-top: 21px;
620 }
621 .page_container .right {
622   width: 686px;
623   margin-left: 30px;
878885 624   /* height: 100%; */
bb2b08 625 }
J 626 .page_container .right_block {
627   width: 100%;
628   height: 100%;
629 }
630 .page_container .right .guest_title {
631   height: 60px;
632   line-height: 28px;
633   border-radius: 10px 10px 0px 0px;
634   background-color: rgba(255,255,255,1);
635   color: rgba(34,123,235,1);
636   font-size: 20px;
637   text-align: center;
638   font-family: Roboto;
639   font-weight: bold;
640 }
641 .page_container .right .guest_block {
cf3e3e 642   background-color: #fff;
bb2b08 643   overflow: auto;
J 644 }
645 .page_container .right .guest_list {
646   background-color: #fff;
647   padding-bottom: 23px;
648 }
649 .page_container .right .guest_list__row {
650   min-height: 75px;
651   background-color: rgba(34,123,235,0.1);
652 }
653 .page_container .right .guest_list__row:nth-child(2n) {
654   background-color: #fff;
655 }
bf4dca 656 .page_container .right .guest_list__row.rowtip {
J 657   background-color: #fff;
658   line-height: 30px;
659   color: rgba(0,0,0,.5);
660   font-size: 22px;
661 }
bb2b08 662 .page_container .right .guest_list__td {}
J 663 .page_container .right .guest_list__td .tx {
664   line-height: 30px;
665   color: rgba(16,16,16,1);
666   font-size: 22px;
667   text-align: center;
668   font-family: PingFangSC-regular;
cf3e3e 669   box-sizing: border-box;
J 670   padding: 0 5px;
bb2b08 671 }
J 672 .page_container .right .guest_list__td .icon {
673   width: 20px;
674   height: 20px;
675   display: block;
676 }
878885 677 .page_container .right .guest_list__td .icon .img {
J 678   width: 100%;
679   height: 100%;
680 }
bb2b08 681 .page_container .right .guest_list__td:nth-child(1) {
J 682   width: 19.54%;
683 }
684 .page_container .right .guest_list__td:nth-child(2) {
685   width: 21.86%;
686 }
687 .page_container .right .guest_list__td:nth-child(3) {
688   width: 46.06%;
689 }
690 .page_container .right .guest_list__td:nth-child(4) {
691   width: 12.54%;
692 }
693 .page_container .right .room_info {
694   width: 100%;
695   border-radius: 10px;
696   background-color: rgba(255,255,255,0.3);
697 }
698 .page_container .right .room_info .staff_box {
699   margin-top: 30px;
700 }
701 .page_container .right .room_info .staff_box_item {
702   height: 180px;
703 }
704 .page_container .right .room_info .staff_box_item:nth-child(1) {
705   background-color: rgba(255,255,255,0.1);
706 }
707 .page_container .right .room_info .staff_box_item:nth-child(2) {
708   background-color: rgba(255,255,255,0.3);
709   margin: 0 10px;
710 }
711 .page_container .right .room_info .staff_box_item:nth-child(3) {
712   background-color: rgba(255,255,255,0.1);
713 }
714 .page_container .right .room_info .staff_box_item__title {
715   line-height: 28px;
716   color: rgba(255,255,255,1);
717   font-size: 20px;
718   text-align: center;
719   font-family: PingFangSC-regular;
720 }
721 .page_container .right .room_info .staff_box_item__name {
722   line-height: 56px;
723   color: rgba(255,255,255,1);
724   font-size: 40px;
725   text-align: center;
726   font-family: PingFangSC-medium;
727   margin-top: 5px;
728 }
729 .page_container .right .room_info .room_info_project {
730   padding: 36px 20px 20px 20px;
731   height: 138px;
732   box-sizing: border-box;
733   overflow: hidden;
734 }
735 .page_container .right .room_info .room_info_project_block {
736   box-sizing: border-box;
737   width: 100%;
738   height: 100%;
739   overflow: auto;
740 }
741 .page_container .right .room_info .room_info_project .tx {
742   line-height: 39px;
743   color: rgba(255,255,255,1);
744   font-size: 28px;
745   text-align: center;
746   font-family: PingFangSC-regular;
747 }
748 .page_container .right .guest_box {
749   margin-top: 65px;
750   width: 100%;
751   height: 345px;
752   background-color: #fff;
753   overflow: hidden;
754 }
755 </style>