'多渠道图片'

pages/about/contact.vue

@@ -4,13 +4,20 @@
 
     <!-- 优质输出平台 -->
     <div class="quality">
-      <div class="q-title title-zh">全球优质教育内容输出平台</div>
-      <div class="q-content">
-        <div class="q-content-wrap w1200">
-          <div class="q-content-desc">
-            <p>全球多个国家</p>
-            <p>众多教学机构</p>
-            <p>都在使用的新一代教育方案</p>
+      <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 wow animate__animated animate__fadeInRight">
+                <p>全球多个国家</p>
+                <p>众多教学机构</p>
+                <p>都在使用的新一代教育方案</p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -20,14 +27,17 @@
     <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 class="t-title title-zh wow animate__animated animate__fadeInDown">
+            <div class="title-en">THINKING</div>
+            针对儿童思维开发
+          </div> 
+          <p class="title-sub animate__animated wow animate__fadeInLeft">以孩子为核心</p>
         </div>
         <div class="thinking-content-box">
-          <div class="content-left">
+          <div class="content-left wow animate__animated animate__fadeInLeft">
             <img src="~/assets/images/about/thinking_img.png" alt="" srcset="">
           </div>
-          <div class="content-right">
+          <div class="content-right wow animate__animated animate__fadeInRight">
             <div class="content-right-top">
               <div class="img-item">
                 <img src="~/assets/images/about/thinking_arrow_01.png" alt="" srcset="">
@@ -59,15 +69,18 @@
     <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 class="t-title title-zh wow animate__animated animate__fadeInDown">
+            <div class="title-en">LEARNING INTEREST</div>
+            逻辑狗激发学习兴趣
+          </div> 
+          <p class="title-sub animate__animated wow animate__fadeInLeft">逻辑狗提供的智力游戏，于孩子的生活实际，让孩子在熟悉的知识环境中，锻炼自己的思维，丰富自己的知识，这对孩子的健康成长也是很有帮助的。</p>
         </div>
         <div class="interest-content-box">
-          <div class="interest-item">
+          <div class="interest-item wow animate__animated animate__bounce">
             <img src="~/assets/images/about/interest_01.png" alt="" srcset="">
             <div class="line"></div>
           </div>
-          <div class="interest-item">
+          <div class="interest-item wow animate__animated animate__bounce">
             <img src="~/assets/images/about/interest_02.png" alt="" srcset="">
             <div class="line"></div>
           </div>
@@ -79,7 +92,15 @@
     <div class="award">
       <div class="a-content">
         <div class="a-top title-content">
-          <div class="t-title title-zh">逻辑狗教育大奖</div> 
+          <div class="t-title title-zh wow animate__animated animate__fadeInDown">
+            <div class="title-en">EDUCATION</div>
+            逻辑狗教育大奖
+          </div> 
+        </div>
+        <div class="award-content-box">
+          <div class="img animate__animated wow animate__fadeInDown">
+            <img src="~/assets/images/about/award_img.png" alt="">
+          </div>
         </div>
       </div>
     </div>
@@ -87,11 +108,14 @@
     <!-- 校园风采 -->
     <div class="campus">
       <div class="c-content w1200">
-        <div class="c-top title-content">
-          <div class="t-title title-zh">校园风采</div> 
+        <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>
         <div class="campus-content-box">
-          <div class="campus-item" v-for="(item, index) in campusList" :key="index">
+          <div class="campus-item wow animate__animated animate__swing" v-for="(item, index) in campusList" :key="index">
             <div class="img">
               <img :src="item.imgUrl" alt="" srcset="">
             </div>
@@ -106,6 +130,10 @@
 </template>
 
 <script>
