增加页面

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

@@ -585,40 +585,97 @@
       }
     }
 
+    // 企业发展历程
+    .enterprise-development-box{
+      background: #F9FAFF;
+      .development-left{
+        float: left;
+        width: 50%;
+        text-align: right;
+        padding-right: 76px;
+        padding-top: 170px;
+        box-sizing: border-box;
+        .development-content{
+          h4 div{top: -8px;right: -87px;left: auto}
+          p i{margin-left:16px;}
+        }
+      }
+      .development-right{
+        width: 50%;
+        margin-bottom: 80px;
+        float: right;
+        padding-left: 76px;
+        border-left: 1px solid #D1DFFD;
+        box-sizing: border-box;
+        .development-content{
+          h4 div{top: -8px;left: -87px;right: auto}
+          p i{margin-right:16px;}
+        }
+
+      }
+      .development-content{
+        position: relative;
+        h4{
+          @include setFontStyle(8);color: rgba(0,0,0,0.85);margin-bottom: 24px;
+          div{width: 20px;height: 34px;position: absolute;background:#F9FAFF}
+          span{
+            width: 18px;
+            height: 18px;
+            border: 1px solid #2B5CFD;
+            display: inline-block;
+            vertical-align: middle;
+            border-radius: 50%;
+            text-align: center;
+          }
+          i{
+            width: 12px;
+            height: 12px;
+            display: inline-block;
+            vertical-align: top;
+            margin-top: 3px;
+            background-image: url("~static/images/client/aboutUs/development-content-icon.svg");
+          }
+          p{display: inline-block;margin: 0;}
+        }
+        p{
+          margin-bottom: 16px;
+          i{width: 36px;height:24px;line-height:24px;display: inline-block;text-align: center;@include setFontStyle(-6);color: rgba(0,0,0,0.65);background: rgba(121,152,255,0.26);border: 1px solid #7998FF;border-radius: 4px;font-style: normal;}
+          span{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;}
+        }
+      }
+      .development-content + .development-content {
+        margin-top: 204px;
+      }
+    }
+
     // 联系我们
     .contact-us-box{
-      background: #F9FAFF;
+      height: 534px;
+      padding-top: 80px;
+      background-image: url("~static/images/client/aboutUs/contact-us-background.png");
       .contact-container-box{
+        color: rgba(255,255,255,0.85);
+        h4{@include setFontStyle(10);margin-bottom: 32px;}
         li{
-          width: 25%;
-          display: inline-block;
-          i{width: 22px;height: 24px;display: inline-block;background-repeat: no-repeat;background-position: center;background-size: cover;margin-right: 16px}
-          span{@include setFontStyle(0);color: rgba(0,0,0,0.85);}
-          p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;margin: 20px 0 32px;}
-        }
-        li:nth-child(1) {
-          i {background-image: url("~static/images/client/aboutUs/contact-us-icon1.svg");}
+          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(0);vertical-align: middle;}
+          p{@include setFontStyle(-4);color: rgba(255,255,255,0.64);line-height: 24px;margin: 20px 0 24px;}
         }
         li:nth-child(2) {
-          i {background-image: url("~static/images/client/aboutUs/contact-us-icon2.svg");}
+          i {background-image: url("~static/images/client/aboutUs/contact-us-icon1.png");}
         }
         li:nth-child(3) {
-          i {background-image: url("~static/images/client/aboutUs/contact-us-icon3.svg");}
+          i {background-image: url("~static/images/client/aboutUs/contact-us-icon2.png");}
         }
         li:nth-child(4) {
-          i {background-image: url("~static/images/client/aboutUs/contact-us-icon4.svg");}
+          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");}
         }
       }
     }
 
-    //地图
-    .address-img-box{
-      width: 100%;
-      height: 720px;
-      background-image: url("~static/images/client/aboutUs/contact-us-img.png");
-      background-position: center;
-      overflow: hidden;
-    }
   }
 
   /********  describe: 新闻资讯  author: TX  date:2020-08-10  ********/

pages/introduction/index.vue

