- 添加完整响应式断点覆盖（767px/480px/360px） - 优化导航栏、Banner、快速入口移动端显示 - 解决方案模块改为竖向卡片列表（≤767px） - 热销产品表格转卡片展示 - 完善基础设施、荣誉、新闻模块移动端布局 - 添加超小屏（360px）极限压缩设计 - 优化侧边栏、汉堡菜单、返回顶部按钮 - 清理重复旧代码 - 添加优化总结文档
This commit is contained in:
yiqiu
570
css/index.css
570
css/index.css
@@ -2696,32 +2696,42 @@ html {
|
||||
bottom: -6px;
|
||||
}
|
||||
|
||||
/* ===== 解决方案 - 极简版 ===== */
|
||||
/* ===== 解决方案 - 竖向卡片列表 ===== */
|
||||
.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;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.solution-slider {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
/* 显示所有幻灯片作为普通卡片 */
|
||||
.solution-slide {
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.solution-content {
|
||||
min-height: auto;
|
||||
padding: 16px !important;
|
||||
gap: 20px;
|
||||
padding: 14px 12px !important;
|
||||
gap: 12px;
|
||||
flex-direction: column;
|
||||
border-radius: 8px;
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
border: 1px solid rgba(148, 163, 184, 0.1);
|
||||
}
|
||||
|
||||
.solution-content:hover {
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
border-color: rgba(56, 189, 248, 0.2);
|
||||
}
|
||||
|
||||
.solution-text {
|
||||
@@ -2729,41 +2739,44 @@ html {
|
||||
}
|
||||
|
||||
.solution-text h3 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 4px;
|
||||
color: #E5E7EB;
|
||||
}
|
||||
|
||||
.solution-subtitle {
|
||||
font-size: 11px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 10px;
|
||||
margin-bottom: 8px;
|
||||
color: rgba(148, 163, 184, 0.8);
|
||||
}
|
||||
|
||||
.solution-desc {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
font-size: 10px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 4px;
|
||||
color: rgba(203, 213, 225, 0.8);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.solution-desc p:nth-child(n+3) {
|
||||
display: none; /* 隐藏第3段及以后的内容 */
|
||||
.solution-desc p:nth-child(n+2) {
|
||||
display: none; /* 小屏只显示第1段 */
|
||||
}
|
||||
|
||||
.solution-link {
|
||||
padding: 8px 20px;
|
||||
font-size: 11px;
|
||||
padding: 6px 16px;
|
||||
font-size: 10px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.solution-image {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
order: -1; /* 图片移到上方 */
|
||||
}
|
||||
|
||||
@@ -3201,6 +3214,388 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏手机优化（480px） */
|
||||
@media (max-width: 480px) and (min-width: 361px) {
|
||||
/* ===== 导航栏 ===== */
|
||||
#index .nav-header {
|
||||
height: 46px !important;
|
||||
}
|
||||
|
||||
#index .nav-header .nav-left .nav-icon img {
|
||||
width: 75px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
#index .nav-right .nav-text-link {
|
||||
font-size: 10px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
/* ===== Banner ===== */
|
||||
.banner-cont .swiper-slide {
|
||||
height: 220px !important;
|
||||
}
|
||||
|
||||
.banner-cont .swiper-slide h1 {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.banner-cont .banner-desc {
|
||||
font-size: 11px !important;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
/* ===== 快速入口 ===== */
|
||||
.banner-s .banner-list .banner-item h5 {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
/* ===== 解决方案 ===== */
|
||||
.solution-content {
|
||||
padding: 12px 10px !important;
|
||||
}
|
||||
|
||||
.solution-text h3 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.solution-image {
|
||||
height: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏适配（320px） */
|
||||
@media (max-width: 360px) {
|
||||
/* ===== 导航栏 - 极限压缩 ===== */
|
||||
#index .nav-header {
|
||||
padding: 0 8px;
|
||||
height: 44px !important;
|
||||
}
|
||||
|
||||
#index .nav-header .nav-left .nav-icon img {
|
||||
width: 70px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
#index .nav-right .nav-text-link {
|
||||
font-size: 9px;
|
||||
padding: 0 4px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
#index .nav-right .nav-divider {
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#index .no-login .btn.btn-normal-light.mr-10#loginBtn,
|
||||
#index .no-login .btn.btn-normal#registBtn {
|
||||
padding: 0 8px !important;
|
||||
font-size: 9px !important;
|
||||
min-width: 45px !important;
|
||||
height: 26px !important;
|
||||
line-height: 26px !important;
|
||||
}
|
||||
|
||||
#index .no-login .btn.btn-normal#registBtn::before {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
/* ===== Banner - 极简 ===== */
|
||||
.banner-cont .swiper-slide {
|
||||
height: 200px !important;
|
||||
}
|
||||
|
||||
.banner-cont .swiper-slide h1 {
|
||||
font-size: 16px !important;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.banner-cont .banner-desc {
|
||||
font-size: 10px !important;
|
||||
margin-top: 6px !important;
|
||||
margin-bottom: 12px !important;
|
||||
-webkit-line-clamp: 1; /* 只显示1行 */
|
||||
max-height: 20px;
|
||||
}
|
||||
|
||||
.banner-tag-pill {
|
||||
font-size: 8px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.banner-cont .btn2 {
|
||||
padding: 5px 14px !important;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.banner-cont .swiper-pagination {
|
||||
bottom: 60px !important;
|
||||
}
|
||||
|
||||
/* ===== 快速入口 - 2列 ===== */
|
||||
.banner .banner-s {
|
||||
margin-top: -20px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.banner-s .banner-list {
|
||||
gap: 6px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item {
|
||||
padding: 8px 10px !important;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item .banner-item-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item h5 {
|
||||
font-size: 12px !important;
|
||||
margin-bottom: 2px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item .title-desc {
|
||||
font-size: 8px !important;
|
||||
}
|
||||
|
||||
/* ===== 热销产品 - 紧凑 ===== */
|
||||
.hot-products {
|
||||
margin-top: -20px;
|
||||
padding: 14px 0 20px !important;
|
||||
}
|
||||
|
||||
.hot-products-title h3 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.hot-products-title .subtitle {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.products-table-wrapper {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.products-table tbody tr {
|
||||
margin-bottom: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.products-table tbody td {
|
||||
padding: 5px 0 5px 65px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.products-table tbody td::before {
|
||||
left: 10px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.products-table .product-name {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.products-table .product-tag {
|
||||
font-size: 8px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.products-table .product-price {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.products-table .product-price .unit {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.products-table .btn-buy {
|
||||
padding: 4px 12px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
/* ===== Section 通用 - 极致压缩 ===== */
|
||||
.section {
|
||||
padding: 20px 0 !important;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding: 20px 8px !important;
|
||||
}
|
||||
|
||||
.section-title h2 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.section-title .section-desc {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.section-title h2::after {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
/* ===== 解决方案 - 卡片列表 ===== */
|
||||
.solution-wrapper {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.solution-slider {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.solution-content {
|
||||
padding: 10px 8px !important;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.solution-text h3 {
|
||||
font-size: 14px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.solution-subtitle {
|
||||
font-size: 9px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.solution-desc p {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.solution-link {
|
||||
padding: 5px 12px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.solution-image {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
/* ===== 基础设施 - 简化 ===== */
|
||||
.section-base {
|
||||
padding: 18px 0 !important;
|
||||
}
|
||||
|
||||
.base .base-content {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.base .base-content .fboxRow {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.base .base-content h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.base .base-content .title-desc {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.section-base .base img {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
margin: 12px auto 0;
|
||||
}
|
||||
|
||||
/* ===== 荣誉 - 极简 ===== */
|
||||
.honor-section {
|
||||
margin-top: 16px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.honor-title h3 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.honor-subtitle {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.honor-list {
|
||||
gap: 8px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.honor-item {
|
||||
width: calc(50% - 4px);
|
||||
padding: 12px 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.honor-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.honor-icon img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.honor-name {
|
||||
font-size: 10px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* ===== 新闻 - 极简 ===== */
|
||||
.section.news {
|
||||
padding: 18px 0 !important;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
margin-top: 12px;
|
||||
gap: 12px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.news-content .news-cont {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.news-content .news-head .news-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.news-content .news-head .news-more {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.news-content .news-item {
|
||||
line-height: 26px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.news-content .news-item .number {
|
||||
min-width: 14px;
|
||||
height: 14px;
|
||||
font-size: 8px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.news-content .news-item .title {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.news-content .news-item .time {
|
||||
font-size: 8px;
|
||||
min-width: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 性能优化提示 */
|
||||
@media (max-width: 768px) {
|
||||
/* 在移动设备上禁用一些复杂动画以提升性能 */
|
||||
@@ -3665,80 +4060,55 @@ html {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1199px) {
|
||||
.solution-content {
|
||||
gap: 40px;
|
||||
padding: 32px;
|
||||
}
|
||||
/* ============================================
|
||||
移动端侧边栏首页优化
|
||||
============================================ */
|
||||
|
||||
.solution-image {
|
||||
width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.solution-text h3 {
|
||||
font-size: 28px;
|
||||
}
|
||||
/* 移动端侧边栏背景优化 */
|
||||
#index .mobile-sidebar-content {
|
||||
background: linear-gradient(180deg, #020617 0%, #0F172A 100%);
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.solution-content {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.solution-image {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.solution-tabs {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.solution-tab {
|
||||
padding: 10px 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
#index .mobile-sidebar-header {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.solution-wrapper {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.solution-content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.solution-text h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.solution-subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.solution-desc p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.solution-image {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.solution-slider {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.solution-tabs {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.solution-tab {
|
||||
padding: 8px 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
#index .mobile-nav-link {
|
||||
color: #E5E7EB;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#index .mobile-nav-link:hover {
|
||||
color: #38BDF8;
|
||||
}
|
||||
|
||||
#index .mobile-user-info {
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
border: 1px solid rgba(148, 163, 184, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#index .mobile-user-avatar {
|
||||
background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
|
||||
box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
|
||||
}
|
||||
|
||||
#index .mobile-user-name {
|
||||
color: #E5E7EB;
|
||||
}
|
||||
|
||||
/* 返回顶部按钮优化 */
|
||||
#index .back-top-wrapper {
|
||||
background: rgba(56, 189, 248, 0.15);
|
||||
border: 1px solid rgba(56, 189, 248, 0.3);
|
||||
box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#index .back-top-wrapper:hover {
|
||||
background: rgba(56, 189, 248, 0.3);
|
||||
box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user