【操作】按钮统一

src/assets/less/overwrite.css

@@ -57,12 +57,10 @@ img {
 }
 .content .main .cardTask {
   width: 100%;
-  border-radius: 14px;
+  border-radius: 10px;
   text-align: left;
   margin-bottom: 16px;
   border: none;
-  background-color: white;
-  border: 1px solid rgba(70, 130, 180, 0.1);
 }
 .content .main .cardTask .pTitle {
   width: 100%;
@@ -70,7 +68,7 @@ img {
   font-size: 18px;
   font-weight: 700;
   color: #092834;
-  border-radius: 10px;
+  border-radius: 14px;
   padding-left: 2px;
 }
 .content .main .cardTask .pTitle span {
@@ -81,34 +79,11 @@ img {
   margin-right: 6px;
   border-radius: 10px;
   vertical-align: text-bottom;
+  margin-left: 10px;
 }
 .content .main .cardTask .pTitle span img {
   display: block !important;
 }
-.content .main .cardTask .operation .operationImg {
-  display: none;
-  height: 28px;
-  width: 28px;
-  vertical-align: text-bottom;
-}
-.content .main .cardTask .operation p {
-  font-size: 16px;
-  color: #092834;
-  font-weight: 700;
-}
-.content .main .cardTask .operation /deep/ .ant-btn {
-  border-radius: 999em;
-  border: none;
-  padding: 0 10px;
-  border: 1px solid rgba(106, 105, 105, 0.1);
-  margin-right: 2px;
-}
-.content .main .cardTask /deep/ .ant-divider {
-  color: #e7e9eb !important;
-}
-.content .main .cardTask /deep/ .ant-divider-horizontal {
-  margin-bottom: 16px;
-}
 .content .main /deep/ .ant-card-head {
   color: #092834;
   font-weight: 700;
@@ -145,32 +120,6 @@ img {
 .content .main /deep/ .ant-tabs-ink-bar {
   height: 0;
 }
-.content .main .todoBody .priorityComm {
-  padding: 3px 8px;
-  color: #092834;
-  letter-spacing: 1px;
-}
-.content .main .todoBody .statusComm {
-  padding: 3px 8px;
-  color: #092834;
-  letter-spacing: 1px;
-}
-.content .main .todoBody .resultComm {
-  padding: 4px 10px;
-  color: black;
-  letter-spacing: 1px;
-}
-.content .main .todoBody .doneDeleteReason {
-  padding: 4px 10px;
-  border-radius: 2px;
-  letter-spacing: 1px;
-  color: black;
-}
-.content .main .todoBody .comment {
-  color: black;
-  background: rgba(128, 128, 128, 0.5);
-  padding: 4px 10px;
-}
 .content /deep/ .ant-empty-image {
   margin-top: 120px;
 }

src/assets/less/overwrite.less

@@ -71,12 +71,10 @@ img {
     //每个任务卡
     .cardTask {
       width: 100%;
-      border-radius: 14px;
+      border-radius: 10px;
       text-align: left;
       margin-bottom: 16px;
       border: none;
-      background-color: white;
-      border: 1px solid rgba(70, 130, 180, 0.1);
       // card 标题
       .pTitle {
         width: 100%;
@@ -84,8 +82,10 @@ img {
         font-size: 18px;
         font-weight: 700;
         color: #092834;
-        border-radius: 10px;
+        border-radius: 14px;
         padding-left: 2px;
+        // box-shadow: rgba(149, 156, 156, 0.4) 0px 0px 20px inset;
+
         // 图 外盒子
         span {
           display: inline-block;
@@ -95,41 +95,12 @@ img {
           margin-right: 6px;
           border-radius: 10px;
           vertical-align: text-bottom;
-
+          margin-left: 10px;
           img {
             display: block !important;
           }
         }
       }
-      //操作 样式
-      .operation {
-        .operationImg {
-          display: none; //inline-block;
-          height: 28px;
-          width: 28px;
-          vertical-align: text-bottom;
-        }
-        p {
-          font-size: 16px;
-          color: #092834;
-          font-weight: 700;
-        }
-        // 操作 按钮样式
-        /deep/.ant-btn {
-          border-radius: 999em;
-          border: none;
-          padding: 0 10px;
-          border: 1px solid rgba(106, 105, 105,.1);
-          margin-right: 2px;
-        }
-      }
-      /deep/.ant-divider {
-        color: #e7e9eb !important;
-
-      }
-      /deep/.ant-divider-horizontal {
-        margin-bottom: 16px;
-      }
     }
 
     /deep/.ant-card-head {
@@ -173,41 +144,6 @@ img {
     /deep/.ant-tabs-ink-bar {
       height: 0;
     }
-    //状态、结果等
-    .todoBody {
-      //优先级
-      .priorityComm {
-        padding: 3px 8px;
-        color: #092834;
-        letter-spacing: 1px;
-      }
-      // 状态
-      .statusComm {
-        padding: 3px 8px;
-        color: #092834;
-        letter-spacing: 1px;
-      }
-
-      // 结果
-      .resultComm {
-        padding: 4px 10px;
-        color: black;
-        letter-spacing: 1px;
-      }
-      // 审批操作(驳回原因)
-      .doneDeleteReason {
-        padding: 4px 10px;
-        border-radius: 2px;
-        letter-spacing: 1px;
-        color: black;
-      }
-      //审核意见
-      .comment {
-        color: black;
-        background: rgba(128, 128, 128, 0.5);
-        padding: 4px 10px;
-      }
-    }
   }
 
   // 暂无数据

src/views/user/Login.vue

@@ -217,7 +217,6 @@ export default {
         this.lcModal.visible = true
       }
       console.log('发起', v)
-
       // this.getDataList()
     },
 
@@ -232,7 +231,7 @@ export default {
 <style src="@assets/less/overwrite.less" lang="less" scoped></style>
 <style lang="less" scoped>
 /deep/.ant-card-head-title {
-  padding: 0;
+  margin-top: 14px;
 }
 /deep/.ant-card-body {
   padding: 0 24px;

src/views/user/tabs/ApplyTab.vue

@@ -52,16 +52,15 @@
         <!-- 结果 -->
         <p class="fr">
           结果：
-
-          <span class="resultComm" v-if="item.result == 0" style="background:rgba(52, 123, 152,.5);">
+          <span class="resultComm" v-if="item.result == 0" style="background:rgba(52, 123, 152,.4);">
             未提交
           </span>
 
-          <span class="resultComm" v-else-if="item.result == 1" style="background:rgb(252, 96, 10,.5);">
+          <span class="resultComm" v-else-if="item.result == 1" style="background:rgb(252, 96, 10,.4);">
             处理中
           </span>
 
-          <span class="resultComm" v-else-if="item.result == 2" style="background:rgb(9, 40, 52,.5);">
+          <span class="resultComm" v-else-if="item.result == 2" style="background:rgb(9, 40, 52,.4);">
             通过
           </span>
 
@@ -70,101 +69,67 @@
           </span>
         </p>
 
-        <a-divider></a-divider>
+        <a-divider dashed></a-divider>
 
         <!-- 操作 -->
         <div class="operation">
-          <div class="btns">
-            <!-- 结果 0 -->
-            <span v-if="item.status == 0">
-              <a-button
-                class="itemBtn"
-                ghost
-                @click="apply(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.9);color:#00A0E9;"
-              >
-                提交申请
-              </a-button>
-              <a-button
-                class="itemBtn"
-                ghost
-                @click="edit(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:orange;"
-              >
-                编辑
+          <!-- 结果 0 -->
+          <span v-if="item.status == 0">
+            <a-button ghost @click="apply(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#00A0E9;">
+              提交申请
+            </a-button>
+            <a-button ghost @click="edit(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:orange;">
+              编辑
+            </a-button>
+
+            <a-popconfirm title="确定删除吗?" placement="left" @confirm="() => remove(item)">
+              <a-button ghost style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#4e73b9;">
+                删除
               </a-button>
+            </a-popconfirm>
+          </span>
 
-              <a-popconfirm title="确定删除吗?" placement="left" @confirm="() => remove(item)">
-                <a-button class="itemBtn" ghost style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#4e73b9;">
-                  删除
-                </a-button>
-              </a-popconfirm>
-            </span>
-
-            <!-- 处理中   渲染的按钮 -->
-            <span v-if="item.status == 1" class="ingBtns">
-              <a-button
-                class="itemBtn"
-                ghost
-                @click="cancel(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#8000ff;"
-              >
-                撤回
-              </a-button>
-              <a-button
-                class="itemBtn"
-                ghost
-                @click="history(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:blue;"
-              >
-                查看进度
-              </a-button>
+          <!-- 处理中   渲染的按钮 -->
+          <span v-if="item.status == 1" class="ifBtn">
+            <a-button ghost @click="cancel(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#A0522D;">
+              撤回
+            </a-button>
+            <a-button
+              ghost
+              @click="history(item)"
+              style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#696969;"
+            >
+              查看进度
+            </a-button>
 
-              <a-button
-                class="itemBtn"
-                ghost
-                @click="detail(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#999;"
-              >
-                表单数据
-              </a-button>
-            </span>
-
-            <!-- 驳回 状态  渲染的按钮 -->
-            <span v-if="item.status == 2 || item.status == 3" class="overBtns">
-              <a-button
-                class="itemBtn"
-                ghost
-                @click="apply(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:#00A0E9;"
-              >
-                重新申请
-              </a-button>
-              <a-button
-                class="itemBtn"
-                ghost
-                @click="edit(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:#000000;"
-              >
-                编辑
-              </a-button>
+            <a-button ghost @click="detail(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#4682B4;">
+              表单数据
+            </a-button>
+          </span>
 
-              <a-button
-                class="itemBtn"
-                ghost
-                @click="history(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:blue;"
-              >
-                审批历史
-              </a-button>
+          <!-- 驳回 状态  渲染的按钮 -->
+          <span v-if="item.status == 2 || item.status == 3" class="ifBtn">
+            <a-button ghost @click="apply(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#008B8B;">
+              重新申请
+            </a-button>
+            <a-button ghost @click="edit(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#006400;">
+              编辑
+            </a-button>
+
+            <a-button
+              ghost
+              @click="history(item)"
+              style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#696969;"
+            >
+              审批历史
+            </a-button>
 
-              <a-popconfirm title="确定删除吗?" placement="left" @confirm="() => remove(item)">
-                <a-button class="itemBtn" ghost style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:red;">
-                  删除
-                </a-button>
-              </a-popconfirm>
-            </span>
-          </div>
+            <a-popconfirm title="确定删除吗?" placement="left" @confirm="() => remove(item)">
+              <a-button ghost style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#DC143C;">
+                删除
+              </a-button>
+            </a-popconfirm>
+          </span>
         </div>
       </a-card>
 
@@ -706,4 +671,33 @@ export default {
 <style lang="less">
 @import '~@assets/less/common.less';
 </style>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+// 状态
+.statusComm {
+  padding: 3px 8px;
+  color: #092834;
+  letter-spacing: 1px;
+}
+
+// 结果
+.resultComm {
+  padding: 4px 10px;
+  color: black;
+  letter-spacing: 1px;
+}
+
+// 操作按钮
+.ifBtn {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  /deep/.ant-btn {
+    padding: 0;
+    padding: 0 10px;
+    margin-bottom: 20px;
+    border-radius: 999em;
+    border: none;
+    // border: 1px solid rgba(106, 105, 105, 0.1);
+  }
+}
+</style>

src/views/user/tabs/DoneTab.vue

@@ -28,26 +28,26 @@
           <span
             v-if="item.deleteReason == '审批驳回'"
             class="doneDeleteReason"
-            style="background:rgba(52, 123, 152,.6);"
+            style="background:rgba(52, 123, 152,.3);"
           >
             {{ item.deleteReason }}</span
           >
           <span
             v-else-if="item.deleteReason == '审批通过'"
             class="doneDeleteReason"
-            style="background:rgba(68, 141, 118,.6);"
+            style="background:rgba(68, 141, 118,.5);"
           >
             {{ item.deleteReason }}
           </span>
           <span
             v-else-if="item.deleteReason == '发起人撤回 - 原因未填写'"
             class="doneDeleteReason"
-            style="background:rgba(47, 144, 231,.6);"
+            style="background:rgba(47, 144, 231,.3);"
           >
             {{ item.deleteReason }}
           </span>
 
-          <span v-else class="doneDeleteReason" style="background:rgba(52, 123, 152,.6);">
+          <span v-else class="doneDeleteReason" style="background:rgba(52, 123, 152,.3);">
             {{ item.deleteReason }}
           </span>
         </p>
@@ -65,46 +65,30 @@
           </span>
         </p>
 
-        <p style="float:right;">
+        <p class="fr">
           发起人：
           <span style="color:black;">
             {{ item.applyer }}
           </span>
         </p>
 
-        <a-divider style="background:rgba(70, 130, 180,.2);"></a-divider>
+        <a-divider dashed></a-divider>
 
         <!-- 操作 -->
         <div class="operation">
-          <div class="btns">
-            <a-button
-              class="itemBtn"
-              ghost
-              @click="detail(item)"
-              style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#4e73b9;"
-            >
-              表单数据
-            </a-button>
+          <a-button ghost @click="detail(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#4e73b9;">
+            表单数据
+          </a-button>
 
-            <a-button
-              class="itemBtn"
-              ghost
-              @click="history(item)"
-              style="color:gray;box-shadow: 8px 8px 8px rgba(128, 128, 128,.7)"
-            >
-              审批历史
-            </a-button>
+          <a-button ghost @click="history(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:gray;">
+            审批历史
+          </a-button>
 
-            <a-popconfirm title="确定删除吗?" placement="left" @confirm="() => remove(item)">
-              <a-button
-                class="itemBtn"
-                ghost
-                style="color:gray;box-shadow: 7px 7px 7px rgba(128, 128, 128,.7);color:red;"
-              >
-                删除
-              </a-button>
-            </a-popconfirm>
-          </div>
+          <a-popconfirm title="确定删除吗?" placement="left" @confirm="() => remove(item)">
+            <a-button ghost style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:red;">
+              删除
+            </a-button>
+          </a-popconfirm>
         </div>
       </a-card>
 
@@ -309,4 +293,34 @@ export default {
 @import '~@assets/less/common.less';
 </style>
 <style lang="less" scoped>
+//审核意见
+.comment {
+  color: black;
+  background: rgba(128, 128, 128, 0.3);
+  padding: 4px 10px;
+}
+
+// 审批操作(驳回原因)
+.doneDeleteReason {
+  padding: 4px 10px;
+  border-radius: 2px;
+  letter-spacing: 1px;
+  color: black;
+}
+
+// 操作按钮
+.operation {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  // 操作 按钮样式
+  /deep/.ant-btn {
+    padding: 0;
+    padding: 0 10px;
+    margin-bottom: 20px;
+    border-radius: 999em;
+    border: none;
+    // border: 1px solid rgba(106, 105, 105, 0.1);
+  }
+}
 </style>

src/views/user/tabs/WaitTab.vue

@@ -32,7 +32,7 @@
             重要
           </span>
 
-          <span class="priorityComm" v-else-if="item.priority == 2" style="background:rgba(255, 0, 0,.2);color:black;">
+          <span class="priorityComm" v-else-if="item.priority == 2" style="background:rgba(255, 0, 0,.6);color:white;">
             紧急
           </span>
           <span class="priorityComm" v-else style="background:#999;">
@@ -43,52 +43,63 @@
         <!-- 状态 -->
         <p>
           状态：
-          <span v-if="item.isSuspended == false" style="background:rgba(252, 96, 10,.6)" class="resultComm">
+          <span v-if="item.isSuspended == false" style="background:rgba(252, 96, 10,.4)" class="statusComm">
             已激活
           </span>
-          <span v-if="item.isSuspended == true" style="background:rgba(20, 137, 184,.6)" class="resultComm">
+          <span v-if="item.isSuspended == true" style="background:rgba(20, 137, 184,.4)" class="statusComm">
             已挂起
           </span>
           {{ item.status }}
         </p>
 
-        <p style="float:left;">
+        <p class="fl">
           创建时间：
           <span style="color:black;">{{ item.createTime }}</span>
         </p>
         <!-- 发起人 -->
-        <p style="float:right;marginBottom:0px;">
+        <p class="fr">
           发起人：
           <span style="color:black;">
             {{ item.applyer }}
           </span>
         </p>
 
-        <a-divider></a-divider>
+        <a-divider dashed></a-divider>
 
         <!-- 操作 -->
         <div class="operation">
-          <a-button ghost @click="detail(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:blue;">
-            申请详情
-          </a-button>
+          <!-- 挂起  -->
+          <span v-if="item.isSuspended == true" style="color:#999999;" title="流程已被挂起，无法操作！" class="ifBtn">
+            <a-button ghost @click="detail(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:blue;">
+              申请详情
+            </a-button>
 
-          <!-- 挂起 按钮不可用 -->
-          <span v-if="item.isSuspended == true" style="cursor: no-drop;color:#999999;" title="流程已被挂起，无法操作！">
             <a-button disabled>通过</a-button>
             <a-button disabled>驳回</a-button>
             <a-button disabled>委托</a-button>
+
+            <a-button
+              ghost
+              @click="history(item)"
+              style="color:#217dbb;box-shadow: 4px 4px 4px rgba(128, 128, 128,.7);"
+            >
+              历史
+            </a-button>
           </span>
 
-          <!-- 激活 状态 -->
-          <span v-else>
-            <a-button ghost @click="passTask(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:green;">
+          <!-- 激活 状态 ----------------------------------------------------------------------------------------->
+          <span v-else class="ifBtn">
+            <a-button ghost @click="detail(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#4682B4;">
+              申请详情
+            </a-button>
+            <a-button ghost @click="passTask(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#006400;">
               通过
             </a-button>
 
             <a-button
               ghost
               @click="backTask(item)"
-              style="color:gray;box-shadow: 5px 5px 5px rgba(128, 128, 128,.8);color:orange;"
+              style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#FF6347;"
             >
               驳回
             </a-button>
@@ -96,15 +107,19 @@
             <a-button
               ghost
               @click="delegateTask(item)"
-              style="box-shadow:6px 6px 6px rgba(128, 128, 128,.7);color:gray;marginRight:0;"
+              style="box-shadow:8px 8px 8px rgba(128, 128, 128,.7);color:#008080;"
             >
               委托
             </a-button>
-          </span>
 
-          <a-button ghost @click="history(item)" style="color:#217dbb;box-shadow: 4px 4px 4px rgba(128, 128, 128);">
-            历史
-          </a-button>
+            <a-button
+              ghost
+              @click="history(item)"
+              style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#696969;"
+            >
+              历史
+            </a-button>
+          </span>
         </div>
       </a-card>
 
@@ -641,4 +656,33 @@ export default {
 <style lang="less">
 @import '~@assets/less/common.less';
 </style>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+//优先级
+.priorityComm {
+  padding: 3px 8px;
+  color: #092834;
+  letter-spacing: 1px;
+}
+// 状态
+.statusComm {
+  padding: 3px 8px;
+  color: #092834;
+  letter-spacing: 1px;
+}
+
+// 操作按钮
+.ifBtn {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  // 操作 按钮样式
+  /deep/.ant-btn {
+    // padding: 0;
+    // padding: 10px;
+    margin-bottom: 20px;
+    border-radius: 999em;
+    border: none;
+    // border: 1px solid rgba(106, 105, 105, 0.1);
+  }
+}
+</style>