'首页商品分类'

pages/index.vue

@@ -2,6 +2,40 @@
   <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="thinking-content-box">
+          <div class="thinking-cate-box">
+            <ul class="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="thinking-cate-list">
+              <div class="thinking-product-item" v-for="(item, index) in productCate" :key="index">
+                <div class="">
+                  <img src="~/assets/images/index/tab-right-pic-dg.png" alt="" srcset="">
+                </div>
+                <div class="thinking-product-info">
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- 品牌故事 -->
     <!-- <div id="index-story">
       <div class="i-s-contant">
@@ -314,7 +348,29 @@ export default {
       experiencePlace:['包头','成都','南京','东莞'],
       num:0,
       clickProdIndex:0,
-      clickNewsIndex: 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
+        }
+      ]
     }
   },
   components: {
@@ -325,11 +381,11 @@ export default {
   },
   head() {
     return {
-      title:this.metaData.navigationTitle,
+      title:'【中德智慧官网】逻辑狗 中华小熊猫',
       meta: [
         {name:'keywords',hid: 'keywords',content:`${this.metaData.navigationKeyword}`},
         {name:'description',hid:'description',content:`${this.metaData.navigationDescription}`}
-      ]
+      ],
     }
   },
   async asyncData({params,store}){
@@ -396,20 +452,94 @@ export default {
 };
 
 </script>
-<style scoped>
+<style lang="scss" scoped>
+@import '~static/common/style.sass';
+
 .container {
   width: 100%;
   height: auto;
 }
 
-.title {
-  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
-  display: block;
-  font-weight: 300;
-  font-size: 100px;
-  color: #35495e;
-  letter-spacing: 1px;
+
+.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;
+}
+
+
+/* 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;
+      background:rgba(159,17,48,1);
+      box-shadow: 0px 2px 8px 0px rgba(240,53,94,0.61);
+    }
+    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_fu_red;
+    // border-bottom: 6px solid $theme_fu_red;
+    // box-shadow:0px 2px 8px 0px rgba(240,53,94,0.61);
+  }
 }
 
 /*index-story*/

static/common/common.css

@@ -9,7 +9,7 @@ html {
   color: #474747;
 }
 body {
-  font-family: 'Microsoft YaHei', 'Hiragino Sans GB', 'Arail';
+  font-family: "PingFang SC", 'Microsoft YaHei', 'Hiragino Sans GB', 'Arail';
   -webkit-box-sizing: border-box;
   margin: 0;
   background: #eee;