'联系我们'

pages/about/contact.vue

@@ -4,8 +4,101 @@
     <!-- 优质输出平台 -->
     <div class="quality">
       <div class="q-title title-zh">全球优质教育内容输出平台</div>
-      <div class="q-content w1200">
-        <div>1111</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>
+    </div>
+
+    <!-- 针对儿童思维开发 -->
+    <div class="thinking">
+      <div class="t-content w1200">
+        <div class="t-top title-content">
+          <div class="t-title title-zh">针对儿童思维开发</div> 
+          <p class="title-sub">以孩子为核心</p>
+        </div>
+        <div class="thinking-content-box">
+          <div class="content-left">
+            <img src="~/assets/images/about/thinking_img.png" alt="" srcset="">
+          </div>
+          <div class="content-right">
+            <div class="content-right-top">
+              <div class="img-item">
+                <img src="~/assets/images/about/thinking_arrow_01.png" alt="" srcset="">
+              </div>
+              <div class="img-item right-top-02">
+                <img src="~/assets/images/about/thinking_icon_01.png" alt="" srcset="">
+              </div>
+              <div class="img-item">
+                <img src="~/assets/images/about/thinking_arrow_02.png" alt="" srcset="">
+              </div>
+            </div>
+            <div class="content-right-bottom">
+              <div class="img-item">
+                <img src="~/assets/images/about/thinking_icon_02.png" alt="" srcset="">
+              </div>
+              <div class="img-item">
+                <img src="~/assets/images/about/thinking_arrow_03.png" alt="" srcset="">
+              </div>
+              <div class="img-item">
+                <img src="~/assets/images/about/thinking_icon_03.png" alt="" srcset="">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 逻辑狗激发学习兴趣 -->
+    <div class="interest">
+      <div class="i-content w1200">
+        <div class="t-top title-content">
+          <div class="t-title title-zh">逻辑狗激发学习兴趣</div> 
+          <p class="title-sub">逻辑狗提供的智力游戏，于孩子的生活实际，让孩子在熟悉的知识环境中，锻炼自己的思维，丰富自己的知识，这对孩子的健康成长也是很有帮助的。</p>
+        </div>
+        <div class="interest-content-box">
+          <div class="interest-item">
+            <img src="~/assets/images/about/interest_01.png" alt="" srcset="">
+            <div class="line"></div>
+          </div>
+          <div class="interest-item">
+            <img src="~/assets/images/about/interest_02.png" alt="" srcset="">
+            <div class="line"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 逻辑狗教育大奖 -->
+    <div class="award">
+      <div class="a-content">
+        <div class="a-top title-content">
+          <div class="t-title title-zh">逻辑狗教育大奖</div> 
+        </div>
+      </div>
+    </div>
+
+    <!-- 校园风采 -->
+    <div class="campus">
+      <div class="c-content w1200">
+        <div class="c-top title-content">
+          <div class="t-title title-zh">校园风采</div> 
+        </div>
+        <div class="campus-content-box">
+          <div class="campus-item" v-for="(item, index) in campusList" :key="index">
+            <div class="img">
+              <img :src="item.imgUrl" alt="" srcset="">
+            </div>
+            <div class="desc">
+              {{ item.title }}
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -19,6 +112,28 @@ export default {
     return {
       title: '联系我们',
       bgImage: require('~/assets/images/about/about_contact.png'),
+      campusList: [
+        {
+          imgUrl: require('~/assets/images/about/interest_02.png'),
+          title: '武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱上'
+        },
+        {
+          imgUrl: require('~/assets/images/about/interest_02.png'),
+          title: '武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱上'
+        },
+        {
+          imgUrl: require('~/assets/images/about/interest_02.png'),
+          title: '武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱上'
+        },
+        {
+          imgUrl: require('~/assets/images/about/interest_02.png'),
+          title: '武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱上'
+        },
+        {
+          imgUrl: require('~/assets/images/about/interest_02.png'),
+          title: '武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱上'
+        }
+      ]
     }
   },
   components: {
@@ -44,10 +159,164 @@ export default {
   text-align: center;
 }
 
-
 .quality {
-  background: url('~assets/images/about/contact_bg_01.png') 100% 100% no-repeat;
+  .q-title {
+    padding: 192px 0 112px;
+  }
   .q-content {
+    position: relative;
+    height: 989px;
+    width: 100%;
+    background: url('~assets/images/about/contact_bg_01.png') 100% 100% no-repeat;
+    .q-content-wrap {
+      // position: absolute;
+      position: relative;
+      height: 989px;
+      width: 100%;
+      .q-content-desc {
+        position: absolute;
+        bottom: 408px;
+        right: 0;
+        font-size: 30px;
+        font-family: PingFangSC-Medium,PingFang SC;
+        font-weight: 500;
+        color:#333330;
+        line-height: 64px;
+      }
+    }
+  }
+}
+
+.thinking {
+  height: 1078px;
+  background: url('~assets/images/about/contact_bg_02.png') 100% 100% no-repeat;
+  padding: 144px 0 170px;
+  .title-sub {
+    margin-top: 22px;
+    text-align: center;
+    font-size:28px;
+    font-family:PingFangSC-Regular,PingFang SC;
+    font-weight:400;
+    color:#38393A;
+    line-height:40px;
+  }
+  .thinking-content-box {
+    margin-top: 154px;
+    display: flex;
+    .content-left {
+      margin-right: 112px;
+    }
+    .content-right {
+      .content-right-top {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .right-top-02 {
+          margin: 0 26px 0 32px
+        }
+      }
+      .content-right-bottom {
+        display: flex;
+        align-items: flex-end;
+      }
+    }
+  }
+}
+
+.interest {
+  padding: 188px 0 92px;
+  .i-content {
+    .title-sub {
+      line-height:48px;
+      font-size: 24px;
+      font-family: PingFangSC-Regular,PingFang SC;
+      font-weight: 400;
+      color: #999999;
+      text-align: center;
+    }
+    .title-sub {
+      padding: 0 100px;
+      margin-top: 38px;
+    }
+  }
+  .interest-content-box {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 128px;
+    .interest-item {
+      position: relative;
+      font-size: 0;
+      width: 578px;
+      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%;
+      }
+    }
+  }
+}
+
+.award {
+  padding-top: 96px;
+  height: 723px;
+  width: 100%;
+  background: url('~assets/images/about/award.png') 100% 100% no-repeat;
+}
+
+.campus {
+  padding: 182px 0 206px;
+  .campus-content-box {
+    margin-top: 172px;
+    display: flex;
+    flex-wrap: wrap;
+    .campus-item {
+      max-width:360px;
+      margin: 0 38px 126px 0;
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
+      &:hover {
+        transform: scale(1.1);
+        padding: 18px 18px 32px 18px;
+        background:#ffffff;
+        border-bottom: 2px solid rgba(35,106,250,1);
+        box-shadow: 0px 4px 20px 0px #969696;
+        border-radius: 20px;
+        margin-bottom: 52px;
+        .desc {
+          transform: scale(1.0);
+        }
+      }
+      img {
+        width: 100%;
+        height: 192px;
+        object-fit: cover;
+        border-radius: 20px;
+      }
+      .desc {
+        margin-top: 30px;
+        font-size: 20px;
+        font-family: PingFangSC-Regular,PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        line-height: 28px;
+      }
+    }
   }
 }
 

pages/index.vue

@@ -159,6 +159,7 @@
         <div class="more-btn">更多产品</div>
       </div>
     </div>
+    
     <!-- 多渠道教学场景 -->
     <div class="index-scenes">
       <div class="i-s-content">