Merge remote-tracking branch 'origin/麦塔' into 麦塔

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

@@ -275,6 +275,48 @@
         }
       }
     }
+
+    /* 行业资讯 */
+    .website-industry-information{
+      background: #F9FAFF;
+      padding-bottom: 96px;
+      // 轮播组件
+      .el-carousel{
+        margin-top: 56px;
+        .el-carousel__container{
+          height: 400px;
+        }
+
+      }
+      .el-carousel__item{
+        background: #FFFFFF;
+        border-radius: 8px;
+        .website-img-box{
+          width: 200px;
+          height: 400px;
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: center;
+          transition: 0.3s;
+          float: left;
+        }
+        .website-content-box{
+          margin-left: 200px;
+          padding: 40px 32px;
+          h1{@include setFontStyle(4);color: rgba(0,0,0,0.85);margin-bottom: 24px;}
+          p{@include setFontStyle(-4);color: rgba(0,0,0,0.64);line-height: 24px;@include multi-line-ellipsis(9);min-height: 216px;margin-bottom: 24px;}
+          a{width: 132px;height: 32px;line-height:32px;display: inline-block;@include setFontStyle(-4);background: #2B5CFD;border-radius: 4px;color: rgba(255,255,255,0.85);text-align: center}
+        }
+      }
+      .el-carousel__item.is-active{
+        box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);
+        .website-img-box{width: 400px;}
+        .website-content-box{
+          margin-left: 400px;
+          p{@include multi-line-ellipsis(9);}
+        }
+      }
+    }
   }
 }
 

src/views/client/Index.vue

@@ -20,6 +20,7 @@
                 </div>
             </div>
         </nav>
+
         <!-- 首页banner栏 -->
         <div class="website-banner">
             <div class="website-container">
@@ -53,23 +54,23 @@
                     <li>
                         <div class="products-services-img"><i></i></div>
                         <div class="products-services-content">
-                            <h2>考试平台</h2>
-                            <p>麦塔考试平台满足不同行业考试考核需求：教育机构出题判卷、课后练习布置；企事业单位企业文化、业务水平提升；政府机构党建知识考核、提高服务意识；电力金融医疗专业技能、安全生产通通交给我们！</p>
+                            <h2>考试系统</h2>
+                            <p>麦塔在线考试系统满足不同行业考试考核需求：教育机构出题判卷、课后练习布置；企事业单位企业文化、业务水平提升；政府机构党建知识考核、提高服务意识；电力金融医疗专业技能、安全生产通通交给我们！</p>
                             <a>了解详情</a>
                         </div>
                     </li>
                     <li>
                         <div class="products-services-img"><i></i></div>
                         <div class="products-services-content">
-                            <h2>培训平台</h2>
-                            <p>麦塔培训平台满足企业全流程培训场景，支持移动web端、PC端、APP端答题和学习，多种学习模式保障学习效果，结果及时反馈，让知识转化为行动，提升培训成效，让学员充分获取学习乐趣与动力，满足您的个性化培训考试需求。</p>
+                            <h2>培训系统</h2>
+                            <p>麦塔在线培训系统满足企业全流程培训场景，支持移动web端、PC端、APP端答题和学习，多种学习模式保障学习效果，结果及时反馈，让知识转化为行动，提升培训成效，让学员充分获取学习乐趣与动力，满足您的个性化培训考试需求。</p>
                             <a>了解详情</a>
                         </div>
                     </li>
                     <li>
                         <div class="products-services-img"><i></i></div>
                         <div class="products-services-content">
-                            <h2>课件开发</h2>
+                            <h2>课件制作</h2>
                             <p>麦塔能够快速搭建企业单位、教育机构学习资源库，满足学习平台需求，针对目标对象的学习习惯和学习方式个性化开发课程核心内容，将零散、隐性的知识系统化、显性化，现已开发了管理类通用课程、医药类课程、银行业课程等数千门课程内容。</p>
                             <a>了解详情</a>
                         </div>
@@ -84,17 +85,17 @@
                 <h1 class="website-index-title">满足不同行业学习需求</h1>
                 <ul class="industry-box">
                     <li><img :src="demandImg1" alt="政府机构"><div><h2>政府机构</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
