<template>
  <div class="iframeBody">
    <div class="leftMenuBar">
      <div style="color:#071E4C;font-weight:600;font-size:20px;margin-bottom:20px;">视频监控区域</div>
      <div style="color:#071E4C;font-weight:600;font-size:17px;">
        <div v-for="(item,index) in videoAreaArray" :key="index" style="margin-bottom:10px;cursor: pointer;" :class="index == videoAreaIndex ? 'leftMenuSelected' : '' " @click="videoMenuIndex(index)">
          <span class="el-icon-camera-solid"> {{item}}</span>
        </div>
      </div>
    </div>

    <div class="rightVideoBox">

    </div>

  </div>
</template>

<script>
export default {
  data(){
    return{
      videoAreaArray:["采区监控","厂区监控","办公室监控","办公室监控1","办公室监控2"],
      videoAreaIndex:0,
    }
  },
  methods:{
    videoMenuIndex(index){
      this.videoAreaIndex = index;
    }
  },
  
}
</script>

<style scoped>
*{
  
  margin: 0;
  padding: 0;
}
.iframeBody{
  height: 100%;
  display: flex;
  width: 100%;
}
.leftMenuBar{
  width: 10%;
  height: 100%;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
}
.rightVideoBox{
  width: 90%;
  height: 100%;
  background-color: bisque;
}
.leftMenuSelected{
  color: rgb(0,82,255);
}
</style>