102 lines
4.7 KiB
HTML
102 lines
4.7 KiB
HTML
<header id="page-header" class="page-header sk-header-container">
|
|
<style>
|
|
.sk-header-container {
|
|
background: linear-gradient(135deg, #1e1e2f 0%, #151522 100%);
|
|
padding: 15px 30px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
|
|
}
|
|
.skeleton-block {
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 75%);
|
|
background-size: 400% 100%;
|
|
animation: skeleton-loading 2s infinite ease-in-out;
|
|
border-radius: 6px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
|
|
border: 1px solid rgba(255, 255, 255, 0.02);
|
|
}
|
|
.skeleton-block:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
@keyframes skeleton-loading {
|
|
0% { background-position: 100% 50%; }
|
|
100% { background-position: 0 50%; }
|
|
}
|
|
|
|
/* === 响应式布局 (适配所有手机) === */
|
|
.sk-header-wrap {
|
|
max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px;
|
|
}
|
|
.sk-top-util {
|
|
display: flex; justify-content: flex-end; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
.sk-main-nav {
|
|
display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-top: 5px; flex-wrap: wrap;
|
|
}
|
|
.sk-logo-box { width: 220px; height: 50px; border-radius: 8px; }
|
|
.sk-search-box { flex: 1; max-width: 600px; height: 42px; border-radius: 25px; min-width: 250px; }
|
|
.sk-icons-box { display: flex; gap: 15px; align-items: center; }
|
|
.sk-bottom-cats { display: flex; justify-content: center; gap: 50px; padding-top: 10px; flex-wrap: wrap; }
|
|
.sk-mobile-menu-btn { display: none; width: 40px; height: 40px; border-radius: 6px; }
|
|
|
|
@media (max-width: 768px) {
|
|
.sk-header-container { padding: 10px 15px; }
|
|
.sk-header-wrap { gap: 10px; }
|
|
/* 手机端隐藏顶部小条和底部多列导航，收起到侧边栏按钮 */
|
|
.sk-top-util, .sk-bottom-cats { display: none; }
|
|
/* 重新排列主导航：菜单按钮, Logo, 购物车图标 */
|
|
.sk-main-nav { gap: 10px; justify-content: space-between; padding-top: 0; }
|
|
.sk-mobile-menu-btn { display: block; }
|
|
.sk-logo-box { width: 140px; height: 35px; margin: 0 auto; }
|
|
.sk-search-box { width: 100%; max-width: 100%; order: 4; height: 38px; margin-top: 5px;}
|
|
.sk-user-btn { display: none; } /* 手机端通常把个人中心放到汉堡菜单里 */
|
|
.sk-icons-box { gap: 10px; }
|
|
}
|
|
</style>
|
|
|
|
<div class="sk-header-wrap">
|
|
|
|
<!-- 顶部小工具栏 (Utility Bar) - 手机端隐藏 -->
|
|
<div class="sk-top-util">
|
|
<div class="skeleton-block" style="width: 80px; height: 12px; border-radius: 4px;"></div>
|
|
<div class="skeleton-block" style="width: 70px; height: 12px; border-radius: 4px;"></div>
|
|
<div class="skeleton-block" style="width: 85px; height: 12px; border-radius: 4px;"></div>
|
|
<div class="skeleton-block" style="width: 60px; height: 12px; border-radius: 4px;"></div>
|
|
</div>
|
|
|
|
<!-- 主导航条 -->
|
|
<div class="sk-main-nav">
|
|
|
|
<!-- 手机端汉堡菜单占位 (仅移动端显示) -->
|
|
<div class="skeleton-block sk-mobile-menu-btn"></div>
|
|
|
|
<!-- 品牌 Logo 占位 -->
|
|
<div class="skeleton-block sk-logo-box"></div>
|
|
|
|
<!-- 右侧图标 (购物车等) -->
|
|
<div class="sk-icons-box">
|
|
<!-- 移动端隐藏的长按钮，仅保留图标 -->
|
|
<div class="skeleton-block sk-user-btn" style="width: 110px; height: 40px; border-radius: 20px;"></div>
|
|
<div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%;"></div>
|
|
</div>
|
|
|
|
<!-- 居中长搜索框占位 (移动端会掉到下一排占满全宽) -->
|
|
<div class="skeleton-block sk-search-box"></div>
|
|
|
|
</div>
|
|
|
|
<!-- 下方导航分类栏 - 手机端隐藏 -->
|
|
<div class="sk-bottom-cats">
|
|
<div class="skeleton-block" style="width: 65px; height: 16px; border-radius: 4px;"></div>
|
|
<div class="skeleton-block" style="width: 85px; height: 16px; border-radius: 4px;"></div>
|
|
<div class="skeleton-block" style="width: 75px; height: 16px; border-radius: 4px;"></div>
|
|
<div class="skeleton-block" style="width: 100px; height: 16px; border-radius: 4px;"></div>
|
|
<div class="skeleton-block" style="width: 60px; height: 16px; border-radius: 4px;"></div>
|
|
<div class="skeleton-block" style="width: 90px; height: 16px; border-radius: 4px;"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</header> |