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

<template>
<view class="model-12">
  <view class="graphic-nav" :style="{backgroundColor:editablePageConfig.editable_page_config_content.back_color}">
    <view class="wrap">
      <view v-for="(v,index) in editablePageConfig.editable_page_config_content.nav" :key="index" class="item" :style="'width:'+getBannerStyle.width+'%'" @click="goAdUrl(v.link)">
        <view>
          <image class="img" mode="aspectFit" :src="v.image">
        </view>
        <text class="span">{{v.text}}</text>
    </view>
    </view>
  </view>
</view>
</template>

<script>
export default {
  name: 'Model12',
  data () {
    return {
    }
  },
  props: ['editablePageConfig','editablePage'],
  computed: {
	getBannerStyle(){
		var width
		if(this.editablePageConfig.editable_page_config_content['show_format']==1){
			width=25
		}else if(this.editablePageConfig.editable_page_config_content['show_format']==2){
			width=20
		}
		return {width:width}
	}
  },
  methods: {
    goAdUrl (url) {
      uni.navigateTo({url: url })
    }
  }
}
</script>

<style lang="scss" scoped>
.model-12 .graphic-nav{
	border-radius: 5px;
}
.model-12 .graphic-nav>.wrap {
   /* overflow-x: hidden;
   white-space: nowrap;
	background: #ffffff;
	*/
	display: flex;
   /* justify-content: space-around;
	*/
	flex-wrap: wrap;
	padding: 0 5px;
}
.model-12 .graphic-nav .item {
	text-align: center;
	float: none;
	display: inline-block;
	box-sizing: border-box;
	padding: 8px 5px;
}
.model-12 .graphic-nav .item .img {
	width: 45px;
	height: 45px;
}
.model-12 .graphic-nav .item .span {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	display: block;
	font-size: 13px;
}
</style>