zhongde-website/pages/index.vue

<template>
  <div class="container">
    <!-- banner -->
    <VBanner :bannerData="bannerData"></VBanner>
    <!-- 思维“芯”产品 -->
    <div class="index-thinking">
      <div class="i-t-content">
        <div class="t-top title-content">
          <!-- <div class="title-en">PRODUCT</div> -->
          <div class="title-zh">思维“芯”产品</div>
        </div>
        <div class="content-box thinking-content-box">
          <div class="cate-box thinking-cate-box">
            <ul class="cate-nav thinking-cate-nav">
              <li
                class="thinking-products-kind"
                v-for="(item, index) in productCate"
                :class="{active:index == clickProdIndex}"
                :key="index"
                @click="getProdList(index)"
              >
                <nuxt-link to="/">{{ item.title }}</nuxt-link>
                <div class="line"></div>
              </li>
            </ul>
            <div class="cate-list thinking-cate-list">
              <div
                class="thinking-product-item"
                v-for="(item, index) in productCate"
                :key="index"
                @click="clickProduct(item)"
              >
                <div class="thinking-product-item-img">
                  <nuxt-link to="/">
                    <img src="~/assets/images/index/product.png" alt="" srcset="">
                  </nuxt-link>
                  <div class="product-tag">基础版
                    <!-- <img src="~/assets/images/index/product_tag.png" alt="" srcset=""> -->
                  </div>
                </div>
                <div class="thinking-product-info">
                  <div class="thinking-product-title">
                    <nuxt-link to="/">幼小衔接课程……</nuxt-link>
                  </div>
                  <div class="thinking-product-content">
                    <div class="thinking-product-price">￥
                      <span class="price-num">888</span>
                    </div>
                    <div class="thinking-product-btn">
                      <nuxt-link to="/">查看产品</nuxt-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="more-btn">更多产品</div>
      </div>
    </div>
    <!-- 网校课程 -->
    <div class="index-course">
      <div class="i-c-content">
        <div class="c-top title-content">
          <!-- <div class="title-en">PRODUCT</div> -->
          <div class="title-zh">网校课程</div>
        </div>
        <div class="content-box course-content-box">
          <div class="cate-box course-cate-box">
            <ul class="cate-nav course-cate-nav">
              <li
                class="products-kind thinking-products-kind"
                v-for="(item, index) in courseCate"
                :class="{active:index == clickProdIndex}"
                :key="index"
                @click="getProdList(index)"
              >
                <nuxt-link to="/">{{ item.title }}</nuxt-link>
                <div class="line"></div>
              </li>
            </ul>
            <div class="cate-list course-cate-list">
              <div
                class="product-item course-product-item"
                v-for="(item, index) in courseCate"
                :key="index"
              >
                <div class="product-item-img course-product-item-img">
                  <nuxt-link target="_blank" to="/">
                    <img src="~/assets/images/index/product_course@3x.png" alt="" srcset="">
                  </nuxt-link>
                  <div class="course-product-item-play">
                    <nuxt-link target="_blank" to="/">
                      <img src="~/assets/images/index/player.png" alt="" srcset="">
                    </nuxt-link>
                  </div>
                </div>
                <div class="course-product-info">
                  <div class="course-product-title">幼小衔接课程……</div>
                  <div class="course-product-content">
                    <div class="course-product-price">￥
                      <span class="price-num">888</span>
                    </div>
                    <div class="course-product-user">
                      <img src="~/assets/images/index/product_person.png" alt="" srcset="">
                      <div class="views">158</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="more-btn">更多产品</div>
      </div>
    </div>
    <!-- 多渠道教学场景 -->
    <div class="index-scenes">
      <div class="i-s-content">
        <div class="title-content">
          <div class="title-zh">多渠道教学场景</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">
                <i class="iconfont T3 EC2 iconicon_pc1"></i>
              </div>
              <p class="mobile-education-title">PC独立网校</p>
              <p class="mobile-education-sub">沉浸式学习体验</p>
              <p class="mobile-education-sub">建立机构专属品牌官网</p>
              <div class="mobile-education-img">
                <img src="~/assets/images/index/img_PC.png">
              </div>
            </div>
            <div class="big-mobile-education">
              <div class="pc-education-top">
                <div class="pc-small-img">
                  <i class="iconfont iconicon_pc1"></i>
                </div>
                <div class="education-title-box">
                  <p class="education-title">PC独立网校</p>
                  <p class="education-sub-title">沉浸式学习体验，建立机构专属品牌官网</p>
                </div>
              </div>
              <div class="education-img">
                <img src="~/assets/images/index/img_PC.png">
              </div>
            </div>
          </li>
          <li class="mobile-education mobile-education-2" @mouseenter="mobileEnter">
            <div class="small-education-div">
              <div class="mobile-small-img">
                <i class="iconfont T3 EC2 iconicon_h"></i>
              </div>
              <p class="mobile-education-title">移动H5网校</p>
              <p class="mobile-education-sub">轻量级移动教学体验</p>
              <p class="mobile-education-sub">让你的网校与众不同</p>
              <div class="mobile-education-img">
                <img src="~/assets/images/index/img_H5.png">
              </div>
            </div>
            <div class="big-mobile-education">
              <div class="pc-education-top">
                <div class="pc-small-img">
                  <i class="iconfont iconicon_h"></i>
                </div>
                <div class="education-title-box">
                  <p class="education-title">移动H5网校</p>
                  <p class="education-sub-title">轻量级移动教学体验，让你的网校与众不同</p>
                </div>
              </div>
              <div class="education-img">
                <img src="~/assets/images/index/img_H5.png">
              </div>
            </div>
          </li>
          <li class="mobile-education mobile-education-3" @mouseenter="mobileEnter">
            <div class="small-education-div">
              <div class="mobile-small-img">
                <i class="iconfont T3 EC2 iconicon_minprogram"></i>
              </div>
              <p class="mobile-education-title">微信小程序网校</p>
              <p class="mobile-education-sub">结合微信生态</p>
              <p class="mobile-education-sub">即开即用易传播</p>
              <div class="mobile-education-img">
                <img src="~/assets/images/index/img_minprogram.png">
              </div>
            </div>
            <div class="big-mobile-education">
              <div class="pc-education-top">
                <div class="pc-small-img">
                  <i class="iconfont iconicon_minprogram"></i>
                </div>
                <div class="education-title-box">
                  <p class="education-title">微信小程序网校</p>
                  <p class="education-sub-title">结合微信生态，即开即用易传播</p>
                </div>
              </div>
              <div class="education-img">
                <img src="~/assets/images/index/img_minprogram.png">
              </div>
            </div>
          </li>
          <li class="mobile-education mobile-education-4" @mouseenter="mobileEnter">
            <div class="small-education-div">
              <div class="mobile-small-img">
                <i class="iconfont T3 EC2 iconicon_App"></i>
              </div>
              <p class="mobile-education-title">专属网校APP</p>
              <p class="mobile-education-sub">IOS、安卓双系统支持</p>
              <p class="mobile-education-sub">把学校装进口袋</p>
              <div class="mobile-education-img">
                <img src="~/assets/images/index/img_App.png">
              </div>
            </div>
            <div class="big-mobile-education">
              <div class="pc-education-top">
                <div class="pc-small-img">
                  <i class="iconfont iconicon_App"></i>
                </div>
                <div class="education-title-box">
                  <p class="education-title">专属网校APP</p>
                  <p class="education-sub-title">IOS、安卓双系统支持，把学校装进口袋</p>
                </div>
              </div>
              <div class="education-img">
                <img src="~/assets/images/index/img_App.png">
              </div>
            </div>
          </li>
          <li class="mobile-education mobile-education-5" @mouseenter="mobileEnter">
            <div class="small-education-div">
              <div class="mobile-small-img">
                <i class="iconfont T3 EC2 iconicon_Api"></i>
              </div>
              <p class="mobile-education-title">API开放平台</p>
              <p class="mobile-education-sub">联接多个渠道</p>
              <p class="mobile-education-sub">实现数据互联互通</p>
              <div class="mobile-education-img">
                <img src="~/assets/images/index/img_API.png">
              </div>
            </div>
            <div class="big-mobile-education">
              <div class="pc-education-top">
                <div class="pc-small-img">
                  <i class="iconfont iconicon_Api"></i>
                </div>
                <div class="education-title-box">
                  <p class="education-title">API开放平台</p>
                  <p class="education-sub-title">联接多个渠道，实现数据互联互通</p>
                </div>
              </div>
              <div class="education-img">
                <img src="~/assets/images/index/img_API.png">
              </div>
            </div>
          </li>
          <li class="mobile-education mobile-education-6" @mouseenter="mobileEnter">
            <div class="small-education-div">
              <div class="mobile-small-img">
                <i class="iconfont T3 EC2 iconicon_Component"></i>
              </div>
              <p class="mobile-education-title">APP内嵌SDK</p>
              <p class="mobile-education-sub">打破终端流量转化壁垒</p>
              <p class="mobile-education-sub">在自有APP搭建店铺</p>
              <div class="mobile-education-img">
                <img src="~/assets/images/index/img_SDK.png">
              </div>
            </div>
            <div class="big-mobile-education">
              <div class="pc-education-top">
                <div class="pc-small-img">
                  <i class="iconfont iconicon_Component"></i>
                </div>
                <div class="education-title-box">
                  <p class="education-title">APP内嵌SDK</p>
                  <p class="education-sub-title">打破终端流量转化壁垒在自有APP搭建店铺</p>
                </div>
              </div>
              <div class="education-img">
                <img src="~/assets/images/index/img_SDK.png">
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 逻辑狗探索小镇 -->
    <div class="index-town">
      <div class="i-town-content w1200">
        <div class="c-top title-content">
          <!-- <div class="title-en">PRODUCT</div> -->
          <div class="title-zh">逻辑狗探索小镇</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">了解我们</div>
            <div class="town-btn-join">加入我们</div>
          </div>
          <div class="town-content-skill">
            <div class="town-content-img">
              <img src="~/assets/images/index/town_img.png" alt="" srcset="">
              <div class="skill-item skill-item-01">
                <img src="~/assets/images/index/icon_town_01.png" alt="" srcset="">
                <p>知识迁移</p>
              </div>
              <div class="skill-item skill-item-02">
                <img src="~/assets/images/index/icon_town_02.png" alt="" srcset="">
                <p>观察能力</p>
              </div>
              <div class="skill-item skill-item-03">
                <img src="~/assets/images/index/icon_town_03.png" alt="" srcset="">
                <p>手眼协调</p>
              </div>
              <div class="skill-item skill-item-04">
                <img src="~/assets/images/index/icon_town_04.png" alt="" srcset="">
                <p>语言能力</p>
              </div>
              <div class="skill-item skill-item-05">
                <img src="~/assets/images/index/icon_town_05.png" alt="" srcset="">
                <p>想象能力</p>
              </div>
              <div class="skill-item skill-item-06" >
                <img src="~/assets/images/index/icon_town_06.png" alt="" srcset="">
                <p>分类能力</p>
              </div>
              <div class="skill-item skill-item-07" >
                <img src="~/assets/images/index/icon_town_07.png" alt="" srcset="">
                <p>推理能力</p>
              </div>
              <div class="skill-item skill-item-08" >
                <img src="~/assets/images/index/icon_town_08.png" alt="" srcset="">
                <p>空间能力</p>
              </div>
              <div class="skill-item skill-item-09" >
                <img src="~/assets/images/index/icon_town_09.png" alt="" srcset="">
                <p>专注能力</p>
              </div>
              <div class="skill-item skill-item-10" >
                <img src="~/assets/images/index/icon_town_10.png" alt="" srcset="">
                <p>数学能力</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="town_bottom_bg">
        <img src="~/assets/images/index/town_bottom.png" alt="" srcset="">
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import VBanner from "~/components/home/banner";
// import indexVideo from '~/components/home/indexVideo';
// import prodListShow from '~/components/common/prodListShow';
// import indexNewsListShow from '~/components/common/indexNewsListShow'

