数据大屏部分基础。

src/assets/less/common.less

+// 公共less函数等
+
+// 获取宽度百分比
+.autoWid(@wid,@pWid:1920){
+    @myvar: ((@wid/@pWid)*100);
+    width: ~"@{myvar}vw";
+}
+// 获取高度百分比
+.autoHei(@hei,@pHei:1080){
+    @myvar: ((@hei/@pHei)*100);
+    height: ~"@{myvar}vh";
+}  
+// 字体    相对于宽度把；
+.autoFont(@fontSize){
+    @myvar: ((@fontSize/1920)*100);
+    font-size: ~"@{myvar}vw";
+}
+// 行高
+.autoLineH(@lineHei){
+    @myvar: ((@lineHei/1080)*100);
+    line-height: ~"@{myvar}vh";
+}
+// padding-left
+.pLeft(@pLeft){
+    @myvar: ((@pLeft/1920)*100);
+    padding-left: ~"@{myvar}vw";
+}
+// padding-left
+.pRight(@pRight){
+    @myvar: ((@pRight/1920)*100);
+    padding-right: ~"@{myvar}vw";
+}
+// padding-left
+.pTop(@pTop){
+    @myvar: ((@pTop/1080)*100);
+    padding-top: ~"@{myvar}vw";
+}
\ No newline at end of file

src/components/HelloWorld.vue

@@ -31,6 +31,7 @@ import TestVuex from "./test/testVuex.vue"
     RC,
     // 
   },
+  props:[],
   mixins: [TestMixin]
 })
 export default class HelloWorld extends Vue<TestMixin> {

src/components/index/digitalLargeScreen/components/box.vue

+<template>
+  <div class="boxs">
+        <div class="tit" v-text="tit"></div>
+        <div class="boxCon">
+            <slot>
+            </slot>    
+        </div>
+  </div>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+@Component({
+    props:{
+        tit:String
+    }
+         
+})
+export default class Box extends Vue {
+  mounted () {
+    
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import url("../../../../assets/less/common.less");
+.boxs{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    .tit{
+        .autoHei(39);
+        .autoFont(20);
+        .autoLineH(36);
+        color: #fff;
+        width: 100%;
+        background: url("../../../../assets/img/img-sj-title.png") no-repeat left bottom;
+        background-size: 100% 18*100/1080vh;
+        padding-left: 3px;
+    }
+    .boxCon{
+        background: rgba(0, 0, 0, 0.05);
+        flex: 1;
+    }
+}
+</style>
\ No newline at end of file

src/components/index/digitalLargeScreen/digitalLargeScreen.less

 // 数据大屏
+.titBoxs{
+    width: 100%;
+    .autoHei(294);
+}
 
 .bigScreen{
     width: 100%;
     height: 100%;
     background: rgba(23, 26, 59, 1);
     overflow: hidden;
+    display: flex;
+    flex-direction:column; 
+    header{
+        .autoHei(81);
+        // height: 81px;        
+        display: flex;
+        justify-content: center;
+        img{
+            height: 100%;           
+        }
+    } 
+    .content{
+        flex: 1;
+        display: flex;
+        .left{
+            .autoWid(455);
+            .pLeft(30);
+            .pTop(25);
+            height: 100%;
+            background: #ccc;
+        }
+        .center{
+            flex: 1;
+        }
+        .right{
+            .pRight(30);
+            .autoWid(455);
+            .pTop(25);
+            height: 100%;
+            background: #ccc;
+        }
+    }  
 }
\ No newline at end of file

src/components/index/digitalLargeScreen/digitalLargeScreen.ts

@@ -11,7 +11,13 @@ import { State,
 
 const test = namespace('test');
 
-@Component({})
+import Box from './components/box.vue';
+
+@Component({
+  components:{
+    Box
+  }
+})
 export default class Test extends Vue {
   @test.Getter info ;
   @test.Action('changeInfos') changeInfos;

src/components/index/digitalLargeScreen/digitalLargeScreen.vue

@@ -9,9 +9,42 @@
        <img src="@/assets/img/img-title.png" alt="">
      </header>
      <div class="content">
-       <div class="left"></div>
+       <div class="left">
+         <div class="titBoxs">
+          <Box tit="机动车业务分析">
+
+          </Box>  
+         </div>
+         <div class="titBoxs">
+          <Box tit="交通违法分析">
+
+          </Box>  
+         </div>
+         <div class="titBoxs">
+          <Box tit="交通事故分析">
+
+          </Box>  
+         </div>
+       </div>
        <div class="center"></div>
-       <div class="right"></div>
+       <div class="right">
+         <div class="titBoxs">
+          <Box tit="驾驶员业务分析">
+
+          </Box>  
+         </div>
+         <div class="titBoxs">
+          <Box tit="驾考业务分析">
+
+          </Box>  
+         </div>
+         <div class="titBoxs">
+          <Box tit="规费收入TOP5">
+
+          </Box>  
+         </div>
+       </div>
+       </div>
      </div>     
   </div>
 </template>
@@ -20,6 +53,7 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="less">
+@import url("../../../assets/less/common.less");
 @import url("./digitalLargeScreen.less");
 
 </style>

src/main.ts

@@ -9,7 +9,6 @@ Vue.config.productionTip = false
 
 //引入公用css文件
 import './assets/less/reset.less';
-
 //引入element-ui
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'

src/router/index.ts

 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import HelloWorld from '@/components/HelloWorld.vue'
 // 登录
 import Login from '@/components/index/login/login.vue'
 // 首页
@@ -16,7 +16,7 @@ export default new Router({
     {
       path: '/',
       name: '默认页面',
-      redirect:'/login'   //重定向
+      redirect:'/digitalLargeScreen'   //重定向
       // component: Login
     },
     {