133 lines
3.2 KiB
Vue
133 lines
3.2 KiB
Vue
<!-- layouts/default.vue -->
|
||
<template>
|
||
<div class="layout">
|
||
<FlashBanner />
|
||
<!-- 左：迷你侧栏（固定 56px，粘左） -->
|
||
<aside class="sidebar">
|
||
<SidebarMini />
|
||
</aside>
|
||
|
||
<!-- 右：主列（TopNav + 页面内容） -->
|
||
<div class="main">
|
||
<TopNav class="TopNav-clss"/>
|
||
<div class="page">
|
||
<slot />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import SidebarMini from '../components/SidebarMini.vue'
|
||
import TopNav from '../components/TopNav.vue'
|
||
import FlashBanner from '../components/FlashBanner.vue'
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* ===== 基础布局 ===== */
|
||
.layout{
|
||
display: flex;
|
||
min-height: 100vh;
|
||
background: #fff;
|
||
color: #111827;
|
||
}
|
||
|
||
/* 左侧栏 */
|
||
.sidebar{
|
||
position: sticky;
|
||
top: 0;
|
||
height: 66vh;
|
||
width: 80px; /* 24px left + 80px width + 24px gap */
|
||
flex: 0;
|
||
/* border-right: 1px solid #eef0f3; */ /* Removed border */
|
||
background: transparent; /* Made transparent */
|
||
/* backdrop-filter: blur(6px); */
|
||
/* -webkit-backdrop-filter: blur(6px); */
|
||
z-index: 20;
|
||
}
|
||
|
||
/* 右侧主列：TopNav + 页面内容 垂直排列 */
|
||
.main{
|
||
/* 与 TopNav 内部保持一致的导航高度变量 */
|
||
--nav-h: 64px;
|
||
|
||
flex: 1 1 auto;
|
||
min-width: 0; /* 防止内容把布局挤炸 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
|
||
/* 页面内容区 */
|
||
.page{
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* ===== 提供给页面用的通用钩子（不强制页面必须用） ===== */
|
||
.page :deep(.content-wrap){
|
||
max-width: 1200px;
|
||
width: 100%;
|
||
margin-inline: auto;
|
||
padding: 32px 24px;
|
||
}
|
||
|
||
/* 英雄区与透明导航重叠：向上顶 nav 高度，并把内边距补回来 */
|
||
.page :deep(.hero-section){
|
||
margin-top: calc(-1 * var(--nav-h)); /* 顶到导航背后 */
|
||
padding: calc(56px + var(--nav-h)) 24px 56px; /* 顶部补回导航高度 */
|
||
border-radius: 0 0 24px 24px;
|
||
background:
|
||
radial-gradient(1200px 600px at 60% 10%, rgba(106,110,255,.25), transparent 60%),
|
||
linear-gradient(180deg,#eef2ff 0%, #fff 40%);
|
||
}
|
||
.TopNav-clss{
|
||
position: absolute;
|
||
width: 99.5%;
|
||
}
|
||
/* 去掉页面首个标题/容器默认外边距导致的缝隙（不要覆盖 .hero-section 的负 margin） */
|
||
.page :deep(h1:first-child),
|
||
.page :deep(.content-wrap){
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* ===== 体验优化（可留可去） ===== */
|
||
/* 锚点滚动时不被导航遮住 */
|
||
:global(:root){
|
||
scroll-padding-top: 64px; /* 与 --nav-h 保持一致 */
|
||
}
|
||
/* iOS 刘海安全区 */
|
||
.page :deep(.content-wrap){ padding-top: max(32px, env(safe-area-inset-top)); }
|
||
|
||
/* ===== 小屏优化 (Mobile Bottom Nav) ===== */
|
||
@media (max-width: 640px){
|
||
.layout {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.sidebar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 64px; /* Bottom Nav Height */
|
||
flex: 0 0 auto;
|
||
border-right: none;
|
||
border-top: 1px solid rgba(0,0,0,0.05);
|
||
background: rgba(255,255,255,0.9);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.main {
|
||
padding-bottom: 64px; /* Space for bottom nav */
|
||
}
|
||
|
||
.page :deep(.content-wrap),
|
||
.page :deep(.hero-section){
|
||
padding-left: 16px;
|
||
padding-right: 16px;
|
||
}
|
||
}
|
||
</style>
|