newproject

.eslintrc.js

@@ -1,17 +1,25 @@
 module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  'extends': [
-    'plugin:vue/essential',
-    '@vue/standard'
-  ],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  },
-  parserOptions: {
-    parser: 'babel-eslint'
-  }
-}
+    root: true,
+    env: {
+        node: true
+    },
+    'extends': [
+        'plugin:vue/essential',
+        '@vue/standard'
+    ],
+    rules: {
+        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+        // reset/ config is defind but never used。想要关闭这个提示需要在.eslintrc.js文件中修改配置：
+
+        "no-unused-vars": 'off',
+        //  去掉此项警告
+        "indent": ["off", 2],
+
+
+    },
+    parserOptions: {
+        parser: 'babel-eslint'
+    },
+
+}

src/App.vue

@@ -1,10 +1,18 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+      <div class="topNav">
+        <div id="nav" style="padding: 0px;background: #FFFFFF;    display: flex;flex-direction: row;justify-content: flex-end;
+                              position: relative;
+                              right: 121px;">
+          <img src="components/img/logo.png" alt="">
+          <router-link to="/">首页</router-link>
+          <router-link to="/teach">人才培养</router-link>
+          <router-link to="/news">新闻</router-link>
+          <router-link to="/about">关于我们</router-link>
+          <router-link to="/serve">服务</router-link>
+        </div>
+        <router-view/>
+      </div>
   </div>
 </template>
 <style lang="stylus">
@@ -12,14 +20,50 @@
   font-family 'Avenir', Helvetica, Arial, sans-serif
   -webkit-font-smoothing antialiased
   -moz-osx-font-smoothing grayscale
-  text-align center
+  //  text-align center
   color #2c3e50
 
 #nav
+  width 1440px
+  height 80px
   padding 30px
+  line-height 80px
   a
     font-weight bold
-    color #2c3e50
+    color #4A4A4A
+    margin-right 60px
+    width 100px
+    height 80px
+    text-align center
     &.router-link-exact-active
-      color #42b983
+      color #FFFFFF
+      margin-right 60px
+      margin-right 60px
+      width 100px
+      height 80px
+      text-align center
+      background-image: linear-gradient(-90deg, #30D5FF 0%, #749CF7 100%);
+.topNav{
+    position:absolute;
+    left:0px;
+    top:0px;
+    height:100px;
+    width: 1200px;
+
+}
+#navtext{
+    #u22 {
+    border-width:0px;
+    position:absolute;
+    left:400px;
+    top:30px;
+    width:41px;
+    height:24px;
+    font-family:'Arial Normal', 'Arial';
+    font-weight:400;
+    font-style:normal;
+    font-size:20px;
+    color:#666666;
+  }
+}
 </style>

src/router.js

@@ -2,24 +2,44 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Home from './views/Home.vue'
 
+import About from './views/About.vue'
 Vue.use(Router)
 
 export default new Router({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: Home
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
-    }
-  ]
-})
+    mode: 'history',
+    base: process.env.BASE_URL,
+    routes: [{
+            path: '/',
+            name: 'home',
+            component: Home
+        },
+        {
+            path: '/about',
+            name: 'about',
+            // route level code-splitting    /* eslint-disable */
+            // this generates a separate chunk (about.[hash].js) for this route
+            // which is lazy-loaded when the route is visited.
+            // component: () =>
+            //     import ( /* webpackChunkName: "about" */ './views/About.vue')
+            component: About
+        },
+        {
+            path: '/news',
+            name: 'news',
+            component: () =>
+                import ( /* webpackChunkName: "news" */ './views/News.vue')
+        },
+        {
+            path: '/teach',
+            name: 'teach',
+            component: () =>
+                import ( /* webpackChunkName: "teach" */ './views/Teach.vue')
+        },
+        {
+            path: '/serve',
+            name: 'serve',
+            component: () =>
+                import ( /* webpackChunkName: "serve" */ './views/Serve.vue')
+        }
+    ]
+})

