zhywpt-sp/subpackage/orders/invoiceApply/Invoice-mannager.vue

<template>
	<view class="box">
		<view class="card" @click="toPage(1)">
			<view class="card-left">
				<view class="image-box">
					<image :src="`${$imgUrl}InvoiceMannager/icon2.png`" mode=""></image>
				</view>
				<text>ETC服务订单</text>
			</view>
			<u-icon name="arrow-right" color="#B2B2B2" size="30"></u-icon>
		</view>
		<view class="card" @click="toPage(2)">
			<view class="card-left">
				<view class="image-box">
					<image :src="`${$imgUrl}InvoiceMannager/icon1.png`" mode=""></image>
				</view>
				<text>通行流水服务费订单</text>
			</view>
			<u-icon name="arrow-right" color="#B2B2B2" size="30"></u-icon>
		</view>
	</view>

</template>

<script setup lang="ts">
	import {
		reactive
	} from "vue";
	import {
		msg,
		navTo
	} from '@/utils/utils';

	const toPage = (type) => {
		navTo(`/subpackage/orders/invoiceApply/invoice-content?type=${type}`)
	}
</script>


<style>
	page {
		width: 100%;
		height: 100%;
	}
</style>

<style lang="scss" scoped>
	.box {
		height: 100%;
		// width: 100%;
		padding: 30rpx;
		border-top: 1rpx solid #EEF7F7;
		background: #EEF7F7;

		.card {
			margin-bottom: 30rpx;
			height: 130rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;

			.card-left {
				display: flex;
				align-items: center;

				.image-box {
					width: 60rpx;
					height: 60rpx;
					background: #00B38B;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				text {
					font-size: 32rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #333333;
					margin-left: 30rpx;
				}
			}
		}
	}
</style>