moneyBillDetail.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <view class="page" :style="{'min-height':(h-th)+'px','padding-top':mt+'px'}">
  3. <c-nav-bar title="账单详情"></c-nav-bar>
  4. <view class="box">
  5. <image src="https://i.ringzle.com/file/20240224/d2b9acd9522747ac89239dcde0894c93.png"></image>
  6. <text class="tit">黄沙村渔家乐12客位</text>
  7. <text class="money">+<text>200.00</text></text>
  8. </view>
  9. <view class="info">
  10. <view class="li">
  11. <text>当前状态</text>
  12. <text>交易成功</text>
  13. </view>
  14. <view class="li">
  15. <text>创建时间</text>
  16. <text>2024-02-16 11:39:24</text>
  17. </view>
  18. <view class="li">
  19. <text>订单号</text>
  20. <text>20987877676667888w</text>
  21. </view>
  22. <view class="li">
  23. <text>交易类型</text>
  24. <text>结算提现</text>
  25. </view>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. </script>
  31. <style scoped lang="scss">
  32. .box {
  33. width: calc(100% - 80rpx);
  34. padding: 30rpx 0 60rpx;
  35. color: #333;
  36. border-bottom: 1rpx solid #EFEFEF;
  37. text-align: center;
  38. image {
  39. width: 80rpx;
  40. height: 80rpx;
  41. }
  42. text {
  43. display: block;
  44. }
  45. .tit {
  46. margin: 26rpx 0 14rpx;
  47. font-size: 26rpx;
  48. }
  49. .money {
  50. font-size: 28rpx;
  51. text {
  52. display: inline-block;
  53. font-weight: bold;
  54. font-size: 32rpx;
  55. }
  56. }
  57. }
  58. .info {
  59. padding: 60rpx 40rpx 0;
  60. .li {
  61. margin-bottom: 32rpx;
  62. text{
  63. &:first-child{
  64. display: inline-block;
  65. width: 104rpx;
  66. color: #999;
  67. }
  68. margin-right: 40rpx;
  69. color: #111;
  70. }
  71. }
  72. }
  73. </style>