picGrid.vue 969 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template name="picGrid">
  2. <view class="cover">
  3. <block v-for="(v, k) in item.text">
  4. <image :class="['abs-tag', config.position_f[v.text-1]]" v-if="v.pic" :src="v.pic" mode="widthFix"></image>
  5. </block>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. name: "picGrid",
  11. props: {
  12. config : {
  13. type : Object,
  14. value : null
  15. },
  16. item : {
  17. type : Object,
  18. value : null
  19. },
  20. },
  21. methods:{
  22. },
  23. }
  24. </script>
  25. <style>
  26. .abs-tag {
  27. position: fixed;
  28. color: #fff;
  29. display: flex;
  30. flex-direction: column;
  31. }
  32. .abs-tag view{
  33. line-height: 1em;
  34. overflow: hidden;
  35. }
  36. .abs-tag text {
  37. background-color: #000;
  38. margin-bottom: 10rpx;
  39. font-size: 28rpx;
  40. line-height: 1;
  41. padding: 0 2rpx;
  42. }
  43. .abs-tag.tl {
  44. }
  45. .abs-tag.tr {
  46. right: 0rpx;
  47. }
  48. .abs-tag.bl {
  49. width: 50%;
  50. height:50%;
  51. bottom: 125rpx;
  52. left: 30rpx;
  53. }
  54. .abs-tag.br {
  55. width: 50%;
  56. height:50%;
  57. bottom: 125rpx;
  58. right: 30rpx;
  59. text-align: right;
  60. }
  61. </style>