网站产品和服务部分

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

@@ -3,7 +3,7 @@
 /************************ 通用class样式 author: TX  date:2020-07-30 **********************/
 
 /* 去掉列表前的标识, li 会继承 */
-ol,ul{list-style:none;}
+ol,ul{list-style:none;margin: 0;padding: 0;}
 
 /* 让标题都自定义, 适应多个系统应用 */
 h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;margin: 0;}

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

@@ -4,6 +4,7 @@
   /********  describe: 网站首页  author: TX  date:2020-07-30  ********/
   .website-index-page{
      width: 100%;
+    /* 网站banner */
     .website-banner{
       width: 100%;
       height: 480px;
@@ -123,6 +124,51 @@
       }
     }
 
+    /* 网站标题 */
+    .website-index-title{ @include setFontStyle(14);color: rgba(0,0,0,0.85);letter-spacing: 0;margin-top: 96px;text-align: center;}
+
+    /* 产品和服务 */
+    .products-services-box{
+      margin-top: 136px;
+        li{
+          width: 33.33%;
+          display: inline-block;
+          vertical-align: top;
+          position: relative;
+          //头部图片
+          .products-services-img{
+            width: 148px;
+            height: 173px;
+            position: absolute;
+            top: -80px;
+            left: 50%;
+            margin-left: -74px;
+            background-image: url("~@/assets/images/website/index/" + "index-products-kaoshi.png");
+          }
+        }
+        li:nth-child(1){
+
+        }
+        li:nth-child(2){
+
+        }
+        li:nth-child(3){
+
+        }
+        //内容区域
+        .products-services-content{
+          padding: 120px 32px 48px 32px;
+          transition: .3s all linear;
+          h2{@include setFontStyle(4);color: rgba(0,0,0,0.85);text-align: center;}
+          a{@include setFontStyle(-4);background: #2B5CFD;border-radius: 4px;color: rgba(255, 255, 255, 0.85);cursor: pointer;width: 120px;height: 32px;line-height: 32px;display: block;text-align: center;margin: 0 auto;}
+        }
+        .products-services-content:hover{
+          cursor: default;
+          box-shadow: 0 4px 8px 0 rgba(214,214,214,0.76);
+          border-radius: 8px;
+        }
+
+    }
   }
 }
 

src/views/client/Index.vue

@@ -31,7 +31,7 @@
                 <!--  banner右侧区域 -->
                 <div class="banner-right">
                     <div class="banner-tel-box">
-                        <img :src="bannerTelImg"></img>
+                        <img :src="bannerTelImg">
                     </div>
                     <i class="banner-pie"></i>
                     <div class="banner-i-run">
@@ -49,6 +49,38 @@
             </div>
         </div>
 
+        <!-- 产品和服务 -->
+        <div class="website-products-services">
+            <div class="website-container">
+                <h1 class="website-index-title">产品和服务</h1>
+                <ul class="products-services-box">
+                    <li>
+                        <div class="products-services-img"></div>
+                        <div class="products-services-content">
+                            <h2>考试平台</h2>
+                            <p>麦塔考试平台满足不同行业考试考核需求：教育机构出题判卷、课后练习布置；企事业单位企业文化、业务水平提升；政府机构党建知识考核、提高服务意识；电力金融医疗专业技能、安全生产通通交给我们！</p>
+                            <a>了解详情</a>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="products-services-img"></div>
+                        <div class="products-services-content">
+                            <h2>培训平台</h2>
+                            <p>麦塔培训平台满足企业全流程培训场景，支持移动web端、PC端、APP端答题和学习，多种学习模式保障学习效果，结果及时反馈，让知识转化为行动，提升培训成效，让学员充分获取学习乐趣与动力，满足您的个性化培训考试需求。</p>
+                            <a>了解详情</a>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="products-services-img"></div>
+                        <div class="products-services-content">
+                            <h2>课件开发</h2>
+                            <p>麦塔能够快速搭建企业单位、教育机构学习资源库，满足学习平台需求，针对目标对象的学习习惯和学习方式个性化开发课程核心内容，将零散、隐性的知识系统化、显性化，现已开发了管理类通用课程、医药类课程、银行业课程等数千门课程内容。</p>
+                            <a>了解详情</a>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
         <!--<div class="mta-index">
             <div class="block">
                 <el-carousel :interval="200000" type="card" height="500px">