kxmall-ui/kxmall-app-ui/pages/index/components/banner1.vue

<template>
    <view v-if="storage" 
	:style="{height:getFatherHeight,backgroundColor:bgColor}"
	>
		<swiper circular autoplay="true" interval="2000" duration="400" >
			  <swiper-item v-for="(item, index) in images" :key="index"
							@click="naviageToPage(item.link)"
						  :style="{padding:showStyle}"
						  >
               <image :src="item.url"
					   style="width: 100%;"
					   :mode="imgStyle==='cover'?'aspectFill':'scaleToFill'"
					   :style="{borderRadius:borderRadius,height:getHeight}"
					   />
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
  export default {
    name: 'Banner1',
    props: ['storage', 'options'],
    computed: {
		images() {
		  return this.options.images
		},
      imgStyle() {
        return this.options.imgStyle
      },
      showStyle() {
      		if (this.options.showStyle == 'custom'){
      		  return this.options.customStyle
      		}
      		return this.options.showStyle
      },
	  bgColor() {
		return this.options.bgColor
	  },
      borderRadius() {
        return this.options.borderRadius
      },
      getHeight() {
        return this.options.height
      },
	  getFatherHeight() {
		  
		  let paddingString = this.showStyle;
		  
		  if(!paddingString){
			  return this.options.height
		  }
		  
		  let matches = paddingString.match(/(\d+px)\s*(\d+px)?/);
		  

		  
		  console.log('matches------',matches)
		  let top = 0;
		  let bottom = 0;
		  
		  if (matches) {
		    top = parseInt(matches[1], 10);
		    bottom = matches[2] ? parseInt(matches[2], 10) : top; // default to top value if no bottom value is present
		    console.log(`Top111111111: ${top}px, Bottom: ${bottom}px`);
		  } 
		  
		   // 将 this.options.height 转换为数值
		  let height = parseInt(this.options.height.replace('px', ''), 10);
	  
		  // 计算总高度
		  let totalHeight = height + top + bottom;
	  console.log(`totalHeight: ${totalHeight}px`);
		  // 返回带有 px 单位的字符串
		  return totalHeight + 'px';
	  }
    },
    methods: {
      naviageToPage(url, title) {
        this.$emit('naviage-to-page', url, title)
      }
    }
  }
</script>

<style scoped lang="scss">

</style>