qdtlui/src/views/bigscreen/index.vue

<template>
<div style="width:100%;height:100%;position:relative">
  <div style="width:100%;height:100%;padding-top:5.1rem;position:absolute">
      <mapdiv></mapdiv>
      <!-- <zhgl></zhgl> -->
    </div>
   <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>

    <div class="bottombg">
      <div class="item item2"><div class="num">1123</div><div>静态资源</div></div>
      <div class="item item1 item2"><div class="num">113</div><div>动态资源</div></div>
      <div class="item item1 item2"><div class="num">531</div><div>重点区域</div></div>
      <div class="item"><div class="num">16</div><div>实时告警</div></div>
    </div>

    <!-- <videodiv :cameracode="ccode" style="width:700px;height:300px;position:absolute;top:100px;left:100px"></videodiv> -->


</div>


</template>

<script>
import moment from "moment";
import mapdiv from "../../components/map/index.vue"
import zhgl from "../../components/zhgl/index.vue"
import headerdiv from '@/components/HeaderDiv/index.vue'

import videodiv from "../../components/Videoplayer/index.vue"

export default {
    name: "big",
    data() {
        return {
            currenttime: moment().format("YYYY-MM-DD HH:mm:ss"),
            currentindexNew:1,
            ccode:"32068166001320000235"
        };
    },
    components:{
      mapdiv,
      zhgl,
      headerdiv,
      videodiv
    },
    mounted() {
        // this.$$refs.headerDiv.currentindex = 1;
        setInterval(() => {
            this.currenttime = moment().format("YYYY-MM-DD HH:mm:ss");
        }, 1000);
    },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.bottombg{
  background: url("../../assets/images/底部菜单bg@2x.png");
  position: absolute;
  background-size: 100% 100%;
  z-index: 1;
  width: 85.1rem;
  height: 16.3rem;
  bottom: 0;
  left: 50%;
  transform: translate(-50%,-0%);
  display: flex;
  flex-direction: row;
  align-items: center;
  color:#fff;
  font-size:1.6rem;


  .item{
    width: 27%;
    text-align: center;
    justify-content: center;
    position: relative;
    .num{
      font-size:3rem;
      color:#25f8bd;
    }
  }
   .item1{
    width: 23%;
  }
  .item2::after{
    content: "";
    background: url("../../assets/images/图层\ 2@2x.png");
    background-size: 100% 100%;
    width: 0.2rem;
    height: 7.3rem;
    position: absolute;
    top: 0;
    right: 0;
  }
}
.ol-zoom-in,.ol-zoom-out{
  display: none !important;

}

</style>