update_202312071736_项目-治疗室屏幕web-样式调整，适配ios浏览器v1

jazz

2023-12-08 878885c5872fe2fcd153a6571e75a27cb1025e97

 src/pages/room/detail.vue

@@ -1,38 +1,249 @@
<!--room-detail.vue-->
<template>
  <div class="page">
  <div class="page flex flex-col">
    <div class="page_header flex flex-ver">
      <div class="left flex flex-ver">
        <img class="page_logo_1" src="../../assets/img/logo_1.png">
        <img class="page_logo_2" src="../../assets/img/logo_2.png">
      <div class="left flex flex-ver" @click="back">
        <div class="page_logo_1">
          <img class="img" src="static/imgs/logo_1.png">
        </div>
        <div class="page_logo_2">
          <img class="img" src="static/imgs/logo_2.png">
        </div>
      </div>
      <div class="right flex-1 flex flex-jcfe flex-ver">
        <div class="reset_btn flex flex-center" @click="resetStatus">重置房间状态</div>
        <div class="page_date">
          <div class="page_week">{{timeObj.week}}</div>
          <div class="page_day">{{timeObj.date}}</div>
          <div class="page_week">{{ timeObj.week }}</div>
          <div class="page_day">{{ timeObj.date }}</div>
        </div>
        <div class="page_time">{{timeObj.timeMin}}</div>
        <!-- <div class="page_time">{{timeObj.time}}</div> -->
        <div class="page_time">{{ timeObj.timeMin }}</div>
        <!-- <div class="page_time">{{ timeObj.time }}</div> -->
      </div>
    </div>
    <div>123</div>
    <!-- 未有安排 -->
    <div v-if="!occupyInfoView && (!assignTreatList || !assignTreatList.length)" class="page_container flex flex-1">
      <div class="main flex-1">
        <div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
        <div v-if="roomInfo" class="room_main_tip" style="margin-top: 93px;line-height: 186px;font-size: 140px;">-{{ statusTx[roomInfo.status] }}-</div>
        <div class="btn_box flex flex-center">
          <div class="flex flex-ver">
            <div class="btn_box__item flex flex-center white" data-tx="空闲" data-status="0" @click="statusChg">
              <div class="flex flex-ver">
                <div class="icon">
                  <img class="img" src="static/imgs/free.png">
                </div>
                <div class="tx">空闲</div>
              </div>
            </div>
            <div class="btn_box__item flex flex-center blue" data-tx="使用中" data-status="1" @click="statusChg">
              <div class="flex flex-ver">
                <div class="icon">
                  <img class="img" src="static/imgs/using.png">
                </div>
                <div class="tx white">使用中</div>
              </div>
            </div>
            <div class="btn_box__item flex flex-center yellow" data-tx="客人休息" data-status="2" @click="statusChg">
              <div class="flex flex-ver">
                <div class="icon">
                  <img class="img" src="static/imgs/rest.png">
                </div>
                <div class="tx">客人休息</div>
              </div>
            </div>
            <div class="btn_box__item flex flex-center gray" data-tx="通知打扫" data-status="3" @click="statusChg">
              <div class="flex flex-ver">
                <div class="icon">
                  <img class="img" src="static/imgs/clear.png">
                </div>
                <div class="tx">通知打扫</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 没有客人和有安排 -->
    <div v-if="!occupyInfoView && (assignTreatList && assignTreatList.length)" class="page_container flex flex-1">
      <div class="main flex-1">
        <div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
        <div v-if="roomInfo" class="room_main_tip">-{{ statusTx[roomInfo.status] }}-</div>
        <div v-if="roomInfo && roomInfo.status >= 1" class="room_left_btn_box flex flex-ver">
          <div v-if="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center yellow" @click="setStatus('客人休息', 2)">客人休息</div>
          <div v-if="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center gray" @click="setStatus('打扫中', 3)">通知打扫</div>
          <div v-if="roomInfo.status == 2" class="room_left_btn_box__item flex flex-center green" @click="setStatus('打扫中', 3)">通知打扫</div>
          <div v-if="roomInfo.status == 3" class="room_left_btn_box__item flex flex-center green" @click="setStatus('空闲', 0)">结束打扫</div>
        </div>
      </div>
      <div class="right">
        <div class="right_block flex flex-col">
          <div class="guest_title flex flex-center">等待诊疗</div>
          <div class="guest_block flex-1">
            <div class="guest_list">
              <div v-for="(item, index) in assignTreatList" :key="index" class="guest_list__row flex flex-ver" @click="selectCustomer(item)">
                <div class="guest_list__td">
                  <div class="tx flex flex-ver">
                    <div class="flex-1 flex-1-w1 ell">{{ item.userName }}</div>
                  </div>
                  <div class="tx" style="font-size: 14px;line-height: 20px;">{{ item.ciq || '' }}</div>
                </div>
                <div class="guest_list__td flex flex-center">
                  <span class="tx">{{ item.startTime?item.startTime+'开始':'' }}</span>
                </div>
                <div class="guest_list__td flex flex-center">
                  <span class="tx flex-1 flex-1-w1 ell">{{ item.aDoctorName?item.aDoctorName+'(医生)、':'' }}{{ item.aNurseName?item.aNurseName+'(护士)':'' }}</span>
                </div>
                <div class="guest_list__td flex flex-center">
                  <div class="icon">
                    <img class="img" src="static/imgs/choose.png">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 客人和有安排 -->
    <div v-if="occupyInfoView && (assignTreatList && assignTreatList.length)" class="page_container flex flex-1">
      <div class="main flex-1">
        <div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
        <div class="room_content">
          <div class="tip">诊疗安排</div>
          <!-- <div class="name">{{ occupyInfoView.userName }}</div> -->
          <div class="name">
            <el-popover
              placement="top"
              width="400"
              popper-class="top_tx"
              trigger="click"
              :popper-options="{ removeOnDestroy: true }"
            >
              <div>{{ occupyInfoView.userName }}</div>
              <div slot="reference" class="tx ell">{{ occupyInfoView.userName }}</div>
            </el-popover>
          </div>
          <div v-if="occupyInfoView.ciq" class="ciq">({{ occupyInfoView.ciq }})</div>
          <div v-if="occupyInfoView.startTime" class="time">安排治疗时间：{{ occupyInfoView.startTime }} 开始</div>
        </div>
        <div v-if="roomInfo" class="room_left_btn_box flex flex-ver" style="margin-top: 105px;">
          <div v-if="roomInfo.status == 0" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('使用中', 1)">开始治疗</div>
          <div v-if="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center yellow" @click="setStatus('客人休息', 2)">客人休息</div>
          <div v-if="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center gray" @click="setStatus('打扫中', 3)">通知打扫</div>
          <div v-if="roomInfo.status == 2" class="room_left_btn_box__item flex flex-center green" @click="setStatus('打扫中', 3)">通知打扫</div>
          <div v-if="roomInfo.status == 3" class="room_left_btn_box__item flex flex-center green" @click="setStatus('空闲', 0)">结束打扫</div>
        </div>
      </div>
      <div class="right flex flex-col">
        <div class="room_info flex-1">
          <div class="staff_box flex flex-ver flex-sb">
            <div class="staff_box_item flex-1 flex flex-center">
              <div>
                <div class="staff_box_item__title">分诊顾问</div>
                <div class="staff_box_item__name">{{ occupyInfoView.adviserName || '' }}</div>
              </div>
            </div>
            <div class="staff_box_item flex-1 flex flex-center">
              <div>
                <div class="staff_box_item__title">执行医生</div>
                <div class="staff_box_item__name">{{ occupyInfoView.aDoctorName || '' }}</div>
              </div>
            </div>
            <div class="staff_box_item flex-1 flex flex-center">
              <div>
                <div class="staff_box_item__title">执行护士</div>
                <div class="staff_box_item__name">{{ occupyInfoView.aNurseName || '' }}</div>
              </div>
            </div>
          </div>
          <div class="room_info_project">
            <div class="room_info_project_block">
              <div class="tx">{{ occupyInfoView.projectName || '' }}</div>
            </div>
          </div>
        </div>
        <div class="guest_box flex flex-col">
          <div class="guest_title flex flex-center">等待诊疗</div>
          <div class="guest_block flex-1">
            <div class="guest_list">
              <div v-for="(item, index) in assignTreatList" :key="index" class="guest_list__row flex flex-ver" @click="selectCustomer(item)">
                <div class="guest_list__td">
                  <div class="tx flex flex-ver">
                    <div class="flex-1 flex-1-w1 ell">{{ item.userName }}</div>
                  </div>
                  <div class="tx" style="font-size: 14px;line-height: 20px;">{{ item.ciq || '' }}</div>
                </div>
                <div class="guest_list__td flex flex-center">
                  <span class="tx">{{ item.startTime?item.startTime+'开始':'' }}</span>
                </div>
                <div class="guest_list__td flex flex-center">
                  <span class="tx flex-1 flex-1-w1 ell">{{ item.aDoctorName?item.aDoctorName+'(医生)、':'' }}{{ item.aNurseName?item.aNurseName+'(护士)':'' }}</span>
                </div>
                <div class="guest_list__td flex flex-center">
                  <div class="icon">
                    <img class="img" src="static/imgs/choose.png">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择客人弹窗 -->
    <XioCustomerSelect ref="XioCustomerSelect" @cancel="selectCustomerCancel" @submit="selectCustomerSubmit" />
    <!-- 更改房间状态窗 -->
    <XioRoomStatusChg ref="XioRoomStatusChg" @changeStatus="changeStatus" />
  </div>
