Home.vue
2.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<template>
<div class="home-container">
<!-- 全屏背景图 - 海报@2x.png -->
<div class="full-background"></div>
<!-- 左下角背景装饰图 - bg@2x.png -->
<div class="bottom-left-decoration"></div>
<!-- 主要内容区域 -->
<div class="main-content">
<!-- 顶部Banner图片 -->
<div class="banner-section">
<img
src="@/assets/images/02 西园戒幢律寺三坛大戒法会/banner@2x.png"
alt="三坛大戒法会Banner"
class="banner-image"
/>
</div>
<!-- 视频播放器区域 -->
<div class="video-section">
<VideoPlayer
:video-url="videoUrl"
video-id="home-video"
:autoplay="false"
:options="videoOptions"
/>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import VideoPlayer from '@/components/VideoPlayer.vue'
// 视频配置
const videoUrl = ref('/src/assets/images/02 西园戒幢律寺三坛大戒法会/sample-10s.mp4')
const videoOptions = ref({
fluid: true,
responsive: true,
aspectRatio: '16:9',
controls: true,
preload: 'metadata',
poster: '',
playbackRates: [0.5, 1, 1.25, 1.5, 2],
sources: [{
src: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/sample-10s.mp4',
type: 'video/mp4'
}]
})
</script>
<style scoped>
.home-container {
position: relative;
min-height: 100vh;
width: 100%;
overflow-x: hidden;
}
/* 全屏背景图 - 海报@2x.png */
.full-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('@/assets/images/02 西园戒幢律寺三坛大戒法会/海报@2x.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -2;
}
/* 左下角背景装饰图 - bg@2x.png */
.bottom-left-decoration {
position: fixed;
bottom: 0;
left: 0;
width: 50%;
height: 50%;
background-image: url('@/assets/images/02 西园戒幢律寺三坛大戒法会/bg@2x.png');
background-size: contain;
background-position: bottom left;
background-repeat: no-repeat;
z-index: -1;
pointer-events: none;
}
/* 主要内容区域 */
.main-content {
position: relative;
z-index: 1;
width: 100%;
}
/* Banner区域 */
.banner-section {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.banner-image {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* 视频播放器区域 */
.video-section {
width: 100%;
margin: 0;
padding: 0;
}
.video-section :deep(.video-player-container) {
width: 100%;
background: transparent;
}
.video-section :deep(.video-player) {
width: 100%;
height: auto;
}
/* 响应式设计 */
@media (max-width: 48rem) {
.bottom-left-decoration {
width: 60%;
height: 40%;
}
}
@media (max-width: 30rem) {
.bottom-left-decoration {
width: 70%;
height: 35%;
}
}
</style>