cnbugs/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-06-12 13:19:31 +08:00
Code Issues Activity

fix: 修复启动页面视频背景下文字遮挡问题、新增更多参数配置

Browse Source
This commit is contained in:
小莫唐尼
2024-07-10 17:17:24 +08:00
parent ad6719e201
commit c3349ae070
1 changed files with 432 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pagesA/start/start.vue
+75 -54
View File
@@ -1,6 +1,6 @@
<template>
<view class="app-page bg-gradient-blue-lighten-b" :style="pageStyle">
<view v-if="!calcUseVideoBackground" class="tn-satr">
<view class="app-page bg-gradient-blue-lighten-b" :class="calcPageClass" :style="calcPageStyle">
<view v-if="calcBackgroundType!=='video'" class="tn-satr">
<view class="sky"></view>
<view class="stars">
<view class="falling-stars">
@@ -40,26 +40,35 @@
</view>
</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>
<video v-else class="video-bg" :object-fit="startConfig.bgVideoFit" :src="startConfig.bgVideo" :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>
<cover-view v-if="startConfig.title || startConfig.logo" class="title-container">
<cover-view v-if="startConfig.logo" class="app-logo">
<cover-image class="app-logo-image" :src="$utils.checkImageUrl(startConfig.logo)"
mode="aspectFill"></cover-image>
</cover-view>
<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>
<cover-view v-if="startConfig.title" class="app-title" :style="startConfig.titleStyle">
「 {{ startConfig.title }} 」
</cover-view>
</cover-view>
<view class="" style="padding: 120rpx 200rpx;z-index: 999;position: relative;">
<view class="start-btn" :class="[startConfig.btnClass]" @click="fnStart()"
:style="startConfig.btnStyle">{{ startConfig.btnText || '开始体验' }}</view>
</view>
<cover-view v-if="startConfig.desc1 || startConfig.desc2" class="bottom-container">
<cover-view class="text-align-center" :style="startConfig.descStyle"
style="color:white;padding: 60vh 0 0 0;">
<cover-view class="" style="font-size: 44rpx;" v-if="startConfig.desc1">{{ startConfig.desc1 }}
</cover-view>
<cover-view class="mt-30 text-size-m" v-if="startConfig.desc2">{{ startConfig.desc2 }}</cover-view>
</cover-view>
<cover-view class="" style="padding: 120rpx 200rpx;z-index: 999;position: relative;">
<cover-view class="start-btn" :class="[startConfig.btnClass]" @click="fnStart()"
:style="startConfig.btnStyle">{{ startConfig.btnText || '开始体验' }}
</cover-view>
</cover-view>
</cover-view>
<!-- 波浪效果 -->
<wave v-if="startConfig.useWave"></wave>
@@ -73,32 +82,34 @@
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;
calcBackgroundType() {
return this.startConfig.backgroundType;
},
pageStyle() {
if (this.calcUseVideoBackground) {
calcPageClass() {
if (this.calcBackgroundType === 'color') {
return [this.startConfig.bg]
}
return []
},
calcPageStyle() {
if (this.calcBackgroundType === 'color') {
return {}
}
if (this.calcBackgroundType === 'image') {
return {
backgroundImage: `url(${this.$utils.checkImageUrl(this.startConfig.bgImage)})!important`,
backgroundSize: this.startConfig.bgImageFit
}
}
if (this.calcBackgroundType === 'video') {
return {
background: '#ffffff'
}
}
if (this.startConfig.bg) {
const _bg = this.$utils.checkIsUrl(this.startConfig.bg) ?
`url(${this.$utils.checkImageUrl(this.startConfig.bg)})` : this
.startConfig.bg;
return {
background: _bg + '!important'
};
}
return {};
}
},
@@ -117,8 +128,11 @@
<style lang="scss" scoped>
.app-page {
position: relative;
width: 100vw;
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
}
.start-btn {
@@ -132,51 +146,58 @@
font-size: 28rpx;
}
.btn-group {
position: fixed;
.bottom-container {
position: absolute;
bottom: 50rpx;
left: 50%;
transform: translateX(-50%);
z-index: 10;
z-index: 999;
}
.video-bg {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 0;
}
/* 用户信息 start */
.user-info {
&__container {
.title-container {
width: 100vw;
position: absolute;
top: 25vh;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 20vh;
left: 0;
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
&__avatar {
.app-logo {
width: 200rpx;
height: 200rpx;
border: 8rpx solid rgba(255, 255, 255, 0.05);
border: 8rpx solid rgba(255, 255, 255, 0.35);
border-radius: 50%;
overflow: hidden;
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
overflow: hidden;
&-image {
width: 100%;
height: 100%;
}
}
&__nick-name {
.app-title {
color: #ffffff;
margin-top: 26rpx;
font-size: 36rpx;
font-weight: 600;
text-align: center;
}
}
/* 用户信息 end */
/* 流星*/
.tn-satr {
position: fixed;
width: 100%;
@@ -196,7 +217,7 @@
.star {
border-radius: 50%;
background: #ffffff;
box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 0.8);
box-shadow: 0 0 6px 0 rgba(255, 255, 255, 0.8);
}
.small-stars .star {