hflllll
1 month ago
13 changed files with 423 additions and 116 deletions
Unified View
Diff Options
-
+11 -2mixins/config.js
-
+205 -0pages/components/SplashScreen.vue
-
+6 -3pages/index/desk.vue
-
+14 -0pages/index/home.vue
-
+6 -2pages/index/user.vue
-
+13 -2stores/index.js
-
+3 -1subPages/home/book.vue
-
+3 -4subPages/home/directory.vue
-
+4 -67subPages/home/search.vue
-
+11 -1subPages/login/login.vue
-
+49 -18subPages/login/userInfo.vue
-
+67 -16subPages/user/profile.vue
-
+31 -0uni.scss
+ 11
- 2
mixins/config.js
View File
+ 205
- 0
pages/components/SplashScreen.vue
View File
| @ -0,0 +1,205 @@ | |||||
| <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> | |||||