|
@ -1,13 +1,30 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="app-container home"> |
|
|
<div class="app-container home"> |
|
|
<video autoplay loop muted id="bgvid" class="home-page-video"> |
|
|
<video ref="videoPlayer" autoplay loop muted id="bgvid" class="home-page-video"> |
|
|
<source src="../assets/video/homepage.mp4" type="video/mp4"> |
|
|
<source src="../assets/video/homepage.mp4" type="video/mp4"> |
|
|
</video> |
|
|
</video> |
|
|
|
|
|
<div class="middlewight">欢迎使用运营管理平台</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script setup name="Index"> |
|
|
<script setup name="Index"> |
|
|
|
|
|
import { onMounted, watch, ref } from 'vue'; |
|
|
|
|
|
import { useRoute } from 'vue-router'; |
|
|
|
|
|
const { proxy } = getCurrentInstance(); |
|
|
const version = ref('3.8.5') |
|
|
const version = ref('3.8.5') |
|
|
|
|
|
const route = useRoute(); |
|
|
|
|
|
const videoElement = ref(null); |
|
|
|
|
|
onMounted(() => { |
|
|
|
|
|
videoElement.value = proxy.$refs.videoPlayer; |
|
|
|
|
|
if (videoElement.value) { |
|
|
|
|
|
videoElement.value.play(); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
watch(() => route.path, () => { |
|
|
|
|
|
if (videoElement.value) { |
|
|
|
|
|
videoElement.value.play(); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
function goTarget(url) { |
|
|
function goTarget(url) { |
|
|
window.open(url, '__blank') |
|
|
window.open(url, '__blank') |
|
@ -87,8 +104,17 @@ function goTarget(url) { |
|
|
transform: translateX(-50%) translateY(-50%); |
|
|
transform: translateX(-50%) translateY(-50%); |
|
|
z-index: -100; |
|
|
z-index: -100; |
|
|
} |
|
|
} |
|
|
|
|
|
.middlewight{ |
|
|
|
|
|
color:#eee; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 50%; |
|
|
|
|
|
left: 50%; |
|
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
|
font-size:88px; |
|
|
|
|
|
font-family: cursive; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|