关于我们

css/about.css

@@ -27,17 +27,18 @@
 }
 .piece {
   width: 100%;
-  /* height: 8rem; */
+  background-color: white;
 }
 
 .piece_color {
   background-color: #f5f6f9ff;
+  position: relative;
 }
 
 .piece_item {
   width: 13rem;
   margin: 0 auto;
-  padding: 1rem 0 0.4rem;
+  padding: 1rem 0 0.2rem;
 }
 .area_title {
   color: #000000;
@@ -58,29 +59,29 @@
   text-indent: 2em;
   margin-bottom: 0.3rem;
 }
-.area_top{
+.area_top {
   display: flex;
 }
-.area_left{
+.area_left {
   flex: 3;
   text-align: right;
 }
-.area_num{
-  color: #2D8CF0;
+.area_num {
+  color: #2d8cf0;
   font-weight: bold;
   font-size: 0.48rem;
 }
-.area_tit{
+.area_tit {
   color: #333333;
-    font-weight: bold;
-    font-size: 0.18rem;
-    line-height: 0.6rem;
+  font-weight: bold;
+  font-size: 0.18rem;
+  line-height: 0.6rem;
 }
-.area_jia{
-  color: #2D8CF0;
-    font-weight: bold;
-    font-size: 0.36rem;
-    margin-top: -0.1rem;
+.area_jia {
+  color: #2d8cf0;
+  font-weight: bold;
+  font-size: 0.36rem;
+  margin-top: -0.1rem;
 }
 .area_com {
   color: #666666;
@@ -91,13 +92,60 @@
   flex: 3;
   text-align: left;
 }
-.area_spacing{
+.area_spacing {
   height: 2.5rem;
   display: flex;
-  flex-direction:column-reverse;
+  flex-direction: column-reverse;
 }
-.area_top img{
+.area_top img {
   width: 5rem;
   height: 5rem;
   margin: 0 1rem;
+}
+.area_approve {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+.area_bot{
+  margin-top: 0.3rem;
+}
+.ab_minsin{
+  width: 100%;
+  height: 3.2rem;
+  position: absolute;
+}
+.piece_items {
+  width: 13rem;
+  padding: 0.8rem 0 0.2rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.area_four{
+  display: flex;
+  justify-content: space-between;
+}
+.area_fs{
+  width: 2.8rem;
+  height: 3rem;
+  background-color: white;
+  color: #333333;
+  text-align: center;
+  padding: 0 0.2rem;
+  box-sizing: border-box;
+}
+.area_fs img{
+  width: 0.9rem;
+  height: 0.8rem;
+  margin: 0.1rem auto 0;
+}
+.area_fs div {
+  font-size: 0.18rem;
+  line-height: 0.4rem;
+}
+.area_fs p {
+  font-size: 0.14rem;
+  line-height: 0.24rem;
+  margin-top: 0;
 }

js/about.js

@@ -0,0 +1,21 @@
+ $(".main-timeline .timeline").click(function () {
+       var TAG = $(this).siblings().length;
+       if (TAG >= 1) {
+         var index = $(this).index()
+         $(this).addClass('fd-active-line').siblings().removeClass('fd-active-line')
+         $(this).parent().parent().siblings('.event_list').children().eq(index).show().siblings().hide()
+       }
+     })
+     var swiper = new Swiper('.swiper-container', {
+       slidesPerView: 4,
+       direction: 'vertical',
+       navigation: {
+         nextEl: '.swiper-button-next',
+         prevEl: '.swiper-button-prev',
+       },
+       on: {
+         resize: function () {
+           swiper.changeDirection(getDirection());
+         }
+       }
+     });

sections/about.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../librarys/swiper@3.4.2/swiper.min.css" />
     <link rel="stylesheet" href="../css/comm.css" />
     <link rel="stylesheet" href="../css/about.css" />
     <script src="../utils/rem.js"></script>
@@ -84,11 +85,95 @@
                 </div>
               </div>
             </div>
-            <div class="area_bot"></div>
+            <div class="area_bot">
+              <div style="text-align: center; position: relative">
+                <div class="area_approve" style="display: flex">
+                  <div class="area_num">1000</div>
+                  <div class="area_jia">+</div>
+                </div>
+                <div style="padding-top: 0.5rem" class="area_tit">客户认可</div>
+                <div class="area_com" style="margin-bottom: 0.2rem">
+                  一起见证数字安全与业务变革
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="piece_color" style="height: 8.8rem">
+        <img class="ab_minsin" src="../img/about/mission.png" />
+        <div class="piece_items">
+          <div class="area_title" style="color: white">我们努力践行的使命</div>
+          <div class="area_four">
+            <div class="area_fs">
+              <img src="../img/about/icon1.png" />
+              <div>为教育服务</div>
+              <p>技术为教育服务，教育为发展服务</p>
+            </div>
+            <div class="area_fs">
+              <img src="../img/about/icon2.png" />
+              <div>为师生服务</div>
+              <p>
+                通过大学习、深调研、抓落实，聚焦
+                痛点、前移服务、提质增效，将一件 件服务师生的具体事项落到实处
+              </p>
+            </div>
+            <div class="area_fs">
+              <img src="../img/about/icon3.png" />
+              <div>为成长助力</div>
+              <p>
+                通过大学习、深调研、抓落实，聚焦
+                痛点、前移服务、提质增效，将一件 件服务师生的具体事项落到实处
+              </p>
+            </div>
+            <div class="area_fs">
+              <img src="../img/about/icon4.png" />
+              <div>为梦想拼搏</div>
+              <p>
+                通过大学习、深调研、抓落实，聚焦
+                痛点、前移服务、提质增效，将一件 件服务师生的具体事项落到实处
+              </p>
+            </div>
+          </div>
+          <div class="area_title" style="margin: 0.5rem 0">
+            我们始终秉承的愿景
+          </div>
+          <div class="area_four">
+            <div class="area_fs" style="height: 2rem">
+              <img src="../img/about/icon5.png" />
+              <div>燃星星之火</div>
+            </div>
+            <div class="area_fs" style="height: 2rem">
+              <img src="../img/about/icon6.png" />
+              <div>呈燎原之势</div>
+            </div>
+            <div class="area_fs" style="height: 2rem">
+              <img src="../img/about/icon7.png" />
+              <div>汇涓涓细流</div>
+            </div>
+            <div class="area_fs" style="height: 2rem">
+              <img src="../img/about/icon8.png" />
+              <div>成汪洋大海</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="piece">
+        <div class="piece_item">
+          <div class="area_title">发展历程</div>
+          <div class="swiper-container">
+            <!-- 如果需要分页器 -->
+            <div class="swiper-pagination"></div>
+
+            <!-- 如果需要导航按钮 -->
+            <div class="swiper-button-prev"></div>
+            <div class="swiper-button-next"></div>
           </div>
         </div>
       </div>
-      <div class="piece"></div>
     </div>
   </body>
+  <script src="../librarys/jquery@1.12.4/jquery.min.js"></script>
+  <script src="../librarys/swiper@3.4.2/swiper.jquery.min.js"></script>
+  <script src="../js/about.js"></script>
 </html>