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