导航组件

components/mtaNav/pcNav.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="header-nav">
+    <nuxt-link to="/" :class="{active : curActive === 'shouye'}">首页</nuxt-link>
+    <nuxt-link to="/examsystem" class="xwzx-row" :class="{'active': curActive === 'examsystem'}">考试系统</nuxt-link>
+    <nuxt-link to="/trainsystem" class="xwzx-row" :class="{'active': curActive === 'trainsystem'}">培训系统</nuxt-link>
+    <el-popover
+      placement="bottom"
+      trigger="click"
+      popper-class="head-popper-box cp-popper-box"
+    >
+        <nuxt-link :to="item.url" v-for="(item,index) in kckfList" :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>
+      <span class="head-nav-btn" slot="reference" :class="{active: curActive === 'courseware'}">产品与服务<i class="el-icon-arrow-down el-icon--right"></i></span>
+    </el-popover>
+    <nuxt-link to="/news" :class="{active: curActive === 'news'}">新闻资讯</nuxt-link>
+    <nuxt-link to="/introduction" :class="{active: curActive === 'introduction'}">关于我们</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "pcNav",
+  data() {
+    return {
+      kckfList: [
+        {
+          img: '#',
+          title: '梗概',
+          des: '为企业量身定做专属课程',
+          url: '/courseware/synopsis'
+        },
+        {
+          img: '#',
+          title: '课程定制',
+          des: '海量精品课程专业定制',
+          url: '/courseware/custom'
+        },
+        {
+          img: '#',
+          title: '平台运营',
+          des: '完善的平台运营体系',
+          url: '/courseware/platform'
+        },
+        {
+          img: '#',
+          title: '课程大赛',
+          des: '助力企业推动培训学习进程',
+          url: '/courseware/compete'
+        }
+      ],
+    }
+  },
+  methods:{
+    headNavClick(){
+      this.$emit('headNavClick')
+    },
+  },
+  computed: {
+    curActive() {
+      const courseware = this.kckfList.map(item => item.url);
+      const routerPath = this.$route.path
+      // 首页
+      if (routerPath === '/' || routerPath === '/index') {
+        return 'shouye'
+      }  else if (routerPath === '/examsystem') {
+        return 'examsystem'
+      }else if (routerPath === '/trainsystem') {
+        return 'trainsystem'
+      } else if (routerPath === '/news') {
+        return 'news'
+      } else if (routerPath === '/introduction') {
+        return 'introduction'
+      } else if (courseware.some(path => path === routerPath)) {
+        return 'courseware'
+      }
+    }
+  },
+  watch: {
+    '$route.path': {
+      handler(newVal) {
+        console.log(newVal)
+        this.$emit('navChange',newVal)
+      },
+      immediate: true,
+    }
+  }
+}
+</script>
+<style lang="scss">
+  //头部导航
+  .header-nav {
+    > span, > a {
+      height: 60px;
+      line-height: 60px;
+      font-size: 18px;
+      margin: 0 42px;
+      color: #333333;
+    }
+
+    > a:last-child {
+      margin-right: 0;
+    }
+
+    > a:visited {
+      color: #333333;
+    }
+
+    > a.active {
+      color: #2b5cfd;
+      position: relative;
+    }
+
+    .active:before {
+      content: '';
+      width: 100%;
+      bottom: -10px;
+      left: 0;
+      height: 2px;
+      background-color: #2b5cfd;
+      display: block;
+      position: absolute;
+    }
+
+    // 导航按钮
+    .head-nav-btn.active {
+      position: relative;
+    }
+
+    .head-nav-btn.active:before {
+      width: 70%;
+      bottom: -10px;
+      left: 4%;
+    }
+  }
+  /* 导航二级菜单 */
+  .head-popper-box {
+    width: 940px;
+    display: flex;
+    align-items: center;
+    top:104px!important;
+    // 箭头
+    .popper__arrow::after {
+      content: ' ';
+      width: 0;
+      height: 0;
+      overflow: hidden;
+      position: absolute;
+      border-width: 6px;
+      border-style: dashed dashed solid;
+      border-color: transparent transparent #2b5cfd !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 {
+        font-size: 14px;
+        color: #333;
+        margin-bottom: 4px;
+        display: inline-block;
+      }
+
+      .head-popper-des {
+        display: block;
+        font-size: 12px;
+        color: #9c9c9c;
+      }
+    }
+    // 列表
+    .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");
+      }
+    }
+  }
+
+  .head-popper-box:before {
+    content: ' ';
+    width: 100%;
+    height: 2px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: #2b5cfd;
+    border-radius: 4px 4px 0 0;
+  }
+</style>

