<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 v-html="item.title"></span>
              <span class="pad" v-html="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>排名第20</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>
                  <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>实现事业家庭双丰收</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>获得一张更有分量的学位文凭</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 class="div-child-btn" @mouseover="newChildOver">实践课程内容</div>
          <!-- <button @mouseover="buhover(3)" :class="{'hover-bt': course === 3}">实践课程内容</button> -->
        </div>
        <div class="major-kc-right">
          <template v-if="!newChildIsShow">
            <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>
          </template>
          <template v-else>
            <div class="new-child-content">
              <div class="content-text">
                <div class="circle-box">
                  <div class="child-circle"></div>
                </div>
                <div class="text">
                  组织学生前往不同城市、走访不同教育理念的代表性幼儿园（传统园、蒙氏园、瑞吉欧园等），包括教育实践、学术访谈等环节，为学生们提供了深度交流学习的机会。<br />*时长约10小时
                </div>
              </div>
              <div class="content-text">
                <div class="circle-box">
                  <div class="child-circle"></div>
                </div>
                <div class="text">
                  蒙氏生活实践/文化实用教育法、蒙氏感知教育法、蒙氏语言与文学教育法、蒙氏数学教育法四门课为线下实践课程，美方与中方教授组成的教学团组织学生在不同城市的幼儿园实地巡回授课，包括真实教学演练、教具使用、角色扮演、教授讲座、场景模拟等实践训练。<br />*时长约16小时每门课x4门课
                </div>
              </div>
            </div>
          </template>
        </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 style="padding-top:30px;">
          <span>师资介绍</span>
        </h3>
        <div class="major-kc-wm-body">
          <swiper ref="mySwiper" :options="swiperOptions">
            <template v-for="(item, index) in wmList">
              <swiper-slide :key="index">
                <div class="major-kc-wm-list">
                  <div class="list-img">
                    <img :src="item.img" style="width: 162px"/>
                  </div>
                  <div class="list-body">
                    <span class="font-size-18 nowrap title">{{item.title}}</span>
                    <span class="font-size-14 wm-red zs">{{item.label}}</span>
                    <template v-for="(sItem, sIndex) in item.main">
                      <span :key="sIndex+'-'+index" class="font-size-14 mian-txt">{{sItem}}</span>
                    </template>
                  </div>
                </div>
              </swiper-slide>
            </template>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
          <!-- <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 class="layout_com_page_banner major-kc-wm bg2" :style="{'min-height':700 + 'px'}">
        <h3>
          <span>师资介绍</span>
        </h3>
        <div class="major-kc-wm-body" @mouseover="mouseOver2" @mouseleave="mouseLeave2">
          <swiper ref="mySwiper2" :options="swiperOptions">
            <template v-for="(item, index) in wmList2">
              <swiper-slide :key="index">
                <div class="major-kc-wm-list">
                  <div class="list-img">
                    <img :src="item.img" style="width: 162px"/>
                  </div>
                  <div class="list-body">
                    <span class="font-size-18 nowrap title">{{item.title}}</span>
                    <span class="font-size-14 wm-red zs">{{item.label}}</span>
                    <template v-for="(sItem, sIndex) in item.main">
                      <span :key="sIndex+'-'+index" class="font-size-14 mian-txt">{{sItem}}</span>
                    </template>
                  </div>
                </div>
              </swiper-slide>
            </template>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
          <!-- <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 title">{{item.title}}</span>
              <span class="font-size-14 wm-red zs">{{item.label}}</span>
              <template v-for="(sItem, sIndex) in item.main">
                <span :key="sIndex+'-'+index" class="font-size-14 mian-txt">{{sItem}}</span>
              </template>
            </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'

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: 'major-set',
  mixins: [dyHeight],
  components: {
    Leavex,
    PageFooter,
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    },
    swiper2() {
      return this.$refs.mySwiper2.$swiper
    }
  },
  data() {
    return {
      swiperOptions: {
        observer: true,
        autoHeight: true,
        slidesPerView: 3,
        // paginationClickable: true,
        spaceBetween: 0,
        freeMode: true,
        // autoplay: {
        //   delay: 2000
        // },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: 'bullets'
        }
      },
      mIndex: 0,
      FilterJson,
      course: 1,
      wmList2: [
        {
          img: require('@/assets/images/wm/wm_011.png'),
          title: '韩卓',
          label: '',
          main: [
            '北京师范大学心理学部副教授、博士生导师',
            '哥伦比亚大学毕业、斯坦福大学访问学者'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_022.png'),
          title: '胡晓毅',
          label: '',
          main: [
            '北京师范大学教育学部教授、硕士生导师',
            '美国堪萨斯大学特殊教育系博士',
            '北京师范大学教育学部孤独症儿童教育研究中心主任'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_055.png'),
          title: '黄翯青',
          label: '',
          main: [
            '首都师范大学副教授 ',
            '北京大学发展心理学博士'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_033.png'),
          title: '刘文',
          label: '',
          main: [
            '辽宁师范大学特聘二级教授、博士生导师、副院长',
            '中国心理学会认定心理学家'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_044.png'),
          title: '刘肖岑',
          label: '',
          main: [
            '首都师范大学学前教育学院副教授 ',
            '华东师范大学心理学博士',
            '加拿大英属哥伦比亚大学心理学联合培养博士生'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_088.png'),
          title: '魏寿洪',
          label: '',
          main: [
            '重庆师范大学教育科学院教授、硕士生导师',
            '北京师范大学特殊教育博士',
            '重庆师范大学教育科学学院特殊教育系系主任'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_066.png'),
          title: '朱晶晶',
          label: '',
          main: [
            '上海师范大学教育学院副教授 ',
            '上海师范大学博士后',
            'Carleton University访问学者'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_077.png'),
          title: '祝贺',
          label: '',
          main: [
            '华东师范大学教育学部副教授 ',
            '北京师范大学教育学部教育学专业博士'
          ]
        }
      ],
      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_03.png'),
          title: 'Julie Ann Ball',
          label: '',
          main: [
            '副教授、康博斯威尔大学教育学院早期儿童教育项目成员',
            'AMI认证3-6岁主教'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_04.png'),
          title: 'April Lin',
          label: '',
          main: [
            '康博斯威尔大学AMI培训师',
            'AMI3-6培训教师',
            '中国语文培训专任教师'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_05.png'),
          title: 'Ellen Hamilton-Ford, Ed.D.',
          label: '',
          main: [
            '康博斯威尔大学教育学院早期儿童教育项目副教授'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_06.png'),
          title: 'Jeffrey Herron, Ed.D.',
          label: '',
          main: [
            '康博斯威尔大学教育学院早期儿童教育项目副教授'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_07.png'),
          title: 'Josh Switzer, Ph.D.候选人',
          label: '',
          main: [
            '康博斯威尔大学早期儿童项目经理'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_02.png'),
          title: 'Marilyn Goodwin,Ph.D.',
          label: '',
          main: [
            '副教授、康博斯威尔大学教育学院早期儿童教育项目副主任'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_08.png'),
          title: 'Rita Curtis',
          label: '',
          main: [
            '康博斯威尔大学教育学院早期儿童教育项目讲师'
          ]
        }
      ],
      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:
            '你可知道，在中国：<br />3000万儿童受到各种情绪障碍和行为问题困扰<br />30%的儿童青少年出现过抑郁症状<br />10%的儿童青少年出现有过焦虑障碍<br />每年我国约有10万青少年死于自杀<br />中国是世界上儿童自杀第一大国',
          label:
            '很多孩子6岁以后出现的问题，都源于孩子6岁以前家庭教育的不当。必然到来的青春期、叛逆期，伴随而来的早恋、网瘾，都会打破父母前6年的安稳无忧。孩子不会自己长大，父母是孩子来到这个世界上的第一个起跑线。'
        },
        {
          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,
      newChildIsShow: false
    }
  },
  methods: {
    mouseOver() {
      this.swiper.autoplay.stop()
    },
    mouseLeave() {
      this.swiper.autoplay.start()
    },
    mouseOver2() {
      this.swiper2.autoplay.stop()
    },
    mouseLeave2() {
      this.swiper2.autoplay.start()
    },
    newChildOver() {
      this.newChildIsShow = true
    },
    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.newChildIsShow = false
      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: 10.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;
        }
        span{
          width: 100%;
        }
      }
      .show_anima_li_left {
        visibility: visible;
        animation-name: bounceInLeft;
        span{
          text-align: right;
        }
      }
      .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;
  &.bg2{
    background: url(https://zws-imgs-pub.ezijing.com/static/public/bf9ce097a044e3efbe11cb0d80270c59.png);
    background-size: cover;
  }
  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 {
    ::v-deep .swiper-container{
      .swiper-pagination-bullet{
        opacity:1;
        background: #fff;
      }
      .swiper-pagination-bullet-active{
        background: rgb(174,14,63);
      }
    }
    width: 80%;
    display: flex;
    justify-content: center;
    h3 {
      color: #ffffffff;
    }
    .major-kc-wm-list {
      display: flex;
      flex-direction: column;
      position: relative;
      padding: 20px 30px;
      width: 300px;
      margin: 0 auto;
      .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: 150px;
        .max-width-180 {
          max-width: 180px;
        }
        span {
          padding: 5px 15px 0 40px;
          color: #222222ff;
          line-height: 20px;
        }
        &::before {
          content: '';
          position: absolute;
          height: 90%;
          width: 90%;
          top: 5%;
          border: 1px solid rgba(151, 151, 151, 1);
          border-radius: 26px;
          border-style: dashed;
        }
        .mian-txt{
          position: relative;
          &::before{
            content:'';
            position: absolute;
            left: 22px;
            top: 10px;
            // -webkit-transform: translateX(-50%);
            width: 8px;
            height: 8px;
            border: 2px solid rgb(174,14,63);
            border-radius: 50%;
          }
        }
        .title{
          padding: 0;
          display: block;
          width: 100%;
          text-align: center;
        }
        .zs{
          padding: 5px 0 0 0;
          display: block;
          width: 100%;
          text-align: center;
        }
        &::before {
          content: '';
          position: absolute;
          height: 90%;
          width: 90%;
          top: 5%;
          left: 50%;
          -webkit-transform: translateX(-50%);
          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;
}
.div-child-btn{
  font-size: 22px;
  color: #AF1B40;
  line-height: 30px;
  position: relative;
  cursor: pointer;
  &::after{
    content: '';
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 1px dashed rgba(175, 27, 64, 1);
    height: 34px;
  }
}
.new-child-content{
  position: absolute;
  top: 50%;
  left: 140px;
  transform: translateY(-50%);
  .content-text{
    display: flex;
    margin-bottom: 30px;
    .circle-box{
      width: 28px;
      height: 28px;
      background: rgba(175, 27, 64, .5);
      border-radius: 50%;
      margin-top: 5px;
      .child-circle{
        width: 20px;
        height: 20px;
        background: #AF1B40;
        margin: 4px auto;
        border-radius: 50%;
      }
    }
    .text{
      font-size: 18px;
      color: #222222;
      line-height: 36px;
      width: 568px;
      margin-left: 16px;
    }
  }
}
.swiper-container{
  padding-top: 70px;
  padding-bottom: 40px;
}
</style>
