<template>
	<view class="page">
		<view class="content">
			<view class="title-box"></view>
			<view class="box" :style="{backgroundImage: 'url(' + bg + ')','background-repeat':'no-repeat',
			         backgroundSize:'100% 100%'}">
				<view class="tab-bar">
					<view :class="currentIndex==1? 'tab-active' : 'tab-default'" @click="tabChange(1)">个人证书</view>
					<view :class="currentIndex==2? 'tab-active' : 'tab-default'" @click="tabChange(2)">单位证书</view>
				</view>
				<view>测试</view>
				<view>测试</view>
				<view>测试</view>
				<view>测试</view>
				<view>测试</view>
				<view>测试</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 1,
				bg1: "../../static/images/ic_certify_tab_1.png",
				bg: "../../static/images/ic_certify_tab_1.png",
				bg2: "../../static/images/ic_certify_tab_2.png",

			}
		},
		methods: {
			tabChange(i) {
				this.currentIndex = i;
				if (i == 1) {
					this.bg = this.bg1
				} else {
					this.bg = this.bg2
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;

	}

	.page {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
	}

	.content {
		width: 100%;
		position: relative;

	}

	.box {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		min-height: 700rpx;
		height: auto;
		width: 90%;
		position: absolute;
		top: 470rpx;
		left: 50%;
		transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
		box-shadow: 0rpx 7rpx 33rpx 16rpx rgba(188, 226, 204, 0.15);
		border-radius: 30rpx;
	}

	.tab-bar {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding-top: 15rpx;

		.tab-active {
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
			color: #00821E;
		}

		.tab-default {
			text-align: center;
			font-size: 40rpx;
			font-weight: 200;
			color: #00821E;
		}
	}

	.title-box {
		width: 100%;
		height: 800rpx;
		background-image: url('../../static/images/ic_certify_title_bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
</style>
