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> |