123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195 |
- <template>
- <view>
- <u-navbar title="充电中" :is-back="false">
- <view class="slot-wrap">
- <view class="navbar-left"></view>
- <view class="navbar-right">
- <u-icon name="shuaxin" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
- </view>
- </view>
- </u-navbar>
- <view class="chargeInfo">
- <view class="chargeInfo-text">
- <p>桩名:打赏打赏安舒打赏</p>
- <p>桩号:121564</p>
- </view>
- <view class="chargeInfo-btn">
- 通道:5
- </view>
- </view>
- <view class="chargeImg">
- <img src="/static/img/charge1.png" alt="">
- <!-- <img src="/static/img/charge2.png" alt=""> -->
- </view>
- <view class="chargeTime">
- <p>剩余时长</p>
- <u-line-progress active-color="#2979ff" :percent="70"></u-line-progress>
- </view>
- <view class="chargeData">
- <view class="chargeData-item">
- <u-icon name="jiagebaohu" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
- <h2>0.25元</h2>
- <p>消费金额</p>
- </view>
- <view class="chargeData-item">
- <u-icon name="dian" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
- <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>
- <view class="chargeBtn">
- <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>
- <script>
- export default {
- data() {
- return {
- tabbarList: [{
- iconPath: "motuoche-diandongche",
- selectedIconPath: "motuoche-diandongche",
- text: '充电',
- count: 0,
- isDot: true,
- customIcon: true,
- },
- {
- iconPath: "/static/img/min_button_select.png",
- selectedIconPath: "/static/img/min_button_select.png",
- text: '充电中',
- midButton: true,
- customIcon: true,
- },
- {
- iconPath: "31wode",
- selectedIconPath: "31wode",
- text: '我的',
- count: 0,
- isDot: false,
- customIcon: true,
- },
- ],
- current: 0
- }
- },
- methods: {
- }
- }
- </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;
- justify-content: space-between;
- flex: 1;
- }
- .navbar-right {
- display: flex;
- margin-right: 20rpx;
- align-items: center;
- }
- .chargeInfo{
- padding: 10px;
- position: relative;
- .chargeInfo-text{
- p{
- color:#777;
- margin-bottom: 5px;
- }
- }
- .chargeInfo-btn{
- background-color: #E0EDFF;
- width: 72px;
- height: 32px;
- border-radius:16px 0 0 16px;
- line-height: 32px;
- text-align: center;
- position: absolute;
- right: 0;
- top:16px;
- color:#1677FF;
- }
- }
- .chargeImg{
- height: 300px;
- width: 300px;
- margin: 10px auto 0;
- img{
- height: 100%;
- width: 100%;
- }
- }
- .chargeTime{
- padding: 20px 30px;
- text-align: center;
- p{
- color:#999;
- margin-bottom: 10px;
- }
- }
- .chargeBtn{
- display: flex;
- justify-content: space-around;
- padding: 20px 50px;
- .chargeBtn-item{
- width: 80px;
- height: 32px;
- background-color: #1677FF;
- line-height: 32px;
- color:#fff;
- text-align: center;
- border-radius: 16px;
- }
- }
- .chargeData{
- display: flex;
- justify-content: space-around;
- .chargeData-item{
- text-align: center;
- h2{
- font-size: 24px;
- 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;
- }
- }
- }
- </style>
|