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

✨ feat: add nav and others

Browse Source
This commit is contained in:
guoqi.sun 2024-02-11 06:44:17 +08:00
parent 90d19c852f
commit 3d082eb458
3 changed files with 128 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
src/App.vue
View File

@ -1,25 +1,138 @@
<script setup> <script setup>
import StarTrails from './components/StarTrails.vue' 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> </script>
<template> <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 /> <StarTrails />
<!-- 拖底 --> <!-- 拖底 -->
<div bg-black h-45vh /> <div bg-black h-45vh />
</div> </div>
<div bg-black bg-transparent f-c-c absolute h-100vh w-full top-0> <main bg-black bg-transparent absolute w-full top-0>
<div text-white> <div absolute top-70vh>
<div> <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> </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> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
#background.fixed {
position: fixed;
top: -70%;
}
</style> </style>

4
src/assets/css/main.css
View File

@ -13,3 +13,7 @@ body {
line-height: 1.6; line-height: 1.6;
color: #333; color: #333;
} }
a {
text-decoration: none;
}

4
uno.config.js
View File

@ -14,6 +14,10 @@ export default defineConfig({
// 排版 // 排版
presetTypography(), presetTypography(),
], ],
rules: [
// 自定义规则
['wv', { 'writing-mode': 'vertical-rl' }],
],
shortcuts: [ shortcuts: [
['wh-full', 'w-full h-full'], ['wh-full', 'w-full h-full'],
['f-b-c', 'flex justify-between items-center'], ['f-b-c', 'flex justify-between items-center'],