|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <view style="background-color: #fff;">
|
|
|
+ <view style="background-color: #fff; padding-bottom: 196px;">
|
|
|
<u-navbar title="启动中">
|
|
|
</u-navbar>
|
|
|
<view class="iconfont tittle-font">
|
|
@@ -7,14 +7,98 @@
|
|
|
</view>
|
|
|
|
|
|
<view class="progress-bar">
|
|
|
- <u-circle-progress width="300" active-color="#2979ff" :percent="0">
|
|
|
+ <u-circle-progress width="500" active-color="#2979ff" :percent="0" border-width="50">
|
|
|
<view class="u-progress-content">
|
|
|
<view class="u-progress-dot"></view>
|
|
|
<text class='u-progress-info'>0.0%</text>
|
|
|
</view>
|
|
|
</u-circle-progress>
|
|
|
</view>
|
|
|
+ <view class="starting">
|
|
|
+ 启动中...</view>
|
|
|
+ <view class="timer">
|
|
|
+ 00:00:00
|
|
|
+ </view>
|
|
|
+ <view class="charged">
|
|
|
+ 已充电0度
|
|
|
+ </view>
|
|
|
+ <view class="cost">
|
|
|
+ <view class="">
|
|
|
+ <view class="cost-top">
|
|
|
+ 0元
|
|
|
+ </view>
|
|
|
+ <view class="cost-bottom">
|
|
|
+ 实时费用
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="">
|
|
|
+ <view class="cost-top">
|
|
|
+ 50.00元
|
|
|
+ <view class="iconfont cost-font"></view>
|
|
|
+ </view>
|
|
|
+ <view class="cost-bottom">
|
|
|
+ 账户余额
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="power">
|
|
|
+ <view>
|
|
|
+ <view class="power-num">
|
|
|
+ 0.0v
|
|
|
+ </view>
|
|
|
+ <view class="power-text">
|
|
|
+ 电压
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view>
|
|
|
+ <view class="power-num">
|
|
|
+ 0.00kW
|
|
|
+ </view>
|
|
|
+ <view class="power-text">
|
|
|
+ 功率
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view>
|
|
|
+ <view class="power-num">
|
|
|
+ 0.0A
|
|
|
+ </view>
|
|
|
+ <view class="power-text">
|
|
|
+ 电流
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info">
|
|
|
+ <view class="info-name">
|
|
|
+ 充电车辆
|
|
|
+ </view>
|
|
|
+ <view class="info-text">
|
|
|
+ 鄂D999999
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info">
|
|
|
+ <view class="info-name">
|
|
|
+ 站点
|
|
|
+ </view>
|
|
|
+ <view class="info-text">
|
|
|
+ 荆鹏软件充电站 / A000152
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info">
|
|
|
+ <view class="info-name">
|
|
|
+ 占位费说明
|
|
|
+ </view>
|
|
|
+ <view class="info-text">
|
|
|
+ 停止充电后30分钟即开始收取占位费用,1元/分钟
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <u-button type="primary" shape="circle">主要按钮</u-button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -31,9 +115,9 @@
|
|
|
}
|
|
|
|
|
|
.progress-bar{
|
|
|
- margin:10px auto;
|
|
|
- width: 220px;
|
|
|
- height: 220px;
|
|
|
+ margin:0 auto;
|
|
|
+ width: 100%;
|
|
|
+ // height: 400px;
|
|
|
|
|
|
|
|
|
.u-progress-content {
|
|
@@ -41,6 +125,9 @@
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
+ /deep/.u-circle-progress{
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
|
|
|
.u-progress-dot {
|
|
|
width: 16rpx;
|
|
@@ -50,9 +137,10 @@
|
|
|
}
|
|
|
|
|
|
.u-progress-info {
|
|
|
- font-size: 28rpx;
|
|
|
+ font-size: 36px;
|
|
|
padding-left: 16rpx;
|
|
|
- letter-spacing: 2rpx
|
|
|
+ letter-spacing: 2rpx;
|
|
|
+ color: rgba(51, 51, 51, 100);
|
|
|
}
|
|
|
/deep/.u-progress-dot[data-v-05b104e0]{
|
|
|
display: none;
|
|
@@ -62,4 +150,103 @@
|
|
|
}
|
|
|
|
|
|
}
|
|
|
+
|
|
|
+.starting{
|
|
|
+ height: 22px;
|
|
|
+ color: rgba(0, 185, 98, 100);
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.timer{
|
|
|
+ height: 43px;
|
|
|
+ color: rgba(51, 51, 51, 100);
|
|
|
+ font-size: 36px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 40px;
|
|
|
+}
|
|
|
+.charged{
|
|
|
+ height: 20px;
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 4px;
|
|
|
+}
|
|
|
+.cost{
|
|
|
+ // width: 50%;
|
|
|
+ padding: 0 90px;
|
|
|
+ margin-top: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .cost-top{
|
|
|
+ line-height: 33px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24px;
|
|
|
+ position: relative;
|
|
|
+ .cost-font{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;right: -25px;
|
|
|
+ color: #ff6200;
|
|
|
+ font-size: 24px
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cost-bottom{
|
|
|
+ line-height: 20px;
|
|
|
+ color: #999999;text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+.line{
|
|
|
+ width: 0;
|
|
|
+ height:36px;
|
|
|
+ border: 1px solid rgba(237, 237, 237, 100);
|
|
|
+ margin-top: 10px;
|
|
|
+ background-color: #ededed;
|
|
|
+}
|
|
|
+
|
|
|
+.power{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 0 55px;
|
|
|
+ margin-top: 40px;
|
|
|
+ .power-num{
|
|
|
+ height: 27px;
|
|
|
+ color: rgba(51, 51, 51, 100);
|
|
|
+ font-size: 20px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .power-text{
|
|
|
+ height: 20px;
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.info{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 0 40px;
|
|
|
+ // height: 48px;
|
|
|
+ line-height: 48px;
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
+ color: rgba(16, 16, 16, 100);
|
|
|
+ border-bottom: 1px solid #ededed;
|
|
|
+ .info-text{
|
|
|
+ line-height: 23px;
|
|
|
+ padding: 13px 0 12px;
|
|
|
+ width: 200px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.bottom{
|
|
|
+ width: 343px;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ .u-btn--primary[data-v-3bf2dba7]{
|
|
|
+ background-color: #9be6c2;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|