@@ -1,6 +1,108 @@
 <template>
-  <div>
-    关于我们
+  <div class="client-aboutUs-page">
+    <!-- 关于我们banner栏 -->
+    <div class="aboutUs-banner"></div>
+
+    <!-- 公司简介 -->
+    <div class="company-profile-box">
+      <div class="client-container-middle">
+        <h4 class="client-title mb40">公司简介</h4>
+        <div class="company-profile-left">
+          <p>大连栋科软件工程有限公司是专业的教育软件与数字化资源服务供应商，创立于2007年，总部位于大连软件园。</p>
+          <p>公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、知识化、智能化学习管理模式，让学习变得更轻松。“共同成长、相伴一生”是栋科软件始终不渝的核心价值观。栋科软件将一如既往，持续创新、创造价值，与客户、合作伙伴共享共赢。</p>
+        </div>
+        <div class="company-profile-right"><img :src="companyProfileImg" alt="公司简介"></div>
+      </div>
+    </div>
+
+    <!-- 品牌介绍 -->
+    <div class="brand-introduction-box">
+      <div class="client-container-middle fn-clear">
+        <h4 class="client-title mb40">品牌介绍</h4>
+        <div class="brand-introduction-content">
+          <img :src="brandIntroductionImg" alt="品牌介绍">
+          <span>MTA是Master of Training  Administration的缩写，含义是培训管理专家，麦塔致力于为客户提供专业的在线教育方案，打造企业核心竞争力。麦塔品牌诞生于2009年，公司创始团队多年来一直深耕在线教育领域，积累了丰富的行业经验。研发团队集结了来自互联网、科技、教育等多个领域专家级研发工程师，率先实现了移动化、平台化、知识化、智能化的学习管理模式。麦塔肩负着“改变互联网教育未来”的使命，持续创新、创造价值，与客户和合作伙伴共享共赢。</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 企业文化 -->
+    <div class="corporate-culture-box">
+      <div class="client-container-middle">
+        <h4 class="client-title mb40">企业文化</h4>
+        <dl>
+          <dt><i></i><span>核心价值观</span></dt>
+          <dd>共同成长，相伴一生</dd>
+          <dt><i></i><span>企业愿景</span></dt>
+          <dd>成为一流的教育软件公司</dd>
+          <dt><i></i><span>企业使命</span></dt>
+          <dd>让学习变得更轻松</dd>
+          <dt><i></i><span>服务标准</span></dt>
+          <dd>只有客户的成功，才有我们的成功</dd>
+        </dl>
+        <img :src="corporateCultureImg" alt="企业文化">
+      </div>
+    </div>
+
+    <!-- 企业发展历程 -->
+    <div class="enterprise-development-box">
+      <h4 class="client-title mb40">企业发展历程</h4>
+      <div class="client-container fn-clear">
+        <div class="development-right">
+          <div class="development-content">
+            <h4><div><span><i></i></span></div><p>2020年</p></h4>
+            <p><i>4月</i><span>麦塔SaaS版产品发布</span></p>
+            <p><i>8月</i><span>企业用户已突破15万</span></p>
+          </div>
+          <div class="development-content">
+            <h4><div><span><i></i></span></div><p>2016年</p></h4>
+            <p><i>8月</i><span>麦塔3.0产品发布</span></p>
+            <p><i>12月</i><span>企业用户突破4万</span></p>
+          </div>
+          <div class="development-content">
+            <h4><div><span><i></i></span></div><p>2012年</p></h4>
+            <p><i>3月</i><span>与步步高展开合作</span></p>
+            <p><i>6月</i><span>麦塔网校版正式研发成功</span></p>
+          </div>
+          <div class="development-content">
+            <h4><div><span><i></i></span></div><p>2008年</p></h4>
+            <p><i>3月</i><span>栋科软件正式注册成立</span></p>
+            <p><i>5月</i><span>公司课件开发部门组建完毕</span></p>
+          </div>
+        </div>
+        <div class="development-left">
+          <div class="development-content">
+            <h4><div><span><i></i></span></div><p>2018年</p></h4>
+            <p><span>麦塔4.0产品发布</span><i>7月</i></p>
+            <p><span>10年多媒体设计经验，课程开发时长超2万小时</span><i>12月</i></p>
+          </div>
+          <div class="development-content">
+            <h4><div><span><i></i></span></div><p>2014年</p></h4>
+            <p><span>麦塔2.0产品发布</span><i>5月</i></p>
+            <p><span>企业用户累计3000</span><i>11月</i></p>
+          </div>
+          <div class="development-content">
+            <h4><div><span><i></i></span></div><p>2010年</p></h4>
+            <p><span>麦塔1.0考培系统发布</span><i>5月</i></p>
+            <p><span>正式进军企培行业</span><i>6月</i></p>
+          </div>
+        </div>
+
+      </div>
+    </div>
+    <!-- 联系我们 -->
+    <div class="contact-us-box">
+      <div class="client-container">
+        <ul class="contact-container-box">
+          <h4>联系我们</h4>
+          <li><i></i><span>咨询QQ</span><p>2956600477/3375245762</p></li>
+          <li><i></i><span>联系电话</span><p>400-052-2130</p></li>
+          <li><i></i><span>公司邮箱</span><p>service@llisoft.com</p></li>
+          <li><i></i><span>公司地址</span><p>大连市沙河口区数码路北段25号201室</p></li>
+        </ul>
+      </div>
+    </div>
+
   </div>
 
 
