<template>
  <!-- 单张广告 -->
  <view class="ad-wrapper"  :style="{margin:mg}" v-if="list.length == 1">
    <image :src="list[0].imgUrl" mode="aspectFill" @tap='toH5(list[0].linkUrl)' />
  </view>
  <!-- 多张广告 -->
  <view class="ads-wrapper"  :style="{margin:mgs}" v-else>
    <block v-for="(v, i)  in list" :key="i">
      <view>
        <image :src="v.imgUrl" mode="aspectFill" @tap='toH5(v.linkUrl)' />
      </view>
    </block>
  </view>
</template>

<script setup>
const props = defineProps({
  list: { type: Array, default: [] },
  mg:{type:String, default:'40rpx'},
  mgs:{type:String, default:'30rpx'}
})
const toH5 = (url) => {
  if (!url) return
  uni.navigateTo({
    url: '/pages/adH5/adH5?url=' + url
  })
}
</script>

<style lang="scss" scoped>
.ad-wrapper {
  margin: 40rpx;

  max-height: 680rpx;
  border-radius: 30rpx;
  overflow: hidden;
}

.ads-wrapper {
  display: flex;
  justify-content: space-between;
  margin: 30rpx;

  view {
    width: calc(50% - 20rpx);
    max-height: 400rpx;
    border-radius: 30rpx;
    overflow: hidden;
  }
}

image {
  width: 100%;
}
</style>
