首页轮播图

src/views/index/index.ts

@@ -27,7 +27,8 @@ export default class Index extends Vue {
         bannerlist:'',
         id_card: null,
         is_town: true,
-        lastRowMargin: ''
+        lastRowMargin: '',
+        imgHeight: ''
     };
     private citycode = localStorage.getItem("citycode");
     private cityname = localStorage.getItem("cityname");
@@ -84,6 +85,8 @@ export default class Index extends Vue {
         }
 
         this.changeMargin()
+
+        this.data.imgHeight = document.body.clientWidth * 450 / 750
     }
     async getcode(){
         let redirectURI='https://hr.hemadj.com/index';
@@ -213,4 +216,10 @@ export default class Index extends Vue {
         }
     }
 
+    mounted() {
+        window.addEventListener("resize", () =>{
+            this.data.imgHeight = document.body.clientWidth * 450 / 750
+        })
+    }
+
 }

src/views/index/index.vue

@@ -3,11 +3,11 @@
     <!-- style="margin-bottom: 5rem" -->
     <div class="index-wrap" >
         <div class="index-lunbo">
-            <el-carousel :interval="2000" indicator-position="none">
+            <el-carousel :interval="5000" indicator-position="none" :height="data.imgHeight + 'px'">
                 <!--            <el-carousel-item>-->
                 <!--                <img src="../../assets/image/banner/banner_1.jpg" alt="">-->
                 <!--            </el-carousel-item>-->
-                <el-carousel-item v-for="(item,key) in data.bannerlist">
+                <el-carousel-item v-for="(item,key) in data.bannerlist" :key="key">
                     <a :href="item.url"><img :src="item.imageurl" alt=""></a>
                 </el-carousel-item>
                 <!--<el-carousel-item>-->
@@ -169,7 +169,7 @@
     .index-lunbo  {
         // height: 225px;
         /deep/.el-carousel__container{
-            height: auto;
+            // height: auto;
         }
     }
     .el-carousel{
@@ -177,7 +177,7 @@
     }
 
     .el-carousel__item {
-        position: static;
+        // position: static;
     }
     .el-carousel__item img{
         width: 100%;