index.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <view class="page-box">
  3. <headContent>
  4. <template #content>
  5. <view class="haed-title">
  6. 闪电兑换
  7. </view>
  8. </template>
  9. <template #right>
  10. <share></share>
  11. </template>
  12. </headContent>
  13. <view class="box">
  14. <view class="exchange-box">
  15. <view class="">
  16. <view class="exchange-item">
  17. <view class="exchange-coin">
  18. <image class="coin-icon" src="../../static/logo.png" mode="aspectFit"></image>
  19. <text class="coin-name">USDTV</text>
  20. <text class="coin-ratio">0.09</text>
  21. </view>
  22. <text class="max-title">最大</text>
  23. </view>
  24. <view class="exchange-item">
  25. 可用余额:0.0914USDT
  26. </view>
  27. </view>
  28. <view class="exchange-item">
  29. <view class="exchange-coin">
  30. <image class="coin-icon" src="../../static/logo.png" mode="aspectFit"></image>
  31. <text class="coin-name">USDTV</text>
  32. </view>
  33. </view>
  34. <view class="exchange-switch">
  35. <image class="switch-icon" src="../../static/logo.png" mode="aspectFit"></image>
  36. </view>
  37. </view>
  38. <view class="exchange-btn">预览兑换结果</view>
  39. <view class="exchange-hint">
  40. <view class="hint-title">兑换规则</view>
  41. <view class="hint-content">
  42. 市场汇率可能变动,请以实际到账的资产数量为准:
  43. </view>
  44. <view class="hint-content">
  45. 兑换汇率由第三方制定,由于兑换成本及市场波动,您兑换的汇率可能会高于市场汇率,请仔细确认后进行操作:
  46. </view>
  47. <view class="hint-content">
  48. 平台不收取手续费,每笔兑换由第三方钱包收取基础0.3%的手续费,用于支付在交易所兑换成本。
  49. </view>
  50. </view>
  51. </view>
  52. <selectCoin ref="selectCoin"/>
  53. </view>
  54. </template>
  55. <script>
  56. import share from "@/components/headModules/share.vue"
  57. import selectCoin from "./modules/select-coin.vue"
  58. export default {
  59. name: 'exchange',
  60. components: {
  61. share,
  62. selectCoin
  63. },
  64. data() {
  65. return {
  66. };
  67. }
  68. }
  69. </script>
  70. <style>
  71. page{
  72. background-color: #EDEDEF;
  73. }
  74. </style>
  75. <style lang="scss" scoped>
  76. .box {
  77. padding: 36rpx 30rpx 0;
  78. .exchange-box {
  79. width: 690rpx;
  80. min-height: 287rpx;
  81. background: #f6f7fb;
  82. border-radius: 10rpx;
  83. padding: 39rpx 30rpx 34rpx;
  84. display: flex;
  85. flex-direction: column;
  86. justify-content: space-between;
  87. position: relative;
  88. .exchange-switch {
  89. position: absolute;
  90. right: 78rpx;
  91. bottom: 82rpx;
  92. width: 84rpx;
  93. height: 84rpx;
  94. background: #05c175;
  95. border-radius: 29rpx;
  96. .switch-icon {
  97. width: 100%;
  98. height: 100%;
  99. }
  100. }
  101. .exchange-item {
  102. display: flex;
  103. align-items: center;
  104. justify-content: space-between;
  105. .exchange-coin {
  106. display: flex;
  107. align-items: center;
  108. .coin-icon {
  109. width: 52rpx;
  110. height: 52rpx;
  111. border-radius: 50%;
  112. }
  113. .coin-name {
  114. padding-left: 13rpx;
  115. font-size: 32rpx;
  116. font-family: PingFang SC, PingFang SC-Bold;
  117. font-weight: 700;
  118. color: #1a1a1a;
  119. line-height: 44rpx;
  120. }
  121. .coin-ratio {
  122. font-size: 28rpx;
  123. font-family: PingFang SC, PingFang SC-Bold;
  124. font-weight: 700;
  125. color: #1a1a1a;
  126. line-height: 40rpx;
  127. border-left: 1rpx solid #e6e6e6;
  128. padding-left: 24rpx;
  129. margin-left: 20rpx;
  130. }
  131. }
  132. .max-title {
  133. font-size: 28rpx;
  134. font-family: PingFang SC, PingFang SC-Regular;
  135. font-weight: 400;
  136. color: #05c175;
  137. line-height: 40rpx;
  138. }
  139. }
  140. .exchange-item {
  141. padding-top: 11rpx;
  142. font-size: 24rpx;
  143. font-family: PingFang SC, PingFang SC-Regular;
  144. font-weight: 400;
  145. color: #999999;
  146. }
  147. }
  148. .exchange-btn {
  149. margin-top: 68rpx;
  150. width: 690rpx;
  151. height: 90rpx;
  152. background: #dbdce0;
  153. border-radius: 8rpx;
  154. line-height: 90rpx;
  155. text-align: center;
  156. font-size: 30rpx;
  157. font-family: PingFang SC, PingFang SC-Bold;
  158. font-weight: 700;
  159. color: #1a1a1a;
  160. }
  161. .exchange-hint {
  162. width: 100%;
  163. padding-top: 97rpx;
  164. .hint-title {
  165. font-size: 28rpx;
  166. font-family: PingFang SC, PingFang SC-Regular;
  167. font-weight: 400;
  168. color: #1a1a1a;
  169. }
  170. .hint-content{
  171. padding: 24rpx 0 11rpx;
  172. font-size: 26rpx;
  173. font-family: PingFang SC, PingFang SC-Regular;
  174. font-weight: 400;
  175. text-align: left;
  176. color: #808080;
  177. }
  178. }
  179. }
  180. </style>