<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" style="color:#AF1818">{{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>酒店与旅游方向工商管理硕士项目MBA</span>
          <span class="font-size-40">
            SHMS瑞士酒店管理大学
            <!-- <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">瑞士最大的款待业（泛服务业）</span>
              <br/>
              <span class="dl1_span_2">管理大学联盟</span>
            </div>
            <img :src="require('@/assets/images/major-set/dl1-2.png')" style="width:614px;height:443px;margin-left:40px" 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-2.png')" style="width:424px;height:265px" alt />
              <span class="new-font" style="margin-left:85px">排名<i>第2</i></span>
              <span class="font-size-24" style="margin-left:85px">2020年QS排名榜中全球酒店管理</span>
              <br>
              <span class="font-size-24" style="position:relative;top:-50px;left:0px;margin-left:85px">学校学术排名第二</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-2.png')" style="width:327px;height:202px" alt />
              <div class="dl2-span" style="margin-left:0px">
                <span class="new-font"><i>21000+</i></span>
                <span class="font-size-24">校友遍布全球担</span>
                <br>
                <span class="font-size-24" style="margin-top:-55px">任高管</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" style="font-size:14px">Sammy LIU刘琳娜
              <br>
              瑞士驻广州总领事馆项目经理</div>
            <img src="@/assets/images/major-set/mid-1-2-1.png" alt="" style="height:100%;width:100%;position:relative;top:4px">
          </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" style="font-size:14px">Tony Wang
              <br>
              世界技能大赛中国队的首席
              <br>
              专家顾问
              <!-- <br> -->
              <!-- 艾美酒店总经理 -->
            </div>
            <img src="@/assets/images/major-set/mid-3-2.png" alt="">
          </div>
          <div class='p7'>
            <div class="txt2" style="font-size:14px">国内外杰出校友推荐</div>
            <img src="@/assets/images/major-set/mid-7.png" alt="">
          </div>
          <div class='p4'>
            <div class="txt" style="font-size:14px">
              许持平
              <br>
              三亚保利瑰丽酒店董事总经理
            </div>
            <img src="@/assets/images/major-set/mid-new1-2.png" alt="">
          </div>
          <div class='p5'>
            <div class="txt" style="font-size:14px">Jonathan Wan<br>日本航空全球营销总监</div>
            <img src="@/assets/images/major-set/mid-new2-2.png" alt="">
          </div>
          <div class='p6'>
            <div class="txt top-n" style="font-size:14px">Desiree Overhage<br>豪华旅行社<br>Inner Circle Travel<br>的联合创始人</div>
            <img src="@/assets/images/major-set/mid-new3-2.png" alt="">
          </div>
          <div class='p8'>
            <div class="txt top-n" style="font-size:14px">Simon田森<br>中国首个酒店职业发展<br>与招聘平台“门墩儿”首<br>席执行官<br>雅高酒店集团最年轻的<br>华人总经理</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-2.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-2.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/su2.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" style="color:#666666;margin-top:40px">{{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/wm2_01.png'),
          title: 'Stephan Earnhart',
          // label: '博士',
          main: [
            'SEG Pro 董事总经理，超过20年酒店管理经验，曾任职于丽思·卡尔顿、四季酒店、迪斯尼世界、文华东方、半岛酒店等担任高管。曾任瑞士酒店管理大学校长10年'
            // '国际教练学会ICF 认证教练',
            // '哈佛大学教育学院硕士、塞布鲁克大学临床心理学博士',
            // '临床心理学研究、教学以及治疗领域拥有十余年丰富经验'
          ]
        },
        {
          img: require('@/assets/images/wm/wm2_02.png'),
          title: 'Sonia Santana',
          // label: '博士候选人',
          main: [
            'SEG Pro 联席董事总经理，在物业投资、资产管理、业务拓展方面拥有超过20年的经验。曾任浩华国际、凯悦、美高梅、万豪、丽笙酒店的投资董事总经理和酒店开发总监'
            // '中国社会心理学会下属整合心理学专业委员会委员',
            // '加州整合大学东西方心理学专业博士候选人',
            // '拥有十年以上政府及跨国公司人力资源测评及咨询经验'
          ]
        },
        {
          img: require('@/assets/images/wm/wm2_03.png'),
          title: 'Andrea Leuenberger',
          // label: '博士',
          main: [
            '项目主管，擅长于教学领域的学习设计。曾在纽约奢华酒店Swissôtel The Drake和莫斯科、中亚地区等多家奢华酒店担任运营总监和高管'
            // '《国际整合与后人本主义心理学专业手册》编纂人',
            // '《国际整合与后人本主义心理学》专业学术期刊主编',
            // '2019年复旦大学中国首届整合心理学大会开幕致辞嘉宾'
          ]
        },
        {
          img: require('@/assets/images/wm/wm2_04.png'),
          title: 'Max Behesht',
          // label: '执业心理咨询师',
          main: [
            '瑞士恺撒里兹酒店管理大学校长，领导力专家，擅长于战略人才发展与组织行为学领域。曾在杜邦集团担任国际金融、服务及商业部门的多个职位'
            // '加州认证执业MFT临床心理咨询师',
            // '英国爱丁堡大学语言学硕士、加州太平洋研究所精神分析学硕士',
            // '出生于香港，成长于英国，求学于法国美国，擅长多文化视角的整合教学，身为荣格学派治疗师，兼具女性主义和后现代理论视角'
          ]
        },
        {
          img: require('@/assets/images/wm/wm2_05.png'),
          title: 'Robert Saltz',
          // label: '博士',
          main: [
            '瑞士酒店管理大学学生事务主管，人力资源发展专家。曾担任韦尔比耶与巴黎的W酒店人力资源筹开团队成员，喜达屋酒店集团认证高级培训师。'
            // '美国国家性心理与性教育协会常任委员',
            // '人类学研究博士',
            // '曾多年担任安永国际特约顾问，为多家财富前100的机构和企业提供管理咨询服务'
          ]
        },
        {
          img: require('@/assets/images/wm/wm2_06.png'),
          title: 'David Richey',
          // label: '执业心理咨询师',
          main: [
            'Richey International创始人和CEO，在高端消费者行为研究领域具有丰富经验，超过30年酒店管理和顾问经验。长期客户包括四季酒店、迪士尼、维京邮轮、半岛酒店、历峰集团、香格里拉酒店集团等'
            // '加州认证执业MFT临床心理咨询师',
            // '美国性教育与心理健康委员会认证成员',
            // '出生成长于欧洲，求学执业于美国，现与家人长驻瑞士，在自身经验实证中发展了对临床理论与治疗的体悟'
          ]
        },
        {
          img: require('@/assets/images/wm/wm2_07.png'),
          title: 'Siobhan O’Leary',
          // label: '博士',
          main: [
            '人力资源与企业文化导师、战略规划师。曾在瑰丽酒店和四季酒店担任人力与文化高级副总裁。曾担任首席人力官、高级人力资源主管等职务。擅长组织文化及领导力领域'
            // '临床医学人类学专家',
            // '全美医药及健康教练联盟主席',
            // '哈佛大学医学院阿尔海默研究中心高级顾问',
            // '作家，出版多本整合健康教练领域书籍'
          ]
        },
        {
          img: require('@/assets/images/wm/wm2_08.png'),
          title: 'Erich Steinbock',
          // label: '博士',
          main: [
            '曾担任利亚德瑰丽酒店区域副总裁兼董事总经理，丽思·卡尔顿酒店集团餐饮副总裁。Steinbock先生拥有酒店管理博士学位'
            // '杜克大学硕士、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-2.png'),
          bgShow: true
        },
        {
          img: require('@/assets/images/major-set/ma02-2.png'),
          bgShow: true
        },
        {
          img: require('@/assets/images/major-set/ma03-2.png'),
          bgShow: true,
          title: '瑞士酒店管理大学牵头，依托国内顶尖线上教育平台——清华紫荆教育，为文旅/酒店行业量身定制的 在线+线下 MBA项目，以助力文旅行业培养管理人才。'
          // label:
          // ' 一百多年来，蒙台梭利教育法经由美国上流社会的推崇，进而风靡全球，得到世界各地教育界的认同和推崇。全球蒙氏幼儿园28000所，而康博斯威尔大学是为数不多的拥有蒙台梭利专业学位教育的高等学府。'
        },
        {
          img: require('@/assets/images/major-set/ma04-2.png'),
          bgShow: true,
          minWidth: true
        }
      ],
      timeList: [
        {
          name: '授课形式',
          title: '中文授课',
          title1: '简洁易操作的',
          title2: '多媒体交互平台',
          title3: '线下实践+工作坊',
          title4: '赴瑞士研学',
          img: require('@/assets/images/major-set/bxl1-2.png'),
          bgShow: true
        },
        {
          name: '上课时间',
          title: '按照教学周发布课程',
          title1: '可灵活掌握学习时间',
          title2: '可反复观看和查阅',
          img: require('@/assets/images/major-set/bxl2-2.png'),
          bgShow: true
        },
        {
          name: '学位授予',
          title: '保证出勤',
          // title1: '撰写论文并合格',
          title2: '修满全部学分',
          title3: '授予硕士学位',
          img: require('@/assets/images/major-set/bxl3-2.png'),
          bgShow: true
        },
        {
          name: '毕业典礼',
          title: '在国内或赴瑞士',
          title1: '参加毕业典礼',
          title2: '与各国学子欢聚一堂',
          img: require('@/assets/images/major-set/bxl4-2.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);
      }
      .dl1_span_2 {
        position: relative;
        right: 0px;
        top: -55px;
        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;
      left: 440px;
    }
  }
}
.major-dl2 {
  position: relative;
  margin-top: -200px;
  left: -10px;
  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(197, 28, 6, 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: #AF1818;
          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-2.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>
