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>
|