applyBilling.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <view>
  3. <u-navbar title="申请开票" title-color="#101010" ></u-navbar>
  4. <view class="success-icon">
  5. <image class="img" src="@/assets/img/md-check_circle vRxbRvD.svg" mode=""></image>
  6. </view>
  7. <view class="success-text">
  8. 申请成功
  9. </view>
  10. <!-- 支付详情 -->
  11. <view class="payment-infos">
  12. <view class="item">
  13. <view class="item-title">
  14. 发票项目
  15. </view>
  16. <view class="item-value">
  17. 2024年1月扣费发票
  18. </view>
  19. </view>
  20. <view class="item">
  21. <view class="item-title">
  22. 发票抬头
  23. </view>
  24. <view class="item-value">
  25. 联通公司
  26. </view>
  27. </view>
  28. <view class="item">
  29. <view class="item-title">
  30. 发票金额
  31. </view>
  32. <view class="item-value">
  33. 1000.00元
  34. </view>
  35. </view>
  36. </view>
  37. <!-- 按钮 -->
  38. <view class="btns">
  39. <button class="btn1">完成</button>
  40. <button class="btn2">查看发票详情</button>
  41. </view>
  42. </view>
  43. </template>
  44. <script>
  45. export default {
  46. data() {
  47. return {
  48. }
  49. },
  50. methods: {
  51. }
  52. }
  53. </script>
  54. <style lang="scss" scoped>
  55. page{
  56. background-color: #fff;
  57. }
  58. .success-icon{
  59. width: 132rpx;
  60. height: 132rpx;
  61. margin: 48rpx auto;
  62. .img{
  63. width: 100%;
  64. height: 100%;
  65. }
  66. }
  67. .success-text{
  68. color: rgba(51,51,51,1);
  69. font-size: 48rpx;
  70. text-align: center;
  71. }
  72. // 支付详情
  73. .payment-infos{
  74. margin-top: 64rpx;
  75. padding: 0 80rpx;
  76. .item{
  77. display: flex;
  78. justify-content: space-between;
  79. margin-bottom: 24rpx;
  80. .item-title{
  81. color: rgb(119,119,119);
  82. }
  83. .item-value{
  84. color: rgb(51,51,51);
  85. }
  86. }
  87. }
  88. // 按钮
  89. .btns{
  90. display: flex;
  91. padding: 0 80rpx;
  92. margin-top: 80rpx;
  93. .btn1{
  94. width: 280rpx;
  95. height: 80rpx;
  96. background-color: rgba(255,255,255,1);
  97. color: rgba(51,51,51,1);
  98. font-size: 32rpx;
  99. border-radius: 50px;
  100. border: 1px solid rgba(223,223,223,1);
  101. }
  102. .btn2{
  103. width: 280rpx;
  104. height: 80rpx;
  105. border-radius: 50px;
  106. background-color: rgba(22,119,255,1);
  107. color: rgba(255,255,255,1);
  108. font-size: 32rpx;
  109. border: 0px solid rgba(187,187,187,1);
  110. }
  111. }
  112. </style>