update
BIN
t_etc_temp2/public/Static_zy/BlBINWkv.jpg
Normal file
|
After Width: | Height: | Size: 141 KiB |
BIN
t_etc_temp2/public/Static_zy/Snipaste_2026-01-17_17-14-39.png
Normal file
|
After Width: | Height: | Size: 295 KiB |
BIN
t_etc_temp2/public/Static_zy/T7JPo5FO.jpg
Normal file
|
After Width: | Height: | Size: 42 KiB |
BIN
t_etc_temp2/public/Static_zy/amex.png
Normal file
|
After Width: | Height: | Size: 759 B |
1
t_etc_temp2/public/Static_zy/default.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='750' height='500' fill='none' viewBox='0 0 27 18'><path fill='#E6E9EB' d='M0 3a3 3 0 0 1 3-3h21a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3z'/><path fill='#B9C4C9' d='M4 12h19v2H4z'/><rect width='4' height='4' x='4' y='4' fill='#fff' rx='1'/></svg>
|
||||
|
After Width: | Height: | Size: 300 B |
118
t_etc_temp2/public/Static_zy/footer.html
Normal 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>
|
||||
102
t_etc_temp2/public/Static_zy/header.html
Normal 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>
|
||||
BIN
t_etc_temp2/public/Static_zy/headerd.jpg
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
t_etc_temp2/public/Static_zy/mastercard.png
Normal file
|
After Width: | Height: | Size: 747 B |
BIN
t_etc_temp2/public/Static_zy/photo_2026-01-17_06-30-40.jpg
Normal file
|
After Width: | Height: | Size: 31 KiB |
BIN
t_etc_temp2/public/Static_zy/visa.png
Normal file
|
After Width: | Height: | Size: 987 B |