60 lines
1.5 KiB
JavaScript
60 lines
1.5 KiB
JavaScript
|
import React from 'react';
|
||
|
|
|
||
|
|
function DateItem(props) {
|
||
|
|
const { text } = props;
|
||
|
|
return (
|
||
|
|
<span className='screen-dateItem'>
|
||
|
|
<span className="screen-dateItem-line left"></span>
|
||
|
|
<span className={text !== '-' && 'screen-dateItem-text'}>{text}</span>
|
||
|
|
<span className="screen-dateItem-line right"></span>
|
||
|
|
<style jsx>{`
|
||
|
|
@font-face {
|
||
|
|
font-family: 'UnidreamLED';
|
||
|
|
src: url('/font/UnidreamLED.ttf');
|
||
|
|
}
|
||
|
|
.screen-dateItem{
|
||
|
|
font-family: 'UnidreamLED';
|
||
|
|
width: 40px;
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
margin-left: -1px;
|
||
|
|
}
|
||
|
|
.screen-dateItem-line{
|
||
|
|
position: absolute;
|
||
|
|
width: 1px;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.screen-dateItem-line.left{
|
||
|
|
left: 0;
|
||
|
|
top:0;
|
||
|
|
}
|
||
|
|
.screen-dateItem-line.right{
|
||
|
|
right: 0;
|
||
|
|
bottom:0;
|
||
|
|
}
|
||
|
|
.screen-dateItem-line::after,
|
||
|
|
.screen-dateItem-line::before{
|
||
|
|
content: '';
|
||
|
|
display: block;
|
||
|
|
width: 1px;
|
||
|
|
height: 30%;
|
||
|
|
background: #28A3FF;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
.screen-dateItem-line::before{
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
.screen-dateItem-line::after{
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
.screen-dateItem-text{
|
||
|
|
display: inline-block;
|
||
|
|
background: linear-gradient(to bottom, #020E2E, #0072EE, #020E2E);
|
||
|
|
padding: 0 8px;
|
||
|
|
}
|
||
|
|
`}</style>
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default React.memo(DateItem);
|