【login】页面按钮样式

src/assets/less/overwrite.css

@@ -31,7 +31,8 @@ img {
 .content {
   width: 100%;
   height: 100%;
-  background-color: #e7e9eb;
+  background-color: f0f2f5;
+  color: #333333;
 }
 .content .footer {
   text-align: center;
@@ -39,7 +40,7 @@ img {
 }
 .content .main {
   min-height: 780px;
-  background-color: #f2f2f6;
+  background-color: #f0f2f5;
 }
 .content .main /deep/ .ant-layout-header {
   padding: 0;
@@ -86,7 +87,7 @@ img {
   display: block !important;
 }
 .content .main /deep/ .ant-card-head {
-  color: #092834;
+  color: #333;
   font-weight: 700;
   position: relative;
   letter-spacing: 1px;
@@ -127,6 +128,6 @@ img {
 .content /deep/ .ant-modal-footer {
   display: none;
 }
-.content /deep/ .ant-card-body {
-  padding: 16px 16px 20px 16px;
+.content .ant-card-bordered {
+  border: none;
 }

src/assets/less/overwrite.less

@@ -38,7 +38,8 @@ img {
 .content {
   width: 100%;
   height: 100%;
-  background-color: #e7e9eb;
+  background-color: f0f2f5;
+  color: rgb(51, 51, 51);
 
   .footer {
     text-align: center;
@@ -47,7 +48,7 @@ img {
   .main {
     //所有内容设置最小高度
     min-height: 780px;
-    background-color: #f2f2f6;
+    background-color: #f0f2f5;
 
     //分页头部公共
     /deep/.ant-layout-header {
@@ -105,7 +106,7 @@ img {
     }
 
     /deep/.ant-card-head {
-      color: #092834;
+      color: #333;
       font-weight: 700;
       position: relative;
       letter-spacing: 1px;
@@ -156,8 +157,8 @@ img {
   /deep/.ant-modal-footer {
     display: none;
   }
-  // 每个任务
-  /deep/.ant-card-body {
-    padding: 16px 16px 20px 16px;
+
+  .ant-card-bordered {
+    border: none;
   }
 }

src/views/user/Login.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="content">
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
     <div class="main">
       <!-- 待办 头部  -->
       <div class="todoContain">
@@ -235,7 +234,7 @@ export default {
   margin-top: 14px;
 }
 /deep/.ant-card-body {
-  padding: 0 24px;
+  padding: 30px 20px;
 }
 /deep/.ant-layout-header {
   line-height: 0;
@@ -252,14 +251,12 @@ export default {
     .todoContain {
       border-radius: 10px;
       margin: 15px;
-
+      background-color: #efeeee;
       .oaTitle,
       .todoTitle {
-        background-color: white;
         font-size: 18px;
         font-weight: 700;
         border-radius: 10px;
-        border: 1px solid white;
       }
       .more {
         color: white;
@@ -300,21 +297,34 @@ export default {
         //四个按钮
         .oaItem {
           width: calc((100% - 60px) / 4);
-          margin-bottom: 20px;
+          display: flex;
+          justify-content: space-around;
+          flex-direction: column;
+          align-items: center;
           // 图
           span {
-            display: block;
-            width: 40px;
-            height: 40px;
-            margin: auto;
-            margin-top: 16px;
+            width: 74px;
+            height: 74px;
+            box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1), -18px -18px 30px rgb(255, 255, 255);
+            border-radius: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #efeeee;
+            transition: box-shadow 0.2s ease-out;
+            position: relative;
+            img {
+              width: 40px;
+              height: 40px;
+            }
           }
           // 文字
           p {
-            font-size: 12px;
-            margin-top: 10px;
+            font-size: 14px;
+            margin-top: 16px;
             color: rgb(128, 127, 127);
             font-weight: 400;
+            letter-spacing: 1px;
           }
         }
       }