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

pagesA/start/start.vue

@@ -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,39 +40,60 @@
 			</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 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>
 
 <script>
-import wave from '@/components/wave/wave.vue';
+	import wave from '@/components/wave/wave.vue';
 
-export default {
+	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'
@@ -91,16 +112,16 @@ export default {
 				});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		height: 100vh;
-}
+	}
 
-.start-btn {
+	.start-btn {
 		box-sizing: border-box;
 		background-color: transparent;
 		padding: 16rpx 50rpx;
@@ -109,10 +130,24 @@ export default {
 		color: #ffffff;
 		text-align: center;
 		font-size: 28rpx;
-}
+	}
 
-/* 用户信息 start */
+	.btn-group {
-.user-info {
+		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 {
 			position: absolute;
 			top: 25vh;
@@ -137,229 +172,229 @@ export default {
 			font-weight: 600;
 			text-align: center;
 		}
-}
+	}
 
-/* 用户信息 end */
+	/* 用户信息 end */
 
-/* 流星*/
+	/* 流星*/
-.tn-satr {
+	.tn-satr {
 		position: fixed;
 		width: 100%;
 		height: 600px;
 		overflow: hidden;
 		flex-shrink: 0;
 		z-index: 998;
-}
+	}
 
-.stars {
+	.stars {
 		position: absolute;
 		z-index: 1;
 		width: 100%;
 		height: 400px;
-}
+	}
 
-.star {
+	.star {
 		border-radius: 50%;
 		background: #ffffff;
 		box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 0.8);
-}
+	}
 
-.small-stars .star {
+	.small-stars .star {
 		position: absolute;
 		width: 3px;
 		height: 3px;
-}
+	}
 
-.small-stars .star:nth-child(2n) {
+	.small-stars .star:nth-child(2n) {
 		opacity: 0;
 		-webkit-animation: star-blink 1.2s linear infinite alternate;
 		animation: star-blink 1.2s linear infinite alternate;
-}
+	}
 
-.small-stars .star:nth-child(1) {
+	.small-stars .star:nth-child(1) {
 		left: 40px;
 		bottom: 50px;
-}
+	}
 
-.small-stars .star:nth-child(2) {
+	.small-stars .star:nth-child(2) {
 		left: 200px;
 		bottom: 40px;
-}
+	}
 
-.small-stars .star:nth-child(3) {
+	.small-stars .star:nth-child(3) {
 		left: 60px;
 		bottom: 120px;
-}
+	}
 
-.small-stars .star:nth-child(4) {
+	.small-stars .star:nth-child(4) {
 		left: 140px;
 		bottom: 250px;
-}
+	}
 
-.small-stars .star:nth-child(5) {
+	.small-stars .star:nth-child(5) {
 		left: 400px;
 		bottom: 300px;
-}
+	}
 
-.small-stars .star:nth-child(6) {
+	.small-stars .star:nth-child(6) {
 		left: 170px;
 		bottom: 80px;
-}
+	}
 
-.small-stars .star:nth-child(7) {
+	.small-stars .star:nth-child(7) {
 		left: 200px;
 		bottom: 360px;
 		-webkit-animation-delay: 0.2s;
 		animation-delay: 0.2s;
-}
+	}
 
-.small-stars .star:nth-child(8) {
+	.small-stars .star:nth-child(8) {
 		left: 250px;
 		bottom: 320px;
-}
+	}
 
-.small-stars .star:nth-child(9) {
+	.small-stars .star:nth-child(9) {
 		left: 300px;
 		bottom: 340px;
-}
+	}
 
-.small-stars .star:nth-child(10) {
+	.small-stars .star:nth-child(10) {
 		left: 130px;
 		bottom: 320px;
 		-webkit-animation-delay: 0.5s;
 		animation-delay: 0.5s;
-}
+	}
 
-.small-stars .star:nth-child(11) {
+	.small-stars .star:nth-child(11) {
 		left: 230px;
 		bottom: 330px;
 		-webkit-animation-delay: 7s;
 		animation-delay: 7s;
-}
+	}
 
-.small-stars .star:nth-child(12) {
+	.small-stars .star:nth-child(12) {
 		left: 300px;
 		bottom: 360px;
 		-webkit-animation-delay: 0.3s;
 		animation-delay: 0.3s;
-}
+	}
 
-@-webkit-keyframes star-blink {
+	@-webkit-keyframes star-blink {
 		50% {
 			width: 3px;
 			height: 3px;
 			opacity: 1;
 		}
-}
+	}
 
-@keyframes star-blink {
+	@keyframes star-blink {
 		50% {
 			width: 3px;
 			height: 3px;
 			opacity: 1;
 		}
-}
+	}
 
-.medium-stars .star {
+	.medium-stars .star {
 		position: absolute;
 		width: 3px;
 		height: 3px;
 		opacity: 0;
 		-webkit-animation: star-blink 1.2s ease-in infinite alternate;
 		animation: star-blink 1.2s ease-in infinite alternate;
-}
+	}
 
-.medium-stars .star:nth-child(1) {
+	.medium-stars .star:nth-child(1) {
 		left: 300px;
 		bottom: 50px;
-}
+	}
 
-.medium-stars .star:nth-child(2) {
+	.medium-stars .star:nth-child(2) {
 		left: 400px;
 		bottom: 40px;
 		-webkit-animation-delay: 0.4s;
 		animation-delay: 0.4s;
-}
+	}
 
-.medium-stars .star:nth-child(3) {
+	.medium-stars .star:nth-child(3) {
 		left: 330px;
 		bottom: 300px;
 		-webkit-animation-delay: 0.2s;
 		animation-delay: 0.2s;
-}
+	}
 
-.medium-stars .star:nth-child(4) {
+	.medium-stars .star:nth-child(4) {
 		left: 460px;
 		bottom: 300px;
 		-webkit-animation-delay: 0.9s;
 		animation-delay: 0.9s;
-}
+	}
 
-.medium-stars .star:nth-child(5) {
+	.medium-stars .star:nth-child(5) {
 		left: 300px;
 		bottom: 150px;
 		-webkit-animation-delay: 1.2s;
 		animation-delay: 1.2s;
-}
+	}
 
-.medium-stars .star:nth-child(6) {
+	.medium-stars .star:nth-child(6) {
 		left: 440px;
 		bottom: 120px;
 		-webkit-animation-delay: 1s;
 		animation-delay: 1s;
-}
+	}
 
-.medium-stars .star:nth-child(7) {
+	.medium-stars .star:nth-child(7) {
 		left: 200px;
 		bottom: 140px;
 		-webkit-animation-delay: 0.8s;
 		animation-delay: 0.8s;
-}
+	}
 
-.medium-stars .star:nth-child(8) {
+	.medium-stars .star:nth-child(8) {
 		left: 30px;
 		bottom: 480px;
 		-webkit-animation-delay: 0.3s;
 		animation-delay: 0.3s;
-}
+	}
 
-.medium-stars .star:nth-child(9) {
+	.medium-stars .star:nth-child(9) {
 		left: 460px;
 		bottom: 400px;
 		-webkit-animation-delay: 1.2s;
 		animation-delay: 1.2s;
-}
+	}
 
-.medium-stars .star:nth-child(10) {
+	.medium-stars .star:nth-child(10) {
 		left: 150px;
 		bottom: 10px;
 		-webkit-animation-delay: 1s;
 		animation-delay: 1s;
-}
+	}
 
-.medium-stars .star:nth-child(11) {
+	.medium-stars .star:nth-child(11) {
 		left: 420px;
 		bottom: 450px;
 		-webkit-animation-delay: 1.2s;
 		animation-delay: 1.2s;
-}
+	}
 
-.medium-stars .star:nth-child(12) {
+	.medium-stars .star:nth-child(12) {
 		left: 340px;
 		bottom: 180px;
 		-webkit-animation-delay: 1.1s;
 		animation-delay: 1.1s;
-}
+	}
 
-@keyframes star-blink {
+	@keyframes star-blink {
 		50% {
 			width: 4px;
 			height: 4px;
 			opacity: 1;
 		}
-}
+	}
 
-.star-fall {
+	.star-fall {
 		position: relative;
 		border-radius: 2px;
 		width: 80px;
@@ -367,9 +402,9 @@ export default {
 		overflow: hidden;
 		-webkit-transform: rotate(-20deg);
 		transform: rotate(-20deg);
-}
+	}
 
-.star-fall:after {
+	.star-fall:after {
 		content: '';
 		position: absolute;
 		width: 50px;
@@ -379,49 +414,49 @@ export default {
 		left: 100%;
 		-webkit-animation: star-fall 3.6s linear infinite;
 		animation: star-fall 3.6s linear infinite;
-}
+	}
 
-.star-fall:nth-child(1) {
+	.star-fall:nth-child(1) {
 		left: 80px;
 		bottom: -100px;
-}
+	}
 
-.star-fall:nth-child(1):after {
+	.star-fall:nth-child(1):after {
 		-webkit-animation-delay: 2.4s;
 		animation-delay: 2.4s;
-}
+	}
 
-.star-fall:nth-child(2) {
+	.star-fall:nth-child(2) {
 		left: 200px;
 		bottom: -200px;
-}
+	}
 
-.star-fall:nth-child(2):after {
+	.star-fall:nth-child(2):after {
 		-webkit-animation-delay: 2s;
 		animation-delay: 2s;
-}
+	}
 
-.star-fall:nth-child(3) {
+	.star-fall:nth-child(3) {
 		left: 430px;
 		bottom: -50px;
-}
+	}
 
-.star-fall:nth-child(3):after {
+	.star-fall:nth-child(3):after {
 		-webkit-animation-delay: 3.6s;
 		animation-delay: 3.6s;
-}
+	}
 
-.star-fall:nth-child(4) {
+	.star-fall:nth-child(4) {
 		left: 400px;
 		bottom: 100px;
-}
+	}
 
-.star-fall:nth-child(4):after {
+	.star-fall:nth-child(4):after {
 		-webkit-animation-delay: 0.2s;
 		animation-delay: 0.2s;
-}
+	}
 
-@-webkit-keyframes star-fall {
+	@-webkit-keyframes star-fall {
 		20% {
 			left: -100%;
 		}
@@ -429,9 +464,9 @@ export default {
 		100% {
 			left: -100%;
 		}
-}
+	}
 
-@keyframes star-fall {
+	@keyframes star-fall {
 		20% {
 			left: -100%;
 		}
@@ -439,5 +474,5 @@ export default {
 		100% {
 			left: -100%;
 		}
-}
+	}
 </style>