JP-ChargeTeam51/pages/cardBag/getCard.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="get" @click="showModal">领用会员卡</button>
			</view>
			
		</view>
	
	<!-- 弹框 -->
	<view>
			<u-modal v-model="show" :content="content" show-cancel-button="true" 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;
}
.card-number{
			color: rgba(209, 178, 121, 1);
			text-align: center;
			margin-top: 8rpx;
		}
			.img {
				margin:82rpx auto 0;
				width: 486rpx;
				height: 104rpx;
				

				img {
					width: 100%;
				}
			}

			
			

			// 右下角角标
			.top {
				
				display: flex;
				align-items: center;
				
				height: 28rpx;

				.right-corner {

					display: flex;

					.rightCorner {
						width: 148rpx;

					}

					.icon {
						width: 24rpx;

						margin-left: 16rpx;

					}

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

		.cardCover {

			width: 100%;
			height: 70rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0rpx;
			z-index: 999;
		}
	}

.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);
			text-align: center;
			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;
		
		
		.get{
			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: 16px;
			text-align: center;
		}
	}
	
	
	}
::v-deep .u-model__content__message{
	color: #333333;
	font-size: 32rpx
}

</style>