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>
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
src/assets/css/main.css
View File

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

4
uno.config.js
View File

@ -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'],