177 lines
3.3 KiB
CSS
177 lines
3.3 KiB
CSS
|
.aboutUs{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
/* background: palegoldenrod; */
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.aboutUs .container{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 73%;
|
|||
|
|
/* background: palevioletred; */
|
|||
|
|
background-image: url(../imgs/解决方案背景图.png);
|
|||
|
|
background-size:100% 100%;
|
|||
|
|
background-position: 100% 100%;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.aboutUs-content{
|
|||
|
|
width:30vw;
|
|||
|
|
height: 25vh;
|
|||
|
|
/* background: palevioletred; */
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 15vh;
|
|||
|
|
left: 15vw;
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.aboutUs-content-img{
|
|||
|
|
width: 30%;
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.with-border{
|
|||
|
|
padding: 3px;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.with-border img{
|
|||
|
|
width: 100%;
|
|||
|
|
height:auto;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.exaboutUs-content-tt{
|
|||
|
|
/* background: palevioletred; */
|
|||
|
|
width: 20vw;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: end;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.exaboutUs-content-tt p:nth-of-type(1){
|
|||
|
|
font-size: 1.3vw;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: rgba(0,0,0,0.7);
|
|||
|
|
text-align: left;
|
|||
|
|
width: 80%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.exaboutUs-content-tt p:nth-of-type(2){
|
|||
|
|
font-size: 0.8vw;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: rgba(0,0,0,0.3);
|
|||
|
|
text-align: left;
|
|||
|
|
width: 80%;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.exaboutUs-content-tt p:nth-of-type(3){
|
|||
|
|
font-size: 0.8vw;
|
|||
|
|
/* font-weight: 600; */
|
|||
|
|
color: rgba(0,0,0,0.8);
|
|||
|
|
text-align: left;
|
|||
|
|
width: 80%;
|
|||
|
|
margin-top: 8px;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
/* ---------------- */
|
|||
|
|
.CarouselBox{
|
|||
|
|
width: 40vw;
|
|||
|
|
height: 45vh;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 8vh;
|
|||
|
|
left: 5vw;
|
|||
|
|
padding-bottom: 2vh;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 轮播图容器 */
|
|||
|
|
.carousel-container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 0;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
.carousel-list {
|
|||
|
|
display: flex;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
transition: transform 0.5s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.carousel-item {
|
|||
|
|
flex: 0 0 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 优化图片渲染 */
|
|||
|
|
.carousel-item img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: contain; /* 改为contain，确保图片完整显示 */
|
|||
|
|
|
|||
|
|
user-select: none;
|
|||
|
|
/* 添加这些属性以提升性能 */
|
|||
|
|
-webkit-user-drag: none;
|
|||
|
|
-khtml-user-drag: none;
|
|||
|
|
-moz-user-drag: none;
|
|||
|
|
-o-user-drag: none;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 修正指示器容器样式 */
|
|||
|
|
.carousel-indicators {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 2vh;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
z-index: 100;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 修正指示器小圆点样式 */
|
|||
|
|
.indicator {
|
|||
|
|
width: 8px; /* 稍微调小一点 */
|
|||
|
|
height: 8px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 补充激活状态的指示器样式 */
|
|||
|
|
.indicator.active {
|
|||
|
|
background-color: #fff; /* 高亮为纯白色 */
|
|||
|
|
transform: scale(1.2); /* 稍微放大 */
|
|||
|
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.9); /* 添加发光效果 */
|
|||
|
|
}
|
|||
|
|
/* 修正容器结构相关样式 */
|
|||
|
|
.carousel-container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: relative; /* 确保是相对定位 */
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 悬停效果 */
|
|||
|
|
.indicator:hover {
|
|||
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
}
|
|||
|
|
|