update

pages/introduction/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="client-aboutUs-page">
     <!-- 关于我们banner栏 -->
-      <div
-        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.jpg`)})`}"
-        class="client-platform-banner"></div>
+    <div
+      :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.jpg`)})`}"
+      class="client-platform-banner"></div>
 
     <!-- 公司简介 -->
     <div class="company-profile-box">
@@ -12,9 +12,9 @@
           <i></i>
         </div>
         <div class="text-content">
-            <h4>公司介绍</h4>
-            <p>大连青谷软件有限公司成立于2013年10月。公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、智能化学系管理模式，让学系变得更轻松。</p>
-            <p>目前，青谷软件70%的员工拥有技术背景，这样可以保障我们在项目实施的各个环节（特别是售后服务），能第一时间为客户提供技术支持，让客户无后顾之忧。</p>
+          <h4>公司介绍</h4>
+          <p>大连青谷软件有限公司成立于2013年10月。公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、智能化学系管理模式，让学系变得更轻松。</p>
+          <p>目前，青谷软件70%的员工拥有技术背景，这样可以保障我们在项目实施的各个环节（特别是售后服务），能第一时间为客户提供技术支持，让客户无后顾之忧。</p>
         </div>
       </div>
     </div>
@@ -105,79 +105,79 @@
 </template>
 
 <script>
-  import {BannerImgs} from "@/defaultConfig";
-
-  export default {
-    name:     'introduction',
-    layout:   'templateB',
-    async asyncData({$axios, store}) {
-      const arr = [
-        $axios.$post(`/home/banner/list`, {'code': BannerImgs.guanyuwomen}),
-      ];
-      const [res2] = await Promise.all(arr);
-      return {
-        bannerList: res2.data.data || [],
-      }
-    },
-    data() {
-      return {
-        imgList: [
-          {
-            url: require("~/static/gangweiIcon/z125.png")
-          },
-          {
-            url: require("~/static/gangweiIcon/z125.png")
-          },
-          {
-            url: require("~/static/gangweiIcon/z125.png")
-          },
-          {
-            url: require("~/static/gangweiIcon/z125.png")
-          },
-          {
-            url: require("~/static/gangweiIcon/z125.png")
-          },
-          {
-            url: require("~/static/gangweiIcon/z126.png")
-          },
-          {
-            url: require("~/static/gangweiIcon/z127.png")
-          },
-          {
-            url: require("~/static/gangweiIcon/z128.png")
-          },
-        ],
-        prevList: true,
-        nextList: false,
-        img2: require('~/static/codeImage/ditu.png')
-      };
+import {BannerImgs} from "@/defaultConfig";
+
+export default {
+  name: 'introduction',
+  layout: 'templateB',
+  async asyncData({$axios, store}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.guanyuwomen}),
+    ];
+    const [res2] = await Promise.all(arr);
+    return {
+      bannerList: res2.data.data || [],
+    }
+  },
+  data() {
+    return {
+      imgList: [
+        {
+          url: require("~/static/gangweiIcon/z125.png")
+        },
+        {
+          url: require("~/static/gangweiIcon/z125.png")
+        },
+        {
+          url: require("~/static/gangweiIcon/z125.png")
+        },
+        {
+          url: require("~/static/gangweiIcon/z125.png")
+        },
+        {
+          url: require("~/static/gangweiIcon/z125.png")
+        },
+        {
+          url: require("~/static/gangweiIcon/z126.png")
+        },
+        {
+          url: require("~/static/gangweiIcon/z127.png")
+        },
+        {
+          url: require("~/static/gangweiIcon/z128.png")
+        },
+      ],
+      prevList: true,
+      nextList: false,
+      img2: require('~/static/codeImage/ditu.png')
+    };
+  },
+  head() {
+    return {
+      title: '麦塔考培系统_大连栋科软件工程有限公司',
+      meta: [
+        {
+          name: 'keywords',
+          content: '麦塔考试系统,麦塔培训系统'
+        },
+        {
+          name: 'description',
+          content: '大连栋科软件工程有限公司是专业的教育软件与数字化资源服务供应商，创立于2007年，总部位于大连软件园。公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、知识化、智能化学习管理模式，让学习变得更轻松。'
+        }
+      ],
+    }
+  },
+  methods: {
+    onPrev() {
+      this.prevList = true;
+      this.nextList = false;
     },
-    head(){
-      return {
-        title: '麦塔考培系统_大连栋科软件工程有限公司',
-        meta: [
-          {
-            name: 'keywords',
-            content: '麦塔考试系统,麦塔培训系统'
-          },
-          {
-            name:'description',
-            content:'大连栋科软件工程有限公司是专业的教育软件与数字化资源服务供应商，创立于2007年，总部位于大连软件园。公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、知识化、智能化学习管理模式，让学习变得更轻松。'
-          }
-        ],
-      }
+    onNext() {
+      this.prevList = false;
+      this.nextList = true;
     },
-    methods: {
-      onPrev() {
-        this.prevList = true;
-        this.nextList = false;
-      },
-      onNext() {
-        this.prevList = false;
-        this.nextList = true;
-      },
-    }
-  };
+  }
+};
 </script>
 <style lang="scss">
 .company-profile-box {
@@ -187,7 +187,11 @@
   background: #fafafa;
   height: 450px;
   position: relative;
-  .client-container{position: relative}
+
+  .client-container {
+    position: relative
+  }
+
   .my-img {
     width: 416px;
     height: 560px;
@@ -207,11 +211,13 @@
       margin: 238px 0 0 114px;
     }
   }
