|
|
@@ -1,68 +1,50 @@ |
|
|
|
import React, { useEffect, useState, useRef } from 'react' |
|
|
|
import React, { useEffect, useState, useRef } from 'react'; |
|
|
|
|
|
|
|
import TopSide from "../../assets/TopSide.png" |
|
|
|
import LeftLine from "../../assets/TopTitleLeftIcon.png" |
|
|
|
import RightLine from "../../assets/TopTitleRightIcon.png" |
|
|
|
import ButtonLine from "../../assets/TopButtonLine.png" |
|
|
|
import './index.less' |
|
|
|
import TopSide from '../../assets/TopSide.png'; |
|
|
|
import LeftLine from '../../assets/TopTitleLeftIcon.png'; |
|
|
|
import RightLine from '../../assets/TopTitleRightIcon.png'; |
|
|
|
import ButtonLine from '../../assets/TopButtonLine.png'; |
|
|
|
import './index.less'; |
|
|
|
|
|
|
|
export default function index() { |
|
|
|
const timmer = useRef() |
|
|
|
const [Hour, setHour] = useState(''); |
|
|
|
const [Seconds, setSeconds] = useState(''); |
|
|
|
const [Minutes, setMinutes] = useState(''); |
|
|
|
const [Year, setYear] = useState(''); |
|
|
|
const [Month, setMonth] = useState(''); |
|
|
|
const [Day, setDay] = useState(''); |
|
|
|
const [now, setNow] = useState('2023.07.01 12:00:00'); |
|
|
|
|
|
|
|
const getNewDate = () => { |
|
|
|
const time = new Date(); |
|
|
|
const year = time.getFullYear(); |
|
|
|
const month = time.getMonth() + 1; |
|
|
|
const day = time.getDate(); |
|
|
|
const hour = time.getHours(); |
|
|
|
const minutes = time.getMinutes(); |
|
|
|
const s = time.getSeconds(); |
|
|
|
const seconds = s <= 9 ? "0" + s : s; |
|
|
|
// const t = `${year}年${month}月${day}日 ${hour}:${minutes}:${seconds}` |
|
|
|
setHour(hour) |
|
|
|
setSeconds(seconds) |
|
|
|
if (minutes < 10) { |
|
|
|
setMinutes(`0${minutes}`) |
|
|
|
} else { |
|
|
|
setMinutes(minutes) |
|
|
|
} |
|
|
|
setYear(year) |
|
|
|
setMonth(month) |
|
|
|
setDay(day) |
|
|
|
|
|
|
|
} |
|
|
|
useEffect(() => { |
|
|
|
setInterval(() => { |
|
|
|
const now = new Date(); |
|
|
|
setNow( |
|
|
|
now |
|
|
|
.toLocaleDateString('zh-hans', { |
|
|
|
year: 'numeric', |
|
|
|
month: '2-digit', |
|
|
|
day: '2-digit', |
|
|
|
hour: '2-digit', |
|
|
|
minute: '2-digit', |
|
|
|
second: '2-digit', |
|
|
|
}) |
|
|
|
.replaceAll('/', '.'), |
|
|
|
); |
|
|
|
}, 1000); |
|
|
|
}, []); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
timmer.current = setInterval(getNewDate, 1000); |
|
|
|
return () => { |
|
|
|
clearTimeout(timmer.current) |
|
|
|
} |
|
|
|
// eslint-disable-next-line |
|
|
|
}, []) |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
<div className='TopTitleBoder' > |
|
|
|
<img src={TopSide} alt="图片丢失" className='TopSideLeft' /> |
|
|
|
<div className='TopSideLeftLine' > |
|
|
|
<img src={LeftLine} alt="图片丢失" className='TopSideLeftLineicon' /> |
|
|
|
<h2 className='TopSideLeftTxt'>单位:中建材智能自动化研究院</h2> |
|
|
|
</div> |
|
|
|
<div > |
|
|
|
<h2 className='TopTitleText'>许昌安彩新能科技  4800万方光伏轻质基板生产线 </h2> |
|
|
|
<img src={ButtonLine} alt="图片加载错误" className='TopButtonLine' /> |
|
|
|
</div> |
|
|
|
<div className='TopSideRightLine' > |
|
|
|
<h2 className='TopSideRightTxt'>{Year}.{Month}.{Day} {Hour}.{Minutes}.{Seconds}</h2> |
|
|
|
<img src={RightLine} alt="图片丢失" className='TopSideRightLineicon' /> |
|
|
|
</div> |
|
|
|
<img src={TopSide} alt="图片丢失" className='TopSideRight' /> |
|
|
|
</div> |
|
|
|
) |
|
|
|
return ( |
|
|
|
<div className="TopTitleBoder"> |
|
|
|
<img src={TopSide} alt="图片丢失" className="TopSideLeft" /> |
|
|
|
<div className="TopSideLeftLine"> |
|
|
|
<img src={LeftLine} alt="图片丢失" className="TopSideLeftLineicon" /> |
|
|
|
<h2 className="TopSideLeftTxt">单位:中建材智能自动化研究院</h2> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<h2 className="TopTitleText"> |
|
|
|
许昌安彩新能科技  4800万方光伏轻质基板生产线{' '} |
|
|
|
</h2> |
|
|
|
<img src={ButtonLine} alt="图片加载错误" className="TopButtonLine" /> |
|
|
|
</div> |
|
|
|
<div className="TopSideRightLine"> |
|
|
|
<h2 className="TopSideRightTxt">{now}</h2> |
|
|
|
<img src={RightLine} alt="图片丢失" className="TopSideRightLineicon" /> |
|
|
|
</div> |
|
|
|
<img src={TopSide} alt="图片丢失" className="TopSideRight" /> |
|
|
|
</div> |
|
|
|
); |
|
|
|
} |