<template>
	<div class="module-item-nav module-common" :style="!module.base.m?'margin-top:0':''">
		<moduleBg :base="module.base" />
		<div class="item-nav-con" :class="module.base.c==5?'col5':''" v-if="module.base.s==0">
			<div class="item" v-for="(item,index) in module.list" @click="$util.openAttr(module.list,index)"
				:key='index'>
				<template v-if="item.icon.s!=2">
					<image mode="aspectFill" class="item-nav-img" :src="item.icon.z"
						v-if="item.icon.s==3 && item.icon.z">
						<image mode="aspectFill" class="item-nav-img" :src="$util.icon('img.jpg')" v-else>
				</template>
				<div class="item-nav-text" :style="module.base.fc!=''?'color:'+module.base.fc:''" v-if="item.text.s">
					<moduleText :text="item.text" />
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import moduleText from './text.vue'
	import moduleBg from './bg.vue'
	export default {
		props: ['module'],
		components: {
			moduleText,
			moduleBg
		},
		data() {
			return {
				nav: [],
			}
		},
		computed: {

		}
	}
</script>

<style>
	.module-common {
		margin-top: 10px;
		position: relative;
	}

	.module-item-nav .item-nav-con {
		position: relative;
		z-index: 1;
		padding: 0 5px;
		padding-bottom: 10px;
		display: flex;
		flex-wrap: wrap;
	}

	.module-item-nav .item-nav-con.col5 .item {
		width: 20%;
	}

	.module-item-nav .item-nav-con .item {
		padding-top: 12px;
		width: 25%;
		text-align: center;
	}

	.module-item-nav .item-nav-con .item .item-nav-img {
		width: 55px;
		height: 55px;
		margin: 0 auto;
	}

	.module-item-nav .item-nav-con .item .item-nav-text {
		font-size: 12px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #333;
		padding-top: 5px;
	}
</style>
