micro_vue/src/scrm_pages/Enviroments/enviromentsdetail.vue

<template>
    <div class="page_enviromentsdetail">
      <div class="imgList" v-for="it in this.EnImages" :key="it.id">
       <img class="img" :src="it.enviroimages"  :preview="it.id"/>  
      </div>
    </div>
</template>

<script>
    import Swiper from "swiper";
   import { getEnviromentImages } from "@/api/micro/micro";
    export default {
        name: "enviromentsdetail",
        data(){
            return{
               EnImages:[],
            }
        },
   
        methods: {
         getEnviromentImages(id,orgid){
            getEnviromentImages(id,orgid).then(response=>{
               if(response.data.state == 1){
                 var enviro =  response.data.data.enviro;
                 console.log("enviro是什么",enviro)
                 this.EnImages = enviro;
               }
            })
         },

        initSwiper() {
           var mySwiper2 = new Swiper(".imgSwiper", {
           slidesPerView: 2,
          });
         },
        },
      mounted() {
        this.initSwiper();
     },

     updated() {
       this.initSwiper();
       this.$previewRefresh();
      },
     created(){
          const id =  this.$route.query.id;
          const orgid = this.$route.query.orgid;
          this.getEnviromentImages(id,orgid);
       },
    }
</script>

<style lang="scss">
  // .carousel {
  //   width: 100%;
  //   height: 200px;
  //   float: left;
  //   padding-right: 1rem;
  //   .img{
  //       width: 100%;
  //       height: 100%;
  //       float: left;
  //   }
  // }
 
//  .swiper-wrapper{
//      width:50%;
//  }
.page_enviromentsdetail{
 height: 100%;
  .imgList{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
  }
  .img{
    width: 48%;
    height: 200px;
    margin-bottom: 20px;
    
  }
}
</style>