样式提取变量

assets/css/base.less

 @import "./custom.less";
-
+@import "./iview-reset.less";
 html body {
   min-width: 1240px;
+  color: @body-color;
 }
 
 .__nuxt-error-page {
@@ -994,7 +995,7 @@ textarea::-webkit-input-placeholder {
   text-align: right;
   border: #E4E6ED solid 1px;
   background: #F5F6FA;
-  color: #515A6E;
+  color: #fff;
   font-weight: bold;
   height: 35px;
   line-height: 34px;

assets/css/custom.less

 //定义变量
+//@import './themes/default.less';
+// @import './themes/green.less';
+ @import './themes/blank.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;
 
-//bady颜色
-@layout-content-bg-color: #fff;
-@card-bg: #fff;
 
-//收藏夹自体图标颜色
-@icon-color: #2680eb;
-
-//首页标题颜色
-@title-color: #0099ff;
-
-//表格、表单 以及其他字体颜色
-@table-color:#515A6E;
-
-//弹框颜色
-@modal-header-bg-color: #515A6E;
-
-
-
-
-// //滚动条颜色
-// @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;
-
-// //bady颜色
-// @layout-content-bg-color: #fff;
-// @card-bg: #fff;
-
-// //收藏夹自体图标颜色
-// @icon-color: #2680eb;
-
-// //首页标题颜色
-// @title-color: #0099ff;
-
-// //表格、表单 以及其他字体颜色
-// @table-color:#515A6E;
-
-// //弹框颜色
-// @modal-header-bg-color: #515A6E;

assets/css/iview-reset.less

@@ -256,10 +256,12 @@
   }
 
 }
+
 //表格字体颜色
 .ivu-table {
-  color:@table-color !important;
+  color: @table-color  !important;
 }
+
 //校验不通过下面提示红色小字
 .ivu-form-item-error-tip {
   position: absolute;
@@ -394,3 +396,17 @@
     width: 254px;
   }
 }
+
+//顶部导航
+.i-layout-tabs {
+   background-color: @layout-tabs !important;
+}
+
+.i-layout-tabs-main {
+   background-color: @layout-tabs !important;
+}
+
+
+.i-layout-tabs-close-main {
+  color: @layout-tabs-close;
+}

assets/css/themes/blank.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;
+@layout-tabs: #f5f7f9;
+@layout-tabs-close: #515A6E;
+
+//bady颜色
+@layout-content-bg-color: #fff;
+@card-bg: #fff;
+@body-color: #515a6e;
+@border-color: #dcdfe6;
+@border-bot-color: #eee;
+@msg-bg-color: #fff;
+
+
+//table表头颜色
+@table-header: #2b3568;
+@table-title-color: #515a6e;
+@cao-zuo-color: #2680eb;
+
+
+//user
+@s1-color: #333;
+
+
+
+//图标颜色
+@icon-title-color: #2680eb;
+
+//左右滑动图标颜色
+@icon-slide1-color: #dcdfe6;
+@icon-slide2-color: #a7b8cc;
+
+
+//收藏夹自体图标颜色
+@icon-color: #2680eb;
+
+//首页标题颜色
+@title-color: #0099ff;
+
+//表格、表单 以及其他字体颜色
+@table-color: #515A6E;
+
+//弹框颜色
+@modal-header-bg-color: #515A6E;

assets/css/themes/default.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: #2f2f57;
+@layout-tabs: #5151f1;
+@layout-tabs-close: #515A6E;
+
+//bady颜色
+@layout-content-bg-color: #232341;
+@card-bg: #2f2f57;
+@body-color: #fff;
+@border-color: #2680eb;
+@border-bot-color: #2f2f57;
+@msg-bg-color: #292a4e;
+
+//table表头颜色
+@table-header: #2b3568;
+@table-title-color: #fff;
+@cao-zuo-color: #2680eb;
+
+
+//user
+@s1-color: #fff;
+
+//图标颜色
+@icon-title-color: #fff;
+
+//左右滑动图标颜色
+@icon-slide1-color: #22489a;
+@icon-slide2-color: #5d7291;
+
+//收藏夹自体图标颜色
+@icon-color: #2680eb;
+
+//首页标题颜色
+@title-color: #0099ff;
+
+//表格、表单 以及其他字体颜色
+@table-color: #fff;
+
+//弹框颜色
+@modal-header-bg-color: #515A6E;
+
+

