267 lines
4.3 KiB
Vue
267 lines
4.3 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="moduleWrap">
|
||
<view class="moduleBox">
|
||
<view class="monthBox">
|
||
<view class="text1">2</view>
|
||
<text class="text2">月</text>
|
||
<u-icon class="text3" name="arrow-down-fill" color="#333333" size="12" style="margin-right: 19rpx;"></u-icon>
|
||
</view>
|
||
<view class="recordBox">
|
||
<view class="leftBox flex-center">
|
||
<text>充值</text>
|
||
<view class="priceBox">+1839.00</view>
|
||
</view>
|
||
<view class="leftBox flex-center" style="margin-left: 113rpx;">
|
||
<text>支出</text>
|
||
<view class="priceBox">-1839.00</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="moduleBox">
|
||
<view class="text4">订单号：202504121349001</view>
|
||
<view class="flex-between">
|
||
<view class="centerBox">
|
||
<view class="text5">余额充值</view>
|
||
<view class="text6">2025年04月12日 13:49</view>
|
||
</view>
|
||
<view class="bottomBox">
|
||
<view class="text7">+60.00</view>
|
||
<view class="text8">完成订单</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
|
||
}
|
||
},
|
||
components:{
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
methods: {
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
height: 100%;
|
||
}
|
||
.content{
|
||
padding: 20rpx 35rpx;
|
||
background: #F5F5FA;
|
||
height: 100%;
|
||
}
|
||
.monthBox{
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: flex-end;
|
||
.text1{
|
||
font-weight: 500;
|
||
font-size: 60rpx;
|
||
color: #333333;
|
||
}
|
||
.text2{
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #333333;
|
||
padding-bottom: 10rpx;
|
||
padding: 0 6rpx 13rpx;
|
||
}
|
||
.text3{
|
||
padding-bottom: 13rpx;
|
||
}
|
||
}
|
||
.recordBox{
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
margin-top: 45rpx;
|
||
.priceBox{
|
||
margin-left: 13rpx;
|
||
}
|
||
}
|
||
.moduleBox{
|
||
background: #fff;
|
||
padding: 32rpx 36rpx 45rpx;
|
||
border-bottom: 1rpx solid #DEDEDE;
|
||
.text4{
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
}
|
||
.centerBox{
|
||
margin-top: 25rpx;
|
||
.text5{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
.text6{
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
.bottomBox{
|
||
margin-top: 10rpx;
|
||
text-align: center;
|
||
.text7{
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
}
|
||
.text8{
|
||
font-weight: bold;
|
||
font-size: 22rpx;
|
||
color: #333333;
|
||
margin-top: 8rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
.moduleBox:last-child{
|
||
border-bottom: none;
|
||
}
|
||
.moduleWrap{
|
||
|
||
margin-bottom: 20rpx;
|
||
border-radius: 30rpx;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.hs-row{
|
||
width: 100%;
|
||
margin-left: 0;
|
||
padding: 40rpx 45rpx 40rpx 69rpx;
|
||
border-radius: 30rpx;
|
||
}
|
||
.hs-row-ft button{
|
||
height: 144rpx;
|
||
width: 144rpx;
|
||
padding: 0;
|
||
border-radius: 50%;background-color: #fff;line-height: 108px;
|
||
|
||
}
|
||
.hs-row-ft button::after{
|
||
border: none;
|
||
}
|
||
|
||
.user-head {
|
||
height: 140rpx;
|
||
}
|
||
|
||
.user-head-img {
|
||
height: 90upx;
|
||
width: 90upx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
|
||
.hs-row-na {
|
||
color: #666;
|
||
font-size: 26upx; text-align: right; padding-right: 15px;
|
||
width: 100%;
|
||
}
|
||
|
||
.hs-hd {
|
||
width: 160rpx;
|
||
}
|
||
|
||
.down {
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
.infoBox{
|
||
background: #fff;
|
||
border-radius: 30rpx;
|
||
overflow: hidden;
|
||
padding: 10rpx 0 10rpx;
|
||
}
|
||
.hs-list{
|
||
// padding: 33rpx 45rpx;
|
||
margin: 33rpx 45rpx 0;
|
||
padding-bottom: 33rpx;
|
||
border-bottom: 1px solid #DEDEDE;
|
||
overflow: hidden;
|
||
}
|
||
.hs-list:last-child{
|
||
border-bottom: none;
|
||
}
|
||
.escLogin{
|
||
padding: 40rpx 0;
|
||
border-radius: 30rpx;
|
||
background: #fff;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #282F38;
|
||
margin-top: 20rpx;
|
||
}
|
||
.rightText{
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #282F38;
|
||
}
|
||
.colorText{
|
||
color:#FB8F0C;
|
||
}
|
||
.modelLabel{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #282F38;
|
||
padding: 42rpx 42rpx 20rpx;
|
||
}
|
||
.rightText2{
|
||
width: 115rpx;
|
||
height: 48rpx;
|
||
line-height: 48rpx;
|
||
text-align: center;
|
||
background: rgba(251,143,12,0.1);
|
||
border-radius: 10rpx;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #FB8F0C;
|
||
}
|
||
</style> |