.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;
}