136 lines
3.5 KiB
Vue
136 lines
3.5 KiB
Vue
<script lang="ts" setup>
|
||
import { computed, ref } from 'vue'
|
||
|
||
// 使用 ref 跟踪鼠标的 x 和 y 坐标
|
||
const mouseX = ref(0),
|
||
mouseY = ref(0),
|
||
|
||
typedString = ['Hello, Welcome to this site!^1000', '欢迎访问本网站！^1000'],
|
||
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',
|
||
},
|
||
],
|
||
|
||
// 监听鼠标移动
|
||
handleMouseMove = (event: MouseEvent) => {
|
||
// 根据窗口大小计算鼠标相对于中心位置的偏移比例
|
||
mouseX.value = -(event.clientX / window.innerWidth - 0.5) * 100
|
||
mouseY.value = -(event.clientY / window.innerHeight - 0.5) * 100
|
||
},
|
||
|
||
debouncedMouseMove = debounce(handleMouseMove, 5),
|
||
|
||
// 根据鼠标位置动态调整背景图像的位置
|
||
backgroundStyle = computed(() => ({
|
||
backgroundPosition: `${mouseX.value}px ${mouseY.value}px`,
|
||
}))
|
||
|
||
onMounted(() => {
|
||
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
:style="backgroundStyle"
|
||
class="relative flex h-svh 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"
|
||
:back-speed="30"
|
||
:loop="true"
|
||
:show-cursor="true"
|
||
:strings="typedString"
|
||
:type-speed="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>
|