<template>
  <div class="layout_com_page">
      <div class="layout_com_page_banner" :style="{height: heightdy + 'px'}">
        <div
          class="major-banner"
          v-for="(item, index) in bannerList"
          :key="index"
          @mouseenter="outStyle(item, index)"
          :class="{'min-wd': item.minWidth, 'blacker': !item.bgShow}"
          :style="{ backgroundImage:'url(' + item.img + ')' }"
        >
          <div :class="mIndex == 2? 'new-color active' : 'new-color'" v-if="index == 2">
            <div class="major-banner-main">
              <span>{{item.title}}</span>
              <span class="pad">{{item.label}}</span>
            </div>
          </div>
          <div class="major-banner-bg" v-if="item.bgShow"></div>
        </div>
        <div class="major-banner-title">
          <span>美国康博斯威尔大学</span>
          <span class="font-size-40">
            早期儿童教育
            <small>-</small>蒙台梭利教育硕士
          </span>
        </div>
      </div>
      <div class="layout_com_page_banner major_padd back_fff">
        <div class="major-dl">
          <div
            class="major-dl1"
            ref="dl1"
            :class="{'animate__animated animate__fadeInUp show-flex':houseShowbt}"
          >
            <div class="major-dl1-title">
              <span>排名第21</span>
              <span class="dl1_span">全美早期儿童教育专业</span>
            </div>
            <img :src="require('@/assets/images/major-set/dl1.png')" alt />
          </div>
          <div class="major-dl1 major-dl2" ref="dl2" :class="{'show-flex': houseShowbt}">
            <div
              class="major-dl2-image dl2"
              :class="{'animate__animated animate__fadeInUp delay3':houseShowbt}"
            >
              <img :src="require('@/assets/images/major-set/dl2.png')" alt />
              <span>CAEP认证</span>
              <span class="font-size-30">美国国家教师教育认证委员会认证</span>
            </div>
            <div
              class="major-dl2-image dl3 padd-left-40 ts-ma"
              :class="{'animate__animated animate__fadeInTopRight animate__delay-1.5s show-flex':houseShowbt}"
            >
              <img :src="require('@/assets/images/major-set/dl3.png')" alt />
              <div class="dl2-span">
                <span>排名第1</span>
                <span class="font-size-30">肯塔基州早期</span>
                <span class="font-size-30">儿童教育专业</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layout_com_page_banner back_fff major_banner" :style="{'height': 700  + 'px'}">
        <div class="major-finish finish-a">
          <img :src="require('@/assets/images/major-set/lt02.png')" alt />
        </div>
        <div class="major-finish finish-b">
          <div class="finish-b-a">
            <span class="finish-b-a-size">
              <img class="rs-img" :src="require('@/assets/images/major-set/lt01.png')" alt />
              <div class="center_post font-size-28">
                <span>早期儿童教育-蒙台梭利教育硕士</span>
                <span>带你实现人生无限可能！</span>
              </div>
            </span>
            <div class="finsih-b-main">
              <div class="finsih-b-main-size">
                <img :src="require('@/assets/images/major-set/lt05.png')" alt />
                <div class="center_post font-size-16">
                  <span>如果你希望学到全球前沿的蒙台梭</span>
                  <span>利教育理念，做儿童教育的引领者</span>
                </div>
              </div>
              <div class="finsih-b-main-size">
                <img :src="require('@/assets/images/major-set/lt06.png')" alt />
                <div class="center_post font-size-16">
                  <span>如果你是一位教育工作者，希望继续</span>
                  <span>扎根教育，获得更有分量的学位文凭</span>
                </div>
              </div>
            </div>
          </div>
          <div class="finsih-b-b">
            <div class="ts-width post_rl">
              <img :src="require('@/assets/images/major-set/lt03.png')" alt />
              <span class="center_post font-size-16">
                <span>如果你已为人父母，想让孩子教授更</span>
                <span>科学的启蒙和家庭教育，赢在起跑线</span>
              </span>
            </div>
            <div class="post_rl">
              <img :src="require('@/assets/images/major-set/lt04.png')" alt />
              <span class="center_post font-size-16">
                <span>如果你想兼顾家庭和事业的平衡，</span>
                <span>投身儿童教育领域，成为更好的自己</span>
              </span>
            </div>
            <div class="post_rl">
              <img :src="require('@/assets/images/major-set/lt07.png')" alt />
              <span class="center_post font-size-16">
                <span>如果你想攻读海外学位，接受</span>
                <span>国际化的教育，不断超越自己</span>
              </span>
            </div>
          </div>
        </div>
        <div class="major-finish finish-a">
          <div class="finish-as">
            <img :src="require('@/assets/images/major-set/lt08.png')" alt />
          </div>
          <div class="finish-as">
            <img :src="require('@/assets/images/major-set/lt09.png')" alt />
          </div>
        </div>
      </div>
      <div class="layout_com_page_banner major-kc-bg" :style="{'height': 700  + 'px'}">
        <div class="major-kc-left">
          <button @mouseover="buhover(1)" :class="{'hover-bt': course === 1}">早期儿童教育核心课程</button>
          <button @mouseover="buhover(2)" :class="{'hover-bt': course === 2}">蒙台梭利核心课程</button>
        </div>
        <div class="major-kc-right">
          <div class="major-kc-svg">
            <img :src="require('@/assets/images/major-set/xl1.png')" alt />
          </div>
          <ul class="ul-1">
            <li
              v-for="(item, index) in FilterJson[course]"
              :class="[{'show_anima_li_left': item.li1stateLeft, 'show_anima_li_right': item.li1stateRight}, item.class]"
              :key="index"
              :ref="item.ref"
              :style="{top: item.top1, right: item.right1}"
            >
              <div class="div-son"></div>
            </li>
          </ul>
          <ul class="ul-2">
            <li
              v-for="(item, index) in FilterJson[course]"
              :class="[{'show_anima_li_left': item.li1stateLeft, 'show_anima_li_right': item.li1stateRight}, item.class2]"
              :key="index"
              :style="{top: item.top2, right: item.right2}"
            >
              <span class="yw">{{item.span}}</span>
              <span>{{item.span1}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="layout_com_page_banner major-kc-sy" :style="{'min-height':700 + 'px'}">
        <div class="sy-body">
          <div
            class="sy-banner"
            v-for="(item, index) in timeList"
            :key="index"
            :class="{'blacker-sy': !item.bgShow}"
            @mouseenter="outsyStyle(item, index)"
          >
            <div class="sy-banner-bg sy-banner-header">
              <img :src="require('@/assets/images/major-set/blxbjh.png')" />
              <span class="sy-banner-bg-layout">{{item.name}}</span>
            </div>
            <div class="sy-banner-bg sy-banner-main">
              <img :src="item.img" />
              <div class="sy-banner-bg-layout">
                <span class="font-size-18">{{item.title}}</span>
                <span class="font-size-18">{{item.title1}}</span>
                <span class="font-size-18">{{item.title2}}</span>
                <span class="font-size-18">{{item.title3}}</span>
                <span class="font-size-18">{{item.title4}}</span>
                <span class="font-size-18">{{item.title5}}</span>
              </div>
              <div class="sy-banner-bg-00" v-if="!item.bgShow"></div>
            </div>
          </div>
        </div>
        <div class="sy-footer">
          <img :src="require('@/assets/images/major-set/su.png')" />
        </div>
      </div>
      <div class="layout_com_page_banner major-kc-wm" :style="{'min-height':700 + 'px'}">
        <h3>
          <span>师资介绍</span>
        </h3>
        <div class="major-kc-wm-body">
          <div class="major-kc-wm-list" v-for="(item, index) in wmList" :key="index">
            <div class="list-img">
              <img :src="item.img" />
            </div>
            <div class="list-body">
              <span class="font-size-18 nowrap">{{item.title}}</span>
              <span class="font-size-14 wm-red">{{item.label}}</span>
              <span class="font-size-14 max-width-180">{{item.main}}</span>
            </div>
          </div>
        </div>
      </div>
      <div ref="leavex">
        <leavex
          :imgUrl="require('@/assets/images/mes1.png')"
          :imgUrlBg="require('@/assets/images/major-set/mz.png')"
          :leavheight=" heightdy - 60"
        />
      </div>
      <page-footer />
  </div>
</template>

<script>
import Leavex from '@/components/leavex/index.vue'
import PageFooter from '@/components/page-footer/index.vue'
import FilterJson from './filterType.json'

import { dyHeight } from '@/pages/homepage/mixins/index.js'
import Vue from 'vue'
export default {
  name: 'major-set',
  mixins: [dyHeight],
  components: {
    Leavex,
    PageFooter
  },
  data() {
    return {
      mIndex: 0,
      FilterJson,
      course: 1,
      wmList: [
        {
          img: require('@/assets/images/wm/wm_01.png'),
          title: 'Sharon Hundley,Ed.D.',
          label: '教授',
          main:
            '康博斯威尔大学教育学院早期儿童教育项目主任；AMI认证3-6岁主教；AMS授证导师'
        },
        {
          img: require('@/assets/images/wm/wm_02.png'),
          title: 'Marilyn Goodwin,Ph.D.',
          label: '副教授',
          main: '康博斯威尔大学教育学院早期儿童教育项目副主任'
        },
        {
          img: require('@/assets/images/wm/wm_03.png'),
          title: 'Julie Ann Ball',
          label: '副教授',
          main: '康博斯威尔大学教育学院早期儿童教育项目成员；AMI认证3-6岁主教'
        }
      ],
      bannerList: [
        {
          img: require('@/assets/images/major-set/ma01.png'),
          bgShow: true
        },
        {
          img: require('@/assets/images/major-set/ma02.png'),
          bgShow: true
        },
        {
          img: require('@/assets/images/major-set/ma03.png'),
          bgShow: true,
          title:
            '蒙台梭利（Montessori）教学法起源于意大利，由意大利教育家玛莉亚·蒙台梭利博士倾其毕生经历所创造。其教学法从日常生活教育、感官教育、数学教育、语言文学教育、文化教育和创造力培养6个方面培养幼儿自觉主动的学习和探索精神。',
          label:
            ' 一百多年来，蒙台梭利教育法经由美国上流社会的推崇，进而风靡全球，得到世界各地教育界的认同和推崇。全球蒙氏幼儿园28000所，而康博斯威尔大学是为数不多的拥有蒙台梭利专业学位教育的高等学府。'
        },
        {
          img: require('@/assets/images/major-set/ma04.png'),
          bgShow: true,
          minWidth: true
        }
      ],
      timeList: [
        {
          name: '授课形式',
          title: '中文授课',
          title1: '简洁易操作的',
          title2: '多媒体交互平台',
          title3: '线下实践+工作坊',
          title4: '赴美研学',
          img: require('@/assets/images/major-set/bxl1.png'),
          bgShow: true
        },
        {
          name: '上课时间',
          title: '按照教学周发布课程',
          title1: '可灵活掌握学习时间',
          title2: '可反复观看和查阅',
          img: require('@/assets/images/major-set/bxl2.png'),
          bgShow: true
        },
        {
          name: '学位授予',
          title: '保证出勤',
          title1: '撰写论文并合格',
          title2: '修满全部学分',
          title3: '授予硕士学位',
          img: require('@/assets/images/major-set/bxl3.png'),
          bgShow: true
        },
        {
          name: '毕业典礼',
          title: '在国内或赴美',
          title1: '参加毕业典礼',
          title2: '与各国学子欢聚一堂',
          img: require('@/assets/images/major-set/bxl4.png'),
          bgShow: true
        }
      ],
      houseShowbt: false,
      li1state: false,
      neutralityI: 0,
      dowUp: false,
      presentts: 0,
      scrollTopts: 0,
      ones: true
    }
  },
  methods: {
    dyScroll(present, scrollTop) {
      this.presentts = present
      this.scrollTopts = scrollTop
      const scroll = scrollTop - this.neutralityI
      this.neutralityI = scrollTop
      scroll < 0 ? (this.dowUp = false) : (this.dowUp = true)
      if (this.dowUp) {
        if (this.$refs.dl2) {
          if (!this.houseShowbt) {
            const topdl2 = this.getElementTop(this.$refs.dl2)
            this.houseShowbt = !!(present > topdl2 + 100)
          }
          FilterJson[this.course].forEach(l => {
            if (this.$refs[l.ref][0]) {
              const topLi = this.getElementTop(this.$refs[l.ref][0])
              if (present > topLi + 20) {
                if (!l[l.name]) {
                  l[l.name] = true
                }
              }
            }
          })
        }
      }
      if (!scrollTop && this.ones) {
        this.ones = false
        FilterJson[this.course].forEach(l => {
          l[l.name] = false
        })
      }
    },
    buhover(number) {
      this.course = number
      this.dyScroll(this.presentts, this.scrollTopts)
    },
    outStyle(item, index) {
      this.bannerList.forEach((l, ind) => {
        index === ind ? Vue.set(l, 'bgShow', false) : Vue.set(l, 'bgShow', true)
      })
      this.mIndex = index
    },
    outsyStyle(item, index) {
      this.timeList.forEach((l, ind) => {
        index === ind ? Vue.set(l, 'bgShow', false) : Vue.set(l, 'bgShow', true)
      })
    }
  },
  mounted() {
    this.bannerList[2].bgShow = false
  }
}
</script>

<style lang="scss" scoped>
.major-banner-title {
  position: absolute;
  bottom: 30%;
  left: 14.5%;
  display: flex;
  flex-direction: column;
  span {
    font-size: 18px;
    font-family: SourceHanSansSC-Medium, SourceHanSansSC;
    font-weight: 500;
    display: flex;
    color: rgba(255, 255, 255, 1);
    small {
      display: flex;
      font-size: 25px;
      font-weight: bold;
      align-items: center;
    }
  }
}
.major_padd {
  padding-bottom: 0px;
  // overflow: hidden;
}
.major-banner {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  flex: 2;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  .new-color{
    position: relative;
    width: 100%;
    height: 100%;
    &.active{
      background: rgba(255, 255, 255, 0.7);
    }
  }
  .major-banner-main {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    color: rgba(255, 255, 255, 1);
    padding: 0px 20px;
    display: flex;
    z-index: 3;
    flex-direction: column;
    span {
      line-height: 1.5;
    }
    .pad {
      padding-top: 20px;
    }
  }
  .major-banner-bg {
    height: 100%;
    position: absolute;
    width: 100%;
    opacity: 0.6;
    background: rgba(0, 0, 0, 1);
  }
  .major-banner-bg-ff {
    height: 100%;
    position: absolute;
    width: 100%;
    background-color: rgb(249 249 249 / 68%);
  }
}
.major-dl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 0px;
  padding-top: 60px;
  position: relative;
  .major-dl1 {
    display: none;
    .major-dl1-title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 40px;
      padding-right: 50px;
      padding-top: 40px;
      justify-content: flex-start;
      font-family: PingFangSC-Regular, PingFang SC;

      span {
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
      }
      .dl1_span {
        font-size: 30px;
        font-weight: 400;
        color: rgba(34, 34, 34, 1);
      }
    }
    .major-dl2-image {
      display: flex;
      color: #222222ff;
      flex-direction: column;
      font-weight: 600;
      position: relative;
      font-size: 40px;
      img {
        padding-bottom: 18px;
        width: 100%;
      }
      .font-size-30 {
        font-weight: 400;
        color: rgba(34, 34, 34, 1);
      }
    }
    .ts-ma {
      position: absolute;
      top: 0px;
      right: -40px;
      display: flex;
      flex-direction: inherit;
      .dl2-span {
        display: flex;
        flex-direction: column;
        padding-left: 10px;
        white-space: nowrap;
      }
    }
    .padd-left-40 {
      top: 240px;
    }
  }
}
.major-dl2 {
  position: relative;
  margin-top: -220px;
  left: -64px;
  margin-bottom: 100px;
}

