|
@@ -1,142 +1,282 @@
|
|
|
-<template>
|
|
|
- <view style="background-color: #fff; padding-bottom: 40px;">
|
|
|
- <u-navbar title="启动中">
|
|
|
- </u-navbar>
|
|
|
- <view class="iconfont tittle-font">
|
|
|
- 
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="progress-bar">
|
|
|
- <u-circle-progress width="440" active-color="green" :percent="30" border-width="50">
|
|
|
- <view class="u-progress-content">
|
|
|
- <view class="u-progress-dot"></view>
|
|
|
- <text class='u-progress-info'>0.0%</text>
|
|
|
- </view>
|
|
|
- <view class="bot"></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>
|
|
|
-
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view v-if="chargingRecord.status==2">
|
|
|
+ <u-navbar title="充电结束">
|
|
|
+ </u-navbar>
|
|
|
+ <view class="progress-bar2">
|
|
|
+ <u-circle-progress width="400" active-color="green" :percent="50" border-width="20">
|
|
|
+ <view class="u-progress-content">
|
|
|
+ <!-- <view class="u-progress-dot"></view> -->
|
|
|
+ <text class='u-progress-info' v-if="chargingGun.gunType==1">
|
|
|
+ 50%
|
|
|
+ <p class="progress-text">当前电量</p>
|
|
|
+ </text>
|
|
|
+
|
|
|
+ <text class='u-progress-info' v-if="chargingGun.gunType==2">
|
|
|
+ 20.000
|
|
|
+ <p class="progress-text">已充电量(度)</p>
|
|
|
+ </text>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </u-circle-progress>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="time-price">
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-num">
|
|
|
+ 00:20:00
|
|
|
+ </view>
|
|
|
+ <view class="item-text">
|
|
|
+ 充电时长
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-num">
|
|
|
+ 20:00元
|
|
|
+ </view>
|
|
|
+ <view class="item-text">
|
|
|
+ 充电金额
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <u-button size="default" shape="circle">返回首页</u-button>
|
|
|
+ <u-button size="default" shape="circle">查看订单详情</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view style="background-color: #fff; padding-bottom: 40px;" v-else>
|
|
|
+ <u-navbar title="充电详情">
|
|
|
+ </u-navbar>
|
|
|
+ <view class="iconfont tittle-font" @click="show = true">
|
|
|
+ 
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="progress-bar">
|
|
|
+ <u-circle-progress width="440" active-color="green" :percent="percent?percent:percentValue" border-width="50">
|
|
|
+
|
|
|
+ <view class="u-progress-content" v-if="chargingGun.gunType==1">
|
|
|
+ <view class="u-progress-dot"></view>
|
|
|
+ <text class='u-progress-info'>{{percent.toFixed(2)}}%</text>
|
|
|
+ </view>
|
|
|
+ <view class="u-progress-content" v-if="chargingGun.gunType==2">
|
|
|
+ <text class='u-progress-info'>前方等待10位</text>
|
|
|
+ </view>
|
|
|
+ <view class="bot"></view>
|
|
|
+ </u-circle-progress>
|
|
|
+ </view>
|
|
|
+ <view class="starting">
|
|
|
+ {{chargingRecord.statusN}}...
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="timer">
|
|
|
+ {{getPercent()}}
|
|
|
+ </view>
|
|
|
+ <view class="charged">
|
|
|
+ 已充电{{chargingGun.kwh}}度
|
|
|
+ </view>
|
|
|
+ <view class="cost">
|
|
|
+ <view class="">
|
|
|
+ <view class="cost-top">
|
|
|
+ {{chargingRecord.dueFee}}元
|
|
|
+ </view>
|
|
|
+ <view class="cost-bottom">
|
|
|
+ 实时费用
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="">
|
|
|
+ <view class="cost-top">
|
|
|
+ {{detail.balance}}元
|
|
|
+ <view class="iconfont cost-font" @click="gotoUrl('pages/user/finance/recharge')" ></view>
|
|
|
+ </view>
|
|
|
+ <view class="cost-bottom">
|
|
|
+ 账户余额
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="power">
|
|
|
+ <view>
|
|
|
+ <view class="power-num">
|
|
|
+ {{chargingRecord.chargeVoltage}}v
|
|
|
+ </view>
|
|
|
+ <view class="power-text">
|
|
|
+ 电压
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view>
|
|
|
+ <view class="power-num">
|
|
|
+ {{chargingGun.power}}kW
|
|
|
+ </view>
|
|
|
+ <view class="power-text">
|
|
|
+ 功率
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view>
|
|
|
+ <view class="power-num">
|
|
|
+ {{chargingRecord.chargeAmpere}}A
|
|
|
+ </view>
|
|
|
+ <view class="power-text">
|
|
|
+ 电流
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info">
|
|
|
+ <view class="info-name">
|
|
|
+ 充电车辆
|
|
|
+ </view>
|
|
|
+ <view class="info-text">
|
|
|
+ {{chargingRecord.carNumber}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info">
|
|
|
+ <view class="info-name">
|
|
|
+ 站点
|
|
|
+ </view>
|
|
|
+ <view class="info-text">
|
|
|
+ {{chargingRecord.stationName}} / {{chargingRecord.deviceNo}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info" v-if="false">
|
|
|
+ <view class="info-name">
|
|
|
+ 占位费说明
|
|
|
+ </view>
|
|
|
+ <view class="info-text">
|
|
|
+ 停止充电后30分钟即开始收取占位费用,1元/分钟
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom2" @click="submit">
|
|
|
+ <u-button type="primary" shape="circle" >结束充电</u-button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-modal v-model="show" @confirm="confirmPhone" :confirm-text="confirmText" confirm-color="#606266"
|
|
|
+ :show-cancel-button="true" ref="uModal" :asyncClose="true" :title="title" :content="consumerPhone">
|
|
|
+ </u-modal>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
|
|
|
<script>
|
|
|
import * as API from '@/apis/chargeProcess.js'
|
|
|
-
|
|
|
+ import {
|
|
|
+ secondsDistance,
|
|
|
+ hourDistanceArr
|
|
|
+ } from '@/utils'
|
|
|
export default {
|
|
|
data() {
|
|
|
- return {
|
|
|
- id:"",
|
|
|
- detail: {},
|
|
|
-
|
|
|
+ return {
|
|
|
+ title: '联系客服',
|
|
|
+ content: '0716-8123456',
|
|
|
+ confirmText: '拨打电话',
|
|
|
+ detail:{},
|
|
|
+ percent: 0,
|
|
|
+ percentValue: 0,
|
|
|
+ consumerPhone: "",
|
|
|
+ id: "",
|
|
|
+ chargingGun: {},
|
|
|
+ chargingRecord: {},
|
|
|
+ show: false,
|
|
|
}
|
|
|
},
|
|
|
onLoad(op) {
|
|
|
if (op.id) {
|
|
|
this.id = op.id;
|
|
|
+ this.init()
|
|
|
this.getInfo()
|
|
|
}
|
|
|
-
|
|
|
+ var consumerPhone = this.carhelp.getConfig().consumerPhone
|
|
|
+ // img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"
|
|
|
+ if (consumerPhone) {
|
|
|
+ this.consumerPhone = consumerPhone
|
|
|
+ }
|
|
|
|
|
|
},
|
|
|
onReady() {
|
|
|
-
|
|
|
+ this.addpercent()
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ addpercent(){
|
|
|
+
|
|
|
+ if(this.percent==0){
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.percentValue++;
|
|
|
+ if(this.percentValue>=100){
|
|
|
+ this.percentValue=0;
|
|
|
+ }
|
|
|
+ this.addpercent()
|
|
|
+ },100)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getPercent() {
|
|
|
+ var ms=this.chargingGun.chargeTimeSec;
|
|
|
+
|
|
|
+ var Hour = parseInt(Math.floor(ms / (60 * 60)));
|
|
|
+ var Fen = parseInt(Math.floor(ms % (60 * 60) / 60));
|
|
|
+ var S = parseInt(Math.floor(ms % (60) ));
|
|
|
+
|
|
|
+ var obj = (Hour > 9 ? "" : "0") + Hour + ":" + (Fen > 9 ? "" : "0") + Fen+ ":" + (S > 9 ? "" : "0") + S
|
|
|
+
|
|
|
+
|
|
|
+ return obj;
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+
|
|
|
+
|
|
|
+ API.personalCenter().then((res) => {
|
|
|
+ this.detail = res.data
|
|
|
+
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ confirmPhone() {
|
|
|
+ this.show = false;
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: this.consumerPhone //仅为示例
|
|
|
+ });
|
|
|
+ },
|
|
|
getInfo() {
|
|
|
uni.showLoading({
|
|
|
title: "加载中",
|
|
|
mask: true,
|
|
|
})
|
|
|
- API.chargingDetail({
|
|
|
- id:this.id
|
|
|
+ API.chargingDetail({
|
|
|
+ id: this.id
|
|
|
}).then((res) => {
|
|
|
- this.user = res.data
|
|
|
- this.isReady = true;
|
|
|
+ this.chargingRecord = res.data.chargingRecord
|
|
|
+
|
|
|
+ this.chargingGun = res.data.chargingGun
|
|
|
+
|
|
|
+ this.isReady = true;
|
|
|
+ //直流
|
|
|
+ if(this.chargingGun.gunType==1){
|
|
|
+
|
|
|
+ if (this.chargingRecord.status == 1) {
|
|
|
+ // var second = secondsDistance(this.chargingRecord.startTime);
|
|
|
+ // var percent = (second / 60) / this.chargingRecord.estimateMinute * 100;
|
|
|
+ // console.log(this.percent)
|
|
|
+ var sum=this.chargingGun.chargeTimeSec/60+this.chargingGun.remainMin;
|
|
|
+ if(sum){
|
|
|
+ this.percent=this.chargingGun.chargeTimeSec/60/sum*100
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }else if(this.chargingGun.gunType==2){
|
|
|
+ //交流
|
|
|
+ }
|
|
|
+
|
|
|
uni.hideLoading()
|
|
|
|
|
|
}).catch(error => {
|
|
@@ -145,213 +285,309 @@
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
- submit() {
|
|
|
-
|
|
|
- if(this.moneyActiveClass==-1&&!this.otherNum){
|
|
|
- this.submitForm.chargeStrategy=0;
|
|
|
- this.submitForm.amount=0
|
|
|
- }else{
|
|
|
- this.submitForm.chargeStrategy=2;
|
|
|
- if(this.otherNum){
|
|
|
- this.submitForm.amount=this.otherNum
|
|
|
- }else{
|
|
|
- this.submitForm.amount=this.moneyActiveClass
|
|
|
+ submit() {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确认结束充电?',
|
|
|
+ success: res => {
|
|
|
+ if (res.confirm) {
|
|
|
+ //付钱 改为组件
|
|
|
+ this.confirm()
|
|
|
+
|
|
|
+ } else if (res.cancel) {
|
|
|
+ console.log('用户点击取消');
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- if (!this.submitForm.channelNo) {
|
|
|
- uni.showToast({
|
|
|
- title: '请先选择充电通道'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- if (this.submitForm.chargeStrategy == 0 && this.user.balance < 5) {
|
|
|
- uni.showModal({
|
|
|
- title: '支付',
|
|
|
- content: '余额不足5元无法开启充满自停,是否充值?',
|
|
|
- success: res => {
|
|
|
- if (res.confirm) {
|
|
|
- //付钱 改为组件
|
|
|
- this.gotoUrl("pages/user/finance/recharge");
|
|
|
-
|
|
|
- } else if (res.cancel) {
|
|
|
- console.log('用户点击取消');
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
-
|
|
|
- this.confirm()
|
|
|
- }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+
|
|
|
+ //console.log(JSON.stringify(this.submitForm))
|
|
|
+
|
|
|
+
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+
|
|
|
+ //this.submitForm.deviceNo = this.detail.deviceNo;
|
|
|
+ API.stopCarCharging(this.submitForm).then((res) => {
|
|
|
+ this.getInfo()
|
|
|
+ }).catch(error => {
|
|
|
+
|
|
|
+ uni.showToast({
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
+ }
|
|
|
|
|
|
- },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ page {
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .tittle-font {
|
|
|
+ font-size: 24px;
|
|
|
+ position: fixed;
|
|
|
+ top: 12px;
|
|
|
+ right: 16px;
|
|
|
+ z-index: 99999;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .bot {
|
|
|
+ width: 220px;
|
|
|
+ height: 220px;
|
|
|
+ border: 2px #00b962 dotted;
|
|
|
+ border-radius: 999px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ right: 0px;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-bar {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /deep/.u-circle-progress {
|
|
|
+ margin-left: 23.3% !important;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-progress-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .u-progress-dot {
|
|
|
+ width: 16rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #fb9126;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-progress-info {
|
|
|
+ font-size: 36px;
|
|
|
+ padding-left: 16rpx;
|
|
|
+ letter-spacing: 2rpx;
|
|
|
+ color: rgba(51, 51, 51, 100);
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-progress-dot[data-v-05b104e0] {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-circle-progress[data-v-cab6fc66] {
|
|
|
+ margin: 30px;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
-</script>
|
|
|
-<style>
|
|
|
- page{
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
-</style>
|
|
|
-<style lang="scss" scoped>
|
|
|
- .tittle-font {
|
|
|
- font-size: 24px;
|
|
|
- position: fixed;
|
|
|
- top: 12px;
|
|
|
- right: 16px;
|
|
|
- z-index: 99999;
|
|
|
-
|
|
|
- }
|
|
|
- .bot{
|
|
|
- width: 220px;
|
|
|
- height: 220px;
|
|
|
- border: 2px #00b962 dotted;
|
|
|
- border-radius: 999px;
|
|
|
- position: absolute;
|
|
|
- top: 0px;
|
|
|
- left: 0px;
|
|
|
- right: 0px;
|
|
|
- margin: auto;
|
|
|
- }
|
|
|
-.progress-bar{
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- /deep/.u-circle-progress{
|
|
|
- margin-left: 23.3% !important;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .u-progress-content {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .u-progress-dot {
|
|
|
- width: 16rpx;
|
|
|
- height: 16rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #fb9126;
|
|
|
- }
|
|
|
-
|
|
|
- .u-progress-info {
|
|
|
- font-size: 36px;
|
|
|
- padding-left: 16rpx;
|
|
|
- letter-spacing: 2rpx;
|
|
|
- color: rgba(51, 51, 51, 100);
|
|
|
- }
|
|
|
- /deep/.u-progress-dot[data-v-05b104e0]{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- /deep/.u-circle-progress[data-v-cab6fc66]{
|
|
|
- margin: 30px ;
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-.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;
|
|
|
- }
|
|
|
-}
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom2 {
|
|
|
+ width: 343px;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+
|
|
|
+ .u-btn--primary {
|
|
|
+ background-color: #9be6c2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .progress-bar2 {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /deep/.u-circle-progress {
|
|
|
+ margin-left: 23.3% !important;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-progress-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .u-progress-dot {
|
|
|
+ width: 16rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #fb9126;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-progress-info {
|
|
|
+ display: block;
|
|
|
+ font-size: 36px;
|
|
|
+ padding-left: 16rpx;
|
|
|
+ letter-spacing: 2rpx;
|
|
|
+ color: rgba(51, 51, 51, 100);
|
|
|
+
|
|
|
+ .progress-text {
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-progress-dot[data-v-05b104e0] {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-circle-progress[data-v-cab6fc66] {
|
|
|
+ margin: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-price {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 65px;
|
|
|
+
|
|
|
+ .item-num {
|
|
|
+ height: 33px;
|
|
|
+ color: rgba(51, 51, 51, 100);
|
|
|
+ font-size: 24px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-text {
|
|
|
+ eight: 20px;
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ width: 343px;
|
|
|
+ padding: 12px 16px;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+
|
|
|
+ .u-size-default {
|
|
|
+ border: 1px solid rgba(0, 185, 98, 100);
|
|
|
+ color: #00b962;
|
|
|
+ width: 44%;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|