feat: update styles

app-bootstrap · Nov 21, 2023 · 5c5c328 · 5c5c328
1 parent 11a1194
commit 5c5c328
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 62 deletions.
diff --git a/antd-sample/MyComponent.jsx b/antd-sample/MyComponent.jsx
@@ -6,29 +6,36 @@ export const MyComponent = () => {
   return (
     <div className={styles.wrapper}>
       <div className={styles.div}>
-        <div className={styles.pZvKR}>
-          <div className={styles.zTgKe}>
-            <span className={styles.span}>数据总览</span>
-            <span className={styles.qJDnm}>你的每一份成长都记录</span>
+        <span className={styles.span}>个人知识创作</span>
+        <div className={styles.divDep4_1}>
+          <div className={styles.divDep5_1}>
+            <span className={styles.spanDep6_1}>478W</span>
+            <span className={styles.spanDep6_2}>总字数</span>
           </div>
-          <div className={styles.kBVol}>近 1 年</div>
-        </div>
-        <div className={styles.xEqUH}>
-          <div className={styles.xYuOG}>
-            <span className={styles.vHYtO}>创作天数</span>
-            <span className={styles.fCtBp}>160</span>
-          </div>
-          <div className={styles.xYuOG}>
-            <span className={styles.vHYtO}>创作字数</span>
-            <span className={styles.fCtBp}>14,385</span>
+          <div className={styles.divDep5_2}>
+            <div className={styles.divDep6_1}>
+              <span className={styles.spanDep7_1}>3,779</span>
+              <span className={styles.spanDep7_2}>文档</span>
+            </div>
+            <div className={styles.divDep6_2}>
+              <span className={styles.spanDep7_3}>172</span>
+              <span className={styles.spanDep7_4}>知识库</span>
+            </div>
           </div>
-          <div className={styles.oSVrf}>
-            <span className={styles.jlPlf}>内容更新</span>
-            <span className={styles.aAiBx}>1,807</span>
+        </div>
+        <div className={styles.divDep4_2}>
+          <div className={styles.divDep5_3}>
+            <span className={styles.spanDep6_3}>1,607</span>
+            <span className={styles.spanDep6_4}>小记</span>
           </div>
-          <div className={styles.oSVrf}>
-            <span className={styles.jlPlf}>获得点赞</span>
-            <span className={styles.aAiBx}>413</span>
+          <div className={styles.divDep5_4}>
+            <div className={styles.divDep6_3}>
+              <span className={styles.spanDep7_5}>小记</span>
+            </div>
+            <div className={styles.divDep6_4}>
+              <span className={styles.spanDep7_6}>1</span>
+              <span className={styles.spanDep7_7}>1000</span>
+            </div>
           </div>
         </div>
       </div>

diff --git a/antd-sample/MyComponent.module.less b/antd-sample/MyComponent.module.less
@@ -1,90 +1,139 @@
 .wrapper {
   background-color: #ffffff;
-  width: 500px;
+  width: 460px;
 
   .div {
     display: flex;
     flex-direction: column;
     width: 100%;
 
-    .pZvKR {
+    .span {
+      color: #000000;
+      font-size: 16px;
+      margin-bottom: 11px;
+      font-weight: bold;
+    }
+
+    .divDep4_1 {
       display: flex;
       flex-direction: row;
       align-items: center;
-      border-radius: 4px;
-      background-color: #fafafa;
-      margin-bottom: 11px;
-      padding: 2px 10px 2px 10px;
+      margin-bottom: 12px;
 
-      .zTgKe {
+      .divDep5_1 {
         display: flex;
         flex-direction: column;
         flex: 1;
-        margin-left: 10px;
+        margin-right: 16px;
 
-        .span {
-          color: #333333;
-          font-size: 12px;
+        .spanDep6_1 {
+          color: #000000;
+          font-size: 16px;
         }
 
-        .qJDnm {
+        .spanDep6_2 {
           color: #585a5a;
-          font-size: 11px;
+          font-size: 12px;
+          margin-top: 2px;
         }
       }
 
-      .kBVol {
-        display: inline-flex;
-        flex-direction: row;
-        align-items: center;
-        font-size: 10px;
-        border-radius: 5px;
-        border: solid 1px #e7e9e8;
-        margin-left: 16px;
-        padding: 4px 10px 4px 10px;
+      .divDep5_2 {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        margin-right: 16px;
+
+        .divDep6_1 {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          font-size: 13px;
+
+          .spanDep7_1 {
+            color: #585a5a;
+            margin-right: 2px;
+          }
+
+          .spanDep7_2 {
+            color: #000000;
+          }
+        }
+
+        .divDep6_2 {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          font-size: 13px;
+
+          .spanDep7_3 {
+            color: #585a5a;
+            margin-right: 2px;
+          }
+
+          .spanDep7_4 {
+            color: #333333;
+          }
+        }
       }
     }
 
-    .xEqUH {
+    .divDep4_2 {
       display: flex;
       flex-direction: row;
       align-items: center;
-      border-radius: 4px;
-      background-color: #fafafa;
-      margin-bottom: 11px;
-      padding: 2px 10px 2px 10px;
+      margin-bottom: 12px;
 
-      .xYuOG {
+      .divDep5_3 {
         display: flex;
         flex-direction: column;
         flex: 1;
-        margin-left: 10px;
+        margin-right: 16px;
 
-        .vHYtO {
+        .spanDep6_3 {
           color: #333333;
-          font-size: 12px;
+          font-size: 16px;
         }
 
-        .fCtBp {
-          color: #585a5a;
-          font-size: 11px;
+        .spanDep6_4 {
+          color: #8b8f8d;
+          font-size: 12px;
+          margin-top: 2px;
         }
       }
 
-      .oSVrf {
+      .divDep5_4 {
         display: flex;
         flex-direction: column;
         flex: 1;
-        margin-left: 10px;
+        margin-right: 16px;
 
-        .jlPlf {
-          color: #585a5a;
-          font-size: 12px;
+        .divDep6_3 {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          font-size: 13px;
+
+          .spanDep7_5 {
+            color: #585a5a;
+            margin-right: 2px;
+          }
         }
 
-        .aAiBx {
-          color: #8b8f8d;
-          font-size: 11px;
+        .divDep6_4 {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          font-size: 13px;
+
+          .spanDep7_6 {
+            color: #585a5a;
+            margin-right: 2px;
+          }
+
+          .spanDep7_7 {
+            color: #333333;
+          }
         }
       }
     }