diff --git a/css/index.css b/css/index.css index 3064219..afdb65e 100644 --- a/css/index.css +++ b/css/index.css @@ -1813,11 +1813,7 @@ } /* ============================================ - 企业荣誉展示区域 - 精致卡片设计 - ============================================ */ - -/* ============================================ - 企业资质与荣誉 - 左右布局设计 + 企业资质与荣誉 - 网格布局设计 ============================================ */ .honor-section { margin-top: 80px; @@ -1890,132 +1886,48 @@ line-height: 1.8; } -/* 左右布局容器 */ -.honor-wrapper { - display: flex; - gap: 60px; - max-width: 1200px; +/* 网格布局容器 */ +.honor-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 24px; + max-width: 1400px; margin: 0 auto; padding: 0 20px; - align-items: flex-start; position: relative; z-index: 1; } -/* 左侧Tab区域 */ -.honor-sidebar { - flex: 0 0 400px; - display: flex; - flex-direction: column; - gap: 16px; -} - -.honor-tabs { - display: flex; - flex-direction: column; - gap: 16px; -} - -/* Tab按钮样式 */ -.honor-tab { +/* 网格项样式 */ +.honor-grid-item { background: rgba(30, 41, 59, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 12px; - padding: 20px 24px; - cursor: pointer; + padding: 20px; transition: all 0.3s ease; - text-align: left; - position: relative; overflow: hidden; -} - -.honor-tab::before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 4px; - background: linear-gradient(180deg, #38BDF8, #6366F1); - opacity: 0; - transition: opacity 0.3s ease; -} - -.honor-tab:hover { - border-color: rgba(56, 189, 248, 0.4); - background: rgba(30, 41, 59, 0.8); - transform: translateX(4px); -} - -.honor-tab.active { - border-color: rgba(56, 189, 248, 0.5); - background: rgba(30, 41, 59, 0.9); - box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2); -} - -.honor-tab.active::before { - opacity: 1; -} - -.honor-tab-content h4 { - font-size: 18px; - font-weight: 600; - color: #F9FAFB; - margin: 0 0 8px 0; - transition: color 0.3s ease; -} - -.honor-tab.active .honor-tab-content h4 { - color: #38BDF8; -} - -.honor-tab-content p { - font-size: 14px; - color: rgba(203, 213, 225, 0.8); - margin: 0; - line-height: 1.6; -} - -/* 右侧图片展示区 */ -.honor-display { - flex: 1; - position: relative; - min-height: 500px; -} - -.honor-slides { - position: relative; - width: 100%; - height: 100%; -} - -.honor-slide { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0; - visibility: hidden; - transition: opacity 0.5s ease, visibility 0.5s ease; display: flex; align-items: center; justify-content: center; } -.honor-slide.active { - opacity: 1; - visibility: visible; - position: relative; +.honor-grid-item:hover { + border-color: rgba(56, 189, 248, 0.4); + background: rgba(30, 41, 59, 0.8); + box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2); + transform: translateY(-4px); } -.honor-slide img { - max-width: 100%; - height: auto; - border-radius: 12px; - box-shadow: 0 12px 40px rgba(15, 23, 42, 0.5); - border: 1px solid rgba(148, 163, 184, 0.2); +.honor-grid-item img { + width: 100%; + height: 180px; + object-fit: contain; + transition: all 0.3s ease; +} + +.honor-grid-item:hover img { + transform: scale(1.05); } .honor-list { @@ -2026,7 +1938,6 @@ width: 100%; max-width: 300px; } -} /* 旧样式保留(兼容性) */ .cert { @@ -3085,30 +2996,19 @@ html { font-size: 11px; } - .honor-list { - gap: 12px; + /* 网格布局 - 平板端3列 */ + .honor-grid { + grid-template-columns: repeat(3, 1fr); + gap: 16px; padding: 0 12px; } - .honor-item { - width: calc(50% - 6px); - /* 改为2列布局 */ - padding: 20px 16px; + .honor-grid-item { + padding: 16px; } - .honor-icon { - width: 80px; - height: 80px; - margin-bottom: 12px; - } - - .honor-icon img { - width: 50px; - height: 50px; - } - - .honor-name { - font-size: 13px; + .honor-grid-item img { + height: 140px; } /* ===== 新闻区域 - 紧凑 ===== */ @@ -3501,27 +3401,19 @@ html { font-size: 18px; } - .honor-list { - gap: 10px; + /* 网格布局 - 移动端2列 */ + .honor-grid { + grid-template-columns: repeat(2, 1fr); + gap: 12px; + padding: 0 10px; } - .honor-item { - padding: 16px 12px; + .honor-grid-item { + padding: 12px; } - .honor-icon { - width: 70px; - height: 70px; - margin-bottom: 10px; - } - - .honor-icon img { - width: 45px; - height: 45px; - } - - .honor-name { - font-size: 12px; + .honor-grid-item img { + height: 120px; } /* ===== 新闻 - 紧凑 ===== */ @@ -4057,31 +3949,19 @@ html { font-size: 9px; } - .honor-list { + /* 网格布局 - 小屏幕2列 */ + .honor-grid { + grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 8px; } - .honor-item { - width: calc(50% - 4px); - padding: 12px 8px; - padding-bottom: 8px; + .honor-grid-item { + padding: 10px; } - .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; + .honor-grid-item img { + height: 100px; } /* ===== 新闻 - 极简 ===== */ diff --git a/index.html b/index.html index b3eda2e..835f596 100644 --- a/index.html +++ b/index.html @@ -633,21 +633,9 @@
实体企业,资质齐全,技术独立
国三资资质证书+增值电信业务经营许可证(ISP资质)+其他资质齐全,可帮助用户办理ICP备案、公安备案等