graceCoupons.nvue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <view class="grace-coupons" :style="{backgroundColor:coupon.color}">
  3. <view class="grace-coupons-left" :style="{backgroundColor:coupon.ltBg, height:coupon.height}">
  4. <view class="grace-coupons-number">
  5. <view class="grace-coupons-number-show">
  6. <text class="grace-coupons-unit" :style="{color:coupon.color}">{{coupon.unit}}</text>
  7. <text class="grace-coupons-text" :style="{color:coupon.color}">{{coupon.number}}</text>
  8. </view>
  9. <text class="grace-coupons-left-txt" :style="{color:coupon.color}">{{coupon.txt}}</text>
  10. </view>
  11. <view class="grace-coupons-body">
  12. <text class="grace-coupons-title">{{coupon.title}}</text>
  13. <text class="grace-coupons-desc">{{coupon.desc}}</text>
  14. </view>
  15. <text class="grace-coupons-status" v-if="coupon.drawed" :style="{backgroundColor:coupon.color}">{{coupon.drawed}}</text>
  16. </view>
  17. <text class="grace-coupons-right" :style="{height:coupon.height, lineHeight:coupon.height}">{{coupon.btn}}</text>
  18. <view class="grace-coupons-sawtooth" :style="{height:coupon.height}">
  19. <view class="grace-coupons-circular" v-for="(item, index) in '1234567890'" :key="index"></view>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. props: {
  26. coupon : {
  27. type : Object,
  28. default : function () {
  29. return {}
  30. }
  31. }
  32. }
  33. }
  34. </script>
  35. <style scoped>
  36. .grace-coupons{flex-direction:row; flex-wrap:nowrap; border-top-left-radius:10rpx; border-bottom-left-radius:10rpx; margin-top:20rpx;}
  37. .grace-coupons-left{width:700rpx; height:150rpx; flex:1; padding-right:10rpx; flex-direction:row; justify-content:space-between; align-items:center; border-radius:8rpx; position:relative;}
  38. .grace-coupons-number{width:200rpx; border-right-width:1px; border-right-style:dashed; border-right-color:#D2D2D2;}
  39. .grace-coupons-number-show{flex-direction:row; flex-wrap:nowrap; align-items:flex-end; justify-content:center;}
  40. .grace-coupons-text{color:#828282; font-size:50rpx;}
  41. .grace-coupons-unit{font-size:32rpx;}
  42. .grace-coupons-left-txt{font-size:26rpx; text-align:center;}
  43. .grace-coupons-body{width:700rpx; margin-left:30rpx; flex:1;}
  44. .grace-coupons-title{font-size:30rpx; line-height:46rpx;}
  45. .grace-coupons-desc{color:#999999; margin-top:3px; font-size:24rpx; line-height:36rpx;}
  46. .grace-coupons-status{width:180rpx; padding:0 10px; height:36rpx; line-height:36rpx; font-size:20rpx; position:absolute; right:6px; top:5px; border-radius:36rpx; text-align:center; color:#FFFFFF;}
  47. .grace-coupons-right{width:150rpx; height:150rpx; font-size:30rpx; color:#FFFFFF; flex-direction:row; text-align:center;}
  48. .grace-coupons-sawtooth{width:8px; height:150rpx; overflow:hidden;}
  49. .grace-coupons-circular{width:10px; margin:2px 5px; height:10px; border-radius:10px; background-color:#F9F9F9;}
  50. </style>