Przeglądaj źródła

fix: 增加大屏图片

周玉环 2 dni temu
rodzic
commit
24e020ed3e

BIN
xinkeaboard-admin/src/assets/bigscreen/head-title.png


+ 54 - 0
xinkeaboard-admin/src/pages/statistics/bigscreen/components/DateTimeDisplay.js

@@ -0,0 +1,54 @@
+import React from "react";
+
+class DateTimeDisplay extends React.Component {
+  state = {
+    currentTime: "",
+  };
+  componentDidMount() {
+    this.timeInterval = setInterval(() => setState(new Date()), 1000);
+    return () => clearInterval(this.timeInterval);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timeInterval);
+  }
+
+  formatDate = (date) => {
+    const year = date.getFullYear();
+    const month = `${date.getMonth() + 1}`.padStart(2, "0");
+    const day = `${date.getDate()}`.padStart(2, "0");
+    const weekdays = [
+      "星期日",
+      "星期一",
+      "星期二",
+      "星期三",
+      "星期四",
+      "星期五",
+      "星期六",
+    ];
+    return `${year}/${month}/${day} ${weekdays[date.getDay()]}`;
+  };
+
+  formatTime = (date) => {
+    const hours = `${date.getHours()}`.padStart(2, "0");
+    const minutes = `${date.getMinutes()}`.padStart(2, "0");
+    const seconds = `${date.getSeconds()}`.padStart(2, "0");
+    return `${hours}:${minutes}:${seconds}`;
+  };
+
+  render() {
+    const { currentTime } = this.state;
+    return (
+      <div className="bg-gray-900 text-white px-4 py-2 flex items-center justify-end rounded-r-lg font-mono">
+        <span className="text-blue-400 mr-2">
+          {this.formatDate(currentTime)}
+        </span>
+        <span className="text-white text-xl font-bold">
+          {this.formatTime(currentTime)}
+        </span>
+      </div>
+    );
+  }
+}
+
+export default DateTimeDisplay;

+ 7 - 1
xinkeaboard-admin/src/pages/statistics/bigscreen/components/HeadContent.js

@@ -33,7 +33,13 @@ class HeaderContent extends React.Component {
     const { weatherData } = this.props;
     return (
       <div className={styles.headerContent}>
-        <div className={styles.headerContentTitle}>这是一个大屏</div>
+        <div className={styles.headerContentTitle}>
+          南京江北新区跨境出海服务平台
+        </div>
+        <div className={styles.updateTime}>
+          <span>更新时间: </span>
+          <span>{currentTime}</span>
+        </div>
         <div className={styles.headerContentTime}>{currentTime}</div>
       </div>
     );

+ 19 - 6
xinkeaboard-admin/src/pages/statistics/bigscreen/styles/header_content.less

@@ -1,20 +1,33 @@
-@import '../theme.less';
+@import "../theme.less";
 
 .headerContent {
-  background-image: url("../../../../assets/bigscreen/head.png");
+  background-image: url("../../../../assets/bigscreen/head-nav.png");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   text-align: center;
   font-size: @font-title-main;
   position: relative;
+  height: 188px;
 
   .headerContentTitle {
-    line-height: 200px;
-    font-size: @font-title-main;
+    position: relative;
+    top: 15px;
+    height: 100%;
     font-weight: bold;
-    color: #00c6ff;
-    text-shadow: 0 2px 8px rgba(0, 198, 255, 0.3);
+    font-size: 92px;
+    text-align: center;
+    color: #fff;
+  }
+
+  .updateTime {
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    transform: translateX(-50%);
+    font-weight: 400;
+    font-size: 24px;
+    color: #036eb8;
   }
 
   .headerContentTime {