效果图：
html代码：
scss代码：
*{
margin:0;
padding:0;
box-sizing: border-box;
}
@mixin boxCenter{
position:absolute;
margin:auto;
top:0;
left:0;
bottom:0;
right:0;
}
.activity{
width:412px;
height:496px;
/*background-color:pink;*/
font-size:12px;
font-weight:400;
color:#333;
padding:0 20px;
margin:100px auto;
border:1px solid #eee;
.title{
/*background-color:lightblue;*/
font-size:14px;
text-align:left;
height:52px;
line-height: 52px;
}
.photo{
/*background-color:cyan;*/
.phpto-box{
width:372px;
height:444px;
margin:0 auto;
position:relative;
/*background-color:gold;*/
.round-box{
width:220px;
height:220px;
border:1px solid #9CACBB;
border-radius:50%;
@include boxCenter;
.dash-box{
width: 90%;
height: 90%;
/*background-color: lightblue;*/
border: 1px dashed #9CACBB;
border-radius: 50%;
@include boxCenter;
.small-box{
width: 90%;
height: 90%;
background-image:url(./../img/bg.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border-radius:50%;
z-index: 100;
@include boxCenter;
}
}
$dotWidth:8px;$dotHeight:8px;
.pie{
position:absolute;
width: 50%;
height: 50%;
border: 1px solid #9CACBB;
border-radius: 100% 0 0 0;
transform-origin: 100% 100% 0;
border-left: none;
border-top: none;
border-bottom: none;
.dot{
width:$dotWidth;
height:$dotHeight;
background-color:#9CACBB;
border-radius:50%;
position: absolute;
right: -$dotWidth/2;
top: -$dotWidth/2;
}
.data{
padding:0 3px;
text-align:center;
position:absolute;
top: 0;
right: 0;
margin-top: -60px;
margin-right: -30px;
transform-origin: 50% 50% 0;
height: 50px;
line-height: 22px;
.num{
font-size:14px;
color: #00A4D7;
display: block;
}
}
@for $i from 1 through 6{
&.pie#{$i}{
transform: rotate(($i - 1) * 60deg);
.data{
transform: rotate(-($i - 1) * 60deg);
}
@if $i==3{
.data{
margin-top: -80px;
margin-right: -35px;
}
}@else if $i==4{
.data{
margin-right: -40px;
}
}@else if $i==5{
.data{
margin-top: -80px;
margin-right: -35px;
}
}@else if $i==6{
.data{
margin-top: -65px;
margin-right: -15px;
}
}
}
}
}
}
}
}
}
css代码：
