51 lines
942 B
Vue
51 lines
942 B
Vue
<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> |