jp-housekeep-electric/pages/businessHall-test/invoiceManagement/InvoiceTitleManagement.vue

<template>
	<view>
		<u-navbar title="发票抬头管理"  title-color="#101010" ></u-navbar>
		<!-- 企业单位 -->
		<view class="enterprise">
			<view class="title">
				企业单位
				
					<image class="img" src="@/assets/img/riFill-building-fill.svg" mode=""></image>
				
			</view>
			<view class="infos">
				<view class="name">
					联通公司
				</view>
				<view class="number">
					91421000706966173Y
				</view>
			</view>
		</view>
		<!-- 非企业 -->
		<view class="nonbusiness">
			<view class="title">
				企业单位
				
					<image class="img" src="@/assets/img/riFill-user-2-fill.svg" mode=""></image>
				
			</view>
			<view class="infos">
				<view class="name">
					李广宵 <view class="default">默认</view>
				</view>
				
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<button class="add"  @click="gotoUrl('/pages/businessHall/invoiceManagement/addInvoiceTitle')" >新增发票抬头</button>
		</view>
	</view>
</template>

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

<style lang="scss" scoped>
	.enterprise,.nonbusiness{
		border-radius: 8px;
		margin: 24rpx 32rpx;
		background-color: #fff;
		overflow: hidden;
		.title{
			padding: 32rpx;
			background: linear-gradient(90deg, rgba(49,110,207,1) 2%,rgba(20,73,159,1) 100%);
			color: rgba(255,255,255,1);
			font-size: 40rpx;
			position: relative;
			font-weight: 600;
			.img{
				width: 96rpx;
				height: 96rpx;
				position: absolute;
				top: 16rpx;
				right: 16rpx;
			}
		}
		.infos{
			padding: 24rpx 32rpx;
			.name{
				color: rgba(51,51,51,1);
				font-size: 36rpx;
				display: flex;
				align-items: center;
				.default{
					width: 96rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 4px;
					background-color: rgba(22,119,255,1);
					color: rgba(255,255,255,1);
					margin-left: 16rpx;
					font-size: 28rpx;
					text-align: center;
				}
			}
			.number{
				color: rgba(119,119,119,1);
				margin-top: 2rpx;
			}
		}
	}
.nonbusiness{
	.title{
		background: linear-gradient(90deg, rgba(0,187,170,1) 2%,rgba(0,161,119,1) 100%);
	}
}
// 底部
.bottom{
	padding: 24rpx 32rpx;
	background-color: rgba(255,255,255,1);
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	.add{
		line-height: 88rpx;
		border-radius: 50px;
		background: linear-gradient(-88.46deg, rgba(34,109,198,1) 2.59%,rgba(9,158,237,1) 97.02%);
		color: rgba(255,255,255,1);
		font-size: 36rpx;
	}
}
</style>