jp-employment-kfq/pages/buytickets/adjust.vue

<template>
	<view>
		<car-common   mytitle="调整照片" ref="common"></car-common>
		
		<view class="adjust-img">
		 
			<vueCropper ref="cropper" :img="cropper.img " :outputSize="cropper.size" :outputType="cropper.outputType" :info="cropper.info"
			 :canScale="cropper.canScale" :autoCrop="cropper.autoCrop" :autoCropWidth="cropper.autoCropWidth" :autoCropHeight="cropper.autoCropHeight"
			 :fixed="cropper.fixed"  :fixedBox="cropper.fixedBox" :fixedNumber="cropper.fixedNumber"  @imgLoad="imgLoad" :enlarge="4"></vueCropper>
			 
		</view>
		<view class="adjust-btn">
			<u-button type="primary" size="medium" shape="circle" @click="rotateRight()">旋转</u-button>
			<u-button type="error" size="medium" shape="circle" @click="submit()">确定</u-button>
			
		</view>
		
		<view class="adjust-text">
			<p>1.照片仅用于乘车时人脸识别设备的验证，请上传清晰现场拍摄的肩部半身照；</p>
			<p>2.可拖动、旋转或缩放照片，将人脸区域调整至轮廓框以内。</p>
		</view>
	</view>
</template>

<script>
	import api from './adjust.js'
	export default api;
</script>

<style>
	page{
		background-color: #000;
	}
</style>
<style scoped lang="scss">
	.adjust-img{
		position: relative;
		height: 240px;
		width: 240px;
		margin:50px auto;
		img{
			height: 100%;
			width: 100%;
		}
	}
	.adjust-btn{
		display: flex;
		justify-content: space-between;
	}
	.adjust-text{
		padding:60rpx;
		p{
			color:#888;
			margin-bottom: 10rpx;
		}
	}
	.adjust-icon{
		background-color: #fff;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		position: absolute;
		right: -10px;
		top: -10px;
		text-align: center;
	}
	.adjust-icon2{
		background-color: #fff;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		position: absolute;
		right: -10px;
		bottom: -10px;
		text-align: center;
	}
</style>