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);
|
||
}
|
||
|