效果圖：
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代碼：
