首页轮播图更改

src/views/home/index.vue

@@ -1,15 +1,15 @@
 <template>
   <div style="background-color: #f2f6f9">
-    <el-carousel height="400px" indicator-position="none">
-      <el-carousel-item>
+    <el-carousel height="400px" indicator-position="none" ref="banner">
+      <el-carousel-item ref="carouselItem">
         <div style="display: flex;width: 100%;justify-content: space-between">
           <div class="banner-img">
-            <img src="../../assets/banner/BANNER_Z1.jpg" width="100%">
+            <img src="../../assets/banner/BANNER_Z2.jpg" width="100%">
           </div>
-          <div>
-            <img src="../../assets/banner/BANNER_Z2.jpg" alt="" width="100%">
+          <div class="banner-img">
+            <img src="../../assets/banner/BANNER_Z1.jpg" alt="" width="100%">
           </div>
-          <div>
+          <div class="banner-img">
             <img src="../../assets/banner/BANNER_Z3.jpg" alt="" width="100%">
           </div>
         </div>
@@ -101,13 +101,6 @@ export default {
         {background: 'transparent url(' + require('../../assets/banner/BANNER_Z4.jpg') + ') no-repeat 0px -530px'},
         {background: 'transparent url(' + require('../../assets/banner/BANNER_Z5.jpg') + ') no-repeat 0px -540px'}
       ],
-      backgroundImage: [
-        {src: "../../assets/banner/BANNER_Z1.jpg"},
-        {src: "../../assets/banner/BANNER_Z2.jpg"},
-        {src: "../../assets/banner/BANNER_Z3.jpg"},
-        {src: "../../assets/banner/BANNER_Z4.jpg"},
-        {src: "../../assets/banner/BANNER_Z5.jpg"},
-      ],
     };
   },
   methods: {
@@ -161,20 +154,19 @@ export default {
   margin: 0;
 }
 
-.el-carousel__item:nth-child(2n) {
-  background-color: #99a9bf;
-}
-
-.el-carousel__item:nth-child(2n+1) {
-  background-color: #d3dce6;
-}
+//.el-carousel__item:nth-child(2n) {
+//  background-color: #99a9bf;
+//}
+//
+//.el-carousel__item:nth-child(2n+1) {
+//  background-color: #d3dce6;
+//}
 
 /deep/ .background {
   background-size: 100% !important
 }
-.banner {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-}
+//.banner-img {
+//  float: left;
+//  width: calc(100% / 3);
+//}
 </style>