assets/css/themes/green.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: #04bb8c;
+@layout-header: #515A6E;
+@layout-tabs: #f5f7f9;
+@layout-tabs-close: #515A6E;
+
+//bady颜色
+@layout-content-bg-color: #fff;
+@card-bg: #fff;
+@body-color: #515a6e;
+@border-color: #dcdfe6;
+@border-bot-color: #eee;
+@msg-bg-color: #fff;
+
+//table表头颜色
+@table-header: #2b3568;
+@table-title-color: #fff;
+@cao-zuo-color: #04bb8c;
+
+//user
+@s1-color: #333;
+
+
+
+//图标颜色
+@icon-title-color: #04bb8c;
+
+//左右滑动图标颜色
+@icon-slide1-color: #dcdfe6;
+@icon-slide2-color: #a7b8cc;
+
+
+//收藏夹自体图标颜色
+@icon-color: #04bb8c;
+
+//首页标题颜色
+@title-color: #04bb8c;
+
+//表格、表单 以及其他字体颜色
+@table-color: #515A6E;
+
+//弹框颜色
+@modal-header-bg-color: #515A6E;

components/page/user.vue

@@ -29,8 +29,8 @@ export default {
   props: {
     value: {
       type: [Number, String],
-      default: 0
-    }
+      default: 0,
+    },
   },
   data() {
     return {
@@ -39,13 +39,13 @@ export default {
         face: "",
         gender: "",
         roles: "",
-        status:0,
+        status: 0,
         department: "",
         loginName: "",
-        id: 0
+        id: 0,
       },
       css: "s0",
-      img:'',
+      img: "",
     };
   },
 
@@ -64,26 +64,27 @@ export default {
           } else if (this.user.status == 1) {
             this.css = "s1";
           }
-          if(user.face){
-            this.img=fileUrlDown+user.face;
+          if (user.face) {
+            this.img = fileUrlDown + user.face;
           }
         }
       }
-    }
+    },
   },
   watch: {
     value(v) {
       if (v > 0) this.load();
-    }
-  }
+    },
+  },
 };
 </script>
