chore: App.vue updates
This commit is contained in:
37
src/App.vue
37
src/App.vue
@@ -40,6 +40,7 @@ const promptToast = ref('')
|
||||
const showPromptToast = ref(false)
|
||||
const showIntro = ref(false)
|
||||
const introWatched = ref(false)
|
||||
const introStarted = ref(false)
|
||||
const introVideoRef = ref<HTMLVideoElement | null>(null)
|
||||
const menuVideoRef = ref<HTMLVideoElement | null>(null)
|
||||
const showTopBar = ref(true)
|
||||
@@ -87,6 +88,15 @@ function onIntroEnded() {
|
||||
showIntro.value = false
|
||||
}
|
||||
|
||||
function onIntroClick() {
|
||||
if (!introStarted.value) {
|
||||
introStarted.value = true
|
||||
introVideoRef.value?.play().catch(() => {})
|
||||
} else if (introWatched.value) {
|
||||
skipIntro()
|
||||
}
|
||||
}
|
||||
|
||||
function skipIntro() {
|
||||
saveSystem.markWatched('__intro__')
|
||||
showIntro.value = false
|
||||
@@ -292,9 +302,10 @@ init()
|
||||
<div class="app-container">
|
||||
<div v-if="loading" class="loading">{{ t('ui.loading') }}</div>
|
||||
<template v-else>
|
||||
<div v-if="showIntro" class="intro-overlay" @click="skipIntro">
|
||||
<video ref="introVideoRef" :src="store.introVideo" class="intro-video" autoplay @ended="onIntroEnded"></video>
|
||||
<button v-if="introWatched" class="intro-skip-btn" @click.stop="skipIntro">{{ t('ui.skip') }}</button>
|
||||
<div v-if="showIntro" class="intro-overlay" @click="onIntroClick">
|
||||
<video ref="introVideoRef" :src="store.introVideo" class="intro-video" @ended="onIntroEnded"></video>
|
||||
<div v-if="!introStarted" class="intro-start-prompt">点击开始</div>
|
||||
<button v-if="introWatched && introStarted" class="intro-skip-btn" @click.stop="skipIntro">{{ t('ui.skip') }}</button>
|
||||
</div>
|
||||
|
||||
<div v-if="store.menuVideo && (!started || store.gameEnded)" class="menu-bg">
|
||||
@@ -548,6 +559,26 @@ html, body {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.intro-start-prompt {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 18px 48px;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 6px;
|
||||
letter-spacing: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.intro-start-prompt:hover {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.menu-bg {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
|
||||
Reference in New Issue
Block a user