components/mtaNav/sjNav.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="phone-popper-box">
+    <nuxt-link to="/" class="xwzx-row" :class="{'menu-active': curActive === 'shouye'}">首页</nuxt-link>
+    <nuxt-link to="/examsystem" class="xwzx-row" :class="{'menu-active': curActive === 'examsystem'}">考试系统</nuxt-link>
+    <nuxt-link to="/trainsystem" class="xwzx-row" :class="{'menu-active': curActive === 'trainsystem'}">培训系统</nuxt-link>
+    <el-collapse accordion>
+      <el-collapse-item title="课程开发" :class="{'menu-active': curActive === 'courseware'}">
+        <nuxt-link :to="item.url" v-for="(item,index) in kckfList" :key="index" class="cpfw-popper-item">
+          <i></i>
+          <p>
+            <span class="phone-popper-title">{{ item.title }}</span>
+            <span class="phone-popper-des">{{ item.des }}</span>
+          </p>
+        </nuxt-link>
+      </el-collapse-item>
+    </el-collapse>
+    <nuxt-link to="/news" class="xwzx-row" :class="{'menu-active': curActive === 'news'}">新闻资讯</nuxt-link>
+    <nuxt-link to="/introduction" :class="{'menu-active': curActive === 'introduction'}">关于我们</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "sjNav",
+  data() {
+    return {
+      kckfList: [
+        {
+          img: '#',
+          title: '梗概',
+          des: '为企业量身定做专属课程',
+          url: '/courseware/synopsis'
+        },
+        {
+          img: '#',
+          title: '课程定制',
+          des: '海量精品课程专业定制',
+          url: '/courseware/custom'
+        },
+        {
+          img: '#',
+          title: '平台运营',
+          des: '完善的平台运营体系',
+          url: '/courseware/platform'
+        },
+        {
+          img: '#',
+          title: '课程大赛',
+          des: '助力企业推动培训学习进程',
+          url: '/courseware/compete'
+        }
+      ],
+    }
+  },
+  computed: {
+    curActive() {
+      const courseware = this.kckfList.map(item => item.url);
+      const routerPath = this.$route.path
+      // 首页
+      if (routerPath === '/' || routerPath === '/index') {
+        return 'shouye'
+      }  else if (routerPath === '/examsystem') {
+        return 'examsystem'
+      }else if (routerPath === '/trainsystem') {
+        return 'trainsystem'
+      } else if (routerPath === '/news') {
+        return 'news'
+      } else if (routerPath === '/introduction') {
+        return 'introduction'
+      } else if (courseware.some(path => path === routerPath)) {
+        return 'courseware'
+      }
+    }
+  },
+  watch: {
+    '$route.path': {
+      handler(newVal) {
+         console.log(newVal)
+        this.$emit('navChange')
+      },
+      immediate: true,
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.phone-popper-box {
+  position: absolute;
+  top: 61px;
+  background: #fff;
+  width: 100%;
+  left: 0;
+  padding: 0 15px;
+  box-sizing: border-box;
+  overflow: auto;
+  height: calc(100vh - 112px);
+  >a,.el-collapse-item__header{
+    height: 60px;
+    line-height: 60px;
+    display: block;
+    font-size: 16px;
+    color: #101010;
+    font-weight: 700;
+  }
+  .el-collapse{border-top:0;}
+  .el-collapse-item__header{ display: flex;}
+  // 新闻资讯
+  .xwzx-row{border-bottom: 1px solid #EBEEF5;}
+
+  // 产品服务 - 二级菜单
+  .cpfw-popper-item{
+    width: 100%;height: 80px;border-radius: 5px;background-color: rgba(187, 187, 187, 0.2);
+    margin-bottom: 10px;display: flex;align-items: center;padding: 20px;box-sizing: border-box;
+    i{width: 34px;height: 34px;background-size: contain;display: inline-block;margin-right: 16px;background-repeat:no-repeat;background-position: center;}
+    .phone-popper-title{font-size: 14px;color: #333;margin-bottom: 4px;display: inline-block;}
+    .phone-popper-des{display:block;font-size: 12px;color: #9c9c9c;}
+
+    // 列表
+    &:nth-child(1){i{background-image:url("~static/images/client/component/head-cp-icon1.png");} }
+    &:nth-child(2){i{background-image:url("~static/images/client/component/head-cp-icon2.png");} }
+    &:nth-child(3){i{background-image:url("~static/images/client/component/head-cp-icon3.png");} }
+    &:nth-child(4){i{background-image:url("~static/images/client/component/head-cp-icon4.png");} }
+  }
+
+  // 解决方案 - 二级菜单
+  .jjfa-popper-content{
+    width: 100%;border-radius: 5px;background-color: rgba(187, 187, 187, 0.2);margin-bottom: 10px;padding: 10px;box-sizing: border-box;
+    h3{font-size: 14px;color: #333;display: block;font-weight: 700;margin-left: 8px;}
+    .jjfa-link-box{width: 100%;display: flex;flex-wrap: wrap;}
+    a{width: 33.33%;padding: 5px 8px;box-sizing: border-box}
+    .jjfa-popper-title{width:100%;height: 24px;line-height: 24px;text-align:center;display:inline-block;
+      font-size: 12px;color: rgba(16, 16, 16, 100);border-radius: 5px;border: 1px solid rgba(187, 187, 187, 100);}
+  }
+
+  // 菜单选中
+  .menu-active {
+    color: #2b5cfd;
+    div.el-collapse-item__header {
+      color: #2b5cfd;
+    }
+  }
+
+}
+</style>