nav.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <div class="module-item-nav module-common" :style="!module.base.m?'margin-top:0':''">
  3. <moduleBg :base="module.base" />
  4. <div class="item-nav-con" :class="module.base.c==5?'col5':''" v-if="module.base.s==0">
  5. <div class="item" v-for="(item,index) in module.list" @click="$util.openAttr(module.list,index)"
  6. :key='index'>
  7. <template v-if="item.icon.s!=2">
  8. <image mode="aspectFill" class="item-nav-img" :src="item.icon.z"
  9. v-if="item.icon.s==3 && item.icon.z">
  10. <image mode="aspectFill" class="item-nav-img" :src="$util.icon('img.jpg')" v-else>
  11. </template>
  12. <div class="item-nav-text" :style="module.base.fc!=''?'color:'+module.base.fc:''" v-if="item.text.s">
  13. <moduleText :text="item.text" />
  14. </div>
  15. </div>
  16. </div>
  17. </div>
  18. </template>
  19. <script>
  20. import moduleText from './text.vue'
  21. import moduleBg from './bg.vue'
  22. export default {
  23. props: ['module'],
  24. components: {
  25. moduleText,
  26. moduleBg
  27. },
  28. data() {
  29. return {
  30. nav: [],
  31. }
  32. },
  33. computed: {
  34. }
  35. }
  36. </script>
  37. <style>
  38. .module-common {
  39. margin-top: 10px;
  40. position: relative;
  41. }
  42. .module-item-nav .item-nav-con {
  43. position: relative;
  44. z-index: 1;
  45. padding: 0 5px;
  46. padding-bottom: 10px;
  47. display: flex;
  48. flex-wrap: wrap;
  49. }
  50. .module-item-nav .item-nav-con.col5 .item {
  51. width: 20%;
  52. }
  53. .module-item-nav .item-nav-con .item {
  54. padding-top: 12px;
  55. width: 25%;
  56. text-align: center;
  57. }
  58. .module-item-nav .item-nav-con .item .item-nav-img {
  59. width: 55px;
  60. height: 55px;
  61. margin: 0 auto;
  62. }
  63. .module-item-nav .item-nav-con .item .item-nav-text {
  64. font-size: 12px;
  65. overflow: hidden;
  66. white-space: nowrap;
  67. text-overflow: ellipsis;
  68. color: #333;
  69. padding-top: 5px;
  70. }
  71. </style>