'首页'

pages/index.vue

@@ -82,7 +82,7 @@
           <div class="t-conent-tabs">
             <ul class="tab-list">
               <li 
-                :class="[`tab-item cp  tab-item-${index + 1}`, currentTabId == item.id ? 'active' : '']"
+                :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">
@@ -90,11 +90,13 @@
               </li>
             </ul>
           </div>
-          <div
-            v-for="(item, index) in productCate" 
-            :style="{ backgroundImage: `url('${item.imgUrl}')` }"
-            :key="index"
-            :class="['t-conent-bg', currentTabId == item.id ? 'active' : '']">
+          <div class="t-conent-box">
+            <div
+              v-for="(item, index) in productCate" 
+              :style="{ backgroundImage: `url('${item.imgUrl}')` }"
+              :key="index"
+              :class="['t-conent-bg', currentTabId == item.id ? 'active' : '']">
+            </div>
           </div>
         </div>
       </div>
@@ -124,8 +126,36 @@
       </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"
+              :style="{display: currentOMOTabIndex == index ? 'block' :  'none', backgroundImage: `url('${item.imgUrl}')` }" 
+              :key="index">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- 网校课程 -->
-    <div class="index-course">
+    <!-- <div class="index-course">
       <div class="i-c-content">
         <div class="c-top title-content wow animate__animated animate__fadeInDown">
           <div class="title-zh">
@@ -149,7 +179,6 @@
             <div class="bottom-line">
               <div class="bottom-line-img">
                 <div :style="lineCourseStyle" class="line-img-box"></div>
-                <!-- <img :style="lineCourseStyle" src="http://res.training.luojigou.vip/Fl4dXmckxC8m0Lm2-GPbl5-Cp9Rv?imageView2/0/q/50|imageslim" alt=""> -->
               </div>
             </div>
             <div class="cate-list course-cate-list">
@@ -194,7 +223,7 @@
         </div>
         <div class="more-btn wow animate__animated animate__zoomIn" @click="courseMore">更多课程</div>
       </div>
-    </div>
+    </div> -->
 
     <!-- 多渠道教学场景 -->
     <div class="index-scenes">
@@ -374,7 +403,7 @@
     </div>
 
     <!-- 逻辑狗探索小镇 -->
-    <div class="index-town">
+    <!-- <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">
@@ -446,7 +475,7 @@
       <div class="town_bottom_bg">
         <img src="~/assets/images/index/town_bottom.png" alt="" srcset="">
       </div>
-    </div>
+    </div> -->
 
     <!-- 专家名师 -->
     <div class="index-expert">
@@ -481,7 +510,7 @@
     </div>
 
     <!-- 新闻资讯 -->
-    <div class="index-article">
+    <!-- <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">
@@ -573,31 +602,31 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
 
     <!-- 企业荣誉 -->
     <div class="index-honor">
       <div class="i-honor-content w1200">
-        <div class="h-top title-content wow animate__animated animate__fadeInDown">
-          <div class="h-top title-zh">
-            <div class="title-en">HONOR</div>
-            企业荣誉
-          </div>
-        </div>
+        <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"
-          >
+            @mouseleave="startSwiper">
             <div class="swiper-wrapper">
               <div v-for="(item, index) in honorList" :key="index" class="swiper-slide">
                 <img class="honer-img" :src="item.imgUrl">
               </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>
