<div class="aqi-left">
<div class="big-circle"></div>
<div class="middle-circle circle" :style="{background:'url('+bgImg+') no-repeat',backgroundSize:'100% 100%'}"></div>
<div class="smallCircle"></div>
<span class="number">20</span>
<span class="title">AQI</span>
</div>
bgImg: require("@/assets/images/optimal.png"),
.aqi-left {
width: 5.5vw;
height: 5.5vw;
position: relative;
margin-right: 30px;
color: #fff;
& > img {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
& > span {
display: block;
width: 100%;
text-align: center;
}
.number {
position: absolute;
top: 1.75vw;
font-size: 22px;
font-weight: bold;
color: #303133;
}
.title {
position: absolute;
top: 3.25vw;
font-size: 13px;
font-weight: normal;
color: #606266;
}
.big-circle {
width: 5.5vw;
height: 5.5vw;
background: url("../../../../../assets/images/outerRing.png") no-repeat;
background-size: 100% 100%;
}
.middle-circle {
width: 4.85vw;
height: 4.85vw;
animation: haha1 1.8s linear infinite;
position: absolute;
top: 0.325vw;
left: 0.325vw;
// background: linear-gradient(to bottom, yellow, blue, green, red, white);
background: url("../../../../../assets/images/optimal.png") no-repeat;
background-size: 100% 100%;
}
.smallCircle {
width: 3.8vw;
height: 3.8vw;
// background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
position: absolute;
top: 0.85vw;
left: 0.85vw;
}
@-webkit-keyframes haha1 {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
}