122 lines
4.1 KiB
Vue
122 lines
4.1 KiB
Vue
<template>
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>Windows 软件管理</h2>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<router-link to="/essentials" class="nav-item">
|
|
<span class="nav-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 3l1.912 5.885h6.19l-5.007 3.638 1.912 5.885L12 14.77l-5.007 3.638 1.912-5.885-5.007-3.638h6.19z"></path>
|
|
</svg>
|
|
</span>
|
|
装机必备
|
|
</router-link>
|
|
<router-link to="/updates" class="nav-item">
|
|
<span class="nav-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 2v6h-6"></path>
|
|
<path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path>
|
|
<path d="M3 22v-6h6"></path>
|
|
<path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path>
|
|
</svg>
|
|
</span>
|
|
软件更新
|
|
</router-link>
|
|
|
|
<!-- 底部选项 -->
|
|
<div class="sidebar-footer">
|
|
<router-link to="/logs" class="nav-item nav-logs">
|
|
<span class="nav-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
<polyline points="14 2 14 8 20 8"></polyline>
|
|
<line x1="16" y1="13" x2="8" y2="13"></line>
|
|
<line x1="16" y1="17" x2="8" y2="17"></line>
|
|
<polyline points="10 9 9 9 8 9"></polyline>
|
|
</svg>
|
|
</span>
|
|
运行日志
|
|
</router-link>
|
|
<router-link to="/settings" class="nav-item nav-settings">
|
|
<span class="nav-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1Z"></path>
|
|
</svg>
|
|
</span>
|
|
软件设置
|
|
</router-link>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.sidebar {
|
|
width: 240px;
|
|
background-color: var(--sidebar-bg);
|
|
border-right: 1px solid var(--border-color);
|
|
padding: 40px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar-header h2 {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin-bottom: 40px;
|
|
padding-left: 20px;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.sidebar-nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
flex: 1; /* 撑满空间 */
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 20px;
|
|
border-radius: 12px;
|
|
color: var(--text-sec);
|
|
text-decoration: none;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background-color: rgba(0, 0, 0, 0.03);
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.nav-item.router-link-active {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
box-shadow: var(--btn-shadow);
|
|
}
|
|
|
|
.nav-icon {
|
|
margin-right: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
margin-top: auto;
|
|
padding-bottom: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.nav-logs, .nav-settings {
|
|
margin-top: 0;
|
|
}
|
|
</style>
|