/* banner */ .banner-cont { width: 100%; } .banner-cont .swiper-slide { height: 500px; width: 100%; background: linear-gradient(0, #f7f9fa, #f9fafb); } .banner-cont .swiper-slide .img { /* position: absolute; */ z-index: -1; max-height: 100%; max-width: 100%; width: 100%; /* object-fit: fill; */ } .banner-cont .banner-desc { font-size: 16px; margin-top: 30px; margin-bottom: 80px; max-width: 550px; } .banner-cont .swiper-pagination-bullet { width: 36px; height: 4px; background: #D7DCE4; opacity: 1; border-radius: 3px; } .banner-cont .swiper-pagination-bullet-active { background: rgba(255, 103, 57, 1); } .banner .banner-s { box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16); border-radius: 3px; } .banner .banner-s .banner-list { display: flex; flex-wrap: wrap; padding: 0 20px; } .banner-s .banner-list .banner-item { flex: 1; cursor: pointer; width: 335px; padding: 30px 60px; } .banner-s .banner-list .banner-item:hover { background: rgba(247, 248, 249, 1); } .banner-s .banner-list .banner-item:hover h5 { color: #FF6739; } .banner-list .banner-item .banner-tag { font-size: 12px; color: #FF6739; border: 1px solid #FF6739; padding: 5px 8px; border-radius: 3px; } /* 服务内容 */ .service-content { display: flex; margin-top: 60px; margin: -10px; margin-top: 50px; } /* 服务模块整体背景:与首页 banner 保持暗色科技感基调 */ .section.service { background: radial-gradient(circle at 10% 0%, rgba(56, 189, 248, 0.18) 0%, transparent 40%), linear-gradient(180deg, #020617 0%, #020617 100%); } .section.service .section-title h2 { color: #F9FAFB; } .section.service .section-title .section-desc { color: rgba(148, 163, 184, 0.95); } .service .service-box { min-height: 191px; margin: 10px; position: relative; padding: 30px; border-radius: 14px; /* 服务卡片使用深色半透明面板,叠加在暗色背景上 */ background: radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.22) 0%, transparent 42%), rgba(15, 23, 42, 0.96); border: 1px solid rgba(148, 163, 184, 0.4); box-shadow: 0 22px 60px rgba(15, 23, 42, 0.85); color: #E5E7EB; } .service .service-box:hover { box-shadow: 0 26px 70px rgba(15, 23, 42, 0.95); border-color: rgba(56, 189, 248, 0.75); } .service .service-box .service-title { color: #F9FAFB; } .service .service-box:hover h4 { color: #38BDF8; } .service .service-hot::before { content: ''; height: 60px; width: 60px; position: absolute; right: -4px; top: -4px; background: url('../assets/img/index/hot.png'); background-repeat: no-repeat; background-size: 100%; } .service-box .title-desc { margin: 16px 0; height: 42px; color: rgba(148, 163, 184, 0.96); } .service .service-tag-group { display: flex; } .service .service-tag-group .service-tag { display: flex; align-items: center; justify-items: center; margin-right: 8px; font-size: 12px; padding: 0 12px; color: #E5E7EB; height: 24px; background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(148, 163, 184, 0.6); border-radius: 999px; } /* 解决方案 */ .resolve { background: #13182C url(../assets/img/index/home-bg.png) no-repeat center center; background-size: cover; } .resolve-content { margin: -10px; margin-top: 60px; } .resolve-content .resolve-box { position: relative; top: 0; max-width: 335px; padding: 30px; margin: 10px; background: #F7F8F9; box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16); opacity: 1; border-radius: 10px; transition: .5s all; cursor: pointer; background-size: cover; background-repeat: no-repeat; } .resolve-content .resolve-box:nth-child(1) { background-image: url('../assets/img/index/solution-1.png'); } .resolve-content .resolve-box:nth-child(2) { background-image: url('../assets/img/index/solution-2.png'); } .resolve-content .resolve-box:nth-child(3) { background-image: url('../assets/img/index/solution-3.png'); } .resolve-content .resolve-box:nth-child(4) { background-image: url('../assets/img/index/solution-7.png'); } .resolve-content .fboxRow:nth-child(2) .resolve-box:nth-child(1) { background-image: url('../assets/img/index/solution-4.png'); } .resolve-content .fboxRow:nth-child(2) .resolve-box:nth-child(2) { background-image: url('../assets/img/index/solution-5.png'); } .resolve-content .fboxRow:nth-child(2) .resolve-box:nth-child(3) { background-image: url('../assets/img/index/solution-6.png'); } .resolve-content .fboxRow:nth-child(2) .resolve-box:nth-child(4) { background-image: url('../assets/img/index/solution-8.png'); } .resolve-content .resolve-box:hover { top: -10px; } .resolve-content .resolve-box:hover h4, .resolve-content .resolve-box:hover .resolve-link { color: rgba(56, 189, 248, 1); } .resolve-content .resolve-box h4 { color: rgba(0, 0, 0, 0.9); font-size: 22px; margin-bottom: 20px; } .resolve-content .resolve-box .resolve-link { color: rgba(0, 0, 0, 0.60); margin-top: 60px; font-size: 14px; } /* 服务实践 */ .practice { /* 与解决方案区域衔接的暗色背景 */ background: linear-gradient(180deg, #020617 0%, #020617 100%); } .practice .section-title h2 { color: #F9FAFB; } .practice .section-title .section-desc { color: rgba(148, 163, 184, 0.95); } .practice .practice-content { margin: -10px; margin-top: 40px; flex-wrap: wrap; } .practice .practice-box { margin: 10px; padding: 30px; width: 453px; border-radius: 14px; text-align: center; /* 实践卡片使用深色面板,避免在暗背景上出现纯白块突兀 */ background: rgba(15, 23, 42, 0.96); border: 1px solid rgba(148, 163, 184, 0.4); box-shadow: 0 20px 45px rgba(15, 23, 42, 0.85); color: #E5E7EB; flex-shrink: 0; } .practice .practice-box img { width: 177px; height: 66px; cursor: pointer; } .practice-box:hover { box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16); } .brand-group { margin: -10px; display: flex; flex-wrap: wrap; } .practice .brand-box { margin: 10px; width: 216px; height: 124px; align-items: center; display: flex; justify-content: center; border: 1px solid #E6EAED; } .practice .brand-box img { width: 86px; height: 75px; cursor: pointer; } .practice .brand-box:hover { box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16); } /* 基础措施 */ .section-base { /* 统一为暗色科技风背景,下方 cert 卡片及地图以亮色卡片形式凸显 */ background: radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.18) 0%, transparent 40%), linear-gradient(180deg, #020617 0%, #020617 100%); } .section-base .base { margin-top: 42px; } .section-base>.section-content { padding: 62px 20px 0; } .section-base .base img { width: calc(100% - 140px); margin-left: 35px; height: 520px; padding-right: 80px; } .base .base-content { margin-bottom: 100px; } .base .base-content .title-desc { white-space: nowrap; color: rgba(148, 163, 184, 0.95); } .section-base .section-title h2 { color: #F9FAFB; } .section-base .section-title .section-desc { color: rgba(148, 163, 184, 0.95); } .section-base .base-content h2 { color: #F9FAFB; } .cert { border: 2px solid #FFFFFF; border-radius: 3px; background: linear-gradient(180deg, #F4F6F8 0%, #FDFEFE 100%); box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.08); } .cert-list { padding: 0 20px; } .cert-list .cert-item { padding: 13px 0; display: flex; flex-direction: column; align-items: center; width: 200px; } .cert-list .cert-item img { height: 56px; width: 56px; cursor: pointer; } .cert-list .cert-item .title-desc { font-size: 12px; margin-top: 5px; } /* 新闻 */ .section.news { background: linear-gradient(180deg, #020617 0%, #020617 100%); } .section.news .section-title h2 { color: #F9FAFB; } .section.news .section-title .section-desc { color: rgba(148, 163, 184, 0.95); } .news-content { margin-top: 60px; display: flex; flex-wrap: wrap; gap: 130px; } .news-content .news-cont { flex: 1; /* 新闻列表块采用深色卡片,与整体暗色背景协调 */ background: rgba(15, 23, 42, 0.92); border-radius: 16px; padding: 24px 24px 16px; box-shadow: 0 20px 45px rgba(15, 23, 42, 0.7); border: 1px solid rgba(148, 163, 184, 0.4); } .news-content .news-head .news-title { padding-left: 5px; font-size: 22px; } .news-content .news-head .news-title { position: relative; padding-left: 10px; font-size: 18px; line-height: 20px; height: 20px; } .news-content .news-head .news-title::before { content: ''; width: 2px; height: 20px; position: absolute; left: 0; top: 0; background: #38BDF8; } .news-content .news-head .news-more { font-size: 14px; color: rgba(148, 163, 184, 0.9); } .news-content .news-head .news-more a { color: inherit; } .news-content .news-head .news-more a:hover { color: #E5E7EB; } .news-content .news-list { margin-top: 15px; } .news-content .news-list .news-item { line-height: 50px; display: flex; justify-content: space-between; border-bottom: 1px dashed #E6EAED; } .news-content .news-cont .news-item:nth-child(1) .number { background: rgba(56, 189, 248, 1); } .news-content .news-cont .news-item:nth-child(2) .number { background: rgba(56, 189, 248, 1); } .news-content .news-cont .news-item:nth-child(3) .number { background: rgba(56, 189, 248, 1); } .news-content .news-item .number { margin-right: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; width: 14px; height: 14px; background: rgba(222, 222, 222, 1); border-radius: 3px; } .news-content .news-item .title { font-size: 14px; color: #E5E7EB; } .news-content .news-item .title:hover { color: rgba(56, 189, 248, 1); } .news-content .news-item .time { color: rgba(148, 163, 184, 0.9); font-size: 13px; min-width: 100px; text-align: right; } .index .footer-link { display: block; } .over-hide { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 24px; } .over-hide+p { display: flex; flex-wrap: wrap; word-break: break-all; }