左上角显示下年份

troilus · Oct 28, 2024 · d60ddb1 · d60ddb1
1 parent 8b376c3
commit d60ddb1
Showing 1 changed file with 41 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -36,27 +36,42 @@
 
 
         .date-nav {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px;
-        background-color: #fec04e;
-            border-bottom: 2px solid #ccc;
-                        outline: -webkit-focus-ring-color auto 1px;
-                        color: #221f1f;
-
-        }
-        .arrow {
-            cursor: pointer;
-            font-size: 20px;
-            padding: 0 10px;
-        }
-        .days {
-            display: flex;
+            outline: -webkit-focus-ring-color auto 1px;
+    display: flex;
+    flex-direction: column; /* 垂直排列年份和日期导航 */
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: #fec04e;
+    border-bottom: 2px solid #ccc;
+    color: #221f1f;
+}
+
+.year-line {
+    font-weight: bold;
+    font-size: 11px;
+    align-self: baseline;
+}
+
+.date-line {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%; /* 使箭头和日期导航居中分布 */
+}
+
+.arrow {
+    cursor: pointer;
+    font-size: 20px;
+    padding: 0 10px;
+}
+
+.days {
+    display: flex;
             justify-content: space-between;
             flex-grow: 1;
             margin: 0 10px;
-        }
+}
         .day {
             position: relative;
             flex: 1;
@@ -240,14 +255,15 @@
 </head>
 <body>
     <!-- 日期导航部分 -->
-    <span id="yearDisplay"></span> <!-- 用于显示年份 -->
     <div class="date-nav">
-        <span class="arrow" id="prevDay">&lt;</span>
-        <div class="days" id="daysContainer">
-            <!-- 日期将会动态生成 -->
+        <div id="yearDisplay" class="year-line"></div> <!-- 显示年份的第一行 -->
+        <div class="date-line">
+            <span class="arrow" id="prevDay">&lt;</span>
+            <div class="days" id="daysContainer">
+                <!-- 日期将会动态生成 -->
+            </div>
+            <span class="arrow" id="nextDay">&gt;</span>
         </div>
-        <span class="arrow" id="nextDay">&gt;</span>
-
     </div>
     <!-- 待办列表部分 -->
     <div class="todo-container" id="todoContainer">
@@ -368,7 +384,7 @@
 
         // 设置年份显示
         const yearDisplay = document.getElementById("yearDisplay");
-    yearDisplay.textContent = currentDate.getFullYear(); // 获取当前显示年份并更新
+    yearDisplay.textContent = "🧭"+currentDate.getFullYear(); // 获取当前显示年份并更新
 
     const dayOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
     let tempDate = new Date(currentDate);