1.主要内容区域大小修改

2.head修改

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

@@ -123,7 +123,7 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 
 
 /************************ 网站公共class样式 author: TX  date:2020-07-30 **********************/
-/* 网站框架 */
+/**************** 网站框架 ****************/
 .website-frame{
   font-family: "Helvetica Neue", Helvetica, Arial, "微软雅黑", sans-serif;
   color: #2C3E50;
@@ -139,123 +139,58 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 
 /*  网站主体部分 */
 .client-container{
-  width: 1200px;margin: 0 auto;
+  width: 1260px;margin: 0 auto;
   @media (max-width: 768px){width: auto;padding: 0 15px;max-width: 100%;box-sizing: border-box;}
 }
 .client-container-middle{width: 960px;margin: 0 auto;}
 
+/**************** 网站头部 ****************/
 /* 网站头部导航栏 */
 .client-head{
   width: 100%;
   //height: 80px;
-  height: 120px;
+  height: 72px;
   z-index: 999;
   background: #fff;
   position: fixed;
   top:0;
+  box-shadow: -6px 0px 16px 6px #d6d6d6;
 
   //头部布局
-  .head-layout{display: flex;justify-content: space-between;}
+  .head-layout{height:72px;display: flex;justify-content: space-between;@include setFontStyle(-4);}
 
   //头部导航
-  .el-menu--horizontal{
-    border: 0;
-    li:last-child{margin-right: 0}
-      >.el-menu-item {
-        color: rgba(0,0,0,0.85);
-        @include setFontStyle(-2);
-        height: 60px;
-        line-height: 60px;
-        margin: 0 30px;
-        padding: 0!important;
-        a{height: inherit;display: inline-block;padding: 0 6px;}
-      }
-      >.el-menu-item.is-active{
-        @include setThemeColorBase("color", 0);
-        @include setThemeColorBase("border-color", 0);
-        border-width:4px;
-      }
+  .header-nav{
+    color: #333333;
+    >span,>a{margin: 0 30px}
+    >a:last-child{margin-right: 0;}
+    >a:visited{color: #333333;}
+    >a.active {color: #00B96B;position: relative;}
+    .active:before{
+      content: '';width: 88%;height: 2px;background-color:#00B96B;
+      display: block;position: absolute;bottom: -6px;left: 6%;
+    }
   }
 
   //头部左侧区域
-  .head-left{
+  .head-container-box{
     display: flex;
     width: 100%;
     justify-content: space-between;
     align-items: center;
     //头部图标
-    .client-head-img{width: 200px;height:79px;display: inline-block;background-image: url("~static/images/client/component/nav-logo.jpg");background-repeat: no-repeat;background-position: center;background-size: cover;margin-right: 40px;}
+    .client-head-img{width: 112px;height:51px;display: inline-block;background-image: url("~static/images/client/component/nav-logo.png");background-repeat: no-repeat;background-position: center;background-size: cover;margin-right: 40px;}
   }
 
   //头部右侧区域
   .head-right{
-      line-height: 60px;position: relative;
-      >a{height: 40px;line-height: 40px;@include setFontStyle(-4);padding: 0 30px;border-radius: 4px;display: inline-block;border: 1px solid #0366cd;color:#0064cc;box-sizing: border-box;text-align: center;}
-      >a.right-tel-btn{width: 130px;color: #fff;background: #3e7ce7;border: 1px solid #3e7ce7;padding: 0 8px;margin-right:10px;position: relative;}
+    display: flex;align-items:center;position: relative;border: 1px solid #00B96B;border-radius: 18px;
+      >a,.right-tel-btn{width:85px;height: 34px;line-height: 36px;@include setFontStyle(-7);display: inline-block;color:#00B96B;
+        text-align: center;cursor: pointer;}
+      .right-tel-btn{color: #fff;background: #00B96B;position: relative;border-radius: 0 18px 18px 0;cursor: default;}
       >a:hover{cursor: pointer;}
-      .system-box{width: 130px;height: 60px;position: absolute;top: 20px; z-index: 999}
-      .system-box{
-         div{
-          display: none;min-width:260px;height:120px;position: absolute;background: #fff;border: 1px solid #b5b5b5;border-radius: 4px;padding: 10px 8px;left: 0;top:57px;transition: 5s;
-          a{
-            display: inline-block;
-            i{width: 110px;height: 84px;display: block;background-size: cover;}
-          }
-          a:nth-child(1){i{background-image:url("~static/images/client/exam/product-function-icon3.png");} }
-          a:nth-child(3){i{background-image:url("~static/images/client/train/product-function-icon6.png");} }
-          span{width: 1px;min-height: 88px;display:inline-block;background:#e8e8e8;@include setFontStyle(-4);margin: 10px;}
-          p{@include setFontStyle(-4);color: rgba(0,0,0,0.85);line-height: 24px;text-align: center;}
-        }
-        // 伪类气泡箭头
-        div:after,div:before {
-          width: 0;
-          height: 0;
-          font-size: 0;
-          overflow: hidden;
-          position: absolute;
-          content: ' ';
-          left: 60px;
-        }
-        div:after{
-          border-width: 10px;
-          border-style: dashed dashed solid ;
-          border-color: transparent transparent #ffffff;
-          top: -19px;
-        }
-        div:before{
-          border-width: 10px;
-          border-style: dashed dashed solid ;
-          border-color: transparent transparent #666 ;
-          top:-20px;
-        }
-      }
-    .system-box:hover{
-      >div{
-        display: block;
-      }
-    }
   }
 
-  .header-left-container {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-
-    .phone-tel-box {
-      margin-right: 20px;
-      display: flex;
-      color: rgb(0, 84, 145);
-      align-items: center;
-
-      .phone-tel-box-icon {
-        width: 25px;
-        height: 25px;
-        display: inline-block;
-        margin-right: 5px;
-        background-image: url("~static/images/client/component/head-phone-icon.png");
-      }
-    }
-  }
 
   // head移动端响应式
   @media (max-width: 768px){
@@ -263,7 +198,7 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
     height: 60px;border-bottom: 1px solid #e7e7e7;
 
       //头部左侧区域 logo
-    .head-left{
+    .head-container-box{
         justify-content: space-between;height: 60px;align-items: center;padding:0;
         .client-head-img{width: 92px;height: 46px;background-size: contain;margin:0;}
     }
@@ -290,9 +225,81 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   }
 }
 
+/* 导航二级菜单 */
+.head-popper-box{
+  width: 920px;display: flex;align-items: center;
+  // 箭头
+  .popper__arrow::after {
+    content: ' ';width: 0;height: 0;overflow: hidden;position: absolute;
+    border-width: 6px;border-style: dashed dashed solid ;
+    border-color: transparent transparent #00B96B !important;
+    top:-12px;
+  }
+
+  // 列表
+  .head-popper-item{
+      width: 23%;display: flex;margin: 16px 1%;align-items: center;
+      i{width: 34px;height: 34px;background-size: contain;display: inline-block;margin-right: 16px;background-repeat:no-repeat;background-position: center;}
+    .head-popper-title{@include setFontStyle(-6);color: #333;margin-bottom: 4px;display: inline-block;}
+    .head-popper-des{display:block;@include setFontStyle(-8);color: #9c9c9c;}
+  }
+}
+.head-popper-box:before{
+  content: ' ';width: 100%;height: 2px;position: absolute;
+  left: 0;top: 0;background-color: #00b96b;border-radius: 4px 4px 0 0;
+}
+
+/*  产品 二级菜单 */
+.cp-popper-box{
+  margin-top: 24px!important;
+  // 列表
+  .head-popper-item:nth-child(1){i{background-image:url("~static/images/client/component/head-cp-icon1.png");} }
+  .head-popper-item:nth-child(2){i{background-image:url("~static/images/client/component/head-cp-icon2.png");} }
+  .head-popper-item:nth-child(3){i{background-image:url("~static/images/client/component/head-cp-icon3.png");} }
+  .head-popper-item:nth-child(4){i{background-image:url("~static/images/client/component/head-cp-icon4.png");} }
+}
+
+/*  解决方案 二级菜单 */
+.jj-popper-box{
+  padding: 24px 42px;box-sizing: border-box;margin-top: 24px!important;
+  // head-popper-content
+  .head-popper-content{width: 100%;}
+  // 横线
+  em{width: 800px;height: 1px;display: block;margin:10px auto 24px;background: #f2f2f2;}
+  // 标题
+  h3{font-size: 16px;font-weight: 700;text-align: left;color: #333333;margin-left: 12px;}
+  // 列表行
+  .head-popper-cj-row,.head-popper-hy-row{display: flex;align-items: center;flex-wrap: wrap;}
+  // 场景解决方案 - icon
+  .head-popper-cj-row{
+    .head-popper-item:nth-child(1){i{background-image:url("~static/images/client/component/head-jj-icon1.png");} }
+    .head-popper-item:nth-child(2){i{background-image:url("~static/images/client/component/head-jj-icon2.png");} }
+    .head-popper-item:nth-child(3){i{background-image:url("~static/images/client/component/head-jj-icon3.png");} }
+    .head-popper-item:nth-child(4){i{background-image:url("~static/images/client/component/head-jj-icon4.png");} }
+  }
+  // 行业解决方案 - icon
+  .head-popper-hy-row{
+    .head-popper-item:nth-child(1){i{background-image:url("~static/images/client/component/head-jj-icon5.png");} }
+    .head-popper-item:nth-child(2){i{background-image:url("~static/images/client/component/head-jj-icon6.png");} }
+    .head-popper-item:nth-child(3){i{background-image:url("~static/images/client/component/head-jj-icon7.png");} }
+    .head-popper-item:nth-child(4){i{background-image:url("~static/images/client/component/head-jj-icon8.png");} }
+    .head-popper-item:nth-child(5){i{background-image:url("~static/images/client/component/head-jj-icon9.png");} }
+    .head-popper-item:nth-child(6){i{background-image:url("~static/images/client/component/head-jj-icon10.png");} }
+    .head-popper-item:nth-child(7){i{background-image:url("~static/images/client/component/head-jj-icon11.png");} }
+  }
+}
+
+/*  免费注册 二级菜单 */
+.system-popper-box{
+  width: 450px;margin-top: 12px!important;
+  .head-popper-item{width: 50%;margin: 16px auto;}
+  .head-popper-item:nth-child(1){i{background-image:url("~static/images/client/component/head-exam-icon.png");} }
+  .head-popper-item:nth-child(2){i{background-image:url("~static/images/client/component/head-train-icon.png");} }
+}
+
 /* 网站头部导栏 - 面包屑 */
 .client-breadcrumb-box {
-  width: 1200px;
+  width: 1260px;
   font-size: 16px;
   margin: 24px auto;
   .st-breadcrumb{
@@ -318,6 +325,7 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   }
 }
 
+/**************** 网站内容 ****************/
 /* 网站标题 */
 .client-title{
   @include setFontStyle(10);color: rgba(0,0,0,0.85);letter-spacing: 0;padding-top: 80px;text-align: center;
@@ -429,7 +437,7 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 
   //行业资讯详情外层box
   .client-details-box{
-    width: 1200px;
+    width: 1260px;
     margin: 0 auto;
     padding: 24px;
     box-sizing: border-box;

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

@@ -710,8 +710,8 @@
 
     // banner
     .aboutUs-banner{width: 100%;height: 305px;background-image: url("~static/images/client/aboutUs/aboutUs-banner-bg.png");
-        span{width: 1200px;overflow: hidden;display: block;margin: 0 auto;}
-        img{width: 1200px;overflow: hidden;margin: 0 auto;display: block}
+        span{width: 1260px;overflow: hidden;display: block;margin: 0 auto;}
+        img{width: 1260px;overflow: hidden;margin: 0 auto;display: block}
       }
 
     // 公司简介
@@ -896,7 +896,7 @@
     // banner
     .newsInfor-banner{
       width: 100%;height: 305px;background-image: url("~static/images/client/newsInfor/newsInfor-banner-bg.png");overflow: hidden;
-      img{width: 1200px;overflow: hidden;margin: 0 auto;display: block}
+      img{width: 1260px;overflow: hidden;margin: 0 auto;display: block}
     }
 
     // 菜单 ul
@@ -1300,7 +1300,7 @@
     .medical-change-box{
       background: #F9FAFF;
       padding-bottom: 80px;
-      .industrydetails-content{width: 1200px;height: 316px;background-image: url("~static/images/client/industrydetails/medical-change-bg.png");}
+      .industrydetails-content{width: 1260px;height: 316px;background-image: url("~static/images/client/industrydetails/medical-change-bg.png");}
       .change-content-left,.change-content-right{
         width: 600px;display:inline-block;vertical-align: top;
         ul{margin-left: 42px;}

components/header.vue

@@ -18,25 +18,20 @@
         <qgNav></qgNav>
         <div class="head-right">
           <a rel="nofollow" href="https://cdnks.mtavip.com/a/registerLogin" target="_blank">登录</a>
-          <a class="right-tel-btn">免费注册</a>
-          <div class="system-box">
-            <div class="system-change-box">
-                <a rel="nofollow" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">
-                  <i></i>
-                  <p>
-                    <span class="system-title">考试系统</span>
-                    <span>简单好用的SaaS考试系统</span>
-                  </p>
-                </a>
-              <a rel="nofollow" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">
-                <i></i>
-                <p>
-                  <span class="system-title">培训系统</span>
-                  <span>学练考评一站式培训系统</span>
-                </p>
-              </a>
-            </div>
-          </div>
+          <el-popover
+            placement="bottom"
+            trigger="hover"
+            popper-class="head-popper-box system-popper-box"
+          >
+            <nuxt-link :to="item.url" v-for="(item,index) in systemList" :key="index" class="head-popper-item">
+              <i></i>
+              <p>
+                <span class="head-popper-title">{{ item.title }}</span>
+                <span class="head-popper-des">{{ item.des }}</span>
+              </p>
+            </nuxt-link>
+            <a class="right-tel-btn" slot="reference">免费注册</a>
+          </el-popover>
         </div>
       </div>
     </div>
@@ -72,6 +67,18 @@ export default {
   },
   data() {
     return {
+      systemList: [
+        {
+          title: '考试系统',
+          des: '简单好用的SaaS考试系统',
+          url: 'https://cdnks.mtavip.com/a/register?flug=1'
+        },
+        {
+          title: '培训系统',
+          des: '学练考评一站式培训系统',
+          url: 'https://cdnks.mtavip.com/a/register?flug=2'
+        },
+      ],
       navClass: 'head-nav-up',
       headerArr: [
         {

components/qgNav/index.vue

@@ -4,7 +4,7 @@
 
     <el-popover
       placement="bottom"
-      trigger="click"
+      trigger="hover"
       popper-class="head-popper-box cp-popper-box"
     >
         <nuxt-link :to="item.url" v-for="(item,index) in chanpinfuwu" :key="index" class="head-popper-item">
@@ -19,7 +19,7 @@
 
     <el-popover
       placement="bottom"
-      trigger="click"
+      trigger="hover"
       popper-class="head-popper-box jj-popper-box"
     >
       <div class="head-popper-content">