首页页面轮播图更改

src/views/home/index.vue

@@ -1,45 +1,33 @@
 <template>
   <div style="background-color: #f2f6f9">
-    <div class="banner">
-      <div class="banner-img">
-        <img src="../../assets/banner/BANNER_Z1.jpg" width="100%">
-      </div>
-      <div class="banner-img">
-        <img src="../../assets/banner/BANNER_Z2.jpg" width="100%">
-      </div>
-      <div class="banner-img">
-        <img src="../../assets/banner/BANNER_Z3.jpg" width="100%">
-      </div>
-      <div class="banner-img">
-        <img src="../../assets/banner/BANNER_Z4.jpg" width="100%">
-      </div>
-      <div class="banner-img">
-        <img src="../../assets/banner/BANNER_Z5.jpg" width="100%">
-      </div>
-    </div>
-<!--    <div class="top-background">-->
-<!--      <div class="top" style="width: 100%;display: flex;justify-content: space-between">-->
-<!--        <div style="height: 300px">-->
-<!--          <img src="../../assets/banner/BANNER_Z1.jpg" height="100%">-->
-<!--        </div>-->
-<!--        <div style="height: 300px">-->
-<!--          <img src="../../assets/banner/BANNER_Z2.jpg" height="100%">-->
-<!--        </div>-->
-<!--      </div>-->
-<!--      <div class="center" style="margin: -20px 0;z-index: 10">-->
-<!--        <div style="height: 300px">-->
-<!--          <img src="../../assets/banner/BANNER_Z3.jpg" height="100%">-->
-<!--        </div>-->
-<!--      </div>-->
-<!--      <div class="bottom" style="width: 100%;display: flex;justify-content: space-between">-->
-<!--        <div style="height: 300px">-->
-<!--          <img src="../../assets/banner/BANNER_Z4.jpg" height="100%">-->
-<!--        </div>-->
-<!--        <div style="height: 300px">-->
-<!--          <img src="../../assets/banner/BANNER_Z5.jpg" height="100%">-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </div>-->
+    <el-carousel height="400px" indicator-position="none">
+      <el-carousel-item>
+        <div style="display: flex;width: 100%;justify-content: space-between">
+          <div class="banner-img">
+            <img src="../../assets/banner/BANNER_Z1.jpg" width="100%">
+          </div>
+          <div>
+            <img src="../../assets/banner/BANNER_Z2.jpg" alt="" width="100%">
+          </div>
+          <div>
+            <img src="../../assets/banner/BANNER_Z3.jpg" alt="" width="100%">
+          </div>
+        </div>
+      </el-carousel-item>
+      <el-carousel-item>
+        <div style="display: flex;width: 100%;justify-content: space-between">
+          <div>
+            <img src="../../assets/banner/BANNER_Z4.jpg" alt="" width="100%">
+          </div>
+          <div>
+            <img src="../../assets/banner/BANNER_Z5.jpg" alt="" width="100%">
+          </div>
+          <div>
+            <img src="../../assets/banner/BANNER_Z1.jpg" alt="" width="100%">
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
 
 <!--    <el-carousel height="400px" indicator-position="none">-->
 <!--      <el-carousel-item v-for="(item,index) in backgroundDiv" :key="index">-->
@@ -55,9 +43,9 @@
     <!--    <div style="width: 60%;height: 300px;background-color: #e32121;margin: 100px auto"></div>-->
     <div style="width: 100%;background-color: #f2f6f9;padding-top: 10px;padding-bottom: 10px">
       <div style="margin-bottom: 30px">
-        <h1 style="margin-bottom: -5px;color: #154477">SERVICE</h1>
+        <h1 style="margin-bottom: -5px;color: #2A328E">SERVICE</h1>
 <!--        <span style="border-bottom: 3px solid #25c4cd;color: #154477">快捷服务</span>-->
-        <span style="border-bottom: 3px solid #D42C2C;color: #154477">快捷服务</span>
+        <span style="border-bottom: 3px solid #D42C2C;color: #2A328E">快捷服务</span>
       </div>
       <div style="width: 80%;height: 200px;display:flex;justify-content:space-around;margin: 0 auto">
         <div style="width: 500px;height: 170px;">
@@ -88,7 +76,7 @@
 <!--      <img src="../../assets/xuanchuan.png" alt="" style="width: 100%;">-->
 <!--    </div>-->
 
-    <div style="padding: 50px 0;background-color: #0d4dc9;color: #fff;margin-top: 50px">
+    <div style="padding: 50px 0;background-color: #2A328E;color: #fff;margin-top: 50px">
       <div style="width: 70%;margin: 0 auto">
         <h1>我们的优势</h1>
         <div style="line-height: 1.5">
@@ -184,14 +172,6 @@ export default {
 /deep/ .background {
   background-size: 100% !important
 }
-.top-background {
-  width: 60%;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-}
 .banner {
   width: 100%;
   display: flex;