样式

assets/css/base.less

+@import "./custom.less";
+
 html body {
   min-width: 1240px;
 }
@@ -25,21 +27,21 @@ div::-webkit-scrollbar {
 }
 
 div::-webkit-scrollbar-track {
-  background: rgb(239, 239, 239);
+  background: @scrollbar-track-bg-color;
   border-radius: 2px;
 }
 
 div::-webkit-scrollbar-thumb {
-  background: rgba(38, 128, 235, 0.5);
+  background: @scrollbar-thumb-bg-color;
   border-radius: 10px;
 }
 
 div::-webkit-scrollbar-thumb:hover {
-  background: rgba(38, 128, 235, 0.8);
+  background: @scrollbar-thumb-bg-color-hover;
 }
 
 div::-webkit-scrollbar-corner {
-  background: rgba(38, 128, 235, 1);
+  background: @scrollbar-corner-bg-color;
 }
 
 /*flex*/
@@ -100,11 +102,19 @@ div::-webkit-scrollbar-corner {
 .ib {
   display: inline;
 }
-.pa{
+
+.pa {
   position: absolute;
 }
-.pr{position: relative;}
-.pf{position: fixed;}
+
+.pr {
+  position: relative;
+}
+
+.pf {
+  position: fixed;
+}
+
 .f14 {
   font-size: 14px;
 }
@@ -124,6 +134,7 @@ div::-webkit-scrollbar-corner {
 .f24 {
   font-size: 24px;
 }
+
 .f30 {
   font-size: 30px;
 }
@@ -230,12 +241,15 @@ div::-webkit-scrollbar-corner {
 .mb30 {
   margin-bottom: 30px;
 }
+
 .mb50 {
   margin-bottom: 50px;
 }
+
 .mb60 {
   margin-bottom: 60px;
 }
+
 .mb70 {
   margin-bottom: 70px;
 }
@@ -263,9 +277,11 @@ div::-webkit-scrollbar-corner {
 .ml30 {
   margin-left: 30px;
 }
+
 .ml40 {
   margin-left: 40px;
 }
+
 .ml50 {
   margin-left: 50px;
 }
@@ -297,6 +313,7 @@ div::-webkit-scrollbar-corner {
 .mr30 {
   margin-right: 30px;
 }
+
 .mr40 {
   margin-right: 40px;
 }
@@ -323,15 +340,19 @@ div::-webkit-scrollbar-corner {
 .pt10 {
   padding: 10px 0px 0;
 }
+
 .pb5 {
   padding-bottom: 5px;
 }
+
 .pb10 {
   padding-bottom: 10px;
 }
+
 .pb20 {
   padding-bottom: 20px;
 }
+
 .ptb5 {
   padding-top: 5px;
   padding-bottom: 5px;
@@ -353,9 +374,11 @@ div::-webkit-scrollbar-corner {
 .pl30 {
   padding-left: 30px
 }
+
 .pl40 {
   padding-left: 40px
 }
+
 .pl50 {
   padding-left: 50px
 }
@@ -375,7 +398,8 @@ div::-webkit-scrollbar-corner {
 .pt15 {
   padding-top: 15px
 }
-.pr30{
+
+.pr30 {
   padding-right: 30px;
 }
 
@@ -590,10 +614,10 @@ div::-webkit-scrollbar-corner {
 }
 
 /*字体颜色*/
-.font_fff
-{
-  color:#fff;
+.font_fff {
+  color: #fff;
 }
+
 /*按钮颜色*/
 
 .bluebg {
@@ -1483,9 +1507,11 @@ html [type=button] {
 .gdShow {
   box-shadow: 0px 0px 15px #333;
 }
-.bgDDD{
-  background:#DDD
+
+.bgDDD {
+  background: #DDD
 }
+
 .ftball {
   background: rgba(0, 0, 0, 0.7);
   color: #fff;

assets/css/custom.less

+//定义变量
+
+
+//滚动条颜色
+@scrollbar-track-bg-color: rgb(239, 239, 239);
+@scrollbar-thumb-bg-color: rgba(38, 128, 235, 0.5);
+@scrollbar-thumb-bg-color-hover: rgba(38, 128, 235, 0.8);
+@scrollbar-corner-bg-color: rgba(38, 128, 235, 1);
+
+
+//顶部导航颜色
+@home-mene: #2680eb;
+@layout-header: #515A6E;
+
+
+//弹框颜色
+@modal-header-bg-color: #515A6E;

assets/css/iview-reset.less

 @import '~view-design/src/styles/index.less';
-
+@import "./custom.less";
 // @primary-color: #249e91;
 
 .ivu-btn {
@@ -139,7 +139,7 @@
 
 .ivu-modal-header {
   // background-color: #f2f2f2;
-  background-color: #515A6E;
+  background-color: @modal-header-bg-color;
   color: #fff;
   border-radius: 5px 5px 0 0;
 
@@ -272,7 +272,10 @@
   width: 300px;
   height: 25px;
 }
-
+//顶部导航
+.ivu-layout-header{
+  background-color: @layout-header !important;
+}
 //重新定义弹框的footer--[工艺规程管理有用到]
 .model_footer {
   border-top: 1px solid #e8eaec;

layouts/basic-layout/product.vue

@@ -419,6 +419,7 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../assets/css/custom.less";
 .i-layout-header-breadcrumb {
   color: #a7b8cc !important; //wheat
 }
@@ -456,7 +457,7 @@ export default {
         width: 30px;
         display: inline-block;
         border-radius: 50%;
-        background: #2680eb;
+        background: @home-mene;
         color: white;
         line-height: 30px;
         text-align: center;