<template>
  <div class="layout_com_page">
    <vue-lazy-component>
      <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="major-banner-main">
            <div class="new-pop" v-if="index == 2 && hoverIndex == 2">
              <div class="txt">{{item.title}}</div>
            </div>
            <span v-else>{{item.title}}</span>
            <span class="pad">{{item.label}}</span>
          </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>
    </vue-lazy-component>
    <vue-lazy-component>
      <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 class="new-font">排名<i>第1</i></span>
              <span class="dl1_span">2020年加州最佳心理咨询学院</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 class="new-font">全美<i>第4</i></span>
              <span class="font-size-24">2020年临床心理咨询专业排名</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 class="new-font">加州<i>第1</i></span>
                <span class="font-size-24">2020年临床心理</span>
                <span class="font-size-24">咨询专业排名</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </vue-lazy-component>
    <vue-lazy-component>
      <div class='pics'>
        <div class='left'>
          <img src="@/assets/images/major-set/left2.png" alt="">
        </div>
        <div class='mid'>
          <div class='p1' >
            <div class="txt">Sammy LIU刘琳娜瑞士驻广州总领事馆项目经理</div>
            <img src="@/assets/images/major-set/mid-1-2-1.png" alt="">
          </div>
          <div class='p2'>
            <div class="txt top-n">校友聚会 - 中国</div>
            <img src="@/assets/images/major-set/mid-2-2.png" alt="">
          </div>
          <div class='p3'>
            <div class="txt">Tony Wang世界技能大赛中国队的首席 专家顾问 艾美酒店总经理</div>
            <img src="@/assets/images/major-set/mid-3-2.png" alt="">
          </div>
          <div class='p7'>
            <div class="txt2">国内外杰出校友推荐</div>
            <img src="@/assets/images/major-set/mid-7.png" alt="">
          </div>
          <div class='p4'>
            <div class="txt">许持平 三亚保利瑰丽酒店董事总经理</div>
            <img src="@/assets/images/major-set/mid-new1-2.png" alt="">
          </div>
          <div class='p5'>
            <div class="txt">Jonathan Wan 日本航空全球营销总监</div>
            <img src="@/assets/images/major-set/mid-new2-2.png" alt="">
          </div>
          <div class='p6'>
            <div class="txt top-n">Desiree Overhage 豪华旅行社 Inner Circle Travel 的联合创始人</div>
            <img src="@/assets/images/major-set/mid-new3-2.png" alt="">
          </div>
          <div class='p8'>
            <div class="txt top-n">Simon田森 中国首个酒店职业发展 与招聘平台“门墩儿”首 席执行官 雅高酒店集团最年轻的 华人总经理</div>
            <img src="@/assets/images/major-set/mid-new4-2.png" alt="">
          </div>
        </div>
        <div class='right'>
          <div>
            <img src="@/assets/images/major-set/right-1-2.png" alt="">
          </div>
          <div>
            <img src="@/assets/images/major-set/right-2-2.png" alt="">
          </div>
        </div>
      </div>
    </vue-lazy-component>
    <vue-lazy-component>
      <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>
    </vue-lazy-component>
    <vue-lazy-component>
      <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>
    </vue-lazy-component>
    <vue-lazy-component>
    <div class="layout_com_page_banner major-kc-wm" :style="{'min-height':700 + 'px'}">
      <h3>
        <span>师资介绍</span>
      </h3>
      <div class="major-kc-wm-body" @mouseover="mouseOver" @mouseleave="mouseLeave">
        <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" />
                </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>
    </vue-lazy-component>
    <vue-lazy-component>
    <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" />
                </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>
    </vue-lazy-component>
    <!-- <vue-lazy-component>
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
        <swiper-slide>Slide 5</swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </vue-lazy-component> -->
    <vue-lazy-component>
      <div ref="leavex">
        <leavex
          :imgUrl="require('@/assets/images/mes1.png')"
          :imgUrlBg="require('@/assets/images/major-set/mz.png')"
          :leavheight=" heightdy - 60"
        />
      </div>
    </vue-lazy-component>
    <vue-lazy-component>
      <page-footer />
    </vue-lazy-component>
  </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: {
    Swiper,
    SwiperSlide,
    Leavex,
    PageFooter
  },
  directives: {
    swiper: directive
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    },
    swiper2() {
      return this.$refs.mySwiper2.$swiper
    }
  },
  data() {
    return {
      hoverIndex: 0,
      swiperOptions: {
        observer: true,
        autoHeight: true,
        slidesPerView: 3,
        // paginationClickable: true,
        spaceBetween: 0,
        freeMode: true,
        // autoplay: {
        //   delay: 2000
        // },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: 'bullets'
        }
      },
      FilterJson,
      course: 1,
      wmList2: [
        {
          img: require('@/assets/images/wm/wm_21.png'),
          title: '钟思嘉',
          label: '博士',
          main: [
            '美国俄勒冈大学哲学博士（教育心理学与咨询心理学）',
            '现任浙江师范大学教师教育学院特聘专家',
            '曾任台湾政治大学心理系教授、博士生导师，心理系主任、理学院院长台湾辅导与咨询学会理事长、心理学会理事'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_22.png'),
          title: '方刚',
          label: '博士',
          main: [
            '著名性学家，性与性别学者专家',
            '北京林业大学性与性别研究所所长',
            '中国白丝带志愿者网络召集人',
            '湾树德科技大学人类性学研究所兼职教授',
            '世界华人性学家协会执委，中国性学会理事'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_23.png'),
          title: '许育光',
          label: '博士',
          main: [
            '美国马里兰大学(UMD) 咨商与人事服务学系博士后',
            '彰化师范大学辅导与咨商博士',
            '台湾清华大学教育心理与咨商学系教授兼任系主任',
            '辅导季刊主编（华人地区创刊 56 年之咨商辅导经典学术期刊） ',
            '台湾学校心理与咨商辅导协会发起专家暨理事长'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_24.png'),
          title: '张沛超',
          label: '博士',
          main: [
            '武汉大学心理学硕士、哲学博士',
            '香港精神分析学会会员、副主席',
            '武汉大学现代心理学研究中心 特约研究员',
            '中国心理卫生协会会员 精神分析专委会委员 青年工作委员会委员'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_25.png'),
          title: '臧寅垠',
          label: '博士',
          main: [
            '高校心理学院博士生导师',
            '英国诺丁汉大学医学院应用心理学博士',
            '英国心理学会特许心理学家',
            '美国宾夕法尼亚大学医学院精神病学系临床心理学博士后'
          ]
        }
        // ,
        // {
        //   img: require('@/assets/images/wm/wm_26.png'),
        //   title: '陈华',
        //   label: 'Eadie Chen',
        //   main: [
        //     '哥伦比亚大学心理学硕士',
        //     '哈佛大学公共管理硕士',
        //     '北京大学传播学中国人民大学政治学双学士',
        //     'ICF认证教练'
        //   ]
        // }
      ],
      wmList: [
        {
          img: require('@/assets/images/wm/wm_01.png'),
          title: 'Nicolle Zapien',
          label: '博士',
          main: [
            'CIIS人类性学博士专业 教授',
            '国际教练学会ICF 认证教练',
            '哈佛大学教育学院硕士、塞布鲁克大学临床心理学博士',
            '临床心理学研究、教学以及治疗领域拥有十余年丰富经验'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_02.png'),
          title: 'Luna Yue Ren',
          label: '博士候选人',
          main: [
            'CIIS中国项目办公室负责人',
            '中国社会心理学会下属整合心理学专业委员会委员',
            '加州整合大学东西方心理学专业博士候选人',
            '拥有十年以上政府及跨国公司人力资源测评及咨询经验'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_03.png'),
          title: 'Glenn Hartelius',
          label: '博士',
          main: [
            'CIIS整合与后人本主义心理学博士项目创始人、系主任',
            '《国际整合与后人本主义心理学专业手册》编纂人',
            '《国际整合与后人本主义心理学》专业学术期刊主编',
            '2019年复旦大学中国首届整合心理学大会开幕致辞嘉宾'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_04.png'),
          title: 'Rachael Vaughan',
          label: '执业心理咨询师',
          main: [
            'CIIS整合心理咨询专业 核心教授',
            '加州认证执业MFT临床心理咨询师',
            '英国爱丁堡大学语言学硕士、加州太平洋研究所精神分析学硕士',
            '出生于香港，成长于英国，求学于法国美国，擅长多文化视角的整合教学，身为荣格学派治疗师，兼具女性主义和后现代理论视角'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_05.png'),
          title: 'Michelle Marzullo',
          label: '博士',
          main: [
            'CIIS人类性学博士专业系主任',
            '美国国家性心理与性教育协会常任委员',
            '人类学研究博士',
            '曾多年担任安永国际特约顾问，为多家财富前100的机构和企业提供管理咨询服务'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_06.png'),
          title: 'Daniela Loenig',
          label: '执业心理咨询师',
          main: [
            'CIIS临床心理咨询专业 核心教授',
            '加州认证执业MFT临床心理咨询师',
            '美国性教育与心理健康委员会认证成员',
            '出生成长于欧洲，求学执业于美国，现与家人长驻瑞士，在自身经验实证中发展了对临床理论与治疗的体悟'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_07.png'),
          title: 'Meg Jordan',
          label: '博士',
          main: [
            'CIIS整合健康研究专业 系主任',
            '临床医学人类学专家',
            '全美医药及健康教练联盟主席',
            '哈佛大学医学院阿尔海默研究中心高级顾问',
            '作家，出版多本整合健康教练领域书籍'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_08.png'),
          title: 'Courtenay Crouch',
          label: '博士',
          main: [
            'CIIS整合心理博士专业 讲师',
            '杜克大学硕士、CIIS整合与后人本主义心理学博士',
            '美国国家心理学会 APA 国际心理学分会主管',
            '《整合心理学》《人本心理学与现象学》等国际学术期刊评委'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_09.png'),
          title: 'Clark Hsu, MFT',
          label: '博士候选人',
          main: [
            'CIIS表达艺术临床心理咨询专业 副教授',
            '加州认证执业MFT 临床心理咨询师',
            '国际表达艺术治疗协会认证治疗师',
            'CIIS东西方心理学博士候选人'
          ]
        }
      ],
      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: '应用心理学是心理学中迅速发展的一个重要学科分支。应用心理学研究心理学基本原理在各种实际领域的应用，包括工业、工程、组织管理、市场消费、社会生活、医疗保健、体育运动以及军事、司法、环境等各个领域，通过运用心理学的原则及理论来解决领域内的实际问题。随着经济、科技、社会和文化迅速发展，应用心理学有着日益广阔的前景。'
          // 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: {
    mouseOver() {
      this.swiper.autoplay.stop()
    },
    mouseLeave() {
      this.swiper.autoplay.start()
    },
    mouseOver2() {
      this.swiper2.autoplay.stop()
    },
    mouseLeave2() {
      this.swiper2.autoplay.start()
    },
    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.hoverIndex = 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;
  .major-banner-main {
    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: 10px;
      padding-top: 40px;
      justify-content: flex-start;
      font-family: PingFangSC-Regular, PingFang SC;

      .new-font {
        font-size: 32px;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        i{
          color: #E68851;
          font-size: 40px;
          font-style: normal;
        }
      }
      .dl1_span {
        font-size: 24px;
        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);
      }
      .new-font{
        font-size: 32px;
        font-weight: bold;
        i{
          font-size: 40px;
          font-style: normal;
          color: #E68851;
        }
      }
    }
    .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;
        .new-font{
          font-size: 32px;
          font-weight: bold;
          i{
            font-style: normal;
            font-size: 40px;
            color: #E68851;
          }
        }
      }
    }
    .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 {
      width: 270px;
      height: 84px;
      line-height: 84px;
      color: #AF1818;
      background: #fff;
      border-radius: 4px;
      cursor: pointer;
      margin: 30px 0px;
      border: 2px solid #AF1818;
      font-size: 22px;
    }
    .hover-bt {
      background-color: #AF1818;
      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(226, 127, 77, 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: #E27F4D;
          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;
    width: 40px;
    height: 118px;
    img{
      width: 100%;
      display: block;
    }
  }
}
.swiper-container{
  padding-top: 70px;
  padding-bottom: 40px;
}
.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;
  &.bg2{
    background: url('~@/assets/images/wm/wmbg2.png') no-repeat center top;
    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);
    margin-top: 30px;
    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;
      margin: 0 auto;
      width: 300px;
      .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: 250px;
        .max-width-180 {
          max-width: 180px;
        }
        span {
          // padding: 5px 0px;
          padding: 5px 15px 0 40px;
          color: #222222ff;
          line-height: 20px;
        }
        .mian-txt{
          position: relative;
          &::before{
            content:'';
            position: absolute;
            left: 22px;
            top: 10px;
            // -webkit-transform: translateX(-50%);
            width: 8px;
            height: 8px;
            border: 2px solid #E27F4D;
            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: #E27F4D !important;
}
.nowrap {
  white-space: nowrap;
}
.pics {
  width: 100%;
  font-size: 0;
}

.pics img {
  display: inline-block;
  width: 100%;
  transition: all 0.5s;
  transform: scale(1.03);
}

.pics img:hover{
  cursor: pointer;
  transform: scale(1.15);
}

.pics .mid div{
  position: relative;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  .txt{
    position: absolute;
    bottom: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    font-size: 18px;
    color: #fff;
    width: 90%;
    text-align: center;
    z-index: 9;
    &.top-n{
      bottom: 23px;
    }
  }
  .txt2{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    font-size: 40px;
    color: #fff;
    z-index: 9;
  }
}

.pics .left {
  display: inline-block;
  width: 14.2857%;
  overflow: hidden;
}

.pics .right {
  display: inline-block;
  width: 14.2857%;
  overflow: hidden;
}

.pics .right div{
  overflow: hidden;
}

.pics .mid {
  display: inline-block;
  width: 71.4286%;
}

.pics .mid .p1 {
  width: 30.5%;
  // background-image: url(../../assets/images/major-set/mid-1-2.png);
  // img {
  //   // width: 100%;
  //   width: 100%;
  //   height: 100%;
  // }
}

.pics .mid .p2 {
  width: 41%;
}

.pics .mid .p3 {
  width: 28.5%;
}

.pics .mid .p4 {
  width: 28.4%;
}

.pics .mid .p5 {
  width: 28.4%;
}

.pics .mid .p6 {
  width: 21.6%;
}
.pics .mid .p8{
  width: 21.6%;
}
.pics .mid .p7 {
  width: 100%;
}

.right img {
  width: 100%;
}
.major-kc-wm-body{
  ::v-deep .swiper-container{
    .swiper-pagination-bullet{
      opacity:1;
      background: #fff;
    }
    .swiper-pagination-bullet-active{
      background: #FF8340;
    }
  }
}
// .major-kc-wm-body >>> .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
//   opacity:1;
//   background: #fff;
// }
.new-pop{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.6);
  .txt{
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    font-size: 18px;
    line-height: 1.5;
  }
}
</style>
