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

<template>
  <view v-if="storage" >
	<view class="swiper-container" :style="{backgroundColor:bgColor}" >
	  <view class="left-swiper" :style="{padding: showStyle1}" style="width: 100%; height: 100%;">
		<swiper  :style="{height:getFatherHeight}" circular autoplay="true" interval="2200" duration="200" >
		  <swiper-item v-for="(item, index) in images1" :key="index"
							@click="naviageToPage(item.link)"
							:style="{padding: showStyle1}" >
			<image :src="item.url" style="width: 100%; height: 100%;"
					  :style="{borderRadius:borderRadius1,height:getHeight}"
			></image>
		  </swiper-item>
		</swiper>
<!--        <div :style="{backgroundSize:swiperImgStyle1,borderRadius:borderRadius1,height:getHeight}" />-->
	  </view>
	  <view class="right-swiper" :style="{padding: showStyle2}" style="width: 100%; height: 100%;">
		<swiper  :style="{height:getFatherHeight}" circular autoplay="true" interval="2400" duration="200" >
		  <swiper-item v-for="(item, index) in images2" :key="index"
							@click="naviageToPage(item.link)"
							:style="{padding: showStyle2}" >
			<image :src="item.url"
					  style="width: 100%; height: 100%;"
					  :style="{borderRadius:borderRadius2,height:getHeight}"
			></image>
		  </swiper-item>
		</swiper>
<!--        <div :style="{backgroundSize:swiperImgStyle2,borderRadius:borderRadius2,height:getHeight}" />-->
	  </view>
	</view>
  </view>
  
</template>

<script>
export default {
  name: 'Banner2',
  props: ['storage', 'categoryButtomList', 'options'],
  computed: {
    getHeight() {
	  return this.options.height
	},
	bgColor() {
	  return this.options.bgColor
	},
	images1() {
	  return this.options.images1
	},
	showStyle1() {
	  if (this.options.showStyle1 == 'custom'){
		return this.options.customStyle1
	  }
	  return this.options.showStyle1
	},
	imgStyle1() {
	  return this.options.imgStyle1
	},
	borderRadius1() {
	  return this.options.borderRadius1
	},
	images2() {
	  return this.options.images2
	},
	showStyle2() {
	  if (this.options.showStyle2 == 'custom'){
		return this.options.customStyle2
	  }
	  return this.options.showStyle2
	},
	imgStyle2() {
	  return this.options.imgStyle2
	},
	borderRadius2() {
	  return this.options.borderRadius2
	},
	getFatherHeight() {

	  let paddingString = this.showStyle1;

	  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">
.swiper-container {
  display: flex;
  justify-content: space-between;
}

// .left-swiper,
// .right-swiper {
//   width: 48%; /* Adjust width according to your design */
//   /* Add any additional styles you need */
// }
</style>