首页改版

assets/scss/cus-client/cus-client-page.scss

@@ -130,7 +130,6 @@
     /* 产品和服务 */
     .products-services-box{
       padding: 136px 0 32px;
-      margin: 0 -29px;
         li{
           width: 33.33%;
           display: inline-block;
@@ -270,7 +269,6 @@
     .client-chose-box{
       padding-bottom: 80px;
       .chose-img-box{
-        margin: 0 -70px;
         li{
           width: 25%;display: inline-block;
           div{width: 190px;height: 190px;border-radius:50%;position:relative;margin: 48px auto 24px;transition: all 0.3s;background-size: cover}
@@ -318,51 +316,55 @@
       background-image: url("~static/images/client/index/index-industry-bg.png");
       background-position: center;
       padding-bottom: 80px;
+
       // 标题
       .client-title{
         color: #fff;
       }
+
+      // 轮播
+      .information-carousel-box{
+        width: 100%;
+        overflow: hidden;
+      }
+
       // 轮播组件
+      .el-carousel--horizontal{
+        overflow: visible;
+      }
       .el-carousel{
+        width: 1130px;
+        margin: 0 auto;
         margin-top: 40px;
-        .el-carousel__container{
-          height: 360px;
-        }
-
+        .el-carousel__container{width: 800px;height: 360px;margin: 0 auto;position: relative;}
       }
       .el-carousel__item{
+        width: 800px;
         background: #FFFFFF;
         border-radius: 8px;
-        .industry-img-box{
-          width: 25%;
-          height: 360px;
-          background-repeat: no-repeat;
-          background-size: cover;
-          background-position: center;
-          transition: 0.3s;
-          float: left;
-        }
+        .industry-img-box{width: 28%;height: 360px;float: left;background-repeat: no-repeat;background-size: cover;transition: 0.6s;}
         .industry-content-box{
-          margin-left: 25%;
-          padding:32px;
-          height: inherit;
-          box-sizing: border-box;
-          position: relative;
+          height: inherit;margin-left: 28%;padding:32px;box-sizing: border-box;position: relative;transition: 0.6s;
           h5{@include setFontStyle(2);color: rgba(0,0,0,0.85);margin-bottom: 16px;@include multi-line-ellipsis(2);line-height: 30px;max-height: 60px;}
           p{@include setFontStyle(-4);color: rgba(0,0,0,0.64);line-height: 24px;@include multi-line-ellipsis(6);margin-bottom: 24px;max-height: 144px;}
           a{width: 132px;height: 32px;line-height:32px;position: absolute;bottom: 32px;}
         }
       }
       .el-carousel__item.is-active{
-        height: 350px;
-        //box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);
-        box-shadow: 0 2px 8px 0 rgba(146, 143, 143, 0.76);
         .industry-img-box{width: 50%;}
-        .industry-content-box{
-          margin-left: 50%;
-        }
+        .industry-content-box{margin-left: 50%;}
       }
-      //指示器
+
+      // 左右按钮
+      .el-carousel__arrow{width: 64px;height: 64px;background-color: rgba(43, 92, 253, 0.22);@include setFontStyle(16);color: rgba(255,255,255,0.8);}
+
+      // 左箭头
+      .el-carousel__arrow--left{left:-190px;}
+
+      // 右箭头
+      .el-carousel__arrow--right{right:-190px;}
+
+      // 指示器
       .el-carousel__indicators{display: none}
     }
   }

pages/index.vue

@@ -213,7 +213,8 @@
     <!-- 新闻资讯 -->
     <div class="client-industry-information">
       <h4 class="client-title">新闻资讯</h4>
-      <el-carousel :interval="5000" type="card">
+      <div class="information-carousel-box">
+          <el-carousel :interval="4000" arrow="always">
         <el-carousel-item v-for="(item, index) in topCarousels" :key="index">
           <div
             class="industry-img-box"
@@ -226,6 +227,7 @@
           </div>
         </el-carousel-item>
       </el-carousel>
+      </div>
     </div>
 
     <!-- 为什么选择我们 -->