m-title.vue 863 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <view class="m-tap">
  3. <image :src="imgSrc" mode=""></image>
  4. <text class="iconfont iconenter">更多</text>
  5. </view>
  6. <!-- <view class="">
  7. 9999999999999
  8. </view> -->
  9. </template>
  10. <script>
  11. export default {
  12. name: 'm-title',
  13. data() {
  14. return {
  15. imgUrl: [
  16. '../static/img/seckill.png','../static/img/groupBooking.png','../static/img/exchange.png'
  17. ]
  18. };
  19. },
  20. props: {
  21. num: {
  22. type: String,
  23. default: '0'
  24. }
  25. },
  26. computed: {
  27. imgSrc() {
  28. return this.imgUrl[this.num*1]
  29. }
  30. }
  31. };
  32. </script>
  33. <style lang="scss">
  34. .m-tap {
  35. height: 66rpx;
  36. margin-top: 49rpx;
  37. display: flex;
  38. position: relative;
  39. image {
  40. width: 295rpx;
  41. height: 66rpx;
  42. position: absolute;
  43. left: 0;
  44. right: 0;
  45. margin: 0 auto;
  46. }
  47. .iconenter {
  48. font-size: 26rpx;
  49. color: $font-color-light;
  50. position: absolute;
  51. right: 25rpx;
  52. top: 21rpx;
  53. }
  54. }
  55. </style>