ykxiao
/
DemuMesDataV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

abstract style

This commit is contained in:
jiaming 2018-12-11 14:52:12 +08:00
parent 9361557650
commit d9e7326451
16 changed files with 47 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.vue
View File

@ -1,12 +1,12 @@
<template>
<div id="app" ref="app">
<div id="app" ref="data-root">
<current-data-v />
</div>
</template>
<script>
// import currentDataV from './views/electronicFile/index'
import currentDataV from './views/manageDesk/index'
import currentDataV from './views/electronicFile/index'
// import currentDataV from './views/manageDesk/index'
export default {
name: 'app',
@ -34,7 +34,7 @@ export default {
this.allWidth = width
const app = this.app = this.$refs['app']
const app = this.app = this.$refs['data-root']
app.style.width = `${width}px`
app.style.height = `${height}px`

29
src/assets/style/color.less
View File

@ -1,29 +0,0 @@
// html color
@HC: #fff;
// border box 4 stroke color one
@BB4SCOC: red;
// border box 4 stroke color two
@BB4SCTC: fade(blue, 80);
// capsule chart capsule item box shadow
@CCCIBSC: #999;
// decoration 2 line color
@D2LC: #3faacb;
// decoration 2 tail color
@D2TC: #fff;
// number show item background color
@NSIBC: rgba(4, 49, 128, 0.6);
// number show item number color
@NSINC: rgb(8, 229, 255);
// ring chart label line color
@RCLLC: rgba(255, 255, 255, 0.6);
// border box 5 stroke color
@BB5SC: #fff;

47
src/assets/style/electroniceFile.less
View File

@ -1,47 +0,0 @@
// header left title
@EFHLTC: rgba(1, 134, 187, 0.91);
// num
@EFNC: rgb(9, 109, 217);
// header left
@EFHLFS: 20px;
// header middle
@EFHMFS: 33px;
// header right
@EFHRFS: 18px;
// left title
@EFLTFS: 32px;
// device num text
@EFDNTFS: 16px;
// device num number
@EFDNNFS: 34px;
// left station name
@EFLSFS: 16px;
// right top left header
@EFRTLHFS: 32px;
// right top left device num
@EFRTLDNFS: 32px;
// right top left num item num
@EFRTLNINFS: 34px;
// right top left num item text
@EFRTLNITFS: 24px;
// right top right title
@EFRTRTFS: 24px;
// bottom station name
@EFBSNFS: 20px;

20
src/assets/style/fontSize.less
View File

@ -1,20 +0,0 @@
// capsule chart label column
@CCLCFS: 12px;
// capsule chart unit label
@CCULFS: 12px;
// number show item
@NSIFS: 45px;
// ring chart percent show number
@RCPSNFS: 28px;
// ring chart percent show after
@RCPSAFS: 15px;
// ring chart current label
@RCCLFS: 16px;
// ring chart lable line
@RCLLFS: 12px;

5
src/assets/style/index.less
View File

@ -1,6 +1,3 @@
@import url('./color.less');
@import url('./fontSize.less');
* {
margin: 0px;
padding: 0px;
@ -16,7 +13,7 @@ body {
background-size: 100%;
background-image: url('../img/bg.png');
background-repeat: repeat;
color: @HC;
color: #fff;
}
::-webkit-scrollbar {

11
src/assets/style/manageDesk.less
View File

@ -1,11 +0,0 @@
// header left title
@MDHLTC: rgba(1, 134, 187, 0.91);
// header left
@MDHLFS: 20px;
// header middle
@MDHMFS: 33px;
// header right
@MDHRFS: 18px;

6
src/components/borderBox4/index.vue
View File

@ -49,8 +49,6 @@ export default {
</script>
<style lang="less" scoped>
@import url('../../assets/style/index.less');
.border-box-4 {
position: relative;
box-sizing: border-box;
@ -73,11 +71,11 @@ export default {
}
.sred {
stroke: @BB4SCOC;
stroke: red;
}
.sblue {
stroke: @BB4SCTC;
stroke: fade(blue, 80);
}
.sw1 {

10
src/components/borderBox5/index.vue
View File

@ -45,8 +45,6 @@ export default {
</script>
<style lang="less">
@import url('../../assets/style/index.less');
.border-box-5 {
position: relative;
box-sizing: border-box;
@ -70,21 +68,21 @@ export default {
.line-1 {
stroke-width: 1;
stroke: fade(@BB5SC, 35);
stroke: fade(#fff, 35);
}
.line-2 {
stroke: fade(@BB5SC, 20);
stroke: fade(#fff, 20);
}
.line-3, .line-6 {
stroke-width: 5;
stroke: fade(@BB5SC, 15);
stroke: fade(#fff, 15);
}
.line-4, .line-5 {
stroke-width: 2;
stroke: fade(@BB5SC, 15);
stroke: fade(#fff, 15);
}
}

2
src/components/borderBox6/index.vue
View File

@ -52,8 +52,6 @@ export default {
</script>
<style lang="less">
@import url('../../assets/style/index.less');
.border-box-6 {
position: relative;
box-sizing: border-box;

8
src/components/capsuleChart/index.vue
View File

@ -72,8 +72,6 @@ export default {
</script>
<style lang="less">
@import url('../../assets/style/index.less');
.capsule-chart {
position: relative;
display: flex;
@ -88,7 +86,7 @@ export default {
box-sizing: border-box;
padding-right: 10px;
text-align: right;
font-size: @CCLCFS;
font-size: 12px;
div {
height: 20px;
@ -104,7 +102,7 @@ export default {
}
.capsule-item {
box-shadow: 0 0 3px @CCCIBSC;
box-shadow: 0 0 3px #999;
height: 10px;
margin: 5px 0px;
border-radius: 5px;
@ -122,7 +120,7 @@ export default {
display: flex;
flex-direction: row;
line-height: 20px;
font-size: @CCULFS;
font-size: 12px;
}
.unit-text {

8
src/components/decoration2/index.vue
View File

@ -34,25 +34,23 @@ export default {
</script>
<style lang="less" scoped>
@import url('../../assets/style/index.less');
.decoration-2 {
.reverse, .normal {
background-color: @D2LC;
background-color: #3faacb;
}
.normal {
width: 0%;
height: 1px;
border-right: 1px solid @D2TC;
border-right: 1px solid #fff;
animation: normal-amt 6s ease-in-out infinite;
}
.reverse {
width: 1px;
height: 0%;
border-bottom: 1px solid @D2TC;
border-bottom: 1px solid #fff;
animation: reverse-amt 6s ease-in-out infinite;
}

2
src/components/decoration4/index.vue
View File

@ -44,8 +44,6 @@ export default {
</script>
<style lang="less" scoped>
@import url('../../assets/style/index.less');
.decoration-4 {
&.normal {

8
src/components/numberShow/index.vue
View File

@ -14,8 +14,6 @@ export default {
</script>
<style lang="less">
@import url('../../assets/style/index.less');
.number-show {
display: inline-block;
@ -25,11 +23,11 @@ export default {
padding: 0 20px;
line-height: 70px;
text-align: center;
background-color: @NSIBC;
background-color: rgba(4, 49, 128, 0.6);
margin-right: 20px;
color: @NSINC;
color: rgb(8, 229, 255);
font-weight: bold;
font-size: @NSIFS;
font-size: 45px;
}
}
</style>

12
src/components/ringChart/index.vue
View File

@ -357,8 +357,6 @@ export default {
</script>
<style lang="less">
@import url('../../assets/style/index.less');
.ring-chart {
position: relative;
@ -378,17 +376,17 @@ export default {
max-width: 25%;
.percent-show {
font-size: @RCPSNFS;
font-size: 28px;
&::after {
content: '%';
font-size: @RCPSAFS;
font-size: 15px;
margin-left: 5px;
}
}
.current-label {
font-size: @RCCLFS;
font-size: 16px;
margin-top: 5%;
transform: rotateY(0deg);
overflow: hidden;
@ -412,9 +410,9 @@ export default {
width: 100%;
height: 30px;
bottom: 0px;
font-size: @RCLLFS;
font-size: 12px;
line-height: 30px;
color: @RCLLC;
color: rgba(255, 255, 255, 0.6);
display: flex;
justify-content: space-around;

38
src/views/electronicFile/index.vue
View File

@ -473,8 +473,6 @@ export default {
</script>
<style lang="less" scoped>
@import url('../../assets/style/electroniceFile.less');
#electronic-file {
width: 100%;
height: 100%;
@ -490,12 +488,12 @@ export default {
.left {
left: 35px;
bottom: 0px;
font-size: @EFHLFS;
color: @EFHLTC;
font-size: 20px;
color: rgba(1, 134, 187, 0.91);
}
.middle {
font-size: @EFHMFS;
font-size: 33px;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
@ -503,7 +501,7 @@ export default {
.right {
width: 140px;
font-size: @EFHRFS;
font-size: 18px;
right: 130px;
bottom: -20px;
text-align: center;
@ -521,7 +519,7 @@ export default {
.left-title {
height: 35px;
font-size: @EFLTFS;
font-size: 32px;
text-align: center;
line-height: 35px;
margin-bottom: 30px;
@ -537,13 +535,13 @@ export default {
}
:nth-child(1) {
font-size: @EFDNTFS;
font-size: 16px;
text-indent: 20px;
}
:nth-child(2) {
font-size: @EFDNNFS;
color: @EFNC;
font-size: 34px;
color: rgb(9, 109, 217);
font-weight: bold;
margin-left: 30px;
}
@ -553,7 +551,7 @@ export default {
height: 30px;
line-height: 30px;
text-indent: 20px;
font-size: @EFLSFS;
font-size: 16px;
}
.left-chart {
@ -588,7 +586,7 @@ export default {
.rtl-header {
position: relative;
height: 50px;
font-size: @EFRTLHFS;
font-size: 32px;
line-height: 50px;
text-align: center;
overflow: hidden;
@ -616,7 +614,7 @@ export default {
margin-top: 50px;
.device-num-container {
font-size: @EFRTLDNFS;
font-size: 32px;
.number-show {
margin-left: 20px;
@ -645,13 +643,13 @@ export default {
font-family: "Microsoft Yahei", Arial, sans-serif;
:nth-child(1) {
font-size: @EFRTLNINFS;
font-size: 34px;
text-indent: 35px;
font-weight: bold;
}
:nth-child(2) {
font-size: @EFRTLNITFS;
font-size: 24px;
margin-left: 20px;
}
}
@ -670,7 +668,7 @@ export default {
.rtr-title {
height: 25px;
line-height: 25px;
font-size: @EFRTRTFS;
font-size: 24px;
font-weight: bold;
}
@ -688,16 +686,16 @@ export default {
}
:nth-child(1) {
color: @EFNC;
color: rgb(9, 109, 217);
font-weight: bold;
font-size: @EFDNNFS;
font-size: 34px;
height: 100px;
line-height: 100px;
margin-top: 30px;
}
:nth-child(2) {
font-size: @EFDNTFS;
font-size: 16px;
}
}
@ -729,7 +727,7 @@ export default {
flex: 1;
.station-name {
font-size: @EFBSNFS;
font-size: 20px;
text-align: center;
margin-top: 20px;
height: 30px;

11
src/views/manageDesk/index.vue
View File

@ -412,8 +412,6 @@ export default {
</script>
<style lang="less">
@import url('../../assets/style/manageDesk.less');
#manage-desk {
width: 100%;
height: 100%;
@ -429,13 +427,12 @@ export default {
.left {
left: 35px;
bottom: 0px;
font-size: @MDHLFS;
color: @MDHLTC;
font-size: 20px;
color: rgba(1, 134, 187, 0.91);
}
.middle {
font-size: @MDHMFS;
font-weight: bold;
font-size: 33px;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
@ -443,7 +440,7 @@ export default {
.right {
width: 140px;
font-size: @MDHRFS;
font-size: 18px;
right: 130px;
bottom: -20px;
text-align: center;