tuijian.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <div class="module-item-tuijian" :style="!module.base.m ? 'margin-top:0' : ''">
  3. <div class="item-tuijian-con">
  4. <moduleBg :base="module.base" />
  5. <moduleTwtit :title="module.title" v-if="module.title.s" />
  6. <!--样式一-->
  7. <div class="item-tuijian-style1" v-if="module.base.s == 0">
  8. <div class="item" v-for="(item,index) in module.list" @click="$util.openAttr(module.list,index)" :key="index">
  9. <p v-if="item.img"><image mode="aspectFill" :src="item.img" /></p>
  10. <p v-else><image mode="aspectFill" :src="$util.icon('img.jpg')" alt=""></p>
  11. <div class="note" v-if="module.note.s"><moduleText :text="module.note" :name="item.m" /></div>
  12. </div>
  13. </div>
  14. </div>
  15. </div>
  16. </template>
  17. <script>
  18. import moduleBg from './bg.vue';
  19. import moduleText from './text.vue';
  20. import moduleTwtit from './twtit.vue';
  21. export default {
  22. props: ['module'],
  23. components: { moduleBg, moduleText, moduleTwtit},
  24. data() {
  25. return {};
  26. },
  27. mounted() {
  28. // console.log(this.module,"module")
  29. },
  30. watch:{
  31. module(value){
  32. // console.log(value,"value")
  33. }
  34. },
  35. methods: {
  36. }
  37. };
  38. </script>
  39. <style>
  40. .module-item-tuijian {
  41. margin-top: 10px;
  42. position: relative;
  43. }
  44. .module-item-tuijian .mg0 {
  45. margin-top: 0;
  46. }
  47. .module-item-tuijian .item-tuijian-con {
  48. position: relative;
  49. overflow: hidden;
  50. }
  51. .module-item-tuijian .item-tuijian-style1 {
  52. position: relative;
  53. z-index: 1;
  54. padding: 10px 0;
  55. overflow: hidden;
  56. }
  57. .module-item-tuijian .item-tuijian-style1 .item {
  58. margin: 0 10px;
  59. margin-bottom: 10px;
  60. position: relative;
  61. overflow: hidden;
  62. }
  63. .module-item-tuijian .item-tuijian-style1 .item image {
  64. object-fit: cover;
  65. display: block;
  66. height: 150px;
  67. width: 100%;
  68. }
  69. .module-item-tuijian .item-tuijian-style1 .item .note {
  70. line-height: 18px;
  71. color: #fff;
  72. background: rgba(0, 0, 0, 0.5);
  73. position: absolute;
  74. bottom: 0;
  75. padding: 6px 10px;
  76. width: 100%;
  77. }
  78. </style>