效果图
描述
给的UI效果图如上,本想着用echarts实现,发现怎么写好像都不太行…于是想着用纯css写算了,大概模仿出来了…,虽然可能不是一模一样,但是奈何领导也通过了🤨,细节还是需要再优化优化滴。代码如下(vue+less):
实现
// dataList 数据源
[ { "title": "本科", "value": 14314, "percent": 68.7, "num_pj": "6.8%", "num_zy": "68.7%" }, { "title": "大专", "value": 4618, "percent": 22.2, "num_pj": "0.2%", "num_zy": "22.2%" }, { "title": "研究生及以上", "value": 1519, "percent": 7.3, "num_pj": "2.6%", "num_zy": "7.3%" }, { "title": "中专及以下", "value": 388, "percent": 1.9, "num_pj": "0.0%", "num_zy": "1.9%" } ]
<!-- html -->
<div class="ladder-shaped-detail-container rel">
<div :class="['div' + Number(index + 1), 'rel', 'laddershaped-public']" v-for="(item, index) in dataList"
:key="index + 70">
<div :class="[
`div${Number(index + 1)}-inner`,
'laddershaped-public-inner',
'abs',
'laddershaped-public',
]">
<div>
{{ dataList.length ? item.title : '' }}
</div>
</div>
</div>
</div>
<!-- less,vw以1920尺寸换算 -->
<style lang="less" scoped>
.rel {
position: relative;
}
.abs {
position: absolute;
}
.ladder-shaped-detail-container {
font-size: 0.7292vw;
color: #333333;
margin-left: 1.0417vw;
.laddershaped-public {
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 2.6042vw;
}
.laddershaped-public::after {
position: absolute;
width: 100%;
height: 100%;
content: '';
z-index: -1;
}
.laddershaped-public-inner::after {
border: 0.0521vw solid;
}
.div1 {
perspective: 3.6042vw;
width: 15.2396vw;
-webkit-perspective: 3.6042vw;
&::after {
background: rgba(0, 129, 255, 0.1);
-webkit-transform: rotateX(-19deg) rotateY(0deg);
transform: rotateX(-19deg) rotateY(0deg);
}
}
.div2 {
-webkit-perspective: 1.3542vw;
width: 11.4896vw;
perspective: 1.3542vw;
margin-left: 1.9271vw;
&::after {
background: rgba(0, 213, 162, 0.1);
-webkit-transform: rotateX(-7deg) rotateY(0deg);
transform: rotateX(-7deg) rotateY(0deg);
}
}
.div3 {
width: 8.8854vw;
perspective: 3.2813vw;
margin-left: 3.125vw;
-webkit-perspective: 3.2813vw;
&::after {
background: rgba(0, 164, 251, 0.1);
-webkit-transform: rotateX(-14deg) rotateY(0deg);
transform: rotateX(-14deg) rotateY(0deg);
}
}
.div4 {
width: 7vw;
perspective: 4.1667vw;
margin-left: 4.0625vw;
-webkit-perspective: 4.1667vw;
&::after {
background: rgba(255, 181, 13, 0.1);
-webkit-transform: rotateX(-12deg) rotateY(0deg);
transform: rotateX(-12deg) rotateY(0deg);
}
}
.div1-inner {
perspective: 2.9688vw;
width: 11.9688vw;
-webkit-perspective: 2.9688vw;
&::after {
background: #d7e5fd;
border-color: #387ff7;
-webkit-transform: rotateX(-19deg) rotateY(0deg);
transform: rotateX(-19deg) rotateY(0deg);
}
}
.div2-inner {
width: 8.8vw;
perspective: 1.4063vw;
-webkit-perspective: 1vw;
&::after {
background: rgba(0, 213, 162, 0.2);
border-color: #00d5a2;
-webkit-transform: rotateX(-7deg) rotateY(0deg);
transform: rotateX(-7deg) rotateY(0deg);
}
}
.div3-inner {
width: 6.5vw;
perspective: 2.6563vw;
margin-left: 0.2604vw;
-webkit-perspective: 2.4vw;
&::after {
background: rgba(0, 194, 246, 0.2);
border-color: #00c2f6;
-webkit-transform: rotateX(-14deg) rotateY(0deg);
transform: rotateX(-14deg) rotateY(0deg);
}
}
.div4-inner {
width: 5.2vw;
-webkit-perspective: 2vw;
perspective: 2vw;
margin-left: 0.3125vw;
&::after {
background: rgba(255, 181, 13, 0.2);
border-color: #ffb50d;
-webkit-transform: rotateX(-12deg) rotateY(0deg);
transform: rotateX(-12deg) rotateY(0deg);
}
}
}
</style>