<template>
  <div class="cointan">
    <div class="title1">
      <div style="margin-left:25px;line-height: 22px;">
        监控实时预览 
        <span style="font-size:12px">/ 1002教室</span>
      </div>
    </div>
    <!-- 左侧选项 -->
    <div class="left-kuang">
      <div class="waiceng">
        <div class="mokuai" v-for="(item,index) in 7" :key="index">
          <div class="jiaoshi">11</div>
          <div class="tubiao"></div>
        </div>
      </div>
    </div>
    <!-- 右侧视频 -->
    <div class="rightshipin">
      <div class="qian">前</div>
      <div class="shipin"></div>
      <div class="hou">后</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'centerTop',
  data() {
    return {
      lingdao:false,
      title:'欢迎各位领导莅临南昌交通学院参观指导！',
      gun:true,
    }
  },
  props: {
    msg: String
  },
  created(){
    
  },
  mounted(){
    
  },
  methods:{
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.cointan{
  width: 915px;
  height: 505px;
  background-image: url('../assets/centerTop/background.png');
  background-size: 100%;
}
.title1{
  position: absolute;
  margin: 9px 0 0 10px;
  font-size: 20px;
  font-family : '优设标题黑';
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
}
// 左侧选项
.left-kuang{
  position: absolute;
  margin: 59px 0 0 15px;
  width: 233px;
  height: 431px;
  background-image: url('../assets/centerTop/web_mune_left.png');
  background-size: 100%;
}
.waiceng{
  position: absolute;
  margin: 11px 0 0 30px;
  width: 171px;
  height: 378px;
}
.mokuai{
  margin: 9px 0 0 0px;
  width: 171px;
  height: 34px;
  background: linear-gradient(90deg, rgba(103, 255, 255, 0.2), rgba(17, 104, 172, 0) 100%);
}
.jiaoshi{
  position: absolute;
  margin: 7px 0 0 40px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: rgba(255, 255, 255, 1);
}
.tubiao{
  position: absolute;
  margin: 9px 0 0 131px;
  width: 16px;
  height: 16px;
  background-image: url('../assets/centerTop/jiantou.png');
  background-size: 100%;
}
// 右侧视频
.rightshipin{
  position: absolute;
  margin: 61px 0 0 257px;
  width: 640px;
  height: 419px;
  background-image: url('../assets/centerTop/shipin.png');
  background-size: 100%;
}
.qian{
  position: absolute;
  margin: 14px 0 0 18px;
  font-size: 18px;
  font-weight: 400;
  line-height: 26.06px;
  color: rgba(0, 0, 0, 1);
}
.shipin{
  position: absolute;
  margin: 294px 0 0 22px;
  width: 179px;
  height: 117px;
  background-image: url('../assets/centerTop/shipin.png');
  background-size: 100%;
}
.hou{
  position: absolute;
  margin: 300px 0 0 30px;
  font-size: 18px;
  font-weight: 400;
  line-height: 26.06px;
  color: rgba(0, 0, 0, 1);
}
</style>
