<script setup>
import { defineProps, defineEmits } from 'vue'

// 组件属性
const props = defineProps({
  // 按钮位置
  position: {
    type: Object,
    default: () => ({
      bottom: '150rpx',
      right: '11rpx'
    })
  }
})

// 组件事件
const emit = defineEmits(['play'])

// 点击播放按钮
const handlePlay = () => {
  emit('play')
}
</script>

<template>
  <div class="video-play-button-container" :style="position" @click="handlePlay">
    <img src="/static/images/btn_video.png" alt="播放视频" class="video-button" />
  </div>
</template>

<style scoped>
/* 视频播放按钮容器 */
.video-play-button-container {
  position: absolute;
  width: 146rpx;
  height: 174rpx;
  z-index: 50;
  cursor: pointer;
}

.video-button {
  width: 146rpx;
  height: 174rpx;
}

/* 鼠标悬停效果 */
.video-play-button-container:hover .video-button {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}
</style>