157 lines
2.9 KiB
Vue
157 lines
2.9 KiB
Vue
|
<template>
|
|||
|
|
<view class="page">
|
|||
|
|
<u-navbar title="充值详情" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
|||
|
|
title-size='36' height='40' id="navbar">
|
|||
|
|
</u-navbar>
|
|||
|
|
<view class="top">
|
|||
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uWIzrlAEWyKzjT5O2ApW" mode=""></image>
|
|||
|
|
<view class="yue">
|
|||
|
|
<view class="zh">
|
|||
|
|
<!-- 账户余额（元） -->
|
|||
|
|
</view>
|
|||
|
|
<view class="je">
|
|||
|
|
<view class="">
|
|||
|
|
充值金额
|
|||
|
|
</view>
|
|||
|
|
<view class="">
|
|||
|
|
10 元
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="list">
|
|||
|
|
<view class="list_item" v-for="(item,index) in 20" :key="index">
|
|||
|
|
<view class="time">
|
|||
|
|
2024-11-21 15:22
|
|||
|
|
</view>
|
|||
|
|
<view class="bd">
|
|||
|
|
<view class="lt">
|
|||
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uyMDOBjjEi3oXwITLrHh" mode=""></image>
|
|||
|
|
<view class="cx">
|
|||
|
|
<view class="one">
|
|||
|
|
微信充值-某某路店
|
|||
|
|
</view>
|
|||
|
|
<view class="two">
|
|||
|
|
+200.00
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="rt">
|
|||
|
|
<view class="">
|
|||
|
|
1592.00
|
|||
|
|
</view>
|
|||
|
|
<view class="" style="margin-top: 8rpx;">
|
|||
|
|
剩余金额
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
bgc: {
|
|||
|
|
backgroundColor: "#fff",
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.top{
|
|||
|
|
height: 260rpx;
|
|||
|
|
.yue{
|
|||
|
|
padding-top: 50rpx;
|
|||
|
|
padding-left: 72rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.zh{
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #48893B;
|
|||
|
|
}
|
|||
|
|
.je{
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #48893B;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
image{
|
|||
|
|
width: 680rpx;
|
|||
|
|
height: 260rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
z-index: -1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
page {
|
|||
|
|
background: #fff;
|
|||
|
|
.list{
|
|||
|
|
width: 674rpx;
|
|||
|
|
height: 1130rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.15);
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
margin: auto;
|
|||
|
|
margin-top: 40rpx;
|
|||
|
|
padding: 28rpx 44rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
overflow: scroll;
|
|||
|
|
.list_item{
|
|||
|
|
border-bottom: 1rpx solid #D8D8D8;
|
|||
|
|
padding-bottom: 34rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
.time{
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
}
|
|||
|
|
.bd{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 22rpx;
|
|||
|
|
.lt{
|
|||
|
|
display: flex;
|
|||
|
|
image{
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
margin-right: 30rpx;
|
|||
|
|
}
|
|||
|
|
.cx{
|
|||
|
|
.one{
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
}
|
|||
|
|
.two{
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #48893B;
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.rt{
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|