graceBoxBanner.nvue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <view class="grace-box-banner" :style="{backgroundColor:background, paddingTop:padding, paddingBottom:padding, borderRadius:borderRadius}">
  3. <view class="grace-box-items" v-for="(item, index) in items" :key="index" @tap.stop="taped(index)"
  4. :style="{
  5. borderRightStyle : index+1 >= items.length ? '0rpx' : border[0],
  6. borderRightWidth : index+1 >= items.length ? '0rpx' : border[2],
  7. borderRightColor : index+1 >= items.length ? '0rpx' : border[1],
  8. }">
  9. <view class="grace-flex-center grace-box-line1">
  10. <text :style="{color:color[0],fontSize:fontSize[0], lineHeight:lineHeight}">{{item[0]}}</text>
  11. <text :style="{color:color[1],fontSize:fontSize[1], lineHeight:lineHeight}" style="margin-left:3px;">{{item[1]}}</text>
  12. </view>
  13. <text class="grace-box-line2" :style="{color:color[2],fontSize:fontSize[2]}">{{item[2]}}</text>
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. props: {
  20. items:{
  21. type : Array,
  22. default : function () {
  23. return []
  24. }
  25. },
  26. color:{
  27. type : Array,
  28. default : function () {
  29. return ['#333333', '#999999', '#999999']
  30. }
  31. },
  32. fontSize:{
  33. type : Array,
  34. default : function () {
  35. return ['36rpx', '24rpx', '24rpx']
  36. }
  37. },
  38. background : {
  39. type : String,
  40. default : ''
  41. },
  42. padding:{
  43. type : String,
  44. default : '25rpx'
  45. },
  46. border:{
  47. type:Array,
  48. default:function () {return ["none","",""];}
  49. },
  50. borderRadius : {
  51. type:String,
  52. default:'10rpx'
  53. },
  54. lineHeight:{
  55. type : String,
  56. default : '50rpx'
  57. }
  58. },
  59. methods:{
  60. taped:function (index) {
  61. this.$emit('taped', index);
  62. }
  63. }
  64. }
  65. </script>
  66. <style scoped>
  67. .grace-box-banner{flex-wrap:nowrap; flex-direction:row; overflow:hidden;}
  68. .grace-box-items{justify-content:center; width:700rpx; flex:1; text-align:center;}
  69. .grace-box-line1{align-items:center; padding-top:2px;}
  70. .grace-box-line2{margin-top:5px; text-align:center; padding-bottom:2px;}
  71. </style>