【前端样式】仿B站视频封面效果

<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>