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

feat: 样式。

Browse Source
This commit is contained in:
吴阴天 2024-03-02 09:27:45 +08:00
parent e77df9b9fc
commit 780fd0ccd4
1 changed files with 63 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/App.vue
View File

@ -7,7 +7,7 @@ const BeianLink = "https://beian.miit.gov.cn/";
const data = reactive({
titleList: [
"给时光以生命<br/>给岁月以文明",
"人生如宇宙<br/>虽深邃未知<br/>但星辰闪烁寓意希望"
"人生如宇宙<br/>虽深邃未知<br/>但星辰闪烁寓意希望",
],
navLinks: [
{
@ -62,7 +62,7 @@ const data = reactive({
{
name: "Gitea",
description: "代码仓库",
link: "https://gitea.ocer.cc",
link: "https://gitea.ocer.cc/explore/repos",
},
{
name: "more",
@ -120,11 +120,18 @@ onMounted(() => {
</nav> -->
<!-- 主体 -->
<main bg-transparent absolute w-full top-75vh z-10>
<main bg-transparent absolute w-full z-10 id="main">
<!-- 大标题 -->
<section ml-15vw absolute>
<div text-10 text-white font-bold tracking-widest v-html="data.titleList[Math.floor(Math.random() * data.titleList.length)]
" />
<section ml-10vw absolute>
<div
text-10
text-white
font-bold
tracking-widest
v-html="
data.titleList[Math.floor(Math.random() * data.titleList.length)]
"
/>
<div flex items-center>
<div mr-4 flex gap-2>
<div bg-red rounded-full h-3 w-3 />
@ -144,7 +151,9 @@ onMounted(() => {
<div class="text-white/90">
<p leading-10>一个浪漫现实主义作家</p>
<p text-6 leading-10>我始终在创作一本名为《<b>人生</b>》的书</p>
<p text-7 leading-10><b>科技</b>、<b>音乐</b>、<b>哲学</b>是书中的主旋律</p>
<p text-7 leading-10>
<b>科技</b>、<b>音乐</b>、<b>哲学</b>是书中的主旋律
</p>
<p text-6 leading-10>
<b>浪漫</b>、<b>可爱</b>、<b>阳光</b>是我最喜欢的形容词
</p>
@ -154,16 +163,41 @@ onMounted(() => {
<p leading-10>或许是一段新旅途的开始......</p>
</div>
<img hidden rounded-full h-25 w-25 transition md:block hover:-translate-y--2
src="https://img.ocer.cc/images/2024/02/24/3cH8.th.jpeg" alt="avatar" />
<img
hidden
rounded-full
h-25
w-25
transition
md:block
hover:-translate-y--2
src="https://img.ocer.cc/images/2024/02/24/3cH8.th.jpeg"
alt="avatar"
/>
</div>
<!-- <div text-bold mb-2 ml-10 text-8 text-white>Projects</div> -->
<!-- <div mb-10 flex flex-wrap justify-between> -->
<div mb-10 flex flex-wrap>
<div v-for="(item, index) in data.myProjects" :key="index" mx-10 my-4 class="basis-3/4 md:basis-1/6">
<div
v-for="(item, index) in data.myProjects"
:key="index"
mx-10
my-4
class="basis-3/4 md:basis-1/6"
>
<a :href="item.link" target="_blank">
<div class="bg-white/5 hover:bg-white/10" p-2 rounded-lg shadow-md flex-col transition backdrop-blur-3xl
backdrop-opacity-60 hover:backdrop-opacity-100 hover:-translate-y-2>
<div
class="bg-white/5 hover:bg-white/10"
p-2
rounded-lg
shadow-md
flex-col
transition
backdrop-blur-3xl
backdrop-opacity-60
hover:backdrop-opacity-100
hover:-translate-y-2
>
<div text-bold opacity-75 text-white>
{{ item.name }}
</div>
@ -216,7 +250,9 @@ onMounted(() => {
<i i-ant-design-environment-outlined ml-1 />
</div>
<div class="text-white/60" mt-2 f-c-c gap-4>
<a target="_blank" class="text-white/60" :href="BeianLink">浙ICP备2024066515号</a>
<a target="_blank" class="text-white/60" :href="BeianLink"
>浙ICP备2024066515号</a
>
<div>©2024 吴阴天</div>
</div>
</footer>
@ -225,7 +261,16 @@ onMounted(() => {
<!-- 背景 -->
<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 />
<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>
@ -236,4 +281,7 @@ onMounted(() => {
position: fixed;
top: -70%;
}
#main {
top: calc(100vh - 368px);
}
</style>