效果:
html:
{{ item.formula }}
{{ item.title }}
{{ item.num }}
{{ item.unit }}
{{ item.label }}
{{ item.compare }}
js:
evaluateList: [
{
title: "取水关键指标",
num: "1.3",
unit: "m³水/吨焦",
label: "吨焦取水量",
compare: "节水企业 < 1.2",
formula: "吨焦取水量(%)=取水量(m³)/企业产焦量(吨)",
showTooltip: false,
},
{
title: "用水漏损关键指标",
num: "0",
unit: "%",
label: "用水综合漏损率",
compare: "节水企业 < 3",
formula: "用水综合漏失率(%)=漏失水量(m³)/取水量(m³)",
showTooltip: false,
},
{
title: "重复利用关键指标",
num: "98.5",
unit: "%",
label: "间接冷却水循环率",
compare: "节水企业 ≥ 98",
formula: "间接冷却水循环率(%)=间接冷却水循环量(m³)/(间接冷却水循环量(m³)+间接冷却水系统补充水量(m³))",
showTooltip: false,
},
{
title: "重复利用关键指标",
num: "79.2",
unit: "%",
label: "废水回收率",
compare: "节水企业 ≥ 75",
formula: "废水回用率(%)=回用水量(m³)/废水收集量(m³)",
showTooltip: false,
},
{
title: "重复利用关键指标",
num: "98.0",
unit: "%",
label: "重复利用率",
compare: "节水企业 ≥ 98",
formula: "重复利用率(%)=复用水量(m³)/用水量(m³)",
showTooltip: false,
},
],
cluStyle(content) {
if (content.length && content.length <50) {
return `top:-60px`
}
if (content.length && content.length >50) {
return `top:-80px`
}
},
mouseenterHandler(item) {
item.showTooltip = true
},
mouseleaveHandler(item) {
item.showTooltip = false
},
css:
.evaluate {
width: 100%;
height: calc(100% - 20px);
display: flex;
justify-content: space-around;
.list {
width: 20%;
height: 100%;
position: relative;
.title {
font-size: 14px;
color: #47e2ff;
}
.num-box {
width: 108px;
height: 116px;
background: url(~@/assets/img/text-bg3.png);
display: flex;
flex-direction: column;
align-items: center;
.num {
font-family: "ShuHeiTi";
font-size: 20px;
margin-top: 30px;
}
.unit {
margin-bottom: 15px;
}
}
.compare {
background-color: #326aef;
padding: 5px 20px;
}
.formula {
position: absolute;
top: -80px;
}
}
}
下面这里不要加作用域 scoped否则不生效哦!!