export default {
  data() {
    return {
      experiencePlace: ["包头", "成都", "南京", "东莞"],
      num: 0,
      clickProdIndex: 0,
      clickNewsIndex: 0,
      productCate: [
        {
          title: "全部",
          type: 0,
        },
        {
          title: "0-3岁思维启蒙",
          type: 1,
        },
        {
          title: "3-7岁能力训练",
          type: 2,
        },
        {
          title: "5-7岁入学思考",
          type: 3,
        },
        {
          title: "7-12岁技巧学习",
          type: 4,
        },
      ],
      courseCate: [
        {
          title: "全部",
          type: 0,
        },
        {
          title: "直播课",
          type: 1,
        },
        {
          title: "录播课",
          type: 2,
        },
        {
          title: "公开课",
          type: 3,
        },
      ],
    };
  },
  components: {
    VBanner,
    // indexVideo,
    // prodListShow,
    // indexNewsListShow
  },
//     逻辑狗官网 - 中德智慧教育
// 关键词：逻辑狗官网、逻辑狗教材、逻辑狗课程、逻辑狗思维训练课程、儿童思维教育、0-12岁儿童
// 描述：逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台
  head() {
    return {
      title: "逻辑狗官网-中德智慧教育",
      meta: [
        {
          name: "keywords",
          hid: "keywords",
          content: `逻辑狗官网、逻辑狗教材、 幼儿园教材、逻辑狗课程、逻辑狗思维训练课程、儿童思维教育、0-12岁儿童`,
        },
        {
          name: "description",
          hid: "description",
          content: `逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台`,
        },
      ],
    };
  },
  async asyncData({ params, store }) {
    //首页head信息
    let metaData = await axios(
      `${store.state.wordpressAPI}/NavigationMeta/get/1`
    );
    //banner数据动态获取
    let banner = await axios(
      `${store.state.wordpressAPI}/banner/selectAllByTpye/1`
    );
    //首页新闻信息
    // let indexFirstNewsList1 = await axios(`${store.state.wordpressAPI}/article/getRecommend/1`);
    // let indexFirstNewsList2 = await axios(`${store.state.wordpressAPI}/article/getRecommend/2`);
    // let indexFirstNewsList3 = await axios(`${store.state.wordpressAPI}/article/getRecommend/3`);
    // let indexFirstNewsList4 = await axios(`${store.state.wordpressAPI}/article/getRecommend/4`);
    // let indexFirstNewsList5 = await axios(`${store.state.wordpressAPI}/article/getRecommend/5`);

    // let indexNewsList1 = await axios(`${store.state.wordpressAPI}/article/getRecommendsByCategoryId/1/9`);
    // let indexNewsList2 = await axios(`${store.state.wordpressAPI}/article/getRecommendsByCategoryId/2/9`);
    // let indexNewsList3 = await axios(`${store.state.wordpressAPI}/article/getRecommendsByCategoryId/3/9`);
    // let indexNewsList4 = await axios(`${store.state.wordpressAPI}/article/getRecommendsByCategoryId/4/9`);
    // let indexNewsList5 = await axios(`${store.state.wordpressAPI}/article/getRecommendsByCategoryId/5/9`);

    //首页产品展示信息
    // let indexProdNav = await axios(`${store.state.wordpressAPI}/proCategory/showFirst`);

    // let indexProdList1 = await axios(`${store.state.wordpressAPI}/product/selectByPosition/1`);
    // let indexProdList2 = await axios(`${store.state.wordpressAPI}/product/selectByPosition/2`);
    // let indexProdList3 = await axios(`${store.state.wordpressAPI}/product/selectByPosition/3`);
    // let indexProdList4 = await axios(`${store.state.wordpressAPI}/product/selectByPosition/4`);
    // let indexProdList6 = await axios(`${store.state.wordpressAPI}/product/selectByPosition/97`);

    return {
      metaData: metaData.data,
      bannerData: banner.data,
      //首页新闻信息
      // indexFirstNewsList1: indexFirstNewsList1.data,
      // indexFirstNewsList2: indexFirstNewsList2.data,
      // indexFirstNewsList3: indexFirstNewsList3.data,
      // indexFirstNewsList4: indexFirstNewsList4.data,
      // indexFirstNewsList5: indexFirstNewsList5.data,
      // indexNewsList1: indexNewsList1.data,
      // indexNewsList2: indexNewsList2.data,
      // indexNewsList3: indexNewsList3.data,
      // indexNewsList4: indexNewsList4.data,
      // indexNewsList5: indexNewsList5.data,
      //首页产品信息
      // indexProdNav: indexProdNav.data,
      // indexProdList1: indexProdList1.data,
      // indexProdList2: indexProdList2.data,
      // indexProdList3: indexProdList3.data,
      // indexProdList4: indexProdList4.data,
      // indexProdList6: indexProdList6.data,
    };
  },
  created() {

  },
  mounted() {
  },
  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) {
      "400px" != $(event.target).css("width") &&(
        $(".panorama-education-list .mobile-education").css(
          "width",
          "200px"
        ),
        $(event.target).css("width", "400px"),
        $(".panorama-education-list .mobile-education")
          .find(".big-mobile-education")
          .css("display", "none"),
        $(event.target).css("width", "400px"),
        $(event.target).find(".big-mobile-education").fadeIn("fast")
      )
    }
  },
};
</script>
<style lang="scss" scoped>
@import "~static/common/style.sass";

