refactor(home): 将首页组件拆分为独立模块并优化代码结构

将首页的加载动画、介绍动画和英雄区域拆分为独立的组件文件
移除index.vue中冗余的样式和逻辑,通过组件引用方式重构
优化代码组织结构,提高可维护性
This commit is contained in:
2026-04-26 23:07:37 +08:00
parent 8b5f6720cd
commit 1bc881994f
4 changed files with 400 additions and 350 deletions
+88
View File
@@ -0,0 +1,88 @@
<script setup lang="ts">
import { ref } from 'vue'
const introTitle = 'ArcticNewOne'
const introLetters = introTitle.split('')
const introRef = ref<HTMLElement | null>(null)
const introTitleRef = ref<HTMLElement | null>(null)
defineExpose({
introRef,
introTitleRef
})
</script>
<template>
<div ref="introRef" class="hero-intro" aria-hidden="true">
<h1 ref="introTitleRef" class="hero-intro-title" :aria-label="introTitle" v-once>
<span class="hero-intro-word">
<span
v-for="(letter, index) in introLetters"
:key="`${letter}-${index}`"
class="hero-intro-char-wrap"
>
<span class="hero-intro-char">{{ letter }}</span>
</span>
<span class="hero-intro-tm">TM</span>
</span>
</h1>
</div>
</template>
<style scoped>
.hero-intro {
position: fixed;
inset: 0;
z-index: 80;
display: grid;
place-items: center;
overflow: hidden;
color: #fff;
background: #000;
opacity: 0;
visibility: hidden;
will-change: transform;
}
.hero-intro-title {
display: flex;
margin: 0;
font-size: clamp(36px, 6.2vw, 104px);
font-weight: 700;
line-height: 0.9;
letter-spacing: -0.07em;
white-space: nowrap;
}
.hero-intro-word {
position: relative;
display: inline-flex;
}
.hero-intro-char-wrap,
.hero-intro-char {
display: inline-block;
}
.hero-intro-char-wrap {
position: relative;
overflow: hidden;
}
.hero-intro-char {
will-change: transform;
}
.hero-intro-tm {
position: absolute;
left: calc(100% + 0.12em);
top: 0.08em;
font-size: 0.13em;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
opacity: 0;
visibility: hidden;
}
</style>