overcast404/ocer-cc-old
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

⚡ perf: optimize code structure

Browse Source
This commit is contained in:
guoqi.sun 2024-02-13 18:41:37 +08:00
parent 0111cff3ec
commit 8e776cbc7c
1 changed files with 141 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
src/App.vue
View File

@ -2,8 +2,21 @@
import { onMounted, reactive } from 'vue'
import StarTrails from './components/StarTrails.vue'
// 数据
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: [{
name: 'Home',
description: '个人简介、主页、引导页',
@ -41,18 +54,23 @@ const data = reactive({
description: '前端项目起手架模版',
link: 'https://github.com/sun0225SUN/starter',
}],
navLinks: [{
name: '博 客',
link: 'https://blog.sunguoqi.com',
socialLinks: [{
icon: '<i i-ant-design-github-outlined />',
link: '',
label: 'Github',
}, {
name: '相 册',
link: 'https://camera.sunguoqi.com',
icon: '<i i-ant-design-x-outlined />',
link: '',
label: 'Github',
}, {
name: '运 动',
link: 'https://bicycling.sunguoqi.com',
icon: '<i i-ant-design-youtube-outlined />',
link: '',
label: 'Github',
}, {
name: '留 言',
link: 'https://blog.sunguoqi.com/comments',
icon: '<i i-ant-design-bilibili-outlined />',
link: '',
label: 'Github',
}],
})
@ -70,19 +88,19 @@ onMounted(() => {
</script>
<template>
<div id="background" absolute wh-full left-0 top-0>
<!-- 渐变 -->
<div to-black-500 absolute h-80vh w-full bottom--30vh left-0 from-black bg-gradient-to-t />
<!-- 星轨 -->
<StarTrails />
<!-- 拖底 -->
<div bg-black h-45vh />
<!-- 导航 -->
<nav absolute fixed bottom-4 left-4 z-20>
<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>
{{ item.name }}
</a>
</div>
</nav>
<main bg-black bg-transparent absolute w-full top-0>
<div absolute w-full top-70vh>
<!-- 落地页 -->
<div ml-15vw>
<!-- 主体 -->
<main bg-transparent absolute w-full top-72vh z-10>
<!-- 大标题 -->
<section ml-15vw absolute>
<div text-10 text-white font-bold tracking-widest>
你所热爱的<br>
就是你的生活
@ -97,9 +115,10 @@ onMounted(() => {
小孙同学祝您今天快乐
</div>
</div>
</div>
<!-- 简介内容 -->
<div mx-10vw mt-70>
</section>
<!-- 个人简介 -->
<section mx-9vw mt-110>
<!-- 关于我 -->
<div text-bold mb-4 ml-10 text-8 text-white>
About Me
</div>
@ -122,12 +141,16 @@ onMounted(() => {
</p>
</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 text-bold mb-2 ml-10 text-8 text-white>
My Skills
</div> -->
<!-- 我的项目 -->
<div text-bold mb-2 ml-10 text-8 text-white>
Projects
</div>
@ -145,61 +168,24 @@ onMounted(() => {
</a>
</div>
</div>
<!-- 社交链接 -->
<div text-bold mb-2 ml-10 text-8 text-white>
Find Me
</div>
<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>
<a href="https://github.com/sun0225SUN">
<div mb-1 text-white f-c-c>
<i i-ant-design-github-outlined />
</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 :href="item.link">
<div mb-1 text-white f-c-c v-html="item.icon" />
<div text-bold opacity-75 text-white>{{ item.label }}</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- 底部 -->
<footer>
<div mt-20 f-c-c class="text-white/60" hover:skew-y-1>
<i i-ant-design-environment-outlined mr-1 />
@ -211,16 +197,15 @@ onMounted(() => {
<div>© 2024 小孙同学</div>
</div>
</footer>
</div>
</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>
<a class="text-white" :href="item.link" opacity-75 tracking-widest hover:opacity-100>
{{ item.name }}
</a>
<!-- 背景 -->
<div id="background" absolute wh-full left-0 top-0 z-0>
<!-- 渐变阴影 -->
<div to-black-500 absolute h-80vh w-full bottom--30vh left-0 from-black bg-gradient-to-t />
<!-- 星轨背景 -->
<StarTrails pb-45vh bg-black />
</div>
</nav>
</template>
<style lang="scss" scoped>