.container {
  width: 100%;
  background: #f0f2f5;
  height: auto;
}

.title-content {
  // margin-top: 164px;
}

.title-en {
  height: 110px;
  line-height: 110px;
  font-size: 78px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #353956;
}

.title-zh {
  height: 81px;
  line-height: 81px;
  font-size: 58px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  letter-spacing: 1px;
  text-align: center;
}

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

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

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

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

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

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

// index-scenes
.index-scenes {
  background: #f7fbff;
  padding: 217px 0 228px;
  .i-s-contant {
  }
  .scenes-content-box {
    margin: 102px auto 0;
    width: 1200px;
    .panorama-education-list {
      margin: 0 auto;
      height: 460px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      .pc-education {
        width: 400px;
        height: 460px;
        background-color: #fff;
        border: 1px solid #eee;
      }
      .mobile-education {
        width: 160px;
        height: 460px;
        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: 32px;
          height: 32px;
          margin: 68px auto 26px;
          img {
            width: 32px;
            height: 32px;
          }
        }
        .mobile-education-title {
          height: 22px;
          font-size: 16px;
          font-weight: 500;
          color: #333;
          line-height: 22px;
          margin-bottom: 8px;
        }
        .mobile-education-sub {
          font-size: 12px;
          font-weight: 400;
          color: #333;
          line-height: 18px;
        }
        .mobile-education-img {
          width: 160px;
          height: 128px;
          margin: 76px auto 0;
          img {
            width: 160px;
            height: 128px;
          }
        }
      }
      .big-mobile-education {
        display: none;
        background: #fff;
        width: 346px;
        height: 460px;
        position: absolute;
        z-index: 3;
        opacity: 1;
        left: -1px;
        top: -1px;
        border: 1px solid #105cfb;
        .pc-education-top {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          margin-left: 36px;
          .pc-small-img {
            width: 32px;
            height: 32px;
            margin-top: 40px;
            img {
              width: 32px;
              height: 32px;
            }
          }
          .education-title-box {
            margin-top: 32px;
            margin-left: 20px;
            .education-title {
              height: 22px;
              font-size: 16px;
              font-weight: 500;
              color: #333;
              line-height: 22px;
              text-align: left;
            }
            .education-sub-title {
              margin-top: 4px;
              height: 18px;
              font-size: 12px;
              color: #333;
              line-height: 18px;
            }
          }
        }
        .education-img {
          width: 306px;
          height: auto;
          margin: 56px auto 0;
          img {
            width: 306px;
            height: auto;
          }
        }
        .mobile-small-img {
          width: 48px;
          height: 48px;
          margin: 68px auto 26px;
          img {
            width: 48px;
            height: 48px;
          }
        }
        .mobile-education-title {
          height: 33px;
          font-size: 24px;
          font-weight: 500;
          color: #333;
          line-height: 33px;
          margin-bottom: 8px;
        }
        .mobile-education-sub {
          font-size: 18px;
          font-weight: 400;
          color: #333;
          line-height: 27px;
        }
        .mobile-education-img {
          width: 240px;
          height: 192px;
          margin: 76px auto 0;
            img {
              width: 240px;
              height: 192px;
            }
        }
      }
      .mobile-education-1 {
        width: 342px;
      }
    }
  }
}

