64 lines
1.7 KiB
JavaScript
64 lines
1.7 KiB
JavaScript
|
import React from "react";
|
||
|
|
import { ClockIcon } from "@heroicons/react/solid";
|
||
|
|
|
||
|
|
function Header(props) {
|
||
|
|
const { title, time } = props;
|
||
|
|
return (
|
||
|
|
<div className="screen-header">
|
||
|
|
<div className="logo"></div>
|
||
|
|
<span className="screen-title">{title}</span>
|
||
|
|
<span className=" block text-white font-bold text-2xl leading-6 screen-time ">
|
||
|
|
<div className=" inline-block">
|
||
|
|
{time === undefined ? (
|
||
|
|
<></>
|
||
|
|
) : (
|
||
|
|
<ClockIcon className=" inline-block flex-0 w-8 h-8 -mt-1" />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{time}
|
||
|
|
</span>
|
||
|
|
<style jsx>{`
|
||
|
|
.screen-header {
|
||
|
|
height: 96px;
|
||
|
|
background: url("/img/headerBg.png") center top no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
top: 0;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.screen-header .screen-title {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 32px;
|
||
|
|
line-height: 42px;
|
||
|
|
font-weight: bold;
|
||
|
|
background: linear-gradient(to right, #28a8ff, #3beaff, #28a8ff);
|
||
|
|
background-clip: text;
|
||
|
|
color: transparent;
|
||
|
|
margin-top: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
@font-face {
|
||
|
|
font-family: "UnidreamLED";
|
||
|
|
src: url("/font/UnidreamLED.ttf");
|
||
|
|
}
|
||
|
|
.screen-header .screen-time {
|
||
|
|
font-family: "黑体";
|
||
|
|
}
|
||
|
|
.screen-header .logo {
|
||
|
|
position: absolute;
|
||
|
|
height: 32px;
|
||
|
|
width: 200px;
|
||
|
|
background: url("/img/logo.png") center center no-repeat;
|
||
|
|
background-size: 100%;
|
||
|
|
top: 4px;
|
||
|
|
left: 20px;
|
||
|
|
}
|
||
|
|
`}</style>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Header;
|