<template>
	<view class="bg">
		<image class="back-icon" src="/static/back.png" @click="goBack()"></image>
		
		<view class="content">
			<image class="head-title" src="/static/4/head_title.png">
			
			<view class="line"></view>
			
			<view class="head-img-container">
				<image :class="['head-img','head-img-'+i]" @click="changeCurrent(i)"
				 v-for="(item,i) in 2" :key="i" :src="currentIndex==i?`/static/4/p${i}_active.png`:`/static/4/p${i}.png`" >
			</view>
			
			<view class="line" style="background: #FCF1E6;margin-top: 24rpx;"></view>	
		</view>
			<view style="width: 100%;position: relative;">
				<image class="card" src="/static/4/card.png" @click="viewCard()"></image>
				
				<image style="width: 100%;margin-top: 32rpx;" :src="`/static/4/${currentIndex}.png`" mode="widthFix"></image>
				
				<image class="concat" src="/static/3/concat.png" @click="concat()"></image>
				
				<view style="height: 150rpx;width: 100%;"></view>
				
			</view>
			
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headImgs: [],
				currentIndex: 0
			}
		},
		methods: {
			changeCurrent (i) {
				this.currentIndex = i
			},
			viewCard () {
				let img0 = require("static/4/0_card.png")
				let img1 = require("static/4/1_card.png")
				let urls = [img0]
				if (this.currentIndex == 1) {
					urls = [img1]
				}
				uni.previewImage({
					urls: urls,
					fail: (res)=>{
						console.log(res)
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	*{
		box-sizing: border-box;
	}
	.bg{
		width: 100%;
		min-height: 100vh;
		position: relative;
		background: black;
	}
	.head-title{
		width: 642rpx;
		height: 74rpx;
	}
	.content{
		width: 100%;
		padding: 60rpx 60rpx 0;
	}
	.line{
		width: 100%;
		height: 2rpx;
		background: #FCF1E6;
		margin: 32rpx 0;
	}
	.head-img-container{
		display: flex;
		justify-content:space-between;
		flex-wrap: wrap;
		padding: 0 50rpx;
		.head-img{
			width: 178rpx;
			height: 260rpx;
			margin: 0 20rpx;
			margin-bottom: 32rpx;
		}
	}
	.concat{
		width: 569rpx;
		height: 74rpx;
		display: block;
		margin: 84rpx auto 0;
	}
	.card{
		width: 117rpx;
		height: 116rpx;
		position: absolute;
		top: 434rpx;
		left: 59rpx;
		z-index: 20;
	}
</style>