feat(zm)初始化修改轮播图效果

src/main.js

@@ -7,7 +7,7 @@ import VueAwesomeSwiper from 'vue-awesome-swiper'
 import 'swiper/dist/css/swiper.css'
 import '../public/bootstrap3/css/bootstrap.min.css'
 import '../public/bootstrap3/js/bootstrap.min.js'
-import { Button, Card,Drawer,Cascader, Carousel, Pagination  } from 'element-ui';
+import { Button, Card,Drawer,Cascader, Carousel,CarouselItem , Pagination  } from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import router from './router'
 
@@ -17,6 +17,7 @@ Vue.use(Card);
 Vue.use(Drawer);
 Vue.use(Cascader);
 Vue.use(Carousel);
+Vue.use(CarouselItem);
 Vue.use(Pagination);
 Vue.use(VueAwesomeSwiper);
 Vue.config.productionTip = false

src/views/index.vue

@@ -16,18 +16,20 @@
 
           <div class="backimg3 flex-row">
             <img src="../assets/image/img/red_zui.png" alt="">
-<!--              <div>-->
-<!--              <el-carousel indicator-position="outside">-->
-<!--                <el-carousel-item v-for="item in imgList" :key="item">-->
-<!--                  <img :src="item" alt="" style="width: 100%;height: 100%">-->
-
-<!--                </el-carousel-item>-->
-<!--              </el-carousel>-->
-<!--              </div>-->
-            <img src="../assets/image/img/lun_1.png" alt="">
+              <div style="width: 800px" class="first">
+                <el-carousel indicator-position="outside" >
+                  <el-carousel-item v-for="item in imgList" :key="item">
+                    <img :src="item" alt="" style="width: 100%;height: 100%">
+
+                  </el-carousel-item>
+                </el-carousel>
+              </div>
+<!--            <img src="../assets/image/img/lun_1.png" alt="">-->
             <img src="../assets/image/img/red_mian.png" alt="">
           </div>
 
+
+
           <div class="backimg ">
             <img src="../assets/image/img/index_map.png" alt/>
           </div>
@@ -68,6 +70,7 @@ export default {
     }
   },
   created() {
+    console.log(this.imgList)
 
   },
 
@@ -91,4 +94,15 @@ export default {
 </script>
 
 <style lang="scss">
+   .el-carousel__container{
+      height: 500px!important;
+    }
+   .el-carousel__button{
+     width: 14px;
+     height: 14px;
+     border-radius: 50%;
+   }
+   .el-carousel__indicators--outside button{
+     background-color: #f5f5f5;
+   }
 </style>