-                    <li><img :src="demandImg2" alt="医药卫生"><div><h2>医药卫生</h2><p>提高行政服务人员</p><a>了解更多</a></div></li>
-                    <li><img :src="demandImg3" alt="能源化工"><div><h2>能源化工</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
-                    <li><img :src="demandImg4" alt="信息产业"><div><h2>信息产业</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
-                    <li><img :src="demandImg5" alt="交通运输"><div><h2>交通运输</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
-                    <li><img :src="demandImg6" alt="机械机电"><div><h2>机械机电</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
-                    <li><img :src="demandImg7" alt="教育培训"><div><h2>教育培训</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
-                    <li><img :src="demandImg8" alt="食品餐饮"><div><h2>食品餐饮</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
-                    <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><a>了解更多</a></div></li>
+                    <li><img :src="demandImg2" alt="医药卫生"><div><h2>医药卫生</h2><p>应对种类繁多的专业医疗资格考试，“三基、三严”考试，辅助人才队伍建设</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg3" alt="能源化工"><div><h2>能源化工</h2><p>提高安全生产培训效率，分析不足、排查隐患</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg4" alt="信息产业"><div><h2>信息产业</h2><p>创新学习方式，打造在线学习品牌，提高全员移动学习的积极性</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg5" alt="交通运输"><div><h2>交通运输</h2><p>推动技能领域交流互鉴，进一步培养和选拔高技能人才</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg6" alt="机械机电"><div><h2>机械机电</h2><p>帮助用户创建优质工程，打造一流企业的管理方针</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg7" alt="教育培训"><div><h2>教育培训</h2><p>不受时间、地点等因素限制，学员与教师相隔万里也可以开展教学活动</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg8" alt="食品餐饮"><div><h2>食品餐饮</h2><p>定期培训考核，严格把控服务质量、食品安全标准</p><a>了解更多</a></div></li>
+                    <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><a>了解更多</a></div></li>
                 </ul>
             </div>
         </div>
@@ -161,6 +162,17 @@
             </div>
         </div>
 
+        <!-- 行业资讯 -->
+        <div class="website-industry-information">
+            <h1 class="website-index-title">行业资讯</h1>
+            <el-carousel :interval="200000" type="card"  :autoplay="false" arrow="always">
+                <el-carousel-item v-for="item in topCarousels" :key="item">
+                    <div class="website-img-box" :style="{backgroundImage: 'url(' + item + ')'}"></div>
+                    <div class="website-content-box"><h1>企业为什么需要微课</h1><p>新时代人才的特点，移动互联网、智能手机的普及，企业环境的变革，都是推动微课迅猛发展的重要原因。</p><a>了解详情</a></div>
+                </el-carousel-item>
+            </el-carousel>
+        </div>
+
         <!-- 底部footer -->
         <div class="website-footer">
             <div class="website-container">
@@ -212,18 +224,6 @@
             </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: 400px; height: 400px;">
-                            <img :src="item">
-                            <div><h1>企业为什么需要微课</h1><p>新时代人才的特点，移动互联网、智能手机的普及，企业环境的变革，都是推动微课迅猛发展的重要原因。</p></div>
-                        </div>
-                    </el-carousel-item>
-                </el-carousel>
-            </div>
-        </div>-->
     </div>
 </template>
 
@@ -308,31 +308,3 @@
         },
     };
 </script>
-<style>
-    .el-carousel__item img {
-        width: 50%;
-    }
-
-    .el-carousel__item.is-active img {
-        width: 100%;
-    }
-
-
-    .el-carousel__item {
-        color:       #475669;
-        font-size:   14px;
-        line-height: 200px;
-        margin:      0;
-        /*transform:scale(1)!important;*/
-    }
-
-    .el-carousel__item:nth-child(2n) {
-        background-color: #99A9BF;
-    }
-
-    .el-carousel__item:nth-child(2n+1) {
-        background-color: #D3DCE6;
-        /*transform:scale(1)!important;*/
-    }
-
-</style>