<template>
    <div class="videoMonitoring">
        <headline></headline>
        <div class="left-sidebar"></div>
        <div class="right-sidebar"></div>
        <h1 style="text-align: center; line-height: 400px">这是视频监控</h1>
    </div>
</template>

<script>
import headline from './headline.vue'
export default {
    components: {headline},
    data() {
        return {
            thisMenuValue: '',
        }
    },
    mounted() {
        this.thisMenuValue = this.$route.query.thisMenuValue
    },
}
</script>
ss
<style>
.videoMonitoring{
   width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: url('../../assets/img/bigScreen/bg.png') no-repeat center / 100% 100%;
}
.left-sidebar{
  position: absolute;
    top: 90px;
    left: 16px;
    width: 360px;
    height: calc(100% - 140px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background:rgba(178, 178, 178, 0.1);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    z-index: 99;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px); 
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.right-sidebar{
  position: absolute;
    top: 90px;
    right:19px;
    width: 360px;
    height: calc(100% - 140px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background:rgba(178, 178, 178, 0.1);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    z-index: 99;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px); 
    border: 1px solid rgba(255, 255, 255, 0.3);
}
</style>