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