@@ -16,7 +118,10 @@
     },
     data() {
       return {
-
+        // 公司简介图片
+        companyProfileImg:  require(`~/static/images/client/aboutUs/company-profile-img.png`),
+        brandIntroductionImg:  require(`~/static/images/client/aboutUs/aboutUs-logo.png`),
+        corporateCultureImg:  require(`~/static/images/client/aboutUs/corporate-culture-img.png`),
       };
     },
     computed:   {},

static/images/client/aboutUs/contact-us-icon1.svg

@@ -1,12 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="24" viewBox="0 0 22 24">
-  <defs>
-    <path id="qq-a" d="M17.310878,15.4142 C16.963078,16.7188 16.283478,17.8202 15.377278,18.6758 C16.474878,18.957 17.220878,19.5038 17.220878,20.1328 C17.220878,21.0508 15.631078,21.793 13.670078,21.793 C12.197478,21.793 10.932078,21.371 10.396678,20.7736 C10.1719141,20.7924915 9.94643303,20.8015668 9.72087798,20.8008 C9.45927798,20.8008 9.19747798,20.7852 8.93967798,20.7656 C8.40847798,21.3712 7.13887798,21.797 5.65447798,21.797 C3.69367798,21.797 2.10767798,21.0548 2.10767798,20.1368 C2.10767798,19.4844 2.91227798,18.922 4.08427798,18.6486 C3.15537769,17.7665481 2.4865267,16.6463541 2.15067798,15.4102 C1.64267798,16.6368 0.970877976,17.2656 0.654677976,17.2266 C0.248277976,17.1758 -0.161922024,15.961 0.0646779761,14.1212 C0.213077976,12.8906 0.920277976,11.3828 1.63107798,10.8868 C1.62707798,10.7462 1.63107798,10.6016 1.65067798,10.4572 C1.78347798,9.3126 1.97467798,8.3008 2.47087798,8.1992 C2.38341423,7.77772072 2.33891992,7.34845787 2.33807798,6.918 C2.33807798,3.0978 5.77167798,4.65405492e-13 9.72087798,4.65405492e-13 C13.670078,4.65405492e-13 17.103678,3.0978 17.103678,6.918 C17.103678,7.3594 17.056878,7.7892 16.967078,8.207 C17.381078,8.2344 17.736678,9.254 17.877278,10.469 C17.896678,10.629 17.900678,10.7814 17.892878,10.9336 C18.584278,11.4806 19.252278,12.9296 19.396878,14.1172 C19.623278,15.9452 19.213078,17.1642 18.806878,17.211 C18.490478,17.25 17.818678,16.629 17.310878,15.4142 Z"/>
-  </defs>
-  <g fill="none" fill-rule="evenodd" transform="translate(1.167 .105)">
-    <mask id="qq-b" fill="#fff">
-      <use xlink:href="#qq-a"/>
-    </mask>
-    <use fill="#CED8FF" fill-rule="nonzero" xlink:href="#qq-a"/>
-    <ellipse cx="4.333" cy="3.895" fill="#7998FF" mask="url(#qq-b)" rx="8.5" ry="8"/>
-  </g>
-</svg>

