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

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

@@ -6,7 +6,7 @@
 ol,ul{list-style:none;margin: 0;padding: 0;}
 
 /* 让标题都自定义, 适应多个系统应用 */
-h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;margin: 0;}
+h1,h2,h3,h4,h5,h6,p{font-size:100%;font-weight:normal;margin: 0;}
 
 /* 外边距 */
 .m5{margin:5px;}

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

@@ -1,4 +1,5 @@
 @import "../base/utils";
+@import "cus-website-common";
 
 @mixin setWebsitePage() {
   /********  describe: 网站首页  author: TX  date:2020-07-30  ********/
@@ -129,7 +130,7 @@
 
     /* 产品和服务 */
     .products-services-box{
-      margin-top: 136px;
+      margin: 136px 0 30px;
         li{
           width: 33.33%;
           display: inline-block;
@@ -137,37 +138,71 @@
           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");
+            transition: .3s all linear;
+            i{
+              display: block;
+              position: absolute;
+            }
+          }
+          //内容区域
+          .products-services-content{
+            padding: 120px 32px 48px 32px;
+            transition: .3s all linear;
+            @include setFontStyle(-4);
+            h2{@include setFontStyle(4);color: rgba(0,0,0,0.85);text-align: center;margin-bottom: 24px;}
+            p{line-height: 24px;color: rgba(0,0,0,0.65);margin-bottom: 56px;text-align: justify;min-height: 144px;@include multi-line-ellipsis(6);}
+            a{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;}
           }
         }
         li:nth-child(1){
-
+          .products-services-img{
+            width: 148px;
+            margin-left: -74px;
+            background-image: url("~@/assets/images/website/index/" + "index-products-kaoshi.png");
+            i{width:57px;height:41px;top: 28px;left: 50px;background-image: url("~@/assets/images/website/index/" + "index-products-kaoshi-icon.png");animation: 3s servicesImgUpDown linear infinite;}
+          }
         }
         li:nth-child(2){
-
+          .products-services-img{
+            width: 138px;
+            margin-left: -69px;
+            background-image: url("~@/assets/images/website/index/" + "index-products-peixun.png");
+            i{width:31px;height:45px;top: 28px;left: 60px;background-image: url("~@/assets/images/website/index/" + "index-products-peixun-icon.png");animation: 3s servicesImgUpDown linear infinite;}
+          }
         }
         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-img{
+            width: 155px;
+            margin-left: -77px;
+            background-image: url("~@/assets/images/website/index/" + "index-products-kejian.png");
+            i{width:48px;height:48px;top: 35px;left: 45px;background-image: url("~@/assets/images/website/index/" + "index-products-kejian-icon.png");transform:rotate(0);animation: 4s servicesImgRotate linear infinite;}
+          }
         }
-        .products-services-content:hover{
-          cursor: default;
-          box-shadow: 0 4px 8px 0 rgba(214,214,214,0.76);
-          border-radius: 8px;
+        //小图标动画效果
+      //饼图动画效果
+      @keyframes servicesImgUpDown {
+        0%, to {top: 28px}
+        50% {top: 40px;}
+      }
+      @keyframes servicesImgRotate{
+        from {transform:rotate(0);}
+        to {transform:rotate(360deg);}
+      }
+        // li-鼠标悬浮效果
+        li:hover{
+          //头部图片
+          .products-services-img{top: -100px;}
+          //内容区域
+          .products-services-content{
+            cursor: default;
+            box-shadow: 0 4px 8px 0 rgba(214,214,214,0.76);
+            border-radius: 8px;
+          }
         }
-
     }
   }
 }

src/components/client/common/MtaBreadcrumb.vue

@@ -163,7 +163,12 @@
                                   });
             } else if (tenantFlag_key === '2') {
                 nodesReverse.push({
-                                      path:    '/c/IndexPeixun',
+                                      path:    '/c/IndexPeixun123',
+                                      display: '首页',
+                                  });
+            }else {
+                nodesReverse.push({
+                                      path:    '/index',
                                       display: '首页',
                                   });
             }
@@ -201,7 +206,8 @@
         .breadcrumb-icon-box{
             width: 14px;
             height: 14px;
-            background-image: url("../../../assets/images/icons/breadcrumb-icon-home.svg");
+            background: blue;
+          /*  background-image: url("../../../assets/images/icons/breadcrumb-icon-home.svg");*/
             margin-right: 8px;
         }
         .st-breadcrumb-item {
@@ -218,7 +224,8 @@
             width: 7px;
             height: 16px;
             display: inline-block;
-            background-image: url("../../../assets/images/icons/breadcrumb-icon.svg");
+            background: red;
+         /*   background-image: url("../../../assets/images/icons/breadcrumb-icon.svg");*/
             padding: 0 8px;
             background-repeat: no-repeat;
             background-position: center;

src/router.js

@@ -28,6 +28,12 @@ const router = new Router({
                                   {
                                       name:      '课程开发',
                                       path:      '/courseDev',
+                                      meta:      {
+                                          parentPath: 'croot',
+                                          breadcrumb: {
+                                              display: '课程列表',
+                                          },
+                                      },
                                       component: () => {
                                           return import(/* webpackChunkName: "index" */ './views/client/CourseDev.vue');
                                       },

src/views/client/CourseDev.vue

@@ -9,11 +9,12 @@
             <el-menu-item index="帮助中心">帮助中心</el-menu-item>
             <el-menu-item index="关于我们">关于我们</el-menu-item>
         </el-menu>
-        课程开发
+        <MtaBreadcrumb style="margin-left: 0"></MtaBreadcrumb>
     </div>
 </template>
 
 <script>
+    import MtaBreadcrumb    from '@/components/client/common/MtaBreadcrumb.vue';
     export default {
         name:       'courseDev',
         props:      {
@@ -23,7 +24,9 @@
                 activeIndex:  '课程开发',
             };
         },
-        components: {},
+        components: {
+            MtaBreadcrumb
+        },
         computed:   {},
         methods:    {
             handleSelect(key, keyPath) {

src/views/client/Index.vue

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