feat:重构导航栏侧边栏

This commit is contained in:
2025-12-18 00:03:36 +08:00
parent 5b02b1c729
commit 228109ee81
7 changed files with 70 additions and 58 deletions

View File

@@ -1,4 +1,8 @@
<template>
<div class="title">
<span>{{ page.frontmatter.title }}</span>
</div>
<div v-if="!page.filePath.includes('index.md')" class="blog-stats">
<div v-if="page.frontmatter.isGreat" class="item">
<svg t="1765851905856" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11930" width="16" height="16"><path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="11931"></path><path d="M136.533333 307.2a34.133333 34.133333 0 0 1 34.133334-34.133333h682.666666a34.133333 34.133333 0 0 1 34.133334 34.133333v437.3504a68.266667 68.266667 0 0 1-35.566934 59.938133l-274.5344 149.7088a136.533333 136.533333 0 0 1-130.730666 0L172.100267 804.522667A68.266667 68.266667 0 0 1 136.533333 744.5504V307.2z" fill="#bd34fe" p-id="11932"></path><path d="M68.266667 136.533333a68.266667 68.266667 0 0 1 68.266666-68.266666h750.933334a68.266667 68.266667 0 0 1 68.266666 68.266666v117.4528a34.133333 34.133333 0 0 1-16.247466 29.0816l-373.828267 230.058667a102.4 102.4 0 0 1-107.3152 0L84.514133 283.0336A34.133333 34.133333 0 0 1 68.266667 253.952V136.533333z" fill="#bd34fe" p-id="11933"></path><path d="M496.605867 339.490133a17.066667 17.066667 0 0 1 30.788266 0L576.853333 443.050667a17.066667 17.066667 0 0 0 13.175467 9.557333l113.800533 15.018667a17.066667 17.066667 0 0 1 9.5232 29.2864l-83.2512 79.018666a17.066667 17.066667 0 0 0-5.051733 15.496534l20.923733 112.8448a17.066667 17.066667 0 0 1-24.917333 18.090666l-100.864-54.715733a17.066667 17.066667 0 0 0-16.315733 0l-100.864 54.715733a17.066667 17.066667 0 0 1-24.917334-18.090666l20.8896-112.8448a17.066667 17.066667 0 0 0-5.0176-15.496534l-83.217066-79.018666a17.066667 17.066667 0 0 1 9.489066-29.2864l113.800534-15.018667a17.066667 17.066667 0 0 0 13.175466-9.557333l49.425067-103.560534z" fill="#FFFFFF" p-id="11934"></path></svg>
@@ -77,9 +81,23 @@ onMounted(() => {
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.title {
margin-bottom: 5px;
padding: 10px 0;
text-align: center;
font-size: 32px;
color: #fff;
font-weight: bold;
background: -webkit-linear-gradient(10deg, #3DC8F0 5%, #8036FA 15%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.icon {
display: inline-block;
transform: translate(0px , 2px);