couponTpl.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <view class="coupon-list">
  3. <view class="coupon-box">
  4. <view class="coupon-head">
  5. <view class="coupon-title">
  6. <view class="coupon-title-1">满100减50</view>
  7. <view class="coupon-title-time">有效期至:2020-05-12</view>
  8. </view>
  9. <view class="coupon-price">
  10. ¥<text>100</text>
  11. </view>
  12. </view>
  13. <view class="coupon-desc">
  14. 优惠卷使用说明
  15. </view>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. export default{
  21. name: 'couponTpl'
  22. }
  23. </script>
  24. <style lang="scss">
  25. .coupon-list{
  26. padding: 25rpx;
  27. }
  28. .coupon-box{
  29. background: #FFFFFF;
  30. border: 1rpx solid #eee;
  31. border-radius: 10rpx;
  32. box-shadow: 1rpx 1rpx 5rpx #eee;
  33. .coupon-head{
  34. display: flex;
  35. align-items: center;
  36. padding: 30rpx;
  37. .coupon-title{
  38. flex-grow: 1;
  39. font-size: 32rpx;
  40. .coupon-title-time{
  41. color: #999999;
  42. padding-top: 15rpx;
  43. }
  44. }
  45. .coupon-price{
  46. padding: 0 15rpx;
  47. color: red;
  48. text{
  49. font-size: 60rpx;
  50. }
  51. }
  52. }
  53. .coupon-desc{
  54. border-top: 1rpx dashed #eee;
  55. padding: 20rpx;
  56. color: #999;
  57. }
  58. }
  59. </style>