</template>

<script>
// 空闲 0
// 使用中 1
// 客人休息 2
// 待打扫/通知打扫 3
// import Login from '../utils/jun_login.js'

// 选择客人弹窗
import XioCustomerSelect from '@/components/xio_customer_select'
// 更改房间状态窗
import XioRoomStatusChg from '@/components/xio_room_status_chg'
import Req from '../../utils/jun_httpInstall' // http 请求
var isUseDefault = false // 是否已使用默认客人
var isUseDefaultChg = 0// 已使用默认客人后房间是否有改变状态
export default {
  name: 'RoomDetail',
  components: {},
  components: {
    XioCustomerSelect,
    XioRoomStatusChg
  },
  inject: ['noop'],
  data() {
    return {
      timeObj: {}// week：星期，date：年月日，timeMin：时分，time：时分秒，timeStamp：时间戳
      id: this.$route.query.id || '',
      roomInfo: {},
      occupyInfo: '', // 当前占用人的信息
      assignTreatList: [],
      statusTx: ['空闲', '使用中', '客人休息', '打扫中'],
      timeObj: {} // week：星期，date：年月日，timeMin：时分，time：时分秒，timeStamp：时间戳
    }
  },
  computed: {

    occupyInfoView() {
      // 有占用
      if (this.occupyInfo) {
        return this.occupyInfo
      // 没有占用
      } else {
        // 还没使用默认客人值或者已使用默认客人值还没改变状态（适配轮询）
        if ((!isUseDefault || (isUseDefault && isUseDefaultChg === 0)) && this.assignTreatList && this.assignTreatList.length) {
          isUseDefault = true
          return this.assignTreatList[0]
        // 已使用过默认客人值
        } else {
          return ''
        }
      }
    }
  },
  mounted() {
    console.log('roomDetail mounted')
@@ -43,11 +254,472 @@
  },
  methods: {
    init() {
      this.countGetTime(this, 'timeObj')
      // 计时
      this.countGetTime(this, 'timeObj', 'detail')
      // 轮询getData，8秒一次
      this.pollingAjaxFn(this, 'getData', 'detail', 8000)
      // this.getData()
    },
    // 获取房间详情
    getData() {
      var params = {}
      // 房间id
      if (this.id) {
        params.shopRoomId = this.id
      }
      Req.http.post({
        url: 'guide/treat/screen/room/info',
        data: params,
        udData: { noLoading: true },
        header: { 'Content-Type': 'application/json' },
        mockData: {
          code: 100,
          msg: '',
          data: {
            roomInfo: {
              roomNo: 'xx',
              status: 0 // 0空闲 1使用 2休息 3打扫
            },
            assignTreatList: [{
              startTime: '2023-12-08 00:00:00'
            }],
            occupyInfo: null
          }
        }
      }).then((res) => {
        if (res && res.data) {
          // 治疗时间处理
          if (res.data.assignTreatList && res.data.assignTreatList.length) {
            res.data.assignTreatList.forEach((o) => {
              var st = (o.startTime).split(' ')[1].split(':')
              o.startTime = `${st[0]}:${st[1]}`
            })
          }
          // 已有占用的，更改已使用默认客人的状态
          res.data.occupyInfo && (isUseDefaultChg = 1)
          res.data.occupyInfo && (isUseDefault = 1)
          // 占用信息治疗时间处理
          if (res.data.occupyInfo && res.data.occupyInfo.startTime) {
            var ost = (res.data.occupyInfo.startTime).split(' ')[1].split(':')
            res.data.occupyInfo.startTime = `${ost[0]}:${ost[1]}`
          }
          for (const key in res.data) {
            this[key] = res.data[key]
          }
        }
        // console.log('999999999999999999999999999', res)
      })
    },
    // 返回
    back() {
      isUseDefault = false
      isUseDefaultChg = 0
      // 关闭计时
      this.stopCountGetTime('detail')
      // 关闭轮询
      this.stopPollingAjaxFn('detail')
      // 返回
      this.$router.go(-1)
    },
    // 未有安排直接状态变更
    statusChg(e) {
      var { tx, status } = e.currentTarget.dataset
      var { occupyInfoView, roomInfo } = this
      console.log(tx, status)
      // if (roomInfo && status * 1 == roomInfo.status) {
      //   return
      // }
      this.changeStatusFn(occupyInfoView, status, () => {
        this.getData()
      })
    },
    // 按流程设置房间状态
    setStatus(tx, status) {
      var { occupyInfoView, roomInfo } = this
      console.log(tx, status)
      this.changeStatusFn(occupyInfoView, status, () => {
        // 刷新详情
        this.getData()
      })
    },
    // 改变房间状态异步方法
    changeStatusFn(item = {}, status, cb) {
      var params = {}
      // 更改的状态
      params.status = status * 1
      // 房间id
      if (this.id) {
        params.shopRoomId = this.id
      }
      // 治疗记录id
      if (item && item.id) {
        params.treatRecordId = item.id
      }
      Req.http.post({
        url: 'guide/treat/screen/room/status/update',
        data: params,
        header: { 'Content-Type': 'application/json' },
        mockData: {
          code: 100,
          msg: '',
          data: {}
        }
      }).then((res) => {
        // 在已有默认客人的情况下，改变状态更改标识（适配轮询）
        if (isUseDefault) {
          isUseDefaultChg = 1
        }
        // console.log('8888888888888888888888888888888888', res)
        cb && cb()
      })
    },
    // 重置状态
    resetStatus() {
      // 打开弹窗
      this.$refs['XioRoomStatusChg'].showDialog()
    },
    // 更改房间状态（重置状态的更改方法）
    changeStatus(opt) {
      var { occupyInfoView, roomInfo } = this
      console.log(opt.statusTx, opt.status)
      // if (roomInfo && opt.status * 1 == roomInfo.status) {
      //   return
      // }
      this.changeStatusFn(occupyInfoView, opt.status, () => {
        // 刷新详情
        this.getData()
        // 关闭弹窗
        this.$refs['XioRoomStatusChg'].hideDialog()
      })
    },
    // 选择客户
    selectCustomer(item = {}) {
      // 打开弹窗
      this.$refs['XioCustomerSelect'].showDialog()
      // 组件客户数据处理
      this.$refs['XioCustomerSelect'].dataInit(item)
    },
    // 选择客户取消
    selectCustomerCancel(opt) {
      console.log('cancel', opt)
      this.$refs['XioCustomerSelect'].hideDialog()
    },
    // 选择客户确定
    selectCustomerSubmit(opt) {
      console.log('submit', opt)
      this.changeStatusFn(opt, 1, () => {
        // 刷新详情
        this.getData()
        // 关闭弹窗
        this.$refs['XioCustomerSelect'].hideDialog()
      })
    }
  }
}
</script>

