Repaymenting.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <!-- 还款中 -->
  3. <div class="repaymenting">
  4. <div class="repaymenting-item">
  5. <div class="item-name">
  6. <div class="pf400 fs14 fc1F2937">贷款金额(USDT)</div>
  7. <div class="pf500 fs14 fcDF384C">借贷产品名称</div>
  8. </div>
  9. <div class="item-number pf600 fs24 fc1F2937">1,125,158.00</div>
  10. <div class="item-line"></div>
  11. <div class="item-first margin-top11">
  12. <div class="pf500 fs12 fcA8A8A8">还款周期</div>
  13. <div class="pf500 fs12 fcDF384C">15 天</div>
  14. </div>
  15. <div class="item-first margin-top4">
  16. <div class="pf500 fs12 fcA8A8A8">贷款时间</div>
  17. <div class="pf500 fs12 fc767676">2025-11-04, 16:30</div>
  18. </div>
  19. <div class="item-first margin-top4">
  20. <div class="pf500 fs12 fcA8A8A8">利息</div>
  21. <div class="pf500 fs12 fc767676">5.45 USDT</div>
  22. </div>
  23. <div class="item-first margin-top4">
  24. <div class="pf500 fs12 fcA8A8A8">日利率</div>
  25. <div class="pf500 fs12 fc767676">0.16%</div>
  26. </div>
  27. <div class="item-first margin-top4">
  28. <div class="pf500 fs12 fcA8A8A8">还款方式</div>
  29. <div class="pf500 fs12 fc767676">到期一次性还清</div>
  30. </div>
  31. <div class="item-first margin-top4">
  32. <div class="pf500 fs12 fcA8A8A8">放款机构</div>
  33. <div class="pf500 fs12 fc767676">SDFFG508020</div>
  34. </div>
  35. <div class="item-kuan pf600 fs14 fcFFFFFF">还款</div>
  36. </div>
  37. </div>
  38. </template>
  39. <script setup></script>
  40. <style lang="less" scoped>
  41. .repaymenting {
  42. width: 345px;
  43. .repaymenting-item {
  44. display: flex;
  45. flex-direction: column;
  46. justify-content: flex-start;
  47. align-items: center;
  48. margin-top: 10px;
  49. width: 345px;
  50. height: 272px;
  51. border-radius: 8px;
  52. border: 1px solid #ebebeb;
  53. .margin-top4 {
  54. margin-top: 4px;
  55. }
  56. .margin-top11 {
  57. margin-top: 11px;
  58. }
  59. .item-name {
  60. display: flex;
  61. flex-direction: row;
  62. justify-content: space-between;
  63. align-items: center;
  64. margin-top: 11px;
  65. width: 311px;
  66. height: 24px;
  67. }
  68. .item-number {
  69. width: 311px;
  70. }
  71. .item-line {
  72. margin-top: 7px;
  73. width: 310px;
  74. height: 1px;
  75. background: #e9e9e9;
  76. }
  77. .item-first {
  78. display: flex;
  79. flex-direction: row;
  80. justify-content: space-between;
  81. align-items: center;
  82. width: 311px;
  83. height: 18px;
  84. }
  85. .item-kuan {
  86. margin-top: 7px;
  87. width: 311px;
  88. height: 40px;
  89. line-height: 40px;
  90. text-align: center;
  91. background: #df384c;
  92. border-radius: 100px;
  93. }
  94. }
  95. }
  96. </style>