394 lines
7.1 KiB
CSS
394 lines
7.1 KiB
CSS
body,*{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.banner{
|
|
width: 100%;
|
|
height: 160vh;
|
|
box-sizing: border-box;
|
|
padding-top: 12vh;
|
|
background: linear-gradient(to bottom, rgba(241, 241, 241, 1) 12vh,#C0E0F5 90vh, #C0E0F5 100%);
|
|
/* background: linear-gradient(to bottom, rgba(245, 245, 245, 1) 0%,#C0E0F5 50%, #C0E0F5 100%); */
|
|
|
|
}
|
|
|
|
|
|
.banner-top{
|
|
width: 100%;
|
|
height: 70vh;
|
|
background-image: url(../imgs/model/bg.png);
|
|
background-size: 36vw auto;
|
|
background-position: 89% 0vw;
|
|
background-repeat: no-repeat;
|
|
margin: 0;
|
|
}
|
|
.banner-top-content{
|
|
box-sizing: border-box;
|
|
width: 40%;
|
|
height: 60%;
|
|
margin-left: 15vw;
|
|
color: #1A2B3D;
|
|
font-weight: 400;
|
|
padding-top: 5vw;
|
|
}
|
|
.banner-top-content p:nth-child(1){
|
|
font-size: 4.5vw;
|
|
margin: 0;
|
|
|
|
|
|
}
|
|
.banner-top-content p:nth-child(2){
|
|
font-size: 4.5vw;
|
|
margin: 0;
|
|
|
|
}
|
|
.banner-top-content p:nth-child(3){
|
|
font-size: 0.95vw;
|
|
margin: 0;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
width: 78%;
|
|
margin-top: 1vh;
|
|
|
|
}
|
|
|
|
|
|
.banner-bottom {
|
|
width: 100%;
|
|
height: 70vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* background: #f5f9fc; */
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.carousel-container {
|
|
position: relative;
|
|
width: 80%;
|
|
/* height: 400px; */
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.carousel-track {
|
|
display: flex;
|
|
transition: transform 0.8s cubic-bezier(0.16, 0.77, 0.58, 0.97);
|
|
height: 100%;
|
|
align-items: center;
|
|
}
|
|
|
|
.carousel-item {
|
|
width: 28vw;
|
|
height: 55vh !important;
|
|
|
|
border-radius: 20px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
|
margin: 0 20px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
padding: 1vw;
|
|
}
|
|
|
|
/* 确保中间图片完全清晰的关键修改 */
|
|
.carousel-item img {
|
|
width: 100%;
|
|
height: 80%;
|
|
object-fit: cover;
|
|
border-radius: 20px 20px 0 0;
|
|
/* 明确设置无滤镜 */
|
|
filter: none !important;
|
|
}
|
|
|
|
/* 仅对两侧卡片应用模糊效果 */
|
|
.carousel-item.left-side img,
|
|
.carousel-item.right-side img {
|
|
filter: blur(2px) brightness(0.9);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* 中间卡片保持原始状态 */
|
|
.carousel-item.center {
|
|
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
|
|
/* 确保不继承任何模糊效果 */
|
|
filter: none !important;
|
|
}
|
|
|
|
.carousel-caption {
|
|
width: 100%;
|
|
padding: 20px;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
color: #444444;
|
|
font-weight: 500;
|
|
background: #fff;
|
|
margin-top: 5vh;
|
|
}
|
|
|
|
/* 渐变遮罩 */
|
|
.carousel-fade {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 28vw;
|
|
height: 100%;
|
|
z-index: 5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.carousel-fade.left {
|
|
width: 50vw;
|
|
left: 0;
|
|
background: linear-gradient(to right, #C0E0F5 0%, #C0E0F5 10%, rgba(207, 231, 246, 0) 80%);
|
|
}
|
|
|
|
.carousel-fade.right {
|
|
right: 0;
|
|
background: linear-gradient(to left, rgba(194, 225, 245, 1) 0%, rgba(245, 249, 252, 0) 80%);
|
|
}
|
|
|
|
/* 指示点放在盒子外部 */
|
|
.carousel-dots {
|
|
position: absolute;
|
|
left: 56%;
|
|
bottom: -40px;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 12px;
|
|
z-index: 8;
|
|
/* background: red; */
|
|
}
|
|
|
|
.carousel-dots .dot {
|
|
width: 1vw;
|
|
height: 1vw;
|
|
border-radius: 50%;
|
|
background:#fff;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.carousel-dots .dot.active {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
/* --------------场景需求分析--------------------- */
|
|
.website-design-content{
|
|
width: 100%;
|
|
height: 370vh;
|
|
background-color: #f1f1f1;
|
|
background-image: url(../imgs/home/bg1.svg);
|
|
background-size: 100% auto;
|
|
background-position: 89% 106%;
|
|
background-repeat: no-repeat;
|
|
padding-top: 25vh;
|
|
}
|
|
.list-item{
|
|
width: 80%;
|
|
height: 50vh;
|
|
flex-shrink: 0;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
/* background: palegoldenrod; */
|
|
|
|
}
|
|
|
|
.list-item img{
|
|
width: 35vw;
|
|
height:auto;
|
|
}
|
|
.list-item div{
|
|
width: 40vw;
|
|
height:auto;
|
|
margin-left: 10vw;
|
|
}
|
|
.list-item div h3{
|
|
font-size: 1.8vw;
|
|
font-weight: 600;
|
|
color: #1B2A3D;
|
|
}
|
|
.list-item div p{
|
|
width: 80%;
|
|
font-size: 1vw;
|
|
color: #666;
|
|
margin-top: 5vh;
|
|
}
|
|
|
|
.right-arrow{
|
|
width: 95%;
|
|
/* height: 30vh; */
|
|
text-align: center;
|
|
/* background: palegoldenrod; */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.right-arrow img{
|
|
width: 18vw;
|
|
height: auto;
|
|
}
|
|
.left-arrow {
|
|
width: 20vw; /* 根据实际需要设置 */
|
|
height: auto;
|
|
transform: scaleX(-1); /* 或 rotate(180deg) */
|
|
}
|
|
/* ------------------服务能力--------------------- */
|
|
.serviceProcess{
|
|
width: 100%;
|
|
height: 150vh;
|
|
background: linear-gradient(to bottom, #397FF9 0%,#397FF9 50%, #5CB1E5 100%);
|
|
padding-top: 10vh;
|
|
|
|
}
|
|
.serviceProcess h3{
|
|
width: 100%;
|
|
font-size: 3vw;
|
|
font-weight: 400;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
.serviceProcess p{
|
|
width: 100%;
|
|
font-size: 0.9vw;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
text-align: center;
|
|
margin-top: 3vh;
|
|
}
|
|
|
|
.process-list{
|
|
width: 90%;
|
|
height: 100vh;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 3vh;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.process-item{
|
|
width: 24vw;
|
|
height: 53vh;
|
|
background: #fff;
|
|
list-style: none;
|
|
margin-left: 3vw;
|
|
border-radius: 18px;
|
|
box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
|
|
box-sizing: border-box;
|
|
padding: 2vw;
|
|
text-align: center;
|
|
position: relative;
|
|
margin-top: 8vh;
|
|
}
|
|
.process-item img{
|
|
width:auto;
|
|
height: 10vh;
|
|
margin-top: 2vh;
|
|
}
|
|
.process-item h3{
|
|
font-size: 1.1vw;
|
|
color: #1B2A3D;
|
|
margin-top: 3vh;
|
|
}
|
|
.process-item h3 span{
|
|
|
|
font-weight: 600;
|
|
color: #1B2A3D;
|
|
margin-top: 3vh;
|
|
}
|
|
|
|
.process-item p{
|
|
margin: 0 auto;
|
|
width: 90%;
|
|
font-size: 0.95vw;
|
|
color: #666;
|
|
margin-top: 3vh;
|
|
text-align: justify;
|
|
}
|
|
|
|
.processBth{
|
|
width: 100%;
|
|
/* height: 8vh; */
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
bottom: 5vh;
|
|
left: 0;
|
|
}
|
|
|
|
.processBth a{
|
|
display: inline-block;
|
|
width: 9vw;
|
|
height: 2.3vw;
|
|
background: #fff;
|
|
border-radius: 1vw;
|
|
background: #3478FD;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.processBth a span{
|
|
font-size: 0.8vw;
|
|
color: #fff;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.processBth a img{
|
|
width: 1vw;
|
|
height:auto;
|
|
margin: 0;
|
|
margin-left: 0.5vw;
|
|
}
|
|
|
|
.processBth a:hover{
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* ---------------- */
|
|
|
|
.serviceBox{
|
|
width: 100%;
|
|
height: 30vh;
|
|
background: #f1f1f1;
|
|
}
|
|
.serviceBox-content{
|
|
width: 60%;
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.serviceBox-content img{
|
|
|
|
width: 16vw;
|
|
height: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|