some modify
This commit is contained in:
jiaming
parent
3c0292a0f0
commit
a04aa15d83
|
|
@ -8,6 +8,7 @@
|
|||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.18.0",
|
||||
"vue": "^2.5.17"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import currentDataV from './views/electronicFile/index'
|
||||
// import currentDataV from './views/electronicFile/index'
|
||||
import currentDataV from './views/manageDesk/index'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
|
|
|
|||
|
|
@ -2,9 +2,11 @@ import borderBox1 from './borderBox1/index'
|
|||
import borderBox2 from './borderBox2/index'
|
||||
import borderBox3 from './borderBox3/index'
|
||||
import borderBox4 from './borderBox4/index'
|
||||
import borderBox5 from './borderBox5/index'
|
||||
|
||||
import decoration1 from './decoration1/index'
|
||||
import decoration2 from './decoration2/index'
|
||||
import decoration3 from './decoration3/index'
|
||||
|
||||
import numberShow from './numberShow/index.vue'
|
||||
|
||||
|
|
@ -18,8 +20,10 @@ export default function (Vue) {
|
|||
Vue.component('borderBox2', borderBox2)
|
||||
Vue.component('borderBox3', borderBox3)
|
||||
Vue.component('borderBox4', borderBox4)
|
||||
Vue.component('borderBox5', borderBox5)
|
||||
Vue.component('decoration1', decoration1)
|
||||
Vue.component('decoration2', decoration2)
|
||||
Vue.component('decoration3', decoration3)
|
||||
Vue.component('numberShow', numberShow)
|
||||
Vue.component('capsuleChart', capsuleChart)
|
||||
Vue.component('ringChart', ringChart)
|
||||
|
|
|
|||
|
|
@ -473,7 +473,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url('../../assets/style/index.less');
|
||||
@import url('../../assets/style/electroniceFile.less');
|
||||
|
||||
#electronic-file {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,224 @@
|
|||
<template>
|
||||
<div id="manage-desk">
|
||||
<div class="header">
|
||||
<div class="left">{{ technicalSupport }}</div>
|
||||
<div class="middle">{{ topMiddleTitle }}</div>
|
||||
<border-box-2 class="right">
|
||||
设备档案馆
|
||||
</border-box-2>
|
||||
</div>
|
||||
|
||||
<border-box-1 class="content">
|
||||
<div class="top">
|
||||
<div class="top-left">
|
||||
<div class="top-left-title-1">
|
||||
当月维修任务量
|
||||
<decoration-3 />
|
||||
</div>
|
||||
|
||||
<div class="top-left-title-2">
|
||||
<decoration-3 />
|
||||
运维人均工作量
|
||||
</div>
|
||||
|
||||
<border-box-5 class="top-left-box-1">
|
||||
<div class="tlb-text">
|
||||
<div>22.0</div>
|
||||
<div class="small-text">66</div>
|
||||
<div class="small-text">0</div>
|
||||
</div>
|
||||
</border-box-5>
|
||||
|
||||
<border-box-5 class="top-left-box-2" :reverse="true">
|
||||
<div class="tlb-text">
|
||||
<div>0.1</div>
|
||||
<div class="small-text">66</div>
|
||||
<div class="small-text">0</div>
|
||||
</div>
|
||||
</border-box-5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="bottom-left"></div>
|
||||
</div>
|
||||
</border-box-1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ManageDesk',
|
||||
data () {
|
||||
return {
|
||||
technicalSupport: '技术支持：河南东方世纪交通科技股份有限公司',
|
||||
topMiddleTitle: '漯周界-机电运维管理台'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import url('../../assets/style/manageDesk.less');
|
||||
|
||||
#manage-desk {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
height: 80px;
|
||||
|
||||
.left, .middle, .right {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.left {
|
||||
left: 35px;
|
||||
bottom: 0px;
|
||||
font-size: @MDHLFS;
|
||||
color: @MDHLTC;
|
||||
}
|
||||
|
||||
.middle {
|
||||
font-size: @MDHMFS;
|
||||
font-weight: bold;
|
||||
left: 50%;
|
||||
bottom: 0px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 140px;
|
||||
font-size: @MDHRFS;
|
||||
right: 130px;
|
||||
bottom: -20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
height: calc(~"100% - 80px");
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.top {
|
||||
box-shadow: 0 0 3px red;
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 60px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
flex: 1;
|
||||
box-shadow: 0 0 3px green;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.top-left, .bottom-left {
|
||||
width: 32%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.top-left {
|
||||
position: relative;
|
||||
|
||||
.top-left-title-1, .top-left-title-2 {
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.top-left-title-1 {
|
||||
left: 51%;
|
||||
text-align: right;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.top-left-title-2 {
|
||||
right: 51%;
|
||||
text-align: left;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.border-box-5 {
|
||||
position: absolute;
|
||||
width: 48%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.tlb-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
:nth-child(1) {
|
||||
color: #00c0ff;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
|
||||
&::after {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 16px;
|
||||
margin: 10px 0px;
|
||||
|
||||
&::before {
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
:nth-child(2) {
|
||||
|
||||
&::before {
|
||||
content: '同期';
|
||||
}
|
||||
}
|
||||
|
||||
:nth-child(3) {
|
||||
|
||||
&::before {
|
||||
content: '环期';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-left-box-1 {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
.tlb-text {
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.tlb-text :nth-child(1)::after {
|
||||
content: '件'
|
||||
}
|
||||
}
|
||||
|
||||
.top-left-box-2 {
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
|
||||
.tlb-text {
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
.tlb-text :nth-child(1)::after {
|
||||
content: '件 / 日'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1146,6 +1146,13 @@ aws4@^1.8.0:
|
|||
version "1.8.0"
|
||||
resolved "http://registry.npm.taobao.org/aws4/download/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
|
||||
|
||||
axios@^0.18.0:
|
||||
version "0.18.0"
|
||||
resolved "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
|
||||
dependencies:
|
||||
follow-redirects "^1.3.0"
|
||||
is-buffer "^1.1.5"
|
||||
|
||||
babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
|
||||
version "6.26.0"
|
||||
resolved "http://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
|
||||
|
|
@ -3001,7 +3008,7 @@ flush-write-stream@^1.0.0:
|
|||
inherits "^2.0.1"
|
||||
readable-stream "^2.0.4"
|
||||
|
||||
follow-redirects@^1.0.0:
|
||||
follow-redirects@^1.0.0, follow-redirects@^1.3.0:
|
||||
version "1.5.10"
|
||||
resolved "http://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
|
||||
dependencies:
|
||||
|
|
|
|||
Loading…
Reference in New Issue