diff --git a/common/common.css b/common/common.css index 665e3db..52ffed4 100644 --- a/common/common.css +++ b/common/common.css @@ -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; + } } diff --git a/css/index.css b/css/index.css index fe4f8d8..32b7993 100644 --- a/css/index.css +++ b/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; } }