equipment-rental-mini/pages/menus/borrow-record/borrow-record.vue

<template>
	<view class="home">
		<view class="list-area" v-for="item in dataList" :key="item.id">
			<u-cell :isLink="true">
				<view slot="title" class="u-slot-title">
					<i class="iconfont icon-shijian"></i>
					<text>{{item.updateTime}}</text>
				</view>
				<view slot="label" class="u-slot-label">
					<text class="list-name">设备：{{item.name}}</text>
					<text class="list-status">{{item.status | statusFilter}}</text>
				</view>
			</u-cell>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:"zzzzzssd78",
				dataList:[
					{
						id:1,
						name:"23242524",
						status:0,
						updateTime:"2022-2-2 18:20"
					},
					{
						id:2,
						name:"34dsvsdf2",
						status:1,
						updateTime:"2022-3-2 18:20"
					},
					{
						id:3,
						name:"34dsvsdf2",
						status:1,
						updateTime:"2022-3-2 18:20"
					},
					{
						id:4,
						name:"34dsvsdf2",
						status:1,
						updateTime:"2022-3-2 18:20"
					},
					{
						id:5,
						name:"34dsvsdf2",
						status:1,
						updateTime:"2022-3-2 18:20"
					},
					{
						id:6,
						name:"34dsvsdf2",
						status:1,
						updateTime:"2022-3-2 18:20"
					},
					{
						id:7,
						name:"34dsvsdf2",
						status:1,
						updateTime:"2022-3-2 18:20"
					},
					{
						id:8,
						name:"34dsvsdf2",
						status:1,
						updateTime:"2022-3-2 18:20"
					},
					{
						id:9,
						name:"34dsvsdf2",
						status:1,
						updateTime:"2022-3-2 18:20"
					},
					{
						id:10,
						name:"34dsvsdf2",
						status:1,
						updateTime:"2022-3-2 18:20"
					}
				]
			};
		},
		filters:{
			statusFilter(val){
				let status;
				switch(val){
					case 0: 
						status = "借用中"
						break;
					case 1:
						status = "已归还"
						break;
					default:
						status = "请联系管理员"
						break;
				}
				return status;
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #eae9e9;
}
.home{
	width: 100%;
	height: 100%;
	padding:20rpx 30rpx;
	background-color: #eae9e9;
	box-sizing: border-box;
	.ul-area{
		padding: 20rpx 30rpx 0;
		box-sizing: border-box;
	}
}
.list-area{
	background-color: $uni-bg-color;
	margin: 0 0 20rpx 0;
	line-height: 150%;
	.u-slot-title{
		display: flex;
		align-items: center;
		.iconfont{
			margin-right: 20rpx;
			font-size: 38rpx;
			font-weight: bold;
		}
	}
	.u-slot-label{
		position: relative;
		.list-status{
			position: absolute;
			right: 140rpx;
		}
	}
}

</style>