产品栈视频组件相关笔记

产品栈视频组件相关笔记

1》首先设置视频的样式
首先一个大盒子，里面有一个遮罩层盒子(overlay盒子)，进行淡黑色的遮罩，遮罩层里面有一个video盒子 装video标签和关闭的span标签

给遮罩层fixde布局，透明度设置0.4 ，z-index：10
再给video盒子fixed布局，并设置水平垂直居中，z-index:10
video标签 高度 宽度 100%，设置object-fit:cover; outline:none;
span给absoluted绝对定位 定位在盒子的右上角，z-index:11

2》用transition过渡设置，点击产品栈页面的图片滑入video，点击关闭，将video滑出



需要注意的是，给video-bg添加click事件时，若需求简单，可以如上所示，@click后面直接表达式

3》用animation设置，点击产品栈页面的图片滑入video，点击关闭，将video滑出




注意：class ："{}"除了对象的形式，还可以字符串的形式，直接:class="showSlide"