⚡ perf: optimize code structure
This commit is contained in:
guoqi.sun
parent
0111cff3ec
commit
8e776cbc7c
139
src/App.vue
139
src/App.vue
@ -2,8 +2,21 @@
|
|||||||
import { onMounted, reactive } from 'vue'
|
import { onMounted, reactive } from 'vue'
|
||||||
import StarTrails from './components/StarTrails.vue'
|
import StarTrails from './components/StarTrails.vue'
|
||||||
|
|
||||||
// 数据
|
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
|
navLinks: [{
|
||||||
|
name: '博 客',
|
||||||
|
link: 'https://blog.sunguoqi.com',
|
||||||
|
}, {
|
||||||
|
name: '相 册',
|
||||||
|
link: 'https://camera.sunguoqi.com',
|
||||||
|
}, {
|
||||||
|
name: '运 动',
|
||||||
|
link: 'https://bicycling.sunguoqi.com',
|
||||||
|
}, {
|
||||||
|
name: '留 言',
|
||||||
|
link: 'https://blog.sunguoqi.com/comments',
|
||||||
|
}],
|
||||||
|
|
||||||
myProjects: [{
|
myProjects: [{
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
description: '个人简介、主页、引导页',
|
description: '个人简介、主页、引导页',
|
||||||
@ -41,18 +54,23 @@ const data = reactive({
|
|||||||
description: '前端项目起手架模版',
|
description: '前端项目起手架模版',
|
||||||
link: 'https://github.com/sun0225SUN/starter',
|
link: 'https://github.com/sun0225SUN/starter',
|
||||||
}],
|
}],
|
||||||
navLinks: [{
|
|
||||||
name: '博 客',
|
socialLinks: [{
|
||||||
link: 'https://blog.sunguoqi.com',
|
icon: '<i i-ant-design-github-outlined />',
|
||||||
|
link: '',
|
||||||
|
label: 'Github',
|
||||||
}, {
|
}, {
|
||||||
name: '相 册',
|
icon: '<i i-ant-design-x-outlined />',
|
||||||
link: 'https://camera.sunguoqi.com',
|
link: '',
|
||||||
|
label: 'Github',
|
||||||
}, {
|
}, {
|
||||||
name: '运 动',
|
icon: '<i i-ant-design-youtube-outlined />',
|
||||||
link: 'https://bicycling.sunguoqi.com',
|
link: '',
|
||||||
|
label: 'Github',
|
||||||
}, {
|
}, {
|
||||||
name: '留 言',
|
icon: '<i i-ant-design-bilibili-outlined />',
|
||||||
link: 'https://blog.sunguoqi.com/comments',
|
link: '',
|
||||||
|
label: 'Github',
|
||||||
}],
|
}],
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -70,19 +88,19 @@ onMounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="background" absolute wh-full left-0 top-0>
|
<!-- 导航 -->
|
||||||
<!-- 渐变 -->
|
<nav absolute fixed bottom-4 left-4 z-20>
|
||||||
<div to-black-500 absolute h-80vh w-full bottom--30vh left-0 from-black bg-gradient-to-t />
|
<div v-for="(item, index) in data.navLinks" :key="index" my-6 text-3 text-white wv>
|
||||||
<!-- 星轨 -->
|
<a :href="item.link" opacity-75 text-white tracking-widest hover:opacity-100>
|
||||||
<StarTrails />
|
{{ item.name }}
|
||||||
<!-- 拖底 -->
|
</a>
|
||||||
<div bg-black h-45vh />
|
|
||||||
</div>
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<main bg-black bg-transparent absolute w-full top-0>
|
<!-- 主体 -->
|
||||||
<div absolute w-full top-70vh>
|
<main bg-transparent absolute w-full top-72vh z-10>
|
||||||
<!-- 落地页 -->
|
<!-- 大标题 -->
|
||||||
<div ml-15vw>
|
<section ml-15vw absolute>
|
||||||
<div text-10 text-white font-bold tracking-widest>
|
<div text-10 text-white font-bold tracking-widest>
|
||||||
你所热爱的<br>
|
你所热爱的<br>
|
||||||
就是你的生活
|
就是你的生活
|
||||||
@ -97,9 +115,10 @@ onMounted(() => {
|
|||||||
小孙同学祝您今天快乐
|
小孙同学祝您今天快乐
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<!-- 简介内容 -->
|
<!-- 个人简介 -->
|
||||||
<div mx-10vw mt-70>
|
<section mx-9vw mt-110>
|
||||||
|
<!-- 关于我 -->
|
||||||
<div text-bold mb-4 ml-10 text-8 text-white>
|
<div text-bold mb-4 ml-10 text-8 text-white>
|
||||||
About Me
|
About Me
|
||||||
</div>
|
</div>
|
||||||
@ -122,12 +141,16 @@ onMounted(() => {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img hidden rounded-full w-25 md:block src="https://blog.sunguoqi.com/images/avatar.jpg" alt="">
|
<img hidden rounded-full w-25 md:block src="https://blog.sunguoqi.com/images/avatar.jpg" alt="avatar">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 我的技能 -->
|
||||||
<!-- <div text-bold mb-2 ml-10 text-8 text-white>
|
<!-- <div text-bold mb-2 ml-10 text-8 text-white>
|
||||||
My Skills
|
My Skills
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
|
<!-- 我的项目 -->
|
||||||
<div text-bold mb-2 ml-10 text-8 text-white>
|
<div text-bold mb-2 ml-10 text-8 text-white>
|
||||||
Projects
|
Projects
|
||||||
</div>
|
</div>
|
||||||
@ -145,61 +168,24 @@ onMounted(() => {
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 社交链接 -->
|
||||||
<div text-bold mb-2 ml-10 text-8 text-white>
|
<div text-bold mb-2 ml-10 text-8 text-white>
|
||||||
Find Me
|
Find Me
|
||||||
</div>
|
</div>
|
||||||
<div flex flex-wrap justify-between>
|
<div flex flex-wrap justify-between>
|
||||||
<div mx-10 my-4 class="basis-1/6" hover:skew-y-1>
|
<div v-for="(item, index) in data.socialLinks" :key="index" mx-10 my-4 class="basis-1/6" hover:skew-y-1>
|
||||||
<div p-2 class="bg-white/5 hover:bg-white/10" rounded-lg shadow-md flex-col justify-between items-center backdrop-blur-3xl backdrop-opacity-60 hover:skew-y-1 hover:backdrop-opacity-100>
|
<div p-2 class="bg-white/5 hover:bg-white/10" rounded-lg shadow-md flex-col justify-between items-center backdrop-blur-3xl backdrop-opacity-60 hover:skew-y-1 hover:backdrop-opacity-100>
|
||||||
<a href="https://github.com/sun0225SUN">
|
<a :href="item.link">
|
||||||
<div mb-1 text-white f-c-c>
|
<div mb-1 text-white f-c-c v-html="item.icon" />
|
||||||
<i i-ant-design-github-outlined />
|
<div text-bold opacity-75 text-white>{{ item.label }}</div>
|
||||||
</div>
|
|
||||||
<div text-bold opacity-75 text-white>
|
|
||||||
Github
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div mx-10 my-4 class="basis-1/6" hover:skew-y-1>
|
|
||||||
<div p-2 class="bg-white/5 hover:bg-white/10" rounded-lg shadow-md flex-col justify-between items-center backdrop-blur-3xl backdrop-opacity-60 hover:skew-y-1 hover:backdrop-opacity-100>
|
|
||||||
<a href="https://twitter.com/sun0225SUN">
|
|
||||||
<div mb-1 text-white f-c-c>
|
|
||||||
<i i-ant-design-x-outlined />
|
|
||||||
</div>
|
|
||||||
<div text-bold opacity-75 text-white>
|
|
||||||
Twitter
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div mx-10 my-4 class="basis-1/6" hover:skew-y-1>
|
|
||||||
<div p-2 class="bg-white/5 hover:bg-white/10" rounded-lg shadow-md flex-col justify-between items-center backdrop-blur-3xl backdrop-opacity-60 hover:skew-y-1 hover:backdrop-opacity-100>
|
|
||||||
<a href="https://youtube.com/@sun0225SUN">
|
|
||||||
<div mb-1 text-white f-c-c>
|
|
||||||
<i i-ant-design-youtube-outlined />
|
|
||||||
</div>
|
|
||||||
<div text-bold opacity-75 text-white>
|
|
||||||
YouTube
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div mx-10 my-4 class="basis-1/6" hover:skew-y-1>
|
|
||||||
<div p-2 class="bg-white/5 hover:bg-white/10" rounded-lg shadow-md flex-col justify-between items-center backdrop-blur-3xl backdrop-opacity-60 hover:skew-y-1 hover:backdrop-opacity-100>
|
|
||||||
<a href="https://space.bilibili.com/448488855/">
|
|
||||||
<div mb-1 text-white f-c-c>
|
|
||||||
<i i-ant-design-bilibili-outlined />
|
|
||||||
</div>
|
|
||||||
<div text-bold opacity-75 text-white>
|
|
||||||
Bilibili
|
|
||||||
</div>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
|
<!-- 底部 -->
|
||||||
<footer>
|
<footer>
|
||||||
<div mt-20 f-c-c class="text-white/60" hover:skew-y-1>
|
<div mt-20 f-c-c class="text-white/60" hover:skew-y-1>
|
||||||
<i i-ant-design-environment-outlined mr-1 />
|
<i i-ant-design-environment-outlined mr-1 />
|
||||||
@ -211,16 +197,15 @@ onMounted(() => {
|
|||||||
<div>© 2024 小孙同学</div>
|
<div>© 2024 小孙同学</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<nav absolute fixed bottom-4 left-4>
|
<!-- 背景 -->
|
||||||
<div v-for="(item, index) in data.navLinks" :key="index" my-6 text-3 text-white wv>
|
<div id="background" absolute wh-full left-0 top-0 z-0>
|
||||||
<a class="text-white" :href="item.link" opacity-75 tracking-widest hover:opacity-100>
|
<!-- 渐变阴影 -->
|
||||||
{{ item.name }}
|
<div to-black-500 absolute h-80vh w-full bottom--30vh left-0 from-black bg-gradient-to-t />
|
||||||
</a>
|
<!-- 星轨背景 -->
|
||||||
|
<StarTrails pb-45vh bg-black />
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user