<template>
	<view class="container">
		<view class="title">
		   <view>
				<text class="line"></text>个人证件资料
			</view>
		   <text class="page_mark">3/8</text>
		 </view>
		 <view class="content">
		     <view class="content_wrapper">
		         <view class="photo">
		           <image src="../../static/front.png" alt="身份证正面" mode="widthFix"></image>
		           <text class="iconfont icon-weibiaoti553" ></text>
		           <view class="choseBtn" >点击添加身份证正面</view>
		         </view>
		         <!-- <image class="showimage" ></image> -->
		         <view class="tips">
		           <view>（正确示例：身份证正面，字体清晰）</view>
		           <view>（jpg,png 文件大小不大于1mb）</view>
		         </view>
		     </view>
		     <view class="content_wrapper" style="margin-top: 25px;">
		         <view class="photo">
		           <image src="../../static/back.png" alt="身份证反面面" mode="widthFix"></image>
		           <text class="iconfont icon-weibiaoti553" ></text>
		           <view class="choseBtn" >点击添加身份证反面</view>
		         </view>
		         <!-- <image class="showimage"></image> -->
		         <view class="tips">
		           <view>（正确示例：身份证反面，字体清晰）</view>
		           <view>（jpg,png 文件大小不大于1mb）</view>
		         </view>
		     </view>
		   </view>
		 <navigator class="fixed" url="education" @click="saveInfo()">
		   保存并下一步
		 </navigator>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				applyParam:{
					idFrontPageOssPath:'',
					idBackPageOssPath:''
				}
			}
		},
		components:{},
		onLoad(){
			
		},
		methods:{
			saveInfo(){
				uni.setStorageSync('applyParam',JSON.stringify(this.applyParam))
			}
		}
	}
</script>

<style lang="scss">
	@import 'applyCommon.scss';
	.content_wrapper{
	    display: flex;
	    justify-content: center;
	    flex-wrap: wrap;
	    margin-top: 10px;
	    overflow: hidden;
	    .photo{
	        text-align: center;
	        border: 1px #8D8D8D dashed;
	        border-radius: 4px;
	        display: flex;
	        justify-content: center;
	        align-items: center;
	        flex-direction: column;
	        font-size: 12px;
	        color: #333;
	        width: 75%;
	        background-size:contain;
	        background-repeat: no-repeat;
	        position: relative;
	       .icon-weibiaoti553{
	           position: absolute;
	       }
	        .choseBtn{
	            position: absolute;
	            font-size: 13px;
	            bottom: 19%;
	        }
	    }
	    .showImg{
	                max-width: 429px;
	                max-height: 276px;
	            }
	}
	
</style>