提供一个vue前端页面示例，样式使用elementui，包括图文且带按钮的卡片、光标悬浮播放视频的video标签、一组光标悬浮放大图片的图片展示

以下是一个示例代码，使用了ElementUI，包含图文带按钮的卡片、光标悬浮播放视频的video标签、以及一组光标悬浮放大图片的图片展示：

<template>
  <div class="container">
    <!-- 图文带按钮的卡片 -->
    <el-card class="card">
      <div class="img-wrapper">
        <img src="./assets/image.jpg" alt="">
      </div>
      <div class="text-wrapper">
        <h3>这是标题</h3>
        <p>这是一段描述文字</p>
        <div class="btn-wrapper">
          <el-button type="primary">查看详情</el-button>
        </div>
      </div>
    </el-card>

    <!-- 光标悬浮播放视频 -->
    <div class="video-wrapper">
      <video src="./assets/video.mp4" controls></video>
    </div>

    <!-- 一组光标悬浮放大图片的图片展示 -->
    <div class="gallery">
      <div class="img-item">
        <img src="./assets/image1.jpg" alt="">
      </div>
      <div class="img-item">
        <img src="./assets/image2.jpg" alt="">
      </div>
      <div class="img-item">
        <img src="./assets/image3.jpg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Example",
};
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 30px;
}

.card {
  width: 300px;
  margin-bottom: 30px;
}

.img-wrapper {
  height: 200px;
  overflow: hidden;
}

.img-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.text-wrapper {
  padding: 20px;
  text-align: center;
}

.btn-wrapper {
  margin-top: 20px;
}

.video-wrapper {
  margin-bottom: 30px;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.img-item {
  position: relative;
  width: 250px;
  height: 250px;
  margin-bottom: 30px;
}

.img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.img-item:hover::before {
  opacity: 1;
}

.img-item:hover img {
  transform: scale(1.1);
}
</style>