<template>
  <div>
    <div class="title">智慧物联监控平台</div>
    <div>
      <div :class="`menu ${nowMenu==='1'? 'menuClick' :''}`" style="left: 2%">
                <span>
                    监控主页
                </span>
      </div>
      <div :class="`menu ${nowMenu==='2'? 'menuClick' :''}`" style="left: 9%">
        <el-dropdown trigger="click">
                    <span class="el-dropdown-link">
                        智慧场景 <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item>双皮奶</el-dropdown-item>
            <el-dropdown-item>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div :class="`menu ${nowMenu==='3'? 'menuClick' :''}`" style="left: 16%">
                <span>
                    设备监测
                </span>
      </div>
      <div :class="`menu ${nowMenu==='4'? 'menuClick' :''}`" style="left: 23%">
                <span>
                    传感器汇总
                </span>
      </div>
    </div>

    <div class="right" >
                <span>
                    管 理
                </span>
    </div>

    <div class="rightImg" >
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {}
  },
  props: {
    nowMenu: {
      type: String,
      default: '1'
    },
  },

  mounted() {
  },
  methods: {}
};
</script>
<style lang="less" scoped>

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

.menu .el-dropdown {
  font-size: 0.8vw;
  color: #d4d4d4;
}

.menuClick {
  background-image: url("~@/assets/board/common/subheadClick.png");
  color: #f3f3f3;
}

.title {
  position: absolute;
  top: 3%;
  left: 50%;
  font-size: 2vw;
  letter-spacing: 12px;
  transform: translate(-50%, -50%);
  color: #f6f6f6;
}
.rightImg{
  transform: rotateX(180deg);
  background-image: url('~@/assets/board/common/subheadClick1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 8vw;
  height: 1.66vw;
  top: 3.8%;
  left: 71%;
}
.right{
  position: absolute;
  width: 8vw;
  height: 1.66vw;
  top: 3.8%;
  left: 71%;
  line-height: 1.66vw;
  font-size: 0.8vw;
  color: #d4d4d4;
  text-align: center;
}
</style>
