.

src/App.vue

@@ -1,15 +1,10 @@
 <template>
     <div class="container">
         <div class="header">
-            <el-col :span="6" class="header_item">
+            <el-col :span="5" class="header_item">
-                <div class="logo">
+                <img class="logo" src="./assets/logo.png">
-                    <el-avatar shape="square" :size="50">
-                        <img src="./assets/logo.png">
-                    </el-avatar>
-                    <span class="title">DC3 Web</span>
-                </div>
             </el-col>
-            <el-col :span="12" class="header_item">
+            <el-col :span="14" class="header_item">
                 <el-menu class="menu"
                          :default-active="$store.getters.getNav"
                          mode="horizontal"
@@ -21,11 +16,15 @@
                     <el-menu-item index="/now">实时</el-menu-item>
                     <el-menu-item index="/history">历史</el-menu-item>
                     <el-menu-item index="/alarm">报警</el-menu-item>
+                    <el-menu-item index="/node">节点</el-menu-item>
+                    <el-menu-item index="/picture">图片</el-menu-item>
                     <el-menu-item index="/video">视频</el-menu-item>
+                    <el-menu-item index="/setting">设置</el-menu-item>
+                    <el-menu-item index="/help">帮助</el-menu-item>
                     <el-menu-item index="/about">关于</el-menu-item>
                 </el-menu>
             </el-col>
-            <el-col :span="4" class="header_item">
+            <el-col :span="3" class="header_item">
                 <el-badge :value="12" :max="99" class="badge_item" type="primary">
                     <span class="span_small" @click="handleMessage">消息</span>
                 </el-badge>
@@ -78,15 +77,19 @@
         border-bottom: 1px solid #dcdfe6;
     }
 
+    .header_item {
+        height: 100%;
+    }
+
     .logo {
-        margin: 5px 10px;
+        height: 60px;
+        margin-left: 10px;
     }
 
     .title {
-        margin: 11px;
+        margin: 5px;
         color: #1296db;
-        font-size: 27px;
+        font-size: 25px;
-        font-weight: bold;
         position: absolute;
     }
 
@@ -96,8 +99,8 @@
         border-bottom: none !important;
     }
 
