XEH-miniProgram/pages/appCenter/accounting/index.vue

<template>
	<view class="page-wrap">
		<view class="nav-row" @click="handleOpenDetail">
			<view class="label">2023-10</view>
			<view class="state warn">未到票</view>
			<image class="arrow" src="../../../static/svg/arrow.svg"></image>
		</view>
		<view class="nav-row">
			<view class="label">2023-10</view>
			<view class="state">处理中</view>
			<image class="arrow" src="../../../static/svg/arrow.svg"></image>
		</view>
		<view class="nav-row">
			<view class="label">2023-10</view>
			<view class="state">已完成</view>
			<image class="arrow" src="../../../static/svg/arrow.svg"></image>
		</view>
	</view>
</template>

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

<style lang="scss" scoped>
.nav-row {
	display: flex;
	align-items: center;
	height: 96.15rpx;
	padding: 0 41.21rpx;
	font-size: 27.47rpx;
	background: #fff;
	border-top: 1rpx solid #e0e0e0;
	&:first-child {
		border: none;
	}
	.label {
		flex: 1;
	}
	.warn {
		color: #f97631;
	}
	.arrow {
		width: 34.34rpx;
		height: 34.34rpx;
		margin: 0 -13.74rpx 0 13.74rpx;
	}
}
</style>