ghjg-digital-twin/src/views/home/Home.vue

<template>
  <div id="home">
    <div class="shadow-top shadow"></div>
    <div class="shadow-bottom shadow"></div>
    <div class="shadow-left shadow" :class="{'is-hide': aside_hide}"></div>
    <div class="shadow-right shadow" :class="{'is-hide': aside_hide}"></div>

    <HomeHeader class="header" />
    <TabSwitch class="navi"/>
<!--    <UeVideo class="ue"/>-->
    <ComPage class="common"/>
    <RouterView class="page"/>
    <Map ref="map" class="map"></Map>
  </div>
</template>

<script>
import HomeHeader from '@/views/home/Header.vue'
import TabSwitch from '@/views/home/Tab.vue'
import { RouterView } from 'vue-router'
import UeVideo from '@/components/UeVideo'
import ComPage from '@/views/home/ComPage'
import { asideShow } from '@/store/index'
import Map from '@/views/map/Index.vue'
import {ref} from 'vue'
// import {setShip} from "@/utils/map/Boat";


// 禁用鼠标右键
document.oncontextmenu=new Function("event.returnValue=false;")
document.onselectstart=new Function("event.returnValue=false;")

export default {
  name: 'HomePage',
  components: { HomeHeader, TabSwitch, RouterView, UeVideo, ComPage ,Map},
  mounted() {
    // setShip()
  },
  setup() {
    const aside_hide = asideShow().isHide
    return {
      aside_hide
    }
  }
}
</script>

<style lang="scss" scoped>
#home {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(36, 51, 77);
  // background-color: #fff;
  color: #e3e3e3;
  user-select: none;

  .shadow {
    position: absolute;
    z-index: 2;
  }

  .shadow-top {
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background: linear-gradient(0deg, rgba(0,17,50,0) 0%, rgba(0,17,51,0.30) 15%, rgba(0,17,51,0.45) 25%, rgba(0,17,50,1) 100%);
    
  }

  .shadow-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background: linear-gradient(180deg, rgba(0,17,50,0) 0%, rgba(0,17,51,0.4) 40%, rgba(0,17,50,1) 100%);
  }

  .shadow-left {
    top: 0;
    left: 0;
    width: 380px;
    height: 100vh;
    background: linear-gradient(-90deg, rgba(0,17,50,0) 0%, rgba(0,17,51,0.30) 15%, rgba(0,17,51,0.45) 25%, rgba(0,17,50,1) 100%);
    transition: all 0.5s ease;
    &.is-hide {
      left: -380px;
    }
  }

  .shadow-right {
    top: 0;
    right: 0;
    width: 380px;
    height: 100vh;
    background: linear-gradient(90deg, rgba(0,17,50,0) 0%, rgba(0,17,51,0.30) 15%, rgba(0,17,51,0.45) 25%, rgba(0,17,50,1) 100%);
    transition: all 0.5s ease;
    &.is-hide {
      right: -380px;
    }
  }

  .header, .navi {
    z-index: 3;
  }

  .page {
    position: absolute;
    width: 100%;
    z-index: 4;
  }

  .common {
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 5;
  }

  .ue {
    z-index: 1;
  }

  .map {
    z-index: -100;
  }
}
</style>