-    .header_item {
+    .menu .el-menu-item {
-        height: 100%;
+        font-size: 16px;
     }
 
     .badge_item {
@@ -122,14 +125,32 @@
 
     .body {
         top: 60px;
-        bottom: 3px;
+        bottom: 1px;
-        margin: 2px 8px;
+        width: 100%;
         position: absolute;
 
         .el-scrollbar__wrap {
             overflow-x: hidden;
         }
     }
+
+    .view {
+        top: 1px;
+        bottom: 0px;
+        width: 100%;
+        position: absolute;
+    }
+
+    .operator {
+        text-align: center;
+        margin: 5px 0px;
+    }
+
+    .page {
+        right: 1px;
+        bottom: 1px;
+        position: absolute !important;
+    }
 </style>
 
 <script>

src/router/router.js

@@ -1,24 +1,73 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
+import Things from '../views/Things.vue'
+import Template from '../views/Template.vue'
+import Now from '../views/Now.vue'
+import History from '../views/History.vue'
+import Alarm from '../views/Alarm.vue'
+import Node from '../views/Node.vue'
+import Picture from '../views/Picture.vue'
+import Video from '../views/Video.vue'
+import About from '../views/About.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
-  {
+    {
-    path: '/',
+        path: '/',
-    name: 'home',
+        name: 'home',
-    component: Home
+        component: Home
-  },
+    },
-  {
+    {
-    path: '/about',
+        path: '/things',
-    name: 'about',
+        name: 'things',
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+        component: Things
-  }
+    },
+    {
+        path: '/template',
+        name: 'template',
+        component: Template
+    },
+    {
+        path: '/now',
+        name: 'now',
+        component: Now
+    },
+    {
+        path: '/history',
+        name: 'history',
+        component: History
+    },
+    {
+        path: '/alarm',
+        name: 'alarm',
+        component: Alarm
+    },
+    {
+        path: '/node',
+        name: 'node',
+        component: Node
+    },
+    {
+        path: '/picture',
+        name: 'picture',
+        component: Picture
+    },
+    {
+        path: '/video',
+        name: 'video',
+        component: Video
+    },
+    {
+        path: '/about',
+        name: 'about',
+        component: About
+    }
 ]
 
 const router = new VueRouter({
-  routes
+    routes
 })
 
 export default router

src/views/Alarm.vue

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

src/views/History.vue

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

src/views/Home.vue

@@ -4,15 +4,3 @@
     <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/Node.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="container view">
+    <el-row class="operator">
+      <el-button icon="el-icon-search" circle></el-button>
+      <el-button type="success" icon="el-icon-plus" circle></el-button>
+      <el-button type="primary" icon="el-icon-edit" circle></el-button>
+      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+      <el-button type="danger" icon="el-icon-delete" circle></el-button>
+    </el-row>
+
+    <el-row class="page">
+      <el-pagination
+              background
+              layout="prev, pager, next"
+              :total="1000">
+      </el-pagination>
+    </el-row>
+  </div>
+</template>
+
+<style>
+
+</style>

src/views/Now.vue

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

src/views/Picture.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="container view">
+    <el-row class="operator">
+      <el-button icon="el-icon-search" circle></el-button>
+      <el-button type="success" icon="el-icon-plus" circle></el-button>
+      <el-button type="primary" icon="el-icon-edit" circle></el-button>
+      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+      <el-button type="danger" icon="el-icon-delete" circle></el-button>
+    </el-row>
+
+    <el-row class="page">
+      <el-pagination
+              background
+              layout="prev, pager, next"
+              :total="1000">
+      </el-pagination>
+    </el-row>
+  </div>
+</template>
+
+<style>
+
+</style>

src/views/Template.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="container view">
+    <el-row class="operator">
+      <el-button icon="el-icon-search" circle></el-button>
+      <el-button type="success" icon="el-icon-plus" circle></el-button>
+      <el-button type="primary" icon="el-icon-edit" circle></el-button>
+      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+      <el-button type="danger" icon="el-icon-delete" circle></el-button>
+    </el-row>
+
+    <el-row class="page">
+      <el-pagination
+              background
+              layout="prev, pager, next"
+              :total="1000">
+      </el-pagination>
+    </el-row>
+  </div>
+</template>
+
+<style>
+
+</style>

src/views/Things.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="container view">
+        <el-row class="operator">
+            <el-button icon="el-icon-search" circle></el-button>
+            <el-button type="success" icon="el-icon-plus" circle></el-button>
+            <el-button type="primary" icon="el-icon-edit" circle></el-button>
+            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+            <el-button type="danger" icon="el-icon-delete" circle></el-button>
+        </el-row>
+        <el-row class="device_list">
+            <el-card class="box-card" shadow="hover">
+                <div slot="header" class="clearfix">
+                    <span>设备名称</span>
+                    <el-button class="el-icon-more" style="float: right; padding: 3px 0" type="text"/>
+                </div>
+                <div v-for="o in 4" :key="o" class="text item">
+                    {{'列表内容 ' + o }}
+                </div>
+            </el-card>
+
+            <el-card class="box-card" shadow="hover">
+                <div slot="header" class="clearfix">
+                    <span>设备名称</span>
+                    <el-button class="el-icon-more" style="float: right; padding: 3px 0" type="text"/>
+                </div>
+                <div v-for="o in 4" :key="o" class="text item">
+                    {{'列表内容 ' + o }}
+                </div>
+            </el-card>
+
+        </el-row>
+        <el-row class="page">
+            <el-pagination
+                    background
+                    layout="prev, pager, next"
+                    :total="1000">
+            </el-pagination>
+        </el-row>
+    </div>
+</template>
+
+<style>
+    .text {
+        font-size: 14px;
+    }
+
+    .item {
+        margin-bottom: 18px;
+    }
+
+    .clearfix:before,
+    .clearfix:after {
+        display: table;
+    }
+
+    .clearfix:after {
+        clear: both
+    }
+
+    .box-card {
+        width: 480px;
+    }
+
+</style>

src/views/Video.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="container view">
+    <el-row class="operator">
+      <el-button icon="el-icon-search" circle></el-button>
+      <el-button type="success" icon="el-icon-plus" circle></el-button>
+      <el-button type="primary" icon="el-icon-edit" circle></el-button>
+      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+      <el-button type="danger" icon="el-icon-delete" circle></el-button>
+    </el-row>
+
+    <el-row class="page">
+      <el-pagination
+              background
+              layout="prev, pager, next"
+              :total="1000">
+      </el-pagination>
+    </el-row>
+  </div>
+</template>
+
+<style>
+
+</style>