update

assets/scss/cus-client/cus-client-page.scss

@@ -649,190 +649,6 @@
   }
 
   /********  describe: 关于我们 author: TX  date:2020-08-07  ********/
-  .client-aboutUs-page{
-
-    // banner
-    .aboutUs-banner{width: 100%;height: 305px;background-image: url("~static/images/client/aboutUs/aboutUs-banner-bg.png");
-        span{width: 1260px;overflow: hidden;display: block;margin: 0 auto;}
-        img{width: 1260px;overflow: hidden;margin: 0 auto;display: block}
-      }
-
-    // 公司简介
-    .company-profile-box{
-      padding: 48px 0;
-      font-size: 0;
-
-      img{margin: 48px auto;display: block;}
-      p{@include setFontStyle(-2);color: rgba(0,0,0,0.65);line-height: 40px;text-align: justify;margin: 0 60px}
-    }
-
-    // 品牌介绍
-    .brand-introduction-box{
-      .brand-introduction-content{
-        width: 100%;
-        padding: 42px;
-        box-sizing: border-box;
-        background: #fbfbfb;
-        border-radius: 8px;
-        float: right;
-        .brand-introduction-left{
-          display: inline-block;
-          vertical-align: middle;
-          padding-right: 42px;
-          border-right: 1px solid #ddd;
-          h4{@include setFontStyle(6);color: rgba(0,0,0,0.75);margin-bottom: 36px}
-          img{margin-bottom: 36px;}
-        }
-        span{width: 740px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 40px;display: inline-block;vertical-align: middle;padding-left: 42px;text-align: justify;}
-
-      }
-    }
-
-    // 企业文化
-    .corporate-culture-box{
-      padding-bottom: 80px;
-      li{
-        width:25%;
-        display: inline-block;
-        vertical-align: middle;
-        div{
-          margin-right: 16px;
-          margin-bottom: 16px;
-          padding: 40px 0;
-          border: 6px solid #f7f7f7;
-          text-align: center;
-          i{width: 70px;height: 70px;display:inline-block;margin-bottom: 16px;}
-          h5{@include setFontStyle(0);color: rgba(0,0,0,0.85);margin-bottom: 16px;}
-          p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;}
-        }
-      }
-      li:nth-child(1){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon1.png");} }
-      li:nth-child(2){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon2.png");} }
-      li:nth-child(3){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon3.png");} }
-      li:nth-child(4){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon4.png");} }
-      li:last-child{
-        div{margin-right: 0;}
-      }
-    }
-
-    // 企业发展历程
-    .enterprise-development-box{
-      // 覆盖饿了么tab样式
-      .enterprise-development-tab{
-        .el-tabs__nav-wrap::after,.el-tabs__active-bar{display: none;}
-        .el-tabs__header{
-          margin: 0;
-          .el-tabs__nav{width: 100%;padding-bottom: 20px;border-bottom: 1px dotted #6c9ce1;}
-          .el-tabs__nav-wrap,.el-tabs__nav-scroll{overflow: visible}
-        }
-        .el-tabs__item{width: 170px;height: 45px;line-height:45px;border: 1px solid #3e7ee7;background: #fff;padding: 0;text-align: center;border-radius: 4px;margin-right: 24px;position: relative;}
-        .el-tabs__item.is-active{background: #3e7ee7;color: #fff}
-        .el-tabs__item:after{width: 14px;height: 14px;content: "";display: inline-block;border-radius: 50%;background: #888;position: absolute;bottom: -28px;left: 50%;margin-left: -7px;}
-        .el-tabs__item.is-active:after{background: #3e7ee7;}
-        .el-tabs__content{overflow: visible}
-      }
-
-      // 企业发展历程内容部分
-      li{
-        width: 25%;display: inline-block;padding: 36px 24px 60px;background:#fbfbfb;box-sizing: border-box;min-height: 196px;vertical-align: top;
-        div{width: 250px;border-bottom: 1px solid #eee;}
-        img{margin-bottom: 14px;}
-        i{min-width:34px;display:inline-block;color: #3e7ee7;font-style: normal;margin-right: 10px;}
-        p{@include setFontStyle(-4);color: rgba(0,0,0,.65);margin-top: 14px;}
-      }
-    }
-
-    // 联系我们
-    .contact-us-box{
-      padding: 80px 0;
-      border-top: 1px solid #ddd;
-      .contact-container-box{
-        width: 460px;
-        padding: 0 40px;
-        box-sizing: border-box;
-        color: rgba(0,0,0,0.85);
-        float: left;
-        h4{@include setFontStyle(10);color: #3e7ee7;margin-bottom: 60px;margin-top: 20px;}
-        h5{@include setFontStyle(0);color: #333;margin-bottom: 32px;}
-        li{
-          margin-bottom: 24px;
-          i{width: 22px;height: 24px;display: inline-block;background-repeat: no-repeat;background-position: center;background-size: cover;margin-right: 16px;vertical-align: middle;}
-          span{@include setFontStyle(-4);color: rgba(0,0,0,0.64);vertical-align: middle;}
-        }
-        li:nth-child(3) {
-          i {background-image: url("~static/images/client/aboutUs/contact-us-icon1.png");}
-        }
-        li:nth-child(4) {
-          i {background-image: url("~static/images/client/aboutUs/contact-us-icon3.png");}
-        }
-        li:nth-child(5) {
-          i {background-image: url("~static/images/client/aboutUs/contact-us-icon4.png");}
-        }
-        li:nth-child(6) {
-          //i {background-image: url("~static/images/client/aboutUs/contact-us-icon4.png");}
-        }
-      }
-      img{float: right}
-    }
-    @media (max-width: 768px){
-      // banner
-      .aboutUs-banner{
-        height: 150px;
-        span{width: 100%;}
-        img{width: auto;height: 150px;}
-      }
-      // 公司简介
-      .company-profile-box{
-        img{margin: 20px auto;max-width: 100%;}
-        p{@include setFontStyle(-6);color: rgba(85, 85, 85, 1);line-height: 24px;margin: 0 10px 6px;}
-      }
-
-      // 品牌介绍
-      .brand-introduction-box{
-        background-color: rgb(238, 238, 238);
-        .brand-introduction-content{
-          background-color: transparent;padding: 24px 10px;
-          .brand-introduction-left{
-            display: block;border-right:0;padding-right:0;
-            h4{font-size: 18px;color: rgba(0, 0, 0, 1);text-align: center;margin-bottom: 20px;font-weight: 700;}
-            img{margin: 0 auto 24px;max-width: 230px;display: block;}
-          }
-          span{width: 100%;display: block;padding-left: 0;font-size: 14px;color: rgba(85, 85, 85, 1);line-height: 24px;}
-        }
-      }
-
-      // 企业文化
-      .corporate-culture-box{
-        padding: 50px 0 0;
-        li{
-          width:100%;
-          div{
-            height: 70px;margin: 0 10px 16px;border: 0;box-shadow: rgb(206, 206, 206) 0 0 6px -1px;padding: 14px 0;
-            i{display: unset;float: left;margin-left: 30px;margin-bottom: 0;}
-            h5{font-weight: 700;font-size: 16px;color: #101010;margin: 12px 0;}
-            p{font-size: 14px;color: #101010;}
-          }
-        }
-      }
-
-      // 联系我们
-      .contact-us-box{
-        padding: 54px 10px 0;border: 0;line-height: 1;font-size: 0;
-        .contact-container-box{
-          width: 100%;
-          padding: 0;
-          color: rgba(0,0,0,0.85);
-          float: unset;
-          h4{@include setFontStyle(-2);font-weight: 700;color: rgba(0, 0, 0, 1);margin-bottom: 24px;margin-top:0;text-align: center;}
-          h5{@include setFontStyle(-4);font-weight: 700;color: rgba(0, 0, 0, 1);margin-bottom: 24px;}
-          li{
-            span{color: rgba(0,0,0,0.54);}
-          }
-        }
-        img{float: unset;width: calc(100% + 50px);margin: 0 -25px;}
-      }
-    }
-  }
 
   /********  describe: 新闻资讯  author: TX  date:2020-08-10  ********/
   .client-newsInfor-page{

pages/introduction/index.vue

@@ -1,20 +1,18 @@
 <template>
   <div class="client-aboutUs-page">
     <!-- 关于我们banner栏 -->
-    <div class="aboutUs-banner">
+    <div class="client-banner-box">
       <div
         :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
         class="client-platform-banner"></div>
-      <div>
-        <h4>关于青谷软件</h4>
-        <p>移动化、平台化、知识化、智能化</p>
-      </div>
     </div>
 
     <!-- 公司简介 -->
-    <div class="company-profile-box">
-      <img src="#" alt="">
-      <div class="client-container">
+    <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>
@@ -22,47 +20,82 @@
     </div>
 
     <!-- 我们提供什么 -->
-    <div class="brand-introduction-box">
+    <div class="brand-introduction-box client-container">
       <h4>我们提供什么</h4>
       <ul>
         <li>
-          <i></i>
-          <span>在线考试系统租赁/采购</span>
+          <div>
+            <i class="mta-hidden-xs"></i>
+            <p>在线考试系统租赁/采购</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <span>在线培训系统租赁/采购</span>
+          <div>
+            <i class="mta-hidden-xs"></i>
+            <p>在线考试系统租赁/采购</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <span>课件定制开发服务</span>
+          <div>
+            <i class="mta-hidden-xs"></i>
+            <p>课件定制开发服务</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <span>行业通用类课程资源</span>
+          <div>
+            <i class="mta-hidden-xs"></i>
+            <p>行业通用类课程资源</p>
+          </div>
         </li>
       </ul>
     </div>
 
 
     <!-- 我么你始终专注教育系统研发，更懂用户需求 -->
-    <div class="corporate-culture-box">
+    <div class="corporate-culture-box client-container mta-hidden-xs">
       <h4>我们始终专注教育系统研发</h4>
       <ul>
-        <li><img src="#" alt=""></li>
-        <li><img src="#" alt=""></li>
-        <li><img src="#" alt=""></li>
-        <li><img src="#" alt=""></li>
+        <div :class="{next: nextList, prev: prevList}">
+          <li v-for="(img,index) in imgList" :key="index">
+            <img :src="img.url" alt="证书">
+          </li>
+        </div>
+        <i class="img-btn-prev img-btn" @click="onPrev"></i>
+        <i class="img-btn-next img-btn" @click="onNext"></i>
       </ul>
     </div>
+    <div class="corporate-culture-box-h5 client-container mta-hidden-sm">
+      <h4>我们始终专注教育系统研发</h4>
+      <ul>
+        <li v-for="(img,index) in imgList" :key="index">
+          <img :src="img.url" alt="证书">
+        </li>
 
+      </ul>
+    </div>
 
     <!-- 地图 -->
-    <div class="client-container">
-      <div class="contact-us-box fn-clear">
-        <img src="#" alt="背景图">
-        <img src="#" alt="地图" />
+    <div class="contact-us-box mta-hidden-xs">
+      <div class="my-map">
+        <img :src="img2" alt="地图">
+        <div class="img-right">
+          <h3>联系我们</h3>
+          <p>资讯QQ：956600477/3375245762</p>
+          <p>联系电话：400-052-2130</p>
+          <p>公司邮箱：service@llisoft.com</p>
+          <p>公司地址：大连市沙河口区数码路北段25号201室</p>
+        </div>
+      </div>
+    </div>
+    <div class="contact-us-box-h5 client-container mta-hidden-sm">
+      <div class="img-right-h5">
+        <h3>联系我们</h3>
+        <p>资讯QQ：956600477/3375245762</p>
+        <p>联系电话：400-052-2130</p>
+        <p>公司邮箱：service@llisoft.com</p>
+        <p>公司地址：大连市沙河口区数码路北段25号201室</p>
       </div>
+      <img :src="img2" alt="地图">
     </div>
 
   </div>
@@ -86,7 +119,36 @@
       }
     },
     data() {
-      return {};
+      return {
+        imgList: [
+          {
+            url: require("~/static/gangweiIcon/z125.png")
+          },
+          {
+            url: require("~/static/gangweiIcon/z126.png")
+          },
+          {
+            url: require("~/static/gangweiIcon/z127.png")
+          },
+          {
+            url: require("~/static/gangweiIcon/z128.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,
+      };
     },
     head(){
       return {
@@ -103,17 +165,379 @@
         ],
       }
     },
-    computed: {},
-    methods:  {},
-    created() {
-
-    },
-    mounted() {
-    },
-    beforeDestroy() {
-    },
+    methods: {
+      onPrev() {
+        this.prevList = true;
+        this.nextList = false;
+      },
+      onNext() {
+        this.prevList = false;
+        this.nextList = true;
+      },
+    }
   };
 </script>
-<style>
+<style lang="scss">
+.company-profile-box {
+  margin-top: 250px;
+  display: flex;
+  justify-content: space-between;
+  .my-img {
+    width: 416px;
+    height: 560px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url("~static/gangweiIcon/z120.png");
+    flex-shrink: 0;
+
+    i {
+      display: inline-block;
+      width: 188px;
+      height: 86px;
+      background-image: url("~static/gangweiIcon/z131.png");
+      margin: 238px 0 0 114px;
+    }
+  }
+  .text-content {
+    margin-left: 150px;
+    h4 {
+      font-size: 30px;
+      text-align: left;
+      font-weight: 800;
+      color: #333;
+      margin-top: 180px;
+      position: relative;
+
+
+      &:before {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        bottom: -10px;
+        left: 0;
+        width: 100px;
+        height:3px;
+        background: #00b96b;
+      }
+    }
+
+    p {
+      margin: 40px 0 0 0;
+    }
+  }
+}
+
+.brand-introduction-box {
+  h4 {
+    font-size: 30px;
+    text-align: center;
+    font-weight: 800;
+    color: #333;
+    margin-top: 180px;
+    margin-bottom: 150px;
+    position: relative;
+  }
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+
+    li {
+      width: 50%;
+      padding: 20px;
+      box-sizing: border-box;
+
+      >div {
+        width: 100%;
+        height: 242px;
+        box-sizing: border-box;
+
+        i {
+          width: 100px;
+          height: 100px;
+          display: inline-block;
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: contain;
+          margin: 50px 0 24px 150px;
+        }
+
+        p {
+          width: 260px;
+          margin: 0 0 0 66px;
+          font-size: 24px;
+          color: #fff;
+          font-weight: 500;
+        }
+      }
+
+      &:nth-child(1) {
+
+        >div {
+          background-image: url("~static/gangweiIcon/z116.png");
+          i {
+            background-image: url("~static/gangweiIcon/z121.png");
+          }
+        }
+      }
+      &:nth-child(2) {
+        >div  {
+          background-image: url("~static/gangweiIcon/z117.png");
+          i {
+            background-image: url("~static/gangweiIcon/z122.png");
+          }
+        }
+      }
+      &:nth-child(3) {
+        >div {
+          background-image: url("~static/gangweiIcon/z118.png");
+          i {
+            background-image: url("~static/gangweiIcon/z123.png");
+          }
+        }
+      }
+      &:nth-child(4) {
+        >div {
+          background-image: url("~static/gangweiIcon/z119.png");
+          i {
+            background-image: url("~static/gangweiIcon/z124.png");
+          }
+        }
+
+      }
+    }
+  }
+}
+
+.corporate-culture-box {
+  position: relative;
+  margin-bottom: 200px;
+
+  h4 {
+    font-size: 30px;
+    text-align: center;
+    font-weight: 800;
+    color: #333;
+    margin-top: 180px;
+    margin-bottom: 150px;
+  }
+
+  ul {
+    position: relative;
+    overflow: hidden;
+
+    >div {
+      display: flex;
+      box-sizing: border-box;
+      transition: all 0.5s ease;
+
+      &.next {
+        transform: translate(-100%);
+      }
+      &.prev {
+        transform: translate(0);
+      }
+    }
+    li {
+      padding: 20px;
+      width: 25%;
+      margin: 0 auto;
+      text-align: center;
+      flex-shrink: 0;
+      box-sizing: border-box;
+
+      img {
+        width: 221px;
+        height: 298px;
+      }
+    }
+    .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');
+    }
+  }
+}
+
+.corporate-culture-box-h5 {
+  h4 {
+    font-size: 18px;
+    text-align: center;
+    font-weight: 800;
+    color: #333;
+    margin-top: 10%;
+    margin-bottom: 10%;
+  }
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+
+    li {
+      width: 50%;
+      padding: 20px;
+      box-sizing: border-box;
+
+      img {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+
+.contact-us-box {
+  width: 100%;
+  height: 500px;
+  background-image: url("~static/gangweiIcon/z132.png");
+  margin-bottom: 260px;
+  position: relative;
+
+  .my-map {
+    background: red;
+    position: absolute;
+    top: 246px;
+    left: 330px;
+    width: 880px;
+    height: 332px;
+    display: flex;
+
+    img {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+    }
+
+    .img-right {
+      background: #00b96b;
+      width: 346px;
+      height: 100%;
+      padding: 20px;
+      box-sizing: border-box;
+
+      h3 {
+        font-size: 24px;
+        font-weight: 800;
+        color: #fff;
+        margin-bottom: 24px;
+      }
+
+      p {
+        font-size: 18px;
+        font-weight: 400;
+        color: #fff;
+        margin-bottom: 14px;
+        line-height: 33px;
+      }
+
+    }
+  }
+
+}
+
+.contact-us-box-h5 {
+  margin-top: 20px;
+  margin-bottom: 30px;
+
+  .img-right-h5 {
+    h3 {
+      font-size: 18px;
+      font-weight: 800;
+      margin-bottom: 20px;
+      text-align: center;
+    }
+
+    p {
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 10px;
+    }
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .company-profile-box {
+    margin-top: 20px;
+
+    .text-content {
+      margin: 0;
+
+      h4 {
+        margin-top: 20px;
+        text-align: center;
+        font-size: 24px;
+
+        &:before {
+          left: 50%;
+          transform: translate(-50%);
+        }
+      }
+
+      p {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .brand-introduction-box {
+    h4 {
+      font-size: 18px;
+      text-align: center;
+      font-weight: 800;
+      color: #333;
+      margin-top: 10%;
+      margin-bottom: 10%;
+    }
+
+    p {
+      font-size: 14px;
+    }
+
+    ul {
+      li {
+        width: 100%;
+
+        >div {
+          width: 100%;
+          height: 120px;
+          box-sizing: border-box;
+
+          p {
+            width: 100%;
+            line-height: 120px;
+            margin: 0;
+            font-size: 14px;
+            color: #fff;
+            font-weight: 500;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+
 
+}
 </style>