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

<template>
	<view class="page-wrap">
		<view class="header-panel">
			<text class="item">可用额度\n0.00元</text>
			<text class="item">纸票张数\n0.00元</text>
			<text class="item">蓝票开具金额\n0.00元</text>
			<text class="item">发票总额度\n0.00元</text>
			<text class="item">已开发票\n0.00元</text>
			<text class="item">累计税额\n0.00元\n发票数量\n0.00元</text>
		</view>
		<view class="nav-panel">
			<view class="item">
				<view class="icon-wrap">
					<image class="icon icon-1" src="../../../static/svg/app_tax_1.svg"></image>
				</view>
				我要开发票
			</view>
			<view class="item">
				<view class="icon-wrap">
					<image class="icon icon-2" src="../../../static/svg/app_tax_2.svg"></image>
				</view>
				开票记录
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.header-panel {
	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%);
	height: 467.03rpx;
	color: #fff;
	font-size: 32.97rpx;
	display: flex;
	flex-wrap: wrap;
	padding: 68.68rpx 0 0 34.34rpx;
	box-sizing: border-box;
	.item {
		flex: 0 0 33.33%;
	}
}
.nav-panel{
	display: flex;
	.item{
		flex: 0 0 50%;
		height: 329.67rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 32.97rpx;
		color: #666;
		&:nth-child(2n){
			border-left: 1rpx solid #ccc;
		}
	}
	.icon-wrap{
		width: 109.89rpx;
		height: 109.89rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 13.74rpx;
		.icon{
			&-1{
				width: 96.15rpx;
				height: 83.79rpx;
			}
			&-2{
				width: 82.42rpx;
				height: 72.8rpx;
			}
		}
	}
}
</style>