This commit is contained in:
telangpu
2026-04-29 21:51:30 +08:00
parent c73ff3b77a
commit 7107a95c10
178 changed files with 227 additions and 158 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 295 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 759 B

View File

@@ -0,0 +1,118 @@
<footer id="page-footer" class="page-footer sk-footer-container">
<style>
.sk-footer-container {
background: linear-gradient(135deg, #1e1e2f 0%, #151522 100%);
padding: 60px 20px;
position: relative;
overflow: hidden;
box-shadow: 0 -10px 30px rgba(0,0,0,0.2);
}
.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(-3px);
box-shadow: 0 8px 20px 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-footer-main {
display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; gap: 40px; padding-bottom: 50px;
}
.sk-footer-col { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.sk-footer-col-1 { min-width: 250px; gap: 15px;}
.sk-footer-col-nav { min-width: 150px; }
.sk-footer-col-last { flex: 1.5; min-width: 250px; gap: 15px; }
.sk-footer-bottom {
max-width: 1200px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
}
@media (max-width: 768px) {
.sk-footer-container { padding: 40px 15px 30px; }
.sk-footer-main { flex-direction: column; gap: 30px; padding-bottom: 30px; }
/* 手机端改成全宽或两列堆叠 */
.sk-footer-col-1 { min-width: 100%; align-items: center; text-align: center; }
.sk-logo-sk { margin: 0 auto; }
/* 链接区改成两列并排 */
.sk-nav-wrap { display: flex; flex-direction: row; gap: 20px; width: 100%; justify-content: space-between; }
.sk-footer-col-nav { min-width: calc(50% - 10px); }
/* 订阅区全宽 */
.sk-footer-col-last { min-width: 100%; align-items: center; }
.sk-social-wrap { justify-content: center; }
.sk-footer-bottom { flex-direction: column; align-items: center; }
.sk-policy-wrap { justify-content: center; }
}
</style>
<!-- 主体区块 -->
<div class="sk-footer-main">
<!-- 品牌/Logo区域 -->
<div class="sk-footer-col sk-footer-col-1">
<div class="skeleton-block sk-logo-sk" style="width: 140px; height: 40px; border-radius: 20px;"></div>
<div class="skeleton-block" style="width: 100%; height: 12px; margin-top: 10px; max-width: 300px;"></div>
<div class="skeleton-block" style="width: 90%; height: 12px; max-width: 270px;"></div>
<div class="skeleton-block" style="width: 75%; height: 12px; max-width: 220px;"></div>
</div>
<div class="sk-nav-wrap">
<!-- 链接列 1 -->
<div class="sk-footer-col sk-footer-col-nav">
<div class="skeleton-block" style="width: 60%; height: 18px; margin-bottom: 8px;"></div>
<div class="skeleton-block" style="width: 80%; height: 10px;"></div>
<div class="skeleton-block" style="width: 70%; height: 10px;"></div>
<div class="skeleton-block" style="width: 90%; height: 10px;"></div>
<div class="skeleton-block" style="width: 75%; height: 10px;"></div>
</div>
<!-- 链接列 2 -->
<div class="sk-footer-col sk-footer-col-nav">
<div class="skeleton-block" style="width: 55%; height: 18px; margin-bottom: 8px;"></div>
<div class="skeleton-block" style="width: 65%; height: 10px;"></div>
<div class="skeleton-block" style="width: 85%; height: 10px;"></div>
<div class="skeleton-block" style="width: 75%; height: 10px;"></div>
</div>
</div>
<!-- 订阅/社交区域 -->
<div class="sk-footer-col sk-footer-col-last">
<div class="skeleton-block" style="width: 120px; height: 18px; margin-bottom: 5px;"></div>
<!-- 模仿输入框和大按钮 -->
<div class="skeleton-block" style="width: 100%; max-width: 350px; height: 45px; border-radius: 25px;"></div>
<!-- 模仿社交图标 -->
<div class="sk-social-wrap" style="display: flex; gap: 15px; margin-top: 15px; width: 100%; max-width: 350px;">
<div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%;"></div>
<div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%;"></div>
<div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%;"></div>
<div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%;"></div>
</div>
</div>
</div>
<!-- 底部版权/协议区块 -->
<div class="sk-footer-bottom">
<!-- 版权 -->
<div class="skeleton-block" style="width: 200px; height: 12px;"></div>
<!-- 政策链接 -->
<div class="sk-policy-wrap" style="display: flex; gap: 25px;">
<div class="skeleton-block" style="width: 60px; height: 12px;"></div>
<div class="skeleton-block" style="width: 60px; height: 12px;"></div>
<div class="skeleton-block" style="width: 60px; height: 12px;"></div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,102 @@
<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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 747 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 987 B