<template>
  <div id="home">
    <div class="shadow-top shadow"></div>
    <div class="shadow-bottom shadow"></div>
    <div class="shadow-left shadow"></div>
    <div class="shadow-right shadow"></div>

    <HomeHeader class="header" />
    <TabSwitch class="navi"/>
    <UeVideo class="ue"/>
    <ComPage class="common"/>
    <RouterView class="page"/>
  </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'

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

export default {
  name: 'HomePage',
  components: { HomeHeader, TabSwitch, RouterView, UeVideo, ComPage },
}
</script>

<style lang="scss" scoped>
#home {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(36, 51, 77);
  // background-color: rgb(150, 150, 150);
  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), rgba(0,17,51,0.6), rgba(0,17,50,0.8));
    
  }

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

  .shadow-left {
    top: 0;
    left: 0;
    width: 380px;
    height: 100vh;
    background: linear-gradient(-90deg, rgba(0,17,50,0), rgba(0,17,51,0.5), rgba(0,17,50,0.8));
  }

  .shadow-right {
    top: 0;
    right: 0;
    width: 380px;
    height: 100vh;
    background: linear-gradient(90deg, rgba(0,17,50,0), rgba(0,17,51,0.5), rgba(0,17,50,0.8));
  }

  .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;
  }
  
}
</style>
