'专家'

pages/index.vue

@@ -96,8 +96,8 @@
               <p class="name">{{ item.title }}</p>
             </div>
           </div>
-          <!-- <div class="swiper-pagination"  slot="pagination"></div> -->
         </div>
+        <!-- <div class="expert-swiper-pagination" slot="pagination"></div> -->
         <div class="swiper-button-prev" slot="button-prev" @click="prev"></div>
         <div class="swiper-button-next" slot="button-next" @click="next"></div> 
       </div>
@@ -337,7 +337,7 @@
     <!-- 逻辑狗探索小镇 -->
     <div class="index-town">
       <div class="i-town-content w1200">
-        <div class="c-top title-content">
+        <div class="t-top title-content">
           <!-- <div class="title-en">PRODUCT</div> -->
           <div class="title-zh">逻辑狗探索小镇</div>
           <p class="title-sub">专注3.4-12岁儿童优质思维能力养成的场景式，游戏化体验中心</p>
@@ -398,6 +398,108 @@
         <img src="~/assets/images/index/town_bottom.png" alt="" srcset="">
       </div>
     </div>
+
+    <!-- 专家名师 -->
+    <div class="index-expert">
+      <div class="i-expert-content w1200">
+        <div class="e-top title-content">
+          <div class="title-zh">专家名师</div>
+        </div>
+        <div class="e-content-box">
+          <div class="w-innner">
+            <div id="certify" class="w1200">
+              <div class="swiper-container" v-swiper:expertSwiper="expertSwiperOption" ref="swiperExpertBox" @mouseenter="stopExpertSwiper" @mouseleave="startExpertSwiper">
+                <div class="swiper-wrapper">
+                  <div class="swiper-slide"><img src="https://static-www.putaocdn.com/pc/static/img/img_jiaoyu_mokuai3_yanfa2@2x.v202007141810.png"></div>
+                  <div class="swiper-slide"><img src="https://static-www.putaocdn.com/pc/static/img/img_jiaoyu_mokuai3_yanfa3@2x.v202007141810.png"></div>
+                  <div class="swiper-slide"><img src="https://static-www.putaocdn.com/pc/static/img/img_jiaoyu_mokuai3_yanfa1@2x.v202007141810.png"></div>
+                </div>
+                <!-- <div class="swiper-button-prev" slot="button-prev" @click="prev"></div> -->
+                <!-- <div class="swiper-button-next" slot="button-next" @click="next"></div>  -->
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 新闻资讯 -->
+    <div class="index-article">
+      <div class="i-article-content w1200">
+        <div class="a-top title-content">
+          <div class="title-zh">新闻资讯</div>
+        </div>
+        <div class="article-content-box">
+          <div class="article-content-top"> 
+            <div class="article-content-top-left">
+              <div class="article-type-header">
+                <div class="article-type-title">{{ articleList.articleNews.typeTitle }}</div>
+                <div>
+                  <i class="el-icon-arrow-right"></i>
+                </div>
+              </div>
+              <div class="article-content-info">
+                <img :src="articleList.articleNews.content[0].imgUrl" alt="" srcset="">
+                <p class="info-title">{{ articleList.articleNews.content[0].title }}</p>
+              </div>
+            </div>
+            <div class="article-content-top-right">
+              <div class="article-type-header">
+                <div class="article-type-title">{{ articleList.storeNews.typeTitle }}</div>
+                <div>
+                  <i class="el-icon-arrow-right"></i>
+                </div>
+              </div>
+              <div class="article-content-info">
+                <template v-for="(item, index) in articleList.storeNews.content" >
+                  <div v-if="index < 4" class="article-item-right" :key="index">
+                    <img :src="item.imgUrl" alt="">
+                    <p>{{ item.title }}</p>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </div>
+          <div class="article-content-bottom">
+            <div class="article-type-header">
+              <div class="article-type-title">{{ articleList.industryNews.typeTitle }}</div>
+              <div>
+                <i class="el-icon-arrow-right"></i>
+              </div>
+            </div>
+            <div class="article-content-bottom-info">
+              <div class="article-content-bottom-left">
+                <img :src="articleList.industryNews.content[0].imgUrl" alt="">
+              </div>
+              <div class="article-content-bottom-right">
+                <p class="title">{{ articleList.industryNews.content[0].title }}</p>
+                <p class="desc">{{ articleList.industryNews.content[0].desc }}</p>
+                <p class="time">2020-6-18</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 企业荣誉 -->
+    <div class="index-honor">
+      <div class="i-honor-content w1200">
+        <div class="h-top title-content">
+          <div class="h-top title-zh">企业荣誉</div>
+        </div>
+        <div class="honer-content-box">
+          <div class="swiper swiperBox" v-swiper:honorSwiper="honorSwiperOption" ref="swiperHonorBox" @mouseenter="stopSwiper" @mouseleave="startSwiper">
+            <div class="swiper-wrapper">
+              <div v-for="(item, index) in honorList" :key="index" class="swiper-slide">
+                <img :src="item.imgUrl" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
   </div>
 </template>
 
