forked from Gitlink/forgeplus-react
69 lines
1.6 KiB
SCSS
69 lines
1.6 KiB
SCSS
.annulusBasics {
|
|
width : 74px;
|
|
height : 74px;
|
|
position : relative;
|
|
overflow : hidden;
|
|
border-radius: 50%;
|
|
text-align : center;
|
|
z-index : 1;
|
|
}
|
|
//圆环中间的白色
|
|
.centerCircle {
|
|
position : absolute;
|
|
z-index : 10;
|
|
border-radius: 50%;
|
|
width : 60px;
|
|
height : 60px;
|
|
background : #fff;
|
|
transform : translate(7px, 7px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
line-height: 20px;
|
|
font-size: 12px;
|
|
.score{
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
//圆环百分比时出现圆环边框的颜色
|
|
.annulusOuter {
|
|
position : absolute;
|
|
top : 0;
|
|
left : 0;
|
|
width : 74px;
|
|
height : 74px;
|
|
border : 12px solid #FF7F69;
|
|
border-radius: 50%;
|
|
}
|
|
//左边遮住圆环颜色的长方形
|
|
.leftRectangle {
|
|
position : absolute;
|
|
background : #EBEEF5;
|
|
width : 37px;
|
|
height : 74px;
|
|
transform-origin: right;
|
|
}
|
|
//右边遮住圆环颜色的长方形
|
|
.rightRectangle {
|
|
position : absolute;
|
|
background : #EBEEF5;
|
|
transform-origin: left;
|
|
left : 37px;
|
|
width : 37px;
|
|
height : 74px;
|
|
transform : rotate(0deg);
|
|
}
|
|
//弥补hidde在移动端失效的圆环
|
|
.repairAnnulus{
|
|
position : absolute;
|
|
width : 74px;
|
|
height : 74px;
|
|
z-index : 20;
|
|
border-radius: 50%;
|
|
box-sizing : content-box;
|
|
//改外边框的时候，位置也要改下
|
|
border : 20px solid #ffffff;
|
|
top : -20px;
|
|
left : -20px;
|
|
} |