|
@@ -0,0 +1,129 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="充电订单"></u-navbar>
|
|
|
+
|
|
|
+ <view class="record">
|
|
|
+ <view class="recordTime">
|
|
|
+ <p>5月</p>
|
|
|
+ <u-icon name="arrow-down-s-fill" custom-prefix="custom-icon" color="#B3B3B3" size="32"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="recordList">
|
|
|
+ <view class="recordList-item">
|
|
|
+ <view class="recordList-name">
|
|
|
+ <h4>荆鹏软件园充电站/A0001</h4>
|
|
|
+ <span class="state1">排队中</span>
|
|
|
+ </view>
|
|
|
+ <view class="recordList-row">
|
|
|
+ <p>开始时间:2022-05-05 12:00:00</p>
|
|
|
+ </view>
|
|
|
+ <view class="recordList-row">
|
|
|
+ <p>充电电量:20.000kW-h</p>
|
|
|
+ </view>
|
|
|
+ <view class="recordList-row">
|
|
|
+ <p>充电时长:10分20秒</p>
|
|
|
+ <h4>61.50</h4>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="recordList-item">
|
|
|
+ <view class="recordList-name">
|
|
|
+ <h4>荆鹏软件园充电站/A0001</h4>
|
|
|
+ <span class="state2">进行中</span>
|
|
|
+ </view>
|
|
|
+ <view class="recordList-row">
|
|
|
+ <p>开始时间:2022-05-05 12:00:00</p>
|
|
|
+ </view>
|
|
|
+ <view class="recordList-row">
|
|
|
+ <p>充电电量:20.000kW-h</p>
|
|
|
+ </view>
|
|
|
+ <view class="recordList-row">
|
|
|
+ <p>充电时长:10分20秒</p>
|
|
|
+ <h4>61.50</h4>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="recordList-item">
|
|
|
+ <view class="recordList-name">
|
|
|
+ <h4>荆鹏软件园充电站/A0001</h4>
|
|
|
+ <span class="state3">已结束</span>
|
|
|
+ </view>
|
|
|
+ <view class="recordList-row">
|
|
|
+ <p>开始时间:2022-05-05 12:00:00</p>
|
|
|
+ </view>
|
|
|
+ <view class="recordList-row">
|
|
|
+ <p>充电电量:20.000kW-h</p>
|
|
|
+ </view>
|
|
|
+ <view class="recordList-row">
|
|
|
+ <p>充电时长:10分20秒</p>
|
|
|
+ <h4>61.50</h4>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .recordTime{
|
|
|
+ height: 44px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-bottom: 1px solid #F2F2F2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 16px;
|
|
|
+ p{
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recordList{
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .recordList-item{
|
|
|
+ background-color: #fff;
|
|
|
+ border-bottom: 1px solid #ededed;
|
|
|
+ margin-left: 16px;
|
|
|
+ padding: 16px 16px 16px 0;
|
|
|
+ .recordList-name{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ h4{
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ .state1{
|
|
|
+ color:#8161FF;
|
|
|
+ }
|
|
|
+ .state2{
|
|
|
+ color:#00B962;
|
|
|
+ }
|
|
|
+ .state3{
|
|
|
+ color:#666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recordList-row{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 8px;
|
|
|
+ p{
|
|
|
+ color:#888;
|
|
|
+ }
|
|
|
+ h4{
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|