| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 |
- /* 标题区域:浅色风格配色 */
- .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;
- }
- }
|