zhongde-website/pages/index.vue

<template>
  <div class="container">
    <!-- banner -->
    <VBanner :bannerData="bannerData"></VBanner>
    
    <!-- 数据展示 -->
    <div class="index-show">
      <div class="i-show-content w1200">
        <ul class="list">
          <li class="con-item one">
            <div class="con-box">
              <div class="con">
                <div class="num">
                  <countTo :startVal='0' :endVal='420' :duration='4000'></countTo>
                  <span class="unit">个</span>
                </div>
                <p class="desc-01">学员覆盖城市地区</p>
                <p class="desc-02">让中国的孩子幸福成长</p>
              </div>
            </div>
          </li>
          <li class="con-item two">
            <div class="con-box">
              <div class="con">
                <div class="num">
                  <countTo :startVal='795000' :endVal='800000' :duration='4000'></countTo>
                  <span class="unit">+</span>
                </div>
                <p class="desc-01">累计服务学员</p>
                <p class="desc-02">服务中国母亲，关爱儿童成长</p>
              </div>
            </div>
          </li>
          <li class="con-item three">
            <div class="con-box">
              <div class="con">
                <div class="num">
                  <countTo :startVal='0' :endVal='98.6' :decimals='1' :duration='4000'></countTo>
                  <span class="unit">%</span>
                </div>
                <p class="desc-01">评价好评率</p>
                <p class="desc-02">全球儿童思维教育专家</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 创始人 -->
    <div class="index-founder">
      <div class="index-founder-content w1200">
        <div class="found-left">
          <p class="title founder-item">给孩子一颗强大起来的“思维芯” </p>
          <!-- <p class="sub-title"> ——创始人&CEO 张洁 </p> -->
          <p class="desc founder-item">中德智慧教育结合国际化视角和现代教育理念，以“培养成长型思维模式、具有全球胜任力的未来人才”为育人目标，率先创研全球同频、深受世界幼儿喜爱的<strong>“逻辑狗” </strong>幼儿思维游戏化教育体系，构建以<strong> 思维“芯” </strong>为宗旨的0-12岁儿童游戏化思维教育内容，通过国际思维教育<strong>「五大领域」</strong>，全面提升<strong>「十大核心能力」</strong>，是国际化科技教育内容的创始者。</p>
          <div class="btn founder-item">
            <nuxt-link to="/about/brand">了解中德智慧</nuxt-link>
          </div>
        </div>
        <div class="found-right">
          <img :src="bossImg" alt="" srcset="">
        </div>
      </div>
    </div>

    <!-- 专家名师 -->
    <div class="index-expert">
      <div class="i-expert-content">
        <title-content :title="'全球教育专家'" :titleSub="'Global Education Expert'"></title-content>
        <div class="e-content-box">
          <div class="w-innner">
            <div id="certify">
              <div
                class="swiper-container"
                v-swiper:expertSwiper="expertSwiperOption"
                ref="swiperExpertBox">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="(item, index) in expertList" :key="index">
                    <img :src="item.imgUrl" />
                  </div>
                </div>
              </div>
              <div class="swiper-pagination" slot="pagination"></div>
            </div>
          </div>
        </div>
        <div class="more-btn">
          <nuxt-link to="/about/team">更多名师</nuxt-link>
        </div>
      </div>
    </div>

    <!-- 思维教育 -->
    <div class="index-education bgF8">
      <div class="i-e-content">
        <title-content :title="'思维教育'" :titleSub="'THINKING EDUCATION'"></title-content>
        <div class="content-box education-content-box">
          <img :src="eduImg" alt="" srcset="">
        </div>
      </div>
    </div>

    <!-- 思维“芯”产品 -->
    <div class="index-thinking">
      <div class="i-t-content">
        <title-content :title="'思维“芯”产品'" :titleSub="'THINKING “CORE” PRODUCTS'"></title-content>
        <div class="content-box thinking-content-box">
          <div class="t-conent-tabs">
            <ul class="tab-list">
              <li 
                :class="[`tab-item cp  tab-item-${index + 1}`, currentTabId == item.id ? 'tab-active' : '']"
                @mouseenter="tabEnter(item)"
                @mouseleave="tabLeave(item)"
                v-for="(item, index) in productCate" :key="index">
                {{ item.label }}
              </li>
            </ul>
          </div>
          <div class="t-conent-box">
            <div
              v-for="(item, index) in productCate" 
              @click="navPage(item.path)"
              :style="{ backgroundImage: `url('${item.imgUrl}')` }"
              :key="index"
              :class="['t-conent-bg', currentTabId == item.id ? 'active' : '']">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习场景 -->
    <div class="index-channel">
      <div class="i-c-content">
        <h2 class="title">学习场景 陪伴成长</h2>
        <div class="title-sub">LEARNING SCENE TO ACCOMPANY GROWTH</div>
      </div>
      <div class="channel-content-box w1200">
        <div class="channel-tabs">
          <div :class="['tab-item', currentChannel == index ? 'active' : '']" v-for="(item, index) in channelList" :key="index" @click="handleChannel(item, index)" >{{ item.title}}</div>
        </div>
        <template v-for="(item, index) in channelList">
          <div class="channel-content" v-if="currentChannel == index" :key="index" >
            <div class="left cp" @click="navPage('/merchants')">
              <img :src="item.itemList[currentTabImg].imgUrl" alt="" srcset="">
            </div>
            <div class="right">
              <div :class="['right-img', currentTabImg == index ? 'active' : '']" @mouseenter="channelEnter(ele,index)" @mouseleave="channelLeave(ele,index)" v-for="(ele, index) in item.itemList" :key="index" >
                <img :src="ele.imgUrl" alt="" srcset="">
                <div class="title">{{ ele.title }}</div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <!-- <div class="product-content-box">
        <div
          class="swiper swiperBox"
          v-swiper:swiper="swiperOption"
          ref="swiperBox"
          :cleanup-styles-on-destroy="false"
          @ready="onSwiperRedied"
          @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="swiper-button-prev" slot="button-prev" @click="prev"></div>
        <div class="swiper-button-next" slot="button-next" @click="next"></div>
      </div> -->
    </div>

    <!-- 思维探索OMO -->
    <div class="index-omo">
      <div class="i-o-content">
        <title-content :title="'思维探索OMO'" :titleSub="'Thinking exploration OMO'"></title-content>
        <div class="content-box omo-content-box w1200">
          <div class="omo-tab">
            <div :class="['omo-item', currentOMOTabIndex == index ? 'active' :  '']" @mouseenter="omoEnter(index)" v-for="(item, index) in omoList" :key="index">
              <div class="title">
                <img :src="item.iconImg" alt="" srcset="">
                {{ item.title }}
              </div>
              <div class="desc">
                {{ item.desc }}
              </div>
            </div>
          </div>
          <div class="omo-content">
            <div 
              :class="['omo-con', 'omo-con' + item.id]" 
              v-for="(item, index) in omoList"
              @click="navPage('/product/course')"
              :style="{display: currentOMOTabIndex == index ? 'block' :  'none', backgroundImage: `url('${item.imgUrl}')` }" 
              :key="index">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 逻辑狗优秀学员 Excellent student of Logic Dog -->
    <div class="index-student">
      <div class="i-t-content">
        <title-content :title="'逻辑狗优秀学员'" :titleSub="'EXCELLENT STUDENT OF LOGIC DOG'"></title-content>
      </div>
      <div class="student-content-box w1200">
        <div
          class="swiper swiperBox"
          v-swiper:swiper="studentOption"
          ref="swiperBox"
          :cleanup-styles-on-destroy="false"
          @ready="onSwiperRedied"
          @mouseenter="stopSwiper"
          @mouseleave="startSwiper">
          <div class="swiper-wrapper">
            <div v-for="(item, index) in studentList" :key="index" class="swiper-slide">
              <div class="avatar"><img :src="item.avatarUrl" alt="" srcset=""></div>
              <div class="title">{{ item.title }}</div>
              <div class="info">
                <span class="name info-item">{{ item.name }}</span>
                <div class="line"></div>
                <span class="activename info-item">{{ item.activeName }}</span>
              </div>
              <div class="desc">{{ item.desc }}</div>
            </div>
          </div>
        </div>
        <!-- <div class="student-pagination" slot="pagination"></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 tabs course-cate-box">
            <ul class="cate-nav tab-box course-cate-nav">
              <li
                class="products-kind thinking-products-kind"
                v-for="(item, index) in courseCate"
                :class="{active:index == currentCourseType}"
                :key="index"
                @click="handleCourse(item)"
              >
                <nuxt-link to="/">{{ item.title }}</nuxt-link>
              </li>
            </ul>
            <div class="bottom-line">
              <div class="bottom-line-img">
                <div :style="lineCourseStyle" class="line-img-box"></div>
              </div>
            </div>
            <div class="cate-list course-cate-list">
              <div
                class="product-item course-product-item"
                v-for="(item, index) in courseList"
                :key="index"
              >
                <div class="product-item-img course-product-item-img">
                  <a :href="item.linkUrl" target="_blank" rel="noopener noreferrer">
                    <img :src="item.imgUrl" alt="" srcset="">
                  </a>
                  <div class="course-product-item-play">
                    <a :href="item.linkUrl" target="_blank" rel="noopener noreferrer">
                      <img src="~/assets/images/index/player.png" alt="" srcset="">
                    </a>
                  </div>
                </div>
                <div class="course-product-info">
                  <div class="course-product-title">
                    <a :href="item.linkUrl" target="_blank" rel="noopener noreferrer">
                      {{ item.title }}
                    </a>
                  </div>
                  <div class="course-product-content">
                    <div class="course-product-price" v-if="item.price">
                      ￥
                      <span class="price-num">{{ item.price }}</span>
                    </div>
                    <div class="course-product-price course-product-price-text" v-else>
                      免费
                    </div>
                    <div class="course-product-user">
                      <img src="~/assets/images/index/product_person.png" alt="" srcset="">
                      <div class="views">{{item.view}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="more-btn wow animate__animated animate__zoomIn" @click="courseMore">更多课程</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" @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-education-top-content">
                  <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-gzh">
                  <img src="~/assets/images/index/teach_account_01.png" alt="">
                </div>
              </div>
              <div class="education-img">
                <img src="~/assets/images/index/teach_01.png">
              </div>
            </div>
          </li>
          <li class="mobile-education mobile-education-2" @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-education-top-content">
                  <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-gzh">
                  <img src="~/assets/images/index/teach_account_02.png" alt="">
                </div>
              </div>
              <div class="education-img">
                <img src="~/assets/images/index/teach_02.png">
              </div>
            </div>
          </li>
          <li class="mobile-education mobile-education-3" @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-education-top-content">
                  <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-gzh">
                  <img src="~/assets/images/index/teach_account_03.png" alt="">
                </div>
              </div>
              <div class="education-img">
                <img src="~/assets/images/index/teach_03.png">
              </div>
            </div>
          </li>
          <li class="mobile-education mobile-education-4" @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-education-top-content">
                  <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-gzh">
                  <img src="~/assets/images/index/teach_account_04.png" alt="">
                </div>
              </div>
              <div class="education-img">
                <img src="~/assets/images/index/teach_04.png">
              </div>
            </div>
          </li>
          <li class="mobile-education mobile-education-5" @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-education-top-content">
                  <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-gzh">
                  <img src="~/assets/images/index/teach_account_05.png" alt="">
                </div>
              </div>
              <div class="education-img">
                <img src="~/assets/images/index/teach_05.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">专注3.4-12岁儿童优质思维能力养成的场景式，游戏化体验中心</p>
        </div>
        <div class="town-content-box">
          <div class="town-btn-group">
            <div class="town-btn-about">
              <nuxt-link to="/about/brand">
                了解我们
              </nuxt-link>
            </div>
            <div class="town-btn-join">
              <nuxt-link to="/cooperate">
                加入我们
              </nuxt-link>
            </div>
          </div>
          <div class="town-content-skill">
            <div class="town-content-img">
              <img src="~/assets/images/index/town_img.png" alt="" srcset="~/assets/images/index/town_img.png 1x, ~/assets/images/index/town_img@2x.png 2x">
              <div class="skill-item skill-item-01">
                <img src="~/assets/images/index/icon_town_01.png" alt="" srcset="~/assets/images/index/icon_town_01.png 1x, ~/assets/images/index/icon_town_01@2x.png 2x">
                <p>知识迁移</p>
              </div>
              <div class="skill-item skill-item-02">
                <img src="~/assets/images/index/icon_town_02.png" alt="" srcset="~/assets/images/index/icon_town_02.png 1x, ~/assets/images/index/icon_town_02@2x.png 2x">
                <p class="big-font">观察能力</p>
              </div>
              <div class="skill-item skill-item-03">
                <img src="~/assets/images/index/icon_town_03.png" alt="" srcset="~/assets/images/index/icon_town_03.png 1x, ~/assets/images/index/icon_town_03@2x.png 2x">
                <p>手眼协调</p>
              </div>
              <div class="skill-item skill-item-04">
                <img src="~/assets/images/index/icon_town_04.png" alt="" srcset="~/assets/images/index/icon_town_04.png 1x, ~/assets/images/index/icon_town_04@2x.png 2x">
                <p class="big-font">语言能力</p>
              </div>
              <div class="skill-item skill-item-05">
                <img src="~/assets/images/index/icon_town_05.png" alt="" srcset="~/assets/images/index/icon_town_05.png 1x, ~/assets/images/index/icon_town_05@2x.png 2x">
                <p class="big-font">想象能力</p>
              </div>
              <div class="skill-item skill-item-06">
                <img src="~/assets/images/index/icon_town_06.png" alt="" srcset="~/assets/images/index/icon_town_06.png 1x, ~/assets/images/index/icon_town_06@2x.png 2x">
                <p>分类能力</p>
              </div>
              <div class="skill-item skill-item-07">
                <img src="~/assets/images/index/icon_town_07.png" alt="" srcset="~/assets/images/index/icon_town_07.png 1x, ~/assets/images/index/icon_town_07@2x.png 2x">
                <p>推理能力</p>
              </div>
              <div class="skill-item skill-item-08">
                <img src="~/assets/images/index/icon_town_08.png" alt="" srcset="~/assets/images/index/icon_town_08.png 1x, ~/assets/images/index/icon_town_08@2x.png 2x">
                <p class="big-font">空间能力</p>
              </div>
              <div class="skill-item skill-item-09">
                <img src="~/assets/images/index/icon_town_09.png" alt="" srcset="~/assets/images/index/icon_town_09.png 1x, ~/assets/images/index/icon_town_09@2x.png 2x">
                <p class="big-font">专注能力</p>
              </div>
              <div class="skill-item skill-item-10">
                <img src="~/assets/images/index/icon_town_10.png" alt="" srcset="~/assets/images/index/icon_town_10.png 1x, ~/assets/images/index/icon_town_10@2x.png 2x">
                <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-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">{{ $store.state.newsNav[0].type }}</div>
                <div>
                  <nuxt-link :to="{name: 'news', query: {cateId: $store.state.newsNav[0].id}}">
                    <i class="el-icon-arrow-right"></i>
                  </nuxt-link>
                </div>
              </div>
              <div class="article-content-info" v-if="articleList1 && articleList1.length > 0">
                <nuxt-link :to="{ name: 'news-newsView-id', params: { id: articleList1[0].id }, query: { cateId: articleList1[0].typeId } }">
                  <img :src="articleList1[0].articleImg" alt="" srcset="">
                </nuxt-link>
                <nuxt-link :to="{ name: 'news-newsView-id', params: { id: articleList1[0].id }, query: { cateId: articleList1[0].typeId } }">
                  <p class="info-title">{{ articleList1[0].articleTitle }}</p>
                </nuxt-link>
              </div>
              <div class="article-content-info" v-else>
                <a href="javascript:void(0)">
                  <p>暂无数据</p>
                </a>
              </div>
            </div>
            <div class="article-content-top-right">
              <div class="article-type-header">
                <div class="article-type-title">{{ $store.state.newsNav[1].type }}</div>
                <div>
                  <nuxt-link :to="{name: 'news', query: {cateId: $store.state.newsNav[1].id}}">
                    <i class="el-icon-arrow-right"></i>
                  </nuxt-link>
                </div>
              </div>
              <div class="article-content-info" v-if="articleList2 && articleList2.length > 0">
                <template v-for="(item, index) in articleList2">
                  <div v-if="index < 4" class="article-item-right" :key="index">
                    <nuxt-link :to="{ name: 'news-newsView-id', params: { id: item.id }, query: { cateId: item.typeId } }">
                      <img :src="item.articleImg" alt="">
                    </nuxt-link>
                    <nuxt-link :to="{ name: 'news-newsView-id', params: { id: item.id }, query: { cateId: item.typeId } }">
                      <p>{{ item.articleTitle }}</p>
                    </nuxt-link>
                  </div>
                </template>
              </div>
              <div class="article-content-info" v-else>
                <a href="javascript:void(0)">
                  <p>暂无数据</p>
                </a>
              </div>
            </div>
          </div>
          <div class="article-content-bottom">
            <div class="article-type-header">
              <div class="article-type-title">{{ $store.state.newsNav[2].type }}</div>
              <div>
                <nuxt-link :to="{name: 'news', query: {cateId: $store.state.newsNav[2].id}}">
                  <i class="el-icon-arrow-right"></i>
                </nuxt-link>
              </div>
            </div>
            <div class="article-content-bottom-info" v-if="articleList3 && articleList3.length > 0">
              <div class="article-content-bottom-left">
                <nuxt-link :to="{ name: 'news-newsView-id', params: { id: articleList3[0].id }, query: { cateId: articleList3[0].typeId } }">
                  <img :src="articleList3[0].articleImg" alt="">
                </nuxt-link>
              </div>
              <div class="article-content-bottom-right">
                <nuxt-link :to="{ name: 'news-newsView-id', params: { id: articleList3[0].id }, query: { cateId: articleList3[0].typeId } }">
                  <p class="title">{{ articleList3[0].articleTitle }}</p>
                </nuxt-link>
                <nuxt-link :to="{ name: 'news-newsView-id', params: { id: articleList3[0].id }, query: { cateId: articleList3[0].typeId } }">
                  <p class="desc">{{ articleList3[0].articleIntroduction }}</p>
                </nuxt-link>
                <p class="time">{{ articleList3[0].createTime }}</p>
              </div>
            </div>
            <div class="article-content-bottom-info">
              <p class="desc">暂无数据</p>
            </div>
          </div>
        </div>
      </div>
    </div> -->

    <!-- 企业荣誉 -->
    <div class="index-honor">
      <div class="i-honor-content w1200">
        <title-content :title="'企业荣誉'" :titleSub="'ENTERPRISE HONOR'"></title-content>
        <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">
                <div class="img-wrap"><img class="honer-img" :src="item.imgUrl"></div>
                <div class="info">{{ item.title }}</div>
              </div>
            </div>
          </div>
          <div class="honer-swiper-button honer-swiper-button-prev" slot="button-prev" @click="prevHoner">
            <div class="el-icon-arrow-left"></div>
          </div>
          <div class="honer-swiper-button honer-swiper-button-next" slot="button-next" @click="nextHoner">
            <div class="el-icon-arrow-right"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import countTo from 'vue-count-to';
import axios from "axios";
import VBanner from "~/components/home/banner";
import ProdList from "~/components/products/prodList";
import TitleContent from '@/components/common/titleContent';

// 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: "https://app-resources-luojigou.luojigou.vip/img1.acbb14a.jpg?imageView2/0/q/40|imageslim",
        //   bannerSrc: "https://app-resources-luojigou.luojigou.vip/FmzrfkdGNl2nBACpLYpZkK8_-0dJ?imageView2/0/q/40|imageslim",
        //   // bannerSrc: require('~/assets/images/index/img1.jpg'),
        //   bannerAlt: "中德智慧",
        // },
        {
          bannerId: "2",
          href: "http://zaojiao.net",
          // bannerSrc: "https://app-resources-luojigou.luojigou.vip/FmzrfkdGNl2nBACpLYpZkK8_-0dJ?imageView2/0/q/40|imageslim",
          bannerSrc: "https://app-resources-luojigou.luojigou.vip/FkK1ryWFt3WzcmC5RWMzfDIzeenb?imageView2/0/q/40|imageslim",
          bannerAlt: "中德智慧",
        },
      ],
      num: 0,
      clickProdIndex: 0,
      clickNewsIndex: 0,
      currentTabId: 0,
      currentChannel: 0,
      currentTabImg: 0,
      currentOMOTabIndex: 0,
      currentCourseType: 0,
      bossImg: require('~/assets/images/home/boss_img.png'),
      eduImg: require('~/assets/images/home/edu_img.png'),
      productCate: [
        {
          id: 0,
          label: '逻辑狗3-7岁',
          imgUrl: require('~/assets/images/home/cate_img_01@2x.png'),
          path: '/product/detail?id=1'
        },
        {
          id: 1,
          label: '逻辑狗3-12岁',
          imgUrl: require('~/assets/images/home/cate_img_02@2x.png'),
          path: '/product/detail?id=2'
        },
        {
          id: 2,
          label: '逻辑狗7-12岁',
          imgUrl: require('~/assets/images/home/cate_img_03@2x.png'),
          path: '/product/detail?id=3'
        },
        {
          id: 3,
          label: '克鲁德',
          imgUrl: require('~/assets/images/home/cate_img_04@2x.png'),
          path: '/product/detail?id=4'
        },
        {
          id: 4,
          label: '春夏秋冬',
          imgUrl: require('~/assets/images/home/cate_img_05@2x.png'),
          path: '/product/detail?id=5'
        },
        {
          id: 5,
          label: '蚂蚁沙丘',
          imgUrl: require('~/assets/images/home/cate_img_06@2x.png'),
          path: '/product/detail?id=6'
        },
        {
          id: 6,
          label: '中华小熊猫',
          imgUrl: require('~/assets/images/home/cate_img_07@2x.png'),
          path: '/product/detail?id=7'
        },
        {
          id: 7,
          label: '思维魔法',
          imgUrl: require('~/assets/images/home/cate_img_08@2x.png'),
          path: '/product/detail?id=8'
        },
        {
          id: 8,
          label: '聪明书',
          imgUrl: require('~/assets/images/home/cate_img_09@2x.png'),
          path: '/product/detail?id=9'
        }
      ],
      productList: [
        {
          title: '逻辑狗 小学提升版一阶段7岁以上儿童思维训练早教玩具益智启蒙',
          price: '198.00',
          imgUrl: require('~/assets/images/goods/product_ts_01.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557258829143',
          tag: '提升版',
        },
        {
          title: '逻辑狗 小学提升版二阶段8岁以上儿童早教玩具益智启蒙卡',
          price: '238.00',
          imgUrl: require('~/assets/images/goods/product_ts_02.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557170896436',
          tag: '提升版',
        },
        {
          title: '逻辑狗小学提升版三阶段9岁以上幼儿童思维学习早教玩具套装益智',
          price: '198.00',
          imgUrl: require('~/assets/images/goods/product_ts_03.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557361647798',
          tag: '提升版',
        },
        {
          title: '逻辑狗 小学提升版四阶段10岁以上数学幼儿启蒙早教玩具 中德直营',
          price: '198.00',
          imgUrl: require('~/assets/images/goods/product_ts_04.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557303754261',
          tag: '提升版',
        },
        {
          title: '逻辑狗 中德智慧小学提升版 五阶段11岁儿童启蒙 学习玩具套装',
          price: '198.00',
          imgUrl: require('~/assets/images/goods/product_ts_05.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557171748143',
          tag: '提升版',
        },
        {
          title: '中德智慧逻辑狗 小学基础版五阶段11岁儿童启蒙学习玩具早教玩具',
          price: '198.00',
          imgUrl: require('~/assets/images/goods/product_jc_01.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557253273047',
          tag: '基础版',
        },
        {
          title: '中德智慧 逻辑狗 幼小小学基础版四阶段10岁以上儿童玩具启蒙',
          price: '102.60',
          imgUrl: require('~/assets/images/goods/product_jc_02.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557164956835',
          tag: '基础版',
        },
        {
          title: '中德智慧逻辑狗 智力开发小学基础版三阶段幼儿童学习早教玩具',
          price: '140.60',
          imgUrl: require('~/assets/images/goods/product_jc_03.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557356687077',
          tag: '基础版',
        },
        {
          title: '中德智慧 逻辑狗 幼小小学基础版四阶段10岁以上儿童玩具启蒙',
          price: '102.60',
          imgUrl: require('~/assets/images/goods/product_jc_04.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557165744732',
          tag: '基础版',
        },
        {
          title: '中德智慧逻辑狗 小学基础版五阶段11岁儿童启蒙学习玩具早教玩具',
          price: '102.60',
          imgUrl: require('~/assets/images/goods/product_jc_05.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557298602723',
          tag: '基础版',
        }
      ],
      netList: [
        {
          title: '逻辑狗2岁3-4岁幼儿园教材版家庭思维训练第一阶段益智玩具板全套',
          price: '150.10',
          imgUrl: require('~/assets/images/goods/product_net_01.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557288434799',
          tag: '网络版',
        },
        {
          title: '逻辑狗4-5岁二阶段幼儿教材家庭网络版思维训练早教益智玩具正版',
          price: '150.10',
          imgUrl: require('~/assets/images/goods/product_net_02.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557250281576',
          tag: '网络版',
        },
        {
          title: '逻辑狗5-6岁三阶段幼儿园教材家庭网络版思维训练早教益智玩具板',
          price: '150.10',
          imgUrl: require('~/assets/images/goods/product_net_03.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557162976102',
          tag: '网络版',
        },
        {
          title: '德国逻辑狗6-7岁四阶段幼儿园教材网络版思维训练早教益智玩具童',
          price: '150.10',
          imgUrl: require('~/assets/images/goods/product_net_04.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557163156598',
          tag: '网络版',
        },
        {
          title: '逻辑狗6岁以上五阶段 幼儿园教材家庭思维训练网络版早教益智玩具',
          price: '188.10',
          imgUrl: require('~/assets/images/goods/product_net_05.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557251913436',
          tag: '网络版',
        },
        {
          title: '逻辑狗3-7岁幼儿网络版大礼包思维益智启蒙早教玩具',
          price: '836.00',
          imgUrl: require('~/assets/images/goods/product_net_06.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557163904721',
          tag: '网络版',
        },
      ],
      tsList: [
        {
          title: '逻辑狗 小学提升版一阶段7岁以上儿童思维训练早教玩具益智启蒙',
          price: '198.00',
          imgUrl: require('~/assets/images/goods/product_ts_01.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557258829143',
          tag: '提升版',
        },
        {
          title: '逻辑狗 小学提升版二阶段8岁以上儿童早教玩具益智启蒙卡',
          price: '238.00',
          imgUrl: require('~/assets/images/goods/product_ts_02.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557170896436',
          tag: '提升版',
        },
        {
          title: '逻辑狗小学提升版三阶段9岁以上幼儿童思维学习早教玩具套装益智',
          price: '198.00',
          imgUrl: require('~/assets/images/goods/product_ts_03.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557361647798',
          tag: '提升版',
        },
        {
          title: '逻辑狗 小学提升版四阶段10岁以上数学幼儿启蒙早教玩具 中德直营',
          price: '198.00',
          imgUrl: require('~/assets/images/goods/product_ts_04.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557303754261',
          tag: '提升版',
        },
        {
          title: '逻辑狗 中德智慧小学提升版 五阶段11岁儿童启蒙 学习玩具套装',
          price: '198.00',
          imgUrl: require('~/assets/images/goods/product_ts_05.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557171748143',
          tag: '提升版',
        }
      ],
      jcList: [
        {
          title: '逻辑狗 中德智慧小学基础版一阶段7岁幼儿玩具早教 启蒙卡片玩具',
          price: '97.20',
          imgUrl: require('~/assets/images/goods/product_jc_01.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557253273047',
          tag: '基础版',
        },
        {
          title: 'logico逻辑狗7-8/9/10/11岁小学基础版二阶段益智早教学习玩具',
          price: '97.20',
          imgUrl: require('~/assets/images/goods/product_jc_02.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557164956835',
          tag: '基础版',
        },
        {
          title: '中德智慧逻辑狗 智力开发小学基础版三阶段幼儿童学习早教玩具',
          price: '140.60',
          imgUrl: require('~/assets/images/goods/product_jc_03.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557356687077',
          tag: '基础版',
        },
        {
          title: '中德智慧 逻辑狗 幼小小学基础版四阶段10岁以上儿童玩具启蒙',
          price: '102.60',
          imgUrl: require('~/assets/images/goods/product_jc_04.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557165744732',
          tag: '基础版',
        },
        {
          title: '中德智慧逻辑狗 小学基础版五阶段11岁儿童启蒙学习玩具早教玩具',
          price: '102.60',
          imgUrl: require('~/assets/images/goods/product_jc_05.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557298602723',
          tag: '基础版',
        }
      ],
      yxList: [
        {
          title: '逻辑狗数学起跑线5-7岁幼儿园教材 家庭逻辑思维训练益智早教玩具',
          price: '150.10',
          imgUrl: require('~/assets/images/goods/product_yx_01.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=557305378054',
          tag: '幼小衔接',
        },
        {
          title: '逻辑狗5-7岁思维语言/数学幼儿园早教益智玩具板训练全套幼小衔接',
          price: '159.60',
          imgUrl: require('~/assets/images/goods/product_yx_02.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=603397367168',
          tag: '幼小衔接',
        },
      ],
      kldList: [
        {
          title: '逻辑狗 克鲁德幼儿二阶段5-6岁启蒙读物儿童益智 早教故事点读',
          price: '264.10',
          imgUrl: require('~/assets/images/goods/product_kld_01.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=569135310952',
          tag: '克鲁德',
        },
        {
          title: '逻辑狗 克鲁德幼儿三阶段6岁以上启蒙读物儿童早教故事 点读语言',
          price: '292.60',
          imgUrl: require('~/assets/images/goods/product_kld_02.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=569135982554',
          tag: '克鲁德',
        },
        {
          title: '逻辑狗新品克鲁德一起听 幼儿一阶段4-5岁启蒙读物儿童早教益智',
          price: '245.00',
          imgUrl: require('~/assets/images/goods/product_kld_03.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=610967139958',
          tag: '克鲁德',
        },
        {
          title: '逻辑狗克鲁德聪明笔幼儿早教机学习点读机0-3-6益智故事机双英语',
          price: '568.10',
          imgUrl: require('~/assets/images/goods/product_kld_04.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=575248706980',
          tag: '克鲁德',
        },
        {
          title: '逻辑狗新品 克鲁德聪明点读笔 幼儿早教益智机学习机0-3-6双英语',
          price: '598.00',
          imgUrl: require('~/assets/images/goods/product_kld_04.jpg'),
          linkUrl: 'https://detail.tmall.com/item.htm?id=624651060206',
          tag: '克鲁德',
        }
      ],
      courseCate: [
        {
          title: "全部",
          type: 0,
        },
        {
          title: "直播课",
          type: 1,
        },
        {
          title: "录播课",
          type: 2,
        },
        {
          title: "公开课",
          type: 3,
        },
      ],
      courseList: [
        {
          linkUrl: 'https://course.zaojiao.net/detail/p_5d89ac0689610_X7JQOygx/6',
          imgUrl: "https://wechatapppro-1252524126.file.myqcloud.com/appeUTy6Ddw5323/image/compress/640480851kdo7as2u0jcnzs1y3mj.jpg",
          title: '逻辑狗教学体系课',
          desc: '从【思维教育理论】到【实操方法】，由浅入深，系统讲解逻辑狗的授课方法，一站解决你关于逻辑狗教学的问题。',
          price: '',
          view: '521'
        },
        {
          linkUrl: 'https://course.zaojiao.net/detail/p_5d89d11b9cbdd_MzWlooA7/6',
          imgUrl: "https://wechatapppro-1252524126.file.myqcloud.com/appeUTy6Ddw5323/image/compress/larger_cmVzb3VyY2UtY291cnNlUGFja2FnZS04MzkyNjg0Mg.png",
          title: '【办赛指南】中德智慧杯 · 思维好儿童 · 幼儿思维能力挑战大赛',
          desc: '幼儿思维领域的“奥林匹克”',
          price: '',
          view: '342'
        },
        {
          linkUrl: 'https://course.zaojiao.net/detail/p_5d89d7c797817_xUEv1j0i/6',
          imgUrl: "https://wechatapppro-1252524126.file.myqcloud.com/appeUTy6Ddw5323/image/compress/640480951kdh5cd3b0ye8salmlmap.jpg",
          title: '活动方案集锦',
          desc: '为园所提供“六一节” “端午节” “中秋节" “父亲节” “母亲节”等节日方案',
          price: '',
          view: '178'
        },
        {
          linkUrl: 'https://course.zaojiao.net/detail/l_5d8ade6172474_YSQrR4On/4',
          imgUrl: "https://wechatapppro-1252524126.file.myqcloud.com/appeUTy6Ddw5323/image/compress/larger_cmVzb3VyY2UtY291cnNlQWxpdmUtNzAzODcwMjg.png",
          title: '如何有效引导孩子，用「逻辑狗」培养思维能力？',
          desc: '专业「逻辑狗」培训师，为妈妈一次性解决所有关于「逻辑狗」的困惑。',
          price: '99.00',
          view: '941'
        },
      ],
      productImage: [
        {
          imgUrl: require("../assets/images/home/product_01@2x.png"),
          title: "逻辑狗思维体验PLUS",
        },
        {
          imgUrl: require("../assets/images/home/product_02@2x.png"),
          title: "逻辑狗思维体验",
        },
        {
          imgUrl: require("../assets/images/home/product_03@2x.png"),
          title: "逻辑狗思维体验HOME",
        },
        {
          imgUrl: require("../assets/images/home/product_04@2x.png"),
          title: "探索小镇",
        }
      ],
      channelList: [
        {
          id: 1,
          title: '逻辑狗思维体验馆',
          itemList: [
            {
              imgUrl: require("../assets/images/home/channel_img_01.png"),
              title: '逻辑狗思维体验Plus'
            },
            {
              imgUrl: require("../assets/images/home/channel_img_02.png"),
              title: '逻辑狗思维体验Home'
            }
          ]
        },
        {
          id: 2,
          title: '探索小镇',
          itemList: [
            {
              imgUrl: require("../assets/images/home/channel_img_03.png"),
              title: '探索小镇'
            },
            {
              imgUrl: require("../assets/images/home/channel_img_04.png"),
              title: '探索小镇'
            }
          ]
        },
        {
          id: 3,
          title: '门店专柜',
          itemList: [
            {
              imgUrl: require("../assets/images/home/channel_img_05.png"),
              title: '宁波三味书店'
            },
            {
              imgUrl: require("../assets/images/home/channel_img_06.png"),
              title: '长沙书店'
            }
          ]
        },
      ],
      honorList: [
        {
          imgUrl: require("../assets/images/honor/honer01.png"),
          title: "2018中国（行业）最具发展企业",
        },
        {
          imgUrl: require("../assets/images/honor/honer02.png"),
          title: "2019中国创业教育产品匠心独运将",
        },
        {
          imgUrl: require("../assets/images/honor/honer03.png"),
          title: "理事单位（2019-2020年）",
        },
        {
          imgUrl: require("../assets/images/honor/honer04.png"),
          title: "教育类玩具金奖",
        },
        {
          imgUrl: require("../assets/images/honor/honer05.png"),
          title: "教育+互联网行业合作伙伴",
        },
        {
          imgUrl: require("../assets/images/honor/honer06.png"),
          title: "新浪亲子中心推荐",
        },
        {
          imgUrl: require("../assets/images/honor/honer07.png"),
          title: "2019年度影响力教育品牌",
        },
        {
          imgUrl: require("../assets/images/honor/honer08.png"),
          title: "中国品牌领袖联盟",
        },
        {
          imgUrl: require("../assets/images/honor/honer09.png"),
          title: "2006教师选择奖",
        },
        {
          imgUrl: require("../assets/images/honor/honer10.png"),
          title: "2018回响中国影响力国际教育品牌",
        },
        {
          imgUrl: require("../assets/images/honor/honer11.png"),
          title: "2012十佳品牌",
        },
        {
          imgUrl: require("../assets/images/honor/honer12.png"),
          title: "中德芬肯独家合作权",
        },
        {
          imgUrl: require("../assets/images/honor/honer13.png"),
          title: "中国教育装备行业协会会员",
        },
        {
          imgUrl: require("../assets/images/honor/honer14.png"),
          title: "2019逐梦年代特约嘉宾张洁",
        },
        {
          imgUrl: require("../assets/images/honor/honer15.png"),
          title: "央广教育盛典中国教育行业领军人物",
        },
        {
          imgUrl: require("../assets/images/honor/honer16.png"),
          title: "2019年度教育行业影响力人物",
        },
        {
          imgUrl: require("../assets/images/honor/honer17.png"),
          title: "2019天猫母婴玩具行业最佳突破奖",
        },
        {
          imgUrl: require("../assets/images/honor/honer18.png"),
          title: "2019追梦人徽章",
        },
        {
          imgUrl: require("../assets/images/honor/honer19.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: "中德智慧已经成为全球知名教育品牌",
            },
          ],
        },
      },
      expertList: [
        {
          imgUrl: require('~/assets/images/index/expert_card_01.png'),
          title: '中德智慧',
        },
        {
          imgUrl: require('~/assets/images/index/expert_card_02.png'),
          title: '中德智慧',
        },
        {
          imgUrl: require('~/assets/images/index/expert_card_03.png'),
          title: '中德智慧',
        },
        {
          imgUrl: require('~/assets/images/index/expert_card_04.png'),
          title: '中德智慧',
        }
      ],
      omoList: [
        {
          id: 1,
          iconImg: require('~/assets/images/home/omo_img_01.png'),
          imgUrl: require('~/assets/images/home/omo_content_01.png'),
          title: '海量教育资源',
          desc: '逻辑狗·家园共育APP'
        },
        {
          id: 2,
          iconImg: require('~/assets/images/home/omo_img_02.png'),
          imgUrl: require('~/assets/images/home/omo_content_02.png'),
          title: '高质量的优质陪伴',
          desc: '逻辑狗一起成长APP'
        },
        {
          id: 3,
          iconImg: require('~/assets/images/home/omo_img_03.png'),
          imgUrl: require('~/assets/images/home/omo_content_03.png'),
          title: '全球教育精英陪伴成长',
          desc: '微信H5 中德智慧网校'
        },
        {
          id: 4,
          iconImg: require('~/assets/images/home/omo_img_04.png'),
          imgUrl: require('~/assets/images/home/omo_content_04.png'),
          title: '思维教育优质好物',
          desc: '小程序 逻辑狗商城'
        }
      ],
      sceneList: [
        {
          title: '逻辑狗思维体验馆'
        },
        {
          title: '探索小镇'
        },
        {
          title: '门店专柜'
        }
      ],
      studentList: [
        {
          avatarUrl: require("../assets/images/home/student_01.png"),
          title: '助力幼小衔接 学习更轻松',
          name: '陈小贝',
          activeName: '山东菏泽',
          desc: '陈小贝小朋友从小就喜欢玩儿逻辑狗，如今已经7岁上小学一年级了，上了小学之后每次数学成绩都非常优异。'
        },
        {
          avatarUrl: require("../assets/images/home/student_02.png"),
          title: '大鹏北京参赛记',
          name: '大鹏',
          activeName: '参与逻辑狗大赛',
          desc: '现在大鹏已经上一年级了，仍然念念不忘快乐充实的北京之行，忘不了逻辑狗比赛，忘不了天安门、鸟巢，忘不了他幼小心中的北大和清华。'
        },
        {
          avatarUrl: require("../assets/images/home/student_03.png"),
          title: '13届全国幼儿思维挑战赛中班冠军',
          name: '陈怡睿',
          activeName: '徐州开发区',
          desc: '使用逻辑狗的园所都可以参加全国思维能力挑战大赛，该大赛受到当地媒体的广泛关注，同时银座幼儿园作为礼哦机构使用10年的老园所也在当地声名远播。'
        },
        {
          avatarUrl: require("../assets/images/home/student_04.png"),
          title: '德语班的小帅哥',
          name: '小帅哥',
          activeName: '玉溪实验中学德语班',
          desc: '他从四岁就开始跟着我学习思维课程，整整六年多的坚持，学完全套思维课程，让他的思维变得超强，不断在人群中脱颖而出。'
        },
        // {
        //   avatarUrl: require("../assets/images/home/student_05.png"),
        //   title: '我和逻辑狗',
        //   name: '张济瀚',
        //   activeName: '公安部幼儿园',
        //   desc: '逻辑狗是济瀚的数学启蒙，通过学习，济瀚掌握了学习方法，树立了学习自信心，收货了学习的乐趣，尤其是通过比赛，开拓了眼界，增长了见识。'
        // }
      ],
      swiperOption: {
        // 配置说明直接看官网
        slidesPerView: "auto",
        spaceBetween: 22,
        paginationClickable: true,
        centeredSlides: true,
        autoplay: {
          delay: 3500,
          disableOnInteraction: false,
        },
        speed: 1000,
        loop: true,
        observer: true,
        observeParents: true,
        autoplayDisableOnInteraction: false,
        notNextTick: true,
        // centeredSlides: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      studentOption: {
        slidesPerView: "4",
        spaceBetween: 22,
        // loop: true,
        pagination: {
          el: ".student-pagination",
          clickable: true,
        },
      },
      honorSwiperOption: {
        // 配置说明直接看官网
        slidesPerView: "auto",
        spaceBetween: 22, //轮播图左右之间的间距，配合css样式中的width实现效果
        autoplay: {
          delay: 1500,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // autoplay: false,
        // speed: 1000,
        loop: true,
        observer: true,
        observeParents: true,
        autoplayDisableOnInteraction: false,
        notNextTick: true,
        // centeredSlides: true,
        navigation: {
          nextEl: ".honer-swiper-button-next",
          prevEl: ".honer-swiper-button-prev",
        },
      },
      expertSwiperOption: {
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,
        },
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true, //开启循环
        initialSlide: 0,
        loopedSlides: 2,
        preventLinksPropagation: true,
        slideToClickedSlide: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        on: {
          progress() {
            for (let i = 0; i < this.slides.length; i++) {
              const slide = this.slides.eq(i) // 指定匹配元素集缩减值
              const slideProgress = this.slides[i].progress // 当前元素集的progress值
              let modify = 1 // 偏移权重

              Math.abs(slideProgress) > 1 && (modify = Math.abs(slideProgress) - 1 + 1);

              // if (parseInt(Math.abs(slideProgress)) > 0) {
              //   modify = Math.abs(slideProgress) * 0.2 // 不一定要0.2，可自行调整
              // }
              const translate = slideProgress * modify * 300 + 'px' // 500是swiper-slide的宽度
              const scale = 1 - Math.abs(slideProgress) / 6 // 缩放权重值，随着progress由中向两边依次递减，可自行调整
              const zIndex = 999 - Math.abs(Math.round(10 * slideProgress))

              slide.transform(`translateX(${translate}) scale(${scale})`)
              slide.css('zIndex', zIndex)
              slide.css('opacity', 1) // 是否可见
              Math.abs(slideProgress) > 3 && slide.css("opacity", 0);
              // if (parseInt(Math.abs(slideProgress)) > 1) { // 设置了只有选中的元素以及他两遍的显示，其他隐藏
              //   slide.css('opacity', 0)
              // }
            }
          },
          setTransition: function (e) {
            for (var t = 0; t < this.slides.length; t++)
              this.slides.eq(t).transition(e);
          },
        }
      },
    };
  },
  computed: {
    // 思维芯产品
    lineStyle () {
      let site = 190 * this.currentTabId + 42* ( (this.currentTabId === 0 ? 1 : this.currentTabId)  - 1 )
      if( site === 0 ) {
        site = -0
      }
      return `transform: translateX(${site + 'px'})`
    },
    // 网校课程
    lineCourseStyle() {
      let site;
      if( this.currentCourseType === 0 ) {
        site = -0
      } else if (this.currentCourseType === 3) { // -72 + 46  26 13
        site = 400 * this.currentCourseType - 60;
      } else {
        site = 400 * this.currentCourseType - this.currentCourseType * 23;
      }
      return `transform: translateX(${site + 'px'})`
    }
  },
  components: {
    VBanner,
    countTo,
    // ProdList,
    TitleContent
    // 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 }) {
    // console.log(store.state.newsNav);
    const newsNav = store.state.newsNav;
    
    const { data: { data: res1 } } = await axios(`${store.state.wordpressAPI}/official-api/article`, {
      params: {
        typeId: newsNav[0].id,
        page: 1
      }
    });
    const { data: { data: res2 } } = await axios(`${store.state.wordpressAPI}/official-api/article`, {
      params: {
        typeId: newsNav[1].id,
        page: 1
      }
    });
    const { data: { data: res3 } } = await axios(`${store.state.wordpressAPI}/official-api/article`, {
      params: {
        typeId: newsNav[2].id,
        page: 1
      }
    });
    const articleList1 = res1.entityList;
    const articleList2 = res2.entityList;
    const articleList3 = res3.entityList;
    // console.log(articleList1);
    // console.log(articleList2);
    // console.log(articleList3);
    return {
      articleList1,
      articleList2,
      articleList3,
    };
  },
  created() {},
  mounted() {},
  swiper() {
    // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
    return this.$refs.swiperBox.swiper;
  },
  honorSwiper() {
    return this.$refs.swiperHonorBox.swiper;
  },
  expertSwiper() {
    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"));
    },
    onSwiperRedied(swiper) { 
      // console.log('Swiper redied!', swiper)
    },
    stopSwiper() {
      // 鼠标移入停止播放
      // console.log(this.swiper);
      // this.swiper.autoplay.stop();
    },
    startSwiper() {
      // 移出继续播放
      // this.swiper.autoplay.start();
    },
    channelEnter(item, index) {
      this.currentTabImg = index;
    },
    channelLeave() {
      // this.currentChannel = index; 
    },
    tabEnter(item) {
      this.currentTabId = item.id;
    },
    tabLeave(item) {
      console.log(item);
    },
    handleChannel(item, index) {
      this.currentChannel = index;
    },
    omoEnter(index) {
      this.currentOMOTabIndex = index;
    },
    prev() {
      this.swiper.slidePrev();
    },
    next() {
      this.swiper.slideNext();
    },
    prevHoner() {
      this.honorSwiper.slidePrev();
    },
    nextHoner() {
      this.honorSwiper.slideNext();
    },
    handleTag(tab) {
      this.currentTabId = tab.id
    },
    handleCourse(item) {
      this.currentCourseType = item.type;
    },
    handleMore() {
      let uri;
      if(this.currentTabId == 1) {
        uri = "https://zhongdezhihui.tmall.com/category-1336730794.htm"; // 幼儿网络版
      } else if(this.currentTabId == 2) {
        uri = "https://zhongdezhihui.tmall.com/category-1336730795.htm"; // 小学基础版
      } else if(this.currentTabId == 3) {
        uri = "https://zhongdezhihui.tmall.com/category-1336730796.htm"; // 小学提升版
      } else if(this.currentTabId == 4) {
        uri = "https://zhongdezhihui.tmall.com/category-1412283873.htm"; // 克鲁德
      } else {
        uri = "https://zhongdezhihui.tmall.com/search.htm"; // 全部
      }
      let id="new_a";
      this.createSuperLabel(uri,id);
    },
    courseMore() {
      let uri = 'https://course.zaojiao.net/all/594191';
      let id="new_a";
      this.createSuperLabel(uri,id);
    },
    createSuperLabel(url, id) {
      let a = document.createElement("a");         
      a.setAttribute("href", url);      
      a.setAttribute("target", "_blank");      
      a.setAttribute("id", id);       
      // 防止反复添加      
      if(!document.getElementById(id)) {                               
        document.body.appendChild(a);  
      }      
      a.click();
    },
    navPage(path) {
      this.$router.push({ path: path});
    }
  },
};
</script>
<style lang="scss">
@import "~static/common/style.sass";


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

.title-zh {
  position: relative;
  display: inline-block;
  font-size: 46px;
  font-family: PingFangSC-Semibold, sans-serif;
  font-weight: 600;
  color:#333333;
  text-align: center;
}

.more-btn {
  margin: 90px auto 0px;
  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: 20px;
  font-family: PingFangSC-Medium, sans-serif;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  a {
    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 {
      a {
        color: $theme_color;
        font-size: 28px;
        font-family: PingFangSC-Semibold, sans-serif;
        font-weight: 600;
        line-height: 40px;
        transition: 0.5;
      }
    }
    .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: 24px;
      line-height: 33px;
      color: #747885;
    }
  }
  li.products-kind:hover,
  li.products-kind.active {
    .line {
      // display: block;
      // visibility: visible;
      // transition: all 0.5s ease;
    }
  }
}

.tabs {
  .tab-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    .tabs-item {
      a {
        font-size: 24px;
        font-family: PingFangSC-Regular, sans-serif;
        font-weight: 400;
        color: #747885;
        line-height: 33px;
      }
    }
  }
  .bottom-line {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    .bottom-line-img {
      width: 100%;
      .line-img-box {
        width: 46px;
        height: 4px;
        background-color: $theme_color_fu;
        box-shadow: 0px 2px 8px 0px rgba(111, 159, 254, 0.8);
        border-radius: 100px;
        transition: transform 1s;
      }
      // img {
      //   width: 75px;
      //   height: 30px;
      //   transition: transform 1s;
      // }
    }
  }
}

.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;
    }
  }

}

.index-show {
  .i-show-content {
    .con-box {
      .con {
        text-align: center;
        .num {
          font-size: 40px;
          font-family: Archivo-Bold, Archivo;
          font-weight: bold;
          color: #333333;
          line-height: 45px;
          .unit {
            height: 28px;
            font-size: 20px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 28px;
          }
        }
        .desc-01 {
          margin-top: 15px;
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 25px;
        }
        .desc-02 {
          visibility: hidden;
          margin-top: 7px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #83879B;
          line-height: 17px;
        }
      }
    }
    ul {
      display: flex;
      justify-content: space-between;
      padding: 115px 0 138px;
      li {
        padding: 44px 0 64px;
        width: 318px;
        &:hover {
          height: 216px;
          background: #FFFFFF;
          box-shadow: 0px 2px 17px 0px rgba(230, 231, 242, 0.74);
          border-radius: 30px;
          .con-box {
            .con {
              .num {
                color: #0D5CFA;
                .unit {
                  color: #0D5CFA;
                }
              }
              .desc-02 {
                visibility: visible;
                transition: 5s ease-in-out;
              }
            }
          }
        }
      }
    }
  }
}

// index-thought
.index-thought {
  padding: 150px 0 0;
  .i-thought-content {
    position: relative;
    .t-top {
      .title-en {
        left: -147px;
        top: -20px;
      }
    }
  }
  .thought-content-box {
    text-align: center;
    margin: 52px auto 0;
    position: relative;
    max-width: 1200px;
  }
  .map-content {
    width: 100%;
    position: absolute;
    top: 118px;
    .con-box {
      .con {
        text-align: center;
        .num {
          color: $theme_color_fu;
          text-shadow: 0px 1px 3px #BED3FE;
          font-size: 72px;
          font-family: PingFangSC-Medium, sans-serif;
          font-weight: 500;
          color: #0D5CFA;
          line-height: 100px;
          .unit {
            font-size: 30px;
            font-family: PingFangSC-Regular, sans-serif;
            font-weight: 400;
            line-height: 42px;
            color: $theme_color_fu;
          }
        }
        .color-gray {
          margin-top: 35px;
          font-size: 20px;
          font-family: PingFangSC-Medium, sans-serif;
          font-weight: 500;
          color: #515564;
          line-height: 28px;
          text-align: center;

        }
      }
    }
    ul {
      display: flex;
      justify-content: space-between;
      li {
        padding: 55px 0;
        .hover-box {
          visibility: hidden;
          img {
            width: 146px;
            height: 146px;
          }
        }
        &: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 {
  background: url('~assets/images/home/funder_bg.png');
  background-size: cover;
  height: 626px;
  position: relative;
  .index-founder-content {
    display: flex;
    align-items: flex-end;
    height: 100%;
    .found-left {
      width: 663px;
      max-width: 663px;
      margin-right: 35px;
      .title {
        font-size: 34px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 48px;
        margin-bottom: 40px;
      }
      .sub-title {
        text-align: right;
        margin-top: 15px;
        height: 56px;
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 28px;
      }
      .desc {
        height: 154px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #646A7E;
        line-height: 30px;
      }
      .btn {
        margin: 40px 0 100px;
        width: 203px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background: #0D5CFA;
        border-radius: 30px;
        a {
          font-size: 20px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
        }
      }
      strong {
        color: $theme_color_fu;
      }
    }
    .found-right {
      font-size: 0;
      img {
        width: 415px;
        height: 588px;
      }
    }
  }
}

/* index-education */
.index-education {
  // max-width: 1200px;
  margin: 0 auto;
  padding: 100px 0 70px;
  .education-content-box {
    text-align: center;
    margin-top: 85px;
    img {
      width: 1063px;
      height: 463px;
    }
  }
} 

/* index-thinking */
.index-thinking {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 100px;
  .i-t-content {
    .content-box {
      position: relative;
      display: flex;
      width: 997px;
      margin: 85px auto 80px;
    }
    .t-conent-tabs {
      position: absolute;
      left: 0;
      bottom: 25px;
      width: 104px;
      .tab-list {
        display: flex;
        flex-direction: column;
        .tab-item {
          display: inline-block;
          width: 104px;
          height: 38px;
          line-height: 38px;
          border-radius: 0px 100px 100px 0px;
          border-top: 1px solid #FFFFFF;
          border-right: 1px solid #FFFFFF;
          border-bottom: 1px solid #FFFFFF;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          margin-bottom: 8px;
          padding-left: 8px;
          &.tab-active {
            background: #0D5CFA;
            border-top: 1px solid #0D5CFA;
            border-right: 1px solid #0D5CFA;
            border-bottom: 1px solid #0D5CFA;
            border: none;
          }
        }
      }
    }
    .t-conent-box {

    }
    .t-conent-bg {
      margin: 0 auto;
      width: 997px;
      height: 561px;
      background-repeat: no-repeat;
      background-size: cover;
      display: none;
      &.active {
        display: block;
        // animation: inOut 0.5s linear; /*动画名称*/  
        // -webkit-animation: inOut 0.5s linear;/*针对webkit内核*/ 
        // opacity: 1;
        // transition: opacity 1s linear;
      }
    }
  }
}

/* index-channel */
.index-channel {
  padding: 100px 0 150px;
  background: #557FFF;
  .i-c-content {
    .title {
      height: 48px;
      font-size: 34px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 48px;
      text-align: center;
    }
    .title-sub {
      text-align: center;
      margin: 10px auto 0;
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 24px;
    }
  }
  .channel-content-box {
    .channel-tabs {
      display: flex;
      justify-content: center;
      margin-top: 36px;
      .tab-item {
        margin-right: 24px;
        width: 152px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        cursor: pointer;
        &.active {
          background: #FFFFFF;
          color: #557FFF;
        }
      }
    }
    .channel-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 65px;
      .left {
        font-size: 0;
        img {
          width: 894px;
          object-fit: cover;
          border-radius: 20px;
        }
      }
      .right {
        .right-img {
          position: relative;
          font-size: 0;
          margin-top: 12px;
          border-radius: 20px;
          &.active {
            img {
              border: 3px solid #FFFFFF;
            }
            .title {
              width: 277px;
              left: 3px;
              bottom: 3px;
            }
          }
        }
        img {
          width: 283px;
          height: 154px;
          border-radius: 20px;
          object-fit: cover;
        }
        .title {
          position: absolute;
          width: 100%;
          left: 0px;
          bottom: 0px;
          height: 71px;
          background: linear-gradient(180deg, rgba(32, 32, 32, 0) 0%, rgba(46, 46, 46, 0.5) 100%);
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          border-radius: 0 0 20px 20px;
          padding: 35px 0 14px 14px;
        }
      }
    }
  }
}
/* index-student */
.index-student {
  padding: 100px 0 52px;
  background: url('~assets/images/home/student_bg.png');
  background-size: cover;
  .student-content-box {
    position: relative;
    margin-top: 70px;
    .swiperBox {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      width: 283px;
      height: 389px;
      padding: 30px 34px;
      background: #FFFFFF;
      box-shadow: 0px 2px 17px 0px rgba(230, 231, 242, 0.74);
      border-radius: 10px;
      text-align: center;
      .avatar {
        font-size: 0;
        img {
          width: 164px;
          height: 164px;
          object-fit: cover;
        }
      }
      .title {
        margin-top: 18px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 20px;
      }
      .info {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 18px;
        font-size: 10px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        span {
          color: #333333;
          font-size: 10px;
          line-height: 14px;
          padding: 0 4px;
        }
        .line {
          width: 1px;
          height: 8px;
          background: #333333;
        }
      }
      .desc {
        margin-top: 13px;
        text-align: left;
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #646A7E;
        line-height: 14px;
      }
    }  
  }
  .student-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 116px;
    margin: 40px auto 0;
    height: 8px;
    background: #FFFFFF;
    border-radius: 6px;
    .swiper-pagination-bullet {
      width: 43px;
      height: 8px;
      background: #ffffff;
      border-radius: 50%;
      &:focus {
        outline: none;
      }
      &.swiper-pagination-bullet-active {
        width: 82px;
        height: 8px;
        background: #0D5CFA;
        border-radius: 6px;
      }
    }
  }
}

// index-product
.index-product {
  // display: flex;
  // align-items: center;
  height: 526px;
  .product-content-box {
    position: relative;
    // width: 1200px;
    // padding: 112px 250px 86px 250px;
    .swiperBox {
      margin-top: 85px;
    }
  }
  .swiper-button-prev,
  .swiper-button-next {
    color: #dee9fe;
    &:focus {
      outline: none;
    }
  }
  .swiper-button-prev {
    left: 84px;
  }
  .swiper-button-next {
    right: 104px;
  }
  .swiper-wrapper {
    // max-width: 1200px;
    p.name {
      font-size: 28px;
      font-family: PingFangSC-Semibold, sans-serif;
      font-weight: 600;
      color: #ffffff;
      text-align: center;
    }
  }
  .swiper-slide {
    width: 589px;
    font-size: 0;
    img {
      width: 100%;
    }
  }
}

/* index-course */
.index-course {
  padding-top: 164px;
  max-width: 1200px;
  margin: 0 auto;
  .title-en {
    left: -158px;
    top: -19px;
  }
  .bottom-line {
    margin-top: 16px;
    .bottom-line-img {
      width: 100%;
      font-size: 0;
      img {
        width: 75px;
        height: 30px;
        transition: transform 1s;
      }
    }
  }
  .course-content-box {
    margin-top: 125px;
    .course-cate-nav {
      display: flex;
      justify-content: space-between;
    }
  }
  .course-cate-list {
    margin-top: 82px;
    .course-product-item {
      width: 365px;
      margin-right: 52px;
      transition: transform .3s ease-in-out;
      &:nth-child(3n) {
        margin-right: 0px;
      }
      &:hover {
        transform: translate3d(0,-8px,0);
      }
      .course-product-item-img {
        position: relative;
        font-size: 0;
        width: 365px;
        height: 350px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 18px 18px 0px 0px;
        }
        .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;
    box-shadow: 0px 5px 21px 0px rgba(232, 243, 243, 1);
    border-radius: 0px 0px 18px 18px;
    padding: 26px 22px;
    .course-product-title {
      height: 28px;
      font-size: 20px;
      font-weight: 400;
      color: rgba(52, 62, 48, 1);
      line-height: 28px;
      overflow: hidden;//超出一行文字自动隐藏 
      text-overflow: ellipsis;//文字隐藏后添加省略号
      white-space: nowrap;//强制不换行
    }
    .course-product-content {
      margin-top: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .course-product-price {
      color: #ea0b4a;
      font-size: 20px;
      // margin-top: 13px;
      .price-num {
        font-size: 30px;
        font-weight: 600;
        line-height: 26px;;
      }
    }
    .course-product-price-text {
      font-size: 30px;
      font-weight: 600;
      line-height: 30px;
    }
    .course-product-user {
      display: flex;
      align-items: flex-end;
      img {
        width: 16px;
        height: 19px;
        margin-right: 10px;
      }
      .views {
        font-size: 15px;
        font-family: PingFangSC-Regular, sans-serif;
        font-weight: 400;
        color: #418EFF;
        line-height: 21px;
      }
    }
  }
}

.index-omo {
  padding: 100px 0 150px;
  .omo-content-box {
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    margin-top: 85px;
  }
  .omo-tab {
    padding: 15px 0;
    .omo-item {
      position: relative;
      width: 430px;
      padding: 48px 34px;
      &.active {
        // background: #FFFFFF;
        box-shadow: 0px 2px 17px 0px rgba(230, 231, 242, 0.74);
        border-radius: 20px;
        &::after {
          position: absolute;
          display: block;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 18px;
          border-color: #FFFFFF #FFFFFF transparent transparent;
          top:calc(50% - 18px);
          transform: rotate(45deg);
          pointer-events: none;
          content: "";
          left:calc(100% - 20px );
          box-shadow: 2px -2px 5px rgba(243, 243, 245, 0.74);
        }
        .title {
          color: #0D5CFA;
        }
        .desc {
          color: #38393A;
        }
      }
      .title {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: 25px;
        img {
          width: 30px;
          height: 30px;
          vertical-align: middle;
          margin-right: 16px;
        }
      }
      .desc {
        margin-top: 9px;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #646A7E;
        line-height: 20px;
      }
    }
  }
  .omo-con {
    width: 724px;
    height: 649px;
    background-size: cover;
    animation: inOut 1s linear; /*动画名称*/  
    -webkit-animation: inOut 1s linear;/*针对webkit内核*/ 
    background-size: cover;
  }
  // .omo-con1 {
  //   background: url('~assets/images/home/omo_content_01.png') no-repeat center center;
  //   background-size: cover;
  // }
  // .omo-con2 {
  //   background: url('~assets/images/home/omo_content_02.png');
  //   background-size: cover;
  // }
  // .omo-con3 {
  //   background: url('~assets/images/home/omo_content_03.png');
  //   background-size: cover;
  // }
  // .omo-con4 {
  //   background: url('~assets/images/home/omo_content_04.png');
  //   background-size: cover;
  // }
}

// index-scenes
.index-scenes {
  background: #f7fbff;
  padding: 217px 0 228px;
  .i-s-content {
    .title-en {
      left: -140px;
      top: -30px;
    }
  }
  .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: 72px auto 32px;
          img {
            width: 50px;
            height: 47px;
          }
        }
        .mobile-education-title {
          font-size: 14px;
          font-family: PingFangSC-Medium, sans-serif;
          font-weight: 500;
          color: #333436;
          line-height: 20px;
        }
        .mobile-education-sub {
          font-size: 12px;
          font-family: PingFangSC-Regular, sans-serif;
          font-weight: 400;
          color: #38393A;
          line-height: 17px;
          height: 17px;
        }
        .mobile-education-img {
          width: 160px;
          height: 128px;
          margin: 76px auto 0;
          img {
            width: 160px;
            height: 128px;
          }
        }
      }
      .mobile-education-1 {
        width: 412px;
        .big-mobile-education {
          display: block;
        }
      }
      .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;
          justify-content: space-between;
          margin-left: 36px;
          .pc-education-top-content {
            display: flex;
          }
          .education-gzh {
            font-size: 0;
            margin-top: 32px;
            img {
              width: 101px;
              height: 99px;
              vertical-align: middle;
            }
          }
          .pc-small-img {
            width: 42px;
            height: 34px;
            margin-top: 56px;
            img {
              width: 42px;
              height: 34px;
            }
          }
          .education-title-box {
            margin-top: 42px;
            margin-left: 20px;
            .education-title {
              height: 24px;
              font-size: 17px;
              font-family: PingFangSC-Medium, sans-serif;
              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, sans-serif;
              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, sans-serif;
          font-weight: 500;
          color: #333436;
          line-height: 24px;
          margin-bottom: 8px;
        }
        .mobile-education-sub {
          font-size: 13px;
          font-family: PingFangSC-Regular, sans-serif;
          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%;
      text-align: left;
      // transform: translate(-50%);
      width: 800px;
      left: -150px;
      top: -30px;
    }
    .title-sub {
      margin-top: 28px;
      text-align: center;
      font-size: 24px;
      font-family: PingFangSC-Regular, sans-serif;
      font-weight: 400;
      color: #999999;
      line-height: 33px;
    }
    .town-content-box {
      .town-btn-group {
        margin-top: 52px;
        display: flex;
        font-size: 29px;
        font-family: PingFangSC-Medium, sans-serif;
        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;
          margin: 0 290px 0 308px;
          cursor: pointer;
          a {
            color: $theme_color_fu;
          }
          &:hover {
            background: $theme_color_fu;
            a {
              color: #fff;
            }
          }
        }
        .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;
          cursor: pointer;
          a {
            color: #fff;
          }
        }
      }
    }
  }
  .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, sans-serif;
          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: 100px 0 150px;
  .title-en {
    left: -140px;
    top: -30px;
  }
  .i-honor-content {
    max-width: 1200px;
    margin: 0 auto;
    .honer-content-box {
      position: relative;
      padding: 0 100px;
      margin-top: 37px;
      .img-wrap {
        height: 157px;
        width: 182px;
        background: #EBEBEE;
        font-size: 0;
        text-align: center;
        padding-top: 34px;
        border-radius: 10px 10px 0px 0px;
        .honer-img {
          width: 132px;
          height: 89px;
          object-fit: cover;
        }
      }
      .info {
        width: 182px;
        height: 54px;
        padding: 8px 38px ;
        text-align: center;
        background: #FFFFFF;
        border: 1px solid rgba(153, 153, 153, 0.1);
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 17px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
    .honer-swiper-button {
      position: absolute;
      width: 8px;
      height: 13px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      outline: 0;
      cursor: pointer;
      text-align: center;
      color: #999999;
    }
    .honer-swiper-button-prev,
    .honer-swiper-button-next {
      color: #999999;
      [class^=el-icon-] {
        font-weight: 600
      }
      &:focus {
        outline: none;
      }
    }
    .honer-swiper-button-prev {
      left: 70px;
    }
    .honer-swiper-button-next {
      right: 70px;
    }
  }
  .swiper-slide {
    width: 182px;
  }
}

// index-article
.index-article {
  padding: 180px 0 176px;
  .title-en {
    top: -22px;
    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, sans-serif;
      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;
          overflow: hidden;
          &:hover {
            img {
              transform: scale(1.2);
              transition: transform 1s;
            }
          }
          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, sans-serif;
            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;
            overflow: hidden;
            // margin-right: 6px;
            &:nth-child(2n) {
              margin-right: 0;
            }
            &:hover {
              img {
                transform: scale(1.2);
                transition: transform 1s;
              }
            }
            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-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;
          overflow: hidden;
          &:hover {
            img {
              transform: scale(1.2);
              transition: transform 1s;
            }
          }
          img {
            height: 100%;
            width: 100%;
            border-radius: 8px;
            object-fit: cover;
          }
        }
        .article-content-bottom-right {
          flex: 1;
          .title {
            color: #3a4239;
            font-size: 22px;
            margin-top: 12px;
            font-family: PingFangSC-Medium, sans-serif;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
          .desc {
            font-size: 20px;
            margin-top: 30px;
            color: #7d7d7e;
            font-family: PingFangSC-Regular, sans-serif;
            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: 18px;
            color: #9ba09a;
            margin-top: 86px;
          }
        }
      }
    }
  }
}

// index-expert
.index-expert {
  padding: 100px 0 150px;
  // background: url("~assets/images/index/expert_bg.png") no-repeat;
  .title-en {
    left: -133px;
    top: -30px;
  }
  #certify {
    position: relative;
    width: 1200px;
    margin: 0 auto;
  }
  .e-content-box {
    margin-top: 46px;
  }
  .swiper-container {
    width: 100%;
    height: 100%;
    text-align: center;
    .swiper-wrapper {
      width: 100%;
      text-align: center;
      .swiper-slide {
        width: 623px !important;
        height: 371px;
        background: none;
        img {
          width: 623px;
          height: 371px;
        }
      }
    }
  }
  .swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 47px;
    .swiper-pagination-bullet {
      width: 11px;
      height: 11px;
      background: #CBCDD1;
      border-radius: 50%;
      margin: 0 11px;
      &:focus {
        outline: none;
      }
      &.swiper-pagination-bullet-active {
        width: 47px;
        height: 12px;
        background: #0D5CFA;
        box-shadow: 0px 2px 6px 0px rgba(84, 135, 237, 0.89);
        border-radius: 20px;
      }
    }
  }
}

@keyframes inOut {
  0% {
      opacity: 0.5;
  }
  100% {
      opacity: 1;
  }
}
</style>