所有项目提交

驭鑫/yxsilicon/css/solution.css

@@ -0,0 +1,176 @@
+.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);
+}
+