zhywpt-sp/subpackage/orders/invoiceApply/invoice-step2.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" style="border-bottom: 0;">
				<view>备注</view>
				<text>贵A123123</text>
			</view>
		</view>
		<button class="download" @click="toPage">下载电子发票</button>
	</view>

</template>

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

	const toPage = () => {
		navTo('/subpackage/orders/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;
		padding: 30rpx 0;
		.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;
			font-size: 32rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 80rpx;
			position: fixed;
			left: 50%;
			transform: translate(-50%);
			bottom: 100rpx;
		}
	}
</style>