// index-town
.index-town {
  position: relative;
  height: 1370px;
  .i-town-content {
    .title-sub {
      margin-top: 28px;
      text-align: center;
      font-size:28px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:#38393A;
      line-height:40px;
    }
    .town-content-box {
      .town-btn-group {
        margin-top: 52px;
        display: flex;  
        font-size: 29px;
        font-family: PingFangSC-Medium,PingFang SC;
        font-weight: 500;
        color:#ffffff;
        line-height: 40px;
        text-align: center;
        .town-btn-about { //428 120
          width: 180px;
          height: 60px;
          line-height: 60px;
          border-radius: 30px;
          border: 1px solid $theme_color_fu;
          color: $theme_color_fu;
          margin: 0 290px 0 308px;
        }
        .town-btn-join {
          width: 180px;
          height: 60px;
          line-height: 60px;
          background: $theme_color_fu;
          box-shadow: 0px 4px 9px 0px rgba(91,141,240,0.83);
          border-radius: 30px;
        }
      }
    }
  }
  .town-content-skill {
    // position: relative;
    .town-content-img {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      font-size: 0;
      z-index: 10;
      border: 1px solid red;
      .skill-item {
        position: absolute;
        text-align: center;
        p {
          position: absolute;
          bottom: -20px;
          transform: translateX(-50%);
          font-size:24px;
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color: #38393A;
          text-align: center;
        }
      }
      .skill-item-01 {
        left: -160px;
        top: -158px;
      }
      .skill-item-02 {
        left: 70px;
        top: -130px;
      }
    }
  }
  .town_bottom_bg {
    position: absolute;
    bottom: 0;
    font-size: 0;
  }
}
</style>