luozhj33/CUS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增侧边栏组件

Browse Source
This commit is contained in:
luozhj33 2026-03-21 16:38:17 +08:00
parent b28ef07aee
commit 724eda0096
1 changed files with 277 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

277
front/src/components/sideBar.vue Normal file
View File

@ -0,0 +1,277 @@
<script setup lang="ts">
import { ref } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
const route = useRoute()
// 菜单项数据 // TODO
const menuItems = ref([
{ name: '首页', path: '/', icon: '/icons/home' },
{ name: '造价计算', path: '/calculate', icon: '/icons/calculate' },
{ name: '钱包充值', path: '/pay', icon: '/icons/pay' },
{ name: '订阅记录', path: '/subscribe', icon: '/icons/subscribe' },
{ name: '开票记录', path: '/invoice', icon: '/icons/invoice' },
{ name: '我的账号', path: '/mine', icon: '/icons/mine' },
])
</script>
<template>
<aside class="sidebar">
<!-- 侧边栏头部 -->
<div class="sidebar-header">
<img src="/favicon.ico" style="width: 20px; margin-right: 10px;">
<h2 class="logo">众为计算工具</h2>
</div>
<!-- 导航菜单 -->
<nav class="sidebar-nav">
<li v-for="item in menuItems" :key="item.path" class="menu-item">
<RouterLink :to="item.path" class="menu-link" >
<span class="menu-select" :class="{ 'active': route.path === item.path }"></span>
<img class="menu-icon" :src="route.path === item.path ? item.icon + '_active.png' : item.icon +'.png'">
<span class="menu-text" :class="{ 'active': route.path === item.path }">{{ item.name }}</span>
</RouterLink>
</li>
</nav>
<!-- 登录状态 -->
<div class="sidebar-auth">
<div class="auth-divider">
<span class="divider-line"></span>
<span class="divider-text">·</span>
<span class="divider-line"></span>
</div>
<!-- 未登录状态 -->
<div class="auth-actions">
<RouterLink to="/login" class="auth-link">登录</RouterLink>
<span class="auth-separator">|</span>
<RouterLink to="/register" class="auth-link">注册</RouterLink>
</div>
<!-- 已登录状态 -->
<div class="user-info">
<!-- <img src="/favicon.ico" class="user-avatar"> -->
<span class="user-name">张三</span>
<!-- <span class="user-badge">高级版</span> -->
<button class="logout-btn">退出</button>
</div>
</div>
<!-- 侧边栏底部 -->
<div class="sidebar-footer">
<p class="copyright">本网站由</p>
<a href="https://www.zwgczx.com.cn" class="copyright" style="font-weight: bold;">众为工程咨询有限公司</a>
<p class="copyright">提供技术支持</p>
</div>
</aside>
</template>
<style scoped>
.sidebar {
width: 250px;
height: 100vh;
background-color: #ffffff;
color: #111111;
display: flex;
flex-direction: column;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
}
/* 头部样式 */
.sidebar-header {
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.logo {
margin: 0;
font-size: 20px;
font-weight: bold;
}
/* 导航菜单样式 */
.sidebar-nav {
flex: 1;
overflow-y: auto;
}
.menu-link {
display: flex;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
color: #aaaaaa;
text-decoration: none;
}
.menu-link:hover {
color: #666666;
}
.menu-link.active {
font-weight: bold;
color: #111111;
}
.menu-select {
width: 4px;
height: 30px;
background-color: #ffffff;
}
.menu-select.active {
background-color: #666666;
}
.menu-icon {
width: 22px;
margin-left: 24px;
margin-right: 24px;
}
.menu-text {
font-size: 16px;
}
.menu-text.active {
font-size: 16px;
font-weight: bold;
color: #111111;
}
/* 分隔线样式 */
.auth-divider {
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 10px;
height: 20px;
}
.divider-line {
flex: 1;
height: 1px;
background-color: #e0e0e0;
margin: 0 10px;
}
.divider-text {
color: #e0e0e0;
font-size: 14px;
}
/* 未登录状态 */
.auth-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #d0d0d0;
font-size: 15px;
margin-bottom: 10px;
}
.auth-link {
background: transparent;
height: 30px;
padding: 8px 12px;
display: flex;
align-items: center;
color: #111111;
}
.auth-link:hover {
opacity: 0.7;
}
/* 已登录状态 */
.user-info {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 10px;
}
.user-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.user-name {
font-size: 16px;
font-weight: 600;
color: #111111;
}
.user-badge {
font-size: 11px;
padding: 2px 8px;
border-radius: 10px;
background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
color: #ffffff;
font-weight: 600;
display: inline-block;
width: fit-content;
}
.logout-btn {
border: none;
background: transparent;
height: 30px;
padding: 8px 12px;
display: flex;
align-items: center;
/* color: #cc0000; */
}
.logout-btn:hover {
opacity: 0.7;
}
/* 底部样式 */
.sidebar-footer {
padding: 20px;
text-align: center;
border-top: 1px solid #e0e0e0;
}
.copyright {
margin: 0;
height: 16px;
font-size: 12px;
color: #111111;
}
/* 滚动条样式 */
.sidebar-nav::-webkit-scrollbar {
width: 8px;
}
.sidebar-nav::-webkit-scrollbar-track {
background: #F0F2F3;
border-radius: 100px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
background: #8B8B8B;
border-radius: 100px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
background: #636363;
}
</style>