jp-charge/pagesFinance/recordOfInvoice/recordOfInvoice.vue

<template>
	<view >
		<u-navbar title="申请开票记录">
			
		</u-navbar>
		
	
			<u-tabs  inactive-color="#888888" active-color="#101010" :list="list" :is-scroll="true"
					:current="current" @change="change"></u-tabs>
<!-- 待开票 -->
      <view class="not-invoiced" v-show="current==0">
	  	<view class="invoiced-item">
	  		<view class="content">
	  			<view class="title">
	  				用户充电订单发票 <text class="to-invoice">待开票</text>
	  			</view>
	  			<p><text class="text-1">发票金额</text> <text class="text-2">50.00元</text></p>
	  			<p><text class="text-1">发票抬头</text><text class="text-2">刘德华</text></p>
	  			<p><text class="text-1">申请时间</text> <text class="text-2">2022-06-23 16：00：00</text></p>
	  		</view>
	  	</view>
		
		
      </view>
	  <!-- 已开票 -->
	  <view class="invoiced" v-show="current==1">
	  	<view class="invoiced-item">
	  		<view class="content">
	  			<view class="title">
	  				用户充电订单发票 <text class="have-invoiced">已开票</text>
	  			</view>
	  			<p><text class="text-1">发票金额</text> <text class="text-2">50.00元</text></p>
	  			<p><text class="text-1">发票抬头</text><text class="text-2">刘德华</text></p>
	  			<p><text class="text-1">申请时间</text> <text class="text-2">2022-06-23 16：00：00</text></p>
	  		</view>
	  	</view>
		
		<p class="tips"> 仅展示最近12个月的发票信息</p>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '待开票'
				}, {
					name: '已开票'
				}],
				current: 0,
				
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
				
	},
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F2F4F4;  
	}
	
	/deep/.u-scroll-box{
		 width: 65.8% !important;
		 margin: 0 auto;
		 display: flex;
		 
	}
	/deep/.u-tab-bar{
		width: 18% !important;
		left: -5% !important;
		background-color: #00B962 !important; }
	
	// 未开票
	.flex{
		display: flex;
	}
	.not-invoiced-item,.invoiced-item{
		width: 91.4%;
		border-radius: 12px;
		background-color: rgba(255, 255, 255, 100);
		border: 1px solid rgba(235, 235, 235, 100);
		padding: 16px 0;
		padding-left: 18px;
		margin:12px auto;
		
	}
	.content{
		width: 100%;
		margin-left: 4px;
		.title{
			line-height: 18px;
			color: rgba(16, 16, 16, 100);
			font-size: 16px;
			margin-bottom: 12px;
			padding-right: 12px;
			display: flex;
			justify-content: space-between;
			.price,.invoice,.have-invoiced{
				height: 18px;
				color: rgba(255, 61, 0, 100);
				font-size: 18px;
				
			}
			
		}
		
		p{
			color: rgba(102, 102, 102, 100);
			line-height: 26px;
			
		}
		.text-1{
			display: inline-block;
			width: 17vw;
			
		}
		.text-2{
			display: inline-block;
			margin-left:4px;
			width:54.6vw;
			
		}
		.order-box{
			
			display: flex;
			.order{
				width: 17vw;
			}
			.order-num{
				flex: 1;
				margin-left:4px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				
			}
		}
		
	}
	.radio{
		margin: auto 0;
		/deep/.uni-radio-input{
			width: 20px !important;
			height: 20px !important;
		}
	}
	
	
	.to-invoice{
		color:#FF6100!important;
		font-size: 18px
	}
	.have-invoiced{
		color: #00B962!important;
		font-size: 18px
	}
	.tips{
		color: rgba(153, 153, 153, 100);
		text-align: center;
	}
</style>