<template>
<div class="main-container">
  <!-- 头部导航栏 -->
    <homeHeader v-if="!scrollVisible"></homeHeader>
    <div v-if="scrollVisible" style="height: 71px;">
        <scrollHeader v-if="scrollVisible" @search="headerSearch"></scrollHeader>
    </div>
  <!-- 中间主题内容 -->
  <div class="home-body">
      <router-view></router-view>
  </div>
  <!-- 底部信息栏 -->
  <div class="maxWidth home-footer">
      <div class="commoncontainer maxHeight flex jc-c ai-c column">
          <div class="flex">
              <div class="footer-li" @click="$router.push('/about/aboutus')">关于我们</div>
              <div class="footer-li" @click="$router.push('/about/disclaimer')">免责声明</div>
              <div class="footer-li" @click="$router.push('/about/contactus')">联系我们</div>
              <div class="footer-li">意见反馈</div>
          </div>
          <div class="flex" style="margin: 10px 0;">
              <div style="margin-right: 25px;">管理单位：费县自然资源和规划局</div>
              <div>地址：山东省临沂市费县建设东路101号1-6层</div>
          </div>
          <div>技术支持：<span @click="toCompoany" class="footer-li">山东慧创信息科技有限公司</span></div>
      </div>
  </div>
  <!-- 返回顶部按钮 -->
  <el-backtop :right="40" :bottom="50" />
</div>
</template>
<script>
import homeHeader from "../../components/layer/header/NewHomeHeader.vue";
import scrollHeader from "../../components/layer/header/scrollHeader.vue";
export default {
  name:"HomeNew",
  components:{
    homeHeader,
    scrollHeader
  },
  data(){
    return {
        scrollVisible: false,
    }
  },
  mounted(){
    window.addEventListener('scroll', ()=>{
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if(scrollTop>300){
        this.scrollVisible = true
      }else{
        this.scrollVisible = false
      }
    })
  },
  methods:{
    toCompoany(){
        window.open('http://www.hopetrytech.com','_blank');
    }
  }
}
</script>
<style  scoped>
.home-body{
    width:100%;

}
.home-footer{
    height: 128px;
    color: #B3B3B3;
    font-size: 14px;
    background:#222222;
    position: relative;;
    bottom:0px;
    left:0px;
}
.footer-li{
    padding: 0 10px;
    transition: all 0.3s;
    /* border-right: 1px solid #B3B3B3; */
}
.footer-li:hover{
    color:#1e80ff;
    cursor:pointer;
}
.bg-w{
    background: #fff;
}
.bg-b{
    background: #2C3134;
}
.fw-b{
    color: #2C3134;;
}
.cursor{
    cursor: pointer;
}
.maxWidth{
    width: 100%;
}
.maxHeight{
    height: 100%;
}
.flex{
    display: flex;
}
.column{
    flex-direction: column;
}
.wrap{
    flex-wrap: wrap;
}
.mb-20{
    margin-bottom: 20px;
}
.mt-20{
    margin-top: 20px;
}
.mt-10{
    margin-top: 10px;
}
.ta-l{
    text-align: left;
}
.ai-c{
    align-items: center;
}
.jc-c{
    justify-content: center;
}
.jc-sa{
    justify-content: space-around;
}
.jc-sb{
    justify-content: space-between;
}
.fc-w{
    color: #fff;
}
.commoncontainer{
    width: 1200px;
    margin: 0 auto;
}
.fw-b{
    font-weight: bold;
}
.fz-10{
    font-size: 10px;
}
.fz-14{
    font-size: 14px;
}
.fz-16{
    font-size: 16px;
}
.fz-18{
    font-size: 18px;
}
.fz-20{
    font-size: 20px;
    line-height: 20px
}
.fz-24{
    font-size: 24px;
    line-height: 24px
}
.fz-28{
    font-size: 28px;
    line-height: 28px
}
.fz-30{
    font-size: 30px;
    line-height: 30px
}
.fc-9{
    color: #999;
}
.mb-10{
    margin-bottom: 10px;
}
.pos-r{
    position: relative;
}
.pos-a{
    position:absolute;
}
</style>