menu

src/router.js

@@ -28,11 +28,38 @@ const router = new Router({
                               base:   process.env.BASE_URL,
                               routes: [
                                   {
-                                      path:      '/',
+                                      path:     '/',
+                                      redirect: '/index',
+                                  },
+                                  {
+                                      name:      '首页',
+                                      path:      '/index',
                                       component: () => {
                                           return import(/* webpackChunkName: "index" */ './views/client/Index.vue');
                                       },
                                   },
+                                  {
+                                      name:      '课程开发',
+                                      path:      '/courseDev',
+                                      component: () => {
+                                          return import(/* webpackChunkName: "index" */ './views/client/CourseDev.vue');
+                                      },
+                                  },
+                                  {
+                                      name:      '首页',
+                                      path:      '/Index',
+                                      component: () => {
+                                          return import(/* webpackChunkName: "index" */ './views/client/Index.vue');
+                                      },
+                                  },
+                                  {
+                                      name:      '首页',
+                                      path:      '/Index',
+                                      component: () => {
+                                          return import(/* webpackChunkName: "index" */ './views/client/Index.vue');
+                                      },
+                                  },
+
                               ],
                           });
 

src/views/client/CourseDev.vue

@@ -0,0 +1,51 @@
+<template>
+    <div>
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+            <el-menu-item index="首页">首页</el-menu-item>
+            <el-menu-item index="考试平台">考试平台</el-menu-item>
+            <el-menu-item index="培训平台">培训平台</el-menu-item>
+            <el-menu-item index="课程开发">课程开发</el-menu-item>
+            <el-menu-item index="新闻资讯">新闻资讯</el-menu-item>
+            <el-menu-item index="帮助中心">帮助中心</el-menu-item>
+            <el-menu-item index="关于我们">关于我们</el-menu-item>
+        </el-menu>
+        课程开发
+    </div>
+</template>
+
+<script>
+    export default {
+        name:       'courseDev',
+        props:      {
+        },
+        data() {
+            return {
+                activeIndex:  '课程开发',
+            };
+        },
+        components: {},
+        computed:   {},
+        methods:    {
+            handleSelect(key, keyPath) {
+                if (key === '考试平台') {
+                    window.location.href = "https://www.baidu.com";
+                } else if (key === '培训平台') {
+                    window.location.href = "http://39.97.175.90:7788/zentao/my/";
+                } else {
+                    this.$router.push({ name: key });
+                }
+            },
+        },
+        created() {
+
+        },
+        mounted() {
+
+        },
+        beforeDestroy() {
+        },
+    };
+</script>
+<style>
+
+</style>

src/views/client/Index.vue

@@ -1,11 +1,27 @@
 <template>
-    <div class="mta-index">
-        <div class="block">
-            <el-carousel height="500px">
-                <el-carousel-item v-for="item in topCarousels" :key="item">
-                    <img :src="item" style="width: 100%; height: 100%">
-                </el-carousel-item>
-            </el-carousel>
+
+    <div>
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+            <el-menu-item index="首页">首页</el-menu-item>
+            <el-menu-item index="考试平台">考试平台</el-menu-item>
+            <el-menu-item index="培训平台">培训平台</el-menu-item>
+            <el-menu-item index="课程开发">课程开发</el-menu-item>
+            <el-menu-item index="新闻资讯">新闻资讯</el-menu-item>
+            <el-menu-item index="帮助中心">帮助中心</el-menu-item>
+            <el-menu-item index="关于我们">关于我们</el-menu-item>
+        </el-menu>
+
+
+        <div class="mta-index">
+            <div class="block">
+                <el-carousel :interval="200000" type="card" height="500px">
+                    <el-carousel-item v-for="item in topCarousels" :key="item">
+                        <div style="width: 1300px; height: 768px;">
+                            <img :src="item">
+                        </div>
+                    </el-carousel-item>
+                </el-carousel>
+            </div>
         </div>
     </div>
 </template>
@@ -22,25 +38,32 @@
         },
         data() {
             return {
-                topCarousels: []
+                activeIndex:  '首页',
+                topCarousels: [],
             };
         },
-        components: {
-
-        },
-        computed:   {
-        },
+        components: {},
+        computed:   {},
         methods:    {
             /*changeNotice() {
                 this.$router.push({ path: '/c/notice/lists' });
             },*/
+            handleSelect(key, keyPath) {
+                if (key === '考试平台') {
+                    window.location.href = "https://www.baidu.com";
+                } else if (key === '培训平台') {
+                    window.location.href = "http://39.97.175.90:7788/zentao/my/";
+                } else {
+                    this.$router.push({ name: key });
+                }
+            },
         },
         created() {
 
         },
         mounted() {
             for (let i = 0; i < 5; i++) {
-                this.topCarousels.push(require(`@/assets/images/client/carousels/${i + 1}.jpg`))
+                this.topCarousels.push(require(`@/assets/images/client/carousels/${i + 1}.jpg`));
             }
 
         },
@@ -48,3 +71,29 @@
         },
     };
 </script>
+<style>
+    .el-carousel__item img {
+        width: 50%;
+    }
+
+    .el-carousel__item.is-active img {
+        width: 100%;
+    }
+
+
+    .el-carousel__item {
+        color:       #475669;
+        font-size:   14px;
+        line-height: 200px;
+        margin:      0;
+    }
+
+    .el-carousel__item:nth-child(2n) {
+        background-color: #99A9BF;
+    }
+
+    .el-carousel__item:nth-child(2n+1) {
+        background-color: #D3DCE6;
+    }
+
+</style>