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>
<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="stars">
<view class="falling-stars">
@ -40,22 +40,29 @@
</view>
</view>
<view class="user-info__container flex flex-col flex-center">
<image class="user-info__avatar" :src="$utils.checkImageUrl(startConfig.logo)" mode="aspectFill"></image>
<view class="user-info__nick-name">「 {{ startConfig.title }} 」</view>
<video v-else class="video-bg" :src="bg" :loop="true" :autoplay="true" :muted="true" :controls="false"
:show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false" :show-loading="false"
: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 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="mt-30 text-size-m" v-if="startConfig.desc2">{{ startConfig.desc2 }}</view>
</view>
<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>
</cover-view>
<!-- 波浪效果 -->
<wave></wave>
<wave v-if="startConfig.useWave"></wave>
</view>
</template>
@ -66,13 +73,27 @@ export default {
components: {
wave
},
data() {
return {
bg: "https://thalo.925i.cn/upload/92739970-24856955-start.mp4"
}
},
computed: {
startConfig() {
return this.$tm.vx.getters().getConfigs.appConfig.startConfig;
},
calcUseVideoBackground() {
return this.startConfig.useVideoBackground;
},
pageStyle() {
if (this.calcUseVideoBackground) {
return {
background: '#ffffff'
}
}
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;
return {
background: _bg + '!important'
@ -111,6 +132,20 @@ export default {
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 */
.user-info {
&__container {