<template>
  <div class="container">
    <div class="centerImg"></div>
    <div class="leftMenu">
      <div v-for="i in 10" class="item">
        <span>温度传感器</span>
      </div>
    </div>
    <div class="right">
      <div class="select">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="list">
        <div v-for="i in 20" class="item"></div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  components: {
  },
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  },
  mounted() {
  },
  methods: {}
};
</script>
<style lang="less" scoped>
.container {
  background-image: url("~@/assets/board/allScenes/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: calc(100vh);
  position: relative;
}


.leftMenu::-webkit-scrollbar {
  width: 0;
}

.leftMenu {
  position: absolute;
  width: 14%;
  height: 84%;
  top: 12%;
  left: 2%;
  padding: 1vw;
  overflow: auto;

  .item {
    background-image: url("~@/assets/board/allScenes/item.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 12vw;
    height: 5.1vw;
    margin-bottom: 1vw;
  }

  span {
    position: absolute;
    left: 44%;
    line-height: 5.1vw;
    font-size: 1vw;
    color: #f1f3f5;
    white-space: nowrap;
  }

}

.right {
  position: absolute;
  width: 78.5%;
  height: 84%;
  top: 12%;
  left: 19%;

  .select {

    /deep/ .el-form-item__label {
      color: #25bffc !important;
      font-weight: normal;
    }

    /deep/ .el-input__inner {
      background-color: #0000;
      border-color: #25bffc;
      color: #f6f6f6
    }

    /deep/ .el-button--default {
      background-color: #0000;
      color: #25bffc;
      border-color: #25bffc;
    }
  }

  .list::-webkit-scrollbar {
    width: 0;
  }

  .list {
    position: absolute;
    width: 100%;
    height: calc(100% - 50px);
    top: 50px;
    left: 0;
    overflow: auto;

    .item {
      display: inline-block;
      margin-right: 2vw;
      margin-bottom: 1vw;
      width: 30%;
      height: 12vw;
      background-image: url("~@/assets/board/allScenes/bg1.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}

</style>
