index.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <template>
  2. <view>
  3. <u-navbar title="充电中" :is-back="false">
  4. <view class="slot-wrap">
  5. <view class="navbar-left"></view>
  6. <view class="navbar-right">
  7. <u-icon name="shuaxin" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
  8. </view>
  9. </view>
  10. </u-navbar>
  11. <view class="chargeInfo">
  12. <view class="chargeInfo-text">
  13. <p>桩名:打赏打赏安舒打赏</p>
  14. <p>桩号:121564</p>
  15. </view>
  16. <view class="chargeInfo-btn">
  17. 通道:5
  18. </view>
  19. </view>
  20. <view class="chargeImg">
  21. <img src="/static/img/charge1.png" alt="">
  22. <!-- <img src="/static/img/charge2.png" alt=""> -->
  23. </view>
  24. <view class="chargeTime">
  25. <p>剩余时长</p>
  26. <u-line-progress active-color="#2979ff" :percent="70"></u-line-progress>
  27. </view>
  28. <view class="chargeData">
  29. <view class="chargeData-item">
  30. <u-icon name="jiagebaohu" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
  31. <h2>0.25元</h2>
  32. <p>消费金额</p>
  33. </view>
  34. <view class="chargeData-item">
  35. <u-icon name="dian" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
  36. <view class="chargeData-power">
  37. <span>0</span><u-line-progress active-color="#2979ff" :percent="70" :show-percent="false"></u-line-progress><span>200</span>
  38. </view>
  39. <p>充电功率</p>
  40. </view>
  41. </view>
  42. <view class="chargeBtn">
  43. <view class="chargeBtn-item">退款</view>
  44. <view class="chargeBtn-item">费用说明</view>
  45. </view>
  46. <view class="chargeNext">1/2</view>
  47. <u-tabbar v-model="current" :list="tabbarList" :mid-button="true" active-color="#1677ff"></u-tabbar>
  48. </view>
  49. </template>
  50. <script>
  51. export default {
  52. data() {
  53. return {
  54. tabbarList: [{
  55. iconPath: "motuoche-diandongche",
  56. selectedIconPath: "motuoche-diandongche",
  57. text: '充电',
  58. count: 0,
  59. isDot: true,
  60. customIcon: true,
  61. },
  62. {
  63. iconPath: "/static/img/min_button_select.png",
  64. selectedIconPath: "/static/img/min_button_select.png",
  65. text: '充电中',
  66. midButton: true,
  67. customIcon: true,
  68. },
  69. {
  70. iconPath: "31wode",
  71. selectedIconPath: "31wode",
  72. text: '我的',
  73. count: 0,
  74. isDot: false,
  75. customIcon: true,
  76. },
  77. ],
  78. current: 0
  79. }
  80. },
  81. methods: {
  82. }
  83. }
  84. </script>
  85. <style lang="scss" scoped>
  86. .chargeNext{
  87. background:rgba(0,0,0,0.5);
  88. color:#fff;
  89. float: right;
  90. padding: 5px 15px;
  91. border-radius: 15px;
  92. font-size: 12px;
  93. margin-bottom: 10px;
  94. margin-right: 10px;
  95. }
  96. .slot-wrap {
  97. display: flex;
  98. align-items: center;
  99. justify-content: space-between;
  100. flex: 1;
  101. }
  102. .navbar-right {
  103. display: flex;
  104. margin-right: 20rpx;
  105. align-items: center;
  106. }
  107. .chargeInfo{
  108. padding: 10px;
  109. position: relative;
  110. .chargeInfo-text{
  111. p{
  112. color:#777;
  113. margin-bottom: 5px;
  114. }
  115. }
  116. .chargeInfo-btn{
  117. background-color: #E0EDFF;
  118. width: 72px;
  119. height: 32px;
  120. border-radius:16px 0 0 16px;
  121. line-height: 32px;
  122. text-align: center;
  123. position: absolute;
  124. right: 0;
  125. top:16px;
  126. color:#1677FF;
  127. }
  128. }
  129. .chargeImg{
  130. height: 300px;
  131. width: 300px;
  132. margin: 10px auto 0;
  133. img{
  134. height: 100%;
  135. width: 100%;
  136. }
  137. }
  138. .chargeTime{
  139. padding: 20px 30px;
  140. text-align: center;
  141. p{
  142. color:#999;
  143. margin-bottom: 10px;
  144. }
  145. }
  146. .chargeBtn{
  147. display: flex;
  148. justify-content: space-around;
  149. padding: 20px 50px;
  150. .chargeBtn-item{
  151. width: 80px;
  152. height: 32px;
  153. background-color: #1677FF;
  154. line-height: 32px;
  155. color:#fff;
  156. text-align: center;
  157. border-radius: 16px;
  158. }
  159. }
  160. .chargeData{
  161. display: flex;
  162. justify-content: space-around;
  163. .chargeData-item{
  164. text-align: center;
  165. h2{
  166. font-size: 24px;
  167. font-weight: normal;
  168. color:#1677FF;
  169. margin: 10px 0;
  170. }
  171. .chargeData-power{
  172. display: flex;
  173. align-items: center;
  174. display: flex;
  175. width: 120px;
  176. text-align: center;
  177. height: 31px;
  178. margin: 10px 0;
  179. span{
  180. font-size: 14px;
  181. color:#1677FF;
  182. margin: 0 5px;
  183. }
  184. }
  185. p{
  186. color:#999;
  187. }
  188. }
  189. }
  190. </style>