-<style lang="less">
+<style lang="less" >
+@import "../../assets/css/custom.less";
 .s2 {
   color: red;
 }
 .s1 {
-  color: #333;
+  color: @s1-color;
 }
 .s0 {
   color: #ddd;

layouts/basic-layout/product.vue

@@ -440,7 +440,7 @@ export default {
 .product-layout {
   .i-layout-content {
     padding: 5px 10px 0 10px;
-    height: calc(100vh - 90px);
+    // height: calc(100vh - 90px);
   }
   .i-tabs {
     width: 100% !important;

pages/home/component/approval.vue

@@ -2,16 +2,60 @@
 
 <template>
   <div class="approval">
-    <Card class="todolist">
+    <div class="todolist">
       <p class="row_head">
         <Icon type="md-contact" class="f20" />
         <span class="ml10">待审批</span>
         <a class="row_more fr" @click="toivew">更多</a>
       </p>
-      <div class="row_card_body">
-        <Table border :columns="columns1" :data="data1" height="250"></Table>
+      <!-- <div class="row_card_body"> -->
+      <!-- <Table :row-class-name="rowClassName" :columns="columns1" :data="data1" height="250" :disabled-hover='true'></Table> -->
+      <div class="msg">
+        <Row class="row-text1">
+          <Col :span="2">
+            <span class="text">序号</span>
+          </Col>
+          <Col :span="5">
+            <!-- :style="{color:item.color||'#2680eb'}" -->
+            <span class="text">类别</span>
+          </Col>
+          <Col :span="5">
+            <!-- :style="{color:item.color||'#2680eb'}" -->
+            <span class="text">环节</span>
+          </Col>
+          <Col :span="5">
+            <!-- :style="{color:item.color||'#2680eb'}" -->
+            <span class="text">下一个环节</span>
+          </Col>
+          <Col :span="5" class="sender">
+            <span class="text">创建时间</span>
+          </Col>
+          <Col :span="2" class="sender-time">
+            <span class="text">操作</span>
+          </Col>
+        </Row>
+        <Row v-for="(item,index) in data1" :key="index" class="row-text">
+          <Col :span="2">{{index+1}}</Col>
+          <Col :span="5">
+            <!-- :style="{color:item.color||'#2680eb'}" -->
+            <span class="text">{{item.schemaName}}</span>
+          </Col>
+          <Col :span="5">
+            <!-- :style="{color:item.color||'#2680eb'}" -->
+            <span class="text">{{item.currentNodeName}}</span>
+          </Col>
+          <Col :span="5">
+            <!-- :style="{color:item.color||'#2680eb'}" -->
+            <span class="text">{{item.nextNodeName?item.nextNodeName:'--'}}</span>
+          </Col>
+          <Col :span="5" class="sender">{{item.creationTime}}</Col>
+          <Col :span="2" class="sender-time">
+            <a href="#" @click="viewRow(item)">查看</a>
+          </Col>
+        </Row>
       </div>
-    </Card>
+    </div>
+    <!-- </div> -->
     <Modal v-model="viewModal" width="800" title="详情">
       <div class="detail">
         <Row>
@@ -35,38 +79,38 @@ export default {
       imgUrl: iconImg,
       viewModal: false, //详情弹框
       viewData: {}, //详情数据
-      columns1: [
-        { type: "index", title: "序号", width: 70, align: "center" },
-        { key: "schemaName", title: "类别", align: "center" },
-        { key: "currentNodeName", title: "环节", align: "center" },
-        { key: "nextNodeName", title: "下一环节", align: "center" },
-        { key: "creationTime", title: "创建时间", align: "center" },
-        {
-          key: "id",
-          title: "操作",
-          align: "center",
-          width: 100,
-          render: (h, parmse) => {
-            return h("div", [
-              h(
-                "op",
-                {
-                  attrs: {
-                    oprate: "add",
-                    title: "查看",
-                  },
-                  on: {
-                    click: () => {
-                      this.viewRow(parmse.row);
-                    },
-                  },
-                },
-                "查看"
-              ),
-            ]);
-          },
-        },
-      ],
+      // columns1: [
+      //   { type: "index", title: "序号", width: 70, align: "center" },
+      //   { key: "schemaName", title: "类别", align: "center" },
+      //   { key: "currentNodeName", title: "环节", align: "center" },
+      //   { key: "nextNodeName", title: "下一环节", align: "center" },
+      //   { key: "creationTime", title: "创建时间", align: "center" },
+      //   {
+      //     key: "id",
+      //     title: "操作",
+      //     align: "center",
+      //     width: 100,
+      //     render: (h, parmse) => {
+      //       return h("div", [
+      //         h(
+      //           "op",
+      //           {
+      //             attrs: {
+      //               oprate: "add",
+      //               title: "查看",
+      //             },
+      //             on: {
+      //               click: () => {
+      //                 this.viewRow(parmse.row);
+      //               },
+      //             },
+      //           },
+      //           "查看"
+      //         ),
+      //       ]);
+      //     },
+      //   },
+      // ],
       data1: [],
     };
   },
@@ -77,6 +121,14 @@ export default {
     await store.dispatch("loadDictionary"); // 加载数据字典
   },
   methods: {
+    rowClassName(row, index) {
+      if (index % 2 == 0) {
+        return "demo-table-info-row";
+      } else {
+        return "demo-table-error-row";
+      }
+      return "";
+    },
     getlaoed() {
       let parme = {
         pageIndex: 1,
@@ -104,22 +156,78 @@ export default {
   mounted() {},
 };
 </script>
-<style lang="less" scoped>
+<style lang="less" >
 @import "../../../assets/css/custom.less";
 .approval {
   background: @card-bg;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
-  border-radius: 8px;
+  border-radius: 5px;
+  padding: 10px;
 }
 .row_head {
   height: 30px;
-  color: @title-color;
-  border-bottom: 1px solid #dcdfe6;
+  color: @icon-title-color;
+  border-bottom: 1px solid @border-color;
   a {
-    color: @title-color;
+    color: @icon-title-color;
   }
 }
-.row_card_body {
+.msg {
+  height: 245px;
+  overflow-y: auto;
   margin-top: 10px;
+  .row-text1 {
+    height: 45px;
+    line-height: 45px;
+    padding: 0 15px;
+    background: @table-header;
+    color: @table-title-color;
+    .sender {
+      text-align: center;
+    }
+    .sender-time {
+      text-align: right;
+      padding-right: 15px;
+    }
+  }
+  .row-text {
+    height: 45px;
+    line-height: 45px;
+    border-bottom: 1px solid @border-bot-color;
+    padding: 0 15px;
+    .text {
+      cursor: pointer;
+    }
+    .text:hover {
+      color: #2680eb;
+    }
+    .sender {
+      text-align: center;
+    }
+    .sender-time {
+      text-align: right;
+      padding-right: 15px;
+      a {
+        color: @cao-zuo-color;
+      }
+    }
+    // .ivu-icon {
+    //   color: #2680eb;
+    // }
+  }
+}
+.msg .row-text:nth-child(odd) {
+  background-color: @msg-bg-color;
 }
+// .row_card_body {
+//   margin-top: 10px;
+// }
+// .ivu-table .demo-table-info-row td {
+//   background-color: #2f2f57;
+//   color: #fff;
+// }
+// .ivu-table .demo-table-error-row td {
+//   background-color: #292a4e;
+//   color: #fff;
+// }
 </style>
\ No newline at end of file

pages/home/component/materielChart.vue

@@ -213,9 +213,9 @@ export default {
   .row_head {
     height: 35px;
     line-height: 30px;
-    color: @title-color;
+    color: @icon-title-color;
     margin-left: 10px;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid @border-color;
   }
 }
 </style>
\ No newline at end of file

pages/home/component/staChart.vue

@@ -337,9 +337,9 @@ export default {
   .row_head {
     height: 35px;
     line-height: 30px;
-    color: @title-color;
+    color: @icon-title-color;
     margin: 0 10px;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid @border-color;
     .geng-duo {
       text-align: right;
     }

pages/home/component/suspendChart.vue

@@ -208,8 +208,9 @@ export default {
     height: 35px;
     line-height: 30px;
     margin-left: 10px;
-    color:@title-color;
-    border-bottom: 1px solid #dcdfe6;
+    color:@icon-title-color;
+    border-bottom: 1px solid @border-color;
+    // #dcdfe6
   }
 }
-</style>
+</style>
\ No newline at end of file

pages/home/component/unqualifiedEcharts.vue

@@ -191,9 +191,9 @@ export default {
   .row_head {
     height: 35px;
     line-height: 30px;
-    color:@title-color;
+    color: @icon-title-color;
     // margin: 0 10px;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid @border-color;
     .geng-duo {
       text-align: right;
     }

pages/home/component/unreadMessage.vue

 <template>
-  <Card class="todolist-u">
+  <div class="todolist-u">
     <p class="row_head">
       <Icon type="ios-chatbubbles" class="f20" />
       <Badge :count="unreadMessage" :offset="[9,-5]">
@@ -12,7 +12,7 @@
         <Col :span="1">{{index+1}}</Col>
         <Col :span="8">
           <!-- :style="{color:item.color||'#2680eb'}" -->
-          <Icon :type="item.icon||'md-mail'" style="color:#2680eb" />&nbsp;
+          <Icon :type="item.icon||'md-mail'" class="mg-icon" />&nbsp;
           <span @click="clickItem(item,index)" class="text">{{item.title}}</span>
         </Col>
         <Col :span="7" class="sender">
@@ -27,7 +27,7 @@
         <Button type="primary" @click="modal1=false">取消</Button>
       </div>
     </Modal>
-  </Card>
+  </div>
 </template>
 <script>
 import Api from "../api";
@@ -98,15 +98,16 @@ export default {
 .todolist-u {
   background: @card-bg;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
-  border-radius: 8px;
+  border-radius: 5px;
+  padding: 10px;
 }
 .row_head {
   height: 35px;
   line-height: 30px;
-  color: @title-color;
-  border-bottom: 1px solid #dcdfe6;
+  color: @icon-title-color;
+  border-bottom: 1px solid @border-color;
   a {
-    color: @title-color;
+    color: @icon-title-color;
   }
 }
 .msg {
@@ -116,8 +117,8 @@ export default {
   .row-text {
     height: 40px;
     line-height: 40px;
-    border-bottom: 1px solid #eee;
-
+    border-bottom: 1px solid @border-bot-color;
+    padding-left: 8px;
     .text {
       cursor: pointer;
     }
@@ -131,9 +132,15 @@ export default {
       text-align: right;
       padding-right: 15px;
     }
-    // .ivu-icon {
-    //   color: #2680eb;
-    // }
+    .mg-icon {
+      color: @icon-title-color;
+    }
   }
 }
+.msg .row-text:nth-child(odd) {
+  background-color: @msg-bg-color;
+}
+// .msg .row-text:nth-child(even){
+
+// }
 </style>
\ No newline at end of file

pages/home/component/workChart.vue

@@ -310,9 +310,9 @@ export default {
   .row_head {
     height: 35px;
     line-height: 30px;
-    color: @title-color;
+    color: @icon-title-color;
     margin-left: 10px;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid @border-color;
     .geng-duo {
       text-align: right;
     }

pages/home/index.vue

@@ -72,34 +72,34 @@
       </Col>
     </Row>
     <div class="table title-r" v-if="show">
-      <a class="a-r" @click="set(show)">
+      <div class="a-r" @click="set(show)">
         <Icon type="md-settings" class="f20" />
-      </a>
+      </div>
       <StaChart />
     </div>
     <div class="table title-r" v-if="show1">
-      <a class="a-r" @click="set">
+      <div class="a-r" @click="set">
         <Icon type="md-settings" class="f20" />
-      </a>
+      </div>
       <UnqualifiedEcharts />
     </div>
     <Row class="table title-r" :gutter="16">
       <Col :span="8" class="title-r" v-if="show2">
-        <a class="a-r" @click="set(show2)">
+        <div class="a-r" @click="set(show2)">
           <Icon type="md-settings" class="f20" />
-        </a>
+        </div>
         <WorkChart />
       </Col>
       <Col :span="8" class="title-r" v-if="show3">
-        <a class="a-r" @click="set">
+        <div class="a-r" @click="set">
           <Icon type="md-settings" class="f20" />
-        </a>
+        </div>
         <SuspendChart />
       </Col>
       <Col :span="8" class="title-r" v-if="show4">
-        <a class="a-r" @click="set">
+        <div class="a-r" @click="set">
           <Icon type="md-settings" class="f20" />
-        </a>
+        </div>
         <MaterielChart />
       </Col>
     </Row>
@@ -217,7 +217,7 @@ export default {
   },
   created() {
     this.$store.dispatch("collectList");
-  
+
     this.get();
     this.getUserInfoFn();
     // console.log(this.$store.state.collect);
@@ -275,6 +275,7 @@ export default {
           this.userData = res.result;
           if (res.result) {
             this.avatorPath = fileUrlDown + res.result.avatarUrl;
+            // console.log(this.avatorPath)
             this.imgPath = true;
           } else {
             this.avatorPath = "";
@@ -378,7 +379,7 @@ export default {
     .img-header {
       margin-top: -10px;
       z-index: 999;
-      background: rgba(255, 255, 255, 1);
+      // background: rgba(255, 255, 255, 1);
     }
     .ivu-avatar > img {
       width: 100%;
@@ -387,7 +388,7 @@ export default {
     .user-text {
       width: 43%;
       z-index: 999;
-      background: rgba(255, 255, 255, 1);
+      // background: rgba(255, 255, 255, 1);
       p {
         margin: 10px 20px;
       }
@@ -400,7 +401,7 @@ export default {
       .bg-b {
         margin-top: 10px;
         font-size: 30px;
-        color: #dcdfe6;
+        color: @icon-slide1-color;
         position: absolute;
         width: 40px;
         top: 13px;
@@ -409,7 +410,7 @@ export default {
       .bg-b1 {
         margin-top: 10px;
         font-size: 30px;
-        color: #a7b8cc;
+        color: @icon-slide2-color;
         cursor: pointer;
         position: absolute;
         width: 40px;
@@ -420,7 +421,7 @@ export default {
         width: 40px;
         margin-top: 10px;
         font-size: 30px;
-        color: #dcdfe6;
+        color: @icon-slide1-color;
         position: absolute;
         top: 13px;
         right: 0;
@@ -429,7 +430,7 @@ export default {
         width: 40px;
         margin-top: 10px;
         font-size: 30px;
-        color: #a7b8cc;
+        color: @icon-slide2-color;
         cursor: pointer;
         position: absolute;
         top: 13px;
@@ -457,6 +458,7 @@ export default {
         position: absolute;
         top: -17px;
         right: 7px;
+        color: @icon-title-color;
         .ivu-icon {
           font-size: 16px;
         }
@@ -469,7 +471,7 @@ export default {
     text-align: center;
     .bg-b {
       font-size: 30px;
-      color: #dcdfe6;
+      color: @icon-slide1-color;
       width: 35px;
       position: absolute;
       top: 45px;
@@ -477,7 +479,7 @@ export default {
     }
     .bg-b1 {
       font-size: 30px;
-      color: #a7b8cc;
+      color: @icon-slide2-color;
       width: 35px;
       position: absolute;
       top: 45px;
@@ -493,7 +495,7 @@ export default {
     .bg-l {
       position: absolute;
       font-size: 30px;
-      color: #dcdfe6;
+      color: @icon-slide1-color;
       top: 45px;
       right: 0;
       width: 35px;
@@ -501,7 +503,7 @@ export default {
     .bg-l1 {
       position: absolute;
       font-size: 30px;
-      color: #a7b8cc;
+      color: @icon-slide2-color;
       top: 45px;
       right: 0;
       width: 35px;
@@ -576,6 +578,7 @@ export default {
     top: 15px;
     right: 15px;
     z-index: 100;
+    color: @icon-title-color;
   }
   .set-p {
     width: 100%;