治疗室屏幕web
查看 | 历史 | 提交 | 提交对比
jazzzone
2023-12-09 d73f982f2b93c0f418dbd76d80745b0793b0d338
提交 | 用户 | 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     <!-- 未有安排 -->
34cb2b 25     <div v-if="!occupyInfoView && (!assignTreatListView || !assignTreatListView.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     <!-- 没有客人和有安排 -->
34cb2b 68     <div v-if="!occupyInfoView && (assignTreatListView && assignTreatListView.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>
34cb2b 82           <div class="guest_block flex-1" style="border-radius: 0 0 10px 10px;">
J 83             <div v-if="assignTreatListView && assignTreatListView.length" class="guest_list">
84               <div v-for="(item, index) in assignTreatListView" :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">
34cb2b 98                   <div v-if="!item.act" class="tx" style="text-decoration: underline;color: #227beb;">切换</div>
bf4dca 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>
34cb2b 105             <div v-if="!assignTreatListView || !assignTreatListView.length" class="guest_list">
bf4dca 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>
34cb2b 170         <div class="guest_box flex flex-col" style="border-radius: 10px;">
bb2b08 171           <div class="guest_title flex flex-center">等待诊疗</div>
J 172           <div class="guest_block flex-1">
34cb2b 173             <div v-if="assignTreatListView && assignTreatListView.length" class="guest_list">
J 174               <div v-for="(item, index) in assignTreatListView" :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">
34cb2b 188                   <div v-if="!item.act" class="tx" style="text-decoration: underline;color: #227beb;">切换</div>
bf4dca 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>
34cb2b 195             <div v-if="!assignTreatListView || !assignTreatListView.length" class="guest_list">
bf4dca 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: ['空闲', '使用中', '客人休息', '打扫中'],
34cb2b 236       timeObj: {}, // week：星期，date：年月日，timeMin：时分，time：时分秒，timeStamp：时间戳
J 237       curTreatId: ''
3ac5f2 238     }
J 239   },
240   computed: {
6da3c1 241     occupyInfoView() {
34cb2b 242       console.log('00000000000000000000000', this.occupyInfo, isUseDefault, isUseDefaultChg)
J 243       // 有当前选中的，根据需求修改增加选中不更改状态，由空闲开始
244       if (this.curTreatId) {
245         return this.gatCurTreatInfo()
6da3c1 246       } else {
34cb2b 247         // 有占用
J 248         if (this.occupyInfo) {
249           return this.occupyInfo
250         // 没有占用
6da3c1 251         } else {
34cb2b 252           // 还没使用默认客人值或者已使用默认客人值还没改变状态（适配轮询）
J 253           if ((!isUseDefault || (isUseDefault && isUseDefaultChg === 0)) && this.assignTreatList && this.assignTreatList.length) {
254             isUseDefault = true
255             return this.assignTreatList[0]
256           // 已使用过默认客人值
257           } else {
258             return ''
259           }
6da3c1 260         }
34cb2b 261       }
J 262     },
263     assignTreatListView() {
264       if (this.assignTreatList && this.assignTreatList.length) {
265         this.assignTreatList.forEach((o) => {
266           o.act = false
267           if (this.occupyInfoView && this.occupyInfoView.id === o.id) {
268             o.act = true
269           }
270         })
271         return this.assignTreatList
272       } else {
273         return []
6da3c1 274       }
J 275     }
3ac5f2 276   },
bf4dca 277   activated() {
3ac5f2 278     console.log('roomDetail mounted')
34cb2b 279     // 记录当前的治疗ID
J 280     var curTreatId = localStorage.getItem('curTreatId')
281     this.curTreatId = curTreatId || ''
bf4dca 282     this.id = this.$route.query.id || ''
3ac5f2 283     this.init()
J 284   },
bf4dca 285   mounted() {},
3ac5f2 286   destroyed() {
J 287
288   },
289   methods: {
290     init() {
bf4dca 291       // 进入页面先初始化常量标识
J 292       isUseDefault = false
293       isUseDefaultChg = 0
6da3c1 294       // 计时
bb2b08 295       this.countGetTime(this, 'timeObj', 'detail')
6da3c1 296       // 轮询getData，8秒一次
878885 297       this.pollingAjaxFn(this, 'getData', 'detail', 8000)
J 298       // this.getData()
34cb2b 299     },
J 300     // 获取当前治疗信息
301     gatCurTreatInfo() {
302       if (this.assignTreatList && this.assignTreatList.length) {
303         return this.assignTreatList.find((o) => {return o.id === this.curTreatId})
304       }
6da3c1 305     },
J 306     // 获取房间详情
307     getData() {
308       var params = {}
309       // 房间id
310       if (this.id) {
311         params.shopRoomId = this.id
312       }
313       Req.http.post({
878885 314         url: 'guide/treat/screen/room/info',
6da3c1 315         data: params,
J 316         udData: { noLoading: true },
317         header: { 'Content-Type': 'application/json' },
318         mockData: {
319           code: 100,
320           msg: '',
878885 321           data: {
J 322             roomInfo: {
323               roomNo: 'xx',
324               status: 0 // 0空闲 1使用 2休息 3打扫
325             },
326             assignTreatList: [{
327               startTime: '2023-12-08 00:00:00'
328             }],
329             occupyInfo: null
330           }
6da3c1 331         }
J 332       }).then((res) => {
333         if (res && res.data) {
cf3e3e 334           // 治疗时间处理
J 335           if (res.data.assignTreatList && res.data.assignTreatList.length) {
336             res.data.assignTreatList.forEach((o) => {
337               var st = (o.startTime).split(' ')[1].split(':')
338               o.startTime = `${st[0]}:${st[1]}`
339             })
340           }
878885 341           // 已有占用的，更改已使用默认客人的状态
J 342           res.data.occupyInfo && (isUseDefaultChg = 1)
343           res.data.occupyInfo && (isUseDefault = 1)
cf3e3e 344           // 占用信息治疗时间处理
J 345           if (res.data.occupyInfo && res.data.occupyInfo.startTime) {
346             var ost = (res.data.occupyInfo.startTime).split(' ')[1].split(':')
347             res.data.occupyInfo.startTime = `${ost[0]}:${ost[1]}`
348           }
6da3c1 349           for (const key in res.data) {
J 350             this[key] = res.data[key]
351           }
352         }
353         // console.log('999999999999999999999999999', res)
354       })
aeb317 355     },
J 356     // 返回
357     back() {
34cb2b 358       // 重置默认已使用客人的参数
cf3e3e 359       isUseDefault = false
878885 360       isUseDefaultChg = 0
6da3c1 361       // 关闭计时
aeb317 362       this.stopCountGetTime('detail')
6da3c1 363       // 关闭轮询
aeb317 364       this.stopPollingAjaxFn('detail')
6da3c1 365       // 返回
bf4dca 366       // console.log('111111111', this.$route.meta.isPush)
J 367       if (this.$route && this.$route.meta && this.$route.meta.isPush) {
368         this.$router.go(-1)
369       } else {
370         this.$router.push({
371           path: `/`
372         })
373       }
6da3c1 374     },
cf3e3e 375     // 未有安排直接状态变更
6da3c1 376     statusChg(e) {
J 377       var { tx, status } = e.currentTarget.dataset
378       var { occupyInfoView, roomInfo } = this
379       console.log(tx, status)
380       // if (roomInfo && status * 1 == roomInfo.status) {
381       //   return
382       // }
383       this.changeStatusFn(occupyInfoView, status, () => {
384         this.getData()
385       })
386     },
387     // 按流程设置房间状态
388     setStatus(tx, status) {
389       var { occupyInfoView, roomInfo } = this
390       console.log(tx, status)
391       this.changeStatusFn(occupyInfoView, status, () => {
392         // 刷新详情
393         this.getData()
394       })
395     },
cf3e3e 396     // 改变房间状态异步方法
6da3c1 397     changeStatusFn(item = {}, status, cb) {
J 398       var params = {}
cf3e3e 399       // 更改的状态
J 400       params.status = status * 1
6da3c1 401       // 房间id
J 402       if (this.id) {
403         params.shopRoomId = this.id
404       }
405       // 治疗记录id
406       if (item && item.id) {
cf3e3e 407         params.treatRecordId = item.id
6da3c1 408       }
J 409       Req.http.post({
878885 410         url: 'guide/treat/screen/room/status/update',
6da3c1 411         data: params,
J 412         header: { 'Content-Type': 'application/json' },
413         mockData: {
414           code: 100,
415           msg: '',
416           data: {}
417         }
418       }).then((res) => {
878885 419         // 在已有默认客人的情况下，改变状态更改标识（适配轮询）
J 420         if (isUseDefault) {
34cb2b 421           console.log('在已有默认客人的情况下，改变状态更改标识')
878885 422           isUseDefaultChg = 1
34cb2b 423         }
J 424         // 当前选中的用户房间更改了状态，已经成为占用时，清除选中医疗记录id
425         if (item && item.id && item.id === this.curTreatId) {
426           console.log('当前选中的用户房间更改了状态，已经成为占用时，清除选中医疗记录id')
427           localStorage.removeItem('curTreatId')
428           this.curTreatId = ''
429         }
d73f98 430         // 只要更改为空闲就重置参数
J 431         if (status === 0) {
432           console.log('更改为空闲')
34cb2b 433           // 重置默认已使用客人的参数
J 434           isUseDefault = false
435           isUseDefaultChg = 0
878885 436         }
6da3c1 437         // console.log('8888888888888888888888888888888888', res)
J 438         cb && cb()
439       })
aeb317 440     },
J 441     // 重置状态
442     resetStatus() {
443       // 打开弹窗
444       this.$refs['XioRoomStatusChg'].showDialog()
445     },
cf3e3e 446     // 更改房间状态（重置状态的更改方法）
aeb317 447     changeStatus(opt) {
6da3c1 448       var { occupyInfoView, roomInfo } = this
J 449       console.log(opt.statusTx, opt.status)
450       // if (roomInfo && opt.status * 1 == roomInfo.status) {
451       //   return
452       // }
34cb2b 453       // 清除选中医疗记录id
J 454       localStorage.removeItem('curTreatId')
455       this.curTreatId = ''
456       this.changeStatusFn({}, opt.status, () => {
6da3c1 457         // 刷新详情
J 458         this.getData()
459         // 关闭弹窗
460         this.$refs['XioRoomStatusChg'].hideDialog()
461       })
aeb317 462     },
J 463     // 选择客户
464     selectCustomer(item = {}) {
34cb2b 465       if (item.act) {
J 466         return
467       }
aeb317 468       // 打开弹窗
J 469       this.$refs['XioCustomerSelect'].showDialog()
6da3c1 470       // 组件客户数据处理
aeb317 471       this.$refs['XioCustomerSelect'].dataInit(item)
J 472     },
473     // 选择客户取消
474     selectCustomerCancel(opt) {
475       console.log('cancel', opt)
476       this.$refs['XioCustomerSelect'].hideDialog()
477     },
478     // 选择客户确定
479     selectCustomerSubmit(opt) {
480       console.log('submit', opt)
34cb2b 481       // 确定选择的用户，记录id
J 482       localStorage.setItem('curTreatId', opt.id)
483       this.curTreatId = opt.id
484       // 重置房间状态
485       if (this.roomInfo && this.roomInfo.status) {
486         this.changeStatusFn({}, 0, () => {
487           // 刷新详情
488           this.getData()
489         })
490       }
491       // 关闭弹窗
492       this.$refs['XioCustomerSelect'].hideDialog()
3ac5f2 493     }
J 494   }
495 }
496 </script>
cf3e3e 497
J 498 <style>
499 .el-popper.top_tx {
500   text-align: center;
501   font-size: 25px;
502 }
503 </style>
3ac5f2 504
J 505 <style scoped>
878885 506 .page{
J 507   overflow: auto;
508 }
bb2b08 509 .page_header .reset_btn {
J 510   width: 200px;
511   height: 60px;
512   line-height: 35px;
513   border-radius: 5px;
514   background-color: rgba(47,174,206,1);
515   color: rgba(255,255,255,1);
516   font-size: 24px;
517   text-align: center;
518   font-family: Microsoft Yahei;
6da3c1 519   cursor: pointer;
bf4dca 520   border: 0;
J 521   margin-left: 20px;
bb2b08 522 }
J 523 .page_container .main {
878885 524   /* height: 100%; */
bb2b08 525   border-radius: 10px;
J 526   background-color: rgba(255,255,255,1);
527   color: rgba(16,16,16,1);
528   font-size: 14px;
529   /* text-align: center; */
530   font-family: Roboto;
531 }
532 .page_container .main .room_title {
533   line-height: 50px;
534   color: rgba(255,255,255,1);
535   font-size: 36px;
536   text-align: center;
537   font-family: PingFangSC-medium;
538   padding: 10px 0;
539   background-color: rgba(34,123,235,1);
540   width: 400px;
541   margin: 39px auto 0 auto;
542 }
543 .page_container .main .room_main_tip {
544   line-height: 168px;
545   font-size: 120px;
546   color: rgba(46,77,124,1);
547   text-align: center;
548   font-family: PingFangSC-medium;
549   margin-top: 107px;
550   /* font-weight: bold; */
551 }
552 .page_container .main .room_main_tip.gray {
553   color: rgba(154,154,154,1);
554 }
555 .page_container .main .btn_box {
556   margin-top: 130px;
557 }
558 .page_container .main .btn_box__item {
559   width: 250px;
560   height: 120px;
561   border-radius: 10px;
562   box-shadow: 0px 2px 6px 0px rgba(206,206,206,1);
563   margin-right: 70px;
6da3c1 564   cursor: pointer;
bb2b08 565 }
J 566 .page_container .main .btn_box__item:last-child {
567   margin-right: 0;
568 }
569 .page_container .main .btn_box__item.white {
570   background-color: rgba(255,255,255,1);
571 }
572 .page_container .main .btn_box__item.blue {
573   background-color: rgba(46,77,124,1);
574 }
575 .page_container .main .btn_box__item.yellow {
576   background-color: rgba(255,199,115,1);
577 }
578 .page_container .main .btn_box__item.gray {
579   background-color: rgba(206,206,206,1);
580 }
581 .page_container .main .btn_box__item .icon {
582   width: 60px;
583   height: 60px;
584   display: block;
585   margin-right: 17px;
878885 586 }
J 587 .page_container .main .btn_box__item .icon .img {
588   width: 100%;
589   height: 100%;
bb2b08 590 }
J 591 .page_container .main .btn_box__item .tx {
592   line-height: 37px;
593   color: rgba(51,51,51,1);
594   font-size: 26px;
595   text-align: center;
596   font-family: PingFangSC-medium;
597 }
598 .page_container .main .btn_box__item .tx.white {
599   color: rgba(255,255,255,1);
600 }
601 .page_container .main .room_left_btn_box {
602   padding: 0 23px;
603   margin-top: 163px;
604 }
605 .page_container .main .room_left_btn_box__item {
606   height: 150px;
607   line-height: 58px;
608   border-radius: 10px;
609   font-size: 40px;
610   text-align: center;
611   font-family: Microsoft Yahei;
612   margin-right: 20px;
613   font-weight: bold;
614 }
615 .page_container .main .room_left_btn_box__item:last-child {
616   margin-right: 0;
617 }
618 .page_container .main .room_left_btn_box__item.yellow {
619   color: rgba(255,255,255,1);
620   background-color: rgba(233,157,66,1);
621 }
622 .page_container .main .room_left_btn_box__item.gray {
623   background-color: rgba(206,206,206,1);
624   color: rgba(79,79,79,1);
625 }
626 .page_container .main .room_left_btn_box__item.green {
627   width: 500px;
628   height: 150px;
629   line-height: 73px;
630   border-radius: 10px;
631   background-color: rgba(47,174,206,1);
632   color: rgba(255,255,255,1);
633   font-size: 50px;
634   text-align: center;
635   margin: auto;
636 }
637 .page_container .main .room_content {
638   margin-top: 30px;
639 }
640 .page_container .main .room_content .tip {
641   line-height: 33px;
642   color: rgba(79,79,79,1);
643   font-size: 24px;
644   text-align: center;
645   font-family: PingFangSC-medium;
646 }
647 .page_container .main .room_content .name {
648   line-height: 168px;
649   color: rgba(51,51,51,1);
650   font-size: 120px;
651   text-align: center;
652   font-family: PingFangSC-medium;
653   margin-top: 13px;
654 }
cf3e3e 655 .page_container .main .room_content .name .tx {
J 656   max-width: 666px;
657   margin: auto;
658 }
bb2b08 659 .page_container .main .room_content .ciq {
J 660   line-height: 42px;
661   color: rgba(51,51,51,1);
662   font-size: 30px;
663   text-align: center;
664   font-family: PingFangSC-regular;
665   margin-top: -5px;
666 }
667 .page_container .main .room_content .time {
668   line-height: 42px;
669   color: rgba(0,0,0,1);
670   font-size: 30px;
671   text-align: center;
672   font-family: PingFangSC-medium;
673   font-weight: bold;
674   margin-top: 21px;
675 }
676 .page_container .right {
677   width: 686px;
678   margin-left: 30px;
878885 679   /* height: 100%; */
bb2b08 680 }
J 681 .page_container .right_block {
682   width: 100%;
683   height: 100%;
684 }
685 .page_container .right .guest_title {
686   height: 60px;
687   line-height: 28px;
688   border-radius: 10px 10px 0px 0px;
689   background-color: rgba(255,255,255,1);
690   color: rgba(34,123,235,1);
691   font-size: 20px;
692   text-align: center;
693   font-family: Roboto;
694   font-weight: bold;
695 }
696 .page_container .right .guest_block {
cf3e3e 697   background-color: #fff;
bb2b08 698   overflow: auto;
J 699 }
700 .page_container .right .guest_list {
701   background-color: #fff;
702   padding-bottom: 23px;
703 }
704 .page_container .right .guest_list__row {
705   min-height: 75px;
706   background-color: rgba(34,123,235,0.1);
707 }
708 .page_container .right .guest_list__row:nth-child(2n) {
709   background-color: #fff;
710 }
bf4dca 711 .page_container .right .guest_list__row.rowtip {
J 712   background-color: #fff;
713   line-height: 30px;
714   color: rgba(0,0,0,.5);
715   font-size: 22px;
716 }
bb2b08 717 .page_container .right .guest_list__td {}
J 718 .page_container .right .guest_list__td .tx {
719   line-height: 30px;
720   color: rgba(16,16,16,1);
721   font-size: 22px;
722   text-align: center;
723   font-family: PingFangSC-regular;
cf3e3e 724   box-sizing: border-box;
J 725   padding: 0 5px;
bb2b08 726 }
J 727 .page_container .right .guest_list__td .icon {
728   width: 20px;
729   height: 20px;
730   display: block;
731 }
878885 732 .page_container .right .guest_list__td .icon .img {
J 733   width: 100%;
734   height: 100%;
735 }
bb2b08 736 .page_container .right .guest_list__td:nth-child(1) {
J 737   width: 19.54%;
738 }
739 .page_container .right .guest_list__td:nth-child(2) {
740   width: 21.86%;
741 }
742 .page_container .right .guest_list__td:nth-child(3) {
743   width: 46.06%;
744 }
745 .page_container .right .guest_list__td:nth-child(4) {
746   width: 12.54%;
747 }
748 .page_container .right .room_info {
749   width: 100%;
750   border-radius: 10px;
751   background-color: rgba(255,255,255,0.3);
752 }
753 .page_container .right .room_info .staff_box {
754   margin-top: 30px;
755 }
756 .page_container .right .room_info .staff_box_item {
757   height: 180px;
758 }
759 .page_container .right .room_info .staff_box_item:nth-child(1) {
760   background-color: rgba(255,255,255,0.1);
761 }
762 .page_container .right .room_info .staff_box_item:nth-child(2) {
763   background-color: rgba(255,255,255,0.3);
764   margin: 0 10px;
765 }
766 .page_container .right .room_info .staff_box_item:nth-child(3) {
767   background-color: rgba(255,255,255,0.1);
768 }
769 .page_container .right .room_info .staff_box_item__title {
770   line-height: 28px;
771   color: rgba(255,255,255,1);
772   font-size: 20px;
773   text-align: center;
774   font-family: PingFangSC-regular;
775 }
776 .page_container .right .room_info .staff_box_item__name {
777   line-height: 56px;
778   color: rgba(255,255,255,1);
779   font-size: 40px;
780   text-align: center;
781   font-family: PingFangSC-medium;
782   margin-top: 5px;
783 }
784 .page_container .right .room_info .room_info_project {
785   padding: 36px 20px 20px 20px;
786   height: 138px;
787   box-sizing: border-box;
788   overflow: hidden;
789 }
790 .page_container .right .room_info .room_info_project_block {
791   box-sizing: border-box;
792   width: 100%;
793   height: 100%;
794   overflow: auto;
795 }
796 .page_container .right .room_info .room_info_project .tx {
797   line-height: 39px;
798   color: rgba(255,255,255,1);
799   font-size: 28px;
800   text-align: center;
801   font-family: PingFangSC-regular;
802 }
803 .page_container .right .guest_box {
804   margin-top: 65px;
805   width: 100%;
806   height: 345px;
807   background-color: #fff;
808   overflow: hidden;
809 }
810 </style>