+if (process.browser) { 
+  var { WOW } = require('wowjs')
+}
+
 import AbountHeader from '~/components/about/banner';
 
 export default {
@@ -140,6 +168,14 @@ export default {
   components: {
     AbountHeader,
   },
+  mounted() {
+    if (process.browser) { 
+      new WOW({
+        offset: 0,   
+        live: true
+      }).init()
+    }
+  },
   methods: {
 
   }
@@ -149,21 +185,41 @@ export default {
 <style lang="scss" scoped>
 @import "~static/common/style.sass";
 
-.title-zh {
-  height: 81px;
-  line-height: 81px;
-  font-size: 58px;
+.title-content {
+  position: relative;
+  text-align: center;
+}
+.title-en {
+  position: absolute;
+  font-size: 78px;
   font-family: PingFangSC-Semibold, PingFang SC;
   font-weight: 600;
-  color: #000000;
-  letter-spacing: 1px;
+  color:rgba(35,106,250,1);
+  opacity: 0.16;
+}
+
+.title-zh {
+  position: relative;
+  display: inline-block;
+  font-size:58px;
+  font-family:PingFangSC-Semibold,PingFang SC;
+  font-weight:600;
+  color:rgba(38,38,38,1);
   text-align: center;
 }
 
 .quality {
-  .q-title {
+  .title-en {
+    left: 50%;
+    transform: translate(-50%);
+    width: 1200px;
+    top: -40px;
+  }
+  .q-top {
     padding: 192px 0 112px;
   }
+  .q-title {
+  }
   .q-content {
     position: relative;
     height: 989px;
@@ -192,6 +248,11 @@ export default {
   height: 1078px;
   background: url('~assets/images/about/contact_bg_02.png') 100% 100% no-repeat;
   padding: 144px 0 170px;
+  .title-en {
+    left: 50%;
+    transform: translate(-50%);
+    top: -40px;
+  }
   .title-sub {
     margin-top: 22px;
     text-align: center;
@@ -226,6 +287,12 @@ export default {
 
 .interest {
   padding: 188px 0 92px;
+  .title-en {
+    left: 50%;
+    transform: translate(-50%);
+    top: -40px;
+    width: 1200px;
+  }
   .i-content {
     .title-sub {
       line-height:48px;
@@ -276,11 +343,29 @@ export default {
   padding-top: 96px;
   height: 723px;
   width: 100%;
-  background: url('~assets/images/about/award.png') 100% 100% no-repeat;
+  background: #F7FBFF;
+  .title-en {
+    left: 50%;
+    transform: translate(-50%);
+    top: -40px;
+    width: 1200px;
+  }
+  .award-content-box {
+    margin-top: 123px;
+    .img {
+      text-align: center;
+    }
+  }
 }
 
 .campus {
   padding: 182px 0 206px;
+  .title-en {
+    left: 50%;
+    transform: translate(-50%);
+    top: -40px;
+    width: 1200px;
+  }
   .campus-content-box {
     margin-top: 172px;
     display: flex;

pages/about/team.vue

@@ -5,7 +5,7 @@
     <div class="expert w1200">
       <div class="e-title title-zh">专家团队</div>
       <div class="e-content">
-        <div class="expert-item" v-for="(item, index) in expertList" :key="index">
+      <div :class="['expert-item wow animate__animated', index % 3 === 0 ? 'animate__lightSpeedInLeft' : (index + 1) % 3 === 0 ? 'animate__lightSpeedInRight' : '' ]" v-for="(item, index) in expertList" :key="index">
           <img :src="item.imgUrl" alt="">
           <div class="line"></div>
           <div class="mask">
@@ -13,7 +13,7 @@
             <div class="content">
               简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍
             </div>
-            <div class="name">多丽丝•菲舍尔夫人</div>
+            <div class="name">多丽丝</div>
             <div class="info">职称/学历/所在公司</div>
           </div>
         </div>
@@ -23,6 +23,9 @@
 </template>
 
 <script>
+if (process.browser) {
+  var {WOW} = require('wowjs')
+}
 import AbountHeader from "~/components/about/banner";
 
 export default {
@@ -49,6 +52,14 @@ export default {
       ],
     };
   },
+  mounted () {
+    if (process.browser) { 
+      new WOW({
+          offset: 0,   
+          live: true
+      }).init()
+    }
+  },
   components: {
     AbountHeader,
   },

pages/campus/index.vue

@@ -30,7 +30,7 @@
       <div class="c-content w1200">
         <div class="list-warp">
           <ul class="list">
-            <li class="campus-item" v-for="(item, index) in campusList" :key="index">
+            <li class="campus-item wow animate__animated animate__bounceIn" v-for="(item, index) in campusList" :key="index">
               <img :src="item.imgUrl" alt="">
               <div class="info">
                 <div class="area">{{ item.area }}</div>
@@ -59,6 +59,10 @@
 </template>
 
 <script>
+if (process.browser) {
+  var {WOW} = require('wowjs')
+}
+
 export default {
   data() {
     return {
@@ -102,7 +106,12 @@ export default {
 
   },
   mounted() {
-
+    if (process.browser) { 
+      new WOW({
+          offset: 0,   
+          live: true
+      }).init()
+    }
   },
   methods: {
 
@@ -111,6 +120,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 @import "~static/common/style.sass";
 
 .title-zh {

pages/index.vue

@@ -159,7 +159,7 @@
             </div>
           </div>
         </div>
-        <div class="more-btn">更多产品</div>
+        <div class="more-btn wow animate__animated animate__zoomIn">更多产品</div>
       </div>
     </div>
 
@@ -242,7 +242,7 @@
             </div>
           </div>
         </div>
-        <div class="more-btn">更多产品</div>
+        <div class="more-btn wow animate__animated animate__zoomIn">更多产品</div>
       </div>
     </div>
 
@@ -258,142 +258,143 @@
       </div>
       <div class="scenes-content-box">
         <ul class="panorama-education-list">
-          <li class="mobile-education mobile-education-1" @mouseenter="mobileEnter">
+          <li class="mobile-education mobile-education-1 wow animate__animated animate__jackInTheBox" @mouseenter="mobileEnter">
             <div class="small-education-div">
               <div class="mobile-small-img">
-                <i class="iconfont T3 EC2 iconicon_pc1"></i>
+                <img src="~/assets/images/index/teach_01_icon_nor.png" alt="" srcset="">
               </div>
-              <p class="mobile-education-title">PC独立网校</p>
-              <p class="mobile-education-sub">沉浸式学习体验</p>
-              <p class="mobile-education-sub">建立机构专属品牌官网</p>
+              <p class="mobile-education-title">逻辑狗APP</p>
+              <p class="mobile-education-sub">逻辑狗，与千万</p>
+              <p class="mobile-education-sub">逻辑狗宝贝一起成长</p>
               <div class="mobile-education-img">
-                <img src="~/assets/images/index/img_PC.png">
+                <img src="~/assets/images/index/teach_01.png">
               </div>
             </div>
             <div class="big-mobile-education">
               <div class="pc-education-top">
                 <div class="pc-small-img">
-                  <i class="iconfont iconicon_pc1"></i>
+                  <img src="~/assets/images/index/teach_01_icon_active.png" alt="" srcset="">
                 </div>
                 <div class="education-title-box">
-                  <p class="education-title">PC独立网校</p>
-                  <p class="education-sub-title">沉浸式学习体验，建立机构专属品牌官网</p>
+                  <p class="education-title">逻辑狗APP</p>
+                  <p class="education-sub-title">逻辑狗，与千万逻辑狗宝贝一起成长</p>
                 </div>
               </div>
               <div class="education-img">
-                <img src="~/assets/images/index/img_PC.png">
+                <img src="~/assets/images/index/teach_01.png">
               </div>
             </div>
           </li>
-          <li class="mobile-education mobile-education-2" @mouseenter="mobileEnter">
+          <li class="mobile-education mobile-education-2 wow animate__animated animate__jackInTheBox" @mouseenter="mobileEnter">
             <div class="small-education-div">
               <div class="mobile-small-img">
-                <i class="iconfont T3 EC2 iconicon_h"></i>
+                <img src="~/assets/images/index/teach_02_icon_nor.png" alt="" srcset="">
               </div>
-              <p class="mobile-education-title">移动H5网校</p>
-              <p class="mobile-education-sub">轻量级移动教学体验</p>
-              <p class="mobile-education-sub">让你的网校与众不同</p>
+              <p class="mobile-education-title">逻辑狗家长端APP</p>
+              <p class="mobile-education-sub">随时了解宝宝</p>
+              <p class="mobile-education-sub">的状态</p>
               <div class="mobile-education-img">
-                <img src="~/assets/images/index/img_H5.png">
+                <img src="~/assets/images/index/teach_02.png">
               </div>
             </div>
             <div class="big-mobile-education">
               <div class="pc-education-top">
                 <div class="pc-small-img">
-                  <i class="iconfont iconicon_h"></i>
+                  <img src="~/assets/images/index/teach_02_icon_active.png" alt="" srcset="">
                 </div>
                 <div class="education-title-box">
-                  <p class="education-title">移动H5网校</p>
-                  <p class="education-sub-title">轻量级移动教学体验，让你的网校与众不同</p>
+                  <p class="education-title">逻辑狗家长端APP</p>
+                  <p class="education-sub-title">随时了解宝宝的状态</p>
                 </div>
               </div>
               <div class="education-img">
-                <img src="~/assets/images/index/img_H5.png">
+                <img src="~/assets/images/index/teach_02.png">
               </div>
             </div>
           </li>
-          <li class="mobile-education mobile-education-3" @mouseenter="mobileEnter">
+          <li class="mobile-education mobile-education-3 wow animate__animated animate__jackInTheBox" @mouseenter="mobileEnter">
             <div class="small-education-div">
               <div class="mobile-small-img">
-                <i class="iconfont T3 EC2 iconicon_minprogram"></i>
+                <img src="~/assets/images/index/teach_03_icon_nor.png" alt="" srcset="">
               </div>
-              <p class="mobile-education-title">微信小程序网校</p>
-              <p class="mobile-education-sub">结合微信生态</p>
-              <p class="mobile-education-sub">即开即用易传播</p>
+              <p class="mobile-education-title">逻辑狗教师端APP</p>
+              <p class="mobile-education-sub">实现园所互通</p>
+              <p class="mobile-education-sub"></p>
               <div class="mobile-education-img">
-                <img src="~/assets/images/index/img_minprogram.png">
+                <img src="~/assets/images/index/teach_03.png">
               </div>
             </div>
             <div class="big-mobile-education">
               <div class="pc-education-top">
                 <div class="pc-small-img">
-                  <i class="iconfont iconicon_minprogram"></i>
+                  <img src="~/assets/images/index/teach_03_icon_active.png" alt="" srcset="">
                 </div>
                 <div class="education-title-box">
-                  <p class="education-title">微信小程序网校</p>
-                  <p class="education-sub-title">结合微信生态，即开即用易传播</p>
+                  <p class="education-title">逻辑狗教师端APP</p>
+                  <p class="education-sub-title">实现园所互通</p>
                 </div>
               </div>
               <div class="education-img">
-                <img src="~/assets/images/index/img_minprogram.png">
+                <img src="~/assets/images/index/teach_03.png">
               </div>
             </div>
           </li>
-          <li class="mobile-education mobile-education-4" @mouseenter="mobileEnter">
+          <li class="mobile-education mobile-education-4 wow animate__animated animate__jackInTheBox" @mouseenter="mobileEnter">
             <div class="small-education-div">
               <div class="mobile-small-img">
-                <i class="iconfont T3 EC2 iconicon_App"></i>
+                <img src="~/assets/images/index/teach_04_icon_nor.png" alt="" srcset="">
               </div>
-              <p class="mobile-education-title">专属网校APP</p>
-              <p class="mobile-education-sub">IOS、安卓双系统支持</p>
-              <p class="mobile-education-sub">把学校装进口袋</p>
+              <p class="mobile-education-title">微信H5</p>
+              <p class="mobile-education-title">逻辑狗官方商城</p>
+              <p class="mobile-education-title">逻辑狗家长训练营</p>
               <div class="mobile-education-img">
-                <img src="~/assets/images/index/img_App.png">
+                <img src="~/assets/images/index/teach_04.png">
               </div>
             </div>
             <div class="big-mobile-education">
               <div class="pc-education-top">
                 <div class="pc-small-img">
-                  <i class="iconfont iconicon_App"></i>
+                  <img src="~/assets/images/index/teach_04_icon_active.png" alt="" srcset="">
                 </div>
                 <div class="education-title-box">
-                  <p class="education-title">专属网校APP</p>
-                  <p class="education-sub-title">IOS、安卓双系统支持，把学校装进口袋</p>
+                  <p class="education-title">微信H5</p> 
+                  <p class="education-sub-title">逻辑狗官方商城</p>
+                  <p class="education-sub-title">逻辑狗家长训练营</p>
                 </div>
               </div>
               <div class="education-img">
-                <img src="~/assets/images/index/img_App.png">
+                <img src="~/assets/images/index/teach_04.png">
               </div>
             </div>
           </li>
-          <li class="mobile-education mobile-education-5" @mouseenter="mobileEnter">
+          <li class="mobile-education mobile-education-5 wow animate__animated animate__jackInTheBox" @mouseenter="mobileEnter">
             <div class="small-education-div">
               <div class="mobile-small-img">
-                <i class="iconfont T3 EC2 iconicon_Api"></i>
+                <img src="~/assets/images/index/teach_05_icon_nor.png" alt="" srcset="">
               </div>
-              <p class="mobile-education-title">API开放平台</p>
-              <p class="mobile-education-sub">联接多个渠道</p>
-              <p class="mobile-education-sub">实现数据互联互通</p>
+              <p class="mobile-education-title">微信小程序</p>
+              <p class="mobile-education-title">中德智慧网校</p>
+              <p class="mobile-education-sub"></p>
               <div class="mobile-education-img">
-                <img src="~/assets/images/index/img_API.png">
+                <img src="~/assets/images/index/teach_05.png">
               </div>
             </div>
             <div class="big-mobile-education">
               <div class="pc-education-top">
                 <div class="pc-small-img">
-                  <i class="iconfont iconicon_Api"></i>
+                  <img src="~/assets/images/index/teach_05_icon_active.png" alt="" srcset="">
                 </div>
                 <div class="education-title-box">
-                  <p class="education-title">API开放平台</p>
-                  <p class="education-sub-title">联接多个渠道，实现数据互联互通</p>
+                  <p class="education-title">微信小程序</p>
+                  <p class="education-sub-title">中德智慧网校</p>
                 </div>
               </div>
               <div class="education-img">
-                <img src="~/assets/images/index/img_API.png">
+                <img src="~/assets/images/index/teach_05.png">
               </div>
             </div>
           </li>
-          <li class="mobile-education mobile-education-6" @mouseenter="mobileEnter">
+          <!-- <li class="mobile-education mobile-education-6" @mouseenter="mobileEnter">
             <div class="small-education-div">
               <div class="mobile-small-img">
                 <i class="iconfont T3 EC2 iconicon_Component"></i>
@@ -419,7 +420,7 @@
                 <img src="~/assets/images/index/img_SDK.png">
               </div>
             </div>
-          </li>
+          </li> -->
         </ul>
       </div>
     </div>
@@ -436,8 +437,8 @@
         </div>
         <div class="town-content-box">
           <div class="town-btn-group">
-            <div class="town-btn-about">了解我们</div>
-            <div class="town-btn-join">加入我们</div>
+            <div class="town-btn-about animate__animated wow animate__fadeInLeft">了解我们</div>
+            <div class="town-btn-join animate__animated wow animate__fadeInRight">加入我们</div>
           </div>
           <div class="town-content-skill">
             <div class="town-content-img">
@@ -989,13 +990,13 @@ export default {
       // this.$router.push({ path: '/product/course'});
     },
     mobileEnter(e) {
-      "400px" != $(event.target).css("width") &&
+      "412px" != $(event.target).css("width") &&
         ($(".panorama-education-list .mobile-education").css("width", "200px"),
-        $(event.target).css("width", "400px"),
+        $(event.target).css("width", "412px"),
         $(".panorama-education-list .mobile-education")
           .find(".big-mobile-education")
           .css("display", "none"),
-        $(event.target).css("width", "400px"),
+        $(event.target).css("width", "412px"),
         $(event.target)
           .find(".big-mobile-education")
           .fadeIn("fast"));
@@ -1056,7 +1057,6 @@ export default {
   text-align: center;
 }
 
-
 .more-btn {
   margin: 50px auto 162px;
   width: 138px;
@@ -1601,22 +1601,16 @@ ul.cate-nav {
     max-width: 1200px;
     .panorama-education-list {
       margin: 0 auto;
-      height: 460px;
+      height: 468px;
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-pack: center;
       -ms-flex-pack: center;
       justify-content: center;
-      .pc-education {
-        width: 400px;
-        height: 460px;
-        background-color: #fff;
-        border: 1px solid #eee;
-      }
       .mobile-education {
         width: 160px;
-        height: 460px;
+        height: 468px;
         border: 1px solid #eee;
         border-left: none;
         background-color: #fff;
@@ -1627,21 +1621,20 @@ ul.cate-nav {
           border-left: 1px solid #eee;
         }
         .mobile-small-img {
-          width: 32px;
-          height: 32px;
+          width: 50px;
+          height: 47px;
           margin: 68px auto 26px;
           img {
-            width: 32px;
-            height: 32px;
+            width: 50px;
+            height: 47px;
           }
         }
         .mobile-education-title {
-          height: 22px;
-          font-size: 16px;
+          font-size: 14px;
+          font-family: PingFangSC-Medium, PingFang SC;
           font-weight: 500;
-          color: #333;
-          line-height: 22px;
-          margin-bottom: 8px;
+          color: #333436;
+          line-height: 24px;
         }
         .mobile-education-sub {
           font-size: 12px;
@@ -1662,8 +1655,10 @@ ul.cate-nav {
       .big-mobile-education {
         display: none;
         background: #fff;
-        width: 346px;
-        height: 460px;
+        // width: 346px;
+        // height: 460px;
+        width: 412px;
+        height: 468px;
         position: absolute;
         z-index: 3;
         opacity: 1;
@@ -1676,40 +1671,45 @@ ul.cate-nav {
           display: flex;
           margin-left: 36px;
           .pc-small-img {
-            width: 32px;
-            height: 32px;
+            width: 42px;
+            height: 34px;
             margin-top: 40px;
             img {
-              width: 32px;
-              height: 32px;
+              width: 42px;
+              height: 34px;
             }
           }
           .education-title-box {
             margin-top: 32px;
             margin-left: 20px;
             .education-title {
-              height: 22px;
-              font-size: 16px;
+              height: 24px;
+              font-size: 17px;
+              font-family: PingFangSC-Medium, PingFang SC;
               font-weight: 500;
-              color: #333;
-              line-height: 22px;
+              color: #333436;
+              line-height: 24px;
               text-align: left;
             }
             .education-sub-title {
               margin-top: 4px;
               height: 18px;
-              font-size: 12px;
-              color: #333;
               line-height: 18px;
+              font-size: 13px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #38393A;
+              text-align: left;
             }
           }
         }
         .education-img {
-          width: 306px;
+          // width: 306px;
+          width: 378px;
           height: auto;
-          margin: 56px auto 0;
+          margin: 48px auto 0;
           img {
-            width: 306px;
+            width: 378px;
             height: auto;
           }
         }
@@ -1723,18 +1723,20 @@ ul.cate-nav {
           }
         }
         .mobile-education-title {
-          height: 33px;
-          font-size: 24px;
+          height: 24px;
+          font-size: 17px;
+          font-family: PingFangSC-Medium, PingFang SC;
           font-weight: 500;
-          color: #333;
-          line-height: 33px;
+          color: #333436;
+          line-height: 24px;
           margin-bottom: 8px;
         }
         .mobile-education-sub {
-          font-size: 18px;
+          font-size: 13px;
+          font-family: PingFangSC-Regular, PingFang SC;
           font-weight: 400;
-          color: #333;
-          line-height: 27px;
+          color: #38393A;
+          line-height: 18px;
         }
         .mobile-education-img {
           width: 240px;
@@ -1746,9 +1748,6 @@ ul.cate-nav {
           }
         }
       }
-      .mobile-education-1 {
-        width: 342px;
-      }
     }
   }
 }
@@ -2099,17 +2098,17 @@ ul.cate-nav {
         background: none;
         transition: 300ms;
         &.swiper-slide-prev {
-          transform: translateX(315px) scale(0.833333);
-          z-index: 989;
+          // transform: translateX(315px) scale(0.833333);
+          // z-index: 989;
         }
         &.swiper-slide-next {
-          transform: translateX(-315px) scale(0.833333);
-          z-index: 989;
+          // transform: translateX(-315px) scale(0.833333);
+          // z-index: 989;
         }
         &.swiper-slide-active,
         .swiper-slide-duplicate-active {
-          transform: scale(1);
-          z-index: 999;
+          // transform: scale(1);
+          // z-index: 999;
         }
         img {
           width: 630px;