zhongde-website/pages/index.vue

<template>
  <div class="container">
    <!-- banner -->
    <VBanner :bannerData="bannerData"></VBanner>
    <!-- 培养优质思维模式，建构思维“芯” -->
    <div class="index-thought">
      <div class="i-thought-content">
        <div class="t-top title-content wow animate__animated animate__fadeInDown">
          <div class="title-zh">
            <div class="title-en">THOUGHT</div>
            培养优质思维模式，建构思维“芯”
          </div>
        </div>
        <div class="thought-content-box">
          <img src="~/assets/images/index/map.png" alt="">
          <div class="map-content">
            <ul class="list">
              <li class="con-item one">
                <div class="con-box">
                  <div class="con">
                    <div class="num">
                      <countTo :startVal='0' :endVal='420' :duration='3000'></countTo>
                      <span class="unit">个</span>
                    </div>
                    <p class="color-gray">学员覆盖城市地区</p>
                  </div>
                  <div class="hover-box">
                    <div class="icon">
                      <img
                        src="~assets/images/index/icon_map_01.png"
                        alt="学员覆盖城市地区">
                    </div>
                  </div>
                </div>
              </li>
              <li class="con-item two">
                <div class="con-box">
                  <div class="con">
                    <div class="num">
                      <countTo :startVal='79000' :endVal='800000' :duration='3000'></countTo>
                      <span class="unit">+</span>
                    </div>
                    <p class="color-gray">累计服务学员</p>
                  </div>
                  <div class="hover-box">
                    <div class="icon">
                      <img
                        src="~assets/images/index/icon_map_02.png"
                        alt="累计服务学员">
                    </div>
                  </div>
                </div>
              </li>
              <li class="con-item three">
                <div class="con-box">
                  <div class="con">
                    <div class="font52 num">
                      <countTo :startVal='0' :endVal='98.6' :decimals='1' :duration='3000'></countTo>
                      <span class="unit">%</span>
                    </div>
                    <p class="color-gray">评价好评率</p>
                  </div>
                  <div class="hover-box">
                    <div class="icon">
                      <img
                        src="~assets/images/index/icon_map_03.png"
                        alt="评价好评率">
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 创始人 -->
    <div class="index-founder">
      <div class="founder-content-box">
        <div class="founder_img wow animate__animated animate__fadeInLeft">
          <img src="~/assets/images/index/img_boss.png" alt="">
        </div>
        <div class="founder_content">
          <div class="name founder-item">
            <span class="dot"></span>
            <p>中德智慧创始人</p>
          </div>
          <p class="title founder-item wow animate__animated animate__fadeInLeft">培养优质思维模式，建构思维“芯”</p>
          <p
            class="desc founder-item wow animate__animated animate__fadeInDown"
          >全球优质儿童逻辑思维教育专家以国际教育理念为指导，推动中国学前教育事业发展成为中国学前儿童思维教育领域奠基者和创领者之- -率先领导和实践幼儿园思维游戏化教学，用全球同频使用的优质思维教育内容，为0-12岁儿童培养优质思维模式，建构思维“芯”。是国际化科技教育内容的创始者，以“让中国孩子幸福成长”为使命，始终以‘走出去、请进来”、“洋为中用”的全球化视野，融合中西文化，全力打造具有成长型思维模式的未来人才</p>
          <div class="btn founder-item wow animate__animated animate__fadeInDown">
            <nuxt-link to="/">了解中德智慧</nuxt-link>
          </div>
        </div>
      </div>
      <!-- <div class="found-left">
        <img src="~/assets/images/index/found_left.png" alt="" srcset="">
      </div>-->
      <div class="found-right">
        <img src="~/assets/images/index/found_right.png" alt="" srcset="">
      </div>
    </div>

    <!-- 思维“芯”产品 -->
    <div class="index-thinking">
      <div class="i-t-content">
        <div class="t-top title-content wow animate__animated animate__fadeInDown">
          <div class="title-zh">
            <div class="title-en">PRODUCT</div>
            思维“芯”产品
          </div>
        </div>
        <div class="content-box thinking-content-box">
          <div class="cate-box thinking-cate-box">
            <ul class="cate-nav thinking-cate-nav">
              <li
                class="thinking-products-kind"
                v-for="(item, index) in productCate"
                :class="{active:index == clickProdIndex}"
                :key="index"
                @click="getProdList(index)"
              >
                <nuxt-link to="/">{{ item.title }}</nuxt-link>
                <div class="line"></div>
              </li>
            </ul>
            <div class="cate-list thinking-cate-list">
              <div
                class="thinking-product-item wow animate__animated animate__lightSpeedInLeft"
                v-for="(item, index) in productCate"
                :key="index"
                @click="clickProduct(item)"
              >
                <div class="thinking-product-item-img">
                  <nuxt-link to="/">
                    <img src="~/assets/images/index/product.png" alt="" srcset="">
                  </nuxt-link>
                  <div class="product-tag">基础版
                    <!-- <img src="~/assets/images/index/product_tag.png" alt="" srcset=""> -->
                  </div>
                </div>
                <div class="thinking-product-info">
                  <div class="thinking-product-title">
                    <nuxt-link to="/">幼小衔接课程……</nuxt-link>
                  </div>
                  <div class="thinking-product-content">
                    <div class="thinking-product-price">
                      ￥
                      <span class="price-num">888</span>
                    </div>
                    <div class="thinking-product-btn">
                      <nuxt-link to="/">查看产品</nuxt-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="more-btn wow animate__animated animate__zoomIn">更多产品</div>
      </div>
    </div>

    <!-- 产品轮播 -->
    <div class="index-product">
      <div class="product-content-box">
        <div
          class="swiper swiperBox"
          v-swiper:swiper="swiperOption"
          ref="swiperBox"
          @mouseenter="stopSwiper"
          @mouseleave="startSwiper"
        >
          <div class="swiper-wrapper">
            <div v-for="(item, index) in productImage" :key="index" class="swiper-slide">
              <img :src="item.imgUrl">
              <p class="name">{{ item.title }}</p>
            </div>
          </div>
        </div>
        <!-- <div class="expert-swiper-pagination" slot="pagination"></div> -->
        <div class="swiper-button-prev" slot="button-prev" @click="prev"></div>
        <div class="swiper-button-next" slot="button-next" @click="next"></div>
      </div>
    </div>

    <!-- 网校课程 -->
    <div class="index-course">
      <div class="i-c-content">
        <div class="c-top title-content wow animate__animated animate__fadeInDown">
          <div class="title-zh">
            <div class="title-en">MCOURSE</div>
            网校课程
          </div>
        </div>
        <div class="content-box course-content-box">
          <div class="cate-box course-cate-box">
            <ul class="cate-nav course-cate-nav">
              <li
                class="products-kind thinking-products-kind"
                v-for="(item, index) in courseCate"
                :class="{active:index == clickProdIndex}"
                :key="index"
                @click="getProdList(index)"
              >
                <nuxt-link to="/">{{ item.title }}</nuxt-link>
                <div class="line"></div>
              </li>
            </ul>
            <div class="cate-list course-cate-list">
              <div
                class="product-item course-product-item wow animate__animated animate__lightSpeedInRight"
                v-for="(item, index) in courseCate"
                :key="index"
              >
                <div class="product-item-img course-product-item-img">
                  <nuxt-link target="_blank" to="/">
                    <img src="~/assets/images/index/product_course@3x.png" alt="" srcset="">
                  </nuxt-link>
                  <div class="course-product-item-play">
                    <nuxt-link target="_blank" to="/">
                      <img src="~/assets/images/index/player.png" alt="" srcset="">
                    </nuxt-link>
                  </div>
                </div>
                <div class="course-product-info">
                  <div class="course-product-title">幼小衔接课程……</div>
                  <div class="course-product-content">
                    <div class="course-product-price">
                      ￥
                      <span class="price-num">888</span>
                    </div>
                    <div class="course-product-user">
                      <img src="~/assets/images/index/product_person.png" alt="" srcset="">
                      <div class="views">158</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="more-btn wow animate__animated animate__zoomIn">更多产品</div>
      </div>
    </div>

    <!-- 多渠道教学场景 -->
    <div class="index-scenes">
      <div class="i-s-content">
        <div class="title-content wow animate__animated animate__fadeInDown">
          <div class="title-zh">
            <div class="title-en">TRENCH</div>
            多渠道教学场景
          </div>
        </div>
      </div>
      <div class="scenes-content-box">
        <ul class="panorama-education-list">
          <li class="mobile-education mobile-education-1 wow animate__animated animate__jackInTheBox" @mouseenter="mobileEnter">
            <div class="small-education-div">
              <div class="mobile-small-img">
                <img src="~/assets/images/index/teach_01_icon_nor.png" alt="" srcset="">
              </div>
              <p class="mobile-education-title">逻辑狗APP</p>
              <p class="mobile-education-sub">逻辑狗，与千万</p>
              <p class="mobile-education-sub">逻辑狗宝贝一起成长</p>
              <div class="mobile-education-img">
                <img src="~/assets/images/index/teach_01.png">
              </div>
            </div>
            <div class="big-mobile-education">
              <div class="pc-education-top">
                <div class="pc-small-img">
                  <img src="~/assets/images/index/teach_01_icon_active.png" alt="" srcset="">
                </div>
                <div class="education-title-box">
                  <p class="education-title">逻辑狗APP</p>
                  <p class="education-sub-title">逻辑狗，与千万逻辑狗宝贝一起成长</p>
                </div>
              </div>
              <div class="education-img">
                <img src="~/assets/images/index/teach_01.png">
              </div>
            </div>
          </li>
          <li class="mobile-education mobile-education-2 wow animate__animated animate__jackInTheBox" @mouseenter="mobileEnter">
            <div class="small-education-div">
              <div class="mobile-small-img">
                <img src="~/assets/images/index/teach_02_icon_nor.png" alt="" srcset="">
              </div>
              <p class="mobile-education-title">逻辑狗家长端APP</p>
              <p class="mobile-education-sub">随时了解宝宝</p>
              <p class="mobile-education-sub">的状态</p>
              <div class="mobile-education-img">
                <img src="~/assets/images/index/teach_02.png">
              </div>
            </div>
            <div class="big-mobile-education">
              <div class="pc-education-top">
                <div class="pc-small-img">
                  <img src="~/assets/images/index/teach_02_icon_active.png" alt="" srcset="">
                </div>
                <div class="education-title-box">
                  <p class="education-title">逻辑狗家长端APP</p>
                  <p class="education-sub-title">随时了解宝宝的状态</p>
                </div>
              </div>
              <div class="education-img">
                <img src="~/assets/images/index/teach_02.png">
              </div>
            </div>
          </li>
          <li class="mobile-education mobile-education-3 wow animate__animated animate__jackInTheBox" @mouseenter="mobileEnter">
            <div class="small-education-div">
              <div class="mobile-small-img">
                <img src="~/assets/images/index/teach_03_icon_nor.png" alt="" srcset="">
              </div>
              <p class="mobile-education-title">逻辑狗教师端APP</p>
              <p class="mobile-education-sub">实现园所互通</p>
              <p class="mobile-education-sub"></p>
              <div class="mobile-education-img">
                <img src="~/assets/images/index/teach_03.png">
              </div>
            </div>
            <div class="big-mobile-education">
              <div class="pc-education-top">
                <div class="pc-small-img">
                  <img src="~/assets/images/index/teach_03_icon_active.png" alt="" srcset="">
                </div>
                <div class="education-title-box">
                  <p class="education-title">逻辑狗教师端APP</p>
                  <p class="education-sub-title">实现园所互通</p>
                </div>
              </div>
              <div class="education-img">
                <img src="~/assets/images/index/teach_03.png">
              </div>
            </div>
          </li>
          <li class="mobile-education mobile-education-4 wow animate__animated animate__jackInTheBox" @mouseenter="mobileEnter">
            <div class="small-education-div">
              <div class="mobile-small-img">
                <img src="~/assets/images/index/teach_04_icon_nor.png" alt="" srcset="">
              </div>
              <p class="mobile-education-title">微信H5</p>
              <p class="mobile-education-title">逻辑狗官方商城</p>
              <p class="mobile-education-title">逻辑狗家长训练营</p>
              <div class="mobile-education-img">
                <img src="~/assets/images/index/teach_04.png">
              </div>
            </div>
            <div class="big-mobile-education">
              <div class="pc-education-top">
                <div class="pc-small-img">
                  <img src="~/assets/images/index/teach_04_icon_active.png" alt="" srcset="">
                </div>
                <div class="education-title-box">
                  <p class="education-title">微信H5</p> 
                  <p class="education-sub-title">逻辑狗官方商城</p>
                  <p class="education-sub-title">逻辑狗家长训练营</p>
                </div>
              </div>
              <div class="education-img">
                <img src="~/assets/images/index/teach_04.png">
              </div>
            </div>
          </li>
          <li class="mobile-education mobile-education-5 wow animate__animated animate__jackInTheBox" @mouseenter="mobileEnter">
            <div class="small-education-div">
              <div class="mobile-small-img">
                <img src="~/assets/images/index/teach_05_icon_nor.png" alt="" srcset="">
              </div>
              <p class="mobile-education-title">微信小程序</p>
              <p class="mobile-education-title">中德智慧网校</p>
              <p class="mobile-education-sub"></p>
              <div class="mobile-education-img">
                <img src="~/assets/images/index/teach_05.png">
              </div>
            </div>
            <div class="big-mobile-education">
              <div class="pc-education-top">
                <div class="pc-small-img">
                  <img src="~/assets/images/index/teach_05_icon_active.png" alt="" srcset="">
                </div>
                <div class="education-title-box">
                  <p class="education-title">微信小程序</p>
                  <p class="education-sub-title">中德智慧网校</p>
                </div>
              </div>
              <div class="education-img">
                <img src="~/assets/images/index/teach_05.png">
              </div>
            </div>
          </li>
          <!-- <li class="mobile-education mobile-education-6" @mouseenter="mobileEnter">
            <div class="small-education-div">
              <div class="mobile-small-img">
                <i class="iconfont T3 EC2 iconicon_Component"></i>
              </div>
              <p class="mobile-education-title">APP内嵌SDK</p>
              <p class="mobile-education-sub">打破终端流量转化壁垒</p>
              <p class="mobile-education-sub">在自有APP搭建店铺</p>
              <div class="mobile-education-img">
                <img src="~/assets/images/index/img_SDK.png">
              </div>
            </div>
            <div class="big-mobile-education">
              <div class="pc-education-top">
                <div class="pc-small-img">
                  <i class="iconfont iconicon_Component"></i>
                </div>
                <div class="education-title-box">
                  <p class="education-title">APP内嵌SDK</p>
                  <p class="education-sub-title">打破终端流量转化壁垒在自有APP搭建店铺</p>
                </div>
              </div>
              <div class="education-img">
                <img src="~/assets/images/index/img_SDK.png">
              </div>
            </div>
          </li> -->
        </ul>
      </div>
    </div>

    <!-- 逻辑狗探索小镇 -->
    <div class="index-town">
      <div class="i-town-content w1200">
        <div class="t-top title-content">
          <div class="title-zh wow animate__animated animate__fadeInDown">
            <div class="title-en">SMALL TOWN</div>
            逻辑狗探索小镇
          </div>
          <p class="title-sub animate__animated wow animate__fadeInLeft">专注3.4-12岁儿童优质思维能力养成的场景式，游戏化体验中心</p>
        </div>
        <div class="town-content-box">
          <div class="town-btn-group">
            <div class="town-btn-about animate__animated wow animate__fadeInLeft">了解我们</div>
            <div class="town-btn-join animate__animated wow animate__fadeInRight">加入我们</div>
          </div>
          <div class="town-content-skill">
            <div class="town-content-img">
              <img src="~/assets/images/index/town_img.png" alt="" srcset="">
              <div class="skill-item skill-item-01 wow animate__animated animate__lightSpeedInLeft">
                <img src="~/assets/images/index/icon_town_01.png" alt="" srcset="">
                <p>知识迁移</p>
              </div>
              <div class="skill-item skill-item-02 wow animate__animated animate__lightSpeedInRight">
                <img src="~/assets/images/index/icon_town_02.png" alt="" srcset="">
                <p class="big-font">观察能力</p>
              </div>
              <div class="skill-item skill-item-03 wow animate__animated animate__lightSpeedInLeft">
                <img src="~/assets/images/index/icon_town_03.png" alt="" srcset="">
                <p>手眼协调</p>
              </div>
              <div class="skill-item skill-item-04 wow animate__animated animate__lightSpeedInRight">
                <img src="~/assets/images/index/icon_town_04.png" alt="" srcset="">
                <p class="big-font">语言能力</p>
              </div>
              <div class="skill-item skill-item-05 wow animate__animated animate__lightSpeedInLeft">
                <img src="~/assets/images/index/icon_town_05.png" alt="" srcset="">
                <p class="big-font">想象能力</p>
              </div>
              <div class="skill-item skill-item-06 wow animate__animated animate__lightSpeedInRight">
                <img src="~/assets/images/index/icon_town_06.png" alt="" srcset="">
                <p>分类能力</p>
              </div>
              <div class="skill-item skill-item-07 wow animate__animated animate__lightSpeedInLeft">
                <img src="~/assets/images/index/icon_town_07.png" alt="" srcset="">
                <p>推理能力</p>
              </div>
              <div class="skill-item skill-item-08 wow animate__animated animate__lightSpeedInRight">
                <img src="~/assets/images/index/icon_town_08.png" alt="" srcset="">
                <p class="big-font">空间能力</p>
              </div>
              <div class="skill-item skill-item-09 wow animate__animated animate__lightSpeedInLeft">
                <img src="~/assets/images/index/icon_town_09.png" alt="" srcset="">
                <p class="big-font">专注能力</p>
              </div>
              <div class="skill-item skill-item-10 wow animate__animated animate__lightSpeedInRight">
                <img src="~/assets/images/index/icon_town_10.png" alt="" srcset="">
                <p>数学能力</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="town_bottom_bg">
        <img src="~/assets/images/index/town_bottom.png" alt="" srcset="">
      </div>
    </div>

    <!-- 专家名师 -->
    <div class="index-expert">
      <div class="i-expert-content w1200">
        <div class="e-top title-content wow animate__animated animate__fadeInDown">
          <div class="title-zh">
            <div class="title-en">
              EXPERT
            </div>
            专家名师
          </div>
        </div>
        <div class="e-content-box">
          <div class="w-innner">
            <div id="certify" class="w1200">
              <div
                class="swiper-container"
                v-swiper:expertSwiper="expertSwiperOption"
                ref="swiperExpertBox"
                @mouseenter="stopExpertSwiper"
                @mouseleave="startExpertSwiper"
              >
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <img
                      src="https://static-www.putaocdn.com/pc/static/img/img_jiaoyu_mokuai3_yanfa2@2x.v202007141810.png"
                    >
                  </div>
                  <div class="swiper-slide">
                    <img
                      src="https://static-www.putaocdn.com/pc/static/img/img_jiaoyu_mokuai3_yanfa3@2x.v202007141810.png"
                    >
                  </div>
                  <div class="swiper-slide">
                    <img
                      src="https://static-www.putaocdn.com/pc/static/img/img_jiaoyu_mokuai3_yanfa1@2x.v202007141810.png"
                    >
                  </div>
                </div>
                <!-- <div class="swiper-button-prev" slot="button-prev" @click="prev"></div> -->
                <!-- <div class="swiper-button-next" slot="button-next" @click="next"></div>  -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新闻资讯 -->
    <div class="index-article">
      <div class="i-article-content w1200">
        <div class="a-top title-content wow animate__animated animate__fadeInDown">
          <div class="title-zh">
            <div class="title-en">NEWS</div>
            新闻资讯
          </div>
        </div>
        <div class="article-content-box">
          <div class="article-content-top">
            <div class="article-content-top-left">
              <div class="article-type-header">
                <div class="article-type-title">{{ articleList.articleNews.typeTitle }}</div>
                <div>
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <div class="article-content-info">
                <img :src="articleList.articleNews.content[0].imgUrl" alt="" srcset="">
                <p class="info-title">{{ articleList.articleNews.content[0].title }}</p>
              </div>
            </div>
            <div class="article-content-top-right">
              <div class="article-type-header">
                <div class="article-type-title">{{ articleList.storeNews.typeTitle }}</div>
                <div>
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <div class="article-content-info">
                <template v-for="(item, index) in articleList.storeNews.content">
                  <div v-if="index < 4" class="article-item-right" :key="index">
                    <img :src="item.imgUrl" alt="">
                    <p>{{ item.title }}</p>
                  </div>
                </template>
              </div>
            </div>
          </div>
          <div class="article-content-bottom">
            <div class="article-type-header">
              <div class="article-type-title">{{ articleList.industryNews.typeTitle }}</div>
              <div>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
            <div class="article-content-bottom-info">
              <div class="article-content-bottom-left">
                <img :src="articleList.industryNews.content[0].imgUrl" alt="">
              </div>
              <div class="article-content-bottom-right">
                <p class="title">{{ articleList.industryNews.content[0].title }}</p>
                <p class="desc">{{ articleList.industryNews.content[0].desc }}</p>
                <p class="time">2020-6-18</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 企业荣誉 -->
    <div class="index-honor">
      <div class="i-honor-content w1200">
        <div class="h-top title-content wow animate__animated animate__fadeInDown">
          <div class="h-top title-zh">
            <div class="title-en">HONOR</div>
            企业荣誉
          </div>
        </div>
        <div class="honer-content-box">
          <div
            class="swiper swiperBox"
            v-swiper:honorSwiper="honorSwiperOption"
            ref="swiperHonorBox"
            @mouseenter="stopSwiper"
            @mouseleave="startSwiper"
          >
            <div class="swiper-wrapper">
              <div v-for="(item, index) in honorList" :key="index" class="swiper-slide">
                <img :src="item.imgUrl">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
      <countTo :startVal='0' :endVal='420' :duration='3000'></countTo>
  </div>
