Skip to content

Commit

Permalink
✨ feat: add nav and others
Browse files Browse the repository at this point in the history
  • Loading branch information
@sun0225SUN
sun0225SUN committed Feb 10, 2024
1 parent 90d19c8 commit 3d082eb
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 7 deletions.
127 changes: 120 additions & 7 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,138 @@
<script setup>
import StarTrails from './components/StarTrails.vue'
window.addEventListener('scroll', () => {
const bg = document.getElementById('background')
const scrollTop = window.scrollY
if (scrollTop > 0.7 * window.innerHeight)
bg.classList.add('fixed')
else
bg.classList.remove('fixed')
})
</script>

<template>
<div absolute wh-full left-0 top-0>
<div id="background" absolute wh-full left-0 top-0>
<!-- 渐变 -->
<div to-black-500 absolute h-80vh w-full class="bottom-[-30vh]" left-0 from-black bg-gradient-to-t />
<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 />
</div>

<div bg-black bg-transparent f-c-c absolute h-100vh w-full top-0>
<div text-white>
<div>
正在开发中...
<main bg-black bg-transparent absolute w-full top-0>
<div absolute top-70vh>
<div ml-15vw>
<div text-10 text-white font-bold tracking-widest>
你所热爱的<br>
就是你的生活
</div>
<div flex items-center>
<div mr-4 flex gap-2>
<div bg-red rounded-full h-3 w-3 />
<div bg-yellow rounded-full h-3 w-3 />
<div bg-green rounded-full h-3 w-3 />
</div>
<div text-4 text-white>
小孙同学祝您今天快乐
</div>
</div>
</div>
<div ml-50vw mt-50>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
<h1 text-white>
测试文本，占位
</h1>
</div>
</div>
</div>
</main>

<nav absolute fixed bottom-0 left-0>
<div>
<div mb-8 ml-2 flex-col gap-8 justify-center items-center>
<div text-3 text-white wv>
<a class="text-white" opacity-75 href="https://blog.sunguoqi.com" tracking-widest>博 客</a>
</div>
<div text-3 text-white wv>
<a class="text-white" opacity-75 href="https://camera.sunguoqi.com" tracking-widest>相 册</a>
</div>
<div text-3 text-white wv>
<a class="text-white" opacity-75 href="https://bicycling.sunguoqi.com" tracking-widest>运 动</a>
</div>
<div text-3 text-white wv>
<a class="text-white" opacity-75 href="https://blog.sunguoqi.com/comments" tracking-widest>留 言 板</a>
</div>
</div>
</div>
</nav>
</template>

<style lang="scss" scoped>
#background.fixed {
position: fixed;
top: -70%;
}
</style>
4 changes: 4 additions & 0 deletions src/assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,7 @@ body {
line-height: 1.6;
color: #333;
}

a {
text-decoration: none;
}
4 changes: 4 additions & 0 deletions uno.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ export default defineConfig({
// 排版
presetTypography(),
],
rules: [
// 自定义规则
['wv', { 'writing-mode': 'vertical-rl' }],
],
shortcuts: [
['wh-full', 'w-full h-full'],
['f-b-c', 'flex justify-between items-center'],
Expand Down

0 comments on commit 3d082eb

Please sign in to comment.