mirror of https://gitee.com/lmlz_0/dc-ui.git
ljlong_2630
1 year ago
2 changed files with 122 additions and 96 deletions
@ -1,94 +1,120 @@ |
|||
<template> |
|||
<div class="app-container home"> |
|||
<video autoplay loop muted id="bgvid" class="home-page-video"> |
|||
<source src="../assets/video/homepage.mp4" type="video/mp4"> |
|||
</video> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="Index"> |
|||
const version = ref('3.8.5') |
|||
|
|||
function goTarget(url) { |
|||
window.open(url, '__blank') |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.home { |
|||
blockquote { |
|||
padding: 10px 20px; |
|||
margin: 0 0 20px; |
|||
font-size: 17.5px; |
|||
border-left: 5px solid #eee; |
|||
<template> |
|||
<div class="app-container home"> |
|||
<video ref="videoPlayer" autoplay loop muted id="bgvid" class="home-page-video"> |
|||
<source src="../assets/video/homepage.mp4" type="video/mp4"> |
|||
</video> |
|||
<div class="middlewight">欢迎使用运营管理平台</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<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 route = useRoute(); |
|||
const videoElement = ref(null); |
|||
onMounted(() => { |
|||
videoElement.value = proxy.$refs.videoPlayer; |
|||
if (videoElement.value) { |
|||
videoElement.value.play(); |
|||
} |
|||
hr { |
|||
margin-top: 20px; |
|||
margin-bottom: 20px; |
|||
border: 0; |
|||
border-top: 1px solid #eee; |
|||
}); |
|||
watch(() => route.path, () => { |
|||
if (videoElement.value) { |
|||
videoElement.value.play(); |
|||
} |
|||
.col-item { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
ul { |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
|
|||
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif; |
|||
font-size: 13px; |
|||
color: #676a6c; |
|||
overflow-x: hidden; |
|||
|
|||
ul { |
|||
list-style-type: none; |
|||
} |
|||
|
|||
h4 { |
|||
margin-top: 0px; |
|||
} |
|||
|
|||
h2 { |
|||
margin-top: 10px; |
|||
font-size: 26px; |
|||
font-weight: 100; |
|||
} |
|||
|
|||
p { |
|||
margin-top: 10px; |
|||
|
|||
b { |
|||
font-weight: 700; |
|||
} |
|||
} |
|||
|
|||
.update-log { |
|||
ol { |
|||
display: block; |
|||
list-style-type: decimal; |
|||
margin-block-start: 1em; |
|||
margin-block-end: 1em; |
|||
margin-inline-start: 0; |
|||
margin-inline-end: 0; |
|||
padding-inline-start: 40px; |
|||
} |
|||
} |
|||
|
|||
.home-page-video{ |
|||
position: fixed; |
|||
top: 50%; |
|||
left: 50%; |
|||
min-width: 100%; |
|||
min-height: 100%; |
|||
width: auto; |
|||
height: auto; |
|||
transform: translateX(-50%) translateY(-50%); |
|||
z-index: -100; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
|
|||
|
|||
}); |
|||
|
|||
function goTarget(url) { |
|||
window.open(url, '__blank') |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.home { |
|||
blockquote { |
|||
padding: 10px 20px; |
|||
margin: 0 0 20px; |
|||
font-size: 17.5px; |
|||
border-left: 5px solid #eee; |
|||
} |
|||
hr { |
|||
margin-top: 20px; |
|||
margin-bottom: 20px; |
|||
border: 0; |
|||
border-top: 1px solid #eee; |
|||
} |
|||
.col-item { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
ul { |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
|
|||
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif; |
|||
font-size: 13px; |
|||
color: #676a6c; |
|||
overflow-x: hidden; |
|||
|
|||
ul { |
|||
list-style-type: none; |
|||
} |
|||
|
|||
h4 { |
|||
margin-top: 0px; |
|||
} |
|||
|
|||
h2 { |
|||
margin-top: 10px; |
|||
font-size: 26px; |
|||
font-weight: 100; |
|||
} |
|||
|
|||
p { |
|||
margin-top: 10px; |
|||
|
|||
b { |
|||
font-weight: 700; |
|||
} |
|||
} |
|||
|
|||
.update-log { |
|||
ol { |
|||
display: block; |
|||
list-style-type: decimal; |
|||
margin-block-start: 1em; |
|||
margin-block-end: 1em; |
|||
margin-inline-start: 0; |
|||
margin-inline-end: 0; |
|||
padding-inline-start: 40px; |
|||
} |
|||
} |
|||
|
|||
.home-page-video{ |
|||
position: fixed; |
|||
top: 50%; |
|||
left: 50%; |
|||
min-width: 100%; |
|||
min-height: 100%; |
|||
width: auto; |
|||
height: auto; |
|||
transform: translateX(-50%) translateY(-50%); |
|||
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> |
Loading…
Reference in new issue