This commit is contained in:
yiqiu
215
css/index.css
215
css/index.css
@@ -210,17 +210,58 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
/* ============================================
|
||||
移动端导航优化
|
||||
============================================ */
|
||||
|
||||
/* 移动端响应式优化 */
|
||||
@media (max-width: 768px) {
|
||||
|
||||
/* 调整导航栏高度 */
|
||||
#index .nav-header {
|
||||
height: 60px;
|
||||
height: 56px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
#index .no-login .btn.btn-normal-light.mr-10#loginBtn,
|
||||
/* 隐藏桌面端导航菜单 */
|
||||
#index .nav-menu {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 隐藏桌面端的文档、控制台链接 */
|
||||
#index .nav-desktop-link {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Logo 缩小 */
|
||||
#index .nav-icon img {
|
||||
max-height: 32px;
|
||||
}
|
||||
|
||||
/* 调整移动端注册按钮样式 */
|
||||
#index .no-login .btn.btn-normal#registBtn {
|
||||
padding: 0 20px !important;
|
||||
font-size: 13px !important;
|
||||
min-width: 80px !important;
|
||||
font-size: 14px !important;
|
||||
min-width: auto !important;
|
||||
border-radius: 20px !important;
|
||||
border-left: none !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
/* 移动端注册按钮图标隐藏 */
|
||||
#index .no-login .btn.btn-normal#registBtn::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 移动端登录按钮（如果需要显示） */
|
||||
#index .no-login .nav-text-link#loginBtn {
|
||||
padding: 0 12px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
/* 确保汉堡菜单按钮显示 */
|
||||
#index .mobile-menu-toggle {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -620,6 +661,81 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
移动端 Banner 优化
|
||||
============================================ */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
/* 调整 banner 高度 */
|
||||
.banner-cont .swiper-slide {
|
||||
height: 480px;
|
||||
/* 移动端使用更清爽的渐变背景 */
|
||||
background:
|
||||
linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, rgba(99, 102, 241, 0.05) 100%),
|
||||
linear-gradient(180deg, #f8fafc 0%, #e0f2fe 100%);
|
||||
}
|
||||
|
||||
/* 移动端遮罩层更轻 */
|
||||
.banner-cont .swiper-slide::before {
|
||||
background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(224, 242, 254, 0.9) 100%);
|
||||
}
|
||||
|
||||
/* 移动端文字内容居中对齐 */
|
||||
.banner-cont .swiper-slide .section-content {
|
||||
text-align: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* 移动端标题样式 */
|
||||
.banner-cont .swiper-slide h1 {
|
||||
font-size: 28px;
|
||||
line-height: 1.3;
|
||||
/* 移动端使用深色文字 */
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1e40af 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
/* 移动端标签居中 */
|
||||
.banner-tags {
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.banner-tag-pill {
|
||||
font-size: 11px;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
/* 移动端描述文字 */
|
||||
.banner-cont .banner-desc {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* 移动端按钮样式 */
|
||||
.banner-cont .btn2 {
|
||||
font-size: 14px;
|
||||
padding: 12px 32px;
|
||||
}
|
||||
|
||||
/* 移动端分页器位置调整 */
|
||||
.banner-cont .swiper-pagination {
|
||||
bottom: 24px !important;
|
||||
}
|
||||
|
||||
.banner-cont .swiper-pagination-bullet {
|
||||
width: 40px !important;
|
||||
height: 3px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Banner下方快速入口卡片 - 独立毛玻璃卡片设计 */
|
||||
.banner .banner-s {
|
||||
margin-top: -80px;
|
||||
@@ -732,6 +848,95 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
移动端 Banner-List 卡片优化
|
||||
============================================ */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
/* 调整 banner-s 区域 */
|
||||
.banner .banner-s {
|
||||
margin-top: -60px;
|
||||
padding: 16px 0 24px;
|
||||
}
|
||||
|
||||
.banner .banner-s .banner-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
/* 移动端卡片样式 - 轻量白色主题 */
|
||||
.banner-s .banner-list .banner-item {
|
||||
flex: none;
|
||||
min-width: auto;
|
||||
max-width: none;
|
||||
padding: 16px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
|
||||
/* 轻量背景 */
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
|
||||
/* 轻量边框和圆角 */
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
border-radius: 12px;
|
||||
|
||||
/* 轻量阴影 */
|
||||
box-shadow:
|
||||
0 2px 8px rgba(15, 23, 42, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* 移动端卡片图标 */
|
||||
.banner-s .banner-list .banner-item .banner-item-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* 移动端卡片悬停效果 */
|
||||
.banner-s .banner-list .banner-item:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(56, 189, 248, 0.3);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow:
|
||||
0 4px 16px rgba(15, 23, 42, 0.12),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
/* 移动端标题文字 - 深色 */
|
||||
.banner .banner-s .banner-list .banner-item h5 {
|
||||
color: #0f172a;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.banner .banner-s .banner-list .banner-item h5 .highlight {
|
||||
color: #0ea5e9;
|
||||
}
|
||||
|
||||
.banner .banner-s .banner-list .banner-item:hover h5 {
|
||||
color: #0ea5e9;
|
||||
}
|
||||
|
||||
/* 移动端描述文字 - 深色 */
|
||||
.banner .banner-s .banner-list .banner-item .title-desc {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 移动端光晕效果调整 */
|
||||
.banner-s .banner-list .banner-item::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
热销产品展示区域 - 卡片式布局
|
||||
============================================ */
|
||||
|
||||
Reference in New Issue
Block a user