Przeglądaj źródła

在任务添加窗口添加了静态时间样式

追梦人 6 miesięcy temu
rodzic
commit
f4ec939aaf

+ 9 - 1
src/app/shared/task-modal/task-modal.component.html

@@ -57,7 +57,15 @@
     </div>
 
     <!-- 截止时间 -->
-
+    <!-- 在标签区域下方添加 -->
+    <ion-item class="time-display ion-margin-vertical">
+      <ion-label>时间</ion-label>
+      <div slot="end" class="time-values">
+        <span>2023-12-25</span>
+        <span class="time-separator">|</span>
+        <span>14:30</span>
+      </div>
+    </ion-item>
 
     <!-- 日期选择器 -->
 

+ 28 - 0
src/app/shared/task-modal/task-modal.component.scss

@@ -83,3 +83,31 @@ ion-textarea {
   font-size: 14px;
   line-height: 1.4;
 }
+
+/* 时间展示区域样式 */
+.time-display {
+  --min-height: 48px;
+  --padding-start: 16px;
+  --inner-padding-end: 12px;
+
+  ion-label {
+    font-size: 16px;
+    color: var(--ion-color-medium);
+  }
+
+  .time-values {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    span {
+      font-size: 14px;
+      color: var(--ion-color-dark);
+    }
+
+    .time-separator {
+      color: var(--ion-color-medium-shade);
+      transform: scale(1.2);
+    }
+  }
+}