From d9e7326451a6cf5fd4ea984d93d79fe60d8a6fda Mon Sep 17 00:00:00 2001
From: jiaming <743192023@qq.com>
Date: Tue, 11 Dec 2018 14:52:12 +0800
Subject: [PATCH] abstract style

---
 src/App.vue                           |  8 ++---
 src/assets/style/color.less           | 29 -----------------
 src/assets/style/electroniceFile.less | 47 ---------------------------
 src/assets/style/fontSize.less        | 20 ------------
 src/assets/style/index.less           |  5 +--
 src/assets/style/manageDesk.less      | 11 -------
 src/components/borderBox4/index.vue   |  6 ++--
 src/components/borderBox5/index.vue   | 10 +++---
 src/components/borderBox6/index.vue   |  2 --
 src/components/capsuleChart/index.vue |  8 ++---
 src/components/decoration2/index.vue  |  8 ++---
 src/components/decoration4/index.vue  |  2 --
 src/components/numberShow/index.vue   |  8 ++---
 src/components/ringChart/index.vue    | 12 +++----
 src/views/electronicFile/index.vue    | 38 ++++++++++------------
 src/views/manageDesk/index.vue        | 11 +++----
 16 files changed, 47 insertions(+), 178 deletions(-)
 delete mode 100644 src/assets/style/color.less
 delete mode 100644 src/assets/style/electroniceFile.less
 delete mode 100644 src/assets/style/fontSize.less
 delete mode 100644 src/assets/style/manageDesk.less

diff --git a/src/App.vue b/src/App.vue
index 333a942..972d105 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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`
diff --git a/src/assets/style/color.less b/src/assets/style/color.less
deleted file mode 100644
index 6a826c5..0000000
--- a/src/assets/style/color.less
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/src/assets/style/electroniceFile.less b/src/assets/style/electroniceFile.less
deleted file mode 100644
index 6c2ed7f..0000000
--- a/src/assets/style/electroniceFile.less
+++ /dev/null
@@ -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;
diff --git a/src/assets/style/fontSize.less b/src/assets/style/fontSize.less
deleted file mode 100644
index 20f731c..0000000
--- a/src/assets/style/fontSize.less
+++ /dev/null
@@ -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;
diff --git a/src/assets/style/index.less b/src/assets/style/index.less
index 7c669c5..aeb8b4e 100644
--- a/src/assets/style/index.less
+++ b/src/assets/style/index.less
@@ -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 {
diff --git a/src/assets/style/manageDesk.less b/src/assets/style/manageDesk.less
deleted file mode 100644
index cb8ccdd..0000000
--- a/src/assets/style/manageDesk.less
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/src/components/borderBox4/index.vue b/src/components/borderBox4/index.vue
index ce7a4b5..ba7b87f 100644
--- a/src/components/borderBox4/index.vue
+++ b/src/components/borderBox4/index.vue
@@ -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 {
diff --git a/src/components/borderBox5/index.vue b/src/components/borderBox5/index.vue
index 6915d56..a141160 100644
--- a/src/components/borderBox5/index.vue
+++ b/src/components/borderBox5/index.vue
@@ -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);
   }
 
 }
diff --git a/src/components/borderBox6/index.vue b/src/components/borderBox6/index.vue
index 2520c6a..21cc5f7 100644
--- a/src/components/borderBox6/index.vue
+++ b/src/components/borderBox6/index.vue
@@ -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;
diff --git a/src/components/capsuleChart/index.vue b/src/components/capsuleChart/index.vue
index 47c08b8..ab9726a 100644
--- a/src/components/capsuleChart/index.vue
+++ b/src/components/capsuleChart/index.vue
@@ -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 {
diff --git a/src/components/decoration2/index.vue b/src/components/decoration2/index.vue
index 193cc7c..7665f9c 100644
--- a/src/components/decoration2/index.vue
+++ b/src/components/decoration2/index.vue
@@ -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;
   }
 
diff --git a/src/components/decoration4/index.vue b/src/components/decoration4/index.vue
index 362dc5b..a3993ea 100644
--- a/src/components/decoration4/index.vue
+++ b/src/components/decoration4/index.vue
@@ -44,8 +44,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@import url('../../assets/style/index.less');
-
 .decoration-4 {
 
   &.normal {
diff --git a/src/components/numberShow/index.vue b/src/components/numberShow/index.vue
index ad42ac4..7b202de 100644
--- a/src/components/numberShow/index.vue
+++ b/src/components/numberShow/index.vue
@@ -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>
diff --git a/src/components/ringChart/index.vue b/src/components/ringChart/index.vue
index e04791b..9fdb666 100644
--- a/src/components/ringChart/index.vue
+++ b/src/components/ringChart/index.vue
@@ -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;
 
diff --git a/src/views/electronicFile/index.vue b/src/views/electronicFile/index.vue
index 799cc7a..4ac9c01 100644
--- a/src/views/electronicFile/index.vue
+++ b/src/views/electronicFile/index.vue
@@ -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;
diff --git a/src/views/manageDesk/index.vue b/src/views/manageDesk/index.vue
index 23f9be4..9b65f35 100644
--- a/src/views/manageDesk/index.vue
+++ b/src/views/manageDesk/index.vue
@@ -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;