feat: 新增侧边栏组件
This commit is contained in:
parent
b28ef07aee
commit
724eda0096
277
front/src/components/sideBar.vue
Normal file
277
front/src/components/sideBar.vue
Normal 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>
|
||||||
Loading…
x
Reference in New Issue
Block a user