<div style="display: flex;flex-wrap: wrap;">
<div v-for="每个视频 in 播放列表" style="width: 221px;height: 200px;margin-left: 20px;margin-top: 10px;" @click="点击跳转">
<div class="image-container">
<img :src="封面">
<div class="overlay">
<div class="play-info">
<span>点击 {{播放量}}</span>
<span style="margin-left: 5px;">点赞 {{点赞量}}</span>
</div>
</div>
</div>
<div style="height: 70px;">
<span style="height: 36px;font-size: 17px;color: black;margin-top: 5px;">{{视频标题}}</span>
<div style="height: 14px;font-size: 13px;color: darkgrey;margin-top: 15px;">
{{视频介绍}}
</div>
</div>
</div>
</div>
<style>
.image-container {
position: relative;
width: 100%; /* 与外部 div 宽度相同 */
height: 0; /* 高度设置为0,通过 padding-bottom 来保持宽高比 */
padding-bottom: 56.25%; /* 图片的宽高比通常是16:9,即 height / width = 9 / 16 = 0.5625 */
border-radius: 5px;
overflow: hidden; /* 隐藏超出容器的内容 */
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 确保图片完全覆盖容器,并且不会拉伸 */
border-radius: 5px;
}
.overlay {
position: absolute;
bottom: 0; /* 将 overlay 定位在图片底部 */
left: 0;
width: 100%;
height: 5px;
padding: 10px; /* 为文字添加内边距 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* 渐变背景 */
color: white; /* 文字颜色为白色 */
display: flex;
justify-content: space-between; /* 文字水平两端对齐 */
align-items: center; /* 文字垂直居中对齐 */
border-radius: 0 0 5px 5px; /* 保持底部圆角 */
}
.play-info span {
/* 可以为 span 元素添加更多的样式,例如字体大小等 */
font-size: 10px;
}
</style>
【前端样式】仿B站视频封面效果
于 2024-07-28 14:03:46 首次发布