xc-app/pages/index/components/openFreeBoxFive.vue

<template>
	<view class="card-com" v-show="visible">
		<view class="main">
			<image src="@/static/result/title.png" mode="aspectFit" class="title-icon" v-show="isCard"></image>
			
			<view class="card-main">
				<template v-show="isCard">
					<view class="card" v-for="(item,index) in resultList" :key="index" :class="{'rare-icon':item.grade === 'RARE','supreme-icon':item.grade === 'SUPREME','hidden-icon':item.grade === 'HIDDEN','normal-icon':item.grade === 'NORMAL'}">
						<image v-show="item.productCoverResource" :src="item.productCoverResource.url" mode="aspectFit" class="shop-img"></image>
						<view class="shop">
							<view class="name">{{item.productAbbreviation}}</view>
						</view>
					</view>
				</template>
				
			</view>
			<view style="display: flex;align-items: center;justify-content: center;">
				<view  class="again-icon" @click="again" v-show="isCard">来发真的</view>
			</view>
			<image src="@/static/result/close.png" class="close-icon" mode="aspectFit" @click="close" v-show="isCard"></image>
		</view>
	</view>
</template>

<script>
	import BoxCom from './box.vue'
	import LiHuaCom from './lihua.vue'
	import GXCom from './bgGuang.vue'
	export default{
		data(){
			return{
				isBox:true,
				isCard:false,
				isLiHua:false,
				isGx:false,
				btnVisible:false
			}
		},
		props:{
			visible:{
				type:Boolean,
				default:false
			},
			row:{
				type:Object,
				default:() => {}
			},
			resultList:{
				type:Array,
				default:() => []
			},
			listLength:{
				type:Boolean,
				default:false
			},//是否开完
			isActivity:{
				type:String,
				default:''
			},//是否是活动盲盒进入 activity普通活动 runActivity 关于活动
			
		},
		components:{BoxCom,LiHuaCom,GXCom},
		mounted() {
			this.isCard = true
		},
		methods:{
			close(){
				this.$emit('close')
			},
			again(){
				this.$emit('click')
			},
			boxRecrd(){
				uni.$emit('updateTabData', {newData:'newData'});
				uni.switchTab({
					url:`/pages/mine/boxRecrd`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-com{
		.main{
			width: 100%;
			height: 100vh;
			background-color: rgba(0,0,0,0.7);
			position: fixed;
			top: 0;
			left: 0;
			padding-top: 100rpx;
			// border: 1px solid red;
			overflow-y: auto;
			// display: flex;
			// align-items: center;
			// justify-content: center;
			// flex-direction: column;
			.box-main{
				z-index: 20;
			}
		}
		.title-icon{
			width: 430rpx;
			height: 104rpx;
			display: block;
			margin: 0 auto;
		}
		.card-main{
			// display: grid;
			// gap: 22rpx;
			// grid-template-rows: 1fr;
			// margin: 0px auto;
			// grid-template-columns: repeat(3, 1fr);
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			// padding: 24rpx;
			
			.card{
				width: 240rpx;
				height: 364rpx;
				background-repeat: no-repeat;
				background-size: 100%;
				transform-style: preserve-3d;
				animation: flip 0.8s linear;
				z-index: 20;
				position: relative;
				padding-top: 80rpx;
				.shop-img{
					// border: 1px solid red;
					display: block;
					margin: 0 auto;
					width: 170rpx;
					height: 170rpx;
					// border: 1px solid red;
					// position: absolute;
					// top: 100rpx;
					// left: 100rpx;
				}
				.shop{
					// position: absolute;
					// // top: 548rpx;
					// top: 328rpx;
					// left: 60rpx;
					width: 180rpx;
					margin: 12rpx auto;
					// border: 1px solid red;
					.name{
						width: 180rpx;
						text-align: center;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-weight: bold;
						font-size: 26rpx;
						// color: #99754D;
					}
					.price{
						width: 220rpx;
						text-align: center;
						margin-top: 12rpx;
						font-size: 30rpx;
						// color: #99754D;
					}
				}
			}
			
			.rare-icon{
				background-image:url('@/static/grade/RARE.png');
				color: #5a2fc8;
			}
			.supreme-icon{
				background-image:url('@/static/grade/SUPREME.png');
				color: #7d451e;
			}
			.hidden-icon{
				background-image:url('@/static/grade/HIDDEN.png');
				color: #2c4dbb;
			}
			.normal-icon{
				background-image:url('@/static/grade/NORMAL.png');
				color:#203456
			}
		}
		
		@keyframes flip {
		  0% {
		    transform: rotateY(0deg) scale(0);
		  }
		  100% {
		    transform: rotateY(360deg) scale(1);
		  }
		}
		.again-icon{
			width: 228rpx;
			height: 96rpx;
			font-size: 44rpx;
			// display: block;
			// margin-top: -40rpx;
			z-index: 21;
			color: rgba(255,255,255,0.9);
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: YouSheBiaoTiHei; 
			margin: 0 20rpx;
			background-image: url('@/static/new/tip/btn.png');
			background-repeat: no-repeat;
			background-size: 100%;
			position: relative;
			.no-like{
				position: absolute;
				color: #fff;
				font-size: 20rpx;
				font-family: serif;
				bottom: 0;
			}
			// margin: 8rpx auto 8rpx auto;
		}
		.look-zoom{
			animation: zoomAnimation 0.7s infinite alternate;
		}
		@keyframes zoomAnimation {
		  0% {
			transform: scale(1); /* 初始状态，原始大小 */
		  }
		  100% {
			transform: scale(1.2); /* 回到原始大小 */
		  }
		}
		.close-icon{
			width: 64rpx;
			height: 64rpx;
			display: block;
			margin: 20rpx auto;
			z-index: 22;
		}
		.lihua{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
		}
		.gx{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
		}
	}
	
</style>