hlm_pl_mall_h5/pages/home/index/IndexThreeAds.vue

<template>
<view class="div three-ads" v-if="items && items.length">

    <view class="div ad-1" v-if="items[0]" :style="'height:'+(windowWidth/2*260/320)+'px'">
        <image mode="aspectFit" class="img" :src="items[0].adv_code" @click="goAdUrl(items[0])"/>
    </view>
    <view class="div fr">
        <view class="div ad-2" v-if="items[1]" :style="'height:'+(windowWidth/2*260/320/2)+'px'">
            <image mode="aspectFit" class="img" :src="items[1].adv_code" @click="goAdUrl(items[1])"/>
        </view>
        <view class="div ad-3" v-if="items[2]" :style="'height:'+(windowWidth/2*260/320/2)+'px'">
            <image mode="aspectFit" class="img" :src="items[2].adv_code" @click="goAdUrl(items[2])"/>
        </view>
    </view>
</view>
</template>

<script>
import { urlencode } from '@/util/common'
export default {
  name: 'IndexThreeAds',
  data () {
    return {
    }
  },
  props: ['items'],
  computed: {
    windowWidth: function () {
      const res = uni.getSystemInfoSync()
          var width=res.windowWidth
      return width
    },
  },
  methods: {
    goAdUrl (item) {
      uni.navigateTo({url:item.adv_typedate})
    }
  }
}
</script>

<style scoped lang="scss">
.three-ads{display: flex;background: #fff;padding-left:$pageSpace;padding-right:$pageSpace;padding-bottom:$modelSpace}
.three-ads .img{width:100%;border-radius: .4rem}
.three-ads .ad-1{flex:1;margin-right: .2rem}
.three-ads .fr{flex:1;display: flex;flex-direction: column;justify-content: space-between;margin-left:.2rem;}
</style>