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

<template>
	<view class="page-wrap">
		<view class="nav-row" v-for="(item, index) in typeList" :key="index">
			<view class="label">{{ item.label }}</view>
			<view class="state">{{ item.value }}</view>
			<image class="arrow" src="../../../static/svg/arrow.svg"></image>
		</view>
		<button class="submit-btn">本月到票截止确认</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			typeList: [
				{
					label: '开出的收入发票',
					value: 2
				},
				{
					label: '收到的进项发票',
					value: 6
				},
				{
					label: '成本费用发票',
					value: 3
				},
				{
					label: '银行对账单/回单',
					value: 1
				},
				{
					label: '工资表',
					value: 1
				}
			]
		};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.page-wrap {
	padding-bottom: 130.49rpx;
}
.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 6.87rpx;
	}
}
.submit-btn {
	position: fixed;
	left: 50%;
	bottom: 27.47rpx;
	transform: translateX(-50%);
	width: 549.45rpx;
	height: 75.55rpx;
	line-height: 75.55rpx;
	background: #079eff;
	border-radius: 8.24rpx;
	font-size: 30.22rpx;
	color: #fff;
	margin: 82.42rpx auto 0;
}
</style>