JP-ChargeTeam51/pages/cardBag/cardBagNew.vue

<template>
	<view>
		<ujp-navbar title="我的卡包"></ujp-navbar>
		<view class="tabs">
			<view class="tag">
				1
			</view>
			<u-tabs bar-width="80" active-color="#333333" inactive-color="#999999" :list="list" :is-scroll="false"
				:current="current" @change="change"></u-tabs>
		</view>

		<!-- 未激活 -->
		<view class="nonactivated" v-if="current==0">
			<view class="card-box">
				<img src="@/assets/img/halfoff.png" alt="">
				<view class="text">
					可用4500度（有效期365天）
				</view>
				<img class="corner-mark" src="@/assets/img/nonactivated.png" alt="">
			</view>
		</view>
		<!-- 生效中 -->
		<view class="active" v-if="current==1">
			<!-- 企业会员 -->
			<view class="corporate-member">
				<view class="icon">
					<img src="@/assets/img/corporateMember.png" alt="">
				</view>
				<view class="member-details">
					<view class="member-name">
						企业会员
					</view>
					<view class="company-name">
						湖北荆鹏软件开发有限公司
					</view>
					<view class="balance">
						企业账户余额：4001.92元
					</view>
				</view>
			</view>
			<!-- 六折卡 -->
			<view class="card-box">
				<img src="@/assets/img/0.6off.png" alt="">
				<view class="progress">
					<view class="time">
						2023.09.16到期 | 剩余29天
					</view>
					<view class="electric-quantity">
						已用119度 / 共338度
					</view>
				</view>
				<ujp-line-progress active-color="#2979ff" :percent="60"></ujp-line-progress>
			</view>

			<view class="card-box">
				<img src="@/assets/img/halfoff.png" alt="">
				<view class="progress">
					<view class="time">
						2023.09.16到期 | 剩余29天
					</view>
					<view class="electric-quantity">
						已用119度 / 共338度
					</view>
				</view>
				<ujp-line-progress active-color="#2979ff" :percent="60"></ujp-line-progress>
			</view>
			
			 <view class="card-box">
						 	<img src="@/assets/img/monthCard.png" alt="">
							<view class="progress">
								<view class="time">
									2023.09.16到期 | 剩余29天
								</view>
								
							</view>
							<ujp-line-progress active-color="#2979ff" :percent="60"></ujp-line-progress>
						 </view>
		</view>
<!-- 已过期 -->
 <view class="have-expired" v-if="current==2">
 	<view class="card-box">
 		<img src="@/assets/img/haveExpired.png" alt="">
 		<view class="progress">
 			<view class="time">
 				2023.09.16到期 | 剩余29天
 			</view>
 			<view class="electric-quantity">
 				已用119度 / 共338度
 			</view>
 		</view>
 		<ujp-line-progress active-color="#2979ff" :percent="0"></ujp-line-progress>
 	</view>
 </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '未激活'
					},
					{
						name: '生效中'
					}, {
						name: '已过期'
					}
				],
				current: 0,

			}
		},
		methods: {
			change(index) {
				this.current = index;

			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs{
		position: relative !important;
		
		.tag{
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			background-color: rgba(238, 49, 56, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 24rpx;
			text-align: center;
			border-radius: 999px;
			position: absolute;
			top: 24rpx;
			left:190rpx;
		}
	}
	// 未激活
	.nonactivated {
		padding: 0 32rpx;

		.card-box {
			border-radius: 12px;
			background-color: rgba(55, 59, 80, 1);
			margin-top: 24rpx;
			padding: 32rpx;
			position: relative;

			img {
				width: 262rpx;
				height: 56rpx;
			}

			.text {
				font-size: 24rpx;
				color: rgba(219, 219, 219, 1);
			}

			.corner-mark {
				width: 112rpx;
				height: 112rpx;
				position: absolute;
				top: 0;
				right: 0;
			}
		}


	}

	// 生效中
	.active {
		padding: 0 32rpx;

		// 企业会员
		.corporate-member {
			border-radius: 12px;
			background-color: rgba(55, 59, 80, 1);
			margin-top: 24rpx;
			padding: 32rpx;
			display: flex;

			.icon {
				width: 80rpx;
				height: 80rpx;

				img {
					width: 100%;
				}
			}

			.member-details {
				margin-left: 16rpx;

				.member-name {
					color: rgba(255, 255, 255, 1);
					font-size: 32rpx;
				}

				.company-name {
					color: rgba(204, 204, 204, 1);
					font-size: 24rpx;
					margin-top: 8rpx;
				}

				.balance {
					color: rgba(219, 219, 219, 1);
					font-size: 24rpx;
					margin-top: 14rpx;
				}

			}
		}

		// 六折卡
		.card-box {
			border-radius: 12px;
			background-color: rgba(55, 59, 80, 1);
			padding: 20rpx 24rpx;
			margin-top: 24rpx;

			img {
				width: 262rpx;
				height: 56rpx;
			}

			.progress {
				display: flex;
				justify-content: space-between;
				color: rgba(219, 219, 219, 1);
				font-size: 24rpx;
				margin-bottom: 16rpx;
			}
			
			/deep/.u-active {
				background: linear-gradient(84.49deg, rgba(59, 182, 254, 1) 4.25%, rgba(0, 185, 98, 1) 95.02%);
			}
		}
	}
	
	// 已过期
	.have-expired{
		padding: 0 32rpx;
		.card-box {
			border-radius: 12px;
			background-color: rgba(156, 157, 161, 1);
			padding: 20rpx 24rpx;
			margin-top: 24rpx;
		
			img {
				width: 262rpx;
				height: 56rpx;
			}
		
			.progress {
				display: flex;
				justify-content: space-between;
				color: #fff;
				font-size: 24rpx;
				margin-bottom: 16rpx;
			}
			
		
			/deep/.u-active {
				background: linear-gradient(84.49deg, rgba(59, 182, 254, 1) 4.25%, rgba(0, 185, 98, 1) 95.02%);
			}
		}
	}
</style>