@@ -640,6 +669,7 @@ export default {
       clickProdIndex: 0,
       clickNewsIndex: 0,
       currentTabId: 0,
+      currentOMOTabIndex: 0,
       currentCourseType: 0,
       bossImg: require('~/assets/images/home/boss_img.png'),
       eduImg: require('~/assets/images/home/edu_img.png'),
@@ -1208,14 +1238,42 @@ export default {
           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: '小程序 逻辑狗商城'
+        }
+      ],
       swiperOption: {
         // 配置说明直接看官网
         slidesPerView: "auto",
         spaceBetween: 22,
         paginationClickable: true,
         centeredSlides: true,
-        // slidesOffsetBefore: 100,
-        // slidesOffsetAfter: 100,
         autoplay: {
           delay: 3500,
           disableOnInteraction: false,
@@ -1237,8 +1295,6 @@ export default {
         slidesPerView: "auto",
         paginationClickable: true,
         spaceBetween: 30, //轮播图左右之间的间距，配合css样式中的width实现效果
-        // slidesOffsetBefore: 100,
-        // slidesOffsetAfter: 100,
         autoplay: {
           delay: 3000,
           stopOnLastSlide: false,
@@ -1252,6 +1308,10 @@ export default {
         autoplayDisableOnInteraction: false,
         notNextTick: true,
         centeredSlides: true,
+        navigation: {
+          nextEl: ".honer-swiper-button-next",
+          prevEl: ".honer-swiper-button-prev",
+        },
       },
       expertSwiperOption: {
         autoplay: {
@@ -1395,7 +1455,6 @@ export default {
     return this.$refs.swiperHonorBox.swiper;
   },
   expertSwiper() {
-    // console.log(this.$refs.swiperExpertBox.swiper);
     return this.$refs.swiperExpertBox.swiper;
   },
   methods: {
@@ -1442,12 +1501,21 @@ export default {
     tabLeave(item) {
       console.log(item);
     },
+    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
     },
@@ -1905,6 +1973,7 @@ ul.cate-nav {
   .i-t-content {
     .content-box {
       position: relative;
+      display: flex;
       width: 997px;
       margin: 85px auto 80px;
     }
@@ -1912,6 +1981,7 @@ ul.cate-nav {
       position: absolute;
       left: 0;
       bottom: 25px;
+      width: 104px;
       .tab-list {
         display: flex;
         flex-direction: column;
@@ -1930,7 +2000,7 @@ ul.cate-nav {
           color: #FFFFFF;
           margin-bottom: 8px;
           padding-left: 8px;
-          &.active {
+          &.tab-active {
             background: #0D5CFA;
             border-top: 1px solid #0D5CFA;
             border-right: 1px solid #0D5CFA;
@@ -1939,6 +2009,9 @@ ul.cate-nav {
           }
         }
       }
+    }
+    .t-conent-box {
+
     }
     .t-conent-bg {
       margin: 0 auto;
@@ -1946,13 +2019,11 @@ ul.cate-nav {
       height: 561px;
       background-repeat: no-repeat;
       background-size: cover;
-      opacity: 0;
       display: none;
-      transition: opacity 1s linear;
       &.active {
-        opacity: 100;
-        filter: alpha(opacity=100);
         display: block;
+        // animation: inOut 0.5s linear; /*动画名称*/  
+        // -webkit-animation: inOut 0.5s linear;/*针对webkit内核*/ 
         // opacity: 1;
         // transition: opacity 1s linear;
       }
@@ -2123,6 +2194,95 @@ ul.cate-nav {
   }
 }
 
+.index-omo {
+  .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;
@@ -2462,10 +2622,10 @@ 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;
+  // background-image: url("~assets/images/index/honor_bg.png");
+  // background-repeat: no-repeat;
+  // background-position: top 20px right 115px;
+  // background-color: #f7fbff;
   padding: 188px 0 162px;
   .title-en {
     left: -140px;
@@ -2475,24 +2635,51 @@ ul.cate-nav {
     max-width: 1200px;
     margin: 0 auto;
     .honer-content-box {
+      position: relative;
       padding: 0 20px;
+      margin-top: 37px;
       .honer-img {
         width: 239px;
         height: 169px;
         object-fit: cover;
       }
     }
+    .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: -22px;
+    }
+    .honer-swiper-button-next {
+      right: -22px;
+    }
   }
   .swiper-slide {
     width: 240px;
-    font-size: 0;
+    // font-size: 0;
     img {
       border-radius: 12px;
     }
   }
-  .honer-content-box {
-    margin-top: 102px;
-  }
 }
 
 // index-article
@@ -2731,4 +2918,13 @@ ul.cate-nav {
     }
   }
 }
+
+@keyframes inOut {
+  0% {
+      opacity: 0.5;
+  }
+  100% {
+      opacity: 1;
+  }
+}
 </style>

static/common/common.css

@@ -67,6 +67,11 @@ a:hover {
   background-color: #F8FBFF;
 }
 
+@font-face {
+  font-family: Archivo-Bold;
+  src: url('./Archivo-Bold.ttf');
+}
+
 @media only screen and (max-width: 1366px) {
   html{
      font-size: 13.66px;