JP-ChargeTeam51/pages/user/finance/refundList.vue

<template>
	<view>
		<u-navbar title="退费记录"></u-navbar>
		<view class="balance">
			<view class="balanceHead">
				<view class="payPrice">
					<span>￥</span><font>15.00</font>
				</view>
				<view class="tips">
					<p>可退费金额(元)</p><u-icon name="question-line" custom-prefix="custom-icon" color="#00B962" size="32"></u-icon>
				</view>
			</view>
			<view class="balanceMain">
				<view class="balanceMain-title">
					<view class="title">
						<u-icon name="todo-fill" custom-prefix="custom-icon" color="#6BC6A7" size="40"></u-icon>
						<span>退费记录</span>
					</view>
					<view class="more">
						<span>查看全部</span>
						<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="32"></u-icon>
					</view>
				</view>
				<view class="refundList">
					<view class="refundList-item">
						<view class="refundList-row">
							<font>退至 微信</font>
							<span class="state1">退款中</span>
						</view>
						<view class="refundList-row">
							<p>2021-12-31 09:00</p>
							<p>￥15.00</p>
						</view>
					</view>
					<view class="refundList-item">
						<view class="refundList-row">
							<font>退至 微信</font>
							<span class="state2">已退款</span>
						</view>
						<view class="refundList-row">
							<p>2021-12-31 09:00</p>
							<p>￥15.00</p>
						</view>
					</view>
					<!-- <view class="refundList-none">
						<u-image width="200px" height="200px" src="static/img/none.svg"></u-image>
					</view> -->
				</view>
			</view>
		</view>	
	</view>
</template>

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

		}
	}
</script>

<style lang="scss" scoped>
	.refundList-none{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.balanceHead{
		background-color: #fff;
		padding: 24px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		.payPrice{
			display: flex;
			align-items: flex-end;
			justify-content: center;
			font{
				font-size: 36px;
				line-height: 36px;
			}
		}
		.tips{
			display: flex;
			align-items: center;
			margin-top: 4px;
			p{
				color:#999;
				margin-right: 4px;
			}
		}
	}
	.balanceMain{
		background-color: #fff;
		margin-top: 12px;
		.balanceMain-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 48px;
			border-bottom: 1px solid #f7f7f7;
			padding: 0 16PX;
			.title{
				display: flex;
				align-items: center;
				span{
					margin-left: 8px;
					font-size: 16px;
				}
			}
		}
		.refundList-item{
			padding: 12px 16px;
			.refundList-row{
				display: flex;
				align-items: center;
				justify-content: space-between;
				p{
					font-size: 12px;
					color:#888;
					margin-top: 3px;
				}
				.state1{
					color:#FF9600;
				}
				.state2{
					color:#00B962;
				}
			}
		}
		
	}
</style>