JP-ChargeTeam51/pages/cardBag/nonactivatedCard.vue

<template>
	<view>
		<ujp-navbar title="未激活会员卡">
			<view slot="right" style="margin-right: 10px;">
		
				<view class="iconfont qr-code">
					&#xe60d;
				</view>
			</view>
		</ujp-navbar>
		<!-- 头部 -->
		<view class="header">
			<view class="discount-card">
				<img class="corner-mark" src="@/assets/img/nonactivated.png" alt="">
				<view class="top">
					<view class="right-corner">
						<img class="rightCorner" src="..../../assets/img/rightCorner.png" alt="">
						
						<img class="icon" src="@/assets/img/mb-times@3x.png" alt="">
						
						<img class="picc" src="..../../assets/img/picc.png" alt="">
					</view>
				</view>
				<view class="img">
					<img src="@/assets/img/halfoff.png" alt="">
				</view>
				<view class="card-number">
					卡号：T2023081611208460925
				</view>
				
				
			</view>
			<img class="cardCover" src="@/assets/img/cardCover.png" alt="">
		</view>
		<!-- 卡片信息 -->
		<view class="main">
			
			<view class="details">
				<view class="headline">
					<view class="title">
						卡片信息
					</view>
					<view class="show" v-if="!this.showHide" @click="showHide=true">
						显示<u-icon name="eye"></u-icon>
					</view>
					<view class="hide" v-if="this.showHide" @click="showHide=false">
						隐藏<u-icon name="eye-off"></u-icon>
					</view>
				</view>
				<view class="content" v-if="this.showHide">
					<view class="item">
						<view class="item-title">
							卡类型
						</view>
						<view class="item-value">
							服务费折扣卡
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							折扣率
						</view>
						<view class="item-value">
							5折
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							规格
						</view>
						<view class="item-value">
							可用4500度（有效期365天）
						</view>
					</view>
					
					
				</view>
				
				
				
				
			</view>
			<!-- 按钮 -->
			<view class="btn">
				<button class="share">转赠分享<img class="icon" src="@/assets/img/riLine-gift-2-line@3x.png" alt=""></button>
				<button class="activate" @click="showModal">立即激活</button>
			</view>
			
		</view>
	
	<!-- 弹框 -->
	<view>
			<u-modal v-model="show" :content="content"  confirm-color="#00b962"></u-modal>
			
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showHide:false,
				content: '确认激活此会员卡吗？'
				
			}
		},
		methods: {
			showModal() {
						this.show = true;
					},
					
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
.header {
		padding: 24rpx 32rpx 0;
		opacity: 0.9;
		background: linear-gradient(30deg, rgba(59,182,254,1) 13.4%,rgba(0,185,98,1) 85.87%);
		position: relative;

		.discount-card {
			background: url(@/assets/img/cardDetail.png);
			background-size: 686rpx 400rpx;
			border-radius: 8px 8px 0 0;
			background-color: #1D1F2A;

			padding: 24rpx;
			margin-top: 24rpx;
			height: 200px;
			position: relative;
.corner-mark{
	width: 128rpx;
	height: 128rpx;
	position: absolute;
	top: 0;
	right: 0;
}
			.img {
				margin:82rpx auto 0;
				width: 486rpx;
				height: 104rpx;
				

				img {
					width: 100%;
				}
			}

			
			

			
			.top {
				
				

				.right-corner {

					
					display: flex;
					align-items: center;
					height: 36rpx;

					.rightCorner {
						width: 148rpx;
						margin-left: 8rpx;

					}

					.icon {
						width: 24rpx;
					    height: 24rpx;
						margin-left: 8rpx;
						
					
					}

					.picc {
						width: 124rpx;
						height: 32rpx;
						margin-left: 8rpx;
					}
				}
			}
		}

		.cardCover {

			width: 100%;
			height: 70rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0rpx;
			z-index: 999;
		}
		.card-number{
			color: rgba(209, 178, 121, 1);
			text-align: center;
			margin-top: 8rpx;
		}
	}

.main {
		background-color: #fff;
		padding: 32rpx;
.headline{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 32rpx;
	.title{
		color: rgba(16, 16, 16, 1);
		
	}
	.show,.hide{
		color: rgba(119, 119, 119, 1);
		
		

	}
}
		

		.details {
			margin-top: 16rpx;
			border-radius: 12px;
			padding: 32rpx 24rpx;
			background-color: rgba(255, 255, 255, 1);
			border: 1px solid rgba(226, 226, 226, 1);
			margin-bottom: 40rpx;
       
			.item {
				display: flex;
				margin-top: 24rpx;

				.item-title {
					width: 128rpx;
					color: #777777;
					text-align: left;
				}

				.item-value {
					margin-left: 16rpx;
					color: #101010;
				}
			}
		}
	//按钮
	.btn{
		margin-top: 32rpx;
		display: flex;
		justify-content: space-between;
		.share{
			width: 328rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 50px;
			background-color: rgba(255, 255, 255, 1);
			text-align: center;
			border: 1px solid rgba(255, 150, 0, 1);
			color: rgba(255, 150, 0, 1);
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon{
				
				width: 36rpx;
				height: 36rpx;
				
			}
		}
		.activate{
			width: 328rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 50px;
			background: linear-gradient(90deg, rgba(0,171,91,1) 0%,rgba(0,209,66,1) 100%);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx
		}
	}
	
	
	}
::v-deep .u-model__content__message{
	color: #333333;
	font-size: 32rpx
}

</style>