123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- <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>
|