模板修改

components/header.vue

@@ -3,42 +3,42 @@
     <div class="client-container head-layout">
 
       <!--   H5   -->
-      <div class="head-left mta-hidden-sm">
+      <div class="head-container-box mta-hidden-sm">
         <a :href="`${baseUrl}`" class="client-head-img"></a>
+        <!-- H5菜单 -->
         <h5Nav :class="navClass" @click="navChange"></h5Nav>
         <!-- 手机按钮 -->
         <div class="phone-nav-btn mta-hidden-sm" :class="{open: isOpen, close: !isOpen}" @click="changeHeadNav"></div>
       </div>
 
       <!--   PC   -->
-      <div class="head-left mta-hidden-xs">
+      <div class="head-container-box mta-hidden-xs">
         <a :href="`${baseUrl}`" class="client-head-img"></a>
-        <div>
-          <div class="header-left-container">
-            <div class="head-right mta-hidden-xs">
-              <a class="right-tel-btn">免费注册</a>
-              <div class="system-box">
-                <div>
-                  <a rel="nofollow" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank"><i></i>
-                    <p>考试系统</p></a>
-                  <span></span>
-                  <a rel="nofollow" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank"><i></i>
-                    <p>培训系统</p></a>
-                </div>
-              </div>
-              <a rel="nofollow" href="https://cdnks.mtavip.com/a/registerLogin" target="_blank">登录</a>
-            </div>
-          </div>
-          <div>
-            <!--      FIXME 自定义样式      -->
-            <div style="margin-top: 20px;">
-              <qgNav></qgNav>
+        <!-- PC菜单 -->
+        <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>
         </div>
       </div>
-
-
     </div>
   </nav>
 </template>

components/qgNav/index.vue

@@ -3,55 +3,48 @@
     <nuxt-link to="/" :class="{active : curActive === 'shouye'}">首页</nuxt-link>
 
     <el-popover
-      placement="bottom-start"
-      width="200"
-      trigger="hover"
+      placement="bottom"
+      trigger="click"
+      popper-class="head-popper-box cp-popper-box"
     >
-      <div>
-        <nuxt-link :to="item.url" v-for="(item,index) in chanpinfuwu" :key="index">
-          <div class="popover-left">
-            <img :src="item.img">
-          </div>
-          <div class="popover-left">
-            <span class="popover-left-title">{{ item.title }}</span>
-            <span class="popover-left-des">{{ item.des }}</span>
-          </div>
+        <nuxt-link :to="item.url" v-for="(item,index) in chanpinfuwu" :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>
-      </div>
       <span class="nav-btn" slot="reference" :class="{active: curActive === 'chanpinyufuwu'}">产品与服务<i class="el-icon-arrow-down el-icon--right"></i></span>
     </el-popover>
 
     <el-popover
-      placement="bottom-start"
-      width="200"
-      trigger="hover"
+      placement="bottom"
+      trigger="click"
+      popper-class="head-popper-box jj-popper-box"
     >
-      <div class="menu-container">
-        <div class="menu-item">
+      <div class="head-popper-content">
+        <div>
           <h3>场景解决方案</h3>
-          <div class="menu-item-container">
-            <nuxt-link :to="item.url" v-for="(item,index) in changjing" :key="index">
-              <div class="popover-left">
-                <img src="#">
-              </div>
-              <div class="popover-left">
-                <span class="popover-left-title">{{ item.title }}</span>
-                <span class="popover-left-des">{{ item.des }}</span>
-              </div>
+          <div class="head-popper-cj-row">
+            <nuxt-link :to="item.url" v-for="(item,index) in changjing" :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>
           </div>
         </div>
-        <div class="menu-item">
+        <em></em>
+        <div>
           <h3>行业解决方案</h3>
-          <div class="menu-item-container">
-            <nuxt-link :to="item.url" v-for="(item,index) in hangye" :key="index">
-              <div class="popover-left">
-                <img :src="item.img">
-              </div>
-              <div class="popover-left">
-                <span class="popover-left-title">{{ item.title }}</span>
-                <span class="popover-left-des">{{ item.des }}</span>
-              </div>
+          <div class="head-popper-hy-row">
+            <nuxt-link :to="item.url" v-for="(item,index) in hangye" :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>
           </div>
         </div>
@@ -71,25 +64,21 @@ export default {
     return {
       chanpinfuwu: [
         {
-          img: '#',
           title: '考试系统',
           des: '一款简单、好用的考试系统',
           url: '/product/exam'
         },
         {
-          img: '#',
           title: '培训系统',
           des: '企业一站式在线培训系统',
           url: '/product/peixun'
         },
         {
-          img: '#',
           title: '课程定制',
           des: '为企业量身定做专属课程',
           url: '/product/courseCustom'
         },
         {
-          img: '#',
           title: '课程资源',
           des: '企业优质通用课程资源',
           url: '/product/courseResource'
@@ -192,12 +181,3 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.active {
-  color: #f0bd16;
-}
-
-.nav-btn {
-  cursor: pointer;
-}
-</style>