框架搭好

src/App.vue

@@ -1,32 +1,77 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+    <div id="app" @mousemove="mousemove">
+        <nav id="nav" :style="{ height: navHeight + 'px' }">
+            <router-link to="/" class="a">首页</router-link>
+            <router-link to="/monitor" class="a">视频监控</router-link>
+            <router-link to="/biology" class="a">生物防控</router-link>
+            <router-link to="/robot" class="a">机器人巡查</router-link>
+            <router-link to="/environmentalProtection" class="a"
+                >环保监测</router-link
+            >
+        </nav>
+        <header class="header">华腾石湾乡村振兴智能化管理平台</header>
+        <router-view />
     </div>
-    <router-view/>
-  </div>
 </template>
 
+<script>
+export default {
+    name: "app",
+    data() {
+        return {
+            navHeight: 0,
+        };
+    },
+    mounted() {},
+    methods: {
+        mousemove(e) {
+            if (e.y <= 80) {
+                this.navHeight = 80;
+            } else {
+                this.navHeight = 0;
+            }
+        },
+    },
+};
+</script>
+
 <style lang="scss">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
+    height: 100%;
+	min-width: 1600px;
+	min-height: 800px;
+	background-color: #060A2D;
+	display: flex;
+	flex-direction: column;
+    #nav {
+        width: 100%;
+        position: fixed;
+        background-color: #0e1e51;
+        color: #eee;
+        transition: height 0.4s;
+        overflow: hidden;
+        line-height: 80px;
+        padding-left: 30px;
+        .a {
+            color: #eee;
+            margin: 0 20px;
+            padding: 12px;
+            background-color: #142b77;
+            border-radius: 6px;
+        }
+    }
+    > .header {
+        // border: 1px solid #8877dd;
+        background: url(./assets/bg_header.png) no-repeat;
+        background-size: 100% 100%;
+        width: 100%;
+        height: 80px;
+        line-height: 50px;
+        // font-size: 1.3vw;
+        font-size: 22px;
+        font-weight: 600;
+        color: #fff;
+        text-align: center;
     }
-  }
 }
 </style>

src/assets/css/reset.scss

@@ -0,0 +1,10 @@
+/* 公用scss */
+div,h1,h2,h3,h4,h5,h3,body,html,ul,li,p{margin: 0;padding: 0;}
+a{text-decoration: none;}
+li{list-style:none;} 
+/*css初始化完成*/ 
+html,body{
+    width: 100%;
+    height: 100%;
+    // overflow: hidden;
+}

src/components/HelloWorld.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import './assets/css/reset.scss'
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -1,27 +1,39 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)
 
 const 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')
-  }
+	{
+		path: '/',
+		name: 'Home',
+		component: () => import('@/views/home/Home.vue')
+	},
+	{
+		path: '/monitor',
+		name: 'monitor',
+		component: () => import('@/views/monitor/monitor.vue')
+	},
+	{
+		path: '/biology',
+		name: 'biology',
+		component: () => import('@/views/biology/biology.vue')
+	},
+	{
+		path: '/robot',
+		name: 'robot',
+		component: () => import('@/views/robot/robot.vue')
+	},
+	{
+		path: '/environmentalProtection',
+		name: 'environmentalProtection',
+		component: () => import('@/views/environmentalProtection/environmentalProtection.vue')
+	},
+	
 ]
 
 const router = new VueRouter({
-  routes
+	routes
 })
 
 export default router

src/views/About.vue

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

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
-</script>

src/views/biology/biology.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="biology">
+        biology
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: "biology",
+    components: {},
+    data() {
+		return {}
+    },
+    created() {},
+	methods: {}
+};
+</script>
+
+<style lang="scss" scope>
+.biology {
+    border: 1px solid rgb(13, 83, 212);
+    box-sizing: border-box;
+    flex-grow: 1;
+    color: #eee;
+}
+</style>

src/views/environmentalProtection/environmentalProtection.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="environmentalProtection">
+        environmentalProtection
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: "environmentalProtection",
+    components: {},
+    data() {
+		return {}
+    },
+    created() {},
+	methods: {}
+};
+</script>
+
+<style lang="scss" scope>
+.environmentalProtection {
+    border: 1px solid rgb(13, 83, 212);
+    box-sizing: border-box;
+    flex-grow: 1;
+    color: #eee;
+}
+</style>

src/views/home/Home.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="home">
+        home
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: "Home",
+    components: {},
+    data() {
+		return {}
+    },
+    created() {},
+	methods: {}
+};
+</script>
+
+<style lang="scss" scope>
+.home {
+    border: 1px solid rgb(53, 212, 13);
+    box-sizing: border-box;
+    flex-grow: 1;
+    color: #eee;
+}
+</style>

src/views/monitor/monitor.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="monitor">
+        monitor
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: "monitor",
+    components: {},
+    data() {
+		return {}
+    },
+    created() {},
+	methods: {}
+};
+</script>
+
+<style lang="scss" scope>
+.monitor {
+    border: 1px solid rgb(243, 1, 1);
+    box-sizing: border-box;
+    flex-grow: 1;
+    color: #eee;
+}
+</style>

src/views/robot/robot.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="robot">
+        robot
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: "robot",
+    components: {},
+    data() {
+		return {}
+    },
+    created() {},
+	methods: {}
+};
+</script>
+
+<style lang="scss" scope>
+.robot {
+    border: 1px solid rgb(13, 83, 212);
+    box-sizing: border-box;
+    flex-grow: 1;
+    color: #eee;
+}
+</style>