<template>
  <div class="main">
    <Header/>
    <div class="main_t">
      <div class="main_t_t">
        <i class="main_t_t_l">当前位置：首页 &gt;</i>
        <i>实验室分类分级</i>
      </div>
      <div class="max-big-box">
        <div class="left-big-box">
          <div class="max-building-box scrollbar-box">
            <div class="for-building-box" v-if="item.buildFloorVoList[0]"
                 v-for="(item,index) in buildingOptions" :key="index">
              <p :class="item.id == campusId?'check-item-color':''" class="item-name">{{item.name}}</p>
              <div class="min-for-box" @click="buildingButton(index,minIndex)" v-if="minItem.buildFloorVoList[0]"
                   v-for="(minItem,minIndex) in item.buildFloorVoList">
                <p :class="minItem.id == buildingId?'check-item-back':''"></p>
                <p :class="minItem.id == buildingId?'check-item-color':''">{{minItem.name}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="center-big-box">
          <div class="center-map-big-box" ref="centerBox">
            <div class="evacuation-shade-map-big-box"
                 v-if="newMapData"
                 :style="'width:'+newMapData.width+'px;height:'+newMapData.height+'px;transform: scale('+newMapData.zoomData+');margin-top:-'+newMapData.height/2+'px;margin-left:-'+newMapData.width/2+'px;'">
              <div class="evacuation-shade-map-box"
                   :style="'width:'+newMapData.width+'px;height:'+newMapData.height+'px;'">
                <div class="evacuation-shade-map-for-box for-map-box-one"
                     v-for="(item,index) in newMapData.mapList" :key="index" v-if="item.type == 1"
                     :style="'background:'+item.classifiedColor+';top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                  <div class="evacuation-shade-map-min-box">
                    <!--名称/实验室名称-->
                    <el-tooltip class="item" effect="dark"
                                :content="item.roomType != '1'?item.roomName:item.subName"
                                placement="top">
                      <p class="map-for-name-p" :style="'margin-top:'+((item.h/2)-25)+'px;'">
                        {{item.roomType != '1'?item.roomName:item.subName}}</p>
                    </el-tooltip>
                    <!--编号-->
                    <el-tooltip class="item" effect="dark" :content="item.roomNum"
                                placement="top">
                      <p class="map-for-num-p">{{item.roomNum}}</p>
                    </el-tooltip>
                  </div>
                </div>
                <div class="evacuation-shade-map-for-box for-map-box"
                     v-for="(item,indexOne) in newMapData.mapList" :key="indexOne" v-if="item.type == 2"
                     :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                  <div class="evacuation-shade-map-min-box"></div>
                </div>
                <div class="evacuation-shade-map-for-box for-map-box-two"
                     v-for="(item,indexTwo) in newMapData.mapList" :key="indexTwo" v-if="item.type == 3"
                     @click="shadeCheckRoomClick(item)"
                     :class="item.roomCheckType?'for-map-box-two-check':''"
                     :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                  <div class="evacuation-shade-map-min-box"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="center-bottom-max-big-box scrollbar-x-box">
            <div class="center-bottom-for-big-box" v-if="mapData.mapList[0]"
                 :class="mapData.id==floorId?'checkFloor':''"
                 @click="floorCheck(bigIndex)"
                 v-for="(mapData,bigIndex) in floorList" :key="mapData.id">
              <div class="center-bottom-for-min-box">
                <div class="evacuation-shade-map-big-box"
                     :style="'width:'+mapData.minWidth+'px;height:'+mapData.minHeight+'px;transform: scale('+mapData.minZoomData+');margin-top:-'+mapData.minHeight/2+'px;margin-left:-'+mapData.minWidth/2+'px;'">
                  <div class="evacuation-shade-map-box"
                       :style="'width:'+mapData.minWidth+'px;height:'+mapData.minHeight+'px;'">
                    <div class="evacuation-shade-map-for-box "
                         :class="item.type==1?'for-map-box-one':(item.type==2?'for-map-box':(item.type==3?'for-map-box-two':''))"
                         v-for="(item,index) in mapData.mapList" :key="item.key"
                         v-if="item.type == 1 || item.type == 2 || item.type == 3"
                         :style="'background:'+item.classifiedColor+';top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                      <div class="evacuation-shade-map-min-box" v-if="item.type == 1">
                        <!--名称/实验室名称-->
                        <p class="map-for-name-p" :style="'margin-top:'+((item.h/2)-25)+'px;'">
                          {{item.roomType == '-99'?item.roomName:item.subName}}</p>
                        <!--编号-->
                        <p class="map-for-num-p">{{item.roomNum}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <p class="max-for-name-p">{{mapData.name}}</p>
            </div>
            <div class="center-bottom-for-big-box-position" ref="minForBox"></div>
          </div>
        </div>
        <div class="right-big-box">
          <div class="lv-max-box scrollbar-box">
            <div class="lv-for-box" v-for="(item,index) in lvList" :key="index">
              <p :style="'background:'+item.titleColor+';'"></p>
              <p>{{item.titleName}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getNoAuthTreeList,
    getBuildOrFloorDetailList,
    getNoAuthList,
    classTypeListAll,
    laboratoryLabDeptTreeLargeTree
  } from '@/api/index'
  import {
    laboratoryLevelConfigGetLevelTitleList,
    laboratoryBigViewGetFloorListByBigView,
    laboratoryBuildLayoutGetTreeSonList,
    systemBuildingGetTreeList
  } from '@/api/index'
  import Header from '@/components/header.vue'

  export default {
    components: {
      Header
    },
    data() {
      return {
        //校区ID
        campusId: null,
        //楼栋数据
        buildingOptions: [],
        buildingId: null,
        //楼层数据
        floorList: [],
        floorId: null,
        //分级数据
        lvList: [],
        //大图缩放比例
        zoomData: null,
        //小图缩放比例
        minZoomData: null,
        //地图数据
        newMapData: null,
        //地图窗口尺寸
        mapBoxWidth: null,
        mapBoxHeight: null,
        //小地图窗口尺寸
        minMapBoxWidth: null,
        minMapBoxHeight: null
      }
    },
    created() {

    },
    mounted() {
      this.laboratoryLabDeptTreeLargeTree();
      this.laboratoryLevelConfigGetLevelTitleList()
    },
    methods: {
      laboratoryLabDeptTreeLargeTree() {
        let obj = {};
        if(!localStorage.getItem('deptId')){
          obj.buildingId = localStorage.getItem('buildId');
        }else{
          obj.deptId = localStorage.getItem('deptId');
        }
        laboratoryLabDeptTreeLargeTree(obj).then(response => {
          this.$set(this, 'buildingOptions', response.data)
          this.laboratoryBigViewGetFloorListByBigView(response.data[0].id, response.data[0].buildFloorVoList[0].id)
        })
      },
      //楼栋选择
      buildingButton(index, minIndex) {
        if (this.campusId == this.buildingOptions[index].id && this.buildingId == this.buildingOptions[index].buildFloorVoList[minIndex].id) {

        } else {
          this.laboratoryBigViewGetFloorListByBigView(this.buildingOptions[index].id, this.buildingOptions[index].buildFloorVoList[minIndex].id)
        }
      },
      //获取楼层数据
      laboratoryBigViewGetFloorListByBigView(campusId, buildingId) {
        let self = this
        this.$set(this, 'mapBoxWidth', parseInt(this.$refs.centerBox.getBoundingClientRect().width))
        this.$set(this, 'mapBoxHeight', parseInt(this.$refs.centerBox.getBoundingClientRect().height))
        this.$set(this, 'minMapBoxWidth', parseInt(this.$refs.minForBox.getBoundingClientRect().width))
        this.$set(this, 'minMapBoxHeight', parseInt(this.$refs.minForBox.getBoundingClientRect().height))
        laboratoryBigViewGetFloorListByBigView({ id: buildingId }).then((response) => {
          if (response.code == 200) {
            let list = []
            for (let i = 0; i < response.data.length; i++) {
              if (response.data[i].buildLayoutVoList) {
                if (response.data[i].buildLayoutVoList[0]) {
                  this.$set(this, 'floorId', null)
                  let obj = {
                    id: response.data[i].id,
                    name: response.data[i].name,
                    parentId: response.data[i].parentId,
                    subNum: response.data[i].subNum,
                    buildFloorLayoutVoList: response.data[i].buildLayoutVoList,
                    checkType: i == 0 ? true : false
                  }
                  let minList = JSON.parse(response.data[i].labExitLineVo.layoutJoinData)
                  for (let x = 0; x < minList.length; x++) {
                    if (minList[x].type == '1') {
                      for (let o = 0; o < response.data[i].buildLayoutVoList.length; o++) {
                        if (minList[x].key == response.data[i].buildLayoutVoList[o].pointName) {
                          minList[x].id = response.data[i].buildLayoutVoList[o].id
                          minList[x].buildId = response.data[i].buildLayoutVoList[o].buildId
                          minList[x].floorId = response.data[i].buildLayoutVoList[o].floorId
                          minList[x].roomType = response.data[i].buildLayoutVoList[o].roomType
                          minList[x].roomName = response.data[i].buildLayoutVoList[o].roomName
                          minList[x].roomNum = response.data[i].buildLayoutVoList[o].roomNum
                          minList[x].subName = response.data[i].buildLayoutVoList[o].subName
                          minList[x].subId = response.data[i].buildLayoutVoList[o].subId
                          minList[x].classifiedId = response.data[i].buildLayoutVoList[o].classifiedId ? response.data[i].buildLayoutVoList[o].classifiedId : ''
                          minList[x].classifiedColor = response.data[i].buildLayoutVoList[o].levelColor ? response.data[i].buildLayoutVoList[o].levelColor : '#093751'
                          minList[x].typeId = response.data[i].buildLayoutVoList[o].typeId ? response.data[i].buildLayoutVoList[o].typeId : ''
                        }
                      }
                    }
                  }
                  let minObj = this.calculateMapMax(minList, this.mapBoxHeight, this.mapBoxWidth)
                  let minObjTwo = this.calculateMapMax(minList, this.minMapBoxHeight, this.minMapBoxWidth)
                  obj.width = minObj.maxWidth
                  obj.height = minObj.maxHeight
                  obj.zoomData = minObj.zoomData
                  obj.minWidth = minObjTwo.maxWidth
                  obj.minHeight = minObjTwo.maxHeight
                  obj.minZoomData = minObjTwo.zoomData
                  obj.mapList = JSON.parse(JSON.stringify(minList))
                  list.push(obj)
                }
              }
            }
            if (list[0]) {
              this.$set(this, 'campusId', campusId)
              this.$set(this, 'buildingId', buildingId)
              this.$set(this, 'floorList', list)
              this.$set(this, 'floorId', list[0].id)
              this.floorCheck(0)
            } else {
              this.$message({
                type: 'error',
                message: '该楼栋下未配置楼层',
                iconClass: '123'
              })
            }
          } else {
            this.$message({
              type: 'error',
              message: '该楼栋下未配置楼层',
              iconClass: '123'
            })
          }
        })
      },
      //选中楼层
      floorCheck(index) {
        if (index != this.floorId) {
          this.$set(this, 'newMapData', this.floorList[index])
          this.$set(this, 'floorId', this.floorList[index].id)
          this.$forceUpdate
        }
      },
      //获取实验室数据
      getNoAuthList() {
        getNoAuthList().then((response) => {
          if (response.code == 200) {

          }
        })
      },
      //获取分级数据
      laboratoryLevelConfigGetLevelTitleList() {
        laboratoryLevelConfigGetLevelTitleList({}).then((response) => {
          if (response.code == 200) {
            this.$set(this, 'lvList', response.data)
          }
        })
      },
      //返回按钮
      back() {
        this.$router.push('/home')
      },
      //计算布局最大尺寸
      calculateMapMax(list, height, width) {
        //基础参数
        let maxWidth = 0
        let maxHeight = 0
        let zoomData = 1
        //参数处理
        for (let i = 0; i < list.length; i++) {
          if ((list[i].x + list[i].w) > maxWidth) {
            maxWidth = list[i].x + list[i].w
          }
          if ((list[i].y + list[i].h) > maxHeight) {
            maxHeight = list[i].y + list[i].h
          }
        }
        //处理等值数据
        if (maxHeight == height) {
          maxHeight++
        }
        if (maxWidth == width) {
          maxWidth++
        }
        //缩放判断
        let zoomNumOne = height / maxHeight
        if (parseInt(this.accMul(zoomNumOne, maxHeight)) <= height && parseInt(this.accMul(zoomNumOne, maxWidth)) <= width) {
          zoomData = zoomNumOne
        }
        let zoomNumTwo = width / maxWidth
        if (parseInt(this.accMul(zoomNumTwo, maxHeight)) <= height && parseInt(this.accMul(zoomNumTwo, maxWidth)) <= width) {
          zoomData = zoomNumTwo
        }
        return { maxWidth: maxWidth, maxHeight: maxHeight, zoomData: zoomData }
      },
      accMul(arg1, arg2) {
        var m = 0, s1 = arg1.toString(), s2 = arg2.toString()
        try {
          m += s1.split('.')[1].length
        } catch (e) {
        }
        try {
          m += s2.split('.')[1].length
        } catch (e) {
        }
        return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .main {
    width: 1920px;
    height: 1080px;
    /* background: url("../img/index_bg.png") no-repeat;
     background-size: 100% 100%;*/
    position: relative;
    left: 0;
    top: 0;
    z-index: 50;
    background: #062338;
    .main_t {
      width: 1852px;
      height: 955px;
      position: absolute;
      left: 34px;
      top: 86px;
      z-index: 200;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: #093751;
      margin-top: 20px;
      .main_t_t {
        margin: 20px 0 0 18px;
        > i {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #FFFFFF;
          line-height: 16px;
        }
        > i:nth-of-type(1) {

        }
        > i:nth-of-type(2) {
          color: #1ED0F8;
        }
      }
      .max-big-box {
        flex: 1;
        display: flex;
        overflow: hidden;
        .left-big-box {
          width: 270px;
          height: 880px;
          overflow: hidden;
          margin-left: 20px;
          .max-building-box {
            margin-top: 80px;
            margin-right: 20px;
            height: 800px;
            .for-building-box:nth-child(1) {
              border: none;
            }
            .for-building-box {
              margin-right: 20px;
              margin-bottom: 20px;
              border-top: 1px dashed #1095FB;
              .item-name {
                margin-top: 20px;
                flex: 1;
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #fff;
                font-size: 16px;
                line-height: 20px;
                margin-bottom: 20px;
              }
              .min-for-box {
                cursor: pointer;
                display: flex;;
                margin-bottom: 10px;
                p:nth-child(1) {
                  width: 10px;
                  height: 10px;
                  margin: 5px 10px 5px 20px;
                  border-radius: 50%;
                }
                p:nth-child(2) {
                  flex: 1;
                  display: block;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  color: #fff;
                  font-size: 14px;
                  line-height: 20px;
                }
              }
              .check-item-back {
                background: #1ED0F8;
              }
              .check-item-color {
                color: #1ED0F8 !important;
              }
            }
          }
        }
        .center-big-box {
          /*background: #fff;*/
          display: flex;
          flex-direction: column;
          flex: 1;
          overflow: hidden;
          .center-map-big-box {
            margin-top: 80px;
            height: 600px;
            /*background: #0E9EED;*/
            position: relative;
            .evacuation-shade-map-big-box {
              position: absolute;
              top: 50%;
              left: 50%;
              -webkit-user-select: none;
              .evacuation-shade-map-box {
                position: relative;
                border: 1px dashed #fff;
                overflow: hidden;
                .evacuation-shade-map-for-box {
                  position: absolute;
                  display: flex;
                  flex-direction: column;
                  overflow: hidden;
                  .evacuation-shade-map-min-box {
                    height: 100%;
                    position: relative;
                    .map-for-name-p {
                      padding: 0 10px;
                      height: 20px;
                      line-height: 20px;
                      font-size: 16px;
                      text-align: center;
                      color: #fff;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    }
                    .map-for-num-p {
                      margin-top: 10px;
                      padding: 0 10px;
                      height: 20px;
                      line-height: 20px;
                      font-size: 16px;
                      text-align: center;
                      color: #fff;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    }
                    .position-box {
                      position: absolute;
                      font-size: 14px;
                      overflow: hidden;
                    }
                    .center-move-door-p-t {
                      background: url("../../assets/image/icon_pmbjt_m.png") !important;
                      background-size: 100% !important;
                      transform: rotate(180deg);
                    }
                    .center-move-door-p-b {
                      background: url("../../assets/image/icon_pmbjt_m.png") !important;
                      background-size: 100% !important;
                    }
                    .center-move-door-p-l {
                      background: url("../../assets/image/icon_pmbjt_m.png") !important;
                      background-size: 100% !important;
                      transform: rotate(90deg);
                    }
                    .center-move-door-p-r {
                      background: url("../../assets/image/icon_pmbjt_m.png") !important;
                      background-size: 100% !important;
                      transform: rotateZ(270deg);
                    }
                  }
                }
                .for-map-box-one {
                  /*background: rgba(7, 36, 54, 1px;*/
                  border: 1px solid #fff;
                }
                .for-map-box {
                  /*background: rgba(1,16,32,1px;*/
                  /*background: rgba(6, 30, 48, 1px;*/
                }
                .for-map-box-two {
                  /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 1px;*/
                  background: url("../../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 0);
                  background-size: 80px 80px;
                }
                .for-map-box-two-check {
                  /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 1px;*/
                  background: url("../../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 0);
                  background-size: 80px 80px;
                }
                .room-type-one {
                  //选中
                  background: rgba(30, 118, 142, 0.4);
                }
                .room-type-two {
                  //报警
                  background: rgba(232, 0, 0, 0.4);
                  box-shadow: 0 0 10px 1px #E80000 inset;
                }
                .room-type-three {
                  //选中报警
                  background: rgba(30, 118, 142, 0.4);
                  box-shadow: 0 0 10px 1px #E80000 inset;
                }
                .room-type-noe {
                  /*border:1px solid #666;*/
                  /*background: rgba(102,102,102,0.6px;*/
                }
              }
            }
          }
          .center-bottom-max-big-box {
            margin-top: 40px;
            width: 1270px;
            height: 220px;
            white-space: nowrap;
            .center-bottom-for-big-box:nth-child(1) {
              margin-left: 0;
            }
            .center-bottom-for-big-box {
              cursor: pointer;
              margin-left: 20px;
              display: inline-block;
              width: 300px;
              height: 200px;
              .center-bottom-for-min-box {
                width: 302px;
                height: 162px;
                border: 1px solid #666;
                position: relative;
                .evacuation-shade-map-big-box {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  -webkit-user-select: none;
                  .evacuation-shade-map-box {
                    position: relative;
                    overflow: hidden;
                    .evacuation-shade-map-for-box {
                      position: absolute;
                      display: flex;
                      flex-direction: column;
                      overflow: hidden;
                      .evacuation-shade-map-min-box {
                        height: 100%;
                        position: relative;
                        .map-for-name-p {
                          padding: 0 10px;
                          height: 20px;
                          line-height: 20px;
                          font-size: 16px;
                          text-align: center;
                          color: #fff;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                        }
                        .map-for-num-p {
                          margin-top: 10px;
                          padding: 0 10px;
                          height: 20px;
                          line-height: 20px;
                          font-size: 16px;
                          text-align: center;
                          color: #fff;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                        }
                        .position-box {
                          position: absolute;
                          font-size: 14px;
                          overflow: hidden;
                        }
                        .center-move-door-p-t {
                          background: url("../../assets/image/icon_pmbjt_m.png") !important;
                          background-size: 100% !important;
                          transform: rotate(180deg);
                        }
                        .center-move-door-p-b {
                          background: url("../../assets/image/icon_pmbjt_m.png") !important;
                          background-size: 100% !important;
                        }
                        .center-move-door-p-l {
                          background: url("../../assets/image/icon_pmbjt_m.png") !important;
                          background-size: 100% !important;
                          transform: rotate(90deg);
                        }
                        .center-move-door-p-r {
                          background: url("../../assets/image/icon_pmbjt_m.png") !important;
                          background-size: 100% !important;
                          transform: rotateZ(270deg);
                        }
                      }
                    }
                    .for-map-box-one {
                      /*background: rgba(7, 36, 54, 1px;*/
                      border: 1px solid #fff;
                    }
                    .for-map-box {
                      /*background: rgba(1,16,32,1px;*/
                      /*background: rgba(6, 30, 48, 1px;*/
                    }
                    .for-map-box-two {
                      /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 1px;*/
                      background: url("../../assets/image/icon_jjck.png") center center no-repeat rgba(6, 35, 56, 0) !important;
                      background-size: 80px 80px;
                    }
                    .for-map-box-two-check {
                      /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 1px;*/
                      background: url("../../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 0);
                      background-size: 80px 80px;
                    }
                    .room-type-one {
                      //选中
                      background: rgba(30, 118, 142, 0.4);
                    }
                    .room-type-two {
                      //报警
                      background: rgba(232, 0, 0, 0.4);
                      box-shadow: 0 0 10px 1px #E80000 inset;
                    }
                    .room-type-three {
                      //选中报警
                      background: rgba(30, 118, 142, 0.4);
                      box-shadow: 0 0 10px 1px #E80000 inset;
                    }
                    .room-type-noe {
                      /*border:1px solid #666;*/
                      /*background: rgba(102,102,102,0.6px;*/
                    }
                  }
                }
              }
              .max-for-name-p {
                line-height: 40px;
                font-size: 18px;
                color: #fff;
                text-align: center;
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .checkFloor {
              .center-bottom-for-min-box {
                border: 1px solid #1ED0F8 !important;
              }
              .max-for-name-p {
                color: #1ED0F8 !important;
              }
            }
            .center-bottom-for-big-box-position {
              position: absolute;
              top: 9999px;
              left: 9999px;
              z-index: -100;
              display: inline-block;
              width: 300px;
              height: 160px;
            }
          }
        }
        .right-big-box {
          width: 290px;
          height: 880px;
          overflow: hidden;
          .lv-max-box {
            height: 800px;
            margin-top: 80px;
            margin-left: 100px;
            .lv-for-box {
              display: flex;
              margin-bottom: 18px;
              p:nth-child(1) {
                width: 18px;
                height: 18px;
              }
              p:nth-child(2) {
                margin-left: 20px;
                color: #fff;
                font-size: 16px;
              }
            }
          }
        }
        //滚动条
        .scrollbar-box {
          overflow-y: scroll;
        }
        .scrollbar-box::-webkit-scrollbar {
          width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
          height: 4px;
        }
        .scrollbar-box::-webkit-scrollbar-thumb {
          border-radius: 5px;
          -webkit-box-shadow: inset 0 0 5px #999;
          background: #fff;
        }
        .scrollbar-box::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0);
          border-radius: 0;
          background: rgba(255, 255, 255, 0);
        }
        .scrollbar-x-box {
          overflow-y: hidden;
          overflow-x: scroll;
        }
        .scrollbar-x-box::-webkit-scrollbar {
          width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
          height: 4px;
        }
        .scrollbar-x-box::-webkit-scrollbar-thumb {
          border-radius: 5px;
          -webkit-box-shadow: inset 0 0 5px #999;
          background: #fff;
        }
        .scrollbar-x-box::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0);
          border-radius: 0;
          background: rgba(255, 255, 255, 0);
        }
      }
      .main_t_b {
        position: absolute;
        width: 1490px;
        height: 794px;
        margin-left: 282px;
        margin-top: 80px;
      }
    }

  }
</style>
<style lang="scss">
  li {
    list-style: none
  }

  i, em, b {
    font-style: normal;
    font-weight: 100;
  }

  body {
    margin: 0
  }
</style>
