在详情页中加html css,设置在一个页面显示详情页并且设置遮罩层

在Vue中的一个小事例

第一步：布局好第一个页面显示，并且在页面上显示一张图片(我的页面显示三张图片)

Css

.common-form-img {

width: 29%;

/*border: 1px solid #ffffff;*/

height: 200px;

float: left;

margin-left: 28px;

margin-left: 3%;

}

.imgs {

width: 100%;

height: 100%;

margin-left: 3%;

transition: all 0.6s;

}

*第二步：设置好一个带有遮罩层的页面，让第一页点击图片进入，然后把放大的图片显示到页面的中间位置

@click.stop="showBigImg =!showBigImg"

显示放大图片之后再次点击，图片消失返回历史页面

Css

.imgMask {

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: rgba(0,0,0,.5);

z-index: 99;

}

.showImg {

position: fixed;

left: 50%;

top: 50%;

/*width: 1200px;*/

height: 460px;

transform: translate(-50%,-50%);

transition: all .3s;

z-index: 100;

}

.bigImg {

position: relative;

}

*第三步：写相关的js，实现整个功能看效果

data (){

return {

//存放图片

imgList: [],

//图片放大

showBigImg: false,

num: 0,

}

}

methods : {

select(index) {

this.showBigImg = true;

this.num = index;

},

}

效果：

image.png

点击之后：

image.png

等再次点击则消失