flex流水布局
https://blog.csdn.net/wojiaomaxiaoqi/article/details/79754485
<div class="masonry">
<div class="column">
<div class="item">
<div class="item__content">
</div>
</div>
<!-- more items -->
</div>
<div class="column">
<div class="item">
<div class="item__content">
</div>
</div>
<!-- more items -->
</div>
<div class="column">
<div class="item">
<div class="item__content">
</div>
</div>
<!-- more items -->
</div>
</div>
.masonry {
display: flex;
flex-direction: row;
}
.column {
display: flex;
flex-direction: column;
width: calc(100%/3);
}
上下左右居中
.cover{
width: 100%; height: 100%;
}
.wrap{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
先上下居中后左右居中
align-items: center;
justify-content: center;
<div class="num-item middle" style="flex: 1;">
<div class="city">
全市
</div>
</div>
.middle {
display: flex;// 先上下居中
align-items: center;// 先上下居中
width: 100%;
text-align: center;
}
.city {
width: 100%;
font-size: $font-unit*12;
font-weight: bold;
color: #00fffb;
text-align: center;//后左右居中
}
自适应正方形
width: 100%;
height: 0;
padding-bottom: 100%;
position: absolute;
top: 50%;
left: 50%;
background-image: linear-gradient(to top, #1dbee6, #00ff90);
border-radius: 50%; // 圆
transform: translate(-50%, -50%);
自适应圆环
<div ref="circle" class="circle" :style="chartStyle">
<div class="ring" />
</div>
.circle {
position: relative;
display: inline-block;
.ring {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 0;
padding-bottom: 100%;
background-image: linear-gradient(to top, #1dbee6, #00ff90);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.ring::after {
position: absolute;
top: 50%;
left: 50%;
width: 75%;
height: 0;
padding-bottom: 75%;
content: ' ';
background-color: rgba(0, 9, 141, 1);
border-radius: 50%;
transform: translate(-50%, -50%);
}
}
标题svg格式更改颜色
.father{
overflow:hidden;
.icon {
filter: drop-shadow(#0ff 80px 0);
transform: translateX(-80px);
}
}