+
   .text-content {
     margin: 55px 0;
     position: absolute;
     top: -55px;
-    left:560px;
+    left: 560px;
+
     h4 {
       font-size: 30px;
       text-align: left;
@@ -228,7 +234,7 @@
         bottom: -10px;
         left: 0;
         width: 100px;
-        height:3px;
+        height: 3px;
         background: #00b96b;
       }
     }
@@ -253,6 +259,7 @@
     margin-bottom: 150px;
     position: relative;
   }
+
   ul {
     display: flex;
     flex-wrap: wrap;
@@ -262,7 +269,7 @@
       padding: 20px;
       box-sizing: border-box;
 
-      >div {
+      > div {
         width: 100%;
         height: 242px;
         box-sizing: border-box;
@@ -290,32 +297,39 @@
 
       &:nth-child(1) {
 
-        >div {
+        > div {
           background-image: url("~static/gangweiIcon/z116.png");
+
           i {
             background-image: url("~static/gangweiIcon/z121.png");
           }
         }
       }
+
       &:nth-child(2) {
-        >div  {
+        > div {
           background-image: url("~static/gangweiIcon/z117.png");
+
           i {
             background-image: url("~static/gangweiIcon/z122.png");
           }
         }
       }
+
       &:nth-child(3) {
-        >div {
+        > div {
           background-image: url("~static/gangweiIcon/z118.png");
+
           i {
             background-image: url("~static/gangweiIcon/z123.png");
           }
         }
       }
+
       &:nth-child(4) {
-        >div {
+        > div {
           background-image: url("~static/gangweiIcon/z119.png");
+
           i {
             background-image: url("~static/gangweiIcon/z124.png");
           }
@@ -343,7 +357,7 @@
     position: relative;
     overflow: hidden;
 
-    >div {
+    > div {
       display: flex;
       box-sizing: border-box;
       transition: all 0.5s ease;
@@ -352,28 +366,33 @@
       &.next {
         transform: translate(-100%);
       }
+
       &.prev {
         transform: translate(0);
       }
     }
+
     li {
       width: 25%;
       margin: 0 auto;
       text-align: center;
       flex-shrink: 0;
       box-sizing: border-box;
-      >div{
+
+      > div {
         border: 2px solid #00B96B;
         border-radius: 6px;
         padding: 28px 43px;
         margin: 0 12px;
         box-sizing: border-box;
       }
+
       img {
         max-width: 100%;
       }
     }
   }
+
   .img-btn {
     display: inline-block;
     width: 32px;
@@ -383,6 +402,7 @@
     background-position: center;
     background-repeat: no-repeat;
   }
+
   .img-btn-prev {
     position: absolute;
     left: -115px;
@@ -391,6 +411,7 @@
     background-size: contain;
     background-position: center;
   }
+
   .img-btn-next {
     position: absolute;
     right: -115px;
@@ -454,7 +475,7 @@
     }
 
     .img-right {
-      background: linear-gradient(0deg,#67cf8a 0%, #8ec754 100%);
+      background: linear-gradient(0deg, #67cf8a 0%, #8ec754 100%);
       flex-shrink: 0;
       width: 400px;
       height: 100%;
@@ -474,7 +495,13 @@
         color: #fff;
         margin-bottom: 20px;
       }
-      i{width: 68px;height: 3px;display:block;background: #f7f8fc;}
+
+      i {
+        width: 68px;
+        height: 3px;
+        display: block;
+        background: #f7f8fc;
+      }
 
     }
   }
@@ -499,18 +526,19 @@
       margin-bottom: 10px;
     }
   }
+
   img {
     width: 100%;
     height: auto;
   }
 }
 
-  .client-platform-banner {
-    height: 510px;
-    background-color: #fff;
-    background-position-x: center;
-    background-repeat: no-repeat;
-  }
+.client-platform-banner {
+  height: 510px;
+  background-color: #fff;
+  background-position-x: center;
+  background-repeat: no-repeat;
+}
 
 @media (max-width: 768px) {
   .company-profile-box {
@@ -519,9 +547,9 @@
 
     .text-content {
       margin: 0;
-      left:20px;
+      left: 20px;
       top: 0;
-      right:20px;
+      right: 20px;
 
       h4 {
         margin-top: 20px;
@@ -540,6 +568,10 @@
         text-align: justify;
       }
     }
+
+    .client-container {
+      width: 1260px;
+    }
   }
 
   .brand-introduction-box {
@@ -560,7 +592,7 @@
       li {
         width: 100%;
 
-        >div {
+        > div {
           width: 100%;
           height: 120px;
           box-sizing: border-box;
@@ -583,9 +615,11 @@
   }
 
 
-    .client-platform-banner {
-      height: 150px;
-      background-size: cover;
-    }
+  .client-platform-banner {
+    height: 150px;
+    background-size: cover;
+  }
+
+
 }
 </style>