<View className={styles.contentImages}>
<View className={[styles.percentCircle, styles.percentCircleLeft]}>
{classWrongScore > 0.5 ? <View className={styles.leftContent}
style={{transform: `rotate(${180 * classWrongScore}deg)`}}
> </View> :
<View className={styles.leftContent}> </View>
}
</View>
<View className={[styles.percentCircle, styles.percentCircleRight]}>
{classWrongScore < 0.5 ?
<View className={styles.rightContent}
style={{transform: `rotate(${360 * classWrongScore}deg)`}}
> </View> :
<View className={styles.rightContent} style={{background: '#fe8a1c'}}> </View>
}
</View>
<View className={styles.textCircle}>
<View className={styles.singleFieldFlow}>单场流水</View>
<View className={styles.singleFieldFlow}>¥{numToMyriad(data.singleFieldFlow)}</View>
</View>
</View>
.contentImages {
position:relative;
overflow: hidden;
display:inline-block;
//border: solid 4px #FF7818;
width: 200px;
height:200px;
.singleFieldFlow {
font-size: 12PX;
font-weight: 500;
color: #242424;
}
}
.percentCircle {
position:absolute;
height:100%;
background:#FF8B17;
overflow: hidden;
}
.percentCircleRight {
right:0;
width:100px;
border-radius: 0 100px 100px 0/0 100px 100px 0;
}
.percentCircleRight .rightContent{
position: absolute;
content: '';
width: 100%;
height: 100%;
transform-origin:left center;
transform: rotate(0deg);
border-radius: 0 100px 100px 0/0 100px 100px 0;
background:#F9C975;
}
.percentCircleLeft {
width:102px;
border-radius: 100px 0 0 100px/100px 0 0 100px;
}
.percentCircleLeft .leftContent {
position: absolute;
content: '';
width: 100%;
height: 100%;
transform-origin:right center;
transform: rotate(0deg);
border-radius: 100px 0 0 100px/100px 0 0 100px;
background:#F9C975;
}
.textCircle {
position: absolute;
display:flex;
align-items: center;
justify-content: center;
flex-direction: column;
height:80%;
width:80%;
left:10%;
top:10%;
border-radius:100%;
background:#ffffff;
}
原理是两个半圆 底部放了一个圆
transform-origin:right center; 通过这个属性 决定圆环的旋转的圆心
transform: rotate(0deg); 旋转的角度
border-radius: 100px 0 0 100px/100px 0 0 100px; 圆角