- 优化导航栏在平板和手机端的显示 - 调整 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;
|
||||
}
|
||||
}
|
||||
|
||||
873
css/index.css
873
css/index.css
@@ -2476,67 +2476,127 @@ html {
|
||||
|
||||
/* 手机 576px - 767px */
|
||||
@media (max-width: 767px) {
|
||||
/* 导航栏优化 - 隐藏部分导航项 */
|
||||
/* ===== 导航栏 - 极简设计 ===== */
|
||||
#index .nav-header {
|
||||
padding: 0 15px;
|
||||
padding: 0 12px;
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
#index .nav-menu {
|
||||
display: none; /* 在移动端隐藏主导航菜单，可以后续添加汉堡菜单 */
|
||||
display: none; /* 移动端隐藏主导航 */
|
||||
}
|
||||
|
||||
#index .nav-header .nav-left .nav-icon img {
|
||||
width: 120px;
|
||||
height: 26px;
|
||||
width: 90px;
|
||||
height: 20px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#index .nav-right .nav-text-link {
|
||||
font-size: 13px;
|
||||
padding: 0 10px;
|
||||
font-size: 11px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
#index .nav-right .nav-divider {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
#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;
|
||||
padding: 0 12px !important;
|
||||
font-size: 11px !important;
|
||||
min-width: 55px !important;
|
||||
height: 32px !important;
|
||||
line-height: 32px !important;
|
||||
}
|
||||
|
||||
/* Banner 区域 */
|
||||
/* ===== Banner 区域 - 大幅缩小 ===== */
|
||||
.banner-cont .swiper-slide {
|
||||
height: 450px;
|
||||
height: 280px !important; /* 从 450px 减到 280px */
|
||||
}
|
||||
|
||||
.banner-cont .swiper-slide h1 {
|
||||
font-size: 32px;
|
||||
font-size: 24px !important;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.banner-cont .banner-desc {
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
font-size: 12px !important;
|
||||
margin-top: 10px !important;
|
||||
margin-bottom: 20px !important;
|
||||
line-height: 1.5;
|
||||
max-height: 60px; /* 限制最大高度 */
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3; /* 最多显示3行 */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.banner-tag-pill {
|
||||
padding: 3px 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.banner-cont .btn2 {
|
||||
padding: 12px 32px;
|
||||
font-size: 14px;
|
||||
padding: 8px 20px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
/* ===== Banner 快速入口 - 紧凑布局 ===== */
|
||||
.banner .banner-s {
|
||||
margin-top: -60px;
|
||||
margin-top: -40px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
/* 热销产品 - 改为卡片式布局 */
|
||||
.banner-s .banner-list {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item {
|
||||
padding: 12px 16px !important;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item .banner-item-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item h5 {
|
||||
font-size: 15px !important;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item .title-desc {
|
||||
font-size: 11px !important;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ===== 热销产品 - 精简卡片 ===== */
|
||||
.hot-products {
|
||||
margin-top: -80px;
|
||||
margin-top: -50px;
|
||||
padding: 20px 0 30px !important;
|
||||
}
|
||||
|
||||
.hot-products-title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hot-products-title h3 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.hot-products-title .subtitle {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.products-table-wrapper {
|
||||
padding: 0 10px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
/* 在移动端将表格转换为卡片布局 */
|
||||
/* 表格转卡片 */
|
||||
.products-table,
|
||||
.products-table thead,
|
||||
.products-table tbody,
|
||||
@@ -2546,323 +2606,586 @@ html {
|
||||
}
|
||||
|
||||
.products-table thead {
|
||||
display: none; /* 隐藏表头 */
|
||||
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);
|
||||
margin-bottom: 12px;
|
||||
padding: 14px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.products-table tbody tr:hover {
|
||||
transform: none; /* 移除桌面端的 transform 效果 */
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.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: "操作";
|
||||
padding: 8px 0 8px 90px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.products-table tbody td::before {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
font-weight: 600;
|
||||
color: #38BDF8;
|
||||
left: 14px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.products-table tbody td:nth-child(1)::before {
|
||||
content: "产品";
|
||||
}
|
||||
|
||||
.products-table .product-name {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.products-table tbody td .product-name {
|
||||
justify-content: flex-end;
|
||||
.products-table .product-tag {
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
}
|
||||
|
||||
.products-table tbody .btn-buy {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
.products-table .product-price {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.products-table .product-price .unit {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.products-table .btn-buy {
|
||||
padding: 6px 16px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ===== Section 通用 - 紧凑间距 ===== */
|
||||
.section {
|
||||
padding: 30px 0 !important;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding: 30px 12px !important;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Section 通用样式 */
|
||||
.section-title h2 {
|
||||
font-size: 28px;
|
||||
font-size: 22px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.section-title .section-desc {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 50px 0 !important;
|
||||
}
|
||||
|
||||
/* 服务区域 */
|
||||
.service .service-box {
|
||||
padding: 20px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.service .service-box .service-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 解决方案区域 */
|
||||
.resolve-content .resolve-box {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.resolve-content .resolve-box h4 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 基础设施 */
|
||||
.base .base-content h2 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.base .base-content {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/* 合作伙伴 */
|
||||
.practice .practice-box,
|
||||
.practice .brand-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 企业荣誉 */
|
||||
.cert-list .cert-item {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 小手机 最大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;
|
||||
}
|
||||
|
||||
.banner-cont .swiper-slide h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.banner-cont .banner-desc {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.banner-tag-pill {
|
||||
font-size: 11px;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item {
|
||||
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;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.section-title h2::after {
|
||||
width: 40px;
|
||||
width: 35px;
|
||||
height: 2px;
|
||||
bottom: -6px;
|
||||
}
|
||||
|
||||
/* 服务卡片 */
|
||||
.service .service-box {
|
||||
/* ===== 解决方案 - 极简版 ===== */
|
||||
.solution-wrapper {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.solution-tabs {
|
||||
gap: 6px;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.solution-tab {
|
||||
padding: 6px 12px;
|
||||
font-size: 11px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.solution-slider {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
/* 解决方案区域 */
|
||||
.resolve-content .resolve-box {
|
||||
max-width: 100%;
|
||||
.solution-content {
|
||||
min-height: auto;
|
||||
padding: 16px !important;
|
||||
gap: 20px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.solution-text {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.solution-text h3 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.solution-subtitle {
|
||||
font-size: 11px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.solution-desc {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.solution-desc p {
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 6px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2; /* 只显示2行 */
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.solution-desc p:nth-child(n+3) {
|
||||
display: none; /* 隐藏第3段及以后的内容 */
|
||||
}
|
||||
|
||||
.solution-link {
|
||||
padding: 8px 20px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.solution-image {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
order: -1; /* 图片移到上方 */
|
||||
}
|
||||
|
||||
/* ===== 基础设施 - 简化显示 ===== */
|
||||
.section-base {
|
||||
padding: 25px 0 !important;
|
||||
}
|
||||
|
||||
.base .base-content {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.base .base-content .fboxRow {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* 基础设施数据 */
|
||||
.base .base-content h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.base .base-content .title-desc {
|
||||
font-size: 13px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.section-base .base {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-base .base img {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
height: auto;
|
||||
margin: 20px auto 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 新闻标题 */
|
||||
.news-content .news-head .news-title {
|
||||
font-size: 18px;
|
||||
/* ===== 荣誉展示 - 紧凑布局 ===== */
|
||||
.honor-section {
|
||||
margin-top: 30px;
|
||||
padding: 25px 0;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.honor-title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.solution-desc p {
|
||||
.honor-title h3 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.honor-subtitle {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.honor-list {
|
||||
gap: 12px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.honor-item {
|
||||
width: calc(50% - 6px); /* 改为2列布局 */
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.honor-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.honor-icon img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.honor-name {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ===== 新闻区域 - 紧凑 ===== */
|
||||
.section.news {
|
||||
padding: 25px 0 !important;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
margin-top: 20px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.news-content .news-cont {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.news-content .news-head {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.news-content .news-head .news-title {
|
||||
font-size: 16px;
|
||||
height: auto;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.news-content .news-head .news-title::before {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.news-content .news-head .news-more {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.news-content .news-item {
|
||||
line-height: 36px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.news-content .news-item .number {
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
font-size: 11px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.news-content .news-item .title {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.news-content .news-item .time {
|
||||
font-size: 10px;
|
||||
min-width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 小手机 最大575px */
|
||||
@media (max-width: 575px) {
|
||||
/* ===== 导航栏 - 超紧凑 ===== */
|
||||
#index .nav-header {
|
||||
padding: 0 10px;
|
||||
height: 48px !important;
|
||||
}
|
||||
|
||||
#index .nav-header .nav-left .nav-icon img {
|
||||
width: 80px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#index .nav-right .nav-text-link {
|
||||
font-size: 10px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
#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 10px !important;
|
||||
font-size: 10px !important;
|
||||
min-width: 50px !important;
|
||||
height: 28px !important;
|
||||
line-height: 28px !important;
|
||||
}
|
||||
|
||||
/* ===== Banner - 极简版 ===== */
|
||||
.banner-cont .swiper-slide {
|
||||
height: 240px !important;
|
||||
}
|
||||
|
||||
.banner-cont .swiper-slide h1 {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
.banner-cont .banner-desc {
|
||||
font-size: 11px !important;
|
||||
margin-top: 8px !important;
|
||||
margin-bottom: 16px !important;
|
||||
-webkit-line-clamp: 2; /* 小屏只显示2行 */
|
||||
}
|
||||
|
||||
.banner-tag-pill {
|
||||
font-size: 9px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
.banner-cont .btn2 {
|
||||
padding: 6px 16px !important;
|
||||
font-size: 11px !important;
|
||||
}
|
||||
|
||||
.banner-cont .swiper-pagination {
|
||||
bottom: 60px !important;
|
||||
}
|
||||
|
||||
.banner-cont .swiper-pagination-bullet {
|
||||
width: 40px !important;
|
||||
}
|
||||
|
||||
/* ===== 快速入口 - 精简 ===== */
|
||||
.banner .banner-s {
|
||||
margin-top: -30px;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item {
|
||||
padding: 10px 12px !important;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item .banner-item-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item h5 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item .title-desc {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
/* ===== 热销产品 - 紧凑 ===== */
|
||||
.hot-products {
|
||||
margin-top: -40px;
|
||||
padding: 16px 0 25px !important;
|
||||
}
|
||||
|
||||
.hot-products-title h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.hot-products-title .subtitle {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.products-table-wrapper {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.products-table tbody tr {
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.6;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.products-table tbody td {
|
||||
padding: 6px 0 6px 75px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.products-table tbody td::before {
|
||||
left: 12px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.products-table .product-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.products-table .product-price {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.products-table .btn-buy {
|
||||
padding: 5px 14px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* ===== Section - 极简间距 ===== */
|
||||
.section {
|
||||
padding: 25px 0 !important;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding: 25px 10px !important;
|
||||
}
|
||||
|
||||
.section-title h2 {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.section-title .section-desc {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.section-title h2::after {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
/* ===== 解决方案 - 最小化 ===== */
|
||||
.solution-wrapper {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.solution-tabs {
|
||||
gap: 5px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.solution-tab {
|
||||
padding: 5px 10px;
|
||||
font-size: 10px;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.solution-content {
|
||||
padding: 14px !important;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.solution-text h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.solution-subtitle {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.solution-desc p {
|
||||
font-size: 10px;
|
||||
-webkit-line-clamp: 1; /* 小屏只显示1行 */
|
||||
}
|
||||
|
||||
.solution-link {
|
||||
padding: 10px 24px;
|
||||
font-size: 14px;
|
||||
padding: 7px 16px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.solution-image {
|
||||
height: 220px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.solution-slider {
|
||||
min-height: auto;
|
||||
/* ===== 基础设施 - 极简 ===== */
|
||||
.section-base {
|
||||
padding: 20px 0 !important;
|
||||
}
|
||||
|
||||
.base .base-content {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.base .base-content .fboxRow {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.base .base-content h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.base .base-content .title-desc {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.section-base .base img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
margin: 16px auto 0;
|
||||
}
|
||||
|
||||
/* ===== 荣誉 - 简化 ===== */
|
||||
.honor-section {
|
||||
margin-top: 25px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.honor-title h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.honor-list {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.honor-item {
|
||||
padding: 16px 12px;
|
||||
}
|
||||
|
||||
.honor-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.honor-icon img {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.honor-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ===== 新闻 - 紧凑 ===== */
|
||||
.section.news {
|
||||
padding: 20px 0 !important;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
margin-top: 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.news-content .news-cont {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.news-content .news-head .news-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.news-content .news-head .news-more {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.news-content .news-item {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.news-content .news-item .number {
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
font-size: 10px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.news-content .news-item .title {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.news-content .news-item .time {
|
||||
font-size: 9px;
|
||||
min-width: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user