样式微调

src/components/card/FullScreenIntroCard.vue

@@ -1,23 +1,22 @@
 <script lang="ts" setup>
-// 使用 ref 跟踪鼠标的 x 和 y 坐标
+import {computed, ref} from "vue";
-import {computed, reactive, ref} from "vue";
 import {debounce, getAssetURL} from "@/utils/function.ts";
 import SocialMediaWidget from "@/components/widget/SocialMediaWidget.vue";
 
+// 使用 ref 跟踪鼠标的 x 和 y 坐标
 const mouseX = ref(0)
 const mouseY = ref(0)
 // const card = ref<HTMLDivElement | null>(null)
-const rotation = reactive({
+// const rotation = reactive({
-  rotateX: 0,
+//   rotateX: 0,
-  rotateY: 0,
+//   rotateY: 0,
-});
+// });
 
 const typedString = ['Hello, Welcome to this site!^1000', '欢迎访问本网站！^1000']
-
 const littleWidget = [
   {
     icon: ['fab', 'qq'],
-    url: "tencent://message/?uin=1922471905&Site=&Menu=yes",
+    url: "https://qm.qq.com/q/9fhtO8JJt0",
     title: "QQ",
   },
   {
@@ -36,12 +35,13 @@ const littleWidget = [
     title: "Steam"
   }
 ]
+const characterUrl = getAssetURL('hoshino.png')
 
 // 监听鼠标移动
 const handleMouseMove = (event: MouseEvent) => {
   // 根据窗口大小计算鼠标相对于中心位置的偏移比例
-  mouseX.value = (event.clientX / window.innerWidth - 0.5) * 100
+  mouseX.value = -(event.clientX / window.innerWidth - 0.5) * 100
-  mouseY.value = (event.clientY / window.innerHeight - 0.5) * 100
+  mouseY.value = -(event.clientY / window.innerHeight - 0.5) * 100
 }
 
 const debouncedMouseMove = debounce(handleMouseMove, 10)
@@ -51,19 +51,17 @@ const backgroundStyle = computed(() => ({
   backgroundPosition: `${mouseX.value}px ${mouseY.value}px`,
   backgroundImage: `url(${getAssetURL('bg.png')})`,
   backgroundSize: "150px",
-  transition: 'background-position 0.1s',
-  backgroundAttachment: 'fixed'
 }))
 </script>
 
 <template>
   <div :style="backgroundStyle"
-       class="relative flex h-screen w-full items-center justify-center bg-blue-400"
+       class="relative flex h-screen w-full items-center justify-center bg-blue-400 bg-fixed"
        @mousemove="debouncedMouseMove"
   >
-    <div ref="card" :style="{transform: `rotateX(${rotation.rotateX}deg) rotateY(${rotation.rotateY}deg)`}"
+    <div class="relative mx-4 w-full rounded-xl bg-white p-8 transition-transform duration-300 min-h-96
-         class="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"
+                md:mx-0 md:max-w-screen-md"
-         style="perspective: 1000px">
+    >
       <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">CantyOn_ion's</h1>
@@ -99,7 +97,7 @@ const backgroundStyle = computed(() => ({
       <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="getAssetURL('hoshino.png')" alt="" class="float-right h-full" draggable="false"/>
+        <img :src="characterUrl" alt="" class="float-right h-full" draggable="false"/>
       </div>
     </div>
     <!-- 下箭头 -->