feat

新增路由模块,分辨率适配初始化,页面初步搭建

nezha-fronted/src/assets/css/main.css

@@ -0,0 +1,24 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: NotoSansSC-Light;
+    min-width: 1350px;
+    background: #F2F7F8;
+    overflow-x: hidden !important;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+html {
+    overflow: auto;
+    overflow-y: hidden;
+    overflow-x: hidden !important;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+
+

nezha-fronted/src/components/common/Header.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="header">
+        <div class="submenu">
+            <el-menu
+                    class="el-menu-demo"
+                    mode="horizontal"
+                    background-color="#ffffff"
+                    unique-opened
+            >
+                <el-menu-item index="1" @rou><div @click="jumpadd">dashboard</div></el-menu-item>
+                <el-submenu index="2">
+                    <template slot="title" router="../dashboard">project</template>
+                    <el-menu-item index="2-1">选项1</el-menu-item>
+                    <el-menu-item index="2-2">选项2</el-menu-item>
+                    <el-menu-item index="2-3">选项3</el-menu-item>
+                </el-submenu>
+                <el-submenu index="3">
+                    <template slot="title">asset</template>
+                    <el-menu-item index="2-1">选项1</el-menu-item>
+                    <el-menu-item index="2-2">选项2</el-menu-item>
+                    <el-menu-item index="2-3">选项3</el-menu-item>
+                </el-submenu>
+            </el-menu>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "Header",
+  methods:{
+    jumpadd(){
+      this.$router.push({
+        path: "/dashboard",
+      });
+    },
+    jump() {
+      this.$router.push({
+        path: "/project",
+      });
+    },
+  }
+}
+</script>
+
+<style scoped>
+.submenu{
+    padding-left: 50%;
+}
+.header {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 60px;
+    font-size: 22px;
+    background-color: #ffffff;
+    position: relative;
+    z-index: 999;
+    box-shadow: 0px 20px 13px -19px #5E5E5E;
+}
+</style>

nezha-fronted/src/components/common/Home.vue

@@ -1,13 +1,49 @@
 <template>
+    <div>
+        <Header></Header>
+        <sideBar></sideBar>
+        <div class="content-box">
+            <router-view/>
+        </div>
+    </div>
 
 </template>
 
 <script>
-  export default {
+import Header from "./Header";
-    name: "Home.vue"
+import sideBar from "./SideBar";
-  }
+export default {
+  name: "Home.vue",
+  components: {Header,sideBar}
+}
+
 </script>
 
 <style scoped>
 
+
+.content-box {
+    position: absolute;
+    left: 300px;
+    right: 30px;
+    top: 60px;
+    bottom: 0;
+    -webkit-transition: left .3s ease-in-out;
+    transition: left .3s ease-in-out;
+    background: #ffffff;
+    height: calc(100% - 50px);
+    box-sizing: border-box;
+    transform: translateY(0);
+}
+@media screen and (max-width: 1600px) {
+    .content-box {
+        background: #a0eea6;
+    }
+}
+@media screen and (max-width: 700px) {
+    .content-box {
+        background: #b94b7e;
+    }
+}
+
 </style>

nezha-fronted/src/components/common/Login.vue

@@ -1,10 +1,23 @@
 <template>
-    
+    <div>
+        <div>登录</div>
+        <el-button @click="jump">默认按钮</el-button>
+    </div>
 </template>
 
 <script>
   export default {
-    name: "login"
+    name: "login",
+    methods:{
+      jump(){
+        this.$router.push({
+          path: "/dashboard",
+          query: {
+            t: +new Date()
+          }
+        });
+      }
+    }
   }
 </script>
 

nezha-fronted/src/components/common/SideBar.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="sidebar">
+        <div class="cartTitle">
+            <div>Project</div>
+        </div>
+        <div v-for="{item} in arr" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="1">
+            <div class="projectCard" :id="gett(item)"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "SiderBar",
+  data(){
+    return{
+      arr:[12,3,4,5,6,7,8,98,54]
+    }
+  },
+  methods: {
+    gett: function (index) {
+      return "sdf" + index
+    },
+    loadMore() {
+      this.busy = true
+      setTimeout(() => {
+        this.page++
+      }, 1000)
+      this.arr.push('1')
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+.cartTitle{
+    padding-left: 30px;
+    padding-top: 20px;
+}
+.projectCard{
+    margin-left: 30px;
+    margin-top: 20px;
+    width: 80%;
+    height: 100px;
+    background-color: #ffffff;
+    border-radius: 8px;
+    border-top:10px solid #777777
+}
+.sidebar {
+    display: block;
+    position: absolute;
+    width: 300px;
+    left: 0;
+    top: 60px;
+    bottom: 0;
+    box-shadow: 0 10px 16px #ccc;
+    overflow-y: scroll;
+    background: rgba(242, 242, 242, 0.94);
+}
+</style>

nezha-fronted/src/components/page/asset/asset.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        asset
+    </div>
+</template>
+
+<script>
+export default {
+  name: "asset"
+}
+</script>
+
+<style scoped>
+
+</style>

nezha-fronted/src/components/page/dashboard.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <iframe src="http://192.168.40.247:3000/" height="630" width="1200"></iframe>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "dashboard"
+}
+</script>
+
+<style scoped>
+
+</style>

nezha-fronted/src/components/page/project/project.vue

@@ -0,0 +1,54 @@
+<template>
+    <div>
+        <el-table
+                :data="tableData"
+                border
+                style="width: 100%">
+            <el-table-column
+                    prop="date"
+                    label="日期"
+                    width="180">
+            </el-table-column>
+            <el-table-column
+                    prop="name"
+                    label="姓名"
+                    width="180">
+            </el-table-column>
+            <el-table-column
+                    prop="address"
+                    label="地址">
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "project",
+  data() {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

nezha-fronted/src/main.js

@@ -1,10 +1,19 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+
+import "./assets/css/main.css";
+import 'element-ui/lib/theme-chalk/index.css';
+import ElementUI from 'element-ui';
+import vueiInfinite from 'vue-infinite-scroll'
+
+
 import Vue from 'vue'
 import App from './App'
 import router from './router'
 
 Vue.config.productionTip = false
+Vue.use(ElementUI)
+Vue.use(vueiInfinite)
 
 /* eslint-disable no-new */
 new Vue({

nezha-fronted/src/router/index.js

@@ -15,9 +15,20 @@ export default new Router({
     },
     {
       path: '/',
-      name: 'main',
       component: resolve => require(['../components/common/Home.vue'], resolve),
       children: [
+        {
+          path: '/dashboard',
+          component: resolve => require(['../components/page/dashboard.vue'], resolve),
+        },
+        {
+          path: '/project',
+          component: resolve => require(['../components/page/project/project.vue'], resolve),
+        },
+        {
+          path: '/asset',
+          component: resolve => require(['../components/page/project/project.vue'], resolve),
+        }
       ]
     },
   ]