钉钉首页改造

client_h5/src/pages/home/index.scss

@@ -40,13 +40,14 @@
           >img {
             display: block;
             margin: auto;
-            width: 14vw;
-            height: 14vw;
+            width: 60px;
+            height: 60px;
           }
           >p {
-            margin: 5px 0px;
+            margin-top: 0px;
+            margin-bottom: 5px;
             color: $font_color;
-            font-size: 15px;
+            font-size: 14px;
           }
           >.corner {
             display: block;
@@ -63,10 +64,11 @@
           >li {
             box-shadow: 0px 4px 20px 0px #EAEDF2;
             border-radius: $card_radius;
-            padding: 25px 20px;
+            padding: 10px 15px;
             position: relative;
             background-repeat: no-repeat;
             background-size: 100% 100%;
+            height: 70px;
             &:nth-child(1) {
               background-image: url("../../assets/images/qjsq_icon.png");
             }
@@ -113,13 +115,15 @@
         >ul {
           display: grid;
           grid-template-columns: repeat(4, 1fr);
+          background-color: #fff;
+          border-radius: 5px;
           >li {
             flex: 1;
             text-align: center;
             position: relative;
-            background: rgba(255,255,255,0.5);
+            // background: rgba(255,255,255,0.5);
             border-radius: 8px;
-            padding: 12px 8px;
+            padding: 8px;
             &:not(:first-child) {
               margin-left: 10px;
             }
@@ -127,16 +131,15 @@
               display: block;
               margin: auto;
               background: #FFFFFF;
-              box-shadow: 0px 4px 20px 0px #EAEDF2;
-              border-radius: $card_radius + 2;
-              padding: 10px;
+              // box-shadow: 0px 4px 20px 0px #EAEDF2;
+              // border-radius: $card_radius + 2;
               width: 10vw;
               height: 10vw;
             }
             >.title {
               display: block;
               margin-top: 5px;
-              font-size: 15px;
+              font-size: 14px;
               color: $font_color;
               white-space: nowrap;
             }
@@ -154,16 +157,18 @@
   .corner {
     position: absolute;
     display: block;
-    width: 22px;
-    height: 16px;
-    line-height: 16px;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
     font-size: 13px;
-    background-color: #F23C3C;
+    background-color: #FA513B;
     color: #fff;
     border-radius: $corner_radius;
     text-align: center;
-    right: 5px;
-    top: 5px;
+    right: 10px;
+    top: 0px;
+    border: 1px solid #FFFFFF;
+    font-size: 12px;
   }
   .card_title {
     font-size: 17px;

client_h5/src/pages/home/index.vue

@@ -41,7 +41,7 @@ const navMenus = reactive<MenuItem[]>([
   },
   {
     title: "我收到的",
-    icon: "../assets/images/zbtx_icon.png",
+    icon: "../assets/images/wsdrz_icon.png",
     path: "myReceive",
   },
 ]);
@@ -99,7 +99,11 @@ const initAttendCount = async () => {
     isMobile: true,
   });
   if (result) {
-    navMenus[0]["corner"] = result?.data;
+    if (result?.data >= 100) {
+      navMenus[0]["corner"] = 99;
+    } else {
+      navMenus[0]["corner"] = result?.data;
+    }
   }
 };
 initAttendCount();
@@ -109,7 +113,11 @@ initAttendCount();
 async function queryNoticeAndLearnCount() {
   const urlApi = `/admin-api/adm/noticeAndLearn/readNo/count?type=1`;
   const result = await request.get(urlApi);
-  personMenus[1]["corner"] = result?.data;
+  if (result?.data >= 100) {
+    personMenus[1]["corner"] = 99;
+  } else {
+    personMenus[1]["corner"] = result?.data;
+  }
 }
 queryNoticeAndLearnCount();
 const toPageHandle = (path: string) => {