关于我们改版-许莹版

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

@@ -462,41 +462,39 @@
   .client-aboutUs-page{
 
     // banner
-    .aboutUs-banner{width: 100%;height: 400px;background-image: url("~static/images/client/aboutUs/aboutUs-banner.png");background-position-x: center;}
+    .aboutUs-banner{width: 100%;height: 305px;background-image: url("~static/images/client/aboutUs/aboutUs-banner-bg.png");
+        span{width: 1200px;overflow: hidden;display: block;margin: 0 auto;}
+        img{width: 1200px;overflow: hidden;margin: 0 auto;display: block}
+      }
 
     // 公司简介
     .company-profile-box{
-      padding-bottom: 80px;
+      padding-bottom: 48px;
       font-size: 0;
-      .company-profile-left{
-        width: 480px;
-        display: inline-block;
-        margin-right: 48px;
-        vertical-align: middle;
-        p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;text-align: justify;}
-      }
-      .company-profile-right{
-        width:432px;height:296px;display: inline-block;background: #E8ECFF;border-radius: 8px;text-align: center;vertical-align: middle;
-        img{margin-top: 12px;}
-      }
+
+      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{
-      background: #F9FAFF;
-      padding-bottom: 80px;
       .brand-introduction-content{
-        width: 806px;
-        padding: 30px 0;
-        background: #E8ECFF;
+        width: 100%;
+        padding: 42px;
+        box-sizing: border-box;
+        background: #fbfbfb;
         border-radius: 8px;
         float: right;
-        span{width: 570px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;display: inline-block;vertical-align: middle;padding-left: 60px;text-align: justify;}
-        img{
+        .brand-introduction-left{
           display: inline-block;
           vertical-align: middle;
-          margin-left: -126px;
+          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;}
+
       }
     }
 

pages/introduction/index.vue

@@ -1,27 +1,27 @@
 <template>
   <div class="client-aboutUs-page">
     <!-- 关于我们banner栏 -->
-    <div class="aboutUs-banner"></div>
+    <div class="aboutUs-banner">
+      <span><img :src="aboutUsBannerImg" alt="关于我们"></span>
+    </div>
 
     <!-- 公司简介 -->
     <div class="company-profile-box">
-      <div class="client-container-middle">
-        <h4 class="client-title mb40">公司简介</h4>
-        <div class="company-profile-left">
+      <div class="client-container">
+          <img :src="companyProfileImg" alt="公司简介">
           <p>大连栋科软件工程有限公司是专业的教育软件与数字化资源服务供应商，创立于2007年，总部位于大连软件园。</p>
-          <p>
-            公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、知识化、智能化学习管理模式，让学习变得更轻松。“共同成长、相伴一生”是栋科软件始终不渝的核心价值观。栋科软件将一如既往，持续创新、创造价值，与客户、合作伙伴共享共赢。</p>
-        </div>
-        <div class="company-profile-right"><img :src="companyProfileImg" alt="公司简介"></div>
+          <p>公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、知识化、智能化学习管理模式，让学习变得更轻松。“共同成长、相伴一生”是栋科软件始终不渝的核心价值观。栋科软件将一如既往，持续创新、创造价值，与客户、合作伙伴共享共赢。</p>
       </div>
     </div>
 
     <!-- 品牌介绍 -->
     <div class="brand-introduction-box">
-      <div class="client-container-middle fn-clear">
-        <h4 class="client-title mb40">品牌介绍</h4>
+      <div class="client-container fn-clear">
         <div class="brand-introduction-content">
-          <img :src="brandIntroductionImg" alt="品牌介绍">
+          <div class="brand-introduction-left">
+            <h4>品牌介绍</h4>
+            <img :src="brandIntroductionImg" alt="品牌介绍">
+          </div>
           <span>MTA是Master of Training  Administration的缩写，含义是培训管理专家，麦塔致力于为客户提供专业的在线教育方案，打造企业核心竞争力。麦塔品牌诞生于2009年，公司创始团队多年来一直深耕在线教育领域，积累了丰富的行业经验。研发团队集结了来自互联网、科技、教育等多个领域专家级研发工程师，率先实现了移动化、平台化、知识化、智能化的学习管理模式。麦塔肩负着“改变互联网教育未来”的使命，持续创新、创造价值，与客户和合作伙伴共享共赢。</span>
         </div>
       </div>
@@ -137,6 +137,8 @@
     },
     data() {
       return {
+        // banner 图片
+        aboutUsBannerImg:    require(`~/static/images/client/aboutUs/aboutUs-banner-img.png`),
         // 公司简介图片
         companyProfileImg:    require(`~/static/images/client/aboutUs/company-profile-img.png`),
         brandIntroductionImg: require(`~/static/images/client/aboutUs/aboutUs-logo.png`),