|
|
@@ -2,45 +2,52 @@
|
|
|
<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 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>
|
|
|
+ <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">
|
|
|
+ <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/tab-right-pic-dg.png" alt="" srcset="">
|
|
|
+ <img src="~/assets/images/index/product.png" alt="" srcset="">
|
|
|
</nuxt-link>
|
|
|
- <div class="product-tag">
|
|
|
- 基础版
|
|
|
+ <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">幼小衔接课程……</div>
|
|
|
+ <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 class="thinking-product-price">￥
|
|
|
+ <span class="price-num">888</span>
|
|
|
</div>
|
|
|
<div class="thinking-product-btn">
|
|
|
- 查看产品
|
|
|
+ <nuxt-link to="/">查看产品</nuxt-link>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -48,45 +55,55 @@
|
|
|
</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 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 productCate" :class="{active:index == clickProdIndex}" :key="index" @click="getProdList(index)">
|
|
|
- <nuxt-link to="/">
|
|
|
- {{ item.title }}
|
|
|
- </nuxt-link>
|
|
|
+ <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 productCate" :key="index">
|
|
|
+ <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 to="/">
|
|
|
- <img src="~/assets/images/index/tab-right-pic-dg.png" alt="" srcset="">
|
|
|
+ <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 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="">
|
|
|
- <img src="~/assets/images/join/business_banner.jpg" alt="" srcset="">
|
|
|
- <div>158</div>
|
|
|
+ <div class="views">158</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -94,14 +111,189 @@
|
|
|
</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>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import axios from 'axios';
|
|
|
-import VBanner from '~/components/home/banner';
|
|
|
+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'
|
|
|
@@ -109,33 +301,51 @@ import VBanner from '~/components/home/banner';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- experiencePlace:['包头','成都','南京','东莞'],
|
|
|
- num:0,
|
|
|
- clickProdIndex:0,
|
|
|
+ experiencePlace: ["包头", "成都", "南京", "东莞"],
|
|
|
+ num: 0,
|
|
|
+ clickProdIndex: 0,
|
|
|
clickNewsIndex: 0,
|
|
|
productCate: [
|
|
|
{
|
|
|
- title: '全部',
|
|
|
- type: 0
|
|
|
+ title: "全部",
|
|
|
+ type: 0,
|
|
|
},
|
|
|
{
|
|
|
- title: '0-3岁思维启蒙',
|
|
|
- type: 1
|
|
|
+ title: "0-3岁思维启蒙",
|
|
|
+ type: 1,
|
|
|
},
|
|
|
{
|
|
|
- title: '3-7岁能力训练',
|
|
|
- type: 2
|
|
|
+ title: "3-7岁能力训练",
|
|
|
+ type: 2,
|
|
|
},
|
|
|
{
|
|
|
- title: '5-7岁入学思考',
|
|
|
- type: 3
|
|
|
+ title: "5-7岁入学思考",
|
|
|
+ type: 3,
|
|
|
},
|
|
|
{
|
|
|
- title: '7-12岁技巧学习',
|
|
|
- type: 4
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
+ title: "7-12岁技巧学习",
|
|
|
+ type: 4,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ courseCate: [
|
|
|
+ {
|
|
|
+ title: "全部",
|
|
|
+ type: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "直播课",
|
|
|
+ type: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "录播课",
|
|
|
+ type: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "公开课",
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
},
|
|
|
components: {
|
|
|
VBanner,
|
|
|
@@ -143,20 +353,35 @@ export default {
|
|
|
// prodListShow,
|
|
|
// indexNewsListShow
|
|
|
},
|
|
|
+// 逻辑狗官网 - 中德智慧教育
|
|
|
+// 关键词：逻辑狗官网、逻辑狗教材、逻辑狗课程、逻辑狗思维训练课程、儿童思维教育、0-12岁儿童
|
|
|
+// 描述：逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台
|
|
|
head() {
|
|
|
return {
|
|
|
- title:'【中德智慧官网】逻辑狗 中华小熊猫',
|
|
|
+ title: "逻辑狗官网 - 中德智慧教育",
|
|
|
meta: [
|
|
|
- {name:'keywords',hid: 'keywords',content:`${this.metaData.navigationKeyword}`},
|
|
|
- {name:'description',hid:'description',content:`${this.metaData.navigationDescription}`}
|
|
|
+ {
|
|
|
+ name: "keywords",
|
|
|
+ hid: "keywords",
|
|
|
+ content: `逻辑狗官网、逻辑狗教材、 幼儿园教材、逻辑狗课程、逻辑狗思维训练课程、儿童思维教育、0-12岁儿童`,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "description",
|
|
|
+ hid: "description",
|
|
|
+ content: `逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台`,
|
|
|
+ },
|
|
|
],
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
- async asyncData({params,store}){
|
|
|
+ async asyncData({ params, store }) {
|
|
|
//首页head信息
|
|
|
- let metaData = await axios(`${store.state.wordpressAPI}/NavigationMeta/get/1`);
|
|
|
+ let metaData = await axios(
|
|
|
+ `${store.state.wordpressAPI}/NavigationMeta/get/1`
|
|
|
+ );
|
|
|
//banner数据动态获取
|
|
|
- let banner = await axios(`${store.state.wordpressAPI}/banner/selectAllByTpye/1`);
|
|
|
+ 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`);
|
|
|
@@ -169,10 +394,10 @@ export default {
|
|
|
// 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`);
|
|
|
@@ -200,55 +425,93 @@ export default {
|
|
|
// indexProdList3: indexProdList3.data,
|
|
|
// indexProdList4: indexProdList4.data,
|
|
|
// indexProdList6: indexProdList6.data,
|
|
|
- }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
},
|
|
|
methods: {
|
|
|
- tab (index){
|
|
|
+ tab(index) {
|
|
|
this.num = index;
|
|
|
},
|
|
|
- getProdList (index){
|
|
|
+ getProdList(index) {
|
|
|
this.clickProdIndex = index;
|
|
|
},
|
|
|
- getNewsList (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';
|
|
|
+@import "~static/common/style.sass";
|
|
|
|
|
|
.container {
|
|
|
width: 100%;
|
|
|
- background: #F0F2F5;
|
|
|
+ background: #f0f2f5;
|
|
|
height: auto;
|
|
|
}
|
|
|
|
|
|
.title-content {
|
|
|
- margin-top: 164px;
|
|
|
+ // margin-top: 164px;
|
|
|
}
|
|
|
|
|
|
.title-en {
|
|
|
- height:110px;
|
|
|
- line-height:110px;
|
|
|
- font-size:78px;
|
|
|
- font-family:PingFangSC-Semibold,PingFang SC;
|
|
|
- font-weight:600;
|
|
|
- color:#353956;
|
|
|
+ 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-family: PingFangSC-Semibold, PingFang SC;
|
|
|
font-weight: 600;
|
|
|
- color:#000000;
|
|
|
+ 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 {
|
|
|
@@ -258,7 +521,8 @@ ul.cate-nav {
|
|
|
&:first-child {
|
|
|
margin-left: 0;
|
|
|
}
|
|
|
- &.active, &:hover {
|
|
|
+ &.active,
|
|
|
+ &:hover {
|
|
|
a {
|
|
|
color: $theme_color;
|
|
|
}
|
|
|
@@ -266,11 +530,11 @@ ul.cate-nav {
|
|
|
.line {
|
|
|
visibility: hidden;
|
|
|
margin: 22px auto 0;
|
|
|
- width:60px;
|
|
|
+ width: 60px;
|
|
|
border-radius: 50px;
|
|
|
height: 15px;
|
|
|
background: $theme_color_fu;
|
|
|
- box-shadow: 0px 2px 8px 0px rgba(45,112,245,0.64);
|
|
|
+ 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;
|
|
|
@@ -280,7 +544,8 @@ ul.cate-nav {
|
|
|
color: #747885;
|
|
|
}
|
|
|
}
|
|
|
- li.products-kind:hover, li.products-kind.active {
|
|
|
+ li.products-kind:hover,
|
|
|
+ li.products-kind.active {
|
|
|
.line {
|
|
|
display: block;
|
|
|
visibility: visible;
|
|
|
@@ -296,7 +561,7 @@ ul.cate-nav {
|
|
|
.product-item {
|
|
|
position: relative;
|
|
|
box-sizing: border-box;
|
|
|
- width:372px;
|
|
|
+ width: 372px;
|
|
|
margin-bottom: 42px;
|
|
|
margin-right: 36px;
|
|
|
&:nth-child(3n) {
|
|
|
@@ -310,12 +575,12 @@ ul.cate-nav {
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
font-size: 12px;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: #ffffff;
|
|
|
height: 24px;
|
|
|
line-height: 24px;
|
|
|
- font-family: PingFangSC-Semibold,PingFang SC;
|
|
|
+ font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
font-weight: 600;
|
|
|
- border-radius:18px 0px 7px 0px;
|
|
|
+ border-radius: 18px 0px 7px 0px;
|
|
|
// img {
|
|
|
// width:52px;
|
|
|
// height:24px;
|
|
|
@@ -324,7 +589,7 @@ ul.cate-nav {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-/* index-thinking */
|
|
|
+/* index-thinking */
|
|
|
.index-thinking {
|
|
|
width: 1200px;
|
|
|
margin: 0 auto;
|
|
|
@@ -355,20 +620,21 @@ ul.cate-nav {
|
|
|
.line {
|
|
|
visibility: hidden;
|
|
|
margin: 22px auto 0;
|
|
|
- width:60px;
|
|
|
+ width: 60px;
|
|
|
border-radius: 50px;
|
|
|
height: 15px;
|
|
|
- width:59px;
|
|
|
- height:15px;
|
|
|
+ width: 59px;
|
|
|
+ height: 15px;
|
|
|
background: $theme_color_fu;
|
|
|
- box-shadow: 0px 2px 8px 0px rgba(94,161,241,0.87);
|
|
|
+ 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 {
|
|
|
+ li.thinking-products-kind:hover,
|
|
|
+ li.thinking-products-kind.active {
|
|
|
.line {
|
|
|
display: block;
|
|
|
visibility: visible;
|
|
|
@@ -378,8 +644,8 @@ ul.cate-nav {
|
|
|
li.thinking-products-kind:first-child {
|
|
|
margin-left: 0;
|
|
|
}
|
|
|
- li.thinking-products-kind.active a,
|
|
|
- .thinking-products-kind:hover a{
|
|
|
+ li.thinking-products-kind.active a,
|
|
|
+ .thinking-products-kind:hover a {
|
|
|
// font-size: 42px;
|
|
|
color: $theme_color;
|
|
|
// border-bottom: 6px solid $theme_color;
|
|
|
@@ -392,34 +658,39 @@ ul.cate-nav {
|
|
|
.thinking-product-item {
|
|
|
position: relative;
|
|
|
box-sizing: border-box;
|
|
|
- width:372px;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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-family: PingFangSC-Medium, PingFang SC;
|
|
|
font-weight: 500;
|
|
|
- color:rgba(52,62,48,1);
|
|
|
line-height: 28px;
|
|
|
+ a {
|
|
|
+ color: #343e30;
|
|
|
+ }
|
|
|
}
|
|
|
.thinking-product-content {
|
|
|
display: flex;
|
|
|
@@ -427,19 +698,26 @@ ul.cate-nav {
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
.thinking-product-price {
|
|
|
- color: #EA0B4A;
|
|
|
+ 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;
|
|
|
- color: #3E8EFF;
|
|
|
+ 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;
|
|
|
@@ -451,24 +729,50 @@ ul.cate-nav {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-/* index-thinking */
|
|
|
+/* 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;
|
|
|
+ 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-family: PingFangSC-Medium, PingFang SC;
|
|
|
font-weight: 500;
|
|
|
- color:rgba(52,62,48,1);
|
|
|
+ color: rgba(52, 62, 48, 1);
|
|
|
line-height: 28px;
|
|
|
}
|
|
|
.course-product-content {
|
|
|
@@ -477,7 +781,7 @@ ul.cate-nav {
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
.course-product-price {
|
|
|
- color: #EA0B4A;
|
|
|
+ color: #ea0b4a;
|
|
|
.price-num {
|
|
|
font-size: 22px;
|
|
|
font-weight: bold;
|
|
|
@@ -491,10 +795,173 @@ ul.cate-nav {
|
|
|
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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
周杰伦
