Skip to content

F
Front_end_project-template
Commit 3c8c0af7 by 白狗汪汪汪
Options

数据大屏部分基础。

parent d554cd6e
Showing with 171 additions and 6 deletions
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" ...@@ -31,6 +31,7 @@ import TestVuex from "./test/testVuex.vue"
RC, RC,
// //
}, },
props:[],
mixins: [TestMixin] mixins: [TestMixin]
}) })
export default class HelloWorld extends Vue<TestMixin> { export default class HelloWorld extends Vue<TestMixin> {
......
src/components/index/digitalLargeScreen/components/box.vue 0 → 100644
<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{ .bigScreen{
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(23, 26, 59, 1); background: rgba(23, 26, 59, 1);
overflow: hidden; 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, ...@@ -11,7 +11,13 @@ import { State,
const test = namespace('test'); const test = namespace('test');
@Component({}) import Box from './components/box.vue';
@Component({
components:{
Box
}
})
export default class Test extends Vue { export default class Test extends Vue {
@test.Getter info ; @test.Getter info ;
@test.Action('changeInfos') changeInfos; @test.Action('changeInfos') changeInfos;
......
src/components/index/digitalLargeScreen/digitalLargeScreen.vue
...@@ -9,9 +9,42 @@ ...@@ -9,9 +9,42 @@
<img src="@/assets/img/img-title.png" alt=""> <img src="@/assets/img/img-title.png" alt="">
</header> </header>
<div class="content"> <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="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>
</div> </div>
</template> </template>
...@@ -20,6 +53,7 @@ ...@@ -20,6 +53,7 @@
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less"> <style scoped lang="less">
@import url("../../../assets/less/common.less");
@import url("./digitalLargeScreen.less"); @import url("./digitalLargeScreen.less");
</style> </style>
src/main.ts
...@@ -9,7 +9,6 @@ Vue.config.productionTip = false ...@@ -9,7 +9,6 @@ Vue.config.productionTip = false
//引入公用css文件 //引入公用css文件
import './assets/less/reset.less'; import './assets/less/reset.less';
//引入element-ui //引入element-ui
import ElementUI from 'element-ui' import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' import 'element-ui/lib/theme-chalk/index.css'
......
src/router/index.ts
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld' import HelloWorld from '@/components/HelloWorld.vue'
// 登录 // 登录
import Login from '@/components/index/login/login.vue' import Login from '@/components/index/login/login.vue'
// 首页 // 首页
...@@ -16,7 +16,7 @@ export default new Router({ ...@@ -16,7 +16,7 @@ export default new Router({
{ {
path: '/', path: '/',
name: '默认页面', name: '默认页面',
redirect:'/login' //重定向 redirect:'/digitalLargeScreen' //重定向
// component: Login // component: Login
}, },
{ {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment