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

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

@@ -181,8 +181,11 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 }
 
 /* 网站标题 */
-.client-title{ @include setFontStyle(14);color: rgba(0,0,0,0.85);letter-spacing: 0;padding-top: 80px;text-align: center;}
+.client-title{ @include setFontStyle(10);color: rgba(0,0,0,0.85);letter-spacing: 0;padding-top: 80px;text-align: center;}
 
+/* 网站通用按钮 */
+.client-default-Btn{display: block;@include setFontStyle(-4);background: #2B5CFD;color: rgba(255, 255, 255, 0.85);border-radius: 4px;transition: .3s all linear;text-align: center;}
+.client-default-Btn:hover{background: #2249C9;cursor: pointer;}
 /* 网站底部footer */
 .client-footer{
   background: #1E2534;
@@ -207,7 +210,7 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   }
   //友情链接区域
   .link-box{
-    border: 1px solid #979797;
+    border: 1px solid  #333B4C;
     border-right: 0;
     border-left: 0;
     padding: 32px 0;

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

@@ -102,9 +102,35 @@
       }
     }
 
+    /* 认识我们*/
+    .client-link-box{
+      background: #F7F9FB;
+      li{
+        width: 25%;display: inline-block;padding:24px;border-right: 2px solid #FFF;box-sizing: border-box;transition: 0.3s;
+        //左侧图片区域
+        .link-left{
+          width: 60px;height: 60px;float: left;background-image: url("~@/assets/images/client/index/" + "index-linkLeft-bg.png");text-align:center;transition: 0.3s;
+          img{display: inline-block;margin-top: 18px;}
+        }
+
+        h1{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 8px;margin-left: 74px;}
+        p{@include setFontStyle(-6);height:48px;color: rgba(0,0,0,0.65);line-height: 22px;margin-left:74px;@include multi-line-ellipsis(2);}
+      }
+      li:last-child{border-right: 0;}
+      li:hover{
+        background: #F3F3F3;
+        cursor: pointer;
+        //左侧图片区域
+        .link-left{background-image: url("~@/assets/images/client/index/" + "index-linkLeft-bg-a.png");}
+        h1{color: #2B5CFD}
+      }
+
+    }
+
     /* 产品和服务 */
     .products-services-box{
-      padding: 116px 0 30px;
+      padding: 136px 0 32px;
+      margin: 0 -29px;
         li{
           width: 33.33%;
           display: inline-block;
@@ -112,10 +138,12 @@
           position: relative;
           //头部图片
           .products-services-img{
-            height: 173px;
+            width: 96px;
+            height: 120px;
             position: absolute;
             top: -80px;
             left: 50%;
+            margin-left: -48px;
             transition: .3s all linear;
             i{
               display: block;
@@ -124,44 +152,45 @@
           }
           //内容区域
           .products-services-content{
-            padding: 110px 32px 48px 32px;
+            padding: 66px 42px 32px;
             transition: .3s all linear;
+            margin: 0 29px;
             @include setFontStyle(-6);
-            h2{@include setFontStyle(2);color: rgba(0,0,0,0.85);text-align: center;margin-bottom: 16px;}
+            h2{@include setFontStyle(-2);color: rgba(0,0,0,0.85);text-align: center;margin-bottom: 16px;}
             p{line-height: 22px;color: rgba(0,0,0,0.65);margin-bottom: 32px;text-align: justify;min-height: 136px;@include multi-line-ellipsis(6);max-height: 136px}
-            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;}
+            a{width: 120px;height: 32px;line-height: 32px;opacity:0;margin: 0 auto;}
           }
         }
         li:nth-child(1){
           .products-services-img{
-            width: 148px;
-            margin-left: -74px;
             background-image: url("~@/assets/images/client/index/" + "index-products-kaoshi.png");
-            i{width:57px;height:41px;top: 28px;left: 50px;background-image: url("~@/assets/images/client/index/" + "index-products-kaoshi-icon.png");animation: 3s servicesImgUpDown linear infinite;}
+            i{width:38px;height:28px;top: 28px;left: 35px;background-image: url("~@/assets/images/client/index/" + "index-products-kaoshi-icon.svg");animation: 3s servicesImgUpDown linear infinite;}
           }
         }
         li:nth-child(2){
           .products-services-img{
-            width: 138px;
-            margin-left: -69px;
             background-image: url("~@/assets/images/client/index/" + "index-products-peixun.png");
-            i{width:31px;height:45px;top: 28px;left: 60px;background-image: url("~@/assets/images/client/index/" + "index-products-peixun-icon.png");animation: 3s servicesImgUpDown linear infinite;}
+            i{width:21px;height:32px;top: 18px;left: 42px;background-image: url("~@/assets/images/client/index/" + "index-products-peixun-icon.svg");animation: 3s servicesImgUpDown2 linear infinite;}
           }
         }
         li:nth-child(3){
           .products-services-img{
-            width: 155px;
-            margin-left: -77px;
             background-image: url("~@/assets/images/client/index/" + "index-products-kejian.png");
-            i{width:48px;height:48px;top: 35px;left: 45px;background-image: url("~@/assets/images/client/index/" + "index-products-kejian-icon.png");transform:rotate(0);animation: 4s servicesImgRotate linear infinite;}
+            i{width:34px;height:33px;top: 25px;left: 25px;background-image: url("~@/assets/images/client/index/" + "index-products-kejian-icon.svg");transform:rotate(0);animation: 4s servicesImgRotate linear infinite;}
           }
         }
         //小图标动画效果
       //饼图动画效果
       @keyframes servicesImgUpDown {
         0%, to {top: 28px}
-        50% {top: 40px;}
+        50% {top: 38px;}
       }
+
+      @keyframes servicesImgUpDown2 {
+        0%, to {top: 18px}
+        50% {top: 28px;}
+      }
+
       @keyframes servicesImgRotate{
         from {transform:rotate(0);}
         to {transform:rotate(360deg);}
@@ -169,12 +198,13 @@
         // li-鼠标悬浮效果
         li:hover{
           //头部图片
-          .products-services-img{top: -100px;}
+          .products-services-img{top: -90px;}
           //内容区域
           .products-services-content{
             cursor: default;
             box-shadow: 0 4px 8px 0 rgba(214,214,214,0.76);
             border-radius: 8px;
+            a{opacity: 1;}
           }
         }
     }
@@ -185,20 +215,20 @@
       padding-bottom: 80px;
       // 行业ul
       .industry-box{
-        margin-top: 8px;
+        margin-top: 10px;
         li{
-          width: 25%;display: inline-block;margin-top: 32px;height: 147px;overflow: hidden;
+          width: 25%;display: inline-block;margin-top: 38px;height: 112px;overflow: hidden;
           img{margin: 0 auto;display: block;transition: all .2s linear;}
           div{transition: all .25s linear;text-align: center;}
-          h2{@include setFontStyle(2);color: rgba(0,0,0,0.85);text-align: center;margin: 24px 0 16px;}
+          h2{@include setFontStyle(-2);color: rgba(0,0,0,0.85);text-align: center;margin: 18px 0 10px;}
           p{@include setFontStyle(-6);color: rgba(0,0,0,0.65);line-height: 22px;margin: 0 8px 8px;min-height: 48px;@include multi-line-ellipsis(2);max-height: 48px;}
-          a{@include setFontStyle(-6);display: block;color: #2B5CFD;line-height: 24px;margin: 0 auto;}
+          a{@include setFontStyle(-6);display: block;color: #2B5CFD;margin: 0 auto;transition: .3s all linear;}
         }
+        a:hover{cursor: pointer;color: #2249C9;}
         li:hover:not(:last-child) {
           img{opacity: 0;transform: translateY(10px);}
           div{margin-top: -147px}
-          h2{@include setFontStyle(-2);margin-top: 80px;}
-          a{cursor: pointer;}
+          h2{@include setFontStyle(-2);margin-top: 90px;}
         }
         li:last-child:hover{
           cursor: pointer;
@@ -209,12 +239,12 @@
     /* 超过10万家客户的信任之选 */
     .client-customer-box{
       .customer-img-box{
-        margin: 40px 0 80px;
+        padding-bottom: 80px;
         li{
           width: 20%;
           display: inline-block;
         }
-        img{margin: 16px auto;transition: all 0.5s;}
+        img{margin: 48px 30px 0;transition: all 0.5s;}
         li:hover{
           img{transform: scale(1.1);box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);border-radius: 8px}
         }
@@ -225,17 +255,15 @@
     .client-cert-box{
       background: #F9FAFF;
       padding-bottom: 80px;
-      .client-title{padding-bottom: 8px;}
       .cert-img-box{
         display: flex;
         justify-content: space-between;
-        margin: 32px 0;
+        margin: 48px 0;
           span{display:block;background: #E8ECFF;border-radius: 8px;padding:10px;overflow: hidden;}
           img{width: 180px;height:260px;transition: all 0.5s;}
           img:hover{transform: scale(1.14);}
       }
-      a{width:238px;height:40px;line-height: 40px;margin: 40px auto 0;text-align: center;@include setFontStyle(-4);display:block;background: #2B5CFD;border-radius: 4px;color: rgba(255,255,255,0.85);}
-      a:hover{cursor: pointer}
+      a{width:238px;height:40px;line-height: 40px;margin: 40px auto 0;}
     }
 
     /* 为什么选择我们 */
@@ -244,25 +272,25 @@
       .chose-img-box{
         li{
           width: 25%;display: inline-block;
-          div{width: 190px;height: 190px;border-radius:50%;position:relative;margin: 40px auto 24px;transition: all 0.3s;background-size: cover}
-          i{width: 62px;height: 62px;position: absolute;top: 65px;left: 45px;background-size: cover;}
-          h2{@include setFontStyle(2);text-align: center;color: rgba(0,0,0,0.85);}
+          div{width: 190px;height: 190px;border-radius:50%;position:relative;margin: 48px auto 24px;transition: all 0.3s;background-size: cover}
+          i{width: 62px;height: 62px;position: absolute;top: 63px;left: 45px;background-size: cover;}
+          h2{@include setFontStyle(-2);text-align: center;color: rgba(0,0,0,0.85);}
         }
         li:nth-child(1){
           div{background-image: url("~@/assets/images/client/index/" + "index-chose-service.png");}
-          i{background-image: url("~@/assets/images/client/index/" + "index-chose-service-icon.png");animation: 3s choseImgUpDown1 linear infinite;}
+          i{background-image: url("~@/assets/images/client/index/" + "index-chose-service-icon.svg");animation: 3s choseImgUpDown1 linear infinite;}
         }
         li:nth-child(2){
           div{background-image: url("~@/assets/images/client/index/" + "index-chose-system.png");}
-          i{background-image: url("~@/assets/images/client/index/" + "index-chose-system-icon.png");top: 30px;left: 55px;animation: 3s choseImgUpDown2 linear infinite;}
+          i{background-image: url("~@/assets/images/client/index/" + "index-chose-system-icon.svg");top: 30px;left: 50px;animation: 3s choseImgUpDown2 linear infinite;}
         }
         li:nth-child(3){
           div{background-image: url("~@/assets/images/client/index/" + "index-chose-tech.png");}
-          i{background-image: url("~@/assets/images/client/index/" + "index-chose-tech-icon.png");animation: 3s choseImgUpDown1 linear infinite;}
+          i{background-image: url("~@/assets/images/client/index/" + "index-chose-tech-icon.svg");animation: 3s choseImgUpDown1 linear infinite;}
         }
         li:nth-child(4){
           div{background-image: url("~@/assets/images/client/index/" + "index-chose-operate.png");}
-          i{background-image: url("~@/assets/images/client/index/" + "index-chose-operate-icon.png");top: 50px;animation: 3s choseImgUpDown3 linear infinite;}
+          i{background-image: url("~@/assets/images/client/index/" + "index-chose-operate-icon.svg");animation: 3s choseImgUpDown3 linear infinite;}
         }
         li:hover{
           div{box-shadow: 0 3px 9px rgba(43, 92, 253,0.25);transform: translateY(-10px);cursor: pointer;}
@@ -284,10 +312,15 @@
       }
     }
 
-    /* 行业资讯 */
+    /* 新闻资讯 */
     .client-industry-information{
-      background: #F9FAFF;
+      background-image: url("~@/assets/images/client/index/" + "index-industry-bg.png");
+      background-position: center;
       padding-bottom: 80px;
+      // 标题
+      .client-title{
+        color: #fff;
+      }
       // 轮播组件
       .el-carousel{
         margin-top: 40px;
@@ -299,7 +332,7 @@
       .el-carousel__item{
         background: #FFFFFF;
         border-radius: 8px;
-        .client-img-box{
+        .industry-img-box{
           width: 25%;
           height: 360px;
           background-repeat: no-repeat;
@@ -308,7 +341,7 @@
           transition: 0.3s;
           float: left;
         }
-        .client-content-box{
+        .industry-content-box{
           margin-left: 25%;
           padding:32px;
           height: inherit;
@@ -316,15 +349,15 @@
           position: relative;
           h1{@include setFontStyle(2);color: rgba(0,0,0,0.85);margin-bottom: 16px;@include multi-line-ellipsis(2);line-height: 30px;max-height: 60px;}
           p{@include setFontStyle(-4);color: rgba(0,0,0,0.64);line-height: 24px;@include multi-line-ellipsis(6);margin-bottom: 24px;max-height: 144px;}
-          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;
-          position: absolute;bottom: 32px;}
+          a{width: 132px;height: 32px;line-height:32px;position: absolute;bottom: 32px;}
         }
       }
       .el-carousel__item.is-active{
         height: 350px;
-        box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);
-        .client-img-box{width: 50%;}
-        .client-content-box{
+        //box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);
+        box-shadow: 0 2px 8px 0 rgba(146, 143, 143, 0.76);
+        .industry-img-box{width: 50%;}
+        .industry-content-box{
           margin-left: 50%;
         }
       }

src/assets/images/client/index/index-chose-system-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="66" height="60" viewBox="0 0 66 60">
+  <path fill="#FEBF11" fill-rule="evenodd" d="M46.1278647,23.6734476 C48.2758495,24.9153734 50.0068162,27.9195468 50,30.3801209 L49.9493907,48.2408489 C49.9425544,50.7123771 48.1992822,51.7078348 46.0526648,50.4645397 L34.9052939,44.0193966 L31.0195061,41.7737975 L19.8639316,35.3231773 C17.7255178,34.0867286 15.9931838,31.0825552 16,28.611027 L16.0506092,10.750299 C16.0574456,8.28972488 17.8007178,7.29563652 19.9391316,8.530716 L46.1278647,23.6734476 Z"/>
+</svg>

src/assets/images/client/index/index-link-img1.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+  <defs>
+    <rect id="认识我们-a" width="24" height="24" rx="4"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <mask id="认识我们-b" fill="#fff">
+      <use xlink:href="#认识我们-a"/>
+    </mask>
+    <use fill="#E8ECFF" xlink:href="#认识我们-a"/>
+    <path fill="#7998FF" d="M.353553391 5.19729436L5.30330086-.24715008C5.48082096-.442412226 5.78302068-.456794998 5.97828282-.2792749 5.98949439-.269082041 6.00021478-.258361653 6.01040764-.24715008 6.21087803-.0266438998 6.21087803.310121517 6.01040764.530627697L1.06066017 5.97507214C.883140074 6.17033429.580940356 6.18471706.38567821 6.00719696.374466637 5.9970041.36374625 5.98628371.353553391 5.97507214.153082999 5.75456596.153082999 5.41780054.353553391 5.19729436zM5.71751442 5.19729436L10.6672619-.24715008C10.844782-.442412226 11.1469817-.456794998 11.3422439-.2792749 11.3534554-.269082041 11.3641758-.258361653 11.3743687-.24715008 11.5748391-.0266438998 11.5748391.310121517 11.3743687.530627697L6.4246212 5.97507214C6.2471011 6.17033429 5.94490139 6.18471706 5.74963924 6.00719696 5.73842767 5.9970041 5.72770728 5.98628371 5.71751442 5.97507214 5.51704403 5.75456596 5.51704403 5.41780054 5.71751442 5.19729436zM11.0814755 5.19729436L16.0312229-.24715008C16.208743-.442412226 16.5109427-.456794998 16.7062049-.2792749 16.7174165-.269082041 16.7281368-.258361653 16.7383297-.24715008 16.9388001-.0266438998 16.9388001.310121517 16.7383297.530627697L11.7885822 5.97507214C11.6110621 6.17033429 11.3088624 6.18471706 11.1136003 6.00719696 11.1023887 5.9970041 11.0916683 5.98628371 11.0814755 5.97507214 10.8810051 5.75456596 10.8810051 5.41780054 11.0814755 5.19729436zM16.4454365 5.19729436L21.395184-.24715008C21.572704-.442412226 21.8749038-.456794998 22.0701659-.2792749 22.0813775-.269082041 22.0920979-.258361653 22.1022907-.24715008 22.3027611-.0266438998 22.3027611.310121517 22.1022907.530627697L17.1525433 5.97507214C16.9750232 6.17033429 16.6728234 6.18471706 16.4775613 6.00719696 16.4663497 5.9970041 16.4556293 5.98628371 16.4454365 5.97507214 16.2449661 5.75456596 16.2449661 5.41780054 16.4454365 5.19729436z" mask="url(#认识我们-b)"/>
+    <rect width="24" height="2" y="5" fill="#2B5CFD" mask="url(#认识我们-b)"/>
+    <path fill="#2B5CFD" d="M12.4160251,12.6240377 L15.4817666,17.2226499 C15.6349428,17.4524142 15.5728559,17.7628489 15.3430916,17.9160251 C15.2609578,17.970781 15.1644539,18 15.0657415,18 L8.93425855,18 C8.65811617,18 8.43425855,17.7761424 8.43425855,17.5 C8.43425855,17.4012875 8.46347756,17.3047837 8.5182334,17.2226499 L11.5839749,12.6240377 C11.7371511,12.3942734 12.0475858,12.3321864 12.2773501,12.4853627 C12.3322762,12.5219801 12.3794077,12.5691116 12.4160251,12.6240377 Z" mask="url(#认识我们-b)" transform="rotate(90 12 15)"/>
+  </g>
+</svg>

src/assets/images/client/index/index-link-img3.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#E8ECFF" d="M9,0 C10.6568542,-3.04359188e-16 12,1.34314575 12,3 L16,3 C18.209139,3 20,4.790861 20,7 L20,10 L20,10 C21.6568542,10 23,11.3431458 23,13 C23,14.6568542 21.6568542,16 20,16 L20,20 C20,22.209139 18.209139,24 16,24 L4,24 C1.790861,24 2.705415e-16,22.209139 0,20 L0,16 C1.65685425,16 3,14.6568542 3,13 C3,11.4023191 1.75108004,10.0963391 0.176272788,10.0050927 L0,10 L0,7 C-2.705415e-16,4.790861 1.790861,3 4,3 L6,3 L6,3 C6,1.34314575 7.34314575,3.04359188e-16 9,0 Z"/>
+    <rect width="8" height="1" x="7" y="9" fill="#2B5CFD" rx=".5"/>
+    <rect width="6" height="1" x="7" y="13" fill="#7998FF" rx=".5"/>
+    <rect width="8" height="1" x="7" y="17" fill="#2B5CFD" rx=".5"/>
+  </g>
+</svg>

src/assets/images/client/index/index-link-img4.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+  <defs>
+    <rect id="行业新动态-a" width="24" height="24"/>
+    <path id="行业新动态-c" d="M1,6 L19.7574644,1.31063391 C20.2932593,1.17668518 20.8361938,1.50244587 20.9701425,2.03824078 C20.9899727,2.11756139 21,2.1990146 21,2.28077641 L21,14.7801961 C21,15.3324808 20.5522847,15.7801961 20,15.7801961 C19.934148,15.7801961 19.868457,15.7736914 19.8038839,15.7607768 L1,12 L1,12 L1,6 Z"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <mask id="行业新动态-b" fill="#fff">
+      <use xlink:href="#行业新动态-a"/>
+    </mask>
+    <g mask="url(#行业新动态-b)">
+      <g transform="translate(1.998 -.07)">
+        <mask id="行业新动态-d" fill="#fff">
+          <use xlink:href="#行业新动态-c"/>
+        </mask>
+        <use fill="#E8ECFF" transform="rotate(-4 11 8.5)" xlink:href="#行业新动态-c"/>
+        <rect width="1" height="14" x="17.002" y="1.07" fill="#7998FF" mask="url(#行业新动态-d)" transform="rotate(-5 17.502 8.07)"/>
+      </g>
+    </g>
+    <path fill="#7998FF" d="M5,13 L11,13 L10.1358036,22.5061602 C10.0588906,23.3522031 9.34953173,24 8.5,24 C7.63138059,24 6.88705521,23.3788036 6.73167184,22.5241951 L5,13 L5,13 Z" mask="url(#行业新动态-b)" transform="rotate(-9 8 18.5)"/>
+    <rect width="11" height="8" x=".051" y="5.452" fill="#E8ECFF" mask="url(#行业新动态-b)" rx="4" transform="rotate(-4 5.55 9.452)"/>
+    <rect width="8" height="12" x="3.047" y="3.348" fill="#2B5CFD" mask="url(#行业新动态-b)" rx="2" transform="rotate(-4 7.047 9.348)"/>
+  </g>
+</svg>

src/assets/images/client/index/index-products-kaoshi-icon.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="38" height="28" viewBox="0 0 38 28">
+  <defs>
+    <path id="铅笔-a" d="M17.1891892,-5.7509354 L19.7837838,-5.7509354 C21.2167388,-5.7509354 22.3783784,-4.58929583 22.3783784,-3.1563408 L22.3783784,26.0328484 L22.3783784,26.0328484 L19.3606078,31.2295453 C19.1807085,31.5393376 18.7837351,31.6446366 18.4739428,31.4647374 C18.3925716,31.4174843 18.3224553,31.3530932 18.2684587,31.2760316 L14.5945946,26.0328484 L14.5945946,26.0328484 L14.5945946,-3.1563408 C14.5945946,-4.58929583 15.7562342,-5.7509354 17.1891892,-5.7509354 Z"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" transform="translate(.784 .54)">
+    <mask id="铅笔-b" fill="#fff">
+      <use xlink:href="#铅笔-a"/>
+    </mask>
+    <use fill="#FEBF11" transform="rotate(60 18.486 13.178)" xlink:href="#铅笔-a"/>
+    <rect width="9.73" height="1" x="25.297" y="5.838" fill="#FFF" mask="url(#铅笔-b)" transform="rotate(60 30.162 6.162)"/>
+    <rect width="9.73" height="1" x="14.27" y="12.324" fill="#FFF" mask="url(#铅笔-b)" rx=".324" transform="rotate(-29 19.135 12.649)"/>
+    <rect width="9.73" height="1" x="3.279" y="19.681" fill="#FFF" mask="url(#铅笔-b)" transform="rotate(60 8.144 20.005)"/>
+  </g>
+</svg>

src/assets/images/client/index/index-products-peixun-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="32" viewBox="0 0 21 32">
+  <path fill="#FEBF11" fill-rule="evenodd" d="M53.9723464,24.3901373 L67.84245,42.421272 C68.3109494,43.0303212 68.1970113,43.903847 67.5879621,44.3723464 C67.3447501,44.5594326 67.0465129,44.6608696 66.7396688,44.6608696 L38.9994616,44.6608696 C38.2310654,44.6608696 37.6081573,44.0379614 37.6081573,43.2695652 C37.6081573,42.9627211 37.7095943,42.664484 37.8966804,42.421272 L51.766784,24.3901373 C52.2352834,23.7810881 53.1088092,23.6671499 53.7178584,24.1356493 C53.813348,24.2091029 53.8988929,24.2946477 53.9723464,24.3901373 Z" transform="rotate(90 40.87 3.809)"/>
+</svg>

src/components/client/common/Cframe.vue

@@ -42,6 +42,6 @@
 </script>
 <style lang="scss" scoped>
 .mta-home-box-c{
-    >div{width: 100%;margin-top: 80px;}
+    >div:not(.client-index-page){width: 100%;margin-top: 80px;}
 }
 </style>

src/views/client/Index.vue

@@ -25,6 +25,18 @@
             </div>
         </div>
 
+        <!-- 认识我们 -->
+        <div class="client-link-box">
+            <div class="client-container">
+                <ul>
+                    <li><div class="link-left"><img :src="linkImg1" alt="认识我们"></div><h1>认识我们</h1><p>数字化、信息化转型中一股逆流而上的清风</p></li>
+                    <li><div class="link-left"><img :src="linkImg2" alt="新版本上线"></div><h1>新版本上线</h1><p>麦塔3.9.1版本上线了，功能抢先看</p></li>
+                    <li><div class="link-left"><img :src="linkImg3" alt="政府行业解决方案"></div><h1>政府行业解决方案</h1><p>助力政府企业向信息化、数字化转变，节约行业成本、提高办事效率</p></li>
+                    <li><div class="link-left"><img :src="linkImg4" alt="行业新动态"></div><h1>行业新动态</h1><p>时代推动企业发展，在信息化、数字化的浪潮下，不进则退</p></li>
+                </ul>
+            </div>
+        </div>
+
         <!-- 产品和服务 -->
         <div class="client-products-services">
             <div class="client-container">
@@ -34,27 +46,24 @@
                         <div class="products-services-img"><i></i></div>
                         <div class="products-services-content">
                             <h2>考试系统</h2>
-                            <p>
-                                麦塔在线考试系统满足不同行业考试考核需求：教育机构出题判卷、课后练习布置；企事业单位企业文化、业务水平提升；政府机构党建知识考核、提高服务意识；电力金融医疗专业技能、安全生产通通交给我们！</p>
-                            <a>了解详情</a>
+                            <p>麦塔在线考试系统满足不同行业考试考核需求：教育机构出题判卷、课后练习布置；企事业单位企业文化、业务水平提升；政府机构党建知识考核、提高服务意识；电力金融医疗专业技能、安全生产通通交给我们！</p>
+                            <a class="client-default-Btn">了解详情</a>
                         </div>
                     </li>
                     <li>
                         <div class="products-services-img"><i></i></div>
                         <div class="products-services-content">
                             <h2>培训系统</h2>
-                            <p>
-                                麦塔在线培训系统满足企业全流程培训场景，支持移动web端、PC端、APP端答题和学习，多种学习模式保障学习效果，结果及时反馈，让知识转化为行动，提升培训成效，让学员充分获取学习乐趣与动力，满足您的个性化培训考试需求。</p>
-                            <a>了解详情</a>
+                            <p>麦塔在线培训系统满足企业全流程培训场景，支持移动web端、PC端、APP端答题和学习，多种学习模式保障学习效果，结果及时反馈，让知识转化为行动，提升培训成效，让学员充分获取学习乐趣与动力，满足您的个性化培训考试需求。</p>
+                            <a class="client-default-Btn">了解详情</a>
                         </div>
                     </li>
                     <li>
                         <div class="products-services-img"><i></i></div>
                         <div class="products-services-content">
                             <h2>课件制作</h2>
-                            <p>
-                                麦塔能够快速搭建企业单位、教育机构学习资源库，满足学习平台需求，针对目标对象的学习习惯和学习方式个性化开发课程核心内容，将零散、隐性的知识系统化、显性化，现已开发了管理类通用课程、医药类课程、银行业课程等数千门课程内容。</p>
-                            <a>了解详情</a>
+                            <p>麦塔能够快速搭建企业单位、教育机构学习资源库，满足学习平台需求，针对目标对象的学习习惯和学习方式个性化开发课程核心内容，将零散、隐性的知识系统化、显性化，现已开发了管理类通用课程、医药类课程、银行业课程等数千门课程内容。</p>
+                            <a class="client-default-Btn">了解详情</a>
                         </div>
                     </li>
                 </ul>
@@ -119,31 +128,35 @@
             </div>
         </div>
 
-        <!-- 超过10万家客户的信任之选 -->
-        <div class="client-customer-box">
+        <!-- 新闻资讯 -->
+        <div class="client-industry-information">
+            <h1 class="client-title">新闻资讯</h1>
+            <el-carousel :interval="5000" type="card">
+                <el-carousel-item v-for="(item,index) in topCarousels" :key="index">
+                    <div class="industry-img-box" :style="{backgroundImage: 'url(' + item.pic + ')'}"></div>
+                    <div class="industry-content-box"><h1>{{item.title}}</h1>
+                        <p>{{item.intro}}</p><a class="client-default-Btn" @click="checkInfo(item)">了解详情</a></div>
+                </el-carousel-item>
+            </el-carousel>
+        </div>
+
+        <!-- 为什么选择我们 -->
+        <div class="client-chose-box">
             <div class="client-container">
-                <h1 class="client-title">超过10万家客户的信任之选</h1>
-                <ul class="customer-img-box">
-                    <li><img :src="customerImg1" alt="中国人民银行"></li>
-                    <li><img :src="customerImg2" alt="汇丰"></li>
-                    <li><img :src="customerImg3" alt="中国银行"></li>
-                    <li><img :src="customerImg4" alt="中信银行"></li>
-                    <li><img :src="customerImg5" alt="中国民生银行"></li>
-                    <li><img :src="customerImg6" alt="astellas"></li>
-                    <li><img :src="customerImg7" alt="今日头条"></li>
-                    <li><img :src="customerImg8" alt="华图教育"></li>
-                    <li><img :src="customerImg9" alt="步步高"></li>
-                    <li><img :src="customerImg10" alt="小天才"></li>
-                    <li><img :src="customerImg11" alt="华发股份"></li>
-                    <li><img :src="customerImg12" alt="上海航空"></li>
-                    <li><img :src="customerImg13" alt="中国国际航空公司"></li>
-                    <li><img :src="customerImg14" alt="中国东方航空"></li>
-                    <li><img :src="customerImg15" alt="深圳航空"></li>
-                    <li><img :src="customerImg16" alt="中建八局"></li>
-                    <li><img :src="customerImg17" alt="SANOFI"></li>
-                    <li><img :src="customerImg18" alt="大连海事大学"></li>
-                    <li><img :src="customerImg19" alt="南京银行"></li>
-                    <li><img :src="customerImg20" alt="中国人民银行"></li>
+                <h1 class="client-title">为什么选择我们</h1>
+                <ul class="chose-img-box">
+                    <li>
+                        <div><i></i></div>
+                        <h2>专业的顾问服务</h2></li>
+                    <li>
+                        <div><i></i></div>
+                        <h2>完善的培训体系</h2></li>
+                    <li>
+                        <div><i></i></div>
+                        <h2>可靠的开发技术</h2></li>
+                    <li>
+                        <div><i></i></div>
+                        <h2>成熟的运营能力</h2></li>
                 </ul>
             </div>
         </div>
@@ -164,43 +177,39 @@
                     <span><img :src="certImg7" alt="麦塔培训系统"></span>
                     <span><img :src="certImg8" alt="知识产权管理体系认证证书"></span>
                 </div>
-                <a>了解更多</a>
+                <a class="client-default-Btn">了解更多</a>
             </div>
         </div>
 
-        <!-- 为什么选择我们 -->
-        <div class="client-chose-box">
+        <!-- 超过10万家客户的信任之选 -->
+        <div class="client-customer-box">
             <div class="client-container">
-                <h1 class="client-title">为什么选择我们</h1>
-                <ul class="chose-img-box">
-                    <li>
-                        <div><i></i></div>
-                        <h2>专业的顾问服务</h2></li>
-                    <li>
-                        <div><i></i></div>
-                        <h2>完善的培训体系</h2></li>
-                    <li>
-                        <div><i></i></div>
-                        <h2>可靠的开发技术</h2></li>
-                    <li>
-                        <div><i></i></div>
-                        <h2>成熟的运营能力</h2></li>
+                <h1 class="client-title">超过10万家客户的信任之选</h1>
+                <ul class="customer-img-box">
+                    <li><img :src="customerImg1" alt="中国人民银行"></li>
+                    <li><img :src="customerImg2" alt="汇丰"></li>
+                    <li><img :src="customerImg3" alt="中国银行"></li>
+                    <li><img :src="customerImg4" alt="中信银行"></li>
+                    <li><img :src="customerImg5" alt="中国民生银行"></li>
+                    <li><img :src="customerImg6" alt="astellas"></li>
+                    <li><img :src="customerImg7" alt="今日头条"></li>
+                    <li><img :src="customerImg8" alt="华图教育"></li>
+                    <li><img :src="customerImg9" alt="步步高"></li>
+                    <li><img :src="customerImg10" alt="小天才"></li>
+                    <li><img :src="customerImg11" alt="华发股份"></li>
+                    <li><img :src="customerImg12" alt="上海航空"></li>
+                    <li><img :src="customerImg13" alt="中国国际航空公司"></li>
+                    <li><img :src="customerImg14" alt="中国东方航空"></li>
+                    <li><img :src="customerImg15" alt="深圳航空"></li>
+                    <li><img :src="customerImg16" alt="中建八局"></li>
+                    <li><img :src="customerImg17" alt="SANOFI"></li>
+                    <li><img :src="customerImg18" alt="大连海事大学"></li>
+                    <li><img :src="customerImg19" alt="南京银行"></li>
+                    <li><img :src="customerImg20" alt="中国人民银行"></li>
                 </ul>
             </div>
         </div>
 
-        <!-- 行业资讯 -->
-        <div class="client-industry-information">
-            <h1 class="client-title">行业资讯</h1>
-            <el-carousel :interval="5000" type="card">
-                <el-carousel-item v-for="(item,index) in topCarousels" :key="index">
-                    <div class="client-img-box" :style="{backgroundImage: 'url(' + item.pic + ')'}"></div>
-                    <div class="client-content-box"><h1>{{item.title}}</h1>
-                        <p>{{item.intro}}</p><a @click="checkInfo(item)">了解详情</a></div>
-                </el-carousel-item>
-            </el-carousel>
-        </div>
-
     </div>
 </template>
 
@@ -216,6 +225,10 @@
             return {
                 // 需求img
                 bannerTelImg:  require(`@/assets/images/client/index/index-banner-screen.png`),
+                linkImg1:      require(`@/assets/images/client/index/index-link-img1.svg`),
+                linkImg2:      require(`@/assets/images/client/index/index-link-img2.svg`),
+                linkImg3:      require(`@/assets/images/client/index/index-link-img3.svg`),
+                linkImg4:      require(`@/assets/images/client/index/index-link-img4.svg`),
                 demandImg1:    require(`@/assets/images/client/index/index-demand-img1.png`),
                 demandImg2:    require(`@/assets/images/client/index/index-demand-img2.png`),
                 demandImg3:    require(`@/assets/images/client/index/index-demand-img3.png`),