首页版式确定

src/assets/less/overwrite.css

@@ -4,11 +4,29 @@
 .footer {
   text-align: right;
   background-color: #092834;
-  color: #fc600a;
+  color: #f94f46;
   letter-spacing: 1px;
 }
 a {
-  color: #858282;
+  text-decoration: none;
+  color: #969696;
+  /* 取消链接高亮(移动端)  */
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+/* 图片自适应 */
+img {
+  width: 100%;
+  display: block;
+  /*解决图片底部对齐问题*/
+}
+/*清除浮动*/
+.clearfix:before,
+.clearfix:after {
+  content: '';
+  display: table;
+}
+.clearfix:after {
+  clear: both;
 }
 .pTitle img {
   background-color: red;
@@ -49,12 +67,6 @@ a {
 .bellStyle {
   color: #1489b8;
 }
-.dividerBgcB {
-  background-color: #29b1ea;
-  font-size: 20px;
-  margin-right: 10px;
-  background-color: tr;
-}
 .cardIcon {
   font-size: 18px;
   font-weight: 700;

src/assets/less/overwrite.less

@@ -9,18 +9,39 @@
 .footer {
   text-align: right;
   background-color: #092834;
-  color: #fc600a;
+  color: #f94f46;
   letter-spacing: 1px;
+  // font-size: 12px;
+  // padding: 10px 10px 10px 0;
 }
 a {
-  color: rgb(133, 130, 130);
+  text-decoration: none;
+  color: #969696;
+  /* 取消链接高亮(移动端)  */
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+/* 图片自适应 */
+img {
+  width: 100%;
+  display: block; /*解决图片底部对齐问题*/
+}
+
+/*清除浮动*/
+.clearfix:before,
+.clearfix:after {
+  content: '';
+  display: table;
+}
+
+.clearfix:after {
+  clear: both;
 }
 
 .pTitle img {
   background-color: red;
   display: inline-block;
-  margin-right:4px;
-  border-radius:8px;
+  margin-right: 4px;
+  border-radius: 8px;
   margin: 0 0 5px 3px;
 }
 
@@ -61,13 +82,7 @@ a {
 .bellStyle {
   color: #1489b8;
 }
-//竖分隔
-.dividerBgcB {
-  background-color: #29b1ea;
-  font-size: 20px;
-  margin-right: 10px;
-  background-color: tr;
-}
+
 
 //card 的小图
 .cardIcon {

src/views/user/Login.vue

@@ -3,21 +3,35 @@
     <div class="main">
       <!-- 待办 头部  -->
       <a-layout-header class="todoBox">
-        <div class="left fl">
-          <img src="@assets/todoImg.png" alt="?????" />
-          <div class="info">
-            <span style="fontSize:16px;color:#092834;">我的待办</span>
-            <a-badge class="numTips">{{ todoList.length }}</a-badge>
-          </div>
+        <div class="left fl clearfix">
+          <!-- 待办 -->
+          <span v-if="todoList.length > 0">
+            <img src="@assets/todoImg02.png" alt="?????" />
+            <div class="info" style="color:white;top:1%;left:24%;">
+              <span>我的待办</span>
+              <a-badge class="numTips" style="backgroundColor:#f94f46;">
+                {{ todoList.length }}
+              </a-badge>
+            </div>
+          </span>
+          <!-- 无 待办 -->
+          <span v-if="todoList.length == 0">
+            <img src="@assets/nothing.png" alt="?????" />
+            <div class="info" style="top:2%; left:33%;">
+              <span style="color:white;">暂无待办</span>
+              <a-badge class="numTips" style="color:#ffcf2d;backgroundColor:#ffcf2d;">
+                {{ todoList.length }}
+              </a-badge>
+            </div>
+          </span>
         </div>
 
-        <div class="right fr">
-          <!-- 右边 -->
-          <a href="#" @click.stop.prevent="todo()" class="more">
-            <img src="@assets/more.png" alt="?????" />
-            <a-divider type="vertical" class="dividerBgcB" />更多
-          </a>
-        </div>
+        <!-- 右边 -->
+        <a href="#" @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>
 
       <!-- OA工作台 -->
@@ -30,7 +44,7 @@
             :key="index.id"
             @click.prevent="aClick(item)"
           >
-            <img :src="item.iconAddress" width="64" class="activeIcon" />
+            <img :src="item.iconAddress" class="activeIcon" />
             <p>{{ item.name }}</p>
           </a>
         </div>
@@ -101,13 +115,11 @@ export default {
         this.getActiveKeyAll() // OA 4个按钮
       })
   },
-  // mounted() {
-  //   this.init()
-  // },
+
   methods: {
-    // init() {
-    //   this.getDataList()
-    // },
+    init() {
+      this.getDataList()
+    },
     // 映射store/user.js 中 actions的方法
     ...mapActions(['Login']),
 
@@ -208,73 +220,78 @@ export default {
 
 <style src="@assets/less/overwrite.less" lang="less" scoped></style>
 <style lang="less" scoped>
-.content {
-  width: 100%;
-  height: 100%;
-  background-color: rgba(#f7e0d4);
+/deep/.ant-card-head-title {
+  padding: 0;
 }
-.main {
-  min-height: 750px;
+/deep/.ant-card-body {
+  padding: 0 24px;
 }
-//上面蓝盒子
-.todoBox {
-  padding: 18px;
-  height: 180px;
-  width: 100%;
-  background-color: #347b98;
-  box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.1), 0 6px 20px 1px rgba(0, 0, 0, 0.19);
-  margin-bottom: 20px;
-}
-.todoBox span {
-  font-weight: 700;
-  position: relative;
-  letter-spacing: 1px;
-}
-// 待办小黑板
-.left {
-  position: relative;
-  height: 100%;
-  // padding: 8px;
-  box-shadow: 1px 1px 6px rgba(166, 196, 207, 0.1);
-}
-// 黑板图片
-.left img {
+.content {
   width: 100%;
   height: 100%;
-}
-//黑板内信息
-.left .info {
-  position: absolute;
-  top: 32%;
-  left: 20%;
-}
+  background-color: rgba(#f7e0d4);
+  .main {
+    min-height: 780px;
+    //上面蓝盒子
+    .todoBox {
+      padding: 18px;
+      height: 180px;
+      width: 100%;
+      background-color: #347b98;
+      box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.1), 0 6px 20px 1px rgba(0, 0, 0, 0.19);
+      margin-bottom: 20px;
+      // 待办小黑板
+      .left {
+        height: 100%;
+        width: 190px;
+        //黑板内信息
+        .info {
+          position: absolute;
+          span {
+            font-weight: 700;
+            position: relative;
+            letter-spacing: 1px;
+            font-size: 16px;
+          }
+        }
+        // 待办 数量
+        .numTips {
+          position: absolute;
+          top: -10px;
+          left: 0px;
+          padding: 3px 8px;
+          text-align: center;
+          line-height: 20px;
+          border-radius: 50%;
+          color: white !important;
+          font-size: 16px;
+        }
+      }
 
-// 待办 数量
-.numTips {
-  position: absolute;
-  top: -14px;
-  left: 0px;
-  padding: 3px 8px;
-  text-align: center;
-  line-height: 20px;
-  background-color: red;
-  border-radius: 50%;
-  color: white !important;
-  font-size: 16px;
-}
+      // 按钮
+      .right {
+        margin: 30px 8px 0 0;
+        padding: 0 24px;
+        background-color: #f7e0d4;
+        border-radius: 10px;
+        letter-spacing: 1px;
+        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
 
-// 更多
-.more {
-  height: 46px;
-  line-height: 46px;
-  margin: 40px 8px 0 0;
-  padding: 0 10px;
-  color: #474b4d;
-  background-color: rgba(#f7e0d4);
-  border-radius: 4px;
-  float: right;
-  letter-spacing: 2px;
-  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: 14px;
+          color: #1489b8;
+          margin-top: 10%;
+        }
+        // 文字
+        span {
+          font-size: 14px;
+          color: #092834;
+        }
+      }
+    }
+  }
 }
 
 // OA 工作台
@@ -283,19 +300,22 @@ export default {
   flex-flow: row wrap;
   justify-content: space-between;
   text-align: center;
-}
-
-//四个按钮
-.oa .oaItem {
-  width: calc((100% - 40px) / 2);
-  padding: 40px 0 20px 0;
-  margin-bottom: 40px;
-  color: #092834;
-  border-radius: 10px;
-  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
-}
-.oa p {
-  color: #092834;
-  margin-top: 20px;
+  padding: 0 30px;
+  // background-color: rgb(219, 116, 116);
+  //四个按钮
+  .oaItem {
+    // background-color: orange;
+    padding: 50px;
+    width: calc((100% - 40px) / 2);
+    margin: 14px 0;
+    color: #092834;
+    border-radius: 10px;
+    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
+    p {
+      color: #092834;
+      margin-bottom: 0px;
+      margin-top: 10px;
+    }
+  }
 }
 </style>

vue.config.js

@@ -22,7 +22,7 @@ module.exports = {
             config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
         }
     },
-    chainWebpack: (config) => {
+    chainWebpack: config => {
         config.resolve.alias
             .set('@$', resolve('src'))
             .set('@api', resolve('src/api'))
@@ -54,6 +54,7 @@ module.exports = {
         }
     },
     devServer: {
+        open: true, // 自动打开浏览器
         port: 3000,
         proxy: {
             /* '/api': {