WebIndex/components/card/FullScreenIntroCard.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>