fix(navigation): 增强移动端底部导航样式和调试
- mobile-nav 背景改为蓝色(#1890ff),文字白色,便于确认渲染 - 增加渲染日志(侧边栏/移动端项目数量) - 确保所有页面都使用同一组件,统一显示
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
// Vue 3 导航组件 - 最终版(确保事件传递)
|
// Vue 3 导航组件 - 最终版(增强调试和样式)
|
||||||
(function() {
|
(function() {
|
||||||
console.log('[Nav] 脚本加载');
|
console.log('[Nav] 脚本加载');
|
||||||
|
|
||||||
@@ -20,15 +20,16 @@
|
|||||||
.navigation-wrapper .sidebar-btn:hover { background: #f5f7fa; color: #409eff; }
|
.navigation-wrapper .sidebar-btn:hover { background: #f5f7fa; color: #409eff; }
|
||||||
.navigation-wrapper .sidebar-btn.active { background: #ecf5ff; color: #409eff; font-weight: 600 !important; }
|
.navigation-wrapper .sidebar-btn.active { background: #ecf5ff; color: #409eff; font-weight: 600 !important; }
|
||||||
.navigation-wrapper .mobile-nav {
|
.navigation-wrapper .mobile-nav {
|
||||||
display: none; position: fixed; bottom: 0; left: 0; right: 0; background: white;
|
display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #1890ff;
|
||||||
box-shadow: 0 -2px 8px rgba(0,0,0,0.1); padding: 8px 0; z-index: 99999; justify-content: space-around;
|
box-shadow: 0 -2px 8px rgba(0,0,0,0.2); padding: 8px 0; z-index: 99999; justify-content: space-around;
|
||||||
}
|
}
|
||||||
.navigation-wrapper .mobile-nav-btn {
|
.navigation-wrapper .mobile-nav-btn {
|
||||||
flex: 1; border: none; background: transparent; padding: 10px 4px; text-align: center;
|
flex: 1; border: none; background: transparent; padding: 10px 4px; text-align: center;
|
||||||
font-size: 11px; color: #606266; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
|
font-size: 12px; color: white !important; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
|
||||||
|
transition: background 0.2s;
|
||||||
}
|
}
|
||||||
.navigation-wrapper .mobile-nav-btn:hover { color: #409eff; }
|
.navigation-wrapper .mobile-nav-btn:hover { background: rgba(255,255,255,0.2); color: white !important; }
|
||||||
.navigation-wrapper .mobile-nav-btn.active { color: #409eff; font-weight: 600 !important; }
|
.navigation-wrapper .mobile-nav-btn.active { background: rgba(255,255,255,0.3); font-weight: 600 !important; }
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.navigation-wrapper .sidebar { display: none !important; }
|
.navigation-wrapper .sidebar { display: none !important; }
|
||||||
.navigation-wrapper .mobile-nav { display: flex !important; }
|
.navigation-wrapper .mobile-nav { display: flex !important; }
|
||||||
@@ -70,21 +71,17 @@
|
|||||||
const component = {
|
const component = {
|
||||||
name: 'NavigationComponent',
|
name: 'NavigationComponent',
|
||||||
props: { currentPage: { type: String, required: true }, isAdmin: { type: Boolean, default: false } },
|
props: { currentPage: { type: String, required: true }, isAdmin: { type: Boolean, default: false } },
|
||||||
mounted() { console.log('[NavigationComponent] 已挂载'); },
|
mounted() { console.log('[NavigationComponent] 已挂载,isAdmin:', this.isAdmin); },
|
||||||
render(){
|
render(){
|
||||||
const createElement = arguments[0] || h;
|
const createElement = arguments[0] || h;
|
||||||
// 获取 emit 方法:通过 this.$emit 或从闭包中捕获
|
const emit = this.$emit || function() {};
|
||||||
const emit = this.$emit || function() {};
|
|
||||||
|
|
||||||
const navigate = (page) => {
|
const navigate = (page) => {
|
||||||
console.log('[NavigationComponent] 点击导航到:', page);
|
console.log('[NavigationComponent] 点击导航到:', page);
|
||||||
// 直接调用 emit 函数
|
|
||||||
if (typeof emit === 'function') {
|
if (typeof emit === 'function') {
|
||||||
emit('navigate', page);
|
emit('navigate', page);
|
||||||
} else if (this.$emit) {
|
} else if (this.$emit) {
|
||||||
this.$emit('navigate', page);
|
this.$emit('navigate', page);
|
||||||
} else {
|
|
||||||
console.warn('[NavigationComponent] 无法发送事件,emit unavailable');
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -101,6 +98,8 @@
|
|||||||
...(this.isAdmin ? [{ icon: '👥', label: '用户', page: 'users.html' }, { icon: '⚙️', label: '系统', page: 'admin.html' }] : [])
|
...(this.isAdmin ? [{ icon: '👥', label: '用户', page: 'users.html' }, { icon: '⚙️', label: '系统', page: 'admin.html' }] : [])
|
||||||
];
|
];
|
||||||
|
|
||||||
|
console.log('[NavigationComponent] 渲染侧边栏项目:', sidebarItems.length, '移动端项目:', mobileItems.length);
|
||||||
|
|
||||||
return createElement('div', { class: 'navigation-wrapper' }, [
|
return createElement('div', { class: 'navigation-wrapper' }, [
|
||||||
createElement('aside', { class: 'sidebar' }, [
|
createElement('aside', { class: 'sidebar' }, [
|
||||||
createElement('div', { class: 'sidebar-header' }, [createElement('h3', '宇之然平台')]),
|
createElement('div', { class: 'sidebar-header' }, [createElement('h3', '宇之然平台')]),
|
||||||
|
|||||||
Reference in New Issue
Block a user