238 lines
4.3 KiB
CSS
238 lines
4.3 KiB
CSS
|
||
.banner{
|
||
width: 100%;
|
||
color: rgba(255, 255, 255, 1);
|
||
position: relative;
|
||
padding-bottom: 170px;
|
||
}
|
||
|
||
.container{
|
||
width: 100%;
|
||
height: 83vh;
|
||
background-image: url(../imgs/首页.jpg);
|
||
background-size: cover;
|
||
background-position: center;
|
||
color: rgba(255, 255, 255, 1);
|
||
|
||
}
|
||
.content{
|
||
width:60%;
|
||
height: 75%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
|
||
}
|
||
.content .title{
|
||
text-align: center;
|
||
|
||
padding-right: 4%;
|
||
}
|
||
.content .title h1{
|
||
font-size: 4.5vw;
|
||
font-weight: 600;
|
||
letter-spacing: 3px;
|
||
margin-top: 22%;
|
||
|
||
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
|
||
|
||
}
|
||
.content .title p{
|
||
font-size: 2.5vw;
|
||
font-weight: 400;
|
||
font-weight: 600;
|
||
color: rgba(255, 255, 255, 0.4);
|
||
text-align: right;
|
||
padding-right: 5vw;
|
||
letter-spacing: 10px;
|
||
}
|
||
.content .text{
|
||
width: 51%;
|
||
font-size: 0.86vw;
|
||
font-weight: 400;
|
||
text-align: left;
|
||
margin-left: 24%;
|
||
line-height: 35px;
|
||
text-indent: 2em;
|
||
letter-spacing: 2px;
|
||
}
|
||
.content .list{
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 24%;
|
||
width: 50%;
|
||
height:300px;
|
||
}
|
||
.content .list ul{
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
color: #000;
|
||
/* align-items: center; */
|
||
}
|
||
.content .list ul li{
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
|
||
}
|
||
ul li .roundImg{
|
||
width: clamp(150px, 9vw, 400px); /* 最小200px，最大400px，默认20vw */
|
||
height: auto;
|
||
list-style: none;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
padding: 5px;
|
||
background: #fff;
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
ul li .roundImg:hover{
|
||
width: clamp(150px, 10vw, 400px);
|
||
box-shadow: 0 0 20px rgba(63, 53, 206, 0.5);
|
||
|
||
}
|
||
ul li .roundImg img{
|
||
width: 100%;
|
||
height: auto;
|
||
object-fit: cover;
|
||
border-radius: 50%; /* 如果是圆形图片 */
|
||
|
||
}
|
||
|
||
ul li .textImg{
|
||
width: 100%;
|
||
|
||
margin-left: 0px;
|
||
padding-left: 0px;
|
||
margin-top: 18px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
|
||
}
|
||
|
||
ul li .imgTitle{
|
||
font-size: 23px;
|
||
font-weight: 600;
|
||
color: rgba(0, 0, 0, 0.8);
|
||
}
|
||
ul li .imgTitleEN{
|
||
font-size: 16px;
|
||
color: #A8A8A8;
|
||
|
||
}
|
||
|
||
.we{
|
||
width: 100%;
|
||
height: 50vh;
|
||
/* background-color: palegoldenrod; */
|
||
|
||
}
|
||
.weList{
|
||
width: 40%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
margin: 0 auto;
|
||
/* background: paleturquoise; */
|
||
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.weList li{
|
||
list-style: none;
|
||
width: 12vw;
|
||
/* height: 100%; */
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
cursor: pointer;
|
||
/* background: peachpuff; */
|
||
|
||
}
|
||
.weList li img{
|
||
/* width: 100%; */
|
||
object-fit: cover; /* 保持图片比例填充 */
|
||
display: block; /* 避免图片底部间隙 */
|
||
|
||
}
|
||
.core{
|
||
position: absolute;
|
||
top: 21.5vh;
|
||
left: 17%;
|
||
}
|
||
.core2{
|
||
position: absolute;
|
||
top: 21.5vh;
|
||
left: 22%;
|
||
}
|
||
.core3{
|
||
position: absolute;
|
||
top: 21.5vh;
|
||
left: 24%;
|
||
}
|
||
ul .weList1 img{
|
||
width: auto;
|
||
height: 35vh;
|
||
/* background-image: url(../imgs/核心技术.png);
|
||
background-size: 12vw auto;
|
||
background-position: 0.5vw 1.4vw;
|
||
background-repeat: no-repeat; */
|
||
}
|
||
ul .weList2 img{
|
||
width: auto;
|
||
height: 35vh;
|
||
/* background-image: url(../imgs/技术团队.png);
|
||
background-size:10.2vw auto;
|
||
background-position: 0.8vw 2vw;
|
||
background-repeat: no-repeat; */
|
||
}
|
||
ul .weList3 img{
|
||
width: auto;
|
||
height: 35vh;
|
||
/* background-image: url(../imgs/技术支持.png);
|
||
background-size: 10.95vw auto;
|
||
background-position: 0.5vw 0vw;
|
||
background-repeat: no-repeat; */
|
||
}
|
||
|
||
.weListTitle{
|
||
/* margin-top: 7vh; */
|
||
font-size: 0.8vw;
|
||
font-weight: bold;
|
||
color: rgba(0, 0, 0, 0.7);
|
||
margin-bottom: 0.6vw;
|
||
/* background: palegreen; */
|
||
height: 11vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: end;
|
||
text-align: center;
|
||
|
||
}
|
||
.weListText{
|
||
font-size: 0.6vw;
|
||
font-weight: 400;
|
||
color: rgba(0, 0, 0, 0.6);
|
||
padding-bottom: 1vh;
|
||
text-align: center;
|
||
}
|
||
|
||
|
||
|
||
|
||
|