fix: 修复 AppSidebar 组件未导入导致 prop 序列化错误,大屏幕隐藏副导航避免内容重复
- 添加缺失的 AppSidebar import(修复 types prop 显示为 [object Object] 的问题) - 大屏幕(≥1200px)隐藏 AppSubNav,避免与 AppSidebar 分类列表重复 - 移除布局调试代码(调试条、updateLayoutInfo、调试 CSS)
This commit is contained in:
+20
-7
@@ -70,6 +70,7 @@
|
|||||||
import { ref, provide, onMounted, computed, watch } from 'vue'
|
import { ref, provide, onMounted, computed, watch } from 'vue'
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
import AppHeader from '@/components/AppHeader.vue'
|
import AppHeader from '@/components/AppHeader.vue'
|
||||||
|
import AppSidebar from '@/components/AppSidebar.vue'
|
||||||
import AppSubNav from '@/components/AppSubNav.vue'
|
import AppSubNav from '@/components/AppSubNav.vue'
|
||||||
import AppRightbar from '@/components/AppRightbar.vue'
|
import AppRightbar from '@/components/AppRightbar.vue'
|
||||||
import Footer from '@/components/Footer.vue'
|
import Footer from '@/components/Footer.vue'
|
||||||
@@ -98,6 +99,7 @@ const filterCrowdIds = ref([])
|
|||||||
// 热门笑话(右侧栏)
|
// 热门笑话(右侧栏)
|
||||||
const hotJokes = ref([])
|
const hotJokes = ref([])
|
||||||
|
|
||||||
|
|
||||||
// 右侧栏:仅首页显示
|
// 右侧栏:仅首页显示
|
||||||
const showRightBar = computed(() => route.path === '/')
|
const showRightBar = computed(() => route.path === '/')
|
||||||
// 副导航:首页/分类/搜索显示,详情页显示推荐列表
|
// 副导航:首页/分类/搜索显示,详情页显示推荐列表
|
||||||
@@ -186,7 +188,7 @@ onMounted(async () => {
|
|||||||
console.warn('[APP] Failed to load hot jokes:', e)
|
console.warn('[APP] Failed to load hot jokes:', e)
|
||||||
hotJokes.value = []
|
hotJokes.value = []
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -274,17 +276,25 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 超宽屏填满屏幕,逐步去掉居中限制 */
|
/* 1024px+ 强制填满屏幕 */
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
:root {
|
.content-wrapper {
|
||||||
--content-max-width: 100%;
|
max-width: 100% !important;
|
||||||
--content-padding: 20px;
|
margin-left: 0 !important;
|
||||||
|
margin-right: 0 !important;
|
||||||
|
padding-left: var(--content-padding) !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
}
|
||||||
|
.app-header .header-inner {
|
||||||
|
max-width: 100% !important;
|
||||||
|
padding-left: var(--content-padding) !important;
|
||||||
|
padding-right: var(--content-padding) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 大屏增加内边距 */
|
/* 大屏增加内边距 */
|
||||||
@media (min-width: 1400px) {
|
@media (min-width: 1400px) {
|
||||||
:root {
|
:root {
|
||||||
--content-max-width: 100%;
|
|
||||||
--content-padding: 32px;
|
--content-padding: 32px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -343,7 +353,7 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 大屏幕显示所有侧边栏 */
|
/* 大屏幕显示 AppSidebar + 右侧栏,隐藏副导航(避免与 AppSidebar 内容重复) */
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
.left-sidebar {
|
.left-sidebar {
|
||||||
display: block;
|
display: block;
|
||||||
@@ -351,6 +361,9 @@ body {
|
|||||||
min-width: var(--sidebar-width);
|
min-width: var(--sidebar-width);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
.left-subnav {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
.rightbar {
|
.rightbar {
|
||||||
width: var(--rightbar-width);
|
width: var(--rightbar-width);
|
||||||
min-width: var(--rightbar-width);
|
min-width: var(--rightbar-width);
|
||||||
|
|||||||
Reference in New Issue
Block a user