css

[tenwives]

.scroll { max-height: 534px; overflow-y: scroll; } .once { margin-top: 150px; margin-left: 100px; height: 534px; width: 420px; background: #0c0c22; border-radius: 5px; color:white; }

.line { margin-top: 0; height: 534px; margin-left: 200px; border-left: 3px solid #d5d5d5; position: absolute; }

.info { position: relative; margin-left: 200px; height: 100px; display: flex; align-items: center; flex-direction: row; }

.dot { margin-right: 2px; width: 5px; height: 1px; border: 1px solid #d5d5d5; } .cube { width:144px; display: flex; flex-direction: column; justify-content: space-between; } .row { height: 25px; border-bottom: 1px solid #555555; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .left { width: 40px; min-width: 40px; text-align: center; font-size: 10px; } .price { color: greenyellow; }

[tenwives]

import zh from 'javascript-time-ago/locale/zh.json';

import ReactTimeAgo from 'react-time-ago'; import TimeAgo from "javascript-time-ago";

TimeAgo.addDefaultLocale(zh); TimeAgo.addLocale(zh);

const Once = ({date}) => { const i = 45; const f1 = (1 * i) + "px"; const createdAt = 1724739868000;

return (
    <div className="once scroll">
        <div className="line"></div>
        <div style={{top: f1}} className="info">
            <div className="dot"></div>
            <small style={{position: "absolute", left: "-120px"}}>{<ReactTimeAgo
                date={new Date(createdAt)} locale="zh-CN"/>}</small>

            <div className="cube">
                <div className="row">
                    <progress value={0.23}/>
                </div>
                <div className="row">
                    <div className="left">B</div>
                    <div className="price">0.010886</div>
                </div>
                <div className="row">
                    <div className="left">*2000</div>
                    <div className="price">+0.53</div>
                </div>
            </div>
        </div>
    </div>
);

};

export default Once;