<template>

<BackAdminLayout v-if="jurisdiction && jurisdiction.roleKey === 'back_admin'">  </BackAdminLayout>
<el-container v-else style="width: 100vw;height: 100vh;" class="containerApp" >
  <el-header class="el-header"  >
    <MoveHead   v-if="$isMobile"></MoveHead>
    <comHeard v-else></comHeard>
  </el-header>
  <el-main class="el-main">
   <appMain></appMain>
  </el-main>  
</el-container>
 
 
</template>

<script>
export default {
    components:{
    comHeard: () => import("../components/header.vue"),
    appMain: () => import("../components/content.vue"),
    MoveHead: () => import("../components/MoveHead.vue"),
    BackAdminLayout: () => import("../components/BackAdminLayout.vue"),
  },
  data(){
    return {
      jurisdiction: {
        roleKey: "",
      },
    }
  },
  mounted(){
    let jurisdiction = localStorage.getItem("jurisdiction");
  try {
    jurisdiction = jurisdiction ? JSON.parse(jurisdiction) : { roleKey: "" };
  } catch (e) {
    jurisdiction = { roleKey: "" };
  }
  this.jurisdiction = jurisdiction;

  window.addEventListener("setItem", () => {
    let jurisdiction = localStorage.getItem("jurisdiction");
    try {
      jurisdiction = jurisdiction ? JSON.parse(jurisdiction) : { roleKey: "" };
    } catch (e) {
      jurisdiction = { roleKey: "" };
    }
    this.jurisdiction = jurisdiction;
  });
 
  }
 
}
</script>

<style lang="scss" scoped>
// .containerApp{
//   background-image: url(../assets/img/bktop.png);
//   background-size: 100% 60%;
//   background-repeat: no-repeat;
// }


.el-main{
   //隐藏滚动条
   scrollbar-width: none;
    -ms-overflow-style: none;
    border-right: none;
}
.containerApp{
  overflow-x: hidden;

}
::-webkit-scrollbar{
    width: 0;
    height: 0;
  }
  .el-header{
    
    height: 8% !important;
    display: flex;
    justify-content: center;
    background-image: url(../assets/img/bktop.png);
  background-position: 60% 8%;
  background-size: cover;
  // overflow-x: hidden;
   //隐藏滚动条
   scrollbar-width: none;
    -ms-overflow-style: none;
    border-right: none;

  }

  .el-main{
   padding: 0PX ;
   overflow-y: auto;
  
  }

  // 手机端适配 背景色修改
@media screen and (min-width: 220px) and (max-width:1279px) {
.el-header{    
  width: 100%;
  background-image: none;
  height: auto !important;
  padding: 0;
  box-shadow: 0px 0px 3px 2px #ccc !important;
  margin: 0 auto;
  }
  .containerApp{
       width: 100vw;
      min-height: 100vh;
      background: #fff;
      background-image: url("../assets/mobile/home/homebgtop.png");
      background-repeat: no-repeat;
      background-size: 115%;
      background-position: 40% -2%;
  
  
  }

}
</style>
