You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.4 KiB
43 lines
1.4 KiB
1 week ago
|
<template>
|
||
|
|
<view class="preview-page">
|
||
|
|
<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view>
|
||
|
|
<view class="nav">
|
||
|
|
<view class="back" @tap="back">‹</view>
|
||
|
|
<view class="title">视频</view>
|
||
|
|
<view class="ghost"></view>
|
||
|
|
</view>
|
||
|
|
<video class="video-player" v-if="url" :src="url" :controls="true" :autoplay="true" object-fit="contain"></video>
|
||
|
|
<view class="empty" v-else>视频地址为空</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
menuButtonInfo: { top: 44 },
|
||
|
|
url: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||
|
|
this.url = decodeURIComponent((options && options.url) || '')
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
back() {
|
||
|
|
uni.navigateBack()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
page { background: #05070d; }
|
||
|
|
.preview-page { min-height: 100vh; box-sizing: border-box; color: #fff; background: #05070d; }
|
||
|
|
.nav { height: 88rpx; display: flex; align-items: center; padding: 0 24rpx; box-sizing: border-box; }
|
||
|
|
.back, .ghost { width: 72rpx; color: rgba(255,255,255,.78); font-size: 56rpx; }
|
||
|
|
.title { flex: 1; text-align: center; font-size: 30rpx; font-weight: 800; }
|
||
|
|
.video-player { width: 100vw; height: calc(100vh - 150rpx); background: #000; }
|
||
|
|
.empty { margin-top: 200rpx; text-align: center; color: rgba(255,255,255,.56); font-size: 26rpx; }
|
||
|
|
</style>
|