fix:'水利集成登录页样式优化'

src/pages/bootpage/template/project/SL/MySwiper.js

@@ -2,7 +2,7 @@
  * @Author: 634665781 634665781@qq.com
  * @Date: 2025-04-08 09:12:30
  * @LastEditors: 634665781 634665781@qq.com
- * @LastEditTime: 2025-04-08 16:12:47
+ * @LastEditTime: 2025-04-09 15:45:00
  * @FilePath: \CivWeb\src\pages\bootpage\template\project\SL\MySwiper.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -55,14 +55,14 @@ const MySwiper = props => {
       effect="coverflow"
       slidesPerView={2} // 同时显示3张幻灯片‌:ml-citation{ref="5" data="citationList"}
       loop={true}
-      autoplay={{ delay: 1000*8 }}
+      autoplay={{ delay: 1000*3 }}
       slidesPerGroup={1} // 每次滑动移动1张（避免跳跃）
-      spaceBetween={2} // 卡片间距固定值
+      spaceBetween={0} // 卡片间距固定值 -35
       centeredSlides={true} // 中心对齐
       coverflowEffect={{
-        rotate: -15, // 侧边卡片旋转角度‌:ml-citation{ref="5" data="citationList"}
+        rotate: -16, // 侧边卡片旋转角度‌:ml-citation{ref="5" data="citationList"}
         stretch: 0, // 卡片间距拉伸比例‌:ml-citation{ref="5" data="citationList"}
-        depth: 150, // 层叠深度（值越大3D效果越明显）‌:ml-citation{ref="5" data="citationList"}
+        depth: 200, // 层叠深度（值越大3D效果越明显）‌:ml-citation{ref="5" data="citationList"}
         modifier: 2, // 效果强度系数‌:ml-citation{ref="5" data="citationList"}
         slideShadows:false, // 启用投影效果‌:ml-citation{ref="5" data="citationList"}
       }}

src/pages/bootpage/template/project/SL/index.less

@@ -4,7 +4,7 @@
 /* 容器尺寸与透视 */
 :global {.swiper-container {
   width: 100%;
-  padding: 50px 0;  /* 预留阴影空间‌:ml-citation{ref="5" data="citationList"} */
+ // padding: 50px 0;  /* 预留阴影空间‌:ml-citation{ref="5" data="citationList"} */
 }
 /*.swiper-slide.swiper-slide-active::after {
   content: '';
@@ -24,6 +24,15 @@
   transform-style: preserve-3d;  /* 启用3D变换‌:ml-citation{ref="7" data="citationList"} */
   box-shadow: 0 15px 35px rgba(0,0,0,0.2);  /* 增强立体感‌:ml-citation{ref="5" data="citationList"} */
 }
+.swiper-slide-prev{
+  transform: translate3d(0px, 0px, -500px) rotateX(0deg) rotateY(-40deg) scale(1) !important
+}
+.swiper-slide-next{
+  transform: translate3d(0px, 0px, -500px) rotateX(0deg) rotateY(40deg) scale(1)!important
+}
+.swiper-slide{
+  width: 980px!important
+}
 .swiper-slide{
  
    img{
@@ -33,13 +42,13 @@
 .swiper-slide-active{
   span{
     display: block;
-    width: 774px;
-    height: 337px;
+    width: 957px;
+    height: 397px;
     background: transparent;
     position: absolute;
     left: 7px;
     z-index: 99;
-    top: 19px;
+    top: 27px;
     pointer-events: none;
   }
 
@@ -63,7 +72,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-top: 56px;
+    margin-top: 71px;
+    margin-bottom: 19px;
     >img:nth-child(2){
       margin-left: 54px;
       margin-right: 90px;
@@ -74,6 +84,7 @@
     }
   }
   .con_{
+    position: relative;
     img{
       cursor: pointer;
     }
@@ -82,11 +93,11 @@
     justify-content: center;
     .轮播图 {
 
-      width: 1600px;
+      width:1960px; // 1600px;
       perspective: 1000px; /* 添加透视效果 */
       position: relative;
       overflow: hidden;
-      height: 517px;
+      height: 547px;
     }
 
     .轮播图__container {
@@ -125,6 +136,9 @@
     }
     
     >div:nth-child(1){
+      position: absolute;
+      z-index: 9999;
+      left: 46px;
       img{
         width: 48px;
         height: 46px;
@@ -137,6 +151,9 @@
       background: url('./img/轮播图左.png') center/100% 100% no-repeat;
     }
     >div:nth-child(3){
+      position: absolute;
+      z-index: 9999;
+      right: 46px;
       img{
         width: 48px;
         height: 46px;
@@ -158,7 +175,7 @@ font-size: 26px;
 color: #00FFF6;
     display: flex;
     align-items: center;
-    margin-top: 80px;
+    margin-top: 68px;
     img{
       margin-left: 17px;
     }