hlm_pl_mall_h5/pages/home/special/editable_page_model/Model1.vue

<template>
  <view class="model-1">
	  <view class="adv-wrapper" :style="{backgroundColor:editablePageConfig.editable_page_config_content.back_color}">	  
	  <swiper v-bind:style="getBannerStyle" :vertical="editablePageConfig.editable_page_config_content.show_format==1" :autoplay="true" :indicator-dots="isShowIndicators">
	    <swiper-item v-for="(item,index) in editablePageConfig.editable_page_config_content.adv" :key="index">
	  		<image mode="aspectFit" :style="getBannerStyle" :src="item.image" @click="goAdUrl(item.link)"/>
	    </swiper-item>
	  </swiper>
	  </view>
  </view>
</template>

<script>
export default {
  name: 'Model1',
  data () {
    return {}
  },
  props: ['editablePageConfig','editablePage'],
  computed: {
	itemSize(){
		let itemWidth = parseFloat(this.editablePageConfig.editable_page_config_content.image_width)
		let itemHeight = parseFloat(this.editablePageConfig.editable_page_config_content.image_height)
		if(isNaN(itemWidth) || itemWidth<=0){
		      itemWidth=750
		    }
		    if(isNaN(itemHeight) || itemHeight<=0){
		      itemHeight=376
		    }
				  const { width, height } = window.screen
				  var imageWidth=width-parseFloat(this.editablePage.editable_page_theme_config.page_margin)*2
				  
		return {
		  width: imageWidth,
		  height: itemHeight/itemWidth*imageWidth
		}
	},  
    getBannerStyle: function () {
      return {
        width: this.itemSize.width+'px',
        height: this.itemSize.height+'px'
      }
    },
    isShowIndicators () {
      if (this.editablePageConfig.editable_page_config_content.adv.length>1) {
        return true
      }
      return false
    },
  },
  methods: {
    goAdUrl (url) {
      uni.navigateTo({url: url })
    }
  }
}
</script>

<style scoped lang="scss">
	.model-1 .adv-wrapper .wrapper{position:relative}
.model-1 .adv-wrapper{
   overflow: hidden;
   position:relative;
   font-size: 0;
   border-radius: 5px;
}
.model-1 .adv-wrapper .bd{position:relative;transition: top 0.5s;}
.model-1 .adv-wrapper .hd {
   position:absolute;
   bottom:10px;
   text-align: center;
   width: 100%;
}
.model-1 .adv-wrapper .hd .li{
   display: inline-block;
   width:10px;
   height: 10px;
   border-radius:10px;
   background-color: rgba(0,0,0,.5);
   margin:0 5px;
}
.model-1 .adv-wrapper .hd .li.on{
   background-color: rgba(255,255,255,.5);
}
</style>