src/views/About.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    
   </div>
 </template>
+
+<script>
+ 
+</script>
+

src/views/Home.vue

@@ -1,18 +1,107 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
+    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
     <HelloWorld msg="Welcome to Your Vue.js App"/>
+      <!-- 公司简介轮播图 (动态面板) -->
+        <div id="u1"  data-label="公司简介轮播图">
+              <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()"> 
+                      <div class="slideshow"> 
+                       <transition-group tag="ul" name="image"> 
+                        <li v-for="(item, index) in imgArray" v-show="index===mark" :key="index"> 
+                            <img :src="item" style="  width: 1440px; height: 400px; " > 
+                            <!-- <img src="../../images/u2.png" > -->
+                        </li> 
+                       </transition-group> 
+                      </div> 
+                      <div class="bullet"> 
+                       <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }"
+                       @click="change(index)" :key="index"></span> 
+                      </div> 
+              </div> 
+        </div>
   </div>
 </template>
 
+<style scoped>
+   .slideshow { 
+    width: 1440px; 
+    height: 400px; 
+   } 
+   .slideshow ul li{
+      list-style:none;
+    }
+     .active { 
+    background: red !important; 
+   } 
+     .image-enter-active { 
+    transform: translateX(0); 
+    transition: all 1.5s ease; 
+   } 
+   .image-leave-active { 
+    transform: translateX(-100%); 
+    transition: all 1.5s ease; 
+   } 
+   .image-enter { 
+    transform: translateX(100%); 
+   } 
+   .image-leave { 
+    transform: translateX(0); 
+   } 
+</style>
+
 <script>
 // @ is an alias to /src
 import HelloWorld from '@/components/HelloWorld.vue'
 
-export default {
-  name: 'home',
-  components: {
-    HelloWorld
-  }
-}
+// export default {
+//   name: 'home',
+//   components: {
+//     HelloWorld
+//   }
+// }
+
+ 
+ import img1 from "../views/images/u2.png"
+ import img2 from "../views/images/u3.png"
+ export default {
+                name: 'firstPage', 
+                data(){
+                  return{
+                          timer: null, //定时器 
+                          mark: 0, //比对图片索引的变量 
+                          //轮播图数据
+                          imgArray: 
+                          [ 
+                            img1,img2   
+                          ] ,
+                        }
+                    },
+                //点击切换图片
+                methods:
+                { 
+                      autoPlay ()
+                    { 
+                        this.mark++; 
+                        if (this.mark === 2) 
+                        { 
+                          this.mark = 0 
+                        } 
+                    }, 
+                    play () { 
+                    this.timer = setInterval(this.autoPlay, 1500) 
+                    }, 
+                    change (i) { 
+                    this.mark = i 
+                    }, 
+                    stop () { 
+                    clearInterval(this.timer) 
+                    }, 
+                    move () { 
+                    this.timer = setInterval(this.autoPlay, 1500) 
+                    } 
+                }, 
+                    created () { 
+                      this.play() 
+                    } 
+    }
 </script>

src/views/News.vue

@@ -0,0 +1,17 @@
+<template>
+ <div class="news" style="overflow:hidden"></div>
+</template>
+
+
+<script>
+export default {
+  name: 'News',
+//   props: {
+//     msg: String
+//   }
+   data() {
+      return {
+      };
+    }
+}
+</script>

src/views/Serve.vue

@@ -0,0 +1,18 @@
+<template>
+   <div id="right"></div>
+</template>
+
+
+<script>
+   
+      export default {
+        name: 'server', 
+        data(){
+            return{
+        
+         } },
+        
+      }
+</script>
+    
+      

src/views/Teach.vue

@@ -0,0 +1,17 @@
+<template>
+   <div id="right"></div>
+</template>
+
+
+<script>
+   
+      export default {
+        name: 'server', 
+        data(){
+            return{
+        
+         } },
+        
+      }
+</script>
+