qilu_hospital_front/src/views/dispatch/index.vue

<template>
  <div class="voice_box">
    <div class="top_header">
      <div class="left">
        <div class="top_title"></div>
      </div>
      <div class="right">
        <div class="top_right">
          <div class="date_box">{{date}}</div>
          <div class="weather_box">
            <img src="~@/assets/image/weather.png" alt="">
          </div>
          <div class="weather_txt">23℃</div>
          <div class="weather_txt time_txt">{{time}}</div>
        </div>
        <div class="bottom_right">
          <div class="user_box">
            <img src="~@/assets/image/head_photo.png" alt="">
            <span class="name_txt">admin</span>
          </div>
          <div class="user_box">
            <img src="~@/assets/image/exit.png" alt="">
            <span class="exit_txt">退出</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bot_con">
      <div class="left_con">
        <div class="title_box">
          <div class="tit_box" @click="changeTitle(1)">
            <img v-show="activeTit == 1" src="~@/assets/image/list_act.png" alt="">
            <img v-show="activeTit == 2" class="list_img" src="~@/assets/image/list_tit.png" alt="">
            <div v-show="activeTit == 1" class="bot_bor"></div>
          </div>
          <div class="tit_box" @click="changeTitle(2)">
            <img v-show="activeTit == 1" class="group_img" src="~@/assets/image/group_tit.png" alt="">
            <img v-show="activeTit == 2" class="group_act" src="~@/assets/image/group_act.png" alt="">
            <div v-show="activeTit == 2" class="bot_bor"></div>
          </div>
        </div>
        <div class="search_box">
           <el-input
              v-model="name"
              clearable
              placeholder="搜索关键字"
              suffix-icon="el-icon-search"
              @clear="searchHandle(1)"
            ></el-input>
        </div>
        <div class="list_box" v-show="activeTit == 1">
          <div class="list_item" :class="activeDevice == item.id ? 'dev_act' : item.isSelect == 1 ? 'sele_devi' : ''"
          v-for="item in deviceData" :key="item.id" @mouseenter="enterDevice(item)" @mouseleave="leaveDevice">
            <div class="left_bor" v-show="activeDevice == item.id"></div>
            <div class="dev_img">
              <img v-show="activeDevice !== item.id" src="~@/assets/image/device.png" alt="">
              <img v-show="activeDevice == item.id" src="~@/assets/image/device_act.png" alt="">
            </div>
            <div class="device_name">{{item.name}}</div>
            <div class="dev_btn" v-show="activeDevice == item.id">邀请</div>
          </div>
        </div>
        <div class="btn_box" v-show="activeTit == 1">
          <img src="~@/assets/image/add_btn.png" alt="">添加用户
        </div>
        <div class="tree_box" v-show="activeTit == 2">
          <el-tree :data="treeData" node-key="id" :props="defaultProps" @node-click="handleNodeClick" :default-checked-keys="selectTreeNode">
            <!-- selectTreeNode.map(item => item == data.id) ? 'select_node_item' : -->
            <span class="custom-tree-node" @mouseenter="enterNode(node,data)" @mouseleave="leaveNode"
             :class="activeNode == data.id ? 'active_node_item' :  ''" 
            slot-scope="{ node, data }" >
              <i v-if="node.level == 1" class="spread_node"></i>
              <i v-if="node.level == 1" class="level_first" />
              <i v-else-if="node.level == 2" class="level_second" :class="activeNode == data.id ? 'active_level_second' : ''" />
              <span :class="node.level == 1 ? 'first_span' : node.level == 2 ? 'second_span' : ''">{{ data.label }}</span>
              <span v-if="node.level == 1" class="btn_level">邀请</span>
              <span v-if="activeNode == data.id" class="btn_level">邀请</span>
            </span>
          </el-tree>

        </div>
      </div>
      <div class="cen_con">
        <div class="cen_tit">
          <img src="~@/assets/image/voice_tit.png" alt="">
        </div>
        <div class="bottom_cen" v-show="activeTit == 1">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="bottom_item">
                <div class="item_tit">终端设备名称——调度组1</div>
                <div class="voice_con">
                  <img src="~@/assets/image/voice_bag.png" alt="">
                </div>
                <div class="voice_btn">
                  <img src="~@/assets/image/mute.png" alt="">
                  <img class="hang_btn" src="~@/assets/image/hang.png" alt="">
                </div>
              </div>
            </el-col>
            <el-col :span="8"><div class="bottom_item"></div></el-col>
            <el-col :span="8"><div class="bottom_item"></div></el-col>
            <el-col :span="8"><div class="bottom_item"></div></el-col>
            <el-col :span="8"><div class="bottom_item"></div></el-col>
            <el-col :span="8"><div class="bottom_item"></div></el-col>
          </el-row>
        </div>
        <div class="group_cen" v-show="activeTit == 2">
          <div class="group_tit">终端设备名称——调度组1</div>
          <div class="group_voice">
            <img src="~@/assets/image/voice_bag.png" alt="">
          </div>
          <div class="voice_btn">
            <img src="~@/assets/image/mute.png" alt="">
            <img class="hang_btn" src="~@/assets/image/hang.png" alt="">
          </div>
        </div>
        <div class="bot_cen">
          <img v-show="activeTit == 1" src="~@/assets/image/over.png" alt="">
          <img v-show="activeTit == 1" class="exit" src="~@/assets/image/exit_voice.png" alt="">
          <img v-show="activeTit == 2" src="~@/assets/image/finish.png" alt="">
          <img v-show="activeTit == 2" class="exit" src="~@/assets/image/exit_speak.png" alt="">
        </div>
      </div>
      <div class="right_con">
        <div class="right_tit">
          <img src="~@/assets/image/phone_tit.png" alt="">
        </div>
        <div class="phone_box">
          <div class="phone_tit"><span class="point"></span> 当前通话</div>
          <div class="phone_list">
            <div class="phone_item" v-for="item in phoneList" :key="item.id" :class="activePhone == item.id ? 'active_phone' : ''"
             @mouseenter="itemHover(item)" @mouseleave="leavePhone">
              <div v-show="activePhone == item.id" class="left_item"></div>
              <div class="time_box">{{item.time}}</div>
              <div class="center_txt">
                <img v-show="activePhone !== item.id" class="img" src="~@/assets/image/phone.png" alt="">
                <img v-show="activePhone == item.id" class="img" src="~@/assets/image/phone_act.png" alt="">
                <div>{{item.name}}</div>
              </div>
              <div v-show="activePhone == item.id" class="item_btn">请出</div>
            </div>
          </div>
          <div class="miss_tit">
            <span class="point"></span> 未接通话
          </div>
          <div class="miss_list">
            <div class="miss_item">
              <div class="miss_time">00:12:56</div>
              <div class="miss_name">终端设备名称——调度组1</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "alarmCenter",
  data() {
    return{
      activeTit:1,
      name:'',
      activeDevice:'',
      activeNode:'',
      selectTreeNode:['002','009'],
      activePhone:'',
      deviceData:[
        {id:'001',name:'终端设备名称1（1001）',isSelect:0},
        {id:'002',name:'终端设备名称2（1002）',isSelect:1},
        {id:'003',name:'终端设备名称3（1003）',isSelect:0},
        {id:'004',name:'终端设备名称4（1004）',isSelect:0},
        {id:'005',name:'终端设备名称5（1005）',isSelect:1},
        {id:'006',name:'终端设备名称6（1006）',isSelect:0},
        {id:'007',name:'终端设备名称7（1007）',isSelect:0},
        {id:'008',name:'终端设备名称8（1008）',isSelect:1},
        {id:'009',name:'终端设备名称9（1009）',isSelect:0},
        {id:'010',name:'终端设备名称10（1010）',isSelect:0},
        {id:'011',name:'终端设备名称11（1011）',isSelect:1},
        {id:'012',name:'终端设备名称12（1012）',isSelect:0},
        {id:'013',name:'终端设备名称13（1013）',isSelect:0},
        {id:'014',name:'终端设备名称14（1014）',isSelect:0},
        {id:'015',name:'终端设备名称15（1015）',isSelect:0},
      ],
      treeData: [{
          id:'001',
          label: '调度组名称1',
          children: [
            {
              id:'002',
              label: '终端设备名称1（1001）',
            },
            {
              id:'003',
              label: '终端设备名称2（1002）',
            },
            {
              id:'004',
              label: '终端设备名称3（1003）',
            },
            {
              id:'005',
              label: '终端设备名称4（1004）',
            },
          ]
        }, {
          id:'006',
          label: '调度组名称2',
          children: [
            {
              id:'007',
              label: '终端设备名称1（2001）',
            },
            {
              id:'008',
              label: '终端设备名称2（2002）',
            },
            {
              id:'009',
              label: '终端设备名称3（2003）',
            },
            {
              id:'010',
              label: '终端设备名称4（2004）',
            },
          ]
        }, {
          id:'011',
          label: '调度组名称1',
          children: [
            {
              id:'012',
              label: '终端设备名称1（3001）',
            },
            {
              id:'013',
              label: '终端设备名称2（3002）',
            },
            {
              id:'014',
              label: '终端设备名称3（3003）',
            },
            {
              id:'015',
              label: '终端设备名称4（3004）',
            },
          ]
        }],
      phoneList:[
        {id:1,time:'00:12:23',name:'终端设备名称——调度组1'},
        {id:2,time:'00:16:23',name:'终端设备名称——调度组2'},
        {id:3,time:'00:01:23',name:'终端设备名称——调度组2'},
        {id:4,time:'00:11:23',name:'终端设备名称——调度组2'},
      ],
      timer:null,
      time:'',
      date:''
    }
  },
  computed: {
  },
  mounted() {
  },
  created(){
    this.getTime()
  },
  methods: {
    fn(str) {
      let num = null;
      str >= 10 ? (num = str) : (num = "0" + str);
      return num;
    },
    getTime() {
      //获取当前时间
      this.timer = setInterval(() => {
        var date = new Date();
        var year = date.getFullYear(); //当前年份
        var month = date.getMonth(); //当前月份
        var data = date.getDate(); //天
        var hours = date.getHours(); //小时
        var minute = date.getMinutes(); //分
        var second = date.getSeconds(); //秒
        this.day = date.getDay(); //获取当前星期几
        this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second);
        this.date = year + "/" + (month + 1) + "/" + data;
      }, 1000);
    },
    // 切换标题  通讯录/调度组
    changeTitle(item){
      this.activeTit = item
    },
    //选择设备
    enterDevice(item){
      if(item.isSelect == 1){
        return
      }
      this.activeDevice = item.id
    },
    // 鼠标移出设备
    leaveDevice(){
      this.activeDevice = ''
    },
    // 鼠标进入树节点
    enterNode(node,data){
       if(node.level == 1){
        return;
      }else{
        let tmp = this.selectTreeNode.find(item => item == data.id)
        if(tmp){
          return
        }
        this.activeNode = data.id
      }
    },
    // 鼠标移出树节点
    leaveNode(){
      this.activeNode = ''
    },
    //鼠标进入通话记录
    itemHover(item){
      this.activePhone = item.id
    },
    //鼠标移出通话记录
    leavePhone(){
      this.activePhone = ''
    },
    // 点击树节点
    handleNodeClick(data,node){
     
    },
  },
};
</script>

