我们始终专注教育系统研发更懂用户需求

src/assets/css/cus-website/cus-website-page.scss

@@ -206,7 +206,7 @@
         }
     }
 
-    /*行业学习需求*/
+    /* 行业学习需求 */
     .website-demand-box{
       background: #F9FAFF;
       padding-bottom: 96px;
@@ -217,7 +217,7 @@
           img{margin: 0 auto;display: block;transition: all .2s linear;}
           div{transition: all .25s linear;}
           h2{@include setFontStyle(4);color: rgba(0,0,0,0.85);text-align: center;margin: 24px 0 16px;}
-          p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;margin: 0 8px 8px;min-height: 48px;@include multi-line-ellipsis(2);}
+          p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;margin: 0 8px 8px;min-height: 48px;text-align: center;@include multi-line-ellipsis(2);}
           a{@include setFontStyle(-4);width: max-content;display: block;color: #2B5CFD;line-height: 24px;margin: 0 auto;}
         }
         li:hover{
@@ -229,7 +229,7 @@
       }
     }
 
-    /*超过10万家客户的信任之选*/
+    /* 超过10万家客户的信任之选 */
     .website-customer-box{
       .customer-img-box{
         margin: 40px 0 80px;
@@ -240,6 +240,19 @@
         img{margin: 16px auto;}
       }
     }
+
+    /* 我们始终专注教育系统研发更懂用户需求 */
+    .website-cert-box{
+      background: #F9FAFF;
+      padding-bottom: 96px;
+      .cert-img-box{
+        display: flex;
+        justify-content: space-between;
+        margin: 56px 0;
+          img{width: 16%;border: 2px solid #2B5CFD;border-radius: 8px;}
+      }
+      a{width:238px;height:40px;line-height: 40px;margin: 0 auto;text-align: center;@include setFontStyle(-4);display:block;background: #2B5CFD;border-radius: 4px;color: rgba(255,255,255,0.85);}
+    }
   }
 }
 

src/views/client/Index.vue

@@ -98,7 +98,7 @@
                     <li><img :src="demandImg9" alt="金融保险"><div><h2>金融保险</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
                     <li><img :src="demandImg10" alt="汽车制造"><div><h2>汽车制造</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
                     <li><img :src="demandImg11" alt="新闻出版"><div><h2>新闻出版</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
-                    <li><img :src="demandImg12" alt="更多"><div><h2>更多</h2><p><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg12" alt="更多"><div><h2>更多</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
                 </ul>
             </div>
         </div>
@@ -131,11 +131,31 @@
                 </ul>
             </div>
         </div>
+
+        <!-- 我们始终专注教育系统研发更懂用户需求 -->
+        <div class="website-cert-box">
+            <div class="website-container">
+                <h1 class="website-index-title">我们始终专注教育系统研发更懂用户需求</h1>
+                <div class="cert-img-box">
+                    <img :src="certImg1" alt="栋科考试管理系统">
+                    <img :src="certImg2" alt="栋科精品课程管理系统">
+                    <img :src="certImg3" alt="栋科课程管理系统">
+                    <img :src="certImg4" alt="栋科用户管理系统">
+                </div>
+                <div class="cert-img-box">
+                    <img :src="certImg5" alt="栋科网校运营系统">
+                    <img :src="certImg6" alt="麦塔考试系统">
+                    <img :src="certImg7" alt="麦塔培训系统">
+                    <img :src="certImg8" alt="知识产权管理体系认证证书">
+                </div>
+                <a>了解更多</a>
+            </div>
+        </div>
         <!--<div class="mta-index">
             <div class="block">
                 <el-carousel :interval="200000" type="card" height="400px" :autoplay="false" arrow="always">
                     <el-carousel-item v-for="item in topCarousels" :key="item">
-                        <div style="width: 800px; height: 400px;">
+                        <div style="width: 400px; height: 400px;">
                             <img :src="item">
                             <div><h1>企业为什么需要微课</h1><p>新时代人才的特点，移动互联网、智能手机的普及，企业环境的变革，都是推动微课迅猛发展的重要原因。</p></div>
                         </div>
@@ -153,7 +173,7 @@
         },
         data() {
             return {
-                //
+                // 需求img
                 bannerTelImg: require(`@/assets/images/website/index/index-banner-screen.png`),
                 demandImg1: require(`@/assets/images/website/index/index-demand-img1.png`),
                 demandImg2: require(`@/assets/images/website/index/index-demand-img2.png`),
@@ -167,6 +187,7 @@
                 demandImg10: require(`@/assets/images/website/index/index-demand-img10.png`),
                 demandImg11: require(`@/assets/images/website/index/index-demand-img11.png`),
                 demandImg12: require(`@/assets/images/website/index/index-demand-img12.png`),
+                // 客户logo
                 customerImg1: require(`@/assets/images/website/index/index-customer-img1.png`),
                 customerImg2: require(`@/assets/images/website/index/index-customer-img2.png`),
                 customerImg3: require(`@/assets/images/website/index/index-customer-img3.png`),
@@ -187,6 +208,15 @@
                 customerImg18: require(`@/assets/images/website/index/index-customer-img18.png`),
                 customerImg19: require(`@/assets/images/website/index/index-customer-img19.png`),
                 customerImg20: require(`@/assets/images/website/index/index-customer-img20.png`),
+                //证书图片
+                certImg1: require(`@/assets/images/website/index/index-cert-img1.jpg`),
+                certImg2: require(`@/assets/images/website/index/index-cert-img2.jpg`),
+                certImg3: require(`@/assets/images/website/index/index-cert-img3.jpg`),
+                certImg4: require(`@/assets/images/website/index/index-cert-img4.jpg`),
+                certImg5: require(`@/assets/images/website/index/index-cert-img5.jpg`),
+                certImg6: require(`@/assets/images/website/index/index-cert-img6.jpg`),
+                certImg7: require(`@/assets/images/website/index/index-cert-img7.jpg`),
+                certImg8: require(`@/assets/images/website/index/index-cert-img8.jpg`),
                 activeIndex:  '首页',
                 topCarousels: [],
             };