按钮小问题

src/assets/less/overwrite.css

@@ -34,10 +34,6 @@ img {
   background-color: f0f2f5;
   color: #333333;
 }
-.content .footer {
-  text-align: center;
-  color: #5c6468;
-}
 .content .main {
   min-height: 780px;
   background-color: #f0f2f5;
@@ -122,6 +118,10 @@ img {
 .content .main /deep/ .ant-tabs-ink-bar {
   height: 0;
 }
+.content .footer {
+  text-align: center;
+  color: #5c6468;
+}
 .content /deep/ .ant-empty-image {
   margin-top: 120px;
 }
@@ -131,3 +131,9 @@ img {
 .content .ant-card-bordered {
   border: none;
 }
+.content .ant-btn {
+  background-color: white;
+  box-shadow: 8px 8px 6px 2px rgba(231, 229, 229);
+  -webkit-box-shadow: 8px 8px 6px 2px rgba(231, 229, 229);
+  -moz-box-shadow: 8px 8px 6px 2px rgba(231, 229, 229);
+}

src/assets/less/overwrite.less

@@ -41,10 +41,6 @@ img {
   background-color: f0f2f5;
   color: rgb(51, 51, 51);
 
-  .footer {
-    text-align: center;
-    color: #5c6468;
-  }
   .main {
     //所有内容设置最小高度
     min-height: 780px;
@@ -148,6 +144,11 @@ img {
     }
   }
 
+  .footer {
+    text-align: center;
+    color: #5c6468;
+  }
+
   // 暂无数据
   /deep/.ant-empty-image {
     margin-top: 120px;
@@ -161,4 +162,11 @@ img {
   .ant-card-bordered {
     border: none;
   }
+
+  .ant-btn {
+    background-color: white;
+    box-shadow: 8px 8px 6px 2px rgba(231, 229, 229);
+    -webkit-box-shadow: 8px 8px 6px 2px rgba(231, 229, 229);
+    -moz-box-shadow: 8px 8px 6px 2px rgba(231, 229, 229);
+  }
 }

src/views/user/tabs/ApplyTab.vue

@@ -75,15 +75,15 @@
         <div class="operation">
           <!-- 结果 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 ghost @click="apply(item)" style="\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 ghost @click="edit(item)" style="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 ghost style="color:#4e73b9;">
                 删除
               </a-button>
             </a-popconfirm>
@@ -91,41 +91,33 @@
 
           <!-- 处理中   渲染的按钮 -->
           <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 ghost @click="cancel(item)" style="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 ghost @click="history(item)" style="color:#696969;">
               查看进度
             </a-button>
 
-            <a-button ghost @click="detail(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#4682B4;">
+            <a-button ghost @click="detail(item)" style="color:#4682B4;">
               表单数据
             </a-button>
           </span>
 
           <!-- 驳回 状态  渲染的按钮 -->
           <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 ghost @click="apply(item)" style="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 ghost @click="edit(item)" style="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 ghost @click="history(item)" style="color:#696969;">
               审批历史
             </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:#DC143C;">
+              <a-button ghost style="color:#DC143C;">
                 删除
               </a-button>
             </a-popconfirm>

src/views/user/tabs/DoneTab.vue

@@ -76,16 +76,16 @@
 
         <!-- 操作 -->
         <div class="operation">
-          <a-button ghost @click="detail(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#4e73b9;">
+          <a-button ghost @click="detail(item)" style="color:#4e73b9;">
             表单数据
           </a-button>
 
-          <a-button ghost @click="history(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:gray;">
+          <a-button ghost @click="history(item)" style="color:gray;">
             审批历史
           </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:red;">
+            <a-button ghost style="color:red;">
               删除
             </a-button>
           </a-popconfirm>
@@ -320,7 +320,6 @@ export default {
     margin-bottom: 20px;
     border-radius: 999em;
     border: none;
-    // border: 1px solid rgba(106, 105, 105, 0.1);
   }
 }
 </style>

src/views/user/tabs/WaitTab.vue

@@ -70,7 +70,7 @@
         <div class="operation">
           <!-- 挂起  -->
           <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 ghost @click="detail(item)" style="color:blue;">
               申请详情
             </a-button>
 
@@ -78,45 +78,29 @@
             <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 ghost @click="history(item)" style="color:#217dbb;">
               历史
             </a-button>
           </span>
 
-          <!-- 激活 状态 ----------------------------------------------------------------------------------------->
+          <!-- 激活 状态 ------------------------------->
           <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 ghost @click="detail(item)" style="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 ghost @click="passTask(item)" style="color:#006400;">
               通过
             </a-button>
 
-            <a-button
-              ghost
-              @click="backTask(item)"
-              style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#FF6347;"
-            >
+            <a-button ghost @click="backTask(item)" style="color:#FF6347;">
               驳回
             </a-button>
 
-            <a-button
-              ghost
-              @click="delegateTask(item)"
-              style="box-shadow:8px 8px 8px rgba(128, 128, 128,.7);color:#008080;"
-            >
+            <a-button ghost @click="delegateTask(item)" style="color:#008080;">
               委托
             </a-button>
 
-            <a-button
-              ghost
-              @click="history(item)"
-              style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#696969;"
-            >
+            <a-button ghost @click="history(item)" style="color:#696969;">
               历史
             </a-button>
           </span>
@@ -677,12 +661,9 @@ export default {
   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>