@@ -419,7 +521,7 @@ export default {
           bannerAlt: '中德智慧',
         },
         {
-          bannerId: '1',
+          bannerId: '2',
           href: 'http://zaojiao.net',
           bannerSrc: 'http://img.visney.cn/img/banner_img/20181009155424179449e9d3aa5fa47548ab021e418af1189.jpg',
           bannerAlt: '中德智慧',
@@ -491,6 +593,123 @@ export default {
           title: '小熊猫',
         }
       ],
+      honorList: [
+        {
+          imgUrl: require("../assets/images/index/honer.png"),
+          title: '逻辑狗',
+        },
+        {
+          imgUrl: require("../assets/images/index/honer.png"),
+          title: '逻辑狗',
+        },
+        {
+          imgUrl: require("../assets/images/index/honer.png"),
+          title: '逻辑狗',
+        },
+        {
+          imgUrl: require("../assets/images/index/honer.png"),
+          title: '逻辑狗',
+        },
+        {
+          imgUrl: require("../assets/images/index/honer.png"),
+          title: '逻辑狗',
+        },
+      ],
+      articleList: {
+        articleNews: {
+          typeTitle: '中德智慧咨讯',
+          content: [
+            {
+              id: '1',
+              title: '中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗',
+              imgUrl: 'http://img.visney.cn/img/article_img/2018081015333428100d020ce30c84267ab0efe53d429a0db.jpg',
+            },
+            {
+              id: '2',
+              title: '中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗',
+              imgUrl: 'http://img.visney.cn/img/article_img/20180809173951489186b0c81b62b4e658696eee3c07b2f77.jpg',
+            },
+            {
+              id: '3',
+              title: '中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗',
+              imgUrl: '',
+            },
+            {
+              id: '4',
+              title: '中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗',
+              imgUrl: '',
+            },
+            {
+              id: '5',
+              title: '中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗',
+              imgUrl: '',
+            },
+            {
+              id: '6',
+              title: '中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗',
+              imgUrl: '',
+            }
+          ]
+        },
+        storeNews: {
+          typeTitle: '门店动态',
+          content: [
+            {
+              id: '1',
+              title: '中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗',
+              imgUrl: 'http://img.visney.cn/img/article_img/2018081015333428100d020ce30c84267ab0efe53d429a0db.jpg',
+            },
+            {
+              id: '2',
+              title: '中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗',
+              imgUrl: 'http://img.visney.cn/img/article_img/20180809173951489186b0c81b62b4e658696eee3c07b2f77.jpg',
+            },
+            {
+              id: '3',
+              title: '中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗',
+              imgUrl: 'http://img.visney.cn/img/article_img/20180809173951489186b0c81b62b4e658696eee3c07b2f77.jpg',
+            },
+            {
+              id: '4',
+              title: '中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗',
+              imgUrl: 'http://img.visney.cn/img/article_img/20180809173951489186b0c81b62b4e658696eee3c07b2f77.jpg',
+            },
+            {
+              id: '5',
+              title: '中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗',
+              imgUrl: 'http://img.visney.cn/img/article_img/20180809173951489186b0c81b62b4e658696eee3c07b2f77.jpg',
+            },
+            {
+              id: '6',
+              title: '中德智慧逻辑狗中德智慧逻辑狗中德智慧逻辑狗',
+              imgUrl: 'http://img.visney.cn/img/article_img/20180809173951489186b0c81b62b4e658696eee3c07b2f77.jpg'
+            }
+          ],
+        },
+        industryNews: {
+          typeTitle: '行业动态',
+          content: [
+            {
+              id: '1',
+              title: '最前线的中德逻辑最前线的中德逻辑最前线的中德逻辑在这里每 一个逝世四十',
+              imgUrl: 'http://img.visney.cn/img/article_img/2018081015333428100d020ce30c84267ab0efe53d429a0db.jpg',
+              desc: '中德智慧已经成为全球知名教育品牌'
+            },
+            {
+              id: '2',
+              title: '最前线的中德逻辑最前线的中德逻辑最前线的中德逻辑在这里每 一个逝世四十',
+              imgUrl: 'http://img.visney.cn/img/article_img/20180809173951489186b0c81b62b4e658696eee3c07b2f77.jpg',
+              desc: '中德智慧已经成为全球知名教育品牌'
+            },
+            {
+              id: '3',
+              title: '最前线的中德逻辑最前线的中德逻辑最前线的中德逻辑在这里每 一个逝世四十',
+              imgUrl: 'http://img.visney.cn/img/article_img/20180809173951489186b0c81b62b4e658696eee3c07b2f77.jpg',
+              desc: '中德智慧已经成为全球知名教育品牌'
+            },
+          ]
+        } 
+      },
       swiperOption: { // 配置说明直接看官网
         slidesPerView: 'auto',
         paginationClickable: true,
@@ -508,13 +727,53 @@ export default {
         notNextTick: true,
         // centeredSlides: true,
         pagination: {
-          el: '.swiper-pagination',
+          el: '.expert-swiper-pagination',
           clickable: true
         },
         navigation: {
           nextEl: '.swiper-button-next',
           prevEl: '.swiper-button-prev'
         }
+      },
+      honorSwiperOption: { // 配置说明直接看官网
+        slidesPerView: 'auto',
+        paginationClickable: true,
+        spaceBetween: 30, //轮播图左右之间的间距，配合css样式中的width实现效果
+        // slidesOffsetBefore: 100,
+        // slidesOffsetAfter: 100,
+        autoplay: {
+          delay: 3000,
+          stopOnLastSlide: false,
+          disableOnInteraction: false,
+        },
+        speed: 1000,
+        loop: true,
+        observer: true,
+        observeParents: true,
+        autoplayDisableOnInteraction: false,
+        notNextTick: true,
+        centeredSlides: true,
+      },
+      expertSwiperOption: {
+        autoplay: 2000,//自动滑动
+        speed: 500,//自动滑动开始到结束的时间（单位ms）
+        loop: true,//开启循环
+        loopedSlides: 3,//在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
+        slidesPerView:'auto',//设置slider容器能够同时显示的slides数量(carousel模式)。另外，支持'auto'值，会根据容器container的宽度调整slides数目。
+        effect: 'coverflow',//可以实现3D效果的轮播,
+        pagination: {
+          el: 'swiper-pagination',
+          type: 'bullets',
+          clickable: true
+        }, //分页器
+        centeredSlides:true,//设定为true时，active slide会居中，而不是默认状态下的居左。
+        coverflow:{
+          rotate: 0,//slide做3d旋转时Y轴的旋转角度。默认50。
+          stretch: 100,//每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
+          depth: 150,//slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
+          modifier: 1,//depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
+          slideShadows: false,//开启slide阴影。默认 true。
+        },
       }
     };
   },
