login 布局改成类似钉钉

src/views/user/Login.vue

@@ -2,40 +2,47 @@
   <div class="content">
     <div class="main">
       <!-- 待办 头部  -->
-      <a-layout-header class="todoBox">
-        <div class="left fl clearfix">
-          <span
-            >我的待办
-            <a-badge class="numTips" style="backgroundColor:#f94f46;">
-              {{ todoList.length }}
-            </a-badge>
+      <div class="todoContain">
+        <a-card title="待办" style="width: 100%" class="todoTitle">
+          <template #extra>
+            <a @click.stop.prevent="todo()" class="more">
+              <span>更多</span>
+            </a>
+          </template>
+          <!-- 无 待办 -->
+          <span v-if="todoList.length == 0">
+            <div class="nothing">
+              <img src="@assets/noOne.png" alt="?????" class="nothingImg" />
+              <p>暂无代办</p>
+            </div>
           </span>
-        </div>
 
-        <!-- 右边 -->
-        <a  @click.stop.prevent="todo()" class="more right fr clearfix">
-          <a-icon type="more" class="moreIcon" />
-          <a-divider type="vertical" />
-          <span>更多</span>
-        </a>
-      </a-layout-header>
+          <!-- 待办 -->
+          <span v-if="todoList.length > 0">
+            <div class="haveSomething">
+              <img src="@assets/haveSomething.png" alt="?????" class="haveSomethingImg" />
+              <p>
+                我的待办
+                <a-badge class="numTips"> {{ todoList.length }} </a-badge>
+              </p>
+            </div>
+          </span>
+        </a-card>
+      </div>
 
       <!-- OA工作台 -->
-      <a-card
-        title="OA工作台"
-        :bordered="false"
-        style="margin:10px; borderRadius: 8px;paddingTop:20px;"
-      >
-        <div class="oa">
-          <a class="oaItem" v-for="(item, index) in activeKeyAll" :key="index.id" @click.prevent="aClick(item)">
-            <span>
-              <img :src="item.iconAddress" />
-            </span>
-
-            <p>{{ item.name }}</p>
-          </a>
-        </div>
-      </a-card>
+      <div class="oaContain">
+        <a-card title="OA工作台" style="width: 100%" class="oaTitle">
+          <div class="oaButton">
+            <a class="oaItem" v-for="(item, index) in activeKeyAll" :key="index.id" @click.prevent="aClick(item)">
+              <span>
+                <img :src="item.iconAddress" />
+              </span>
+              <p>{{ item.name }}</p>
+            </a>
+          </div>
+        </a-card>
+      </div>
 
       <!-- 数据渲染 表单 -->
       <a-modal v-model="lcModal.visible" :title="lcModal.Title" :footer="null" :maskClosable="false">
@@ -133,7 +140,6 @@ export default {
       loginParams.username = 'fenghf'
       loginParams.password = 'fenghf`123456'
       loginParams.slidered = true // 默认滑块
-      // console.log('打印出登录参数', loginParams)
       // 异步操作
       await that
         .Login(loginParams)
@@ -164,16 +170,6 @@ export default {
           }
         }
       })
-      // 已办列表
-      // this.postFormAction(this.url.doneList, this.searchForm).then(res => {
-      // this.loading = false
-      // if (res.success) {
-      //   this.doneList = res.result || []
-      //   console.log('已渲染到已办数目', this.doneList.length)
-      // } else {
-      //   this.$message.error(res.message)
-      // }
-      // })
     },
 
     // 获取 OA 按钮
