<template>
  <div class="mybg no-events" >
    <div class="content">
      <div class="bottomBg">
        <!-- <div class="text">综合感知-智能预警-智慧决策</div> -->
      </div>
      <div class="headerBg"></div>
      <div v-if="active" class="leftShade"></div>
      <div v-if="active" class="rightShade"></div>
      <div v-if="active" class="bottomShade"></div>
      <div :class="[active == false ? 'black' : '']"></div>
    </div>
  </div>
</template>

<script setup>
import {computed, inject} from "vue";
import {useStore} from "vuex";
let state = useStore().state;
let props = defineProps({
  active: {
    type:Boolean,require: true
  },
})
</script>

<style lang="scss" scoped>

.mybg{
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  z-index: 1;
  .content {
    position: relative;
    width: 100%;
    height: 100%;
    .leftShade {
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      width: 560px;
      background: linear-gradient(90deg, #00070A 0%, rgba(2, 27, 36, 0.43) 20%, rgba(3, 33, 44, 0) 50%);
    }

    .rightShade {
      position: absolute;
      top: 0px;
      bottom: 0px;
      right: 0px;
      width: 560px;
      background: linear-gradient(-90deg, #00070A 0%, rgba(2, 27, 36, 0.43) 20%, rgba(3, 33, 44, 0) 50%);
    }

    .bottomShade{
      position: absolute;
      width: 100%;
      bottom: 0px;
      height: 387px;
      background: linear-gradient(360deg, #00070A 0%, rgba(2,27,36,0.43) 20%, rgba(3,33,44,0) 50%);
    }

    .headerBg {
      height: 100px;
      width: 100%;
      position: absolute;
      top: 0px;
      z-index: 2;
      background-image: url("@/assets/img/header.png");
      background-size: 100% 100%;
    }

    .bottomBg {
      z-index: 1;
      height: 100px;
      position: absolute;
      bottom: 0px;
      width: 100%;
      background-image: url("@/assets/img/bottom_bg.png");
      background-size: 100% 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-end;

      .text {
        width: 335px;
        height: 40px;
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #00FFF0;
        line-height: 28px;
        letter-spacing: 5px;
      }
    }

    .black{
      background-color: #000000;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 0;
    }
  }
}


</style>
