|
|
@@ -1,17 +1,24 @@
|
|
1
|
1
|
<template>
|
|
2
|
|
- <div class="page pg-bg video-pg">
|
|
3
|
|
- <GoBack class="goback abs" @click.stop="router.go(-1)" />
|
|
4
|
|
- <div class="content">
|
|
5
|
|
- <video
|
|
6
|
|
- webkit-playsinline
|
|
7
|
|
- playsinline
|
|
8
|
|
- preload="auto"
|
|
9
|
|
- autoplay="autoplay"
|
|
10
|
|
- controls="controls"
|
|
11
|
|
- ref="mediaRef"
|
|
12
|
|
- src="/video/9年活动.mp4"
|
|
13
|
|
- ></video>
|
|
14
|
|
- </div>
|
|
|
2
|
+ <div class="page pg-bg video-pg" @click="onPageClick">
|
|
|
3
|
+ <Teleport to="#vid-cover">
|
|
|
4
|
+ <div class="goback" @click="router.go(-1)">
|
|
|
5
|
+ <GoBack />
|
|
|
6
|
+ </div>
|
|
|
7
|
+ </Teleport>
|
|
|
8
|
+ <video
|
|
|
9
|
+ webkit-playsinline
|
|
|
10
|
+ playsinline
|
|
|
11
|
+ preload="auto"
|
|
|
12
|
+ autoplay="autoplay"
|
|
|
13
|
+ controls="controls"
|
|
|
14
|
+ x5-video-player-type="h5"
|
|
|
15
|
+ x5-video-orientation="landscape"
|
|
|
16
|
+ x5-video-player-fullscreen="false"
|
|
|
17
|
+ poster="/images/pg1/videocover.png"
|
|
|
18
|
+ ref="mediaRef"
|
|
|
19
|
+ src="/video/9年活动.mp4"
|
|
|
20
|
+ @click="onVidClick"
|
|
|
21
|
+ ></video>
|
|
15
|
22
|
</div>
|
|
16
|
23
|
</template>
|
|
17
|
24
|
|
|
|
@@ -25,7 +32,6 @@ const { pause } = useModel('audio');
|
|
25
|
32
|
|
|
26
|
33
|
const router = useRouter();
|
|
27
|
34
|
const mediaRef = ref();
|
|
28
|
|
-const show = ref(false);
|
|
29
|
35
|
const controls = ref();
|
|
30
|
36
|
|
|
31
|
37
|
onMounted(() => {
|
|
|
@@ -74,46 +80,27 @@ onMounted(() => {
|
|
74
|
80
|
.video-pg {
|
|
75
|
81
|
position: relative;
|
|
76
|
82
|
background-color: #000;
|
|
|
83
|
+ overflow: hidden;
|
|
|
84
|
+ width: 100vh;
|
|
|
85
|
+ height: 100vw;
|
|
77
|
86
|
display: flex;
|
|
78
|
87
|
align-items: center;
|
|
|
88
|
+ justify-content: center;
|
|
|
89
|
+
|
|
|
90
|
+ transform-origin: center left;
|
|
|
91
|
+ transform: rotate(90deg) translate3d(-50vw, -50vw, 0);
|
|
79
|
92
|
|
|
80
|
93
|
.goback {
|
|
81
|
|
- z-index: 100;
|
|
|
94
|
+ position: fixed;
|
|
|
95
|
+ z-index: 20001;
|
|
82
|
96
|
left: 10px;
|
|
83
|
97
|
top: 10px;
|
|
84
|
98
|
}
|
|
85
|
|
- .content {
|
|
86
|
|
- position: relative;
|
|
87
|
|
- box-sizing: border-box;
|
|
88
|
|
- padding-bottom: 100px;
|
|
89
|
|
-
|
|
90
|
|
- video {
|
|
91
|
|
- // width: 100%;
|
|
92
|
|
- width: 100vw;
|
|
93
|
|
- z-index: 1;
|
|
94
|
|
- }
|
|
95
|
|
- .play-action {
|
|
96
|
|
- position: absolute;
|
|
97
|
|
- z-index: 2;
|
|
98
|
|
- bottom: -80px;
|
|
99
|
|
- width: 100%;
|
|
100
|
|
- height: 80px;
|
|
101
|
|
- display: flex;
|
|
102
|
|
- align-items: center;
|
|
103
|
|
- justify-content: center;
|
|
104
|
99
|
|
|
105
|
|
- img {
|
|
106
|
|
- width: 100px;
|
|
107
|
|
- width: 30vw;
|
|
108
|
|
- height: 10vw;
|
|
109
|
|
- }
|
|
110
|
|
- img:first-child {
|
|
111
|
|
- margin-right: 20px;
|
|
112
|
|
- }
|
|
113
|
|
- img:last-child {
|
|
114
|
|
- margin-left: 20px;
|
|
115
|
|
- }
|
|
116
|
|
- }
|
|
|
100
|
+ video {
|
|
|
101
|
+ flex: none;
|
|
|
102
|
+ width: 90%;
|
|
|
103
|
+ z-index: 90%;
|
|
117
|
104
|
}
|
|
118
|
105
|
}
|
|
119
|
106
|
</style>
|
Your Name
il y a 2 ans