@@ -250,100 +246,75 @@ export default {
   width: 100%;
   height: 100%;
   .main {
-    //头部 蓝盒子
-    .todoBox {
-      padding: 18px;
-      height: 180px;
-      width: 100%;
-      background-color: rgba(26, 133, 229, 0.9);
-      box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.1), 0 6px 20px 1px rgba(0, 0, 0, 0.19);
-      margin-bottom: 30px;
-      // border-bottom-right-radius: 30px;
-      // border-bottom-left-radius: 30px;
-      // 待办小黑板
-      .left {
-        height: 100%;
-        width: 190px;
-        padding: 20px;
-        // 我的待办
-        span {
-          font-weight: 700;
-          position: relative;
-          letter-spacing: 1px;
-          font-size: 18px;
-          color: white;
-          display: block;
-          margin-top: 30px;
-          // 待办 数量
-          .numTips {
-            position: absolute;
-            right: 52px;
-            top: -56px;
-            padding: 3px 8px;
-            text-align: center;
-            line-height: 20px;
-            border-radius: 50%;
-            color: white !important;
-            font-size: 16px;
-          }
-        }
-      }
+    // OA 工作台
+    .oaContain,
+    .todoContain {
+      border-radius: 10px;
+      margin: 15px;
 
-      // 按钮
-      .right {
-        line-height: 30px;
-        margin: 30px 8px 0 0;
-        padding: 12px 24px;
+      .oaTitle,
+      .todoTitle {
         background-color: white;
+        font-size: 18px;
+        font-weight: 700;
+        border-radius: 10px;
+        border: 1px solid white;
+      }
+      .more {
+        color: white;
+        border: 1px solid rgba(26, 133, 229, 0.1);
+        padding: 10px 20px;
+        background-color: rgba(26, 133, 229);
         border-radius: 10px;
-        letter-spacing: 1px;
+        letter-spacing: 4px;
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
-
-        .moreIcon {
-          margin: 0;
-          padding: 0;
-          font-size: 16px;
-          color: #1c7dd6;
-          margin-top: 10%;
+      }
+      .nothing,
+      .haveSomething {
+        text-align: center;
+        .nothingImg,
+        .haveSomethingImg {
+          width: 150px;
+          height: 150px;
+          position: relative;
         }
-        // 文字
-        span {
-          font-size: 16px;
-          color: #1c7dd6;
-          font-weight: 700;
+        p {
+          font-size: 14px;
+          .numTips {
+            margin-top: 10px;
+            background-color: red;
+            color: white;
+            padding: 6px 8px;
+            border-radius: 50%;
+          }
         }
       }
-    }
 
-    // OA 工作台
-    .oa {
-      display: flex;
-      flex-flow: row wrap;
-      justify-content: space-between;
-      text-align: center;
-      // background-color: rgb(216, 154, 154);
-      // padding: 40px;
-      //四个按钮
-      .oaItem {
-        width: calc((100% - 20px) / 2);
-        color: #092834;
-        border-radius: 10px;
-        margin: 40px 0;
-        background-color: white;
-        box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
-
-        // 图
-        span {
-          display: block;
-          width: 40px;
-          height: 40px;
-          margin: auto;
-          margin-top: 20px;
-        }
-        // 文字
-        p {
-          margin-top: 10px;
-          color: #092834;
+      // 工作台按钮
+      .oaButton {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-between;
+        text-align: center;
+        //四个按钮
+        .oaItem {
+          width: calc((100% - 60px) / 4);
+          margin-bottom: 20px;
+          // 图
+          span {
+            display: block;
+            width: 40px;
+            height: 40px;
+            margin: auto;
+            margin-top: 16px;
+          }
+          // 文字
+          p {
+            font-size: 12px;
+            margin-top: 10px;
+            color: rgb(128, 127, 127);
+            font-weight:400;
+          }
         }
       }
     }

src/views/user/tabs/ApplyTab.vue

@@ -65,7 +65,7 @@
             通过
           </span>
 
-          <span class="resultComm" v-else-if="item.result == 3" style="background:rgba(9, 40, 52,.5);">
+          <span class="resultComm" v-else-if="item.result == 3" style="background:rgba(9, 40, 52,.4);">
             驳回
           </span>
         </p>

src/views/user/tabs/DoneTab.vue

@@ -52,7 +52,7 @@
           </span>
         </p>
 
-        <p>
+        <p v-if="item.comment">
           审批意见：
           <span class="comment">
             {{ item.comment }}