<template>
  <div>
    <router-view></router-view>

    <div :class="`menu `" style="left: 2%"
         @click="toLink('index2','1')">
                <span>
                    监控主页
                </span>
    </div>
    <div :class="`menu`" style="left: 9%">
      <el-dropdown trigger="click" @command="dropdownLink">
                    <span class="el-dropdown-link">
                        智慧场景 <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
        <el-dropdown-menu slot="dropdown">
          <div class="topNavScroll"
               style="max-height: 300px;overflow: auto;background-color: #053563;padding: 0;border: none;">

            <el-dropdown-item command="index">
                <span style="color: #f8fefd">
                  智能巡检
                </span>
            </el-dropdown-item>
            <el-dropdown-item command="index1">
                <span style="color: #f8fefd">
                  无线测温
                </span>
            </el-dropdown-item>
          </div>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <div class="right">
                <span>
                    管 理
                </span>
    </div>
    <div class="rightImg" @click="toIndex">
    </div>
  </div>
</template>

<script>

export default {
  name: 'BoardIndex',
  data() {
    return {}
  },
  methods: {
    toIndex() {
      this.$router.replace({path: "/index"});
    },
    async dropdownLink(e,) {
      await this.$router.replace({path: "/board/" + e});
    },
    toLink(e, nowMenu) {
        this.$router.replace({path: "/board/" + e});
    },
  }
}
</script>
<style scoped>


.el-dropdown-menu {
  padding: 0 !important;
  border: none !important;
}

.topNavScroll::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.el-dropdown-menu__item:not(.is-disabled):hover span {
  color: #053563 !important;
}

/deep/ .el-upload-dragger {
  width: 100%;
}

/deep/ .el-upload {
  width: 100%;
}
.menu {
  background-image: url("~@/assets/board/subheadClick1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 8vw;
  height: 1.66vw;
  top: 5.2%;
  line-height: 1.66vw;
  font-size: 0.8vw;
  color: #d4d4d4;
  text-align: center;
}

.menu .el-dropdown {
  font-size: 0.8vw;
  color: #d4d4d4;
}
.rightImg {
  transform: rotateX(180deg);
  background-image: url('~@/assets/board/subheadClick1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 8vw;
  height: 1.66vw;
  top: 5.2%;
  left: 71%;
}

.right {
  position: absolute;
  width: 8vw;
  height: 1.66vw;
  top: 5.2%;
  left: 71%;
  line-height: 1.66vw;
  font-size: 0.8vw;
  color: #d4d4d4;
  text-align: center;
}
</style>
