'首页逻辑狗小镇'

nuxt.config.js

@@ -38,7 +38,8 @@ export default {
       { name: 'shenma-site-verification', content: '15230d9dfb2e66bfecf2408862f2462c_1537497601' }
     ],
     link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+      { rel: 'stylesheet', href: '/common/common.css' }
     ],
     script: []
   },
@@ -47,7 +48,7 @@ export default {
   */
   css: [
     'element-ui/lib/theme-chalk/index.css',
-    '~assets/css/reset.css'
+    '~assets/css/reset.css',
   ],
   /*
   ** Plugins to load before mounting the App

pages/index.vue

@@ -288,6 +288,70 @@
         </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>
 
@@ -358,7 +422,7 @@ export default {
 // 描述：逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台
   head() {
     return {
-      title: "逻辑狗官网 - 中德智慧教育",
+      title: "逻辑狗官网-中德智慧教育",
       meta: [
         {
           name: "keywords",
@@ -964,4 +1028,90 @@ ul.cate-nav {
     }
   }
 }
+
+// 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>

static/common/common.css

@@ -6,7 +6,7 @@ html {
   width: 100%;
   height: 100%;
   font-size: 62.5%!important;
-  color: #474747;
+  /* color: #474747; */
 }
 body {
   font-family: "PingFang SC", 'Microsoft YaHei', 'Hiragino Sans GB', 'Arail';
@@ -45,4 +45,9 @@ a:focus,
 a.active,
 a:hover {
   text-decoration: none;
+}
+
+.w1200 {
+  width: 1200px;
+  margin: 0 auto;
 }