feat: restyle sidebar brand badge

This commit is contained in:
shake 2026-06-22 23:42:01 +08:00
parent 6735677186
commit 99faf18b25
2 changed files with 11 additions and 27 deletions

View file

@ -1,23 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 275">
<defs>
<linearGradient id="small-hero-gradient-1" x1="13.74" y1="183.7" x2="303.96" y2="45.59" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#25636c"/>
<stop offset="0.6" stop-color="#3b956f"/>
<stop offset="1" stop-color="#14a058"/>
<stop offset="0" stop-color="#b79a58"/>
<stop offset="0.58" stop-color="#d8bf7b"/>
<stop offset="1" stop-color="#f0e0b3"/>
</linearGradient>
</defs>
<g>
<g>
<path fill="#14a058" opacity="0.49" d="M0,187.5v25s0,37.5,50,50S300,225,300,225V187.5Z"/>
<path fill="#e9d29a" opacity="0.74" d="M0,187.5v25s0,37.5,50,50S300,225,300,225V187.5Z"/>
</g>
<g>
<path fill="#14a058" opacity="0.49" d="M300,237.5S287.5,275,250,275,121.05,237.5,61.4,200s134.21,0,134.21,0Z"/>
<path fill="#d6bb73" opacity="0.68" d="M300,237.5S287.5,275,250,275,121.05,237.5,61.4,200s134.21,0,134.21,0Z"/>
</g>
<g>
<path fill="#14a058" opacity="0.38" d="M0,200v12.5a241.47,241.47,0,0,0,112.5,50c73.6,11.69,130.61-14.86,150-25L300,200Z"/>
<path fill="#f4e9c9" opacity="0.7" d="M0,200v12.5a241.47,241.47,0,0,0,112.5,50c73.6,11.69,130.61-14.86,150-25L300,200Z"/>
</g>
<g>
<path fill="url(#small-hero-gradient-1)" d="M0,0V212.5s62.5-12.5,150,25,150,0,150,0V0Z"/>
</g>
</g>
</svg>
</svg>

Before

Width:  |  Height:  |  Size: 894 B

After

Width:  |  Height:  |  Size: 895 B

Before After
Before After

View file

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { NIcon, useThemeVars } from 'naive-ui';
import { NIcon } from 'naive-ui';
import { RouterLink } from 'vue-router';
import { Home2, Menu2 } from '@vicons/tabler';
@ -15,7 +15,6 @@ import type { ToolCategory } from '@/tools/tools.types';
import { useToolStore } from '@/tools/tools.store';
import CollapsibleToolMenu from '@/components/CollapsibleToolMenu.vue';
const themeVars = useThemeVars();
const styleStore = useStyleStore();
const version = config.app.version;
const commitSha = config.app.lastCommitSha.slice(0, 7);
@ -40,10 +39,6 @@ const tools = computed<ToolCategory[]>(() => [
<div class="title">
IT - TOOLS
</div>
<div class="divider" />
<div class="subtitle">
{{ $t('home.subtitle') }}
</div>
</div>
</RouterLink>
@ -167,23 +162,12 @@ const tools = computed<ToolCategory[]>(() => [
width: 100%;
text-align: center;
top: 16px;
color: #fff;
color: #433121;
.title {
font-size: 25px;
font-weight: 600;
}
.divider {
width: 50px;
height: 2px;
border-radius: 4px;
background-color: v-bind('themeVars.primaryColor');
margin: 0 auto 5px;
}
.subtitle {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.1em;
}
}
}