zhywpt-sp/invoice/invoicing-record.vue

<template>
	<view class="box">
		<view class="card">
			<view class="item">
				<view>发票抬头</view>
				<text>贵州某某科技有限公司</text>
			</view>
			<view class="item">
				<view>发票类型</view>
				<text>ETC服务发票</text>
			</view>
			<view class="item">
				<view>开票金额</view>
				<text>90.00元</text>
			</view>
			<view class="item">
				<view>开票时间</view>
				<text>2023-01-21 10:10:23</text>
			</view>
			<view class="item">
				<view>备注</view>
				<text>贵A123123</text>
			</view>
			<button class="download" @click="toPage">
				下载电子发票
			</button>
		</view>
		<view class="card">
			<view class="item">
				<view>发票抬头</view>
				<text>贵州某某科技有限公司</text>
			</view>
			<view class="item">
				<view>发票类型</view>
				<text>ETC服务发票</text>
			</view>
			<view class="item">
				<view>开票金额</view>
				<text>90.00元</text>
			</view>
			<view class="item">
				<view>开票时间</view>
				<text>2023-01-21 10:10:23</text>
			</view>
			<view class="item">
				<view>备注</view>
				<text>贵A123123</text>
			</view>
			<button class="download" @click="toPage">
				下载电子发票
			</button>
		</view>
		<view class="card">
			<view class="item">
				<view>发票抬头</view>
				<text>贵州某某科技有限公司</text>
			</view>
			<view class="item">
				<view>发票类型</view>
				<text>ETC服务发票</text>
			</view>
			<view class="item">
				<view>开票金额</view>
				<text>90.00元</text>
			</view>
			<view class="item">
				<view>开票时间</view>
				<text>2023-01-21 10:10:23</text>
			</view>
			<view class="item">
				<view>备注</view>
				<text>贵A123123</text>
			</view>
			<button class="download" @click="toPage">
				下载电子发票
			</button>
		</view>
	</view>

</template>

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

	const toPage = () => {
		navTo('/invoice/invoice-download')
	}
</script>


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

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

		.card {
			padding: 0 30rpx;
			height: 615rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
			margin-bottom: 30rpx;

			.item {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #DCDCDC;

				view {
					font-size: 28rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #777777;
				}

				text {
					font-size: 28rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #333333;
				}
			}

			.download {
				width: 670rpx;
				height: 80rpx;
				background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
				border-radius: 40rpx;
				margin: 30rpx auto;
				font-size: 32rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 80rpx;
			}
		}
	}
</style>