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

<template>
<view class="model-15">
    <view class="cube-wrapper" :class="'style-'+editablePageConfig.editable_page_config_content.show_format" :style="{backgroundColor:editablePageConfig.editable_page_config_content.back_color}">
        <view class="item">
            <image mode="aspectFit" class="img" :src="editablePageConfig.editable_page_config_content['adv'][0]['image']" @click="goAdUrl (editablePageConfig.editable_page_config_content['adv'][0]['link'])" />
        </view>
        <view class="line">
            <view class="item">
                <image mode="aspectFit" class="img" :src="editablePageConfig.editable_page_config_content['adv'][1]['image']" @click="goAdUrl (editablePageConfig.editable_page_config_content['adv'][1]['link'])" />
            </view>
            <view class="item" v-if="editablePageConfig.editable_page_config_content.show_format!=1">
                <image mode="aspectFit" class="img" :src="editablePageConfig.editable_page_config_content['adv'][2]['image']" @click="goAdUrl (editablePageConfig.editable_page_config_content['adv'][2]['link'])" />
            </view>
        </view>
    </view>
</view>

</template>

<script>
export default {
  name: 'Model15',
  data () {
    return {
    }
  },
  props: ['editablePageConfig','editablePage'],

  methods: {
    goAdUrl (url) {
      uni.navigateTo({url: url })
    }
  }
}
</script>

<style lang="scss" scoped>
.model-15 .cube-wrapper{
	display: flex;
	font-size: 0;
	border-radius: 5px;
	overflow: hidden;
}
.model-15 .cube-wrapper .item{
   flex:1;
}
.model-15 .cube-wrapper .item .img{
   width:100%
}
.model-15 .cube-wrapper .line{
   flex:1;
   display: flex;
}
.model-15 .cube-wrapper.style-2 .line{
   flex-direction: column;
}
.model-15 .cube-wrapper.style-3{
   flex-direction: column;
}
</style>