static/images/client/aboutUs/contact-us-icon2.svg

@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="23" viewBox="0 0 22 23">
-  <defs>
-    <path id="电-话-a" d="M11.3593382,14.7346142 C11.5892681,14.5928226 11.7778349,14.4861652 11.9664017,14.3983297 C13.292452,13.7759525 14.4603496,14.2163848 16.0053808,16.0797521 C16.9615969,17.2329067 17.2450554,18.2555629 16.8764377,19.1665425 C16.6014951,19.847895 16.071075,20.3171875 15.128241,20.8981566 C15.067413,20.9358004 14.5236107,21.2620465 14.3849229,21.349882 C12.1890321,22.7477212 7.15734011,19.5492543 3.5380742,14.0833767 C-0.0909241886,8.60369645 -1.03010849,2.76012625 1.1949797,1.34221035 L1.48817065,1.15022705 L1.80690936,0.93691227 C2.93222733,0.187800951 3.65243083,-0.112094535 4.50645593,0.0372258134 C5.35804791,0.187800953 6.08433421,0.837783637 6.69626388,2.02356286 C7.99068368,4.52938414 7.70600865,5.71892774 6.04175461,6.79930437 C5.92131518,6.87961111 5.49673575,7.1431176 5.45780583,7.16946825 C5.04904168,7.42921036 5.74004774,9.1733724 7.3459069,11.5988869 C8.97123102,14.0507521 10.3301285,15.3908709 10.7741729,15.1085425 L10.7753895,15.1085425 L11.3593382,14.7346142 Z"/>
-  </defs>
-  <g fill="none" fill-rule="evenodd" transform="translate(2)">
-    <polygon fill="#FFF" fill-rule="nonzero" points="8.477 10.574 8.577 10.574 8.577 10.674 8.477 10.674"/>
-    <mask id="电-话-b" fill="#fff">
-      <use xlink:href="#电-话-a"/>
-    </mask>
-    <use fill="#CED8FF" fill-rule="nonzero" xlink:href="#电-话-a"/>
-    <circle cx="4" cy="4" r="4" fill="#7998FF" mask="url(#电-话-b)"/>
-    <circle cx="15" cy="19" r="4" fill="#7998FF" mask="url(#电-话-b)"/>
-  </g>
-</svg>

static/images/client/aboutUs/contact-us-icon3.svg

@@ -1,12 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="23" viewBox="0 0 22 23">
-  <defs>
-    <rect id="邮箱-a" width="22" height="18" rx="2"/>
-  </defs>
-  <g fill="none" fill-rule="evenodd" transform="translate(0 2)">
-    <mask id="邮箱-b" fill="#fff">
-      <use xlink:href="#邮箱-a"/>
-    </mask>
-    <use fill="#CED8FF" xlink:href="#邮箱-a"/>
-    <rect width="22" height="22" y="-16" fill="#7998FF" mask="url(#邮箱-b)" rx="2" transform="rotate(45 11 -5)"/>
-  </g>
-</svg>

static/images/client/aboutUs/contact-us-icon4.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="22" height="23" viewBox="0 0 22 23">
-  <g fill="none" fill-rule="evenodd">
-    <path fill="#CED8FF" d="M11,22 C17,16.6470418 20,12.3137085 20,9 C20,4.02943725 15.9705627,0 11,0 C6.02943725,0 2,4.02943725 2,9 C2,12.3137085 5,16.6470418 11,22 Z"/>
-    <circle cx="11" cy="8" r="3" fill="#7998FF"/>
-  </g>
-</svg>