<template>
	<view class="card-page">
		<view class="nav">
			<image src="@/static/mine/fh.png" mode="" class="nav-back" @click="goBack"></image>
			<view class="nav-title">提示卡</view>
			<view class="nav-back"></view>
		</view>
		<image src="@/static/prize/nav-mf.png" mode="" class="nav-bg"></image>
		<view class="main">
			<swiper class="activity-swiper"  previous-margin="137rpx" next-margin='137rpx'
				indicator-active-color="#fff" indicator-color="#77797e" circular>
				<swiper-item class="swiper-item">
					<image src="@/static/prize/tsk.png" mode="aspectFit" class="swiper-img">
					</image>
				</swiper-item>
				<swiper-item class="swiper-item">
					<image src="@/static/prize/tsk.png" mode="aspectFit" class="swiper-img">
					</image>
				</swiper-item>
				<swiper-item class="swiper-item">
					<image src="@/static/prize/tsk.png" mode="aspectFit" class="swiper-img">
					</image>
				</swiper-item>
			</swiper>
			<view class="btn">
				<view class="submit" @click="submit">使用提示卡</view>
			</view>
		</view>
		<!-- 提示语 -->
		<popup-view v-model="tipvisible" mode="center" border-radius="15" zIndex="1" centerBoxBgColor="rgba(255, 255, 255, 0)">
			<view class="tip">
				<image src="@/static/prize/dlg-img.png" mode="" class="tip-img"></image>
				<view class="dlg-main">
					<view class="tip-value">拿在手上的那种</view>
					<view class="tip-btn">
						<view class="again">再抽一次</view>
						<view class="buy">立即购买</view>
					</view>
				</view>
			</view>
		</popup-view>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	export default{
mixins: [myMixins],
		data(){
			return{
				tipvisible:false
			}
		},
		mounted() {
			
		},
		methods:{
			goBack(){
				uni.navigateBack()
			},
			closeTip(){
				this.tipvisible = false
			},
			submit(){
				this.tipvisible = true
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.card-page{
		.nav {
			width: 100%;
			height: 172rpx;
			background-image: url('@/static/prize/nav.png');
			background-size: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 23rpx;
			box-sizing: border-box;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
		
			.nav-back {
				width: 19rpx;
				height: 34rpx;
			}
		
			.nav-title {
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
			}
		}
		.nav-bg{
			position: fixed;
			top: 61rpx;
			right: 79rpx;
			width: 84rpx;
			height: 75rpx;
		}
		.main{
			background-image: url('@/static/prize/bg.png');
			background-size: 100%;
			background-repeat: no-repeat;
			padding-top: 200rpx;
			.activity-swiper {
				width: 100%;
				height: 603rpx;
				overflow: hidden;
				// margin-top: 24rpx;
			
				.swiper-item {
					width: 454rpx;
					height: 603rpx;
					display: flex;
					justify-content: center;
			
					.swiper-img {
						width: 454rpx;
						height: 603rpx;
						display: block;
						background-repeat: no-repeat;
						background-size: 100%;
						background-position: 50%;
						transform: scale(1);
						transition: transform 0.3s ease-in-out 0s;
						border-radius: 32rpx;
					}
				}
			}
			.btn{
				width: 338rpx;
				height: 89rpx;
				background: #FFDEC0;
				box-shadow: 0px 16rpx 43rpx 0px rgba(246,110,100,0.35);
				border-radius: 45rpx;
				border: 1px solid #FFFFFF;
				margin: 60rpx auto;
				display: flex;
				align-items: center;
				justify-content: center;
				.submit{
					width: 328rpx;
					height: 79rpx;
					background: linear-gradient(0deg, #EF4033 0%, #FF9F98 100%);
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
		.tip{
			width: 561rpx;
			background-color: transparent;
			background-image: url('@/static/prize/dlg.png');
			background-size: 100%;
			background-repeat: no-repeat;
			position: relative;
			padding-top: 69rpx;
			.tip-img{
				position: absolute;
				left: 0;
				top: 0;
				width: 170rpx;
				height: 187rpx;
			}
			.dlg-main{
				width: 561rpx;
				background: #fff;
				border-radius: 50rpx 50rpx 0 0;
				.tip-value{
					padding-top: 84rpx;
					text-align: center;
					font-size: 30rpx;
					color: #333333;
				}
				.tip-btn{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 87rpx 41rpx 49rpx 41rpx;
					.again{
						width: 227rpx;
						height: 91rpx;
						background: #FFFFFF;
						border-radius: 46rpx;
						border: 1px solid #E13D31;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 30rpx;
						color: #333333;
					}
					.buy{
						width: 227rpx;
						height: 91rpx;
						background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
						border-radius: 46rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 30rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>