106 lines
3.4 KiB
Vue
106 lines
3.4 KiB
Vue
|
<script lang="ts" setup>
|
|||
|
|
import {computed, ref} from "vue";
|
|||
|
|
|
|||
|
|
// 使用 ref 跟踪鼠标的 x 和 y 坐标
|
|||
|
|
const mouseX = ref(0)
|
|||
|
|
const mouseY = ref(0)
|
|||
|
|
|
|||
|
|
const typedString = ['Hello, Welcome to this site!^1000', '欢迎访问本网站！^1000']
|
|||
|
|
const littleWidget = [
|
|||
|
|
{
|
|||
|
|
icon: ['fab', 'qq'],
|
|||
|
|
url: "https://qm.qq.com/q/9fhtO8JJt0",
|
|||
|
|
title: "QQ",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: ['fab', 'github-alt'],
|
|||
|
|
url: "https://github.com/Aurora1949",
|
|||
|
|
title: "Github",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: ['fab', 'weibo'],
|
|||
|
|
url: "https://weibo.com/u/7923648952",
|
|||
|
|
title: "微博"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: ['fab', 'steam-symbol'],
|
|||
|
|
url: "https://steamcommunity.com/id/cantyonion/",
|
|||
|
|
title: "Steam"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// const characterUrl = "~/assets/images/common/hoshino.png"
|
|||
|
|
|
|||
|
|
// 监听鼠标移动
|
|||
|
|
const handleMouseMove = (event: MouseEvent) => {
|
|||
|
|
// 根据窗口大小计算鼠标相对于中心位置的偏移比例
|
|||
|
|
mouseX.value = -(event.clientX / window.innerWidth - 0.5) * 100
|
|||
|
|
mouseY.value = -(event.clientY / window.innerHeight - 0.5) * 100
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const debouncedMouseMove = debounce(handleMouseMove, 5)
|
|||
|
|
|
|||
|
|
// 根据鼠标位置动态调整背景图像的位置
|
|||
|
|
const backgroundStyle = computed(() => ({
|
|||
|
|
backgroundPosition: `${mouseX.value}px ${mouseY.value}px`
|
|||
|
|
}))
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div :style="backgroundStyle"
|
|||
|
|
class="relative flex h-screen w-full items-center justify-center bg-blue-400 bg-fixed bg min-h-[40rem]"
|
|||
|
|
@mousemove="debouncedMouseMove"
|
|||
|
|
>
|
|||
|
|
<div class="relative mx-4 w-full rounded-xl bg-white p-8 transition-transform duration-300 min-h-96
|
|||
|
|
md:mx-0 md:max-w-screen-md"
|
|||
|
|
>
|
|||
|
|
<p class="text-gray-500">你好！欢迎来到</p>
|
|||
|
|
<div class="relative mt-4 h-72 text-5xl text-blue-400 transition-all md:text-6xl lg:text-7xl">
|
|||
|
|
<h1 style="font-family: BaconyScript,sans-serif">CantyOni_on's</h1>
|
|||
|
|
<h1 class="font-bold">超级基地</h1>
|
|||
|
|
<div class="absolute -z-10 text-blue-100 top-[3px] left-[3px]">
|
|||
|
|
<h1 class="" style="font-family: BaconyScript,sans-serif">CantyOni_on's</h1>
|
|||
|
|
<h1 class="font-bold">超级基地</h1>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- TypedJS -->
|
|||
|
|
<div class="flex flex-row text-gray-500">
|
|||
|
|
<vue-typed :auto-insert-css="true" :backSpeed="30"
|
|||
|
|
:loop="true"
|
|||
|
|
:showCursor="true"
|
|||
|
|
:strings="typedString"
|
|||
|
|
:typeSpeed="50"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 社交媒体组件 -->
|
|||
|
|
<div class="flex flex-row text-gray-500">
|
|||
|
|
<widget-social-media-widget v-for="item in littleWidget"
|
|||
|
|
:key="item.url"
|
|||
|
|
:icon="item.icon"
|
|||
|
|
:title="item.title"
|
|||
|
|
:url="item.url"
|
|||
|
|
class="h-10 w-10"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 人物背景 -->
|
|||
|
|
<div class="invisible absolute top-0 -right-6 -bottom-6 opacity-0 transition-all
|
|||
|
|
sm:visible sm:opacity-100 lg:-top-28 lg:-right-28 lg:-bottom-10"
|
|||
|
|
>
|
|||
|
|
<img src="~/assets/images/common/hoshino.png" alt="" class="float-right h-full" draggable="false"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 下箭头 -->
|
|||
|
|
<font-awesome-icon :icon="['fas', 'chevron-down']" beat class="absolute bottom-12 h-auto w-6 text-white"/>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.bg {
|
|||
|
|
background-image: url("assets/images/common/bg.png");
|
|||
|
|
background-size: 150px 150px;
|
|||
|
|
}
|
|||
|
|
</style>
|