xwc/components/hua-record-list/hua-record-list.vue

<template>
	<view>
		<view class="content">
			<view class="items d-flex justify-content-between align-items-center" v-for="(item,index) in data"
				:key="index">
				<view class="cont">
					<view class="title">
						{{item.source_type}}
					</view>
					<view class="date">
						{{item.create_time}}
					</view>
				</view>
				<view class="right">
					<view class="num" v-if='type == 1'>
						<view class="red" v-if="item.change_type == 1">
							-{{item.change_amount}}
						</view>
						<view class="blue" v-else>
							+{{item.change_amount}}
						</view>
					</view>
					<view class="num" v-else>
						<view class="blue" v-if="item.change_type == 1">
							+{{item.change_amount}}
						</view>
						<view class="red" v-else>
							-{{item.change_amount}}
						</view>
					</view>
					<view class="tips" v-if="item.remark != ''">{{item.remark}}</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"hua-record-list",
		props:{
			data:{},
			type:{}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.content {
		margin: 20rpx 24rpx;
		padding: 0rpx 24rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
	
		.items {
			border-bottom: 1px solid #F3F4F6;
			padding: 40rpx 0;
	
			.title {
				font-size: 28rpx;
				color: #040404;
				line-height: 40rpx;
			}
	
			.date {
				font-size: 24rpx;
				color: #AAAAAA;
				line-height: 34rpx;
			}
	
			.num {
				color: #0EB5F1;
				font-size: 40rpx;
	
				.red {
					color: #f73e33 !important;
					;
				}
			}
			.tips{
				font-size: 24rpx;
				text-align: right;
			}
		}
	}
	
</style>