From 610d43548d70b3c201bb2eb4ebb46b9756de43d6 Mon Sep 17 00:00:00 2001
From: hisoka0728 <1399952343@qq.com>
Date: Thu, 15 Aug 2024 11:00:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E6=97=B6=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/screen-real-time/screen-real-time.scss |  9 ++++++++
 src/screen-real-time/screen-real-time.tsx  | 25 ++++++++++++++--------
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/screen-real-time/screen-real-time.scss b/src/screen-real-time/screen-real-time.scss
index daa2b44..23b8cd0 100644
--- a/src/screen-real-time/screen-real-time.scss
+++ b/src/screen-real-time/screen-real-time.scss
@@ -4,15 +4,24 @@ $screen-real-time: (
   'white-space': nowrap,
   'height': 100%,
   'align-items': center,
+  'item-padding-right': 8px,
 );
 
 @include b(screen-real-time) {
   @include set-component-css-var('screen-real-time', $screen-real-time);
 
+  display: flex;
   align-items: getCssVar('screen-real-time', 'align-items');
   height: getCssVar('screen-real-time', 'height');
   padding-left: getCssVar('screen-real-time', 'padding-left');
   font-size: getCssVar('screen-real-time', 'font-size');
   color: getCssVar('screen-dashboard', 'primary-text-color');
   white-space: getCssVar('screen-real-time', 'white-space');
+
+  @include e('left-time') {
+    padding-right: getCssVar('screen-real-time', 'item-padding-right');
+  }
+  @include e('week') {
+    padding-right: getCssVar('screen-real-time', 'item-padding-right');
+  }
 }
diff --git a/src/screen-real-time/screen-real-time.tsx b/src/screen-real-time/screen-real-time.tsx
index 5836cc3..f4e6251 100644
--- a/src/screen-real-time/screen-real-time.tsx
+++ b/src/screen-real-time/screen-real-time.tsx
@@ -14,19 +14,19 @@ export const ScreenRealTime = defineComponent({
 
     let timerId: NodeJS.Timeout | null = null;
 
-    const text: Ref<string> = ref('');
-
     const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
 
+    const leftText = ref<string>('');
+    const week = ref<string>('');
+    const rightText = ref<string>('');
+
     onMounted(() => {
       timerId = setInterval(() => {
         const now = day();
 
-        const leftText = c.leftTime ? `${now.format(c.leftTime)} ` : '';
-        const week = c.showWeek ? `星期${weekDays[now.day()]} ` : '';
-        const rightText = c.rightTime ? now.format(c.rightTime) : '';
-
-        text.value = `${leftText}${week}${rightText}`;
+        leftText.value = c.leftTime ? `${now.format(c.leftTime)} ` : '';
+        week.value = c.showWeek ? `星期${weekDays[now.day()]} ` : '';
+        rightText.value = c.rightTime ? now.format(c.rightTime) : '';
       }, 1000);
     });
 
@@ -39,13 +39,20 @@ export const ScreenRealTime = defineComponent({
     return {
       ns,
       c,
-      text,
+      leftText,
+      week,
+      rightText,
     };
   },
   render() {
     return (
       <div class={this.ns.b()}>
-        <span>{this.text}</span>
+        {this.leftText ? (
+          <div class={this.ns.e('left-time')}>{this.leftText}</div>
+        ) : null}
+        {this.week ? <div class={this.ns.e('week')}>{this.week}</div> : null}
+
+        <div class={this.ns.e('right-time')}>{this.rightText}</div>
       </div>
     );
   },
-- 
Gitee