</template>

<script>
if (process.browser) { 
  var { WOW } = require('wowjs')
}

import countTo from 'vue-count-to';
import axios from "axios";
import VBanner from "~/components/home/banner";
// import indexVideo from '~/components/home/indexVideo';
// import prodListShow from '~/components/common/prodListShow';
// import indexNewsListShow from '~/components/common/indexNewsListShow'

export default {
  data() {
    return {
      bannerData: [
        {
          bannerId: "1",
          href: "http://zaojiao.net",
          bannerSrc:
            "http://img.visney.cn/img/banner_img/201810091635055072893adb062fc430a8a08728a954f6952.jpg",
          bannerAlt: "中德智慧",
        },
        {
          bannerId: "2",
          href: "http://zaojiao.net",
          bannerSrc:
            "http://img.visney.cn/img/banner_img/20181009155424179449e9d3aa5fa47548ab021e418af1189.jpg",
          bannerAlt: "中德智慧",
        },
      ],
      experiencePlace: ["包头", "成都", "南京", "东莞"],
      num: 0,
      clickProdIndex: 0,
      clickNewsIndex: 0,
      productCate: [
        {
          title: "全部",
          type: 0,
        },
        {
          title: "0-3岁思维启蒙",
          type: 1,
        },
        {
          title: "3-7岁能力训练",
          type: 2,
        },
        {
          title: "5-7岁入学思考",
          type: 3,
        },
        {
          title: "7-12岁技巧学习",
          type: 4,
        },
      ],
      courseCate: [
        {
          title: "全部",
          type: 0,
        },
        {
          title: "直播课",
          type: 1,
        },
        {
          title: "录播课",
          type: 2,
        },
        {
          title: "公开课",
          type: 3,
        },
      ],
      productImage: [
        {
          imgUrl: require("../assets/images/index/product_01.png"),
          title: "逻辑狗",
        },
        {
          imgUrl: require("../assets/images/index/product_01.png"),
          title: "克鲁德",
        },
        {
          imgUrl: require("../assets/images/index/product_01.png"),
          title: "科学探索",
        },
        {
          imgUrl: require("../assets/images/index/product_01.png"),
          title: "春夏秋冬",
        },
        {
          imgUrl: require("../assets/images/index/product_01.png"),
          title: "小熊猫",
        },
      ],
      honorList: [
        {
          imgUrl: require("../assets/images/index/honer.png"),
          title: "逻辑狗",
        },
        {
          imgUrl: require("../assets/images/index/honer.png"),
          title: "逻辑狗",
        },
        {
          imgUrl: require("../assets/images/index/honer.png"),
          title: "逻辑狗",
        },
        {
          imgUrl: require("../assets/images/index/honer.png"),
          title: "逻辑狗",
        },
        {
          imgUrl: require("../assets/images/index/honer.png"),
          title: "逻辑狗",
        },
      ],
      articleList: {
        articleNews: {
          typeTitle: "中德智慧咨讯",
          content: [
            {
              id: "1",
              title: "中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗",
              imgUrl:
                "http://img.visney.cn/img/article_img/2018081015333428100d020ce30c84267ab0efe53d429a0db.jpg",
            },
            {
              id: "2",
              title: "中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗",
              imgUrl:
                "http://img.visney.cn/img/article_img/20180809173951489186b0c81b62b4e658696eee3c07b2f77.jpg",
            },
            {
              id: "3",
              title: "中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗",
              imgUrl: "",
            },
            {
              id: "4",
              title: "中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗",
              imgUrl: "",
            },
            {
              id: "5",
              title: "中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗",
              imgUrl: "",
            },
            {
              id: "6",
              title: "中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗",
              imgUrl: "",
            },
          ],
        },
        storeNews: {
          typeTitle: "门店动态",
          content: [
            {
              id: "1",
              title: "中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗",
              imgUrl:
                "http://img.visney.cn/img/article_img/2018081015333428100d020ce30c84267ab0efe53d429a0db.jpg",
            },
            {
              id: "2",
              title: "中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗",
              imgUrl:
                "http://img.visney.cn/img/article_img/20180809173951489186b0c81b62b4e658696eee3c07b2f77.jpg",
            },
            {
              id: "3",
              title: "中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗",
              imgUrl:
                "http://img.visney.cn/img/article_img/20180809173951489186b0c81b62b4e658696eee3c07b2f77.jpg",
            },
            {
              id: "4",
              title: "中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗",
              imgUrl:
                "http://img.visney.cn/img/article_img/20180809173951489186b0c81b62b4e658696eee3c07b2f77.jpg",
            },
            {
              id: "5",
              title: "中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗",
              imgUrl:
                "http://img.visney.cn/img/article_img/20180809173951489186b0c81b62b4e658696eee3c07b2f77.jpg",
            },
            {
              id: "6",
              title: "中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗",
              imgUrl:
                "http://img.visney.cn/img/article_img/20180809173951489186b0c81b62b4e658696eee3c07b2f77.jpg",
            },
          ],
        },
        industryNews: {
          typeTitle: "行业动态",
          content: [
            {
              id: "1",
              title:
                "最前线的中德逻辑最前线的中德逻辑最前线的中德逻辑在这里每 一个逝世四十",
              imgUrl:
                "http://img.visney.cn/img/article_img/2018081015333428100d020ce30c84267ab0efe53d429a0db.jpg",
              desc: "中德智慧已经成为全球知名教育品牌",
            },
            {
              id: "2",
              title:
                "最前线的中德逻辑最前线的中德逻辑最前线的中德逻辑在这里每 一个逝世四十",
              imgUrl:
                "http://img.visney.cn/img/article_img/20180809173951489186b0c81b62b4e658696eee3c07b2f77.jpg",
              desc: "中德智慧已经成为全球知名教育品牌",
            },
            {
              id: "3",
              title:
                "最前线的中德逻辑最前线的中德逻辑最前线的中德逻辑在这里每 一个逝世四十",
              imgUrl:
                "http://img.visney.cn/img/article_img/20180809173951489186b0c81b62b4e658696eee3c07b2f77.jpg",
              desc: "中德智慧已经成为全球知名教育品牌",
            },
          ],
        },
      },
      swiperOption: {
        // 配置说明直接看官网
        slidesPerView: "auto",
        paginationClickable: true,
        // slidesOffsetBefore: 100,
        // slidesOffsetAfter: 100,
        autoplay: {
          delay: 3500,
          disableOnInteraction: false,
        },
        speed: 1000,
        loop: true,
        observer: true,
        observeParents: true,
        autoplayDisableOnInteraction: false,
        notNextTick: true,
        // centeredSlides: true,
        pagination: {
          el: ".expert-swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      honorSwiperOption: {
        // 配置说明直接看官网
        slidesPerView: "auto",
        paginationClickable: true,
        spaceBetween: 30, //轮播图左右之间的间距，配合css样式中的width实现效果
        // slidesOffsetBefore: 100,
        // slidesOffsetAfter: 100,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        speed: 1000,
        loop: true,
        observer: true,
        observeParents: true,
        autoplayDisableOnInteraction: false,
        notNextTick: true,
        centeredSlides: true,
      },
      expertSwiperOption: {
        autoplay: 2000, //自动滑动
        speed: 500, //自动滑动开始到结束的时间（单位ms）
        loop: true, //开启循环
        loopedSlides: 3, //在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
        slidesPerView: "auto", //设置slider容器能够同时显示的slides数量(carousel模式)。另外，支持'auto'值，会根据容器container的宽度调整slides数目。
        effect: "coverflow", //可以实现3D效果的轮播,
        pagination: {
          el: "swiper-pagination",
          type: "bullets",
          clickable: true,
        }, //分页器
        centeredSlides: true, //设定为true时，active slide会居中，而不是默认状态下的居左。
        coverflow: {
          rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
          stretch: 100, //每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
          depth: 150, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
          modifier: 1, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
          slideShadows: false, //开启slide阴影。默认 true。
        },
      },
    };
  },
  components: {
    VBanner,
    countTo
    // indexVideo,
    // prodListShow,
    // indexNewsListShow
  },
  head() {
    return {
      title: "逻辑狗官网-中德智慧教育",
      meta: [
        {
          name: "keywords",
          hid: "keywords",
          content: `逻辑狗官网、逻辑狗教材、 幼儿园教材、逻辑狗课程、逻辑狗思维训练课程、儿童思维教育、0-12岁儿童`,
        },
        {
          name: "description",
          hid: "description",
          content: `逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台`,
        },
      ],
    };
  },
  async asyncData({ params, store }) {
    return {};
  },
  created() {},
  mounted() {
    if (process.browser) { 
      new WOW({
          offset: 0,   
          live: true
      }).init()
    }
  },
  swiper() {
    // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
    return this.$refs.swiperBox.swiper;
  },
  honorSwiper() {
    return this.$refs.swiperHonorBox.swiper;
  },
  expertSwiper() {
    console.log(this.$refs.swiperExpertBox.swiper);
    return this.$refs.swiperExpertBox.swiper;
  },
  methods: {
    tab(index) {
      this.num = index;
    },
    getProdList(index) {
      this.clickProdIndex = index;
    },
    getNewsList(index) {
      this.clickNewsIndex = index;
    },
    clickProduct(item) {
      console.log(item);
      // this.$router.push({ path: '/product/course'});
    },
    mobileEnter(e) {
      "412px" != $(event.target).css("width") &&
        ($(".panorama-education-list .mobile-education").css("width", "200px"),
        $(event.target).css("width", "412px"),
        $(".panorama-education-list .mobile-education")
          .find(".big-mobile-education")
          .css("display", "none"),
        $(event.target).css("width", "412px"),
        $(event.target)
          .find(".big-mobile-education")
          .fadeIn("fast"));
    },
    stopSwiper() {
      // 鼠标移入停止播放
      // console.log(this.swiper);
      // this.swiper.autoplay.stop();
    },
    startSwiper() {
      // 移出继续播放
      // this.swiper.autoplay.start();
    },
    stopExpertSwiper() {
      console.log(this.expertSwiper);
      console.log(111);
    },
    startExpertSwiper() {
      // console.log(this.expertSwiper);
    },
    prev() {
      this.swiper.slidePrev();
    },
    next() {
      this.swiper.slideNext();
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~static/common/style.sass";

.container {
  width: 100%;
  background: #f0f2f5;
  height: auto;
}
.title-content {
  position: relative;
  text-align: center;
}
.title-en {
  position: absolute;
  font-size: 78px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color:rgba(35,106,250,1);
  opacity: 0.16;
}

.title-zh {
  position: relative;
  display: inline-block;
  font-size:58px;
  font-family:PingFangSC-Semibold,PingFang SC;
  font-weight:600;
  color:rgba(38,38,38,1);
  text-align: center;
}

.more-btn {
  margin: 50px auto 162px;
  width: 138px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  padding: 0 25px;
  background: $theme_color_fu;
  box-shadow: 0px 3px 9px 0px rgba(109, 140, 239, 0.82);
  border-radius: 23px;
  font-size: 22px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
}

ul.cate-nav {
  margin: 124px 0 116px;
  li.products-kind {
    display: inline-block;
    margin: 0 30px;
    cursor: pointer;
    &:first-child {
      margin-left: 0;
    }
    &.active,
    &:hover {
      a {
        color: $theme_color;
      }
    }
    .line {
      visibility: hidden;
      margin: 22px auto 0;
      width: 60px;
      border-radius: 50px;
      height: 15px;
      background: $theme_color_fu;
      box-shadow: 0px 2px 8px 0px rgba(45, 112, 245, 0.64);
      // -webkit-transition: all 0.5s ease;
      // -o-transition: all 0.5s ease;
      // transition: all 0.5s ease;
    }
    a {
      font-size: 32px;
      color: #747885;
    }
  }
  li.products-kind:hover,
  li.products-kind.active {
    .line {
      display: block;
      visibility: visible;
      transition: all 0.5s ease;
    }
  }
}

.cate-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .product-item {
    position: relative;
    box-sizing: border-box;
    width: 372px;
    margin-bottom: 42px;
    margin-right: 36px;
    &:nth-child(3n) {
      margin-right: 0px;
    }
  }
  .product-tag {
    padding: 0 6px 0 10px;
    background: $theme_color_fu;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    color: #ffffff;
    height: 24px;
    line-height: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    border-radius: 18px 0px 7px 0px;
    // img {
    //   width:52px;
    //   height:24px;
    //   object-fit: cover;
    // }
  }
}

// index-thought
.index-thought {
  padding: 198px 0 50px;
  .i-thought-content {
    position: relative;
    .t-top {
      .title-en {
        left: -116px;
        top: -45px;
      }
    }
  }
  .thought-content-box {
    text-align: center;
    margin: 133px auto 0;
    position: relative;
    max-width: 1350px;
  }
  .map-content {
    width: 100%;
    position: absolute;
    top: 80px;
    .con-box {
      .con {
        .num {
          font-size: 106px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: $theme_color_fu;
          line-height: 148px;
          text-shadow: 0px 1px 3px #BED3FE;
          .unit {
            font-size: 34px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: $theme_color_fu;
            line-height: 48px;
          }
        }
        .color-gray {
          margin-top: 77px;
          font-size: 24px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #515564;
          line-height: 33px;
        }
      }
    }
    ul {
      display: flex;
      justify-content: space-between;
      li {
        padding: 55px 0;
        .hover-box {
          visibility: hidden;
        }
        &:hover {
          .hover-box {
            visibility: visible;
            margin-top: 70px;
          }
          .con-box {
            .color-gray {
              margin-top: 28px;
            }
          }
        }
        &.one {
          padding: 55px 70px;
          &:hover {
            background: rgba(237, 245, 253, 0.7);
            transition: 0.5 ease-in;
            // padding: 55px 70px;
          }
        }
        &.two {
          padding: 55px 20px;
          &:hover {
            transition: 0.5 ease-in;
            background: rgba(240, 247, 235, 0.7);
          }
        }
        &.three {
          padding: 55px 68px;
          &:hover {
            transition: 0.5 ease-in;
            background: rgba(255, 252, 238, 0.7);
          }
        }
      }
    }
  }
}

// index-founder
.index-founder {
  position: relative;
  padding: 176px 0 118px;
  background-image: url("~assets/images/index/found_left.png"),
    url("~assets/images/index/found_left2.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 0px 158px, 260px 550px;
  background-color: #f7fbff;
  .founder-content-box {
    margin-left: 320px;
    max-width: 1200px;
    z-index: 10;
    display: flex;
    .founder_content {
      margin-left: 30px;
      padding-top: 32px;
      .founder-item {
        margin-bottom: 14px;
      }
      .name {
        display: flex;
        align-items: center;
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: $theme_color_fu;
        span {
          display: inline-block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: linear-gradient(
            180deg,
            rgba(250, 117, 62, 1) 0%,
            rgba(246, 85, 19, 1) 100%
          );
          box-shadow: 0px 2px 7px 0px rgba(249, 107, 50, 0.8);
          margin-right: 6px;
        }
      }
      .title {
        line-height: 58px;
        font-size: 42px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #262626;
      }
      .desc {
        color: #6e6f75;
        font-size: 18px;
        line-height: 32px;
        margin-bottom: 30px;
      }
      .btn {
        width: 182px;
        height: 46px;
        line-height: 46px;
        background: $theme_color_fu;
        box-shadow: 0px 4px 11px 0px rgba(115, 161, 253, 0.95);
        border-radius: 24px;
        text-align: center;
        font-size: 22px;
        a {
          color: #ffffff;
        }
      }
    }
  }
  .found-left {
    z-index: 0;
    font-size: 0;
    // position: absolute;
    left: 0;
    top: 158px;
  }
  .found-right {
    font-size: 0;
    z-index: 0;
    position: absolute;
    right: 0;
    bottom: -406px;
  }
}

/* index-thinking */
.index-thinking {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 164px;
  // text-align: center;
  .i-t-content {
    .title-zh {
      position: relative;
      display: inline-block;
    }
    .title-en {
      position: absolute;
      top: -45px;
      left: -112px;
    }
  }
  ul.thinking-cate-nav {
    margin: 124px 0 116px;
  }
  li.thinking-products-kind {
    display: inline-block;
    margin: 0 30px;
    cursor: pointer;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    .line {
      visibility: hidden;
      margin: 22px auto 0;
      width: 60px;
      border-radius: 50px;
      height: 15px;
      width: 59px;
      height: 15px;
      background: $theme_color_fu;
      box-shadow: 0px 2px 8px 0px rgba(94, 161, 241, 0.87);
    }
    a {
      font-size: 32px;
      color: #747885;
    }
  }
  li.thinking-products-kind:hover,
  li.thinking-products-kind.active {
    .line {
      display: block;
      visibility: visible;
    }
  }

  li.thinking-products-kind:first-child {
    margin-left: 0;
  }
  li.thinking-products-kind.active a,
  .thinking-products-kind:hover a {
    // font-size: 42px;
    color: $theme_color;
    // border-bottom: 6px solid $theme_color;
    // box-shadow:0px 2px 8px 0px rgba(240,53,94,0.61);
  }
  .thinking-cate-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .thinking-product-item {
      position: relative;
      box-sizing: border-box;
      width: 374px;
      margin-bottom: 42px;
      margin-right: 36px;
      &:nth-child(3n) {
        margin-right: 0px;
      }
      .thinking-product-item-img {
        width: 374px;
        font-size: 0;
        img {
          border-radius: 18px 18px 0px 0px;
          width: 100%;
        }
      }
    }
  }
  .thinking-product-info {
    box-sizing: border-box;
    background: #ffffff;
    height: 90px;
    box-shadow: 0px 5px 21px 0px rgba(232, 243, 243, 1);
    border-radius: 0px 0px 18px 18px;
    padding: 26px 22px;
    .thinking-product-title {
      width: 160px;
      height: 28px;
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      line-height: 28px;
      a {
        color: #343e30;
      }
    }
    .thinking-product-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .thinking-product-price {
      color: #ea0b4a;
      .price-num {
        font-size: 22px;
        font-weight: bold;
      }
    }
    .thinking-product-btn {
      height: 18px;
      line-height: 18px;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      border: 1px solid rgba(60, 142, 255, 1);
      height: 27px;
      line-height: 27px;
      border-radius: 14px;
      padding: 0 15px;
      a {
        color: #3e8eff;
      }
    }
    // .thinking-product-user {
    //   display: flex;
    //   img {
    //     width: 18px;
    //     height: 22px;
    //   }
    // }
  }
}

// index-product
.index-product {
  // display: flex;
  // align-items: center;
  height: 526px;
  background: url("~assets/images/index/product_bg.png") no-repeat;
  .product-content-box {
    position: relative;
    // width: 1200px;
    padding: 112px 250px 86px 250px;
    .swiperBox {
    }
  }
  .swiper-button-prev,
  .swiper-button-next {
    color: #dee9fe;
  }
  .swiper-button-prev {
    left: 84px;
  }
  .swiper-button-next {
    right: 104px;
  }
  .swiper-wrapper {
    // max-width: 1200px;
    p.name {
      font-size: 28px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      text-align: center;
    }
  }
  .swiper-slide {
    width: 274px;
    font-size: 0;
  }
}

/* index-thinking */
.index-course {
  padding-top: 164px;
  max-width: 1200px;
  margin: 0 auto;
  .title-en {
    left: -134px;
    top: -45px;
  }
  .course-content-box {
    .course-cate-nav {
      display: flex;
      justify-content: space-between;
    }
  }
  .course-cate-list {
    .course-product-item {
      width: 365px;
      .course-product-item-img {
        position: relative;
        font-size: 0;
        img {
          width: 100%;
        }
        .course-product-item-play {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 62px;
          font-size: 0;
        }
      }
    }
  }
  .course-product-info {
    box-sizing: border-box;
    background: #ffffff;
    height: 90px;
    box-shadow: 0px 5px 21px 0px rgba(232, 243, 243, 1);
    border-radius: 0px 0px 18px 18px;
    padding: 26px 22px;
    .course-product-title {
      width: 160px;
      height: 28px;
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(52, 62, 48, 1);
      line-height: 28px;
    }
    .course-product-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .course-product-price {
      color: #ea0b4a;
      .price-num {
        font-size: 22px;
        font-weight: bold;
      }
    }
    .course-product-user {
      display: flex;
      align-items: flex-end;
      img {
        width: 18px;
        height: 22px;
        margin-right: 10px;
      }
      .views {
        color: #418eff;
      }
    }
  }
}

// index-scenes
.index-scenes {
  background: #f7fbff;
  padding: 217px 0 228px;
  .i-s-content {
    .title-en {
      left: -125px;
      top: -45px;
    }
  }
  .scenes-content-box {
    margin: 102px auto 0;
    max-width: 1200px;
    .panorama-education-list {
      margin: 0 auto;
      height: 468px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      .mobile-education {
        width: 160px;
        height: 468px;
        border: 1px solid #eee;
        border-left: none;
        background-color: #fff;
        text-align: center;
        position: relative;
        cursor: pointer;
        &:nth-child(1) {
          border-left: 1px solid #eee;
        }
        .mobile-small-img {
          width: 50px;
          height: 47px;
          margin: 68px auto 26px;
          img {
            width: 50px;
            height: 47px;
          }
        }
        .mobile-education-title {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333436;
          line-height: 24px;
        }
        .mobile-education-sub {
          font-size: 12px;
          font-weight: 400;
          color: #333;
          line-height: 18px;
        }
        .mobile-education-img {
          width: 160px;
          height: 128px;
          margin: 76px auto 0;
          img {
            width: 160px;
            height: 128px;
          }
        }
      }
      .big-mobile-education {
        display: none;
        background: #fff;
        // width: 346px;
        // height: 460px;
        width: 412px;
        height: 468px;
        position: absolute;
        z-index: 3;
        opacity: 1;
        left: -1px;
        top: -1px;
        border: 1px solid #105cfb;
        .pc-education-top {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          margin-left: 36px;
          .pc-small-img {
            width: 42px;
            height: 34px;
            margin-top: 40px;
            img {
              width: 42px;
              height: 34px;
            }
          }
          .education-title-box {
            margin-top: 32px;
            margin-left: 20px;
            .education-title {
              height: 24px;
              font-size: 17px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #333436;
              line-height: 24px;
              text-align: left;
            }
            .education-sub-title {
              margin-top: 4px;
              height: 18px;
              line-height: 18px;
              font-size: 13px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #38393A;
              text-align: left;
            }
          }
        }
        .education-img {
          // width: 306px;
          width: 378px;
          height: auto;
          margin: 48px auto 0;
          img {
            width: 378px;
            height: auto;
          }
        }
        .mobile-small-img {
          width: 48px;
          height: 48px;
          margin: 68px auto 26px;
          img {
            width: 48px;
            height: 48px;
          }
        }
        .mobile-education-title {
          height: 24px;
          font-size: 17px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333436;
          line-height: 24px;
          margin-bottom: 8px;
        }
        .mobile-education-sub {
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #38393A;
          line-height: 18px;
        }
        .mobile-education-img {
          width: 240px;
          height: 192px;
          margin: 76px auto 0;
          img {
            width: 240px;
            height: 192px;
          }
        }
      }
    }
  }
}

// index-town
.index-town {
  position: relative;
  height: 1370px;
  box-sizing: border-box;
  padding-top: 180px;
  .i-town-content {
    .title-en {
      left: 50%;
      transform: translate(-50%);
      width: 800px;
      top: -45px;
    }
    .title-sub {
      margin-top: 28px;
      text-align: center;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #38393a;
      line-height: 40px;
    }
    .town-content-box {
      .town-btn-group {
        margin-top: 52px;
        display: flex;
        font-size: 29px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 40px;
        text-align: center;
        .town-btn-about {
          //428 120
          width: 180px;
          height: 60px;
          line-height: 60px;
          border-radius: 30px;
          border: 1px solid $theme_color_fu;
          color: $theme_color_fu;
          margin: 0 290px 0 308px;
        }
        .town-btn-join {
          width: 180px;
          height: 60px;
          line-height: 60px;
          background: $theme_color_fu;
          box-shadow: 0px 4px 9px 0px rgba(91, 141, 240, 0.83);
          border-radius: 30px;
        }
      }
    }
  }
  .town-content-skill {
    // position: relative;
    .town-content-img {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      // text-align: center;
      font-size: 0;
      z-index: 10;
      .skill-item {
        position: absolute;
        text-align: center;
        p {
          position: absolute;
          width: 100px;
          bottom: -5px;
          left: 50%;
          transform: translateX(-50%);
          font-size: 20px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #38393a;
          text-align: center;
          &.big-font {
            font-size: 24px;
          }
        }
      }
      .skill-item-01 {
        left: -160px;
        top: -158px;
      }
      .skill-item-02 {
        left: 70px;
        top: -130px;
      }
      .skill-item-03 {
        left: 450px;
        top: -248px;
      }
      .skill-item-04 {
        right: -80px;
        top: -240px;
      }
      .skill-item-05 {
        left: -232px;
        top: 96px;
      }
      .skill-item-06 {
        left: -12px;
        top: 130px;
      }
      .skill-item-07 {
        right: -50px;
        top: -18px;
      }
      .skill-item-08 {
        right: -196px;
        top: 120px;
      }
      .skill-item-09 {
        left: -184px;
        top: 304px;
      }
      .skill-item-10 {
        right: -146px;
        top: 340px;
      }
    }
  }
  .town_bottom_bg {
    position: absolute;
    bottom: 0;
    font-size: 0;
    width: 100%;
    img {
      width: 100%;
    }
  }
}

// index-honor
.index-honor {
  background-image: url("~assets/images/index/honor_bg.png");
  background-repeat: no-repeat;
  background-position: top 20px right 115px;
  background-color: #f7fbff;
  padding: 188px 0 162px;
  .title-en {
    left: -140px;
    top: -45px;
  }
  .i-honor-content {
    max-width: 1200px;
    margin: 0 auto;
    .honer-content-box {
      padding: 0 20px;
    }
  }
  .swiper-slide {
    width: 240px;
    font-size: 0;
  }
  .honer-content-box {
    margin-top: 102px;
  }
}

// index-article
.index-article {
  padding: 180px 0 176px;
  .title-en {
    top: -45px;
    left: -128px;
  }
  .article-content-box {
    margin-top: 85px;
    .article-type-title {
      width: 180px;
      height: 42px;
      line-height: 42px;
      font-size: 30px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #3a4239;
      margin-bottom: 12px;
    }
    .article-type-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      i {
        margin-right: 15px;
        color: #999999;
        font-size: 20px;
      }
    }
    .article-content-top {
      display: flex;
      .article-content-top-left {
        width: 844px;
        margin-right: 10px;
      }
      .article-content-info {
        height: 352px;
        position: relative;
        img {
          height: 100%;
          width: 100%;
          border-radius: 8px;
          object-fit: cover;
        }
        .info-title {
          width: 100%;
          padding: 8px 50px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 22px;
          position: absolute;
          overflow: hidden; //超出的文本隐藏
          text-overflow: ellipsis; //溢出用省略号显示
          white-space: nowrap; //溢出不换行,只能显示一行
          bottom: 0;
          background: rgba(92, 94, 93, 0.31);
          border-radius: 0px 0px 7px 7px;
        }
      }
      .article-content-top-right {
        width: 346px;
        font-size: 0;
        .article-content-info {
          height: 352px;
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          justify-content: space-between;
          align-content: space-between;
          .article-item-right {
            position: relative;
            width: 170px;
            height: 170px;
            // margin-right: 6px;
            &:nth-child(2n) {
              margin-right: 0;
            }
            img {
              height: 100%;
              width: 100%;
              border-radius: 8px;
              object-fit: cover;
            }
            p {
              padding: 0 30px 0 17px;
              position: absolute;
              bottom: 12px;
              line-height: 22px;
              font-size: 16px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
          }
        }
      }
    }
    .article-content-bottom {
      margin-top: 38px;
      .article-content-bottom-info {
        display: flex;
        .article-content-bottom-left {
          width: 400px;
          height: 270px;
          border-radius: 8px;
          margin-right: 55px;
          img {
            height: 100%;
            width: 100%;
            border-radius: 8px;
            object-fit: cover;
          }
        }
        .article-content-bottom-right {
          flex: 1;
          .title {
            color: #3a4239;
            font-size: 26px;
            margin-top: 12px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
          .desc {
            font-size: 24px;
            margin-top: 30px;
            color: #7d7d7e;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            line-height: 33px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
          .time {
            font-size: 24px;
            color: #9ba09a;
            margin-top: 86px;
          }
        }
      }
    }
  }
}

// index-expert
.index-expert {
  padding: 180px 0 164px;
  background: url("~assets/images/index/expert_bg.png") no-repeat;
  .title-en {
    left: -107px;
    top: -40px;
  }
  #certify {
    position: relative;
    width: 1200px;
    margin: 0 auto;
  }
  .e-content-box {
    margin-top: 46px;
  }
  .swiper-container {
    .swiper-wrapper {
      width: 100%;
      text-align: center;
      .swiper-slide {
        width: 630px !important;
        height: 396px;
        background: none;
        transition: 300ms;
        &.swiper-slide-prev {
          // transform: translateX(315px) scale(0.833333);
          // z-index: 989;
        }
        &.swiper-slide-next {
          // transform: translateX(-315px) scale(0.833333);
          // z-index: 989;
        }
        &.swiper-slide-active,
        .swiper-slide-duplicate-active {
          // transform: scale(1);
          // z-index: 999;
        }
        img {
          width: 630px;
          height: 396px;
        }
      }
    }
  }
}
</style>