style: 更新签到日历UI部分

79E · May 29, 2023 · fe199c2 · fe199c2
1 parent aa2f860
commit fe199c2
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 8 deletions.
diff --git a/src/pages/user/index.module.less b/src/pages/user/index.module.less
@@ -33,17 +33,42 @@
     &_signin{
         display: flex;
         flex-wrap: wrap;    
-        gap:12px 20px;
+        gap: 12px 12px;
         &_item{
             cursor: pointer;
             display: inline-block;
-            width: 40px;
-            height: 20px;
+            width: 44px;
+            height: 48px;
             border-radius: 4px;
             background-color: #eee;
+            border: 1px solid #c6c6c6;
+            position: relative;
+
+            p:first-child{
+                text-align: center;
+                font-size: 20px;
+                color: #c6c6c6;
+                line-height: 1.6;
+                font-weight: 500;
+            }
+            p:last-child{
+                font-size: 12px;
+                border-top: 1px solid #c6c6c6;
+                text-align: center;
+                color: #c6c6c6;
+            }
         }
         &_selectTtem{
-            background-color: #69b1ff;
+            background-color: #1677ffd9;
+            border-color: #1677ffd9;
+            p:first-child{
+                color: #FFF;
+            }
+            p:last-child{
+                border-top: 1px solid #f8f9fa;
+                text-align: center;
+                color: #f8f9fa;
+            }
         }
     }
 }
diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx
@@ -13,6 +13,8 @@ import { LockOutlined, MailOutlined } from '@ant-design/icons'
 import { fetchUserPassword } from '@/store/user/async'
 import { useNavigate } from 'react-router-dom'
 
+const monthAbbreviations = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
+
 function UserPage() {
   const navigate = useNavigate()
   const { token, user_info } = userStore()
@@ -110,17 +112,18 @@ function UserPage() {
             )}
             {/* 签到区域 */}
             <div className={styles.userPage_card}>
-              <h4>签到日历</h4>
+              <h4>签到日历（{formatTime('yyyy年MM月', new Date(monthDays[0]))}）</h4>
               <Space direction="vertical">
                 <div className={styles.userPage_signin}>
                   {monthDays.map((item) => {
                     const itemClassName = userMonthDays.includes(item)
                       ? `${styles.userPage_signin_item} ${styles.userPage_signin_selectTtem}`
                       : styles.userPage_signin_item
                     return (
-                      <Tooltip key={item} title={item}>
-                        <span className={itemClassName} />
-                      </Tooltip>
+                        <div key={item} className={itemClassName}>
+                          <p>{formatTime('dd', new Date(item)) === formatTime('dd') ? '今' : formatTime('dd', new Date(item))}</p>
+                          <p>{monthAbbreviations[Number(formatTime('MM', new Date(item))) - 1]}</p>
+                        </div>
                     )
                   })}
                 </div>