- 优化导航栏在平板和手机端的显示 - 调整 logo 和导航项尺寸 - 手机端隐藏主导航菜单（预留汉堡菜单空间） - 优化登录/注册按钮尺寸 - Banner 轮播区域响应式优化 - 平板端：500px 高度，文字居中 - 手机端：450px 高度，标题 32px - 小手机：400px 高度，标题 28px - 热销产品表格移动端卡片化 - 平板端保持表格形式，添加横向滚动 - 手机端转换为卡片布局 - 使用 CSS 伪元素自动添加标签 - 为 td 添加 data-label 属性增强可访问性 - 解决方案区域响应式布局 - 平板端改为上下布局 - 手机端优化按钮和文字尺寸 - 小手机端全面缩小间距和图片尺寸 - Footer 页脚全面优化 - 平板端改为垂直布局 - 手机端承诺区域 2 列显示 - 版权信息改为垂直堆叠居中 - 其他优化 - 基础设施数据改为垂直布局 - 手机端隐藏侧边工具栏，保留回到顶部按钮 - 移动端禁用复杂动画提升性能 响应式断点：≤1199px / ≤991px / ≤767px / ≤575px 所有改动在媒体查询内，不影响桌面端样式 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yiqiu
@@ -1084,36 +1084,37 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
/* 导航栏 */
|
||||
/* ===== 导航栏 - 紧凑设计 ===== */
|
||||
.nav-header {
|
||||
height: 60px;
|
||||
height: 50px !important;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.nav-header .nav-left .nav-icon img {
|
||||
width: 100px;
|
||||
height: 22px;
|
||||
width: 90px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.nav-menu .nav-item {
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
height: 60px;
|
||||
padding: 0 8px;
|
||||
font-size: 13px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.nav-right .control {
|
||||
margin: 0 10px;
|
||||
font-size: 13px;
|
||||
margin: 0 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 下拉菜单 */
|
||||
.nav-cont {
|
||||
top: 60px;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
padding: 30px 15px;
|
||||
gap: 15px;
|
||||
padding: 20px 12px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nav-content a {
|
||||
@@ -1123,97 +1124,214 @@
|
||||
.nav-item-box {
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* Footer 区域 */
|
||||
.promise-box {
|
||||
padding: 20px 0;
|
||||
.nav-item-box img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.nav-item-box .item-box-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-item-box .item-box-title .desc {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ===== Footer - 精简版 ===== */
|
||||
.register-advert {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.register-advert a img {
|
||||
max-height: 60px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 承诺区域 */
|
||||
.promise-box {
|
||||
padding: 16px 8px;
|
||||
font-size: 12px;
|
||||
flex: 1 1 50%;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.promise-box img {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* Footer 主体 */
|
||||
.footer-content {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.footer-content .footer-nav {
|
||||
padding: 30px 0;
|
||||
padding: 25px 0;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.footer .footer-nav .footer-nav-left {
|
||||
margin-right: 0;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer-nav-box {
|
||||
flex: 1 1 100%;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.footer-nav-box .footer-nav-head {
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
padding: 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-nav-box .footer-nav-cont {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.footer-nav-box .footer-nav-item {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.footer .footer-record {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 侧边工具栏优化 */
|
||||
.aside-tools {
|
||||
display: none; /* 在移动端隐藏侧边工具栏，避免遮挡内容 */
|
||||
}
|
||||
|
||||
/* 保留回到顶部按钮 */
|
||||
.back-top-wrapper {
|
||||
display: flex;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
bottom: 20px;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
/* 导航栏进一步优化 */
|
||||
.nav-header .nav-left .nav-icon img {
|
||||
width: 90px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.nav-menu .nav-item {
|
||||
padding: 0 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.nav-right .control {
|
||||
margin: 0 8px;
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.promise-box {
|
||||
flex: 1 1 100%;
|
||||
padding: 15px 0;
|
||||
.footer-content .footer-nav .footer-nav-right {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-nav-right .footer-nav-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-nav-right .qr-code img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* 回到顶部按钮 */
|
||||
/* 版权信息 */
|
||||
.footer .footer-record {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 16px 0;
|
||||
text-align: center;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.footer .footer-link {
|
||||
font-size: 11px;
|
||||
height: auto;
|
||||
line-height: 1.6;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
/* ===== 侧边工具栏优化 ===== */
|
||||
.aside-tools {
|
||||
display: none; /* 移动端隐藏侧边栏 */
|
||||
}
|
||||
|
||||
/* 保留回到顶部按钮 */
|
||||
.back-top-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
bottom: 15px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
bottom: 20px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.back-top-wrapper img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* 弹窗优化 */
|
||||
#alert-container {
|
||||
width: 260px;
|
||||
top: 12%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
/* ===== 导航栏 - 超紧凑 ===== */
|
||||
.nav-header {
|
||||
height: 48px !important;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.nav-header .nav-left .nav-icon img {
|
||||
width: 80px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.nav-menu .nav-item {
|
||||
padding: 0 6px;
|
||||
font-size: 12px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.nav-right .control {
|
||||
margin: 0 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ===== Footer - 最简版 ===== */
|
||||
.promise-box {
|
||||
flex: 1 1 100%;
|
||||
padding: 12px 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.promise-box img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.footer-content .footer-nav {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.footer-nav-box .footer-nav-head {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.footer-nav-box .footer-nav-item {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.footer-nav-right .qr-code img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.footer .footer-record {
|
||||
padding: 14px 0;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* 回到顶部按钮 */
|
||||
.back-top-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
bottom: 16px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.back-top-wrapper img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
#alert-container {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user