XEH-miniProgram/pages/self/wallet/record.vue

<template>
	<view class="page-wrap">
		<view class="fixed-header">
			<view class="search-input">
				<input class="input" placeholder-style="color: #999" type="text" placeholder="关键词" maxlength="20" />
				<image class="icon" src="../../../static/icon_search.png"></image>
			</view>
			<button class="filter" @click="handleOpenFilter">筛选</button>
		</view>
		<view class="record-panel">
			<view class="item">
				<view class="time">2023-10-13  16:32:54</view>
				<view class="desc">账单类型：应付# 房源·免租期补齐</view>
				<view class="desc">账单编号：9886</view>
				<view class="money">+ 4400.00</view>
				<view class="total">2765.30</view>
			</view>
			<view class="item">
				<view class="time">2023-10-13  16:32:54</view>
				<view class="desc">账单类型：应付# 房源·免租期补齐</view>
				<view class="desc">账单编号：9886</view>
				<view class="money money-1">- 4400.00</view>
				<view class="total">2765.30</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
		};
	},
	methods: {
		handleOpenFilter() {
			uni.navigateTo({
				url: 'filter'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page-wrap {
	padding-top: 96.15rpx;
}
.fixed-header {
	position: fixed;
	left: 0%;
	top: 0%;
	right: 0%;
	height: 96.15rpx;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 68.68rpx;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1rpx;
		background: #e0e0e0;
	}
	.search-input {
		width: 439.56rpx;
		height: 61.81rpx;
		position: relative;
		&::after{
			content: '';
			position: absolute;
			left: -50%;
			top: -50%;
			right: -50%;
			bottom: -50%;
			transform: scale(.5);
			border: 2rpx solid #d0dde9;
			border-radius: 8.24rpx;
		}
		.input {
			width: 100%;
			height: 100%;
			font-size: 24.73rpx;
			padding: 0 82.42rpx 0 13.74rpx;
			box-sizing: border-box;
		}
		.icon {
			width: 39.84rpx;
			height: 39.84rpx;
			position: absolute;
			right: 27.47rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	.filter {
		font-size: 27.47rpx;
		background: none;
		border: none;
		padding: 0;
		margin: 0;
		&::after {
			display: none;
		}
	}
}
.record-panel{
	padding: 13.74rpx 0;
	.item{
		height: 151.1rpx;
		background: #fff;
		padding: 20.6rpx 206.04rpx 27.47rpx 27.47rpx;
		box-sizing: border-box;
		position: relative;
		border-top: 1rpx solid #e0e0e0;
		&:first-child{
			border: none;
		}
	}
	.time{
		font-size: 32.97rpx;
	}
	.desc{
		font-size: 27.47rpx;
		color: #999;
	}
	.money{
		font-size: 32.97rpx;
		color: #43C475;
		position: absolute;
		right: 27.47rpx;
		top: 34.34rpx;
		&-1{
			color: #E74C3C;
		}
	}
	.total{
		font-size: 27.47rpx;
		color: #999;
		position: absolute;
		right: 27.47rpx;
		top: 75.55rpx;
		&:before{
			content: '余额';
			font-size: 26.1rpx;
			margin-right: 6.87rpx;
		}
	}
}
</style>