init

src/components/Head/index.jsx

@@ -0,0 +1,68 @@
+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'
+
+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 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(() => {
+    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'>许昌安彩新能科技&ensp;&ensp;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>
+  )
+}

src/components/Head/index.less

@@ -0,0 +1,89 @@
+.TopTitleBoder {
+  width: 3840px;
+  height: 84px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background: #17b2747a;
+
+  .TopSideRight {
+    margin-top: 40px;
+    margin-right: 40px;
+    width: 493px;
+    height: 16px;
+  }
+
+  .TopSideLeft {
+    margin-left: 40px;
+    margin-top: 40px;
+    width: 493px;
+    height: 16px;
+  }
+
+  .TopSideLeftLine {
+    background: url('../../assets/TopTitleLeft.png');
+    width: 899px;
+    height: 40px;
+    margin-top: 42px;
+    display: flex;
+    flex-direction: row;
+    justify-content: right;
+
+    .TopSideLeftLineicon {
+      margin-right: 40px;
+      margin-top: 25px;
+      width: 204.32px;
+      height: 2.79px;
+    }
+
+    .TopSideLeftTxt {
+      margin-right: 120px;
+      margin-top: 15px;
+      color: rgb(255, 255, 255, 0.8);
+      font-size: 20px;
+      font-weight: 300px;
+      line-height: 22.174976px;
+    }
+  }
+
+  .TopSiderightLine {
+    background: url('../../assets/TopTitleRight.png');
+    width: 899px;
+    height: 40px;
+    margin-top: 42px;
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+
+    .TopSideRightLineicon {
+      margin-left: 40px;
+      margin-top: 25px;
+      width: 204.32px;
+      height: 2.79px;
+    }
+
+    .TopSideRightTxt {
+      margin-left: 120px;
+      margin-top: 15px;
+      color: rgb(255, 255, 255, 0.8);
+      font-size: 20px;
+      font-weight: 600px;
+      line-height: 22.174976px;
+    }
+  }
+
+  .TopButtonLine {
+    margin-top: -9px;
+    width: 760px;
+    height: 14px;
+  }
+
+  .TopTitleText {
+    margin-top: 16px;
+    letter-spacing: 8px;
+    font-size: 32px;
+    color: #00fff7;
+    text-align: center;
+    letter-spacing: 2px;
+  }
+}