@@ -545,59 +804,8 @@ export default {
     };
   },
   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() {
@@ -609,6 +817,13 @@ export default {
     // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
     return this.$refs.swiperBox.swiper;
   },
+  honorSwiper() {
+    return this.$refs.swiperHonorBox.swiper;
+  },
+  expertSwiper() {
+    console.log(this.$refs.swiperExpertBox.swiper)
+    return this.$refs.swiperExpertBox.swiper;
+  },
   methods: {
     tab(index) {
       this.num = index;
@@ -638,12 +853,19 @@ export default {
       )
     },
     stopSwiper() { // 鼠标移入停止播放
-      console.log(this.swiper);
+      // console.log(this.swiper);
       // this.swiper.autoplay.stop();
     },
     startSwiper() { // 移出继续播放
       // this.swiper.autoplay.start();
     },
+    stopExpertSwiper() {
+      console.log(this.expertSwiper);
+      console.log(111);
+    },
+    startExpertSwiper() {
+      // console.log(this.expertSwiper);
+    },
     prev() {
       this.swiper.slidePrev();
     },
@@ -865,7 +1087,7 @@ ul.cate-nav {
 
 /* index-thinking */
 .index-thinking {
-  width: 1200px;
+  max-width: 1200px;
   margin: 0 auto;
   padding-top: 164px;
   // text-align: center;
@@ -1045,7 +1267,7 @@ ul.cate-nav {
 /* index-thinking */
 .index-course {
   padding-top: 164px;
-  width: 1200px;
+  max-width: 1200px;
   margin: 0 auto;
   .course-content-box {
     .course-cate-nav {
@@ -1124,7 +1346,7 @@ ul.cate-nav {
   }
   .scenes-content-box {
     margin: 102px auto 0;
-    width: 1200px;
+    max-width: 1200px;
     .panorama-education-list {
       margin: 0 auto;
       height: 460px;
@@ -1407,4 +1629,226 @@ ul.cate-nav {
   }
 }
 
+// index-honor
+.index-honor {
+  background-image: url('~assets/images/index/honor_bg.png');
+  background-repeat: no-repeat;
+  background-position: top 20px right 115px;
+  background-color: #f7fbff;
+  padding: 188px 0 162px;
+  .i-honor-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    .honer-content-box {
+      padding: 0 20px;
+      
+    }
+  }
+  .swiper-slide {
+    width: 240px;
+    font-size: 0;
+  }
+  .honer-content-box {
+    margin-top: 102px;
+  }
+}
+
+// index-article
+.index-article {
+  padding: 180px 0 176px;
+  .article-content-box {
+    margin-top: 85px;
+    .article-type-title {
+      width: 180px;
+      height: 42px;
+      line-height: 42px;
+      font-size: 30px;
+      font-family: PingFangSC-Semibold,PingFang SC;
+      font-weight: 600;
+      color:#3A4239;
+      margin-bottom: 12px;
+    }
+    .article-type-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      i {
+        margin-right: 15px;
+        color: #999999;
+        font-size: 20px;
+      }
+    }
+    .article-content-top {
+      display: flex;
+      .article-content-top-left {
+        width: 844px;
+        margin-right: 10px;
+      }
+      .article-content-info {
+        height: 352px;
+        position: relative;
+        img {
+          height: 100%;
+          width: 100%;
+          border-radius: 8px;
+          object-fit: cover;
+        }
+        .info-title {
+          width: 100%;
+          padding: 8px 50px;
+          font-size: 16px;
+          font-family: PingFangSC-Medium,PingFang SC;
+          font-weight: 500;
+          color:#ffffff;
+          line-height: 22px;
+          position: absolute;
+          overflow: hidden;            //超出的文本隐藏 
+          text-overflow: ellipsis;     //溢出用省略号显示
+          white-space: nowrap;         //溢出不换行,只能显示一行
+          bottom: 0;
+          background:rgba(92,94,93,0.31);
+          border-radius: 0px 0px 7px 7px;
+        }
+      }
+      .article-content-top-right {
+        width: 346px ;
+        font-size: 0;
+        .article-content-info {
+          height: 352px;
+          display: flex;
+          flex-wrap: wrap;
+          flex-direction: column;
+          justify-content: space-between;
+          align-content: space-between;
+          .article-item-right {
+            position: relative;
+            width: 170px;
+            height: 170px;
+            // margin-right: 6px;
+            &:nth-child(2n) {
+              margin-right: 0;
+            }
+            img {
+              height: 100%;
+              width: 100%;
+              border-radius: 8px;
+              object-fit: cover;
+            }
+            p {
+              padding: 0 30px 0 17px;
+              position: absolute;
+              bottom: 12px;
+              line-height: 22px;
+              font-size: 16px;
+              font-family: PingFangSC-Medium,PingFang SC;
+              font-weight: 500;
+              color:#ffffff;
+              overflow:hidden; 
+              text-overflow:ellipsis;
+              display:-webkit-box; 
+              -webkit-box-orient:vertical;
+              -webkit-line-clamp:2; 
+            }
+          }
+        }
+      }
+    }
+    .article-content-bottom {
+      margin-top: 38px;
+      .article-content-bottom-info {
+        display: flex;
+        .article-content-bottom-left {
+          width: 400px;
+          height: 270px;
+          border-radius: 8px;
+          margin-right: 55px;
+          img {
+            height: 100%;
+            width: 100%;
+            border-radius: 8px;
+            object-fit: cover;
+          }
+        }
+        .article-content-bottom-right {
+          flex: 1;
+          .title {
+            color: #3A4239;
+            font-size: 26px;
+            margin-top: 12px;
+            font-family: PingFangSC-Medium,PingFang SC;
+            font-weight: 500;
+            overflow:hidden; 
+            text-overflow:ellipsis;
+            display:-webkit-box; 
+            -webkit-box-orient:vertical;
+            -webkit-line-clamp:2; 
+          }
+          .desc {
+            font-size: 24px;
+            margin-top: 30px;
+            color: #7D7D7E;
+            font-family:PingFangSC-Regular,PingFang SC;
+            font-weight:400;
+            line-height: 33px;
+            overflow: hidden; 
+            text-overflow: ellipsis;
+            display:-webkit-box; 
+            -webkit-box-orient:vertical;
+            -webkit-line-clamp:2; 
+          }
+          .time {
+            font-size: 24px;
+            color: #9BA09A;
+            margin-top: 86px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// index-expert
+.index-expert {
+  // width: 100%;
+  // height: 1072px;
+  padding: 180px 0 164px;
+  background: url('~assets/images/index/expert_bg.png') no-repeat;
+  #certify {
+    position: relative;
+    width: 1200px;
+    margin: 0 auto;
+  }
+  .e-content-box {
+    margin-top: 46px;
+  }
+  .swiper-container {
+    .swiper-wrapper {
+      width: 100%;
+      text-align: center;
+      .swiper-slide {
+        width: 630px !important;
+        height: 396px;
+        background: none;
+        transition: 300ms;
+        &.swiper-slide-prev {
+          transform: translateX(315px) scale(0.833333);
+          z-index: 989;
+        }
+        &.swiper-slide-next {
+          transform: translateX(-315px) scale(0.833333);
+          z-index: 989;
+        }
+        &.swiper-slide-active,.swiper-slide-duplicate-active{
+          transform: scale(1);
+          z-index: 999;
+        }
+        img {
+          width: 630px;
+          height: 396px;
+        }
+      }
+    }
+  }
+}
+
 </style>

static/common/common.css

@@ -48,7 +48,7 @@ a:hover {
 }
 
 .w1200 {
-  width: 1200px;
+  max-width: 1200px;
   margin: 0 auto;
 }