<template>
	<view class="content">
		<view class="dt-header">
			<view class="title">共力值余额</view>
			<view class="num">0.00</view>
		</view>
		<view class="logs-title">账户记录</view>
		<view class="logs-item">
			<view class="logs-item-title">账户充值</view>
			<view class="logs-item-time">2022-06-07 10:10:51</view>
			<view class="logs-item-price add">+1000.0</view>
		</view>
		<view class="logs-item">
			<view class="logs-item-title">账户充值</view>
			<view class="logs-item-time">2022-06-07 10:10:51</view>
			<view class="logs-item-price remove">-1000.0</view>
		</view>
		<view class="logs-item">
			<view class="logs-item-title">账户充值</view>
			<view class="logs-item-time">2022-06-07 10:10:51</view>
			<view class="logs-item-price remove">-1000.0</view>
		</view>
		<view class="logs-item">
			<view class="logs-item-title">账户充值</view>
			<view class="logs-item-time">2022-06-07 10:10:51</view>
			<view class="logs-item-price remove">-1000.0</view>
		</view>
		<view class="logs-item">
			<view class="logs-item-title">账户充值</view>
			<view class="logs-item-time">2022-06-07 10:10:51</view>
			<view class="logs-item-price remove">-1000.0</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {

		},
		onNavigationBarButtonTap() {
			this.$Router.push({name: 'AccountRecharge'})
		}
	}
</script>

<style lang="scss">
	.content{
		background: $window-color;
		min-height: 100vh;
		.dt-header{
			background: $main-color;
			padding: $padding*3 $padding $padding*2;
			.title{
				color: rgba(255, 255, 255, .9);
				font-size: 28rpx;
			}
			.num{
				font-weight: bold;
				font-size: 60rpx;
				padding-top: 10rpx;
				color: white;
			}
		}
		// 账户记录
		.logs-title{
			padding: 0 $padding;
			font-weight: bold;
			line-height: 90rpx;
			color: #333;
			font-size: 30rpx;
		}
		.logs-item{
			position: relative;
			background: white;
			border-radius: $radius;
			padding: $padding - 10 $padding;
			padding-right: 240rpx;
			box-sizing: border-box;
			margin: 0 $margin ($margin - 10);
			.logs-item-title{
				font-weight: bold;
				font-size: 30rpx;
				line-height: 50rpx;
			}
			.logs-item-time{
				font-size: 28rpx;
				line-height: 40rpx;
				color: gray;
			}
			.logs-item-price{
				position: absolute;
				right: $padding;
				top: $padding - 10;
				line-height: 90rpx;
				width: 180rpx;
				text-align: right;
				font-weight: bold;
				@extend .nowrap;
				&.add{
					color: $main-color;
				}
				&.remove{
					color: $text-price;
				}
			}
		}
	}
</style>
