<template>
  <div class="layout_com_page">
    <div class="banner">
      <div class="mask"></div>
      <div class="banner-inner">
        <h1>加州整合大学-应用心理学硕士</h1>
        <p>
          引领你进入一段逐步深入的学习旅程——从探索自我的起点出发，延伸至对伴侣关系、婚姻家庭的触碰和理解，递进到对团体、组织和领导力的洞察与挖掘，同时收获心理教练技能。
        </p>
      </div>
    </div>
    <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/left.png" alt="" />
        </div>
        <div class="mid">
          <div class="p1">
            <div class="txt">后人本心理学创建者 <br />斯坦·葛罗夫</div>
            <img src="@/assets/images/major-set/mid-1.png" alt="" />
          </div>
          <div class="p2">
            <div class="txt top-n">
              正念之父 <br />
              乔·卡巴金
            </div>
            <img src="@/assets/images/major-set/mid-2.png" alt="" />
          </div>
          <div class="p7">
            <div class="txt2">国内外心理界大咖联袂推荐</div>
            <img src="@/assets/images/major-set/mid-7.png" alt="" />
          </div>
          <div class="p3">
            <div class="txt">
              西方正念先驱导师 <br />
              杰克·康菲尔德
            </div>
            <img src="@/assets/images/major-set/mid-3.png" alt="" />
          </div>
          <div class="p5">
            <div class="txt">澳门城市大学教授<br />申荷永</div>
            <img src="@/assets/images/major-set/mid-4.png" alt="" />
          </div>
        </div>
        <div class="right">
          <div>
            <img src="@/assets/images/major-set/right-1.png" alt="" />
          </div>
          <div>
            <img src="@/assets/images/major-set/right-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-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>
      </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>
      <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>
      <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 :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: '博士',
          main: [
            '副教授',
            '和睦家医院执业精神科医师',
            '中国心理学会临床心理学注册工作委员会注册督导师',
            '心理咨询师工作委员会委员'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_27.png'),
          title: '王继堃',
          label: '博士',
          main: ['华东师范大学应用心理学副教授', '医学博士', '心理学博士后', '中国社会心理学会婚姻家庭专委会委员']
        },
        {
          img: require('@/assets/images/wm/wm_28.png'),
          title: '鲁华章',
          label: '博士',
          main: ['中国地质大学(北京）副教授', '应用心理学、安全管理专业硕士导师', '国际教练联盟认证专业级别教练（PCC）']
        },
        {
          img: require('@/assets/images/wm/wm_29.png'),
          title: '牟惊雷',
          label: '博士',
          main: [
            '北京大学心理学博士候选人',
            '北大“危机干预热线”主要建设者',
            '树洞网络危机干预负责人',
            '北京字节跳动科技有限公司签约心理专家'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_30.png'),
          title: '梁冠琼',
          label: '硕士',
          main: [
            '美国宾夕法尼亚大学心理咨询(Counseling and Mental Health Services)硕士',
            '中国心理学会临床与咨询心理学注册系统注册心理师'
          ]
        }
      ],
      wmList: [
        {
          img: require('@/assets/images/wm/wm_01.png'),
          title: 'Glenn Hartelius',
          label: '博士',
          main: [
            'CIIS整合与后人本主义心理学博士项目创始人、系主任',
            '《国际整合与后人本主义心理学专业手册》编纂人',
            '《国际整合与后人本主义心理学》专业学术期刊主编',
            '2019年复旦大学中国首届整合心理学大会开幕致辞嘉宾'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_02.png'),
          title: 'Rachael Vaughan',
          label: 'MFT',
          main: [
            'CIIS整合心理咨询专业 核心教授',
            '加州认证执业MFT临床心理咨询师',
            '英国爱丁堡大学语言学硕士、加州太平洋研究所精神分析学硕士',
            '出生于香港，成长于英国，求学于法国美国，擅长多文化视角的整合教学，身为荣格学派治疗师，兼具女性主义和后现代理论视角'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_03.png'),
          title: 'Will Sol',
          label: '博士',
          main: ['CIIS整合与后人本主义心理学博士', '社区精神卫生与儿童关爱工作者、儿童领养人']
        },

        {
          img: require('@/assets/images/wm/wm_04.png'),
          title: 'Elliott Kronenfeld',
          label: '博士',
          main: ['CIIS人类性学博士', '畅销书"Couple by Intentions"作者', 'TEDx演讲者']
        },
        {
          img: require('@/assets/images/wm/wm_05.png'),
          title: 'Meg Jordan',
          label: '博士',
          main: [
            'CIIS整合健康研究专业 系主任',
            '临床医学人类学专家',
            '全美医药及健康教练联盟主席',
            '哈佛大学医学院阿尔海默研究中心高级顾问',
            '作家，出版多本整合健康教练领域书籍'
          ]
        },
        {
          img: require('@/assets/images/wm/wm_06.png'),
          title: 'Julie Viellieu',
          label: 'MA',
          main: ['综合营养协会认证健康教练', '美国抗衰老医学学会认证生活方式教练']
        },

        {
          img: require('@/assets/images/wm/wm_09.png'),
          title: 'Clark Hsu',
          label: 'MFT',
          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>
.banner {
  position: relative;
  height: calc(100vh - 10px);
  min-height: 600px;
  background: url(https://webapp-pub.ezijing.com/project/ciis/project_banner.jpg) no-repeat center;
  background-size: cover;
  /* 遮罩层*/
  .mask {
    background-color: rgba(0, 0, 0, 0.53);
    /* 使用固定定位让元素撑满全屏 */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .banner-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 980px;
    margin: 0 auto;
  }
  h1 {
    font-size: 50px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #ffffff;
    line-height: 58px;
    letter-spacing: 9px;
    text-align: center;
    padding: 20px 0;
  }
  p {
    font-size: 24px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #ffffff;
    line-height: 40px;
  }
}
.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: #e27f4d;
      background: #fff;
      border-radius: 4px;
      cursor: pointer;
      margin: 30px 0px;
      border: 2px solid #e27f4d;
      font-size: 22px;
    }
    .hover-bt {
      background-color: #e27f4d;
      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 {
          width: 180px;
          height: 180px;
          border-radius: 50%;

          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: 16.21%;
  overflow: hidden;
}

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

.pics .right div {
  overflow: hidden;
}

.pics .mid {
  display: inline-block;
  width: 67.58%;
  overflow: hidden;
}

.pics .mid .p1 {
  width: 27.1%;
}

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

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

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

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

// .pics .mid .p6 {
//   // width: 21.6%;
//   height: 350px;
//   width: 33%;
// }
.pics .mid .p8 {
  // width: 21.6%;
  width: 34%;
}
.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>
