You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
205 lines
3.8 KiB
205 lines
3.8 KiB
<template>
|
|
<view v-if="showSplash" class="splash-screen">
|
|
<!-- 富文本內容 -->
|
|
<view class="splash-content">
|
|
<image
|
|
:src="splashContent"
|
|
mode="scaleToFill"
|
|
class="splash-image"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 跳過按鈕 -->
|
|
<view class="skip-button" >
|
|
<text class="skip-text">跳過 ({{ countdown }}s)</text>
|
|
</view>
|
|
<!-- 定位英語文字和中文文字到左下角 -->
|
|
<view class="text-container">
|
|
<text class="english-text">
|
|
{{ configParamContent('creen_en') }}
|
|
</text>
|
|
<text class="chinese-text">
|
|
{{ configParamContent('creen_zh') }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// import config from '../../mixins/config.js'
|
|
|
|
export default {
|
|
name: 'SplashScreen',
|
|
// mixins: [config],
|
|
props: {
|
|
// 顯示時長（秒）
|
|
duration: {
|
|
type: Number,
|
|
default: 5
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showSplash: false,
|
|
countdown: 5,
|
|
timer: null,
|
|
splashContent: ''
|
|
}
|
|
},
|
|
computed: {
|
|
image() {
|
|
return this.configParamContent('creen_image') || uni.getStorageSync('screen_image')
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initSplash()
|
|
|
|
uni.hideTabBar()
|
|
},
|
|
beforeDestroy() {
|
|
this.clearTimer()
|
|
},
|
|
methods: {
|
|
// 初始化開動頁面
|
|
async initSplash() {
|
|
try {
|
|
// 獲取富文本內容
|
|
this.splashContent = this.image
|
|
|
|
// 如果有內容才顯示
|
|
if (this.splashContent) {
|
|
this.countdown = this.duration
|
|
this.showSplash = true
|
|
this.startCountdown()
|
|
}
|
|
} catch (error) {
|
|
console.error('獲取開動頁面內容失敗:', error)
|
|
}
|
|
},
|
|
|
|
// 開始倒計時
|
|
startCountdown() {
|
|
this.timer = setInterval(() => {
|
|
this.countdown--
|
|
if (this.countdown <= 0) {
|
|
this.closeSplash()
|
|
}
|
|
}, 1000)
|
|
},
|
|
|
|
// 關閉開動頁面
|
|
closeSplash() {
|
|
this.showSplash = false
|
|
uni.showTabBar({
|
|
animation: true
|
|
})
|
|
this.clearTimer()
|
|
this.$emit('close')
|
|
},
|
|
|
|
// 清除計時器
|
|
clearTimer() {
|
|
if (this.timer) {
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.splash-screen {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #fff;
|
|
z-index: 9999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.splash-image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.splash-content {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
|
|
// 富文本樣式
|
|
:deep(rich-text) {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.skip-button {
|
|
position: absolute;
|
|
top: 100rpx;
|
|
left: 40rpx;
|
|
background-color: #0000004D;
|
|
|
|
border-radius: 100rpx;
|
|
width: 148rpx ;
|
|
height: 60rpx;
|
|
text-align: center;
|
|
z-index: 10000;
|
|
|
|
|
|
.skip-text {
|
|
font-size: 24rpx;
|
|
line-height: 60rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
// 文字容器定位到左下角
|
|
.text-container {
|
|
position: absolute;
|
|
bottom: 80rpx;
|
|
left: 40rpx;
|
|
z-index: 10001;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
// 英文文字样式
|
|
.english-text {
|
|
font-family: PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 32rpx; // 16px转换为rpx
|
|
line-height: 48rpx; // 24px转换为rpx
|
|
letter-spacing: 0;
|
|
color: #FFFFFF;
|
|
background: transparent;
|
|
}
|
|
|
|
// 中文文字样式
|
|
.chinese-text {
|
|
font-family: PingFang SC;
|
|
// font-weight: 600;
|
|
font-size: 32rpx; // 16px转换为rpx
|
|
line-height: 48rpx; // 24px转换为rpx
|
|
letter-spacing: 0;
|
|
color: #FFFFFF;
|
|
background: transparent;
|
|
}
|
|
|
|
// 確保覆蓋 tabbar
|
|
.splash-screen {
|
|
// 覆蓋所有內容，包括 tabbar
|
|
position: fixed !important;
|
|
z-index: 9999 !important;
|
|
}
|
|
</style>
|