'创始人'

pages/index.vue

@@ -2,6 +2,33 @@
   <div class="container">
     <!-- banner -->
     <VBanner :bannerData="bannerData"></VBanner>
+
+    <!-- 创始人 -->
+    <div class="index-founder">
+      <div class="founder-content-box w1200">
+        <div class="founder_img">
+          <img src="~/assets/images/index/img_boss.png" alt="">
+        </div>
+        <div class="founder_content">
+          <div class="name founder-item">
+            <span class="dot"></span>
+            <p>中德智慧创始人</p>
+          </div>
+          <p class="title founder-item">培养优质思维模式，建构思维“芯”</p>
+          <p class="desc founder-item">全球优质儿童逻辑思维教育专家以国际教育理念为指导，推动中国学前教育事业发展成为中国学前儿童思维教育领域奠基者和创领者之- -率先领导和实践幼儿园思维游戏化教学，用全球同频使用的优质思维教育内容，为0-12岁儿童培养优质思维模式，建构思维“芯”。是国际化科技教育内容的创始者，以“让中国孩子幸福成长”为使命，始终以‘走出去、请进来”、“洋为中用”的全球化视野，融合中西文化，全力打造具有成长型思维模式的未来人才</p>
+          <div class="btn founder-item">
+            <nuxt-link to="/">了解中德智慧</nuxt-link>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="found-left">
+        <img src="~/assets/images/index/found_left.png" alt="" srcset="">
+      </div> -->
+      <div class="found-right">
+        <img src="~/assets/images/index/found_right.png" alt="" srcset="">
+      </div>
+    </div>
+
     <!-- 思维“芯”产品 -->
     <div class="index-thinking">
       <div class="i-t-content">
@@ -58,6 +85,7 @@
         <div class="more-btn">更多产品</div>
       </div>
     </div>
+
     <!-- 网校课程 -->
     <div class="index-course">
       <div class="i-c-content">
@@ -310,19 +338,19 @@
               </div>
               <div class="skill-item skill-item-02">
                 <img src="~/assets/images/index/icon_town_02.png" alt="" srcset="">
-                <p>观察能力</p>
+                <p class="big-font">观察能力</p>
               </div>
               <div class="skill-item skill-item-03">
                 <img src="~/assets/images/index/icon_town_03.png" alt="" srcset="">
-                <p>手眼协调</p>
+                <p >手眼协调</p>
               </div>
               <div class="skill-item skill-item-04">
                 <img src="~/assets/images/index/icon_town_04.png" alt="" srcset="">
-                <p>语言能力</p>
+                <p class="big-font">语言能力</p>
               </div>
               <div class="skill-item skill-item-05">
                 <img src="~/assets/images/index/icon_town_05.png" alt="" srcset="">
-                <p>想象能力</p>
+                <p class="big-font">想象能力</p>
               </div>
               <div class="skill-item skill-item-06" >
                 <img src="~/assets/images/index/icon_town_06.png" alt="" srcset="">
@@ -334,11 +362,11 @@
               </div>
               <div class="skill-item skill-item-08" >
                 <img src="~/assets/images/index/icon_town_08.png" alt="" srcset="">
-                <p>空间能力</p>
+                <p class="big-font">空间能力</p>
               </div>
               <div class="skill-item skill-item-09" >
                 <img src="~/assets/images/index/icon_town_09.png" alt="" srcset="">
-                <p>专注能力</p>
+                <p class="big-font">专注能力</p>
               </div>
               <div class="skill-item skill-item-10" >
                 <img src="~/assets/images/index/icon_town_10.png" alt="" srcset="">
@@ -417,9 +445,9 @@ export default {
     // prodListShow,
     // indexNewsListShow
   },