<style>
.el-popper.top_tx {
  text-align: center;
  font-size: 25px;
}
</style>

<style scoped>
</style>
.page{
  overflow: auto;
}
.page_header .reset_btn {
  width: 200px;
  height: 60px;
  line-height: 35px;
  border-radius: 5px;
  background-color: rgba(47,174,206,1);
  color: rgba(255,255,255,1);
  font-size: 24px;
  text-align: center;
  font-family: Microsoft Yahei;
  cursor: pointer;
}
.page_container .main {
  /* height: 100%; */
  border-radius: 10px;
  background-color: rgba(255,255,255,1);
  color: rgba(16,16,16,1);
  font-size: 14px;
  /* text-align: center; */
  font-family: Roboto;
}
.page_container .main .room_title {
  line-height: 50px;
  color: rgba(255,255,255,1);
  font-size: 36px;
  text-align: center;
  font-family: PingFangSC-medium;
  padding: 10px 0;
  background-color: rgba(34,123,235,1);
  width: 400px;
  margin: 39px auto 0 auto;
}
.page_container .main .room_main_tip {
  line-height: 168px;
  font-size: 120px;
  color: rgba(46,77,124,1);
  text-align: center;
  font-family: PingFangSC-medium;
  margin-top: 107px;
  /* font-weight: bold; */
}
.page_container .main .room_main_tip.gray {
  color: rgba(154,154,154,1);
}
.page_container .main .btn_box {
  margin-top: 130px;
}
.page_container .main .btn_box__item {
  width: 250px;
  height: 120px;
  border-radius: 10px;
  box-shadow: 0px 2px 6px 0px rgba(206,206,206,1);
  margin-right: 70px;
  cursor: pointer;
}
.page_container .main .btn_box__item:last-child {
  margin-right: 0;
}
.page_container .main .btn_box__item.white {
  background-color: rgba(255,255,255,1);
}
.page_container .main .btn_box__item.blue {
  background-color: rgba(46,77,124,1);
}
.page_container .main .btn_box__item.yellow {
  background-color: rgba(255,199,115,1);
}
.page_container .main .btn_box__item.gray {
  background-color: rgba(206,206,206,1);
}
.page_container .main .btn_box__item .icon {
  width: 60px;
  height: 60px;
  display: block;
  margin-right: 17px;
}
.page_container .main .btn_box__item .icon .img {
  width: 100%;
  height: 100%;
}
.page_container .main .btn_box__item .tx {
  line-height: 37px;
  color: rgba(51,51,51,1);
  font-size: 26px;
  text-align: center;
  font-family: PingFangSC-medium;
}
.page_container .main .btn_box__item .tx.white {
  color: rgba(255,255,255,1);
}
.page_container .main .room_left_btn_box {
  padding: 0 23px;
  margin-top: 163px;
}
.page_container .main .room_left_btn_box__item {
  height: 150px;
  line-height: 58px;
  border-radius: 10px;
  font-size: 40px;
  text-align: center;
  font-family: Microsoft Yahei;
  margin-right: 20px;
  font-weight: bold;
}
.page_container .main .room_left_btn_box__item:last-child {
  margin-right: 0;
}
.page_container .main .room_left_btn_box__item.yellow {
  color: rgba(255,255,255,1);
  background-color: rgba(233,157,66,1);
}
.page_container .main .room_left_btn_box__item.gray {
  background-color: rgba(206,206,206,1);
  color: rgba(79,79,79,1);
}
.page_container .main .room_left_btn_box__item.green {
  width: 500px;
  height: 150px;
  line-height: 73px;
  border-radius: 10px;
  background-color: rgba(47,174,206,1);
  color: rgba(255,255,255,1);
  font-size: 50px;
  text-align: center;
  margin: auto;
}
.page_container .main .room_content {
  margin-top: 30px;
}
.page_container .main .room_content .tip {
  line-height: 33px;
  color: rgba(79,79,79,1);
  font-size: 24px;
  text-align: center;
  font-family: PingFangSC-medium;
}
.page_container .main .room_content .name {
  line-height: 168px;
  color: rgba(51,51,51,1);
  font-size: 120px;
  text-align: center;
  font-family: PingFangSC-medium;
  margin-top: 13px;
}
.page_container .main .room_content .name .tx {
  max-width: 666px;
  margin: auto;
}
.page_container .main .room_content .ciq {
  line-height: 42px;
  color: rgba(51,51,51,1);
  font-size: 30px;
  text-align: center;
  font-family: PingFangSC-regular;
  margin-top: -5px;
}
.page_container .main .room_content .time {
  line-height: 42px;
  color: rgba(0,0,0,1);
  font-size: 30px;
  text-align: center;
  font-family: PingFangSC-medium;
  font-weight: bold;
  margin-top: 21px;
}
.page_container .right {
  width: 686px;
  margin-left: 30px;
  /* height: 100%; */
}
.page_container .right_block {
  width: 100%;
  height: 100%;
}
.page_container .right .guest_title {
  height: 60px;
  line-height: 28px;
  border-radius: 10px 10px 0px 0px;
  background-color: rgba(255,255,255,1);
  color: rgba(34,123,235,1);
  font-size: 20px;
  text-align: center;
  font-family: Roboto;
  font-weight: bold;
}
.page_container .right .guest_block {
  background-color: #fff;
  overflow: auto;
}
.page_container .right .guest_list {
  background-color: #fff;
  padding-bottom: 23px;
}
.page_container .right .guest_list__row {
  min-height: 75px;
  background-color: rgba(34,123,235,0.1);
}
.page_container .right .guest_list__row:nth-child(2n) {
  background-color: #fff;
}
.page_container .right .guest_list__td {}
.page_container .right .guest_list__td .tx {
  line-height: 30px;
  color: rgba(16,16,16,1);
  font-size: 22px;
  text-align: center;
  font-family: PingFangSC-regular;
  box-sizing: border-box;
  padding: 0 5px;
}
.page_container .right .guest_list__td .icon {
  width: 20px;
  height: 20px;
  display: block;
}
.page_container .right .guest_list__td .icon .img {
  width: 100%;
  height: 100%;
}
.page_container .right .guest_list__td:nth-child(1) {
  width: 19.54%;
}
.page_container .right .guest_list__td:nth-child(2) {
  width: 21.86%;
}
.page_container .right .guest_list__td:nth-child(3) {
  width: 46.06%;
}
.page_container .right .guest_list__td:nth-child(4) {
  width: 12.54%;
}
.page_container .right .room_info {
  width: 100%;
  border-radius: 10px;
  background-color: rgba(255,255,255,0.3);
}
.page_container .right .room_info .staff_box {
  margin-top: 30px;
}
.page_container .right .room_info .staff_box_item {
  height: 180px;
}
.page_container .right .room_info .staff_box_item:nth-child(1) {
  background-color: rgba(255,255,255,0.1);
}
.page_container .right .room_info .staff_box_item:nth-child(2) {
  background-color: rgba(255,255,255,0.3);
  margin: 0 10px;
}
.page_container .right .room_info .staff_box_item:nth-child(3) {
  background-color: rgba(255,255,255,0.1);
}
.page_container .right .room_info .staff_box_item__title {
  line-height: 28px;
  color: rgba(255,255,255,1);
  font-size: 20px;
  text-align: center;
  font-family: PingFangSC-regular;
}
.page_container .right .room_info .staff_box_item__name {
  line-height: 56px;
  color: rgba(255,255,255,1);
  font-size: 40px;
  text-align: center;
  font-family: PingFangSC-medium;
  margin-top: 5px;
}
.page_container .right .room_info .room_info_project {
  padding: 36px 20px 20px 20px;
  height: 138px;
  box-sizing: border-box;
  overflow: hidden;
}
.page_container .right .room_info .room_info_project_block {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.page_container .right .room_info .room_info_project .tx {
  line-height: 39px;
  color: rgba(255,255,255,1);
  font-size: 28px;
  text-align: center;
  font-family: PingFangSC-regular;
}
.page_container .right .guest_box {
  margin-top: 65px;
  width: 100%;
  height: 345px;
  background-color: #fff;
  overflow: hidden;
}
</style>