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

pagesA/start/start.vue

@@ -1,6 +1,6 @@
 <template>
-	<view class="app-page bg-gradient-blue-lighten-b" :style="pageStyle">
+    <view class="app-page bg-gradient-blue-lighten-b" :class="calcPageClass" :style="calcPageStyle">
-		<view v-if="!calcUseVideoBackground" class="tn-satr">
+        <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"
+        <video v-else class="video-bg" :object-fit="startConfig.bgVideoFit" :src="startConfig.bgVideo" :loop="true" :autoplay="true"
-			:show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false" :show-loading="false"
+               :muted="true" :controls="false" :show-fullscreen-btn="false" :show-play-btn="false"
-			:enable-progress-gesture="false" :show-progress="false"></video>
+               :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">
+        <cover-view v-if="startConfig.title || startConfig.logo" class="title-container">
-			<image v-if="startConfig.logo" class="user-info__avatar" :src="$utils.checkImageUrl(startConfig.logo)"
+            <cover-view v-if="startConfig.logo" class="app-logo">
-				mode="aspectFill"></image>
+                <cover-image class="app-logo-image" :src="$utils.checkImageUrl(startConfig.logo)"
-			<view v-if="startConfig.title " class="user-info__nick-name" :style="startConfig.titleStyle">「 {{ startConfig.title }} 」</view>
+                             mode="aspectFill"></cover-image>
-		</view>
+            </cover-view>
 
-		<cover-view class="btn-group">
+            <cover-view v-if="startConfig.title" class="app-title" :style="startConfig.titleStyle">
-			<view v-if="startConfig.desc1 || startConfig.desc2" class="text-align-center" :style="startConfig.descStyle" style="color:white;padding: 60vh 0 0 0;">
+                「 {{ startConfig.title }} 」
-				<view class="" style="font-size: 44rpx;" v-if="startConfig.desc1">{{ startConfig.desc1 }}</view>
+            </cover-view>
-				<view class="mt-30 text-size-m" v-if="startConfig.desc2">{{ startConfig.desc2 }}</view>
+        </cover-view>
-			</view>
 
-			<view class="" style="padding: 120rpx 200rpx;z-index: 999;position: relative;">
+        <cover-view v-if="startConfig.desc1 || startConfig.desc2" class="bottom-container">
-				<view class="start-btn" :class="[startConfig.btnClass]" @click="fnStart()"
+            <cover-view class="text-align-center" :style="startConfig.descStyle"
-					:style="startConfig.btnStyle">{{ startConfig.btnText || '开始体验' }}</view>
+                        style="color:white;padding: 60vh 0 0 0;">
-			</view>
+                <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() {
+        calcBackgroundType() {
-				return this.startConfig.useVideoBackground;
+            return this.startConfig.backgroundType;
         },
-			pageStyle() {
+        calcPageClass() {
-				if (this.calcUseVideoBackground) {
+            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 {
+.bottom-container {
-		position: fixed;
+    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 */
+.title-container {
-	.user-info {
+    width: 100vw;
-		&__container {
     position: absolute;
-			top: 25vh;
+    top: 20vh;
-			left: 50%;
+    left: 0;
-			-webkit-transform: translate(-50%, -50%);
+    z-index: 999;
-			transform: translate(-50%, -50%);
+    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 {