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

<template>
	<view class="page-wrap">
		<view class="header-panel">
			<view class="item">
				2807520.35
				<text class="label">累计利润\n截至2023-10</text>
			</view>
			<view class="item">
				2563905.29
				<text class="label">可用免征增值税\n发票额</text>
			</view>
		</view>
		<view class="nav-panel">
			<view class="item" v-for="(item, index) in navList" :key="index" @click="handleNav(item.value)">
				<view :class="'icon icon-' + item.value">
					<image :src="`../../../static/svg/accounting_nav_${item.value}.svg`" mode="aspectFit"></image>
				</view>
				<text class="text">{{ item.label }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navList: [
				{
					label: '本月到票',
					value: 1
				},
				{
					label: '凭证列表',
					value: 2
				},
				{
					label: '科目余额',
					value: 3
				},
				{
					label: '工资表',
					value: 4
				},
				{
					label: '人员与社保',
					value: 5
				},
				{
					label: '研发费用\n辅助账',
					value: 6
				},
				{
					label: '资产负债',
					value: 7
				},
				{
					label: '利润表',
					value: 8
				},
				{
					label: '电子账簿',
					value: 9
				}
			]
		};
	},
	methods: {
		handleNav(val) {
			let url = '';
			switch (val) {
				case 1:
					url = 'ticket';
					break;
			}
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.header-panel {
	height: 302.2rpx;
	display: flex;
	align-items: center;
	background: linear-gradient(90deg, rgba(85, 141, 255, 1) 0%, rgba(85, 141, 255, 1) 0%, rgba(99, 95, 235, 1) 100%, rgba(99, 95, 235, 1) 100%);
	.item {
		flex: 1;
		font-size: 43.96rpx;
		color: #fff;
		text-align: center;
	}
	.label {
		display: block;
		font-size: 24.73rpx;
		margin: 13.74rpx 0 13.74rpx;
		line-height: 38.46rpx;
	}
}
.nav-panel {
	display: flex;
	flex-wrap: wrap;
	padding: 0 13.74rpx;
	.item {
		flex: 0 0 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 27.47rpx;
	}
	.icon {
		width: 123.63rpx;
		height: 123.63rpx;
		border-radius: 50%;
		background: #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 54.95rpx;
			height: 54.95rpx;
		}
		&-1 image{
			height: 46.7rpx;
		}
		&-7 image{
			width: 61.81rpx;
		}
		&-8 image{
			width: 61.81rpx;
		}
		
	}
	.text {
		font-size: 24.73rpx;
		text-align: center;
		margin-top: 13.74rpx;
	}
}
</style>