'品牌'

components/common/banner.vue

@@ -47,6 +47,17 @@ export default {
     // height: 521px;
     display: block;
   }
+  h2 {
+    position: absolute;
+    top: 250px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 66px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    z-index: 10;
+  }
 }
 .content-wrap {
   margin-top: 94px;

components/common/titleContent.vue

@@ -31,7 +31,8 @@ export default {
   }
   .title-sub {
     text-align: center;
-    margin-top: 10px;
+    margin: 10px auto 0;
+    max-width: 640px;
     font-size: 16px;
     font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;

pages/about/brand.vue

@@ -1,20 +1,19 @@
 <template>
   <div class="Brand-container">
-    <div class="banner-img">
-      <img :src="bannerImg" alt="">
-      <section class="label">品牌故事</section>
-    </div>
-    <div class="company-intro">
-      <section
-        class="company-intro-label"
-      >公司简介</section>
+    <common-banner :img="bgImg" :height="718">
+      <h2>品牌故事</h2>
+    </common-banner>
+
+    <!-- <div class="company-intro">
+      <section class="company-intro-label">公司简介</section>
       <div class="company-intro-text">
         全球顶级儿童逻辑思维教育专家以国际教育理念为指导，推动中国学前教育事业发展填补了中国学前儿童思维教育领域空白率先领导和实践幼儿园思维游戏化教学，
         用全球同频使用的优质思维教育内容，为0-12岁儿童培养优质思维模式，建构思维“芯”。
         是国际化科技教育内容的创始者，以“让中国孩子幸福成长”为使命，始终以“走出去、
         请进来”、“洋为中用”的全球化视野，融合中西文化，全力打造具有成长型思维模式的未来人才。
       </div>
-    </div>
+    </div> -->
+
     <!-- 大事记 -->
     <div class="event">
       <div class="label wow animate__animated animate__fadeInDown">
@@ -138,9 +137,8 @@
 </template>
 
 <script>
-if (process.browser) {
-  var { WOW } = require("wowjs");
-}
+import CommonBanner from '@/components/common/banner';
+
 const kernelData = Object.freeze([
   {
     id: 0,
@@ -525,17 +523,13 @@ export default {
       ],
     };
   },
-  components: {},
-  mounted() {
-    if (process.browser) {
-      new WOW({
-        offset: 0,
-        live: true,
-      }).init();
-    }
+  components: {
+    CommonBanner
   },
+  mounted() {},
   data() {
     return {
+      bgImg: require('@/assets/images/contact/contact_bg.png'),
       bannerImg: require('~/assets/images/about/about_brand.png'),
       kernelData,
       currentMouserEnter: false,

pages/about/contact.vue

@@ -1,24 +1,23 @@
 <template>
   <div class="container">
-    <abount-header :title="title" :bgImage="bgImage"></abount-header>
+    <common-banner :img="bgImg" :height="718">
+      <div class="content-wrap">
+        <div class="content w1200">
+          <no-ssr>
+            <submit-form></submit-form>
+          </no-ssr>
+        </div>
+      </div>
+    </common-banner>
 
     <!-- 优质输出平台 -->
     <div class="quality">
       <div class="quality-content">
-        <div class="q-top title-content">
-          <div class="q-title title-zh wow animate__animated animate__fadeInDown">
-            <div class="title-en">QUALITY SDUCATION</div>
-            全球优质教育内容输出平台
-          </div>
-          <div class="q-content">
-            <div class="q-content-wrap w1200">
-              <div class="q-content-desc">
-                <p>全球多个国家</p>
-                <p>众多教学机构</p>
-                <p>都在使用的新一代教育方案</p>
-              </div>
-            </div>
-          </div>
+        <title-content :title="'全球优质教育内容输出平台'" :titleSub="'GIOBAL QUALITY EDUCATION CONTENT EXPORT PLATFORM'"></title-content>
+        <div class="q-content w1200">
+          <img class="main-img" src="~/assets/images/contact/quality_img.png" alt="" srcset="">
+          <img class="bt-img" src="~/assets/images/contact/quality_footer.png" alt="" srcset="">
+          <!-- <p class="desc">全球多个国家   众多教学机构   都在使用的新一代教育方案</p> -->
         </div>
       </div>
     </div>
@@ -27,37 +26,46 @@
     <div class="thinking">
       <div class="t-content w1200">
         <div class="t-top title-content">
-          <div class="t-title title-zh wow animate__animated animate__fadeInDown">
-            <div class="title-en">THINKING</div>
-            针对儿童思维开发
-          </div> 
-          <p class="title-sub">以孩子为核心</p>
+          <div class="title">针对儿童思维开发</div>
+          <div class="title-sub">以孩子为核心</div>
         </div>
         <div class="thinking-content-box">
           <div class="content-left">
-            <img src="~/assets/images/about/thinking_img.png" alt="" srcset="~/assets/images/about/thinking_img.png, ~/assets/images/about/thinking_img@2x.png">
+            <img src="~/assets/images/contact/thinking_img.png" alt="" srcset="~/assets/images/contact/thinking_img.png, ~/assets/images/contact/thinking_img@2x.png">
           </div>
           <div class="content-right">
             <div class="content-right-top">
               <div class="img-item img-item-arrow01">
-                <img src="~/assets/images/about/thinking_arrow_01.png" alt="" srcset="~/assets/images/about/thinking_arrow_01.png, ~/assets/images/about/thinking_arrow_01@2x.png">
+                <img src="~/assets/images/contact/thinking_arrow_01.png" alt="" srcset="~/assets/images/contact/thinking_arrow_01.png, ~/assets/images/contact/thinking_arrow_01@2x.png">
               </div>
               <div class="img-item img-item-icon right-top-02">
-                <img src="~/assets/images/about/thinking_icon_01.png" alt="" srcset="~/assets/images/about/thinking_icon_01.png, ~/assets/images/about/thinking_icon_01@2x.png">
+                <img src="~/assets/images/contact/thinking_icon_01.png" alt="" srcset="~/assets/images/contact/thinking_icon_01.png, ~/assets/images/contact/thinking_icon_01@2x.png">
+                <div class="span-item">
+                  <span>激发</span>
+                  <span>兴趣</span>
+                </div>
               </div>
               <div class="img-item img-item-arrow02">
-                <img src="~/assets/images/about/thinking_arrow_02.png" alt="" srcset="~/assets/images/about/thinking_arrow_02.png, ~/assets/images/about/thinking_arrow_02@2x.png">
+                <img src="~/assets/images/contact/thinking_arrow_02.png" alt="" srcset="~/assets/images/contact/thinking_arrow_02.png, ~/assets/images/contact/thinking_arrow_02@2x.png">
               </div>
             </div>
             <div class="content-right-bottom">
               <div class="img-item img-item-icon">
-                <img src="~/assets/images/about/thinking_icon_02.png" alt="" srcset="~/assets/images/about/thinking_icon_02.png, ~/assets/images/about/thinking_icon_02@2x.png">
+                <img src="~/assets/images/contact/thinking_icon_02.png" alt="" srcset="~/assets/images/contact/thinking_icon_02.png, ~/assets/images/contact/thinking_icon_02@2x.png">
+                <div class="span-item">
+                  <span>探索</span>
+                  <span>实践</span>
+                </div>
               </div>
               <div class="img-item img-item-arrow03">
-                <img src="~/assets/images/about/thinking_arrow_03.png" alt="" srcset="~/assets/images/about/thinking_arrow_03.png, ~/assets/images/about/thinking_arrow_03@2x.png">
+                <img src="~/assets/images/contact/thinking_arrow_03.png" alt="" srcset="~/assets/images/contact/thinking_arrow_03.png, ~/assets/images/contact/thinking_arrow_03@2x.png">
               </div>
               <div class="img-item img-item-icon">
-                <img src="~/assets/images/about/thinking_icon_03.png" alt="" srcset="~/assets/images/about/thinking_icon_03.png, ~/assets/images/about/thinking_icon_03@2x.png">
+                <img src="~/assets/images/contact/thinking_icon_03.png" alt="" srcset="~/assets/images/contact/thinking_icon_03.png, ~/assets/images/contact/thinking_icon_03@2x.png">
+                <div class="span-item">
+                  <span>掌握</span>
+                  <span>方法</span>
+                </div>
               </div>
             </div>
           </div>
@@ -68,21 +76,22 @@
     <!-- 逻辑狗激发学习兴趣 -->
     <div class="interest">
       <div class="i-content w1200">
-        <div class="t-top title-content">
+        <title-content :title="'逻辑狗激发学习兴趣'" :titleSub="'逻辑狗提供的智力游戏，于孩子的生活实际，让孩子在熟悉的知识环境中，锻炼自己的思维，丰富自己的知识，这对孩子的健康成长也是很有帮助的。'"></title-content>
+        <!-- <div class="t-top title-content">
           <div class="t-title title-zh wow animate__animated animate__fadeInDown">
             <div class="title-en">LEARNING INTEREST</div>
             逻辑狗激发学习兴趣
           </div> 
           <p class="title-sub">逻辑狗提供的智力游戏，于孩子的生活实际，让孩子在熟悉的知识环境中，锻炼自己的思维，丰富自己的知识，这对孩子的健康成长也是很有帮助的。</p>
-        </div>
+        </div> -->
         <div class="interest-content-box">
           <div class="interest-item">
-            <img src="~/assets/images/about/interest_01.png" alt="" srcset="~/assets/images/about/interest_01.png, ~/assets/images/about/interest_01@2x.png">
-            <div class="line"></div>
+            <img class="inter-img" src="~/assets/images/contact/interest_01.png" alt="" srcset="~/assets/images/contact/interest_01.png, ~/assets/images/contact/interest_01@2x.png">
+            <img class="btm-img" src="~/assets/images/contact/interest_btm.png" alt="" srcset="">
           </div>
           <div class="interest-item">
-            <img src="~/assets/images/about/interest_02.png" alt="" srcset="~/assets/images/about/interest_02.png, ~/assets/images/about/interest_02@2x.png">
-            <div class="line"></div>
+            <img class="inter-img" src="~/assets/images/contact/interest_02.png" alt="" srcset="~/assets/images/contact/interest_02.png, ~/assets/images/contact/interest_02@2x.png">
+            <img class="btm-img" src="~/assets/images/contact/interest_btm.png" alt="" srcset="">
           </div>
         </div>
       </div>
@@ -91,15 +100,13 @@
     <!-- 逻辑狗教育大奖 -->
     <div class="award">
       <div class="a-content">
-        <div class="a-top title-content">
-          <div class="t-title title-zh wow animate__animated animate__fadeInDown">
-            <div class="title-en">EDUCATION</div>
-            逻辑狗教育大奖
-          </div> 
+        <div class="t-top title-content">
+          <div class="title">逻辑狗教育大奖</div>
+          <div class="title-sub">THE CLITURELOGIC DOG EDUCATION AWARD'</div>
         </div>
         <div class="award-content-box">
           <div class="img">
-            <img src="~/assets/images/about/award_img.png" alt="" srcset="~/assets/images/about/award_img.png, ~/assets/images/about/award_img@2x.png">
+            <img src="~/assets/images/contact/award_img.png" alt="" srcset="~/assets/images/contact/award_img.png, ~/assets/images/contact/award_img@2x.png">
           </div>
         </div>
       </div>
@@ -108,12 +115,7 @@
     <!-- 校园风采 -->
     <div class="campus">
       <div class="c-content w1200">
-        <div class="c-top title-content"> 
-          <div class="t-title title-zh wow animate__animated animate__fadeInDown">
-            <div class="title-en">ACAMPUS</div>
-            校园风采
-          </div> 
-        </div>
+        <title-content :title="'校园风采'" :titleSub="'THE CAMPUS'"></title-content>
         <div class="campus-content-box">
           <div :class="['campus-item', item.id == currentId ? 'active' : '']" v-for="(item, index) in campusList" :key="index" @mouseenter="campusEnter(item)">
             <div class="img">
@@ -130,17 +132,14 @@
 </template>
 
 <script>
-if (process.browser) { 
-  var { WOW } = require('wowjs')
-}
-
-import AbountHeader from '~/components/about/banner';
+import CommonBanner from '@/components/common/banner';
+import SubmitForm from '@/components/common/form';
+import TitleContent from '@/components/common/titleContent';
 
 export default {
   data() {
     return {
-      title: '联系我们',
-      bgImage: require('~/assets/images/about/about_contact.png'),
+      bgImg: require('@/assets/images/contact/contact_bg.png'),
       currentId: 1,
       campusList: [
         {
@@ -189,16 +188,10 @@ export default {
     };
   },
   components: {
-    AbountHeader,
-  },
-  mounted() {
-    if (process.browser) { 
-      new WOW({
-        offset: 0,   
-        live: true
-      }).init()
-    }
+    CommonBanner,
+    SubmitForm
   },
+  mounted() {},
   methods: {
     campusEnter(item) {
       this.currentId = item.id;
@@ -237,74 +230,59 @@ export default {
 }
 
 .quality {
+  margin-top: 100px;
   background: #FFFFFF;
-  .title-en {
-    left: 50%;
-    transform: translate(-50%);
-    width: 1200px;
-    top: -30px;
-  }
-  .q-top {
-    padding: 192px 0 112px;
-  }
-  .q-title {
-  }
+  padding-bottom: 92px;
   .q-content {
-    position: relative;
-    height: 989px;
-    width: 100%;
-    background-image: url('~assets/images/about/contact_bg_01.png');
-    background-position: center;
-    background-size: cover;
-    .q-content-wrap {
-      // position: absolute;
-      position: relative;
-      height: 989px;
-      width: 100%;
-      .q-content-desc {
-        position: absolute;
-        bottom: 408px;
-        right: 10px;
-        p {
-          font-size: 28px;
-          font-family: PingFangSC-Medium, sans-serif;
-          font-weight: 500;
-          color: #333330;
-          line-height: 64px;
-        }
-      }
+    text-align: center;
+    .desc {
+      text-align: center;
+      font-size: 26px;
+      font-family: Fontquan-XinYiGuanHeiTi2.0-Regular, Fontquan-XinYiGuanHeiTi20;
+      font-weight: 400;
+      color: #333330;
+    }
+    .main-img {
+      width: 1178px;
+      height: 657px;
+      margin: 127px auto 80px;
+    }
+    .bt-img {
+      width: 564px;
+      height: 23px;
     }
   }
 }
 
 .thinking {
-  height: 1078px;
-  background: url('~assets/images/about/contact_bg_02.png') no-repeat;
+  background: url('~assets/images/contact/thinking_bg.png') no-repeat;
   background-position: center;
-  padding: 200px 0 170px;
-  .title-en {
-    left: 50%;
-    transform: translate(-50%);
-    top: -30px;
-  }
-  .title-sub {
-    margin-top: 22px;
-    text-align: center;
-    font-size: 24px;
-    font-family: PingFangSC-Regular, sans-serif;
-    font-weight: 400;
-    color: #9C9C9C;
-    line-height: 33px;
-
+  padding: 100px 0 100px;
+  background-color: #0D5CFA;
+  .title-content {
+    .title {
+      font-size: 34px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #FFFFFF;
+    }
+    .title-sub {
+      font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 22px;
+      margin-top: 43px;
+    }
   }
   .thinking-content-box {
-    margin-top: 154px;
+    margin-top: 113px;
     display: flex;
     .content-left {
       margin-right: 112px;
       font-size: 0;
       img {
-        width: 626px 426px;
+        // width: 626px 426px;
       }
     }
     .content-right {
@@ -323,8 +301,8 @@ export default {
       }
       .img-item-icon {
         img {
-          width: 176px;
-          height: 176px;
+          width: 208px;
+          height: 208px;
         }
       }
       .img-item-arrow01 {
@@ -346,11 +324,29 @@ export default {
         }
       }
     }
+    .span-item {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      span {
+        font-size: 30px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #FFFFFF;
+        line-height: 42px;
+      }
+    }
+    .img-item-icon {
+      position: relative;
+    }
   }
 }
 
 .interest {
-  padding: 188px 0 92px;
+  padding: 100px 0 100px;
   .title-en {
     left: 50%;
     transform: translate(-50%);
@@ -375,48 +371,51 @@ export default {
   .interest-content-box {
     display: flex;
     justify-content: space-between;
-    margin-top: 128px;
+    margin-top: 100px;
     .interest-item {
       position: relative;
+      text-align: center;
       font-size: 0;
-      width: 578px;
+      width: 588px;
       overflow: hidden;
       transition: 0.3s ease-out;
       &:hover {
         transform: translate3d(0,-8px,0);
-        img {
-          // transform: scale(1.2);
-        }
       }
       img {
         width: 100%;
-        transition: 0.5;
       }
-      .line {
-        position: absolute;
-        bottom: 0;
-        height: 9px;
-        background: $theme_color;
-        z-index: 66;
-        width: 100%;
+      .btm-img {
+        width: 173px;
+        height: 25px;
       }
     }
   }
 }
 
 .award {
-  padding-top: 96px;
-  height: 723px;
+  padding: 100px 0 102px;
   width: 100%;
-  background: #F7FBFF;
-  .title-en {
-    left: 50%;
-    transform: translate(-50%);
-    top: -30px;
-    width: 1200px;
+  background: url('~assets/images/contact/award_bg.png') no-repeat;
+  background-size: 100% 100%;
+  background-color: #0D5CFA;
+  .title-content {
+    .title {
+      font-size: 34px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #FFFFFF;
+    }
+    .title-sub {
+      font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 22px;
+    }
   }
   .award-content-box {
-    margin-top: 123px;
+    margin-top: 102px;
     .img {
       margin: 0 auto;
       text-align: center;
@@ -426,15 +425,9 @@ export default {
 }
 
 .campus {
-  padding: 182px 0 206px;
-  .title-en {
-    left: 50%;
-    transform: translate(-50%);
-    top: -30px;
-    width: 1200px;
-  }
+  padding: 100px 0 100px;
   .campus-content-box {
-    margin-top: 172px;
+    margin-top: 100px;
     display: flex;
     flex-wrap: wrap;
     .campus-item {