|
|
@@ -33,7 +33,9 @@
|
|
|
</view>
|
|
|
<view class="chargeData-item">
|
|
|
<u-icon name="dian" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
|
|
|
- <h2>100</h2>
|
|
|
+ <view class="chargeData-power">
|
|
|
+ <span>0</span><u-line-progress active-color="#2979ff" :percent="70" :show-percent="false"></u-line-progress><span>200</span>
|
|
|
+ </view>
|
|
|
<p>充电功率</p>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -41,6 +43,7 @@
|
|
|
<view class="chargeBtn-item">退款</view>
|
|
|
<view class="chargeBtn-item">费用说明</view>
|
|
|
</view>
|
|
|
+ <view class="chargeNext">1/2</view>
|
|
|
<u-tabbar v-model="current" :list="tabbarList" :mid-button="true" active-color="#1677ff"></u-tabbar>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -83,6 +86,16 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+ .chargeNext{
|
|
|
+ background:rgba(0,0,0,0.5);
|
|
|
+ color:#fff;
|
|
|
+ float: right;
|
|
|
+ padding: 5px 15px;
|
|
|
+ border-radius: 15px;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
.slot-wrap {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -158,6 +171,21 @@
|
|
|
font-weight: normal;
|
|
|
color:#1677FF;
|
|
|
margin: 10px 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ .chargeData-power{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ width: 120px;
|
|
|
+ text-align: center;
|
|
|
+ height: 31px;
|
|
|
+ margin: 10px 0;
|
|
|
+ span{
|
|
|
+ font-size: 14px;
|
|
|
+ color:#1677FF;
|
|
|
+ margin: 0 5px;
|
|
|
+ }
|
|
|
}
|
|
|
p{
|
|
|
color:#999;
|
