<div
class="background-jianbian"
:style="{ width: scrollerHeight(item.jianWidth),background: item.topsColor,}"
></div>
<div class="link" :style="styleVar(item)"></div>
methods: {
scrollerHeight(width) {
return width - 50 + "px";
},
styleVar(val) {
return { "--box-width": val + "px" };
},
},
<style>
.link {
width: var(--box-width);
}
</style>
//active设置动态样式
<div
id="tabls"
@click="changeColor(index)"
v-for="(item, index) in arry"
:key="index"
:class="{ active: num == index }"
></div>
<span
class="imagesa"
:style="`backgroundImage: url(${backgroundImages[index]})`"
></span>
//style动态样式
data() {
return {
num: 0,
arry: [
["一张图", require("./image/yizhangtu.svg")],
["项目可视化", require("./image/keshihua.svg")],
["项目审核", require("./image/shenghe.svg")],
["监测建管", require("./image/jiance.svg")],
["月报进度", require("./image/yuebao.svg")],
],
backgroundImages: [
require("./image/yizhangtus.svg"),
require("./image/keshihuas.svg"),
require("./image/shenghes.svg"),
require("./image/jiances.svg"),
require("./image/yuebaos.svg"),
],
}}
<style lang="scss" scope>
.active {
background-color: rgba(0, 145, 255, 0.16);
}
</style>