CSS布局技巧:https://blog.csdn.net/weixin_39829501/article/details/111681956
效果:
分解:
使用 flex 布局
display: flex;
justify-content: center;
align-items: flex-end;
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
width: 480px;
height: 128px;
background: #fff;
padding: 0 20px;
display: flex;
border: 1px solid #000;
}
.con-box {
width: 33.3%;
height: 100%;
display: flex;
justify-content: center;
}
.con-item {
width: 90px;
height: 100%;
background: #ccc;
display: flex;
justify-content: center;
align-items: flex-end;
}
.item-ele {
width: 30px;
height: 30px;
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="con-box">
<div class="con-item">
<div class="item-ele"></div>
</div>
</div>
<div class="con-box">
<div class="con-item">
<div class="item-ele"></div>
</div>
</div>
<div class="con-box">
<div class="con-item">
<div class="item-ele"></div>
</div>
</div>
</div>
</body>
</html>
效果图完整实现:
<template>
<div class="wraP_">
<div class="container">
<div v-for="(item, index) in imgList" :key="index" class="con-box">
<div class="con-item">
<div class="item-ele">
<div class="text-top" :style="{ color: item.color }">
{{ item.value }}
</div>
<img
:src="item.img"
alt=""
:style="{ width: '90px', height: height(item.value) + 'px' }"
class="img-class"
/>
<div class="text-bottom">{{ item.text }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ExcessRateChart",
components: {},
data() {
return {
max: 0,
imgList: [
{
status: 1,
value: "20%",
text: "第一张",
img: require("@/assets/images/water/kmo.png"),
color: "#E8C50B",
},
{
status: 2,
value: "12%",
text: "第二张",
img: require("@/assets/images/water/an.png"),
color: "#0CD7E2",
},
{
status: 3,
value: "5%",
text: "第三张",
img: require("@/assets/images/water/tp.png"),
color: "#1EAAFE",
},
],
};
},
methods: {
maxData() {
for (let i = 0; i < this.imgList.length; i++) {
if (parseInt(this.imgList[i].value.split("%")[0]) > this.max) {
this.max = parseInt(this.imgList[i].value.split("%")[0]);
}
}
},
},
computed: {
height() {
return function (val) {
this.maxData();
let h = (val.split("%")[0] / this.max) * 123;
return h;
};
},
},
};
</script>
<style scoped lang="scss">
.container {
width: 480px;
height: 180px;
padding: 0 20px;
display: flex;
}
.con-box {
width: 33.3%;
height: 100%;
display: flex;
justify-content: center;
}
.con-item {
width: 90px;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
}
.item-ele {
display: block;
text-align: center;
.text-top {
font-size: 20px;
font-family: tenxu;
}
.text-bottom {
font-size: 14px;
}
}
</style>