首页改版-新闻资讯改版-第二版---需同步至爬虫项目

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

@@ -316,58 +316,55 @@
       background-image: url("~@/assets/images/client/index/" + "index-industry-bg.png");
       background-position: center;
       padding-bottom: 80px;
+
       // 标题
       .client-title{
         color: #fff;
       }
 
       // 轮播
-      .information-show-container{
-        width: 1600px;
-        margin: 0 auto;
+      .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;
-          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}
     }
   }

src/views/client/Index.vue

@@ -154,13 +154,15 @@
         <!-- 新闻资讯 -->
         <div class="client-industry-information">
             <h4 class="client-title">新闻资讯</h4>
-            <el-carousel :interval="4000" type="card">
-                <el-carousel-item v-for="(item,index) in topCarousels" :key="index">
-                    <div class="industry-img-box" :style="{backgroundImage: 'url(' + item.pic + ')'}"></div>
-                    <div class="industry-content-box"><h5>{{item.title}}</h5>
-                        <p>{{item.intro}}</p><a class="client-default-Btn" @click="checkInfo(item)">了解详情</a></div>
-                </el-carousel-item>
-            </el-carousel>
+            <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" :style="{backgroundImage: 'url(' + item.pic + ')'}"></div>
+                        <div class="industry-content-box"><h5>{{item.title}}</h5>
+                            <p>{{item.intro}}</p><a class="client-default-Btn" @click="checkInfo(item)">了解详情</a></div>
+                    </el-carousel-item>
+                </el-carousel>
+            </div>
         </div>
 
         <!-- 为什么选择我们 -->