.blacker {
  .major-banner-main {
    color: #000000ff;
  }
}
.min-wd {
  flex: 1;
}
.major-finish {
  width: 100%;
  height: 100%;
  .finsih-b-main {
    display: flex;
    height: 100%;
    .finsih-b-main-size {
      position: relative;
      overflow: hidden;
      flex: 1;
      height: 50%;
      img {
        height: 100%;
        width: 100%;
      }
    }
  }
}
.finish-a {
  flex: 1;
  img {
    overflow: hidden;
  }
  .finish-as {
    overflow: hidden;
  }
}
.finish-b {
  // flex: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  .finsih-b-b {
    display: flex;
    width: 100%;
    height: 40%;
    div {
      width: 30%;
      img {
        height: 100%;
        width: 100%;
      }
    }
    .ts-width {
      width: 40%;
    }
  }
  .finish-b-a {
    display: flex;
    height: 60%;
    .finish-b-a-size {
      width: 70%;
      display: inline-flex;
      position: relative;
      overflow: hidden;
      .rs-img {
        width: 100%;
      }
    }
    .finsih-b-main {
      display: flex;
      flex-direction: column;
      width: 30%;
    }
  }
  .finsih-b-main-a {
    flex: 1;
  }
  .center_post {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    width: 100%;
    align-items: center;
    flex-direction: column;
  }
}
.major_banner {
  overflow: hidden;
  img {
    transition: all 0.5s;
    &:hover {
      cursor: pointer;
      transform: scale(1.1);
    }
  }
}
.major-kc-bg {
  background: url('~@/assets/images/major-set/xbg.png') no-repeat center center;
  background-size: cover;
  .major-kc-left {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: initial;
    button {
      min-width: 220px;
      height: 54px;
      line-height: 54px;
      color: rgba(175, 27, 64, 1);
      background: #fff;
      border-radius: 4px;
      cursor: pointer;
      margin: 30px 0px;
      border: 2px solid rgba(175, 27, 64, 1);
      font-size: 18px;
    }
    .hover-bt {
      background-color: #af1b40ff;
      color: #fff;
    }
  }
  .major-kc-right {
    width: 847px;
    height: initial;
    position: relative;
    .major-kc-svg {
      width: 512px;
      height: 100%;
      position: absolute;
      right: 200px;
      top: 0;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .ul-1 {
      margin: 0;
      padding: 0;
      list-style: none;
      padding-inline-start: 0 !important;
      .li {
        width: 30px;
        height: 30px;
        background: rgba(175, 27, 64, 0.5);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        visibility: hidden;
        animation-name: none;
        .div-son {
          width: 20px;
          height: 20px;
          background: #af1b40ff;
          border-radius: 50%;
        }
      }
      .show_anima_li_left {
        visibility: visible;
        animation-name: bounceInLeft;
      }
      .show_anima_li_right {
        visibility: visible;
        animation-name: bounceInRight;
      }
    }
    .ul-2 {
      margin: 0;
      padding: 0;
      list-style: none;
      padding-inline-start: 0 !important;
      .li2 {
        font-size: 18px;
        font-weight: 500;
        color: #222222ff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        align-items: flex-end;
        position: absolute;
        visibility: hidden;
        animation-name: none;
        .yw {
          color: #222222ff;
          font-size: 12px;
          padding-bottom: 10px;
        }
      }
      .show_anima_li_left {
        visibility: visible;
        animation-name: bounceInLeft;
      }
      .show_anima_li_right {
        visibility: visible;
        animation-name: bounceInRight;
      }
      .bounceInRight {
        align-items: baseline;
      }
    }
  }
}
.major-kc-sy {
  background: url('~@/assets/images/major-set/blxbj.png') no-repeat center
    center;
  background-size: cover;
  position: relative;
  flex-direction: column;
  align-items: center;
  .sy-body {
    width: 80%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .sy-banner {
      padding: 10px;
      .sy-banner-bg {
        position: relative;
        display: flex;
        justify-content: center;
        .sy-banner-bg-layout {
          position: absolute;
          top: 50%;
          z-index: 3;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 25px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          .font-size-18 {
            font-weight: 400;
            display: inline-flex;
            white-space: nowrap;
          }
        }
      }
    }
    .blacker-sy {
      .sy-banner-main {
        position: relative;
        .sy-banner-bg-00 {
          transition: all 0.8s;
          background: rgba(0, 0, 0, 0.5);
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          border-radius: 15px;
        }
      }
    }
  }
  .sy-footer {
    padding: 40px 0px 10px 0px;
  }
}
.major-kc-wm {
  background: url('~@/assets/images/wm/wmbg.png') no-repeat center top;
  background-size: cover;
  position: relative;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  h3 {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 40px;
    color: rgba(255, 255, 255, 1);
    span {
      position: relative;
      &::before {
        content: '';
        position: absolute;
        bottom: -8px;
        width: 100%;
        height: 3px;
        background: #ffffff;
      }
    }
  }
  .major-kc-wm-body {
    width: 80%;
    display: flex;
    justify-content: center;
    h3 {
      color: #ffffffff;
    }
    .major-kc-wm-list {
      display: flex;
      flex-direction: column;
      position: relative;
      padding: 20px 30px;
      .list-img {
        z-index: 3;
        position: relative;
        position: absolute;
        left: 50%;
        background: #fff;
        border-radius: 50%;
        top: 7%;
        overflow: hidden;
        transform: translate(-50%, -50%);
        img {
          transition: all 0.5s;
          transform: scale(0.9);
          cursor: pointer;
          &:hover {
            transform: scale(1);
          }
        }
      }
      .list-body {
        display: flex;
        position: relative;
        align-items: center;
        flex-direction: column;
        background: #fff;
        border-radius: 26px;
        width: 300px;
        padding: 100px 0px 30px 0px;
        min-height: 200px;
        .max-width-180 {
          max-width: 180px;
        }
        span {
          padding: 5px 0px;
          color: #222222ff;
        }
        &::before {
          content: '';
          position: absolute;
          height: 90%;
          width: 90%;
          top: 5%;
          border: 1px solid rgba(151, 151, 151, 1);
          border-radius: 26px;
          border-style: dashed;
        }
      }
    }
  }
}
.show-flex {
  display: flex !important;
}
.post_rl {
  overflow: hidden;
}
.wm-red {
  color: #8e2742ff !important;
}
.nowrap {
  white-space: nowrap;
}
</style>
