样式修复

src/pages/about/list/index.vue

@@ -27,7 +27,7 @@
     </div>
     <div class="culture">
       <div class="inner">
-          <h6 class="i-title">企业文化</h6>
+          <h6 class="i-title wow fadeInDown">企业文化</h6>
           <p class="en">CORPORATE CULTURE</p>
           <ul class="list">
               <li class="wow fadeInDown" data-wow-delay="0.5s">
@@ -50,7 +50,7 @@
     </div>
     <div class="progress">
       <div class="inner">
-        <h6 class="i-title">发展历程</h6>
+        <h6 class="i-title wow fadeInDown">发展历程</h6>
         <p class="en">MILESTONE</p>
         <ul class="list">
           <li>
@@ -186,12 +186,12 @@ export default {
   .inner {
       position: relative;
       width: 1200px;
-      padding: 87px 0 67px;
+      padding: 107px 0 87px;
       margin: 0 auto;
   }
   .en {
       position: absolute;
-      top: 60px;
+      top: 80px;
       left: 50%;
       width: 100%;
       text-align: center;
@@ -238,7 +238,7 @@ export default {
     justify-content: center;
     flex-direction: column;
     height: 153px;
-    margin-top: -220px;
+    margin-top: -240px;
     color: #fff;
     background: url(../../../assets/img/about/about2.png) 0 0/cover no-repeat;
     .inner {
@@ -260,6 +260,7 @@ export default {
     }
     .list{
         display: flex;
+        margin: 80px 0 20px;
         li{
             width: 33.33%;
             padding: 50px 35px 74px;

src/pages/index/list/index.vue

@@ -4,15 +4,15 @@
           <el-carousel height="688px" autoplay :interval="5000">
             <el-carousel-item>
               <div class="bg banner-bg1"></div>
-              <img class="text wow fadeInLeft" src="@/assets/img/index/banner1-text.png" alt="">
+              <img class="text wow fadeInUp" data-wow-duration="2.5s" src="@/assets/img/index/banner1-text.png" alt="">
             </el-carousel-item>
             <el-carousel-item>
               <div class="bg banner-bg2"></div>
-              <img class="text wow fadeInLeft" src="@/assets/img/index/banner2-text.png" alt="">
+              <img class="text text2 wow fadeInLeft" data-wow-delay="2s" src="@/assets/img/index/banner2-text.png" alt="">
             </el-carousel-item>
             <el-carousel-item>
               <div class="bg banner-bg3"></div>
-              <img class="text wow fadeInLeft" src="@/assets/img/index/banner3-text.png" alt="">
+              <img class="text text3 wow fadeInLeft" src="@/assets/img/index/banner3-text.png" alt="">
             </el-carousel-item>
           </el-carousel>
         </div>
@@ -44,11 +44,12 @@
         </div>
         <!-- 关于我们 -->
         <div class="about" id="part1">
-            <div class="desc wow fadeInDown">
-                <h6 class="i-title wow fadeInDown">关于我们</h6>
-                <p class="en">ABOUT US</p>
-                <div class="text">深圳或然科技有限公司核心团队组建于2019年。公司致力于采用业界领先的信息化技术和过硬的软件研发能力服务于教育产业，利用我司技术优势将区块链、云计算、大数据、人工智能等行业前沿技术与教育产业进行深度融合，为客户提供功能先进、运行高效且便于使用的产业数字化综合解决方案。</div>
-            </div>
+          <div class="inner">
+            <h6 class="a-title wow fadeInDown">关于我们</h6>
+            <p class="a-en">ABOUT US</p>
+            <div class="a-gene wow fadeInLeft" data-wow-delay=".5s">成为教育产业数字化的推动者<br>成就百万教育</div>
+            <div class="text wow fadeInRight" data-wow-delay=".4s">深圳或然科技有限公司核心团队组建于2019年。公司致力于采用业界领先的信息化技术和过硬的软件研发能力服务于教育产业，利用我司技术优势将区块链、云计算、大数据、人工智能等行业前沿技术与教育产业进行深度融合，为客户提供功能先进、运行高效且便于使用的产业数字化综合解决方案。</div>
+          </div>
         </div>
         <!-- 我们的服务 -->
         <div class="service" id="part3">
@@ -59,8 +60,8 @@
                 <div class="service-pic">
                   <img src="@/assets/img/index/service.png" alt="">
                   <div class="text">
-                    <p class="s-title">为院校信息化与数字化提供一站式综合解决方案</p>
-                    <ul class="service-list">
+                    <p class="s-title wow fadeInLeft">为院校信息化与数字化提供一站式综合解决方案</p>
+                    <ul class="service-list wow fadeInRight">
                       <li>实现产业互联，数据互通</li>
                       <li>发展教育云和边缘计算，推动教育产业数字化</li>
                       <li>依托大数据，促进教育产业智能化升级</li>
@@ -92,7 +93,7 @@
             <div class="inner">
                 <h6 class="i-title wow fadeInDown">我们的产品</h6>
                 <p class="en">OUR PRODUCTS</p>
-                <div class="pics">
+                <div class="pics" style="margin-top: 110px">
                     <div class="pro-bg1">
                         <img src="@/assets/img/index/pro-bg1-1.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s">
                         <img src="@/assets/img/index/pro-bg1-2.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s">
@@ -358,7 +359,7 @@ export default {
                   show: false,
                   focus: 'item',
                   itemStyle:{
-                    color: '#fff'
+                    color: '#f9e638'
                   }
                 },
                 tooltip:{
@@ -515,25 +516,45 @@ export default {
       color: #5A6B7E;
     }
     .about {
-      padding: 130px 0 150px;
-      background: url(../../../assets/img/index/about1.png) 0 0/100% 100% no-repeat;
-      .en {
-        top: 27px;
-        color: #B6C4D9;
+      padding: 130px 0 200px;
+      background: url(../../../assets/img/index/about2.png) (bottom right)/auto no-repeat,
+                  url(../../../assets/img/index/about1.png) 0 0/cover no-repeat;
+      .inner {
+        padding: 0;
       }
-      .desc{
+      .a-title {
+        z-index: 2;
         position: relative;
-        width: 1000px;
-        padding: 50px 100px 30px;
-        margin: 0 auto;
-        text-align: center;
-        background: rgba(255,255,255,0.7);
-        border-radius: 20px;
+        font-size: 30px;
+        color: #fff;
+        &:after {
+          content: '';
+          position: absolute;
+          left: 0;
+          bottom: -10px;
+          width: 30px;
+          height: 4px;
+          background-color: #fff;
+        }
+      }
+      .a-en {
+        position: absolute;
+        top: -21px;
+        font-size: 46px;
+        color: #B6C4D9;
+        opacity: .7;
+      }
+      .a-gene {
+        margin: 50px 0 30px;
+        font-size: 34px;
+        line-height: 58px;
+        color: #fff;
       }
       .text {
-        font-size: 16px;
-        color: #202020;
+        width: 800px;
+        font-size: 18px;
         line-height: 33px;
+        color: #fff;
       }
     }
     .adv{
@@ -677,7 +698,7 @@ export default {
       background-color: #fff;
       .list{
         display: flex;
-        margin: 40px 0 80px;
+        margin: 40px 0 110px;
         li{
             width: 33.33%;
             padding: 50px 35px;
@@ -891,7 +912,7 @@ export default {
             color: #0B1D30;
         }
         .desc{
-            font-size: 14px;
+            font-size: 15px;
             color: #0B1D30;
             line-height: 28px;
         }
@@ -1019,4 +1040,19 @@ export default {
     }
   }
 }
+@media(max-width: 1730px) {
+  .wrap .banner .text {
+    left: 100px;
+  }
+}
+@media(max-width: 1470px) {
+  .wrap .banner {
+    .text2, .text3 {
+      width: 500px;
+    }
+    .text {
+      left: 50px;
+    }
+  }
+}
 </style>