对接后端
This commit is contained in:
parent
a4a642b8b6
commit
580d2338e8
167
src/App.vue
167
src/App.vue
|
|
@ -1,174 +1,25 @@
|
|||
<template>
|
||||
<!-- 根据路由判断是否显示主布局 -->
|
||||
<template v-if="isAuthPage">
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="app-container">
|
||||
<SideBar :menu-items="menuItems" />
|
||||
<div class="main-wrapper" :class="{ 'sidebar-collapsed': isCollapsed }">
|
||||
<TopBar />
|
||||
<div class="main-content">
|
||||
<router-view></router-view>
|
||||
<router-view v-slot="{ Component }">
|
||||
<component :is="Component" />
|
||||
</router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, provide, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import TopBar from '@/components/layout/TopBar.vue'
|
||||
import SideBar from '@/components/layout/SideBar.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const isCollapsed = ref(false)
|
||||
provide('isCollapsed', isCollapsed)
|
||||
|
||||
// 判断是否是认证相关页面
|
||||
const isAuthPage = computed(() => {
|
||||
return ['/login', '/register', '/forgot-password'].includes(route.path)
|
||||
})
|
||||
|
||||
const menuItems = ref([
|
||||
{
|
||||
icon: 'House',
|
||||
title: '首页',
|
||||
path: '/'
|
||||
},
|
||||
{
|
||||
icon: 'DataBoard',
|
||||
title: '数据看板',
|
||||
path: '/dashboard'
|
||||
},
|
||||
{
|
||||
icon: 'VideoCamera',
|
||||
title: '视频服务',
|
||||
path: '/video-service'
|
||||
},
|
||||
{
|
||||
icon: 'FirstAidKit',
|
||||
title: '医疗服务',
|
||||
path: '/medical'
|
||||
},
|
||||
{
|
||||
icon: 'Van',
|
||||
title: '出行服务',
|
||||
path: '/transportation'
|
||||
},
|
||||
{
|
||||
icon: 'Bowl',
|
||||
title: '饮食服务',
|
||||
path: '/diet'
|
||||
},
|
||||
{
|
||||
icon: 'Microphone',
|
||||
title: '语音助手',
|
||||
path: '/voice-assistant'
|
||||
},
|
||||
{
|
||||
icon: 'Calendar',
|
||||
title: '活动中心',
|
||||
path: '/activities'
|
||||
},
|
||||
{
|
||||
icon: 'Monitor',
|
||||
title: '设备管理',
|
||||
path: '/devices'
|
||||
},
|
||||
{
|
||||
icon: 'Service',
|
||||
title: '生活服务',
|
||||
path: '/life-service'
|
||||
},
|
||||
{
|
||||
icon: 'ChatDotRound',
|
||||
title: '社区交流',
|
||||
path: '/community'
|
||||
},
|
||||
{
|
||||
icon: 'Bell',
|
||||
title: '新闻资讯',
|
||||
path: '/news'
|
||||
},
|
||||
{
|
||||
icon: 'Headset',
|
||||
title: '音乐服务',
|
||||
path: '/music'
|
||||
},
|
||||
{
|
||||
icon: 'ChatLineRound',
|
||||
title: 'AI助手',
|
||||
path: '/ai-assistant'
|
||||
},
|
||||
{
|
||||
icon: 'Monitor',
|
||||
title: '娱乐服务',
|
||||
path: '/entertainment'
|
||||
},
|
||||
{
|
||||
icon: 'Shop',
|
||||
title: '智慧商城',
|
||||
path: '/shop'
|
||||
},
|
||||
{
|
||||
icon: 'Setting',
|
||||
title: '系统设置',
|
||||
path: '/settings'
|
||||
}
|
||||
])
|
||||
|
||||
provide('menuItems', menuItems) // 提供给子组件使用
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 全局样式 */
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
margin-left: 240px;
|
||||
transition: margin-left 0.3s;
|
||||
}
|
||||
|
||||
.main-wrapper.sidebar-collapsed {
|
||||
margin-left: 64px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 80px 20px 20px;
|
||||
min-height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
/* 全局滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(144, 147, 153, 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(144, 147, 153, 0.5);
|
||||
flex: 1;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -97,6 +97,8 @@ const handleLogout = async () => {
|
|||
height: 60px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
|
@ -110,6 +112,8 @@ const handleLogout = async () => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
|
|
@ -155,4 +159,8 @@ const handleLogout = async () => {
|
|||
.user-info:hover .el-icon--right {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
:deep(.el-dropdown-menu) {
|
||||
z-index: 1002 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -967,4 +967,8 @@ onBeforeUnmount(() => {
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -352,4 +352,9 @@ const stats = [
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.home-container {
|
||||
/* ... 其他样式 ... */
|
||||
z-index: 1; /* 确保比 TopBar 的 z-index 小 */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue