关于我们改版---许莹版

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

@@ -528,10 +528,10 @@
 
       // 企业发展历程内容部分
       li{
-        width: 25%;display: inline-block;padding-top: 36px;
+        width: 25%;display: inline-block;padding: 36px 24px 60px;background:#fbfbfb;box-sizing: border-box;
         div{width: 250px;border-bottom: 1px solid #eee;}
         img{margin-bottom: 14px;}
-        i{color: #3e7ee7;font-style: normal}
+        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;}
       }
     }

pages/introduction/index.vue

@@ -27,6 +27,61 @@
       </div>
     </div>
 
+    <!-- 企业发展历程 -->
+    <div class="enterprise-development-box">
+      <h4 class="client-title mb40">企业发展历程</h4>
+      <div class="client-container fn-clear">
+        <el-tabs v-model="activeName" class="enterprise-development-tab">
+          <el-tab-pane label="2008年-2014年" name="first">
+            <ul>
+              <li>
+                  <div><img :src="enterpriseDevImg1" alt="企业发展历程"></div>
+                  <p><i>3月</i><span>栋科软件正式注册成立</span></p>
+                  <p><i>5月</i><span>公司课件开发部门组建完毕</span></p>
+              </li>
+              <li>
+                <div><img :src="enterpriseDevImg2" alt="企业发展历程"></div>
+                <p><i>5月</i><span>麦塔1.0考培系统发布</span></p>
+                <p><i>6月</i><span>正式进军企培行业</span></p>
+              </li>
+              <li>
+                <div><img :src="enterpriseDevImg3" alt="企业发展历程"></div>
+                <p><i>3月</i><span>与步步高展开合作</span></p>
+                <p><i>6月</i><span>麦塔网校版正式研发成功</span></p>
+              </li>
+              <li>
+                <div><img :src="enterpriseDevImg4" alt="企业发展历程"></div>
+                <p><i>3月</i><span>栋科软件正式注册成立</span></p>
+                <p><i>5月</i><span>公司课件开发部门组建完毕</span></p>
+              </li>
+            </ul>
+          </el-tab-pane>
+          <el-tab-pane label="2016年-现在" name="second">
+            <ul class="enterprise-second-ul">
+              <li>
+                <div><img :src="enterpriseDevImg5" alt="企业发展历程"></div>
+                <p><i>8月</i><span>麦塔3.0产品发布</span></p>
+                <p><i>12月</i><span>企业用户突破4万</span></p>
+              </li>
+              <li>
+                <div><img :src="enterpriseDevImg6" alt="企业发展历程"></div>
+                <p><i>7月</i><span>麦塔4.0产品发布</span></p>
+                <p><i>12月</i><span>1课程开发时长超2万小时</span></p>
+              </li>
+              <li>
+                <div><img :src="enterpriseDevImg7" alt="企业发展历程"></div>
+                <p><i>4月</i><span>麦塔SaaS版产品发布</span></p>
+                <p><i>8月</i><span>企业用户已突破15万</span></p>
+              </li>
+            </ul>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+
+
+
+    </div>
+
     <!-- 企业文化 -->
     <div class="corporate-culture-box">
       <div class="client-container-middle">
@@ -45,69 +100,10 @@
       </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">
+    <div class="client-container">
+      <div class="contact-us-box">
         <ul class="contact-container-box">
           <h4>联系我们</h4>
           <li><i></i><span>咨询QQ</span>
@@ -143,6 +139,16 @@
         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`),
+        // 企业发展历程
+        enterpriseDevImg1:  require(`~/static/images/client/aboutUs/enterprise-development-img1.png`),
+        enterpriseDevImg2:  require(`~/static/images/client/aboutUs/enterprise-development-img2.png`),
+        enterpriseDevImg3:  require(`~/static/images/client/aboutUs/enterprise-development-img3.png`),
+        enterpriseDevImg4:  require(`~/static/images/client/aboutUs/enterprise-development-img4.png`),
+        enterpriseDevImg5:  require(`~/static/images/client/aboutUs/enterprise-development-img5.png`),
+        enterpriseDevImg6:  require(`~/static/images/client/aboutUs/enterprise-development-img6.png`),
+        enterpriseDevImg7:  require(`~/static/images/client/aboutUs/enterprise-development-img7.png`),
+        // 企业发展历程默认tab页
+        activeName: 'first'
       };
     },
     head(){