setup

src/components/Common/Company/index.jsx

@@ -0,0 +1,50 @@
+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.scss';
+
+export default function CompanyName() {
+	const [now, setNow] = useState('2023.07.01 12:00:00');
+
+	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);
+	}, []);
+
+	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">{now}</h2>
+				<img src={RightLine} alt="图片丢失" className="TopSideRightLineicon" />
+			</div>
+			<img src={TopSide} alt="图片丢失" className="TopSideRight" />
+		</div>
+	);
+}

src/components/Common/Company/index.scss

@@ -0,0 +1,87 @@
+.TopTitleBoder {
+	width: 3840px;
+	height: 84px;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+
+	.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;
+			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;
+	}
+}