/* 标题区域:浅色风格配色 */ .carousel-title { text-align: center; margin-bottom: 40px; display: flex; /* 开启弹性布局 */ justify-content: center; /* 水平居中(左右居中) */ width: 100%; } .main-title { font-size: 48px; color: #1e40af; /* 深蓝色主标题 */ font-weight: 600; margin-bottom: 12px; } .sub-title { font-size: 24px; color: #3b82f6; /* 浅蓝色副标题 */ display: flex; align-items: center; justify-content: center; gap: 8px; } .sub-title .icon { width: 28px; height: 28px; background: radial-gradient(#93c5fd, #3b82f6); /* 浅蓝渐变图标 */ border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; } /* 轮播容器核心:相对定位,控制卡片层叠 */ .carousel-container { position: relative; width: 100%; height: 600px; overflow: hidden; } /* 轮播卡片容器:绝对定位,统一控制所有卡片 */ .carousel-cards { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* 轮播卡片通用样式:浅色背景 */ .carousel-card { position: absolute; top: 0; left: 0; width: 50%; height: 450px; background: rgba(255, 255, 255, 0.95); /* 白色半透明卡片 */ border: 1px solid #e2e8f0; /* 浅灰色边框 */ border-radius: 16px; overflow: hidden; display: flex; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 轻微阴影增强层次感 */ transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 1; opacity: 0; transform: translateX(0) scale(0.85); } /* 激活卡片:居中置顶,完全显示 */ .carousel-card.active { left: 50%; transform: translateX(-50%) scale(1); opacity: 1; z-index: 10; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* 激活卡片增强阴影 */ } /* 左侧卡片:左偏移,半透明,层级低于激活卡片 */ .carousel-card.prev { left: -20%; opacity: 0.6; /* 浅色版提高透明度,保证可见性 */ transform: translateX(0) scale(0.85); z-index: 5; } /* 右侧卡片:右偏移,半透明,层级低于激活卡片 */ .carousel-card.next { left: 70%; opacity: 0.6; transform: translateX(0) scale(0.85); z-index: 5; } /* 卡片内容区域:文字部分(深色文字适配浅色背景) */ .card-content { flex: 1; padding: 60px 50px; color: #1e293b; /* 深灰色文字 */ } .card-content h3 { font-size: 32px; margin-bottom: 24px; color: #0f172a; /* 近黑色标题 */ } .card-content p { font-size: 16px; line-height: 1.8; color: #475569; /* 中灰色正文 */ margin-bottom: 40px; max-width: 400px; } .card-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: #3b82f6; /* 蓝色按钮 */ color: #ffffff; /* 白色文字 */ border-radius: 30px; text-decoration: none; font-size: 16px; font-weight: 500; transition: all 0.3s ease; border: none; cursor: pointer; } .card-btn:hover { background: #2563eb; /* 按钮hover加深 */ transform: translateY(-2px); box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3); } /* 卡片图片区域 */ .card-image { flex: 1.2; height: 100%; background-size: cover; background-position: center; opacity: 0.95; /* 图片轻微降透,适配浅色 */ } /* 轮播控制箭头:浅色风格 */ .carousel-arrow { position: absolute; bottom: 0px; width: 50px; height: 50px; border-radius: 50%; background: rgba(59, 130, 246, 0.1); /* 浅蓝色半透明箭头 */ border: 1px solid #bfdbfe; /* 浅蓝边框 */ color: #1e40af; /* 深蓝色箭头图标 */ font-size: 20px; cursor: pointer; z-index: 20; transition: all 0.3s ease; } .carousel-arrow:hover { background: rgba(59, 130, 246, 0.2); /* hover加深 */ border-color: #93c5fd; } .arrow-prev { left: 50%; transform: translateX(-100px); } .arrow-next { left: 50%; transform: translateX(40px); } /* 响应式适配:小屏幕自动调整 */ @media (max-width: 1200px) { .carousel-container { width: 90%; } .carousel-card { width: 80%; } .card-content { padding: 40px 30px; } }