-//     逻辑狗官网 - 中德智慧教育
-// 关键词：逻辑狗官网、逻辑狗教材、逻辑狗课程、逻辑狗思维训练课程、儿童思维教育、0-12岁儿童
-// 描述：逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台
+  //     逻辑狗官网 - 中德智慧教育
+  // 关键词：逻辑狗官网、逻辑狗教材、逻辑狗课程、逻辑狗思维训练课程、儿童思维教育、0-12岁儿童
+  // 描述：逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台
   head() {
     return {
       title: "逻辑狗官网-中德智慧教育",
@@ -1033,6 +1061,8 @@ ul.cate-nav {
 .index-town {
   position: relative;
   height: 1370px;
+  box-sizing: border-box;
+  padding-top: 180px;
   .i-town-content {
     .title-sub {
       margin-top: 28px;
@@ -1080,22 +1110,26 @@ ul.cate-nav {
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
-      text-align: center;
+      // 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;
+          width: 100px;
+          bottom: -5px;
+          left: 50%;
           transform: translateX(-50%);
-          font-size:24px;
-          font-family:PingFangSC-Medium,PingFang SC;
-          font-weight:500;
+          font-size: 20px;
+          font-family: PingFangSC-Medium,PingFang SC;
+          font-weight: 500;
           color: #38393A;
           text-align: center;
+          &.big-font {
+            font-size: 24px;
+          }
         }
       }
       .skill-item-01 {
@@ -1106,12 +1140,129 @@ ul.cate-nav {
         left: 70px;
         top: -130px;
       }
+      .skill-item-03 { 
+        left: 450px;
+        top: -248px;
+      }
+      .skill-item-04 {
+        right: -80px;
+        top: -240px;
+      }
+      .skill-item-05 {
+        left: -232px;
+        top: 96px;
+      }
+      .skill-item-06 {
+        left: -12px;
+        top: 130px;
+      }
+      .skill-item-07 {
+        right: -50px;
+        top: -18px;
+      }
+      .skill-item-08 {
+        right: -196px;
+        top: 120px;
+      }
+      .skill-item-09 {
+        left: -184px;
+        top: 304px;
+      }
+      .skill-item-10 {
+        right: -146px;
+        top: 340px;
+      }
     }
   }
   .town_bottom_bg {
     position: absolute;
     bottom: 0;
     font-size: 0;
+    width: 100%;
+    img {
+      width: 100%;
+    }
+  }
+}
+
+// index-founder
+.index-founder {
+  position: relative;
+  padding: 176px 0 118px;
+  background-image: url('~assets/images/index/found_left.png'),
+                    url('~assets/images/index/found_left.png');
+  background-repeat: no-repeat, no-repeat;
+  background-position: 0px 158px, 260px 396px;
+  background-color: #F7FBFF;
+  .founder-content-box {
+    z-index: 10;
+    display: flex;
+    .founder_content {
+      margin-left: 30px;
+      padding-top: 32px;
+      .founder-item {
+        margin-bottom: 14px;
+      }
+      .name {
+        display: flex;
+        align-items: center;
+        font-size: 24px;
+        font-family: PingFangSC-Medium,PingFang SC;
+        font-weight: 500;
+        color: $theme_color_fu;
+        span {
+          display: inline-block;
+          width:12px;
+          height:12px;
+          border-radius: 50%;
+          background:linear-gradient(180deg,rgba(250,117,62,1) 0%,rgba(246,85,19,1) 100%);
+          box-shadow:0px 2px 7px 0px rgba(249,107,50,0.8);
+          margin-right: 6px;
+        }
+      }
+      .title {
+        height: 58px;
+        line-height: 58px;
+        font-size: 42px;
+        font-family: PingFangSC-Semibold,PingFang SC;
+        font-weight: 600;
+        color:#262626;
+      }
+      .desc {
+        color: #6E6F75;
+        font-size: 18px;
+        line-height:32px;
+        margin-bottom: 30px;
+      }
+      .btn {
+        width: 182px;
+        height: 46px;
+        line-height: 46px;
+        background: $theme_color_fu;
+        box-shadow: 0px 4px 11px 0px rgba(115,161,253,0.95);
+        border-radius: 24px;
+        text-align: center;
+        font-size:22px;
+        a {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+  .found-left {
+    z-index: 0;
+    font-size: 0;
+    // position: absolute;
+    left: 0;
+    top: 158px;
+    
+  }
+  .found-right {
+    font-size: 0;
+    z-index: 0;
+    position: absolute;
+    right: 0;
+    bottom: -406px;
   }
 }
 </style>

yarn.lock

@@ -1609,6 +1609,11 @@ amdefine@>=0.0.4:
   resolved "https://registry.npm.taobao.org/amdefine/download/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
   integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
 
+animate.css@latest:
+  version "4.1.0"
+  resolved "https://registry.npm.taobao.org/animate.css/download/animate.css-4.1.0.tgz#dec2aabe4babfc6f6777f9a5cccd132838729b50"
+  integrity sha1-3sKqvkur/G9nd/mlzM0TKDhym1A=
+
 ansi-align@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npm.taobao.org/ansi-align/download/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"
@@ -9104,6 +9109,13 @@ worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
+wowjs@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npm.taobao.org/wowjs/download/wowjs-1.1.3.tgz#440fc1bb4c7e896840ee47972296a2b59075acbd"
+  integrity sha1-RA/Bu0x+iWhA7keXIpaitZB1rL0=
+  dependencies:
+    animate.css latest
+
 wrap-ansi@^5.1.0:
   version "5.1.0"
   resolved "https://registry.npm.taobao.org/wrap-ansi/download/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"