<template>
    <div id="dcs">
      <div class="blur-background" />
      <router-view></router-view>
      <EqFooter class="app_footer"/>
    </div>
  </template>
  
  <script>
  import EqFooter from '@/components/dcs/EqFooterComponent.vue';
  
  export default {
    name: 'dcs',
    components: { EqFooter }
  }
  </script>
  
  <style lang="scss">
  #app {
    width: 1920px !important;
    height: 1080px !important;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.70);
    backdrop-filter: blur(2px);
  }
  
  .blur-background {
    position: absolute;
    /* 绝对定位，用于全屏覆盖 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('~@/assets/dcs/homeBg.svg');
    background-size: cover;
    /* 确保背景图覆盖整个区域 */
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(8px);
    /* 设置模糊值，可以根据需求调整 */
    z-index: -1;
    /* 确保模糊背景在内容下方 */
  }
  .app_footer{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    width: 100%;
    z-index: 1; /* 确保 Footer 在背景图上方 */
    margin: 0 auto;
  }
  </style>
  