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> <template>
<div id="app" ref="app"> <div id="app" ref="data-root">
<current-data-v /> <current-data-v />
</div> </div>
</template> </template>
<script> <script>
// import currentDataV from './views/electronicFile/index' import currentDataV from './views/electronicFile/index'
import currentDataV from './views/manageDesk/index' // import currentDataV from './views/manageDesk/index'
export default { export default {
name: 'app', name: 'app',
@ -34,7 +34,7 @@ export default {
this.allWidth = width 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.width = `${width}px`
app.style.height = `${height}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; margin: 0px;
padding: 0px; padding: 0px;
@ -16,7 +13,7 @@ body {
background-size: 100%; background-size: 100%;
background-image: url('../img/bg.png'); background-image: url('../img/bg.png');
background-repeat: repeat; background-repeat: repeat;
color: @HC; color: #fff;
} }
::-webkit-scrollbar { ::-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> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import url('../../assets/style/index.less');
.border-box-4 { .border-box-4 {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
@ -73,11 +71,11 @@ export default {
} }
.sred { .sred {
stroke: @BB4SCOC; stroke: red;
} }
.sblue { .sblue {
stroke: @BB4SCTC; stroke: fade(blue, 80);
} }
.sw1 { .sw1 {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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