<style lang="scss" scoped>
.voice_box{
  width: 19.2rem;
  height: 10.8rem;
  background: url("~@/assets/image/bag.png")  no-repeat;
  position: absolute;

  .top_header{
    width: 100%;
    height:1.2rem;
    background: url("~@/assets/image/top.png")  no-repeat;
    display: flex;
    justify-content: space-between;

    .left{
      width: 50%;
      .top_title{
        background: url('~@/assets/image/title.png') no-repeat;
        width: 4.22rem;
        height: 0.6rem;
        margin: 0.2rem 0 0 0.76rem;
      }
    }
    .right{
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;

      .top_right{
        width: 100%;
        height: 50%;
        display: flex;
        color: #DCE3F1;
        justify-content: flex-end;
        padding-top: 0.28rem;
        font-family: Microsoft YaHei;


        .date_box{
          font-size: 0.16rem;
          font-family: Microsoft YaHei;
          margin: 0.02rem 0.23rem 0 0;
        }
        .weather_box{
          width: 0.66rem;
          height: 0.44rem;
          display: flex;
          margin-top: -0.15rem;

          img{
            width: 100%;
            height: 100%;
          }
        }
        .weather_txt{
          font-size: 0.2rem;
        }

        .time_txt{
          margin: 0 0.21rem 0 0.33rem;
        }
      }
      .bottom_right{
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;

        .user_box{
          font-family: Microsoft YaHei;
          color: #D6EFFF;
          font-size: 0.16rem;
          display: flex;
          align-items: center;
          height: 0.4rem;

          .name_txt{
            margin: 0 0.33rem 0 0.14rem;
          }

          .exit_txt{
            margin: 0 0.24rem 0 0.09rem;
          }
        }
      }
    }
  }

  .bot_con{
    width: 100%;
    height: 9.24rem;
    margin-top: 0.15rem;
    display: flex;

    .left_con{
      width: 3.38rem;
      height: 100%;
      background: url("~@/assets/image/left_bag.png") no-repeat;
      margin-left: 0.2rem;

      .title_box{
        display: flex;
        margin-top: 0.33rem;
        justify-content: space-around;

        .tit_box{
          height: 0.5rem;
          display: flex;
          align-items: center;
          position: relative;
          cursor: pointer;

          .list_img{
            height: 0.15rem;
          }

          .group_img{
            height: 0.18rem;
          }
          .group_act{
            height: 0.34rem;
          }
          .bot_bor{
            width: 0.25rem;
            height: 0.03rem;
            background: #6CCDFF;
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
          }
        }
      }
      .search_box{
          width: 2.8rem;
          height: 0.35rem;
          display: flex;
          margin: 0 auto;
          margin-top: 0.23rem;

          /deep/ .el-input--suffix .el-input__inner{
            background: rgba(3, 17, 40,0.6) !important;
            border: 1px solid #176CE8 !important;
            border-radius: 2px !important;
            color:  #D6EFFF;
            // box-shadow: inset 0px 0px 0.01rem 0.02rem rgba(65, 167, 255, 0.5);
          }
          /deep/.el-input__inner::placeholder {
            color:  rgba(214, 239, 255,0.6);
          }
          //图标的颜色
          /deep/ .el-input__icon {
            color: #41A7FF !important;
          }
        }
      .list_box{
        width: 92%;
        height: 6.6rem;
        margin: 0 auto;
        margin-top: 0.33rem;
        overflow: auto;

        .list_item{
          width: 2.8rem;
          height: 0.35rem;
          cursor: pointer;
          margin: 0 auto;
          color: #D6EFFF;
          position: relative;
          margin-bottom: 0.15rem;

          &.dev_act{
            background: rgba(3, 17, 40,0.6);
            border: 1px solid #176CE8;
            border-radius: 2px;
          }

          &.sele_devi{
            opacity: 0.4;
          }

          .left_bor{
            width: 0.03rem;
            height: 0.35rem;
            background: #6CCDFF;
            position: absolute;
            left: -0.08rem;
          }

          .dev_img{
            display: flex;
            float: left;
            height: 100%;
            display: flex;
            align-items: center;
            margin: 0 0.06rem 0 0.16rem;
            img{
              width: 0.28rem;
              height: 0.28rem;
            }
          }
          .device_name{
            float: left;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 0.35rem;
          }
          .dev_btn{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            float: right;
            width: 0.5rem;
            height: 0.25rem;
            margin-right: 0.05rem;
            margin-top: 0.045rem;
            background: #176CE8;
            border-radius: 2px;
            color: #fff;
            text-align: center;
            line-height: 0.25rem;
          }
        }
      }
      .list_box::-webkit-scrollbar{
        width: 0.05rem;
        height: 6.87rem;
        background: rgba(23, 108, 232,0.4);
        border-radius:0.03rem;
      }
      .list_box::-webkit-scrollbar-thumb{ 
        display:block; 
        margin:0 auto; 
        width: 0.05rem;
        background: rgba(108, 205, 255,0.6);
        border-radius: 0.03rem;
      }

      .btn_box{
        width: 1rem;
        height: 0.3rem;
        background: rgba(23, 108, 232,0.8);
        border-radius: 0.04rem;
        color:#D6EFFF;
        font-size: 0.14rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        margin-top: 0.25rem;

        img{
          margin-right: 0.1rem;
        }
      }

      .tree_box{
        width: 92%;
        height: 6.6rem;
        margin: 0 auto;
        margin-top: 0.33rem;
        overflow: auto;

        .el-tree{
          background: transparent;
          font-size: 0.14rem;
          color: #fff;

          /deep/.el-tree-node__content{
            width: 2.8rem;
            margin: 0 auto;
            height: 0.35rem;
            margin-bottom: 0.15rem;
            padding: 0 !important;
          }

        .spread_node{
          background: url("~@/assets/image/spread_btn.png");
          width: 0.18rem;
          height: 0.18rem;
          display: inline-block;
          background-size: 100% 100%;
          float: left;
          margin-top: 0.085rem;
        }
        .level_first {
          background: url("~@/assets/image/tree.png");
          width: 0.28rem;
          height: 0.28rem;
          display: inline-block;
          background-size: 100% 100%;
          float: left;
          margin-top: 0.035rem;
          margin-right: 0.05rem;
        }
        .level_second {
          background: url("~@/assets/image/device.png");
          width: 0.28rem;
          height: 0.28rem;
          display: inline-block;
          background-size: 100% 100%;
          float: left;
          margin-top: 0.02rem;
          margin-left: 0.16rem;
          margin-right: 0.06rem;
        }
        .first_span{
          color: #41A7FF;
          line-height: 0.35rem;
        }

        .second_span{
          color: #D6EFFF;
          line-height: 0.35rem;
        }

        .btn_level{
          display: inline-block;
          width: 0.3rem;
          width: 0.5rem;
          height: 0.25rem;
          background: #176CE8;
          border-radius: 0.02rem;
          text-align: center;
          float: right;
          margin: 0.05rem;
          line-height: 0.25rem;
        }

        /deep/.is-expanded{
          .spread_node{
            transform: rotate(90deg);
          }
        }
        /deep/.is-checked{
          .custom-tree-node{
            opacity: 0.4;
          }
        }
        /deep/.el-tree-node.is-current>.el-tree-node__content{
          background: transparent;
        }

        /deep/ .custom-tree-node{
          width: 100%;
          height: 0.35rem;
          margin-top: 0.03rem;
        }

        /deep/ .active_node_item{
          background: rgba(3, 17, 40,0.6);
          border: 1px solid #176CE8;
          border-radius: 0.02rem;
          .second_span{
            color: #41A7FF;
          }

          .active_level_second{
            background: url("~@/assets/image/device_act.png");
          }
        }

        /deep/ .select_node_item{
          opacity: 0.4;
        }

        /deep/ .el-tree-node__content:hover{
          background: transparent;
        }
        /deep/.el-icon-caret-right:before{
          content: none;
        }
        /deep/ .el-tree-node.is-current>.el-tree-node__content{
          color: #fff;
        }

        }
      }
      .tree_box::-webkit-scrollbar{
        width: 0.05rem;
        height: 6.87rem;
        background: rgba(23, 108, 232,0.4);
        border-radius:0.03rem;
      }
      .tree_box::-webkit-scrollbar-thumb{ 
        display:block; 
        margin:0 auto; 
        width: 0.05rem;
        background: rgba(108, 205, 255,0.6);
        border-radius: 0.03rem;
      }
    }
    

    .cen_con{
      width: 11.68rem;
      height: 100%;
      background: url("~@/assets/image/cen_bag.png") no-repeat;
      margin: 0 0.2rem;

      .cen_tit{
        height: 0.37rem;
        display: flex;
        margin: 0.33rem 0 0 0.2rem;
      }

      .bottom_cen{
        width: 11.2rem;
        height: 7.35rem;
        margin: 0 auto;

        .bottom_item{
          width: 3.6rem;
          height: 2.25rem;
          background: #233449;
          margin-top: 0.2rem;
          display: flex;
          flex-direction: column;

          .item_tit{
            width:100%;
            margin: 0.2rem 0 0 0.2rem;
            font-size: 0.14rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #D6EFFF;
          }
          .voice_con{
            width: 100%;
            height: 0.18rem;
            display: flex;
            justify-content: center;
            margin-top: 0.8rem;
          }

          .voice_btn{
            display: flex;
            justify-content: end;
            margin-top: 0.37rem;

            .hang_btn{
              margin: 0 0.18rem 0 0.1rem;
            }
          }
        }
      }
      .group_cen{
        width: 11.2rem;
        height: 7.35rem;
        margin: 0 auto;
        background: #233449;
        margin-top: 0.2rem;
        display: flex;
        flex-direction: column;

        .group_tit{
          width: 100%;
          font-size: 0.14rem;
          margin: 0.2rem 0 0 0.2rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #D6EFFF;
        }

        .group_voice{
          width: 100%;
          display: flex;
          margin-top: 3.18rem;
          justify-content: center;
        }

        .voice_btn{
          display: flex;
          justify-content: end;
          margin-top: 3.07rem;

          .hang_btn{
            margin: 0 0.18rem 0 0.1rem;
          }
        }
      }

      .bot_cen{
        width: 100%;
        height: 0.44rem;
        margin-top: 0.3rem;
        display: flex;
        justify-content: end;

        .exit{
          margin: 0 0.3rem;
        }
      }
    }
    .right_con{
      width: 3.36rem;
      height: 100%;
      background: url("~@/assets/image/right_bag.png") no-repeat;

      .right_tit{
        display: flex;
        margin-top: 0.43rem;
        margin-left: 0.28rem;
      }

      .phone_box{
        width: 2.8rem;
        height: 3rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;

        .phone_tit{
          font-size: 0.18rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #3593F8;
          display: flex;
          align-items: center;
          margin: 0.15rem 0 0 0.18rem;

          .point{
            width: 0.1rem;
            height: 0.1rem;
            display: inline-block;
            background: #3593F8;
            border-radius: 50%;
            margin-right: 0.04rem;
          }
        }

        .phone_list{
          width: 100%;
          margin-top: 0.16rem;
          padding-bottom: 0.1rem;
          border-bottom: 1px dashed #2C81DB;
          
          
          .phone_item{
            width: 100%;
            height: 0.35rem;
            margin-bottom: 0.15rem;
            cursor: pointer;
            position: relative;

            

            &.active_phone{
              background: rgba(3, 17, 40,0.6);
              border: 1px solid #176CE8;
              border-radius: 0.02rem;
            }

            .time_box{
              height: 100%;
              float: left;
              display: flex;
              align-items: center;
              font-size: 0.14rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #D6EFFF;
              margin-left: 0.15rem;
            }

            .center_txt{
              float: left;
              height: 100%;
              display: flex;
              align-items: center;
              font-size: 0.14rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #D6EFFF;

              .img{
                margin: 0 0.08rem 0 0.06rem;
              }
            }

            .left_item{
              width: 0.03rem;
              height: 0.35rem;
              background: #6CCDFF;
              position: absolute;
              left: -0.08rem;
            }

            .item_btn{
              width: 0.5rem;
              height: 0.25rem;
              background: #D83030;
              font-size: 0.14rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #FFFFFF;
              position: absolute;
              right: 0.05rem;
              top: 50%;
              transform: translateY(-50%);
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 0.02rem;
            }
          }
        }

        .miss_tit{
           font-size: 0.18rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #E8991D;
          display: flex;
          align-items: center;
          margin: 0.3rem 0 0 0.18rem;

          .point{
            width: 0.1rem;
            height: 0.1rem;
            display: inline-block;
            background: #E8991D;
            border-radius: 50%;
            margin-right: 0.04rem;
          }
        }

        .miss_list{
          width: 100%;
          margin-top: 0.16rem;

          .miss_item{
            width: 100%;
            height: 0.35rem;
            margin-bottom: 0.15rem;
            cursor: pointer;
            opacity: 0.4;

            .miss_time{
              height: 100%;
              float: left;
              display: flex;
              align-items: center;
              font-size: 0.14rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #D6EFFF;
              margin-left: 0.15rem;
              margin-right: 0.2rem;
            }

            .miss_name{
              float: left;
              height: 100%;
              display: flex;
              align-items: center;
              font-size: 0.14rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #D6EFFF;
            }
          }
        }

        
      }
    }
  }
}
</style>