样式调整

src/css/console.less

@@ -75,8 +75,7 @@ body.console {
   .title {
     font-size: 16px;
     font-weight: bold;
-    color: @themeFontClr;
-    opacity: .9;
+    color: @fstColor;
     border-bottom: 1px solid @themeBorderClr;
     height: 40px;
     line-height: 40px;
@@ -125,18 +124,15 @@ body.console {
   p {
     display: inline-block;
     font-size: 16px;
-    color: @themeFontClr;
-    opacity: .9;
+    color: @fstColor;
     span {
+      color: @fstColor;
       font-size: 16px;
-      color: #fff;
-      opacity: .9;
     }
   }
   .dateDetail {
     font-size: 12px;
-    color: @themeFontClr;
-    opacity: .6;
+    color: @secColor;
     margin-right: 30px;
     font-weight: normal;
   }
@@ -144,12 +140,11 @@ body.console {
     float: right;
     margin-right: 20px;
     border: 1px solid #00A1FF;
-    height: 28px;
-    line-height: 28px;
-    border-radius: 4px;
-    overflow: hidden;
+    height: 30px;
+    line-height: 30px;
     cursor: pointer;
     margin-top: 7px;
+    border: 0 none;
     span {
       width: 48px;
       height: 28px;
@@ -157,15 +152,21 @@ body.console {
       display: inline-block;
       text-align: center;
       font-weight: normal;
+      float: left;
     }
     .year {
-      background-color: #00A1FF;
-      color: #fff;
-      opacity: .9;
+      background-color: @activeColor;
+      border: 1px solid @activeColor;
+      color: @fstColor;
+      border-left: 0 none;
+      border-radius:0 4px 4px 0;
+      overflow: hidden;
     }
     .mon {
-      color: @themeFontClr;
-      opacity: .6;
+      border: 1px solid @secColor;
+      border-radius: 4px 0 0 4px;
+      border-right: 0 none;
+      color: @secColor;
     }
   }
 }
@@ -253,16 +254,14 @@ body.console {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        color: @themeFontClr;
-        opacity: .6;
+        color: @secColor;
       }
       .smp {
         width: 100px;
       }
     }
     .deptNum {
-      color: @themeFontClr;
-      opacity: .6;
+      color: @secColor;
       font-size: 16px;
       font-weight: bold;
       padding-right: 10px;
@@ -270,8 +269,7 @@ body.console {
       text-align: right;
     }
     .percent {
-      color: @themeFontClr;
-      opacity: .6;
+      color: @secColor;
       width: 40px;
     }
   }
@@ -290,8 +288,7 @@ body.console {
     li {
       float: left;
       width: 33.33%;
-      color: #fff;
-      opacity: .9;
+      color: @fstColor;
       border-left: 3px solid #F2637B;
       height: 72px;
       box-sizing: border-box;
@@ -309,9 +306,6 @@ body.console {
     /*background-color: @themeColor;*/
     height: 410px;
     overflow: hidden;
-    .partTitlePub{
-      opacity: .9;
-    }
     .list {
       padding: 6px 5px;
       width: 100%;
@@ -335,16 +329,14 @@ body.console {
     }
     td {
       padding: 7px 10px;
-      color: @themeFontClr;
-      opacity: .9;
+      color: @fstColor;
       i {
         width: 17px;
         height: 17px;
         line-height: 17px;
         border-radius: 8px;
         background-color: #526186;
-        color: #fff;
-        opacity: .9;
+        color: @fstColor;
         display: inline-block;
         text-align: center;
         font-size: 12px;
@@ -361,8 +353,7 @@ body.console {
     }
     .td02name {
       min-width: 113px;
-      color: @themeFontClr;
-      opacity: .9;
+      color: @fstColor;
     }
     .td02 {
     }
@@ -402,8 +393,7 @@ body.console {
     cursor: pointer;
     p {
       text-align: center;
-      color: @themeFontClr;
-      opacity: .9;
+      color: @fstColor;
       font-weight: bold;
       font-size: 16px;
       padding-bottom: 5px;
@@ -421,8 +411,7 @@ body.console {
     p {
       text-align: center;
       font-size: 12px;
-      color: @themeFontClr;
-      opacity: .6;
+      color: @secColor;
       font-weight: normal;
       width: 78px;
       position: absolute;
@@ -470,7 +459,6 @@ body.console {
   cursor: pointer;
   span{
     color: @themeFontClr;
-    opacity: .9;
   }
   .name {
     float: left;
@@ -478,8 +466,7 @@ body.console {
   }
   .personNum {
     float: right;
-    color: @themeFontClr;
-    opacity: .9;
+    color: @fstColor;
   }
 }
 
@@ -489,13 +476,11 @@ body.console {
   height: 36px;
   line-height: 40px;
   font-weight: bold;
-  color: @themeFontClr;
-  opacity: .9;
+  color: @fstColor;
 }
 .explainNum {
   margin-top: 8px;
-  color: @themeFontClr;
-  opacity: .6;
+  color: @secColor;
 }
 
 .toggleSlide {
@@ -514,8 +499,7 @@ body.console {
     font-size: 14px;
     border-radius: 4px;
     span{
-      color: @themeFontClr;
-      opacity: .9;
+      color: @fstColor;
     }
     img {
       width: 10px;
@@ -526,11 +510,11 @@ body.console {
   }
   ul {
     display: none;
-    background-color: #fff;
+    background-color: #203463;
     position: absolute;
     top: 27px;
     right: 0;
-    border: 1px solid #E2E5EF;
+    border: 1px solid @darkLightBorderColor;
     z-index: 100;
     padding: 0;
     width: 130px;
@@ -538,8 +522,9 @@ body.console {
       height: 30px;
       line-height: 30px;
       padding: 0 10px;
+      color: @fstColor;
       &:hover {
-        background-color: #EEF4FF;
+        background-color: #142753;
       }
     }
   }

src/css/deptConsole.less

@@ -106,28 +106,26 @@ body.console {
   p {
     display: inline-block;
     font-size: 16px;
-    color: #fff;
+    color: @fstColor;
     span,i {
-      color: #fff;
+      color: @fstColor;
       font-size: 16px;
     }
   }
   .dateDetail {
     font-size: 12px;
-    color: #fff;
+    color: @secColor;
     margin-right: 30px;
     font-weight: normal;
   }
   .monthYear {
     float: right;
     margin-right: 20px;
-    border: 1px solid @activeColor;
-    height: 28px;
-    line-height: 28px;
-    border-radius: 4px;
-    overflow: hidden;
+    height: 30px;
+    line-height: 30px;
     cursor: pointer;
     margin-top: 7px;
+    border: 0 none;
     span {
       width: 48px;
       height: 28px;
@@ -135,13 +133,21 @@ body.console {
       display: inline-block;
       text-align: center;
       font-weight: normal;
+      float: left;
     }
     .year {
       background-color: @activeColor;
-      color: #fff;
+      border: 1px solid @activeColor;
+      color: @fstColor;
+      border-left: 0 none;
+      border-radius:0 4px 4px 0;
+      overflow: hidden;
     }
     .mon {
-      color: #fff;
+      border: 1px solid @secColor;
+      border-radius: 4px 0 0 4px;
+      border-right: 0 none;
+      color: @secColor;
     }
   }
 }
@@ -192,7 +198,7 @@ body.console {
   position: relative;
   .title {
     cursor: pointer;
-    color: #fff;
+    color: @fstColor;
   }
 }
 .btmWrap {
@@ -227,20 +233,20 @@ body.console {
       margin-right: 10px;
     }
     .deptName {
-      color: #fff;
+      color: @fstColor;
       p {
         width: 110px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        color: #fff;
+        color: @fstColor;
       }
       .smp {
         width: 100px;
       }
     }
     .deptNum {
-      color: #fff;
+      color: @fstColor;
       font-size: 16px;
       font-weight: bold;
       padding-right: 10px;
@@ -248,7 +254,7 @@ body.console {
       text-align: right;
     }
     .percent {
-      color: #fff;
+      color: @fstColor;
       width: 40px;
     }
   }
@@ -302,7 +308,7 @@ body.console {
     }
     .thead {
       td {
-        color: #fff;
+        color: @fstColor;
       }
     }
     .qtable {
@@ -311,14 +317,14 @@ body.console {
     }
     td {
       padding: 7px 10px;
-      color: #fff;
+      color: @fstColor;
       i {
         width: 17px;
         height: 17px;
         line-height: 17px;
         border-radius: 8px;
         background-color: #999;
-        color: #fff;
+        color: @fstColor;
         display: inline-block;
         text-align: center;
         font-size: 12px;
@@ -376,7 +382,7 @@ body.console {
       padding-bottom: 2px;
       margin-bottom: 10px;
       cursor: pointer;
-      color: #fff;
+      color: @fstColor;
       img {
         top: 1px;
       }
@@ -415,17 +421,17 @@ body.console {
   border-bottom: 1px solid @themeBorderClr;
   font-weight: bold;
   font-size: 16px;
-  color: #fff;
+  color: @fstColor;
   cursor: pointer;
   .name {
     float: left;
     font-size: 16px;
-    color: #fff;
+    color: @fstColor;
   }
   .personNum {
     float: right;
     color: #51649C;
-    color: #fff;
+    color: @fstColor;
   }
 }
 
@@ -435,11 +441,11 @@ body.console {
   height: 36px;
   line-height: 40px;
   font-weight: bold;
-  color: #fff;
+  color: @fstColor;
 }
 .explainNum {
   margin-top: 8px;
-  color: #fff;
+  color: @fstColor;
 }
 
 .toggleSlide {
@@ -466,6 +472,7 @@ body.console {
       text-overflow: ellipsis;
       white-space: nowrap;
       font-size: 14px;
+      color: @fstColor;
     }
     img {
       width: 10px;
@@ -476,9 +483,9 @@ body.console {
   }
   ul {
     display: none;
-    background-color: #fff;
+    background-color: #203463;
     font-weight: normal;
-    border: 1px solid #E2E5EF;
+    border: 1px solid @darkLightBorderColor;
     z-index: 100;
     padding: 0;
     position: relative;
@@ -492,8 +499,9 @@ body.console {
       text-overflow: ellipsis;
       white-space: nowrap;
       font-size: 14px;
+      color: @fstColor;
       &:hover {
-        background-color: #EEF4FF;
+        background-color: #142753;
       }
     }
   }

src/css/index.less

@@ -84,7 +84,7 @@
     background: @themeColor;
     border-bottom: 1px @themeBorderClr solid;
     .title span, .login a {
-      color: #fff;
+      color: @fstColor;
     }
   }
   .main-body {
@@ -99,7 +99,7 @@
     width: @menuWt;
     height: 100%;
     background: @themeColor;
-    border-right: 1px @themeBorderClr solid;
+    border-right: 1px @fstColor solid;
     box-sizing: border-box;
     overflow-y: auto;
     padding-top: 15px;
@@ -179,8 +179,7 @@
         background: url("../images/icon_down.png") no-repeat;
       }
       p{
-        color: #fff;
-        opacity: .9;
+        color: @fstColor;
       }
       p:hover {
         color: @activeColor;
@@ -193,8 +192,7 @@
         display: none;
         li.page{
           text-indent: 52px;
-          color: #fff;
-          opacity: .6;
+          color: @secColor;
           &.active{
             color: @activeColor;
             opacity: 1;
@@ -213,7 +211,7 @@
       line-height: @menuLiHt;
       text-indent: 15px;
       cursor: pointer;
-      color: #fff;
+      color: @fstColor;
     }
     .copy-right{
       position: fixed;
@@ -227,8 +225,7 @@
       border-right: 1px rgba(74, 93, 142, 0.5) solid;
       p{
         font-size:12px;
-        opacity: .3;
-        color: #fff;
+        color: @trdColor;
       }
     }
   }

src/css/reset.less

@@ -119,7 +119,13 @@ textarea {
 @menuWt:205px;   /*菜单宽度*/
 @themeColor:#203463;    //主题背景色
 @themeFontClr:#fff;   //主题字体色
-@themeBorderClr:rgba(74, 93, 142, 0.5);    //主题边框色
+@greyColor:#A5ADBF;    //灰色二级
+@fstColor:#E9EBEF;    //重要一级，菜单
+@secColor:#A5ADBF;    //重要二级，菜单
+@trdColor:#6D7A97;    //版权重要三级
+@darkLightBorderColor:#344876;    //深色背景的分割线，border，浅色
+@darkDeepBorderColor:#4A5D8E;    //深色背景的分割线，border，深点
+@themeBorderClr:#344876;    //主题边框色
 @activeColor:#00A1FF;   /*菜单项选中颜色*/
 @activeBg:#142753;   /*菜单项选中背景*/
 @borderColor:#E2E5EF; /**边框颜色**/
@@ -358,18 +364,18 @@ input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
   p {
     display: inline-block;
     font-size: 16px;
-    color: #51649C;
+    color: @themeColor;
     a {
       font-size: 16px;
-      color: #51649C;
+      color: @themeColor;
       opacity: 70%;
     }
     span {
-      color: #51649C;
+      color: @themeColor;
       font-size: 16px;
     }
     i {
-      color: #51649C;
+      color: @themeColor;
     }
   }
   .dateDetail {
@@ -405,7 +411,9 @@ input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
     }
   }
 }
-
+.partTitlePub span {
+  color: @fstColor !important;
+}
 .filterBox {
   /*.filter {
     display: inline-block;

src/html/console.html

@@ -8,7 +8,7 @@
 <body class="console">
   <div class="partTitle">
     <p><span></span>质控科数据概览</p>
-    <div class="monthYear">
+    <div class="monthYear clearfix">
       <span class="mon">本月</span>
       <span class="year">本年</span>
     </div> 

src/html/deptConsole.html

@@ -13,7 +13,7 @@
   </div>
   <div class="partTitle">
     <p><span></span><i></i>数据概览</p>
-    <div class="monthYear">
+    <div class="monthYear clearfix">
       <span class="mon">本月</span>
       <span class="year">本年</span>
     </div> 

src/js/console.js

@@ -112,34 +112,34 @@ function resizeBox(){
     })
 }
 //所有数据切换日期筛选
-function dateChange(){
-    $(".monthYear .mon").click(function(){
-        $(this).css({
-            backgroundColor:'#00A1FF',
-            color:'#fff',
-            opacity:'0.9',
-        }).siblings().css({
-            color:'#fff',
-            opacity:'0.6',
-            backgroundColor:'#203463'
+    function dateChange(){
+        $(".monthYear .mon").click(function(){
+            $(this).css({
+                backgroundColor:'#00A1FF',
+                color:'#E9EBEF',
+               "border-color":'#00A1FF'
+            }).siblings().css({
+                "border-color":'#A5ADBF',
+                color:'#A5ADBF',
+                backgroundColor:'#203463'
+            })
+            dateType = 1
+            getBarData(1)
         })
-        dateType = 1
-        getBarData(1)
-    })
-    $(".monthYear .year").click(function(){
-        $(this).css({
-            backgroundColor:'#00A1FF',
-            color:'#fff',
-            opacity:'0.9',
-        }).siblings().css({
-            color:'#fff',
-            opacity:'0.6',
-            backgroundColor:'#203463'
+        $(".monthYear .year").click(function(){
+            $(this).css({
+                backgroundColor:'#00A1FF',
+                color:'#E9EBEF',
+                "border-color":'#00A1FF'
+            }).siblings().css({
+                "border-color":'#A5ADBF',
+                color:'#A5ADBF',
+                backgroundColor:'#203463'
+            })
+            dateType = 2
+            getBarData(2)
         })
-        dateType = 2
-        getBarData(2)
-    })
-}
+    }
 //控制台数
 function initConsole(result){
     let url = {
@@ -429,14 +429,14 @@ function part02pan(data,dom){
                 rich: {
                     val: {
                         fontSize: 12,
-                        color: '#fff',
+                        color: '#E9EBEF',
                         /*fontWeight: 'bold',*/
                         padding: [10, 0]
                     },
                     name: {
                         fontSize: 12,
                         fontWeight: 'normal',
-                        color: '#777',
+                        color: '#E9EBEF',
                     }
                 }
             }
@@ -491,7 +491,7 @@ function lineChart(dataX,dataY){
             left: 0,
             textStyle: {
                 fontSize: 14,
-                color:'#fff',
+                color:'#E9EBEF',
                 fontWeight: 400
             }
         }],
@@ -520,7 +520,7 @@ function lineChart(dataX,dataY){
             data: dataX,
             axisLabel: {//x轴刻度
                 textStyle: {
-                    color: '#fff'
+                    color: '#E9EBEF'
                 },
                 rotate:'45',
                 formatter: function (value) {
@@ -533,7 +533,7 @@ function lineChart(dataX,dataY){
             },
             axisLine: {//x轴
                 lineStyle:{
-                    color:'#fff'
+                    color:'#4A5D8E'
                 }
             }
         },
@@ -542,7 +542,7 @@ function lineChart(dataX,dataY){
             axisLabel: {
                 formatter: '{value} %',
                 textStyle: {
-                    color: '#fff'
+                    color: '#E9EBEF'
                 }
             },
             
@@ -554,7 +554,7 @@ function lineChart(dataX,dataY){
             },
             splitLine:{//分割线
                 lineStyle:{
-                    color:'#EFF3FC'
+                    color:'#344876'
                 }
             }
         },
@@ -599,7 +599,7 @@ function lineChartSpecial(dataX,dataY){
                 },
                 axisLabel: {//x轴刻度
                     textStyle: {
-                        color: '#fff'
+                        color: '#E9EBEF'
                     },
                     rotate:45,
                     formatter: function (value) {
@@ -612,7 +612,7 @@ function lineChartSpecial(dataX,dataY){
                 },
                 axisLine: {//x轴
                     lineStyle:{
-                        color:'#fff'
+                        color:'#4A5D8E'
                     }
                 }
             }
@@ -628,12 +628,12 @@ function lineChartSpecial(dataX,dataY){
                 },
                 axisLabel: {//y轴刻度
                     textStyle: {
-                        color: '#fff'
+                        color: '#E9EBEF'
                     }
                 },
                 splitLine:{//分割线
                     lineStyle:{
-                        color:'#4A5D8E'
+                        color:'#344876'
                     }
                 }
             }
@@ -645,7 +645,7 @@ function lineChartSpecial(dataX,dataY){
             left: 10,
             textStyle: {
                 fontSize: 14,
-                color:'#fff',
+                color:'#E9EBEF',
                 fontWeight: 400
             }
         }],
@@ -691,7 +691,7 @@ function barChartPay(dataX,dataY){
                 },
                 axisLabel: {//x轴刻度
                     textStyle: {
-                        color: '#fff'
+                        color: '#E9EBEF'
                     },
                     rotate:45,
                     formatter: function (value) {
@@ -704,7 +704,7 @@ function barChartPay(dataX,dataY){
                 },
                 axisLine: {//x轴
                     lineStyle:{
-                        color:'#AAAAAA'
+                        color:'#4A5D8E'
                     }
                 }
             }
@@ -720,12 +720,12 @@ function barChartPay(dataX,dataY){
                 },
                 axisLabel: {//y轴刻度
                     textStyle: {
-                        color: '#fff'
+                        color: '#E9EBEF'
                     }
                 },
                 splitLine:{//分割线
                     lineStyle:{
-                        color:'#4A5D8E'
+                        color:'#344876'
                     }
                 }
             }
@@ -737,7 +737,7 @@ function barChartPay(dataX,dataY){
             left: 10,
             textStyle: {
                 fontSize: 14,
-                color:'#fff',
+                color:'#E9EBEF',
                 fontWeight: 400
             }
         }],
@@ -870,7 +870,7 @@ function barChart(data,type){
             left: 10,
             textStyle: {
                 fontSize: 14,
-                color:'#fff',
+                color:'#E9EBEF',
                 fontWeight: 400
             }
         }],
@@ -881,7 +881,7 @@ function barChart(data,type){
             top:15,
             selectedMode:false,
             textStyle:{
-                color:'#fff'
+                color:'#E9EBEF'
             },
             formatter: function (name) {
                 return name;
@@ -907,7 +907,7 @@ function barChart(data,type){
                 data:  dataX,
                 axisLabel: {//x轴刻度
                     textStyle: {
-                        color: '#fff'
+                        color: '#E9EBEF'
                     },
                     rotate:'45',
                     formatter: function (value) {
@@ -936,12 +936,12 @@ function barChart(data,type){
                 },
                 axisLabel: {//y轴刻度
                   textStyle: {
-                    color: '#fff'
+                    color: '#E9EBEF'
                   }
                 },
                 splitLine:{//分割线
                     lineStyle:{
-                        color:'#4A5D8E'
+                        color:'#344876'
                     }
                 }
             }
@@ -999,14 +999,14 @@ function emptyCircle(data){
                 rich: {
                     val: {
                         fontSize: 24,
-                        color: '#fff',
+                        color: '#E9EBEF',
                         fontWeight: 'bold',
                         padding: [10, 0]
                     },
                     name: {
                         fontSize: 12,
                         fontWeight: 'normal',
-                        color: '#fff',
+                        color: '#E9EBEF',
                     }
                 }
             }
@@ -1093,14 +1093,14 @@ function emptyCircleB(data){
                 rich: {
                     val: {
                         fontSize: 24,
-                        color: '#fff',
+                        color: '#E9EBEF',
                         fontWeight: 'bold',
                         padding: [10, 0]
                     },
                     name: {
                         fontSize: 12,
                         fontWeight: 'normal',
-                        color: '#fff',
+                        color: '#E9EBEF',
                     }
                 }
             }

src/js/deptConsole.js

@@ -77,9 +77,11 @@ function dateChange(){
     $(".monthYear .mon").click(function(){
         $(this).css({
             backgroundColor:'#00A1FF',
-            color:'#fff'
+            color:'#E9EBEF',
+           "border-color":'#00A1FF'
         }).siblings().css({
-            color:'#fff',
+            "border-color":'#A5ADBF',
+            color:'#A5ADBF',
             backgroundColor:'#203463'
         })
         dateType = 1
@@ -88,9 +90,11 @@ function dateChange(){
     $(".monthYear .year").click(function(){
         $(this).css({
             backgroundColor:'#00A1FF',
-            color:'#fff'
+            color:'#E9EBEF',
+            "border-color":'#00A1FF'
         }).siblings().css({
-            color:'#fff',
+            "border-color":'#A5ADBF',
+            color:'#A5ADBF',
             backgroundColor:'#203463'
         })
         dateType = 2
@@ -298,7 +302,7 @@ function lineChartSpecial(dataX,dataY){
                 },
                 axisLabel: {//x轴刻度
                     textStyle: {
-                        color: '#fff'
+                        color: '#E9EBEF'
                     },
                     rotate:45,
                     formatter: function (value) {
@@ -327,12 +331,12 @@ function lineChartSpecial(dataX,dataY){
                 },
                 axisLabel: {//y轴刻度
                     textStyle: {
-                        color: '#fff'
+                        color: '#E9EBEF'
                     }
                 },
                 splitLine:{//分割线
                     lineStyle:{
-                        color:'#4A5D8E'
+                        color:'#344876'
                     }
                 }
             }
@@ -691,7 +695,7 @@ function queList(data){
     for(let i = 0;i < data.length;i++){
         strAll += `
             <tr>
-                <td style="text-align:center;"><i style="background:${i < 3?'#bea571':'#eff3fc'};color:${i < 3?'#fff':'#999'};">${i+1}</i></td>
+                <td style="text-align:center;"><i style="background:${i < 3?'#ECB22E':'#526186'};color:${i < 3?'#fff':'#B7BDCC'};">${i+1}</i></td>
                 <td>${data[i].name}</td>
                 <td>${data[i].num}</td>
                 <td>${data[i].percentStr}</td>