GithubProxy/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2025-05-19 18:10:15 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 启动页面支持视频背景

Browse Source
This commit is contained in:
小莫唐尼 2024-07-10 11:20:25 +08:00
parent 0e342d5fa3
commit ad6719e201
1 changed files with 413 additions and 378 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
pagesA/start/start.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<view class="app-page bg-gradient-blue-lighten-b" :style="pageStyle"> <view class="app-page bg-gradient-blue-lighten-b" :style="pageStyle">
<view class="tn-satr"> <view v-if="!calcUseVideoBackground" class="tn-satr">
<view class="sky"></view> <view class="sky"></view>
<view class="stars"> <view class="stars">
<view class="falling-stars"> <view class="falling-stars">
@ -40,22 +40,29 @@
</view> </view>
</view> </view>
<view class="user-info__container flex flex-col flex-center"> <video v-else class="video-bg" :src="bg" :loop="true" :autoplay="true" :muted="true" :controls="false"
<image class="user-info__avatar" :src="$utils.checkImageUrl(startConfig.logo)" mode="aspectFill"></image> :show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false" :show-loading="false"
<view class="user-info__nick-name">「 {{ startConfig.title }} 」</view> :enable-progress-gesture="false" :show-progress="false"></video>
<view v-if="startConfig.title || startConfig.logo" class="user-info__container flex flex-col flex-center">
<image v-if="startConfig.logo" class="user-info__avatar" :src="$utils.checkImageUrl(startConfig.logo)"
mode="aspectFill"></image>
<view v-if="startConfig.title " class="user-info__nick-name" :style="startConfig.titleStyle">「 {{ startConfig.title }} 」</view>
</view> </view>
<view class="text-align-center text-white" style="padding: 60vh 0 0 0;"> <cover-view class="btn-group">
<view v-if="startConfig.desc1 || startConfig.desc2" class="text-align-center" :style="startConfig.descStyle" style="color:white;padding: 60vh 0 0 0;">
<view class="" style="font-size: 44rpx;" v-if="startConfig.desc1">{{ startConfig.desc1 }}</view> <view class="" style="font-size: 44rpx;" v-if="startConfig.desc1">{{ startConfig.desc1 }}</view>
<view class="mt-30 text-size-m" v-if="startConfig.desc2">{{ startConfig.desc2 }}</view> <view class="mt-30 text-size-m" v-if="startConfig.desc2">{{ startConfig.desc2 }}</view>
</view> </view>
<view class="" style="padding: 120rpx 200rpx;z-index: 999;position: relative;"> <view class="" style="padding: 120rpx 200rpx;z-index: 999;position: relative;">
<view class="start-btn" @click="fnStart()">{{ startConfig.btnText || '开始体验' }}</view> <view class="start-btn" :class="[startConfig.btnClass]" @click="fnStart()"
:style="startConfig.btnStyle">{{ startConfig.btnText || '开始体验' }}</view>
</view> </view>
</cover-view>
<!-- 波浪效果 --> <!-- 波浪效果 -->
<wave></wave> <wave v-if="startConfig.useWave"></wave>
</view> </view>
</template> </template>
@ -66,13 +73,27 @@ export default {
components: { components: {
wave wave
}, },
data() {
return {
bg: "https://thalo.925i.cn/upload/92739970-24856955-start.mp4"
}
},
computed: { computed: {
startConfig() { startConfig() {
return this.$tm.vx.getters().getConfigs.appConfig.startConfig; return this.$tm.vx.getters().getConfigs.appConfig.startConfig;
}, },
calcUseVideoBackground() {
return this.startConfig.useVideoBackground;
},
pageStyle() { pageStyle() {
if (this.calcUseVideoBackground) {
return {
background: '#ffffff'
}
}
if (this.startConfig.bg) { if (this.startConfig.bg) {
const _bg = this.$utils.checkIsUrl(this.startConfig.bg) ? `url(${this.$utils.checkImageUrl(this.startConfig.bg)})` : this const _bg = this.$utils.checkIsUrl(this.startConfig.bg) ?
`url(${this.$utils.checkImageUrl(this.startConfig.bg)})` : this
.startConfig.bg; .startConfig.bg;
return { return {
background: _bg + '!important' background: _bg + '!important'
@ -111,6 +132,20 @@ export default {
font-size: 28rpx; font-size: 28rpx;
} }
.btn-group {
position: fixed;
bottom: 50rpx;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.video-bg {
width: 100vw;
height: 100vh;
z-index: 0;
}
/* 用户信息 start */ /* 用户信息 start */
.user-info { .user-info {
&__container { &__container {