114 lines
3.3 KiB
Vue
114 lines
3.3 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" 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>
|
|
<router-link to="/all" 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="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"></path>
|
|
<path d="m3.3 7 8.7 5 8.7-5"></path>
|
|
<path d="M12 22V12"></path>
|
|
</svg>
|
|
</span>
|
|
全部软件
|
|
</router-link>
|
|
|
|
<!-- 底部日志选项 -->
|
|
<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>
|
|
</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;
|
|
}
|
|
|
|
.nav-logs {
|
|
margin-top: auto; /* 将日志推到底部 */
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|