首页改版--许莹版0907

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

@@ -179,8 +179,11 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 
   //头部右侧区域
   .head-right{
-      i{width: 19px;height: 24px;display:inline-block;background-image: url("~static/images/client/component/nav-phone.svg");margin-right: 8px;vertical-align: middle;}
-      span{@include setFontStyle(-2);line-height: 80px;color: rgba(0,0,0,0.85);}
+      line-height: 80px;
+      span{width: 130px;height: 40px;line-height: 40px;@include setFontStyle(-4);border-radius: 4px;display: inline-block;border: 1px solid #0366cd;color:#0064cc;box-sizing: border-box;margin-right:10px;text-align: center;}
+      span.right-tel-btn{width:auto;color: #fff;background: #3e7ce7;border: 1px solid #3e7ce7;padding: 0 8px;margin-right: 0;}
+      span:hover{cursor: pointer;}
+      i{width: 24px;height: 24px;display:inline-block;background-image: url("~static/images/client/component/nav-phone.png");margin-right: 4px;vertical-align: middle;}
   }
 }
 

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

@@ -8,216 +8,63 @@
     /* 网站banner */
     .client-index-banner{
       width: 100%;
-      height: 480px;
+      height: 395px;
+      background-color:#031073;
       background-image: url("~static/images/client/index/index-banner-background.png");
       background-position-x: center;
-      .banner-left{
-        width:500px;
-        display: inline-block;
-        h4{@include setFontStyle(40);color: #FFF;letter-spacing: 0;padding-top: 150px;}
-        p{@include setFontStyle(4);display: inline-block;background: #6D4FFF;border-radius: 24px;color: #FFF;margin: 24px 5px;padding: 6px 40px;}
-      }
-      .banner-right{
-        width: 611px;
-        height: 432px;
-        float: right;
-        margin-top: 48px;
-        background-image: url("~static/images/client/index/index-banner-img.png");
-        position: relative;
-          .banner-tel-box{
-            width: 284px;
-            height: 328px;
-            background-image: url("~static/images/client/index/index-banner-tel.png");
-            position: absolute;
-            top: -10px;
-            left: 140px;
-              //电视屏幕
-              img{position: absolute;top: 25px;left: 98px;animation: 5s bannerTel ease infinite;-webkit-animation: 5s bannerTel ease infinite;-moz-animation: 5s bannerTel ease infinite;-o-animation: 5s bannerTel ease infinite;}
-              //电视屏幕动画效果
-              @keyframes bannerTel{
-                from {top: 25px;left: 98px;opacity: 1;}
-                to {top: 35px;left: 65px;opacity: 0.1;}
-              }
-          }
-          //饼图
-          .banner-pie{
-            width: 35px;
-            height: 31px;
-            display: block;
-            position: absolute;
-            top: 86px;
-            right: 62px;
-            background-image: url("~static/images/client/index/index-banner-pie.png");
-            animation: 5s webPie ease infinite;-webkit-animation: 5s webPie ease infinite;-moz-animation: 5s webPie ease infinite;-o-animation: 5s webPie ease infinite;
-            }
-            //饼图动画效果
-            @keyframes webPie {
-              from {top: 86px;opacity: 1;}
-              to {top: 50px;opacity: 0;transform: scale(1.3);}
-            }
-
-            //漂浮小圆点
-            .banner-i-run i{
-              width: 16px;
-              height: 16px;
-              display: block;
-              position: absolute;
-              background:#51E2F4;
-              border-radius: 50%;
-              bottom: 150px;
-              left: 80px;
-              opacity: 0;
-            }
-            .banner-i-run i:nth-child(1){animation: 5s bannerRunI1 ease infinite;-webkit-animation: 5s bannerRunI1 ease infinite;-moz-animation: 10s bannerRunI1 ease infinite;-o-animation: 5s bannerRunI1 ease infinite;}
-            .banner-i-run i:nth-child(2){width:8px;height:8px;bottom: 240px;left: 50px;opacity: 0;animation: 5s bannerRunI2 ease 2s infinite;-webkit-animation: 5s bannerRunI2 ease 2s infinite;-moz-animation: 5s bannerRunI2 ease infinite;-o-animation: 5s bannerRunI2 ease infinite;}
-            .banner-i-run i:nth-child(3){width:7px;height:7px;bottom: 220px;left: 110px;opacity: 0;animation: 5s bannerRunI3 ease 3s infinite;-webkit-animation: 5s bannerRunI3 ease 3s infinite;-moz-animation: 5s bannerRunI3 ease infinite;-o-animation: 5s bannerRunI3 ease infinite;}
-            .banner-i-run i:nth-child(4){width:9px;height:9px;bottom: 300px;left: 130px;opacity: 0;animation: 5s bannerRunI4 ease 4s infinite;-webkit-animation: 5s bannerRunI4 ease 4s infinite;-moz-animation: 5s bannerRunI4 ease infinite;-o-animation: 5s bannerRunI4 ease infinite;}
-            .banner-i-run i:nth-child(5){width:6px;height:6px;bottom: 310px;left: 70px;opacity: 0;animation: 5s bannerRunI5 ease 5s infinite;-webkit-animation: 5s bannerRunI5 ease 5s infinite;-moz-animation: 5s bannerRunI5 ease infinite;-o-animation: 5s bannerRunI5 ease infinite;}
-            @keyframes bannerRunI1 {
-              0%{bottom: 150px;opacity: 1;}
-              100%{bottom: 240px;opacity: 0;left: 70px;}
-            }
-            @keyframes bannerRunI2 {
-              //0%{opacity: 0.5;}
-              0%{opacity: 0;}
-              5%{bottom: 240px;opacity: 0.7;}
-              100%{bottom: 410px;opacity: 0;left: 40px;}
-            }
-            @keyframes bannerRunI3 {
-              0%{opacity: 0;}
-              5%{bottom: 220px;opacity: 0.8;}
-              100%{bottom: 380px;opacity: 0;left: 130px}
-            }
-            @keyframes bannerRunI4 {
-              0%{opacity: 0;}
-              5%{bottom: 300px;opacity: 0.8;}
-              70%{bottom: 400px;opacity: 0;left: 160px}
-            }
-            @keyframes bannerRunI5 {
-              0%{opacity: 0;}
-              5%{bottom: 310px;opacity: 0.6;}
-              100%{bottom: 420px;opacity: 0;left: 110px}
-            }
-      }
+      background-repeat: no-repeat;
     }
 
-    /* 认识我们*/
-    .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("~static/images/client/index/index-linkLeft-bg.svg");text-align:center;transition: 0.3s;
-          i{width:24px;height:24px;display: inline-block;margin-top: 18px;}
+    /* 发展历程*/
+    .client-company-history{
+      background:#f8f8f8;
+        li{
+          width: 25%;display: inline-block;text-align: center;
+          div{border-right:2px solid #e5e5e5;margin: 24px 0;}
+          p{@include setFontStyle(16);margin-bottom: 16px;color: #333;}
+          span{@include setFontStyle(6);}
+          h4{@include setFontStyle(-4);color: #666;}
         }
-
-        h5{@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:nth-child(1){.link-left i{background-image: url("~static/images/client/index/index-link-img1.svg");}}
-      li:nth-child(1):hover{.link-left i{background-image: url("~static/images/client/index/index-link-img1-a.svg");}}
-      li:nth-child(2){.link-left i{background-image: url("~static/images/client/index/index-link-img2.svg");}}
-      li:nth-child(2):hover{.link-left i{background-image: url("~static/images/client/index/index-link-img2-a.svg");}}
-      li:nth-child(3){.link-left i{background-image: url("~static/images/client/index/index-link-img3.svg");}}
-      li:nth-child(3):hover{.link-left i{background-image: url("~static/images/client/index/index-link-img3-a.svg");}}
-      li:nth-child(4){.link-left i{background-image: url("~static/images/client/index/index-link-img4.svg");}}
-      li:nth-child(4):hover{.link-left i{background-image: url("~static/images/client/index/index-link-img4-a.svg");}}
-      li:last-child{border-right: 0;}
-      li:hover{
-        background: #F1F1F1;
-        cursor: pointer;
-        //左侧图片区域
-        .link-left{background-image: url("~static/images/client/index/index-linkLeft-bg-a.svg");}
-        h5{color: #2B5CFD}
-      }
-
+        li:last-child div{border-right: 0;}
     }
 
     /* 产品和服务 */
     .products-services-box{
-      padding: 136px 0 32px;
+      padding: 48px 0 32px;
         li{
-          width: 33.33%;
+          width: 100%;
           display: inline-block;
-          vertical-align: top;
-          position: relative;
           //头部图片
           .products-services-img{
-            width: 96px;
-            height: 120px;
-            position: absolute;
-            top: -80px;
-            left: 50%;
-            margin-left: -48px;
-            transition: .3s all linear;
-            i{
-              display: block;
-              position: absolute;
-            }
+            width: 640px;
+            height: 485px;
+            float: right;
           }
           //内容区域
           .products-services-content{
-            padding: 66px 40px 32px;
-            transition: .3s all linear;
+            width: 500px;
+            float: right;
+            padding: 110px 60px 0;
+            box-sizing: border-box;
             margin: 0 24px;
             @include setFontStyle(-6);
-            h5{@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: 70px;text-align: justify;@include multi-line-ellipsis(6);}
-            .products-btn-box{display: flex;width: 100%;justify-content: center;}
-            a,div,span{width: 120px;height: 32px;display:inline-block;line-height: 32px;opacity:0;margin-right: 24px}
-            span{
-              width:auto;background: transparent;color: #2B5CFD;margin-right: 0;
-              i{width: 8px;height: 8px;display:inline-block;margin-left: 8px; background-image: url("~static/images/client/index/index-products-icon.svg");}
-            }
+            h5{@include setFontStyle(4);color: rgba(0,0,0,0.85);}
+            i{width:50px;height:5px;display: block;background: #3e7ce7;margin: 24px 0;}
+            p{line-height: 22px;color: rgba(0,0,0,0.65);margin-bottom: 56px;text-align: justify;}
+            .client-default-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;background: #3e7ce7;border: 1px solid #3e7ce7;box-sizing: border-box;}
+            a,div.client-default-Btn{margin-right: 24px}
+            span.client-default-Btn{background: #fff;color: #3e7ce7;margin-right: 0;}
           }
         }
         li:nth-child(1){
-          .products-services-img{
-            background-image: url("~static/images/client/index/index-products-kaoshi.png");
-            i{width:38px;height:28px;top: 28px;left: 35px;background-image: url("~static/images/client/index/index-products-kaoshi-icon.svg");animation: 3s servicesImgUpDown linear infinite;}
-          }
+          .products-services-img{background-image: url("~static/images/client/index/index-products-kaoshi.png");}
         }
         li:nth-child(2){
-          .products-services-img{
-            background-image: url("~static/images/client/index/index-products-peixun.png");
-            i{width:21px;height:32px;top: 18px;left: 42px;background-image: url("~static/images/client/index/index-products-peixun-icon.svg");animation: 3s servicesImgUpDown2 linear infinite;}
-          }
+          .products-services-img{float: left;background-image: url("~static/images/client/index/index-products-peixun.png");}
+          .products-services-content{float: right;}
         }
         li:nth-child(3){
-          .products-services-img{
-            background-image: url("~static/images/client/index/index-products-kejian.png");
-            i{width:34px;height:33px;top: 25px;left: 25px;background-image: url("~static/images/client/index/index-products-kejian-icon.svg");transform:rotate(0);animation: 4s servicesImgRotate linear infinite;}
-          }
-        }
-        //小图标动画效果
-      //饼图动画效果
-      @keyframes servicesImgUpDown {
-        0%, to {top: 28px}
-        50% {top: 38px;}
-      }
-
-      @keyframes servicesImgUpDown2 {
-        0%, to {top: 18px}
-        50% {top: 28px;}
-      }
-
-      @keyframes servicesImgRotate{
-        from {transform:rotate(0);}
-        to {transform:rotate(360deg);}
-      }
-        // li-鼠标悬浮效果
-        li:hover{
-          //头部图片
-          .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,div,span{opacity: 1;}
-            span{color: #2249C9;cursor: pointer}
-          }
+          .products-services-img{background-image: url("~static/images/client/index/index-products-kejian.png");}
         }
     }
 
@@ -229,33 +76,45 @@
       //tab
       .demand-box-tab{
         margin-top: 30px;
-          .el-tabs__item{width:124px;height: 40px;line-height: 40px;@include setFontStyle(-4);color: rgba(0,0,0,0.85);padding: 0;text-align: center;}
-          .el-tabs__item.is-active{background-image: url("~static/images/client/index/index-demand-btnBg.png");color: #fff;}
+          .el-tabs__item{width:124px;height: 40px;line-height: 40px;border-radius: 4px;border: 1px solid #3e7ee7;@include setFontStyle(-4);color: #3e7ee7;padding: 0;text-align: center;margin: 0 12px 32px;}
+          .el-tabs__item.is-active{background-color:#3e7ee7;color: #fff;position: relative}
+          .el-tabs__item.is-active:after{ width: 0; height: 0; content: "";display: inline-block;border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid #3e7ee7;
+          position: absolute;bottom: -33px;left: 50%;margin-left: -8px;}
           // 免费试用按钮
           .client-default-Btn{width: 238px;height: 40px;line-height: 40px;margin: 40px auto 0;}
       }
       //覆盖饿了么样式
       .el-tabs__header{margin: 0 0 48px;}
       .demand-box-tab.el-tabs--card>.el-tabs__header{border: 0}
-      .demand-box-tab.el-tabs--card>.el-tabs__header .el-tabs__nav{width: 72%;height: 40px;margin: 0 auto;border-color: #ccc;border-bottom: 1px solid #ccc;border-right:0;border-left:0;border-radius: 0;}
+      .demand-box-tab.el-tabs--card>.el-tabs__header .el-tabs__nav{margin: 0 auto;border-color: #ccc;border-bottom: 1px dotted #6c9ce1;border-right:0;border-left:0;border-top:0;border-radius: 0;}
       .demand-box-tab .el-tabs__nav-scroll{text-align: center;}
       .demand-box-tab .el-tabs__nav{float: none;}
 
       // 考试ul
       .demand-tab-list{
+        margin: 0 -18px;
         li{
           width: 33.33%;display: inline-block;position: relative;margin-bottom: 24px;overflow: hidden;
 
           // 内容区域
-          .demand-content-box{height: 300px;margin: 0 6px;background-size: cover;background-repeat: no-repeat;}
+          .demand-content-box{height: 300px;margin: 0 18px;background-color: #fff;background-repeat: no-repeat;background-position: 5px 5px;}
+          //图片区域
+          .demand-img-box{
+            position: absolute;
+            top: 90px;
+            left: 50%;
+            margin-left: -50px;
+              i{width: 100px;height: 100px;display:block;margin-bottom: 24px;background-repeat: no-repeat;background-size: cover;}
+              h4{@include setFontStyle(-2);color: #272727;text-align: center;}
+          }
           // 蒙版
           .demand-mask-box{
             position: absolute;
-            top: 240px;
+            top: 300px;
             padding: 20px;
             background:rgba(66,66,66,0.65);
             transition: 0.5s;
-            margin: 0 6px;
+            margin: 0 18px;
             color: #fff;
             h4{
               @include setFontStyle(0);margin-bottom: 24px;text-align: center;
@@ -271,25 +130,31 @@
             border-top: 1px solid #fff;
             a{margin-right: 8px}
             a:last-child{margin-right: 0;}
-            img{width: 80px;height: 80px;}
+            img{width: 77px;height: 77px;}
           }
         }
         li:nth-child(1){
+          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic1.png");}}
           .demand-content-box{background-image: url("~static/images/client/index/index-demand-img1.png");}
         }
         li:nth-child(2){
+          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic2.png");}}
           .demand-content-box{background-image: url("~static/images/client/index/index-demand-img2.png");}
         }
         li:nth-child(3){
+          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic3.png");}}
           .demand-content-box{background-image: url("~static/images/client/index/index-demand-img3.png");}
         }
         li:nth-child(4){
+          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic4.png");}}
           .demand-content-box{background-image: url("~static/images/client/index/index-demand-img4.png");}
         }
         li:nth-child(5){
+          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic5.png");}}
           .demand-content-box{background-image: url("~static/images/client/index/index-demand-img5.png");}
         }
         li:nth-child(6){
+          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic6.png");}}
           .demand-content-box{background-image: url("~static/images/client/index/index-demand-img6.png");}
         }
         li:hover{
@@ -303,6 +168,23 @@
           }
         }
       }
+      .demand-peixun-list{
+        li:nth-child(1){
+          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic7.png");}}
+        }
+        li:nth-child(2){
+          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic6.png");}}
+        }
+        li:nth-child(3){
+          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic8.png");}}
+        }
+        li:nth-child(4){
+          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic1.png");}}
+        }
+        li:nth-child(5){
+          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic3.png");}}
+        }
+      }
 
     }
 
@@ -323,14 +205,19 @@
 
     /* 我们始终专注教育系统研发更懂用户需求 */
     .client-cert-box{
-      background: #F9FAFF;
+      background: #005491;
       padding-bottom: 80px;
+      .client-title{color: #fff}
       .cert-img-box{
         display: flex;
         justify-content: space-between;
         margin: 48px 0 0;
-          span{display:block;background: #E8ECFF;border-radius: 8px;padding: 10px 10px 6px;overflow: hidden;}
-          img{width: 154px;height:210px;transition: all 0.5s;}
+        align-items: center;
+          span{display:block;height: max-content;background: #80aac8;padding: 8px 8px 3px;overflow: hidden;}
+          span:nth-child(3){
+            img{width: 320px;height:210px;}
+          }
+          img{width: 170px;height:240px;transition: all 0.5s;}
           img:hover{transform: scale(1.14);}
       }
       a{width:238px;height:40px;line-height: 40px;margin: 40px auto 0;}
@@ -340,44 +227,52 @@
     .client-chose-box{
       padding-bottom: 80px;
       .chose-img-box{
+        margin: 48px -14px 0;
         li{
-          width: 25%;display: inline-block;
-          div{width: 152px;height: 152px;border-radius:50%;position:relative;margin: 48px auto 24px;transition: all 0.3s;background-size: cover}
-          i{width: 55px;height: 50px;position: absolute;top: 45px;left: 35px;background-size: cover;}
-          h5{@include setFontStyle(-2);text-align: center;color: rgba(0,0,0,0.85);}
+          width: 25%;display: inline-block;vertical-align: top;
+          div{height: 260px;background: #f8f8f8;position:relative;text-align: center;margin: 0 14px;}
+          span{width: 100%;height: 200px;display: inline-block;}
+          img{margin: 50px auto 0;}
+          h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);}
         }
-        li:nth-child(1){
-          div{background-image: url("~static/images/client/index/index-chose-service.svg");}
-          i{background-image: url("~static/images/client/index/index-chose-service-icon.svg");animation: 3s choseImgUpDown1 linear infinite;}
-        }
-        li:nth-child(2){
-          div{background-image: url("~static/images/client/index/index-chose-system.svg");}
-          i{background-image: url("~static/images/client/index/index-chose-system-icon.svg");top: 22px;left: 40px;animation: 3s choseImgUpDown2 linear infinite;}
-        }
-        li:nth-child(3){
-          div{background-image: url("~static/images/client/index/index-chose-tech.svg");}
-          i{background-image: url("~static/images/client/index/index-chose-tech-icon.svg");animation: 3s choseImgUpDown1 linear infinite;}
-        }
-        li:nth-child(4){
-          div{background-image: url("~static/images/client/index/index-chose-operate.svg");}
-          i{background-image: url("~static/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;}
-          h5{color: #2B5CFD;}
-        }
-        //选择我们动画效果
-        @keyframes choseImgUpDown1 {
-          0%, to {top: 45px;}
-          50% {top: 55px;}
-        }
-        @keyframes choseImgUpDown2 {
-          0%, to {top: 22px;}
-          50% {top: 32px;}
-        }
-        @keyframes choseImgUpDown3 {
-          0%, to {top: 40px;}
-          50% {top: 50px;}
+      }
+    }
+
+    /* 新闻资讯 */
+    .client-news-information {
+      background: #f9faff;
+      padding-bottom: 80px;
+
+      .industry-information-box {
+        margin-top: 48px;
+        // 左
+        .industry-information-left {
+          width: 520px;
+          margin-right: 80px;
+          display: inline-block;
+          vertical-align: top;
+          color: #333;
+          div {float: left;border-right: 1px solid #dbdbea;padding: 8px 16px 8px 0;}
+          img {width: 520px;height: 210px;margin-bottom: 42px;}
+          h4 {@include setFontStyle(-2);margin-bottom: 16px;color: #222;}
+          i{width:25px;height:12px;float:right;background-image:url("~static/images/client/index/news-information-icon.png")}
+          p {@include setFontStyle(-6);height: 68px;line-height: 22px;padding: 2px 0 0 16px;text-align: justify;@include multi-line-ellipsis(3);}
+          b {@include setFontStyle(-4);font-weight: normal;display: block;margin-bottom: 16px;}
+          span {@include setFontStyle(-6);display: block;color: #666;}
+        }
+
+        // 右
+        .industry-information-right {
+          width: 590px;
+          display: inline-block;
+          vertical-align: top;
+
+          li {border-bottom: 1px solid #ccc;margin-bottom: 16px;}
+          li:last-child {border: 0;}
+          h4 {@include setFontStyle(-4);color: #333;@include single-line-ellipsis;margin-bottom: 12px;}
+          h4:hover {cursor: pointer;color: #3e7ce7;}
+          p {@include setFontStyle(-6);color: #666;@include single-line-ellipsis;margin-bottom: 16px;}
+          span {margin: 0 30px 0 10px;}
         }
       }
     }

components/header.vue

@@ -2,7 +2,7 @@
   <nav class="client-head">
     <div class="client-container head-layout">
       <div class="head-left">
-        <a></a>
+        <a :href="`${baseUrl}`"></a>
         <el-menu
           :default-active="activeNav"
           class="el-menu-demo"
@@ -27,7 +27,8 @@
 
       </div>
       <div class="head-right">
-        <i></i><span>4000-522-130</span>
+        <span>免费试用</span>
+        <span class="right-tel-btn"><i></i>4000-522-130</span>
       </div>
     </div>
   </nav>
@@ -47,7 +48,10 @@
       activeNav() {
         return this.getActiveNav;
       },
-      ...mapGetters(['getActiveNav'])
+      baseUrl() {
+        return this.getBaseUrl;
+      },
+      ...mapGetters(['getActiveNav','getBaseUrl'])
     },
     data() {
       return {

pages/index.vue

@@ -2,54 +2,16 @@
 
   <div class="client-index-page">
     <!-- 首页banner栏 -->
-    <div class="client-index-banner">
-      <div class="client-container">
-        <!--  banner左侧区域 -->
-        <div class="banner-left">
-          <h4>让知识更有价值</h4>
-          <p>考试平台 / 培训平台 / 课程开发</p>
-        </div>
-        <!--  banner右侧区域 -->
-        <div class="banner-right">
-          <div class="banner-tel-box">
-            <img :src="bannerTelImg" />
-          </div>
-          <i class="banner-pie"></i>
-          <div class="banner-i-run">
-            <i></i>
-            <i></i>
-            <i></i>
-            <i></i>
-            <i></i>
-          </div>
-        </div>
-      </div>
-    </div>
+    <div class="client-index-banner"></div>
 
-    <!-- 认识我们 -->
-    <div class="client-link-box">
+    <!-- 发展历程 -->
+    <div class="client-company-history">
       <div class="client-container">
         <ul>
-          <li>
-            <div class="link-left"><i></i></div>
-            <h5>认识我们</h5>
-            <p>数字化、信息化转型中一股逆流而上的清风</p>
-          </li>
-          <li>
-            <div class="link-left"><i></i></div>
-            <h5>新版本上线</h5>
-            <p>麦塔3.9.1版本上线了，功能抢先看</p>
-          </li>
-          <li>
-            <div class="link-left"><i></i></div>
-            <h5>政府行业解决方案</h5>
-            <p>助力政府企业向信息化、数字化转变，节约行业成本、提高办事效率</p>
-          </li>
-          <li>
-            <div class="link-left"><i></i></div>
-            <h5>行业新动态</h5>
-            <p>时代推动企业发展，在信息化、数字化的浪潮下，不进则退</p>
-          </li>
+          <li><div><p>2007<span>年</span></p><h4>公司创立于2007年</h4></div></li>
+          <li><div><p>3000<span>+</span></p><h4>已与3000多家企业建立了合作关系</h4></div></li>
+          <li><div><p>124,799<span>+</span></p><h4>平台用户已达到124799</h4></div></li>
+          <li><div><p>30,000<span>+</span></p><h4>课件开发超30000课时</h4></div></li>
         </ul>
       </div>
     </div>
@@ -60,27 +22,30 @@
         <h4 class="client-title">产品和服务</h4>
         <ul class="products-services-box">
           <li>
-            <div class="products-services-img"><i></i></div>
+            <div class="products-services-img"></div>
             <div class="products-services-content">
               <h5>考试系统</h5>
+              <i></i>
               <p>麦塔考试平台满足不同行业考试考核需求：教育机构出题判卷、课后练习布置；企事业单位企业文化、业务水平提升</p>
-              <div class="products-btn-box"><a class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a><span @click="goExamPage">了解详情<i></i></span></div>
+              <div><a class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a><span  class="client-default-Btn" @click="goExamPage">了解详情</span></div>
             </div>
           </li>
           <li>
-            <div class="products-services-img"><i></i></div>
+            <div class="products-services-img"></div>
             <div class="products-services-content">
               <h5>培训系统</h5>
+              <i></i>
               <p>麦塔培训平台满足企业全流程培训场景，支持移动web端、PC端、APP端答题和学习，多种学习模式保障学习效果，结果及时反馈</p>
-              <div class="products-btn-box"><a class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a><span @click="goPeixunPage">了解详情<i></i></span></div>
+              <div><a class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a><span class="client-default-Btn" @click="goPeixunPage">了解详情</span></div>
             </div>
           </li>
           <li>
-            <div class="products-services-img"><i></i></div>
+            <div class="products-services-img"></div>
             <div class="products-services-content">
               <h5>课件制作</h5>
+              <i></i>
               <p>麦塔能够快速搭建企业单位、教育机构学习资源库，满足学习平台需求，针对目标对象的学习习惯和学习方式个性化开发课程</p>
-              <div class="products-btn-box"><div class="client-default-Btn" @click="applyFun">申请方案</div><span @click="goKechengPage">了解详情<i></i></span></div>
+              <div><div class="client-default-Btn" @click="applyFun">申请方案</div><span class="client-default-Btn" @click="goKechengPage">了解详情</span></div>
             </div>
           </li>
         </ul>
@@ -95,7 +60,8 @@
           <el-tab-pane label="考试系统" name="first">
             <ul class="demand-tab-list demand-kaoshi-list">
               <li v-for="item in kaoshiLiArray">
-                <div class="demand-content-box"></div>
+                <div class="demand-content-box">{{item.demandNumber}}</div>
+                <div class="demand-img-box"><i></i><h4>{{item.demandTitle}}</h4></div>
                 <div class="demand-mask-box">
                   <h4>{{item.demandTitle}}<a :href="`${baseUrl}/industrydetails/${item.demandHref}`"><span>了解详情</span><i></i></a></h4>
                   <p>{{item.demandText}}</p>
@@ -110,7 +76,8 @@
           <el-tab-pane label="培训系统" name="second">
             <ul class="demand-tab-list demand-peixun-list">
               <li v-for="item in peixunLiArray">
-                <div class="demand-content-box"></div>
+                <div class="demand-content-box">{{item.demandNumber}}</div>
+                <div class="demand-img-box"><i></i><h4>{{item.demandTitle}}</h4></div>
                 <div class="demand-mask-box">
                   <h4>{{item.demandTitle}}<a :href="`${baseUrl}/industrydetails/${item.demandHref}`"><span>了解详情</span><i></i></a></h4>
                   <p>{{item.demandText}}</p>
@@ -126,64 +93,76 @@
       </div>
     </div>
 
-    <!-- 新闻资讯 -->
-    <div class="client-industry-information">
-      <h4 class="client-title">新闻资讯</h4>
-      <div class="information-carousel-box">
-        <el-carousel :interval="3000" arrow="always">
-          <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">
-              <h5>{{ item.title }}</h5>
-              <p>{{ item.intro }}</p>
-              <a class="client-default-Btn" @click="checkInfo(item)">了解详情</a>
-            </div>
-          </el-carousel-item>
-        </el-carousel>
-      </div>
-    </div>
-
     <!-- 为什么选择我们 -->
     <div class="client-chose-box">
       <div class="client-container">
         <h4 class="client-title">为什么选择我们</h4>
         <ul class="chose-img-box">
           <li>
-            <div><i></i></div>
-            <h5>专业的顾问服务</h5>
+            <div>
+              <span><img :src="choseImg1" alt="专业的顾问服务" /></span>
+              <h5>专业的顾问服务</h5>
+            </div>
           </li>
           <li>
-            <div><i></i></div>
-            <h5>完善的培训体系</h5>
+            <div>
+              <span><img :src="choseImg2" alt="完善的培训体系" /></span>
+              <h5>完善的培训体系</h5>
+            </div>
           </li>
           <li>
-            <div><i></i></div>
-            <h5>可靠的开发技术</h5>
+            <div>
+              <span><img :src="choseImg3" alt="可靠的开发技术" style="margin-top: 65px;"/></span>
+              <h5>可靠的开发技术</h5>
+            </div>
           </li>
           <li>
-            <div><i></i></div>
-            <h5>成熟的运营能力</h5>
+            <div>
+              <span><img :src="choseImg4" alt="成熟的运营能力" /></span>
+              <h5>成熟的运营能力</h5>
+            </div>
           </li>
         </ul>
       </div>
     </div>
 
-    <!-- 我们始终专注教育系统研发更懂用户需求 -->
-    <div class="client-cert-box">
+    <!-- 新闻资讯 -->
+    <div class="client-news-information">
+      <h4 class="client-title">新闻资讯</h4>
       <div class="client-container">
-        <h4 class="client-title">我们始终专注教育系统研发更懂用户需求</h4>
-        <div class="cert-img-box">
-          <span><img :src="certImg3" alt="栋科课程管理系统" /></span>
-          <span><img :src="certImg4" alt="栋科用户管理系统" /></span>
-          <span><img :src="certImg6" alt="麦塔考试系统" /></span>
-          <span><img :src="certImg7" alt="麦塔培训系统" /></span>
-          <span><img :src="certImg8" alt="知识产权管理体系认证证书" /></span>
-        </div>
-        <!--<a class="client-default-Btn">了解更多</a>-->
+          <div class="industry-information-box">
+          <div class="industry-information-left">
+              <img :src="topCarousels[0].pic" alt="新闻资讯" />
+              <h4>{{ topCarousels[0].title }}<i></i></h4>
+              <div><b>{{ topCarousels[0].startTime.slice(0,4) }}</b><span>{{ topCarousels[0].startTime.slice(5,10) }}</span></div>
+              <p>{{ topCarousels[0].intro }}</p>
+          </div>
+          <div class="industry-information-right">
+            <ul>
+              <li v-for="(item, index) in topCarousels" v-if="index >= 1">
+                <h4 @click="checkInfo(item)"><span>{{ item.startTime.slice(0,4) }}</span>{{ item.title }}</h4>
+                <p><span>{{ item.startTime.slice(5,10)}}</span>{{ item.intro }}</p>
+              </li>
+            </ul>
+          </div>
+      </div>
       </div>
+      <!--<div class="information-carousel-box">
+        <el-carousel :interval="3000" arrow="always">
+          <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">
+              <h5>{{ item.title }}</h5>
+              <p>{{ item.intro }}</p>
+              <a class="client-default-Btn" @click="checkInfo(item)">了解详情</a>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </div>-->
+
     </div>
 
     <!-- 超过10万家客户的信任之选 -->
@@ -215,6 +194,20 @@
       </div>
     </div>
 
+    <!-- 我们始终专注教育系统研发更懂用户需求 -->
+    <div class="client-cert-box">
+      <div class="client-container">
+        <h4 class="client-title">我们始终专注教育系统研发更懂用户需求</h4>
+        <div class="cert-img-box">
+          <span><img :src="certImg3" alt="栋科课程管理系统" /></span>
+          <span><img :src="certImg4" alt="栋科用户管理系统" /></span>
+          <span><img :src="certImg7" alt="麦塔培训系统" /></span>
+          <span><img :src="certImg6" alt="麦塔考试系统" /></span>
+          <span><img :src="certImg8" alt="知识产权管理体系认证证书" /></span>
+        </div>
+        <!--<a class="client-default-Btn">了解更多</a>-->
+      </div>
+    </div>
 
     <el-dialog
       :close-on-click-modal="false"
@@ -277,6 +270,11 @@
         topCarousels2:  [],
         // 需求img
         bannerTelImg:   require(`~/static/images/client/index/index-banner-screen.png`),
+        // 为什么选择我们
+        choseImg1:   require(`~/static/images/client/index/index-chose-service-icon.png`),
+        choseImg2:   require(`~/static/images/client/index/index-chose-system-icon.png`),
+        choseImg3:   require(`~/static/images/client/index/index-chose-tech-icon.png`),
+        choseImg4:   require(`~/static/images/client/index/index-chose-operate-icon.png`),
         // 客户logo
         customerImg1:   require(`~/static/images/client/index/index-customer-img1.png`),
         customerImg2:   require(`~/static/images/client/index/index-customer-img2.png`),
@@ -308,6 +306,7 @@
         activeName:     'first',// tab页签
         kaoshiLiArray: [
           {
+            demandNumber:'01',
             demandTitle:'政府机构',
             demandHref:  'government',
             demandText:    '无论是国企还是私企，每年都要举行年度考核、党建考核等各种不同形式的考试。而传统考试方式，从出题、组卷、印刷，到安排场地、试卷分发等，成本较高，不能完全适应现代企业管理模式。',
@@ -323,6 +322,7 @@
             ],
           },
           {
+            demandNumber:'02',
             demandTitle:'信息产业',
             demandHref:  'information',
             demandText:    '近年来我国互联网继续保持增长态势，网络产业已经从过去的吸引眼球上逐渐转向以“盈利”为中心。如网络游戏、网上交易、网络广告、网络教育、网络短信等，新兴应用层出不穷，将推动产业融合发展和转型升级。',
@@ -338,6 +338,7 @@
             ],
           },
           {
+            demandNumber:'03',
             demandTitle:'能源化工',
             demandHref:  'energy',
             demandText:    '信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。',
@@ -361,6 +362,7 @@
             ],
           },
           {
+            demandNumber:'04',
             demandTitle:'金融保险',
             demandHref:  'finance',
             demandText:    '金融无处不在并已形成一个庞大体系，金融学涉及的范畴、分支和内容非常广，对员工的知识储备要求较高，相对的考核难度也较大。所以金融保险业更需要考核数据来作为依据，帮助提升业务能力。',
@@ -376,6 +378,7 @@
             ],
           },
           {
+            demandNumber:'05',
             demandTitle:'交通运输',
             demandHref:  'traffic',
             demandText:    '由于交通行业以技术先行，企业越来越需要具有扎实的汽车运用技术、交通运输系统规划与管理、物流系统工程等方面专业知识，并能独立从事汽车运用与管理的复合型高级工程技术人才，人才的培养格外重要。',
@@ -395,6 +398,7 @@
             ],
           },
           {
+            demandNumber:'06',
             demandTitle:'教育培训',
             demandHref:  'education',
             demandText:    '教培行业存在的教师教学水平参差不齐，教学质量难以提升等问题，麦塔不仅是考试出题软件，还是在线教学考试系统，非常适合培训机构前期营销获客以及后期模拟考试的场景。',
@@ -416,6 +420,7 @@
         ],
         peixunLiArray: [
           {
+            demandNumber:'01',
             demandTitle:'食品餐饮',
             demandHref:  'restaurant',
             demandText:    '随着社会经济的不断发展，餐饮文化的传播将越来越国际化和市场化。如何应对蓬勃发展的餐饮形势，不仅只是餐饮企业所面对的问题，同时也是烹饪教育应该思考的问题。',
@@ -431,6 +436,7 @@
             ],
           },
           {
+            demandNumber:'02',
             demandTitle:'教育培训',
             demandHref:  'education',
             demandText:    '教培行业存在的教师教学水平参差不齐，教学质量难以提升等问题，麦塔不仅是考试出题软件，还是在线教学考试系统，非常适合培训机构前期营销获客以及后期模拟考试的场景。',
@@ -446,6 +452,7 @@
             ],
           },
           {
+            demandNumber:'03',
             demandTitle:'医疗行业',
             demandHref:  'medical',
             demandText:    '医学类考试种类繁多，全国各级医学教育机构，如医学院，卫校，护校的本科，研究生，大中专教育培训考试等，一些医学高等院校的附属医院同时还有本科，研究生在校生的教学考试工作等。',
@@ -461,6 +468,7 @@
             ],
           },
           {
+            demandNumber:'04',
             demandTitle:'政府机构',
             demandHref:  'government',
             demandText:    '无论是国企还是私企，每年都要举行年度考核、党建考核等各种不同形式的考试。而传统考试方式，从出题、组卷、印刷，到安排场地、试卷分发等，成本较高，不能完全适应现代企业管理模式。',
@@ -476,6 +484,7 @@
             ],
           },
           {
+            demandNumber:'05',
             demandTitle:'能源化工',
             demandHref:  'energy',
             demandText:    '信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。',

static/images/client/component/nav-phone.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="19px" height="24px" viewBox="0 0 19 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>电 话</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="首页" transform="translate(-1406.000000, -29.000000)" fill-rule="nonzero">
-            <g id="电-话" transform="translate(1406.000000, 29.000000)">
-                <polygon id="路径" fill="#FFFFFF" points="9.24809384 12.626393 9.34809384 12.626393 9.34809384 12.726393 9.24809384 12.726393"></polygon>
-                <path d="M11.7549703,16.4820463 L12.3920054,16.0741246 C12.6428379,15.9194429 12.8485471,15.8030893 13.0542564,15.7072688 C14.5008568,15.0283118 15.7749268,15.5087834 17.4604154,17.5415478 C18.5035602,18.7995346 18.8127877,19.9151595 18.4106593,20.9089554 C18.110722,21.6522491 17.5320818,22.1642046 16.5035357,22.797989 C16.4371778,22.839055 15.843939,23.1949598 15.6926431,23.2907804 C13.297126,24.8156959 7.80800739,21.3264592 3.85971731,15.3636837 C-0.099190024,9.38585068 -1.12375471,3.01104682 1.30361421,1.46422948 L1.62345889,1.25479315 L1.97117385,1.02208611 C3.19879345,0.204873764 3.98447,-0.122284947 4.91613375,0.0406099783 C5.84514318,0.204873767 6.6374555,0.913945786 7.30501514,2.20752312 C8.71710947,4.94114633 8.40655489,6.23883026 6.59100503,7.41742294 C6.45961656,7.5050303 5.996439,7.79249193 5.95397,7.82123809 C5.50804547,8.10459313 6.26187027,10.0073153 8.01371662,12.6533312 C9.78679747,15.3280932 11.2692311,16.7900409 11.7536432,16.4820463 L11.7549703,16.4820463 L11.7549703,16.4820463 Z" id="路径" fill="#333333"></path>
-            </g>
-        </g>
-    </g>
-</svg>

static/images/client/index/index-chose-system-icon.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="54" height="49" viewBox="0 0 54 49">
-  <path fill="#FEBF11" fill-rule="evenodd" d="M36.9022918,18.9387581 C38.6206796,19.9322988 40.0054529,22.3356374 40,24.3040967 L39.9595126,38.5926791 C39.9540435,40.5699017 38.5594258,41.3662678 36.8421318,40.3716317 L27.9242351,35.2155172 L24.8156049,33.419038 L15.8911453,28.2585419 C14.1804142,27.2693829 12.794547,24.8660442 12.8,22.8888216 L12.8404874,8.60023917 C12.8459565,6.6317799 14.2405742,5.83650922 15.9513053,6.8245728 L36.9022918,18.9387581 Z" transform="translate(.6 .8)"/>
-</svg>

static/images/client/index/index-products-kaoshi-icon.svg

@@ -1,14 +0,0 @@
-<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>

static/images/client/index/index-products-peixun-icon.svg

@@ -1,3 +0,0 @@
-<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>