- 优化导航栏在平板和手机端的显示 - 调整 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
277
css/index.css
277
css/index.css
@@ -2421,6 +2421,16 @@ html {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 热销产品表格在平板上开始使用横向滚动 */
|
||||
.products-table-wrapper {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.products-table {
|
||||
min-width: 800px;
|
||||
}
|
||||
|
||||
.section-title h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
@@ -2466,6 +2476,34 @@ html {
|
||||
|
||||
/* 手机 576px - 767px */
|
||||
@media (max-width: 767px) {
|
||||
/* 导航栏优化 - 隐藏部分导航项 */
|
||||
#index .nav-header {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
#index .nav-menu {
|
||||
display: none; /* 在移动端隐藏主导航菜单，可以后续添加汉堡菜单 */
|
||||
}
|
||||
|
||||
#index .nav-header .nav-left .nav-icon img {
|
||||
width: 120px;
|
||||
height: 26px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#index .nav-right .nav-text-link {
|
||||
font-size: 13px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#index .no-login .btn.btn-normal-light.mr-10#loginBtn,
|
||||
#index .no-login .btn.btn-normal#registBtn {
|
||||
padding: 0 16px !important;
|
||||
font-size: 12px !important;
|
||||
min-width: 70px !important;
|
||||
}
|
||||
|
||||
/* Banner 区域 */
|
||||
.banner-cont .swiper-slide {
|
||||
height: 450px;
|
||||
}
|
||||
@@ -2489,6 +2527,99 @@ html {
|
||||
margin-top: -60px;
|
||||
}
|
||||
|
||||
/* 热销产品 - 改为卡片式布局 */
|
||||
.hot-products {
|
||||
margin-top: -80px;
|
||||
}
|
||||
|
||||
.products-table-wrapper {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/* 在移动端将表格转换为卡片布局 */
|
||||
.products-table,
|
||||
.products-table thead,
|
||||
.products-table tbody,
|
||||
.products-table tr,
|
||||
.products-table td {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.products-table thead {
|
||||
display: none; /* 隐藏表头 */
|
||||
}
|
||||
|
||||
.products-table tbody tr {
|
||||
margin-bottom: 20px;
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
border: 1px solid rgba(148, 163, 184, 0.15);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
|
||||
}
|
||||
|
||||
.products-table tbody tr:hover {
|
||||
transform: none; /* 移除桌面端的 transform 效果 */
|
||||
}
|
||||
|
||||
.products-table tbody td {
|
||||
position: relative;
|
||||
padding: 12px 0 12px 120px;
|
||||
text-align: right;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.1);
|
||||
}
|
||||
|
||||
.products-table tbody td:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 使用 ::before 伪元素添加标签 */
|
||||
.products-table tbody td:nth-child(1)::before {
|
||||
content: "产品名称";
|
||||
}
|
||||
|
||||
.products-table tbody td:nth-child(2)::before {
|
||||
content: "CPU";
|
||||
}
|
||||
|
||||
.products-table tbody td:nth-child(3)::before {
|
||||
content: "内存";
|
||||
}
|
||||
|
||||
.products-table tbody td:nth-child(4)::before {
|
||||
content: "带宽";
|
||||
}
|
||||
|
||||
.products-table tbody td:nth-child(5)::before {
|
||||
content: "系统盘";
|
||||
}
|
||||
|
||||
.products-table tbody td:nth-child(6)::before {
|
||||
content: "价格";
|
||||
}
|
||||
|
||||
.products-table tbody td:nth-child(7)::before {
|
||||
content: "操作";
|
||||
}
|
||||
|
||||
.products-table tbody td::before {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
font-weight: 600;
|
||||
color: #38BDF8;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.products-table tbody td .product-name {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.products-table tbody .btn-buy {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Section 通用样式 */
|
||||
.section-title h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
@@ -2501,6 +2632,7 @@ html {
|
||||
padding: 50px 0 !important;
|
||||
}
|
||||
|
||||
/* 服务区域 */
|
||||
.service .service-box {
|
||||
padding: 20px;
|
||||
margin: 8px;
|
||||
@@ -2510,6 +2642,7 @@ html {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 解决方案区域 */
|
||||
.resolve-content .resolve-box {
|
||||
padding: 24px;
|
||||
}
|
||||
@@ -2518,6 +2651,7 @@ html {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 基础设施 */
|
||||
.base .base-content h2 {
|
||||
font-size: 40px;
|
||||
}
|
||||
@@ -2526,11 +2660,13 @@ html {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/* 合作伙伴 */
|
||||
.practice .practice-box,
|
||||
.practice .brand-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 企业荣誉 */
|
||||
.cert-list .cert-item {
|
||||
width: 150px;
|
||||
}
|
||||
@@ -2538,6 +2674,33 @@ html {
|
||||
|
||||
/* 小手机 最大575px */
|
||||
@media (max-width: 575px) {
|
||||
/* 导航栏进一步优化 */
|
||||
#index .nav-header {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#index .nav-header .nav-left .nav-icon img {
|
||||
width: 100px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
#index .nav-right .nav-text-link {
|
||||
font-size: 12px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
#index .nav-right .nav-divider {
|
||||
display: none; /* 隐藏分隔符节省空间 */
|
||||
}
|
||||
|
||||
#index .no-login .btn.btn-normal-light.mr-10#loginBtn,
|
||||
#index .no-login .btn.btn-normal#registBtn {
|
||||
padding: 0 12px !important;
|
||||
font-size: 11px !important;
|
||||
min-width: 60px !important;
|
||||
}
|
||||
|
||||
/* Banner 区域 */
|
||||
.banner-cont .swiper-slide {
|
||||
height: 400px;
|
||||
}
|
||||
@@ -2550,14 +2713,51 @@ html {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.banner-tag-pill {
|
||||
font-size: 11px;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item {
|
||||
padding: 22px 24px;
|
||||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item h5 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item .title-desc {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item .banner-item-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* 热销产品区域 */
|
||||
.hot-products-title h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.hot-products-title .subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.products-table tbody tr {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.products-table tbody td {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.products-table tbody td::before {
|
||||
font-size: 12px;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
/* Section 标题 */
|
||||
.section-title h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
@@ -2566,14 +2766,17 @@ html {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
/* 服务卡片 */
|
||||
.service .service-box {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
/* 解决方案区域 */
|
||||
.resolve-content .resolve-box {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 基础设施数据 */
|
||||
.base .base-content h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
@@ -2586,9 +2789,81 @@ html {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.section-base .base img {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 新闻标题 */
|
||||
.news-content .news-head .news-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.news-content .news-item .title {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.news-content .news-item .time {
|
||||
font-size: 12px;
|
||||
min-width: 85px;
|
||||
}
|
||||
|
||||
/* 解决方案区域 - 小屏幕优化 */
|
||||
.solution-tabs {
|
||||
gap: 8px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.solution-tab {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.solution-content {
|
||||
min-height: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.solution-text {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.solution-text h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.solution-subtitle {
|
||||
font-size: 13px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.solution-desc {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.solution-desc p {
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.solution-link {
|
||||
padding: 10px 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.solution-image {
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.solution-slider {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 性能优化提示 */
|
||||
|
||||
Reference in New Issue
Block a user