forked from Gitlink/forgeplus-react
26 lines
833 B
JavaScript
26 lines
833 B
JavaScript
import React from 'react';
|
|
import './style.scss';
|
|
|
|
|
|
function Round({num,color,name}) {
|
|
return(
|
|
<div className={"annulusBasics"}>
|
|
<div className={"centerCircle"} style={{color:`${color}`}}>
|
|
<span><span className="score">{num}</span>分</span>
|
|
<span>{name}</span>
|
|
</div>
|
|
<div className={"annulusOuter"} style={{border:`7px solid ${color}`}}></div>
|
|
{num > 50 ?
|
|
<div className={"leftRectangle"} style={{ transform: `rotate(${180/50 *(num - 50)}deg)` }}></div>
|
|
:
|
|
<div className={"leftRectangle"} ></div>
|
|
}
|
|
{num < 50 ?
|
|
<div className={"rightRectangle"} style={{ transform: `rotate(${180/50 * num}deg)` }}></div>
|
|
:
|
|
<div className={"rightRectangle"} style={{ background: color }}></div>
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
export default Round; |