关于我们页面样式修改

pages/introduction/index.vue

@@ -3,19 +3,21 @@
     <!-- 关于我们banner栏 -->
     <div class="client-banner-box guanyu">
       <div
-        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.jpg`)})`}"
         class="client-platform-banner"></div>
     </div>
 
     <!-- 公司简介 -->
-    <div class="company-profile-box client-container">
-      <div class="my-img mta-hidden-xs">
-        <i></i>
-      </div>
-      <div class="text-content">
-          <h4>公司介绍</h4>
-          <p>大连青谷软件有限公司成立于2013年10月。公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、智能化学系管理模式，让学系变得更轻松。</p>
-          <p>目前，青谷软件70%的员工拥有技术背景，这样可以保障我们在项目实施的各个环节（特别是售后服务），能第一时间为客户提供技术支持，让客户无后顾之忧。</p>
+    <div class="company-profile-box">
+      <div class=" client-container">
+        <div class="my-img mta-hidden-xs">
+          <i></i>
+        </div>
+        <div class="text-content">
+            <h4>公司介绍</h4>
+            <p>大连青谷软件有限公司成立于2013年10月。公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、智能化学系管理模式，让学系变得更轻松。</p>
+            <p>目前，青谷软件70%的员工拥有技术背景，这样可以保障我们在项目实施的各个环节（特别是售后服务），能第一时间为客户提供技术支持，让客户无后顾之忧。</p>
+        </div>
       </div>
     </div>
 
@@ -57,12 +59,12 @@
       <ul>
         <div :class="{next: nextList, prev: prevList}">
           <li v-for="(img,index) in imgList" :key="index">
-            <img :src="img.url" alt="证书">
+            <div><img :src="img.url" alt="证书"></div>
           </li>
         </div>
-        <i class="img-btn-prev img-btn" @click="onPrev"></i>
-        <i class="img-btn-next img-btn" @click="onNext"></i>
       </ul>
+      <i class="img-btn-prev img-btn" @click="onPrev"></i>
+      <i class="img-btn-next img-btn" @click="onNext"></i>
     </div>
     <div class="corporate-culture-box-h5 client-container mta-hidden-sm">
       <h4>我们始终专注教育系统研发</h4>
@@ -84,6 +86,7 @@
           <p>联系电话：400-052-2130</p>
           <p>公司邮箱：service@llisoft.com</p>
           <p>公司地址：大连市沙河口区数码路北段25号201室</p>
+          <i></i>
         </div>
       </div>
     </div>
@@ -183,6 +186,9 @@
   margin-top: 250px;
   display: flex;
   justify-content: flex-start;
+  background: #fafafa;
+  height: 450px;
+  position: relative;
   .my-img {
     width: 416px;
     height: 560px;
@@ -191,6 +197,8 @@
     background-position: center;
     background-image: url("~static/gangweiIcon/z120.png");
     flex-shrink: 0;
+    position: absolute;
+    top: -55px;
 
     i {
       display: inline-block;
@@ -201,13 +209,16 @@
     }
   }
   .text-content {
-    margin-left: 150px;
+    margin: 55px 0;
+    position: absolute;
+    top: -55px;
+    left:700px;
     h4 {
       font-size: 30px;
       text-align: left;
       font-weight: 800;
       color: #333;
-      margin-top: 180px;
+      margin-top: 90px;
       position: relative;
 
 
@@ -256,6 +267,8 @@
         width: 100%;
         height: 242px;
         box-sizing: border-box;
+        background-size: contain;
+        background-position: center;
 
         i {
           width: 100px;
@@ -323,7 +336,7 @@
     text-align: center;
     font-weight: 800;
     color: #333;
-    margin-top: 180px;
+    margin-top: 258px;
     margin-bottom: 150px;
   }
 
@@ -336,6 +349,7 @@
       box-sizing: border-box;
       transition: all 0.5s ease;
 
+
       &.next {
         transform: translate(-100%);
       }
@@ -344,39 +358,47 @@
       }
     }
     li {
-      padding: 20px;
       width: 25%;
       margin: 0 auto;
       text-align: center;
       flex-shrink: 0;
       box-sizing: border-box;
-
+      >div{
+        border: 2px solid #00B96B;
+        border-radius: 6px;
+        padding: 28px 43px;
+        margin: 0 12px;
+        box-sizing: border-box;
+      }
       img {
-        width: 221px;
-        height: 298px;
+        max-width: 100%;
       }
     }
-    .img-btn {
-      display: inline-block;
-      width: 33px;
-      height: 33px;
-      cursor: pointer;
-      background-size: contain;
-      background-position: center;
-      background-repeat: no-repeat;
-    }
-    .img-btn-prev {
-      position: absolute;
-      left: 0px;
-      top: 150px;
-      background-image: url('~static/gangweiIcon/z129.png');
-    }
-    .img-btn-next {
-      position: absolute;
-      right: 0px;
-      top: 150px;
-      background-image: url('~static/gangweiIcon/z130.png');
-    }
+  }
+  .img-btn {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+  .img-btn-prev {
+    position: absolute;
+    left: -115px;
+    top: 62%;
+    background-image: url('~static/gangweiIcon/z129.png');
+    background-size: contain;
+    background-position: center;
+  }
+  .img-btn-next {
+    position: absolute;
+    right: -115px;
+    top: 62%;
+    background-image: url('~static/gangweiIcon/z130.png');
+    background-size: contain;
+    background-position: center;
   }
 }
 
@@ -410,8 +432,11 @@
 
 .contact-us-box {
   width: 100%;
-  height: 500px;
+  height: 498px;
   background-image: url("~static/gangweiIcon/z132.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
   margin-bottom: 260px;
   position: relative;
 
@@ -419,8 +444,8 @@
     position: absolute;
     top: 246px;
     left: 50%;
-    width: 880px;
-    height: 332px;
+    width: 1260px;
+    height: 346px;
     transform: translate(-50%);
     display: flex;
 
@@ -430,11 +455,11 @@
     }
 
     .img-right {
-      background: #00b96b;
+      background: linear-gradient(0deg,#67cf8a 0%, #8ec754 100%);
       flex-shrink: 0;
-      width: 346px;
+      width: 400px;
       height: 100%;
-      padding: 20px;
+      padding: 83px 43px 70px;
       box-sizing: border-box;
 
       h3 {
@@ -445,12 +470,12 @@
       }
 
       p {
-        font-size: 18px;
+        font-size: 14px;
         font-weight: 400;
         color: #fff;
-        margin-bottom: 14px;
-        line-height: 33px;
+        margin-bottom: 20px;
       }
+      i{width: 68px;height: 3px;display:block;background: #f7f8fc;}
 
     }
   }
@@ -482,9 +507,9 @@
 }
 
 .client-banner-box.guanyu {
-  height: 320px;
+  height: 510px;
   .client-platform-banner {
-    height: 320px;
+    height: 510px;
   }
 }
 
@@ -535,6 +560,8 @@
           width: 100%;
           height: 120px;
           box-sizing: border-box;
+          background-size: contain;
+          background-position: center;
 
           p {
             width: 100%;