优化导航

components/Menu.vue

+<template>
+  <ul class="nav-item-box" @mouseleave="navLeave">
+    <template v-for="(item, index) in navData">
+      <li :key="index">
+        <div :class="getNameActive(item)">
+          <template v-if="!item.path">
+            <template v-if="item.click">
+              <span @click="showEnroll">{{ item.name }}</span>
+            </template>
+            <template v-else>
+              {{ item.name }}
+            </template>
+          </template>
+          <template v-else>
+            <nuxt-link :to="item.path">{{ item.name }}</nuxt-link>
+          </template>
+        </div>
+        <div class="child-item" v-if="item.childern">
+          <div class="one-level">
+            <template v-for="(level2Item, level2Index) in item.childern">
+              <div
+                :class="$route.path === level2Item.path || level2Item.isShow ? 'li active' : 'li'"
+                :key="level2Index + 'level2'"
+                @mouseenter="levelShow(level2Item)"
+                @mouseleave="levelShow(level2Item, 'out')"
+              >
+                <app-link :item="{
+                  path: level2Item.path
+                }">
+                  <div class="name">
+                    {{ level2Item.name }}
+                  </div>
+                  <div class="el-icon-arrow-right" v-if="level2Item.childern"></div>
+                </app-link>
+              </div>
+            </template>
+          </div>
+        </div>
+      </li>
+    </template>
+  </ul>
+</template>
+<script>
+import AppLink from '@/components/Link'
+export default {
+  name: 'AppMenu',
+  components: { AppLink },
+  data() {
+    return {
+      navData: [
+        {
+          name: '项目介绍',
+          path: '/project-intro/bg',
+          childern: [
+            { name: '项目背景', path: '/project-intro/bg' },
+            { name: '项目特色', path: '/project-intro/charac' },
+            { name: '证书授予', path: '/project-intro/certificate' }
+          ]
+        },
+        {
+          name: '课程与师资',
+          path: '/about/course',
+          childern: [
+            { name: '课程设置', path: '/about/course' },
+            { name: '师资力量', path: '/about/teacher' }
+          ]
+        },
+        {
+          name: '最新动态',
+          path: '/news/hot',
+          childern: [
+            { name: '热点新闻', path: '/news/hot' },
+            { name: '教授采访', path: '/news/interview' }
+          ]
+        },
+        {
+          name: '招生信息',
+          path: '/apply/relevant',
+          childern: [
+            { name: '有关申请', path: '/apply/relevant' },
+            { name: '费用资助', path: '/apply/support' },
+            { name: '常见问题', path: '/apply/problem' }
+          ]
+        },
+        {
+          name: '校友风采',
+          path: '/alumni/outstanding',
+          childern: [
+            { name: '杰出校友', path: '/alumni/outstanding' },
+            { name: '校友分享', path: '/alumni/sharing' }
+          ]
+        },
+        {
+          name: '报名申请',
+          path: '/my'
+        }
+      ],
+      time: null
+    }
+  },
+  methods: {
+    navLeave() {
+      this.navData.map(item => {
+        if (item.childern) {
+          item.childern.map(cItem => {
+            cItem.isShow = false
+          })
+        }
+      })
+      this.$forceUpdate()
+    },
+    levelShow(item, isOut) {
+      if (item.childern) {
+        if (isOut) {
+          clearTimeout(this.time)
+          this.time = setTimeout(() => {
+            item.isShow = false
+          }, 500)
+          return
+        }
+        this.navLeave()
+        item.isShow = true
+      } else {
+        this.navLeave()
+      }
+    }
+  },
+  computed: {
+    getNameActive() {
+      return item => {
+        const currentPath = this.$route.path
+        if (currentPath.includes(item.path)) {
+          return 'name active'
+        } else {
+          let className = 'name'
+          if (item.childern) {
+            item.childern.map(cData => {
+              currentPath.includes(cData.path) && (className = 'name active')
+            })
+          }
+          return className
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.nav-item-box {
+  padding-left: 11px;
+  display: flex;
+  li {
+    position: relative;
+    margin-right: 60px;
+    .name {
+      line-height: 72px;
+      font-size: 22px;
+      color: #333333;
+      cursor: pointer;
+      a {
+        color: #333333;
+        font-size: 22px;
+        text-decoration: none;
+      }
+      &.active {
+        font-weight: 500;
+        color: #aa1941;
+        a {
+          // font-weight: 500;
+          color: #aa1941;
+        }
+      }
+    }
+    &:hover {
+      .name {
+        color: #aa1941;
+        font-weight: 500;
+        a {
+          // font-weight: 500;
+          color: #aa1941;
+        }
+      }
+      .child-item {
+        .one-level {
+          display: block;
+        }
+      }
+    }
+    .child-item {
+      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+      position: absolute;
+      top: 72px;
+      left: -10px;
+      display: flex;
+      background: #fff;
+      z-index: 999;
+      .one-level {
+        padding: 36px 24px 0;
+        border-top: 4px solid rgba(170, 25, 65, 1);
+        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+        display: none;
+        .li {
+          margin-bottom: 36px;
+          display: flex;
+          justify-content: space-between;
+          &.active {
+            .name {
+              color: rgba(170, 25, 65, 1);
+            }
+          }
+          .name {
+            font-weight: 400;
+            line-height: 100%;
+            color: #333333;
+            font-size: 16px;
+            white-space: nowrap;
+            a {
+              color: #333333;
+              font-size: 16px;
+            }
+          }
+          .el-icon-arrow-right {
+            color: rgba(51, 51, 51, 1);
+            margin-left: 15px;
+          }
+          &:hover {
+            .name {
+              color: rgba(170, 25, 65, 1);
+              a {
+                color: rgba(170, 25, 65, 1);
+              }
+            }
+            .el-icon-arrow-right {
+              color: rgba(170, 25, 65, 1);
+            }
+          }
+        }
+      }
+      .two-level {
+        pointer-events: auto;
+        padding: 34px 41px 0 24px;
+        .name {
+          font-size: 16px;
+          font-weight: 400;
+          line-height: 20px;
+          color: #333333;
+          margin-bottom: 36px;
+          white-space: nowrap;
+          &:hover {
+            color: rgba(170, 25, 65, 1);
+          }
+          a {
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 20px;
+            color: #333333;
+            margin-bottom: 36px;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

components/home/openClass.vue

@@ -64,7 +64,6 @@ export default {
       project_id: process.env.projectId
     }
     this.listData = await this.$axios.get('/api/zws/v1/cms/news', { params }).then(res => {
-      console.log(res)
       return res
     })
   },

components/home/presence.vue

@@ -137,7 +137,6 @@ export default {
       project_id: process.env.projectId
     }
     this.listData = await this.$axios.get('/api/zws/v1/cms/news', { params }).then(res => {
-      console.log(params)
       return res
     })
   },

components/rightAside.vue

@@ -129,7 +129,6 @@ export default {
       return new Promise((resolve, reject) => {
         postNes(params)
           .then(res => {
-            console.log(res)
             if (res && res.status === 200 && res.error === 0) {
               resolve({
                 type: 'enroll',
@@ -157,7 +156,6 @@ export default {
         }
         sendCode(param)
           .then(res => {
-            console.log(res)
             this.btnDisabledTimer()
             if (res && res.code === 0) this.$message.success('验证码已发送，请注意查收')
             else this.$message.error('获取验证码失败，请稍后再试')
@@ -172,7 +170,6 @@ export default {
       }
       return new Promise((resolve, reject) => {
         checkCode(checkCodeParam).then(res => {
-          console.log(res)
           if (res && res.code === 0) {
             res.type = 'checkcode'
             resolve({

modules/letter/index.vue

@@ -103,7 +103,6 @@ export default {
     // 提交推荐信
     handleAddRequest() {
       api.addLetter(this.userId, this.letterId, this.ruleForm).then(response => {
-        console.log(response)
         const { error, message } = response
         if (error.toString() === '0') {
           this.dialogVisible = true

modules/my/account/password.vue

@@ -95,7 +95,6 @@ export default {
       api
         .sendCode({ account: this.ruleForm.account })
         .then(response => {
-          console.log(response)
           if (response.code === 0) {
             this.$message({ type: 'success', message: '验证码已发送' })
           } else {

pages/about/course.vue

@@ -170,7 +170,6 @@ export default {
     }
   },
   mounted() {
-    console.log(this.$route)
   }
 }
 </script>

pages/about/teacher.vue

@@ -121,7 +121,6 @@ export default {
     }
   },
   mounted() {
-    console.log(this.$route)
   }
 }
 </script>

pages/alumni/outstanding.vue

@@ -4,7 +4,7 @@
       <div class="alumni">
         <h5>KELLEY商学院杰出校友</h5>
         <ul class="card-list">
-          <li v-for="item in alumniList" :key="item.name">
+          <li v-for="(item, index) in alumniList" :key="index">
             <div class="avatar">
               <img :src="item.avatar" />
             </div>