添加看板

package.json

@@ -49,6 +49,8 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "less": "^4.4.0",
+    "less-loader": "4.1.0",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",

src/permission.js

@@ -9,7 +9,7 @@ import defaultSettings from '@/settings'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register']
+const whiteList = ['/login', '/register', '/board']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()

src/router/index.js

@@ -31,6 +31,11 @@ import plainView from '@/plainView'
 
 // 公共路由
 export const constantRoutes = [
+  {
+    path: '/board',
+    component: () => import('@/views/board/index.vue'),
+    hidden: true
+  },
   {
     path: '/redirect',
     component: Layout,

src/views/board/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <div class="bg">
+      <div class="title">正道能源监控系统</div>
+      <div class="subTitle" style="top: 13.5%;left: 6%;">设备总览</div>
+      <div class="subTitle" style="top: 42.3%;left: 6%">本月用电排行</div>
+      <div class="subTitle" style="top: 71.2%;left: 6%">本月用电分项统计</div>
+      <div class="subTitle" style="top: 71.2%;left: 30.5%">能耗统计</div>
+      <div class="subTitle" style="top: 71.2%;left: 78%">实时预警</div>
+      <div class="subTitle" style="top: 13.5%;left: 78%">近7天尖峰平谷统计</div>
+      <div class="sbzl">
+        <div class="num" style="top: 22%;left: 7%;">200</div>
+        <div class="num" style="top: 22%;left: 14.3%">200</div>
+        <div class="num" style="top: 22%;left: 21.7%">200</div>
+        <div class="num" style="top: 31%;left: 7%">200</div>
+        <div class="num" style="top: 31%;left: 14.3%">200</div>
+        <div class="num" style="top: 31%;left: 21.7%">200</div>
+        <div class="text" style="top: 22.2%;left: 7%">网关总数</div>
+        <div class="text" style="top: 22.2%;left: 14.3%">水表总数</div>
+        <div class="text" style="top: 22.2%;left: 21.7%">电表总数</div>
+        <div class="text" style="top: 31.2%;left: 7%">压缩空气表总数</div>
+        <div class="text" style="top: 31.2%;left: 14.3%">蒸汽表总数</div>
+        <div class="text" style="top: 31.2%;left: 21.7%">氮气表总数</div>
+      </div>
+      <div class="zxnr">
+        <div class="text" style="top: 18.5%;left: 45%;">用电量(kwh)</div>
+        <div class="text" style="top: 18.5%;left: 57%;">用水量(m³)</div>
+        <div class="text" style="top: 30%;left: 38.5%;">用压缩空气量(m³)</div>
+        <div class="text" style="top: 31.5%;left: 51.5%;">用蒸汽量(m³)</div>
+        <div class="text" style="top: 30%;left: 65%;">用氮气量(m³)</div>
+        <div class="num" style="top: 20.3%;left: 45%">6554</div>
+        <div class="num" style="top: 20.3%;left: 57%;">6554</div>
+        <div class="num" style="top: 31.8%;left: 38.5%">6554</div>
+        <div class="num" style="top: 33.3%;left: 51.5%">6554</div>
+        <div class="num" style="top: 31.8%;left: 65%">6554</div>
+        <div class="qs" style="top: 23.3%;left: 45%">
+          <span>{{ 1 === 1 ? '上升' : '下降' }}9.6%</span>
+          <div class="img"></div>
+        </div>
+        <div class="qs" style="top: 23.3%;left: 57%;">
+          <span>{{ 1 === 1 ? '上升' : '下降' }}9.6%</span>
+          <div class="img"></div>
+        </div>
+        <div class="qs" style="top: 34.8%;left: 38.5%">
+          <span>{{ 1 === 1 ? '上升' : '下降' }}9.6%</span>
+          <div class="img"></div>
+        </div>
+        <div class="qs" style="top: 36.3%;left: 51.5%">
+          <span>{{ 1 === 1 ? '上升' : '下降' }}9.6%</span>
+          <div class="img"></div>
+        </div>
+        <div class="qs" style="top: 34.8%;left: 65%">
+          <span>{{ 1 === 1 ? '上升' : '下降' }}9.6%</span>
+          <div class="img"></div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Board',
+}
+</script>
+<style scoped lang="less">
+.bg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-image: url('~@/assets/board/bg.jpg');
+  overflow: hidden;
+}
+
+.title {
+  position: absolute;
+  top: 2%;
+  left: 50.8%;
+  color: #eee;
+  font-size: 2vw;
+  font-weight: 600;
+  letter-spacing: 0.5vw;
+  transform: translateX(-50%);
+}
+
+.subTitle {
+  position: absolute;
+  font-size: 1vw;
+  color: #eee;
+  font-weight: 600;
+  transform: translateY(-50%);
+}
+
+.sbzl {
+  .num {
+    position: absolute;
+    font-size: 1.2vw;
+    color: #66D49E;
+    transform: translateY(-100%);
+  }
+
+  .text {
+    position: absolute;
+    font-size: 0.6vw;
+    color: #fff;
+    width: 3vw;
+    text-align: left;
+  }
+}
+
+.zxnr {
+  .text {
+    position: absolute;
+    font-size: 0.6vw;
+    color: #fff;
+    text-align: left;
+  }
+
+  .num {
+    position: absolute;
+    font-size: 1.2vw;
+    color: #4EACF3;
+    font-weight: 600;
+    letter-spacing: 0.2vw;
+  }
+
+  .qs {
+    position: absolute;
+    font-size: 0.6vw;
+    color: #fff;
+    text-align: left;
+
+    .img {
+      display: inline-block;
+      vertical-align: middle;
+      width: 1vw;
+      height: 1vw;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      background-image: url('~@/assets/board/向上箭头.png');
+    }
+  }
+}
+</style>