<template>
  <div class="container">
    <div class="banner-content">
      <img class="img" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/banner.png" alt="" />
      <div class="btn">
        <el-button class="btn1" @click="$router.push('/project-intro/introduce')">项目介绍</el-button>
        <el-button class="btn1" @click="showApplyForm">报名咨询</el-button>
      </div>
    </div>
    <!-- 我要咨询弹框 -->
    <consultingForm :visible.sync="popupVisible" @success="hideApplyForm" @close="close" />
    <!-- 项目特色 -->
    <project-features />
    <!-- 校园风光 -->
    <school-senery />
    <!-- 最新动态 -->
    <news />
    <!-- 视频 -->
    <Video style="padding-bottom:87px" />
    <!-- 右侧功能栏 -->
    <right-aside />
  </div>
</template>

<script>
import consultingForm from '../components/consultingForm.vue'
import projectFeatures from '../components/home/projectFeatures'
import schoolSenery from '../components/home/schoolSenery.vue'
import news from '../components/home/news'
import presence from '../components/home/presence'
import commonProblem from '../components/home/commonProblem'
import openClass from '../components/home/openClass'
import rightAside from '../components/rightAside'
import Video from '../components/home/Video.vue'

export default {
  layout: 'normal',
  components: {
    consultingForm,
    projectFeatures,
    schoolSenery,
    news,
    presence,
    commonProblem,
    openClass,
    rightAside,
    Video
  },
  data() {
    return {
      isScale: false,
      popupVisible: false
    }
  },

  methods: {
    showApplyForm() {
      this.popupVisible = true
      document.getElementsByTagName('body')[0].style.height = '100%'
      document.getElementsByTagName('body')[0].style.overflow = 'hidden'
    },
    close() {
      this.popupVisible = false
      document.getElementsByTagName('body')[0].style.height = ''
      document.getElementsByTagName('body')[0].style.overflow = ''
    },
    hideApplyForm() {
      this.popupVisible = false
      document.getElementsByTagName('body')[0].style.height = ''
      document.getElementsByTagName('body')[0].style.overflow = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  position: relative;
  .banner-content {
    position: relative;
    width: 100%;
    height: 652px;
    .img {
      width: 100%;
      height: 100%;
      z-index: 1000;
    }
    .btn {
      position: absolute;
      top: 461px;
      left: 850px;
    }
    .btn1 {
      width: 104px;
      height: 32px;
      border: 1px solid #ffffff;
      font-size: 14px;
      font-weight: 400;
      line-height: 8px;
      background: none;
      color: #fff;
    }
    .btn1:hover {
      background-color: #aa1941;
      opacity: 1;
    }
  }
}
</style>
