93 lines
1.8 KiB
Vue
93 lines
1.8 KiB
Vue
<script setup>
|
|
import { ref, computed, watch, onMounted } from "vue"
|
|
import { useRouter } from 'vue-router'
|
|
|
|
defineProps({
|
|
show: true
|
|
})
|
|
|
|
onMounted(() => {
|
|
})
|
|
|
|
const router = useRouter();
|
|
const goToGenerateImgPage = () => {
|
|
router.push({
|
|
name: 'generateImg'
|
|
})
|
|
}
|
|
|
|
const closeTodoList = () => {
|
|
router.push({
|
|
name: 'selectTemplateV2'
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div :show="show">
|
|
<div class="home-wrapper">
|
|
<div class="scene-item item-1" @click="closeTodoList">
|
|
<img src="../assets/images/close-btn.webp" alt="关闭按钮">
|
|
</div>
|
|
|
|
<div class="scene-item item-2" @click="goToGenerateImgPage">
|
|
<img src="../assets/images/confirm-btn.webp" alt="我知道了">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.home-wrapper {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
min-height: 100vh;
|
|
background-image: url('../assets/images/generate-img-confirm.webp');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center bottom; /* 从底部开始显示，上方可截断 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end; /* 内容向底部对齐 */
|
|
align-items: center;
|
|
position: relative;
|
|
overflow: hidden; /* 隐藏溢出的上方内容 */
|
|
}
|
|
|
|
.scene-item {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
transition: all 0.4s ease;
|
|
overflow: hidden;
|
|
border: 3px solid transparent;
|
|
animation: float 4s ease-in-out infinite;
|
|
z-index: 10;
|
|
}
|
|
|
|
.scene-item:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.scene-item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.item-1 {
|
|
width: 10vw;
|
|
bottom: 160vw;
|
|
right: 4%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.item-2 {
|
|
width: 47vw;
|
|
bottom: max(5vh, 5vw);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
animation-delay: 0s;
|
|
}
|
|
</style> |