vue 获取当前屏幕的宽度，图片等比例缩放
这个是一个背景图，点击对应的圆圈就会出现一个蒙层上面显示详情，但是只要当前窗口大小变化了，因为我的蒙层大小是固定的px，所以不会变，就不在图片对应的位置了
我们要绑定样式style，等后面要根据当前的屏幕来给蒙层动态设置宽高
:to="{name:'/streetDetails',query:{code:'310151101'}}"
:style="style01"
class="street-item item1"
>详情
>
css主要代码
.main {
background: transparent url("../../src/assets/img/street.png") no-repeat;
padding-top: 50.78%;
position: relative;
background-size: 100%;
& .content {
border: 0px;
}
}
.street-item {
height: 92px;
width: 92px;
position: absolute;
max-width: 92px;
min-width: 70px;
min-height: 92px;
min-height: 70px;
text-align: center;
display: block;
line-height: 92px;
// background: #c1bcbc82;
border-radius: 50%;
// border: 1px solid red;
& span {
color: white;
display: none;
}
}
a:hover {
& span {
display: inline-block;
}
background: #4b42426b;
}
.item1 {
position: absolute;
top: 11.3%;
left: 18.1%;
}
主要js代码*
data() {
return {
style01: {
width: 92,
height: 92,
lineheight: 92,
borderRadius: 50
},
centerWidth: "",
centerHeight: ""
};
},
mounted() {
//立即执行
window.onresize = () => {
return (() => {
this.resizeWin();
})();
};
this.resizeWin();
},
methods: {
resizeWin() {
console.log(document.documentElement.clientWidth);
//当前window 宽
this.centerWidth = document.documentElement.scrollWidth;
//最小宽度 1440
var boxH = 92,
boxW = 92;
if (this.centerWidth > 1440) {
boxH = boxW = Math.ceil((this.centerWidth / 1920) * 92);
// console.log("H", boxH);
} else {
boxH = boxW = Math.ceil((1440 / 1920) * 92);
}
// var item = document.getElementsByClassName("street-item");
console.log(this.style01.width);
this.style01.width = boxW + "px";
this.style01.height = boxH + "px";
this.style01.lineHeight = boxH + "px";
this.style01.borderRadius = boxW / 2 + "px";
}
}
