cberpapp/pages/snap/snap.vue

<template>
	<view>
		<view>
			
			<view class="cu-bar bg-white solid-bottom " v-if="showunloadlist">
				<view class="action">
					<text class="cuIcon-titles text-orange "></text>待上传客户列表
				</view>
			</view>
			<view class="padding-x" v-if="showunloadlist">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
					<view class="flex" >
						<view class=" margin-l20 customer-list flex align-center "
						v-for="(item,index) in customerlist" :key="index" @click="tosel(index,item)">
							<view class="customer-title padding radius" :data-id="index" 
							:class="index==selidx?'text-white bg-gradual-blue at-item':'bg-gray'">
								{{item}}
							</view>
						</view>
						<view class=" margin-l20 customer-list flex align-center " v-if="!showunloadlist">
							<view class="customer-title padding radius bg-gray justify-center"  >
								暂无信息
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
			
			
			
			
		<!-- 	<view v-if="!showunloadlist">
				<view class="flex-row">待上传客户列表</view>
				<scroll-view scroll-y="true" class="scrollY">
					<view class="cu-item" :class="index==selidx?'selected':''" @click="tosel(index,item)"
						v-for="(item,index) in customerlist" :key="index">{{item}}</view>
				</scroll-view>
			</view> -->
			
			
			<view class="middle-line-x"></view>
			<view class="cu-bar bg-white solid-bottom ">
				<view class="action">
					<text class="cuIcon-title text-orange "></text>{{customer.custname}}
				</view>
			</view>
			
			<view class="padding-lr">
				<view class="cu-form-group ">
					<view class="title">分类</view>
					<picker  @change="photocalssChange" :value="class_index" :range="photocalsses">
						<view class="picker">
							{{photocalsses[class_index]}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group ">
					<view class="title">标签</view>
					<picker  @change="photolabelChange" :value="label_index" :range="photolabels">
						<view class="picker">
							{{photolabels[label_index]}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group bord-b">
					<view class="title">备注</view>
					<input class="text-center" type="text" v-model="notes" placeholder="请输入备注"></input>
				</view>
			</view>
			
			
			<!-- <view class="flex-row">
				<text style="width: 120rpx; text-align: right; padding-right: 10rpx;">客户名:</text>
				<view>{{customer.custname}}</view>
			</view>
			<view class="flex-row infoitem">
				<text class="label">分类:</text>
				<picker style="width: 550rpx;" @change="photocalssChange" :value="class_index" :range="photocalsses">
					<view class="select-picker">
						<text class="placeholder"
							:class="photo_class === ''?'default':''">{{photocalsses[class_index]}}</text>
						<view class="select-picker-arrow-area">
							<view class="select-picker-arrow"></view>
						</view>
					</view>
				</picker>
			</view>
			<view class="flex-row infoitem">
				<text class="label">标签:</text>
				<picker style="width: 550rpx;" @change="photolabelChange" :value="label_index" :range="photolabels">
					<view class="select-picker">
						<text class="placeholder"
							:class="photo_label === ''?'default':''">{{photolabels[label_index]}}</text>
						<view class="select-picker-arrow-area">
							<view class="select-picker-arrow"></view>
						</view>
					</view>
				</picker>
			</view>
			<view class="flex-row infoitem">
				<text class="label">备注:</text>
				<view class="select-picker">
					<input type="text" v-model="notes" placeholder="请输入备注"
						style="width: 530rpx; background-color: #FFF;" />
				</view>
			</view> -->
			
			
			
			
			<!-- 		<view>
				<image @click="snap" mode="aspectFit" src='../../static/img/paizhao.png' class="snap-img"></image>
			</view> -->



			<!-- 			<view class="photos">
				<view class="container" v-for="(item,index) in 3" :key="index">
					<image :src="item.img" class="photo" @click="lookImg(index)"></image>
					
					<checkbox class="round red" :class="'item.selected'"  @click="chg(item)"   /></checkbox>

				</view>
			</view> -->




			<!-- <view class="cu-bar bg-white margin-top">
			<view class="action">
				图片拍照上传
			</view>
			<view class="action">
				{{imgArr.length}}/4
			</view>
		</view> -->
			<view class="middle-line ">
			</view>
			
			<view class="cu-bar bg-white bord-b margin-b20">
				<view class="action">
					选择全部图片
				</view>
				
				<view class="action" >
					<switch color="#068eee" style="transform:scale(0.9)" @change="selectAll" />
				</view>
			</view>
			<view class="cu-form-group ">
				<view class="grid col-3 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgArr" :key="index" :data-url="imgArr[index].img">
						<image :src="imgArr[index].img" mode="aspectFill" @tap="ViewImage(index)"></image>
						<view class="cu-tag bg-red" :data-index="index">
							<!-- <checkbox class="round blue"  @tap.stop="chg(item)"  ></checkbox> -->
							<checkbox class="round blue" :class="item.selected?'checked':''" @tap="chg(item)">
							</checkbox>
						</view>
					</view>
					<view class="solids" @tap="snap()">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			
			
			<view class="padding flex flex-direction">
				<!-- <button class="cu-btn round bg-yellow " @click="selectAll()">全选</button>				 -->
				<button class="cu-btn round bg-gradual-blue " @click="upload()">上传</button>
				<button class="cu-btn round bg-grey margin-tb-sm" @click="del()">删除</button>
				<!-- <view class="bg-green"  @click="selectAll()">全选</view>
				<view class="bg-cyan"  @click="del()">删除</view>
				<view class="bg-orange"  @click="upload()">上传</view> -->
			</view>
			
			
			
			

			<!--因为要用到canvas，而项目中不能显示canvas，所以对它进行了隐藏-->
			<view style="width: 0; height: 0; overflow: hidden; visibility: hidden;">
				<canvas class='canvas' :style="{'width': canvasWdith+'px', 'height': canvasHeight+'px'}"
					canvas-id="firstCanvas"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from "moment";
	// #ifdef APP-PLUS
	import { openSqlite,executeSql,closedb,getTable,isTable,getAllField,insertAll,addSql,getPageList,selectList,deleteSql,updateSql,selectSql,batchUpdate} from "@/common/database.js";
	// #endif
	export default {
		data() {
			return {
				showunloadlist: false,
				customer: '',
				customerlist: [], //未上传的图片的客户队列
				selidx: 0,
				imgArr: [],
				//allimgArr: [],
				selectall: false,
				latitude: '23.123456',
				longitude: '113.123456',
				photocalsses: [],
				photolabels: [],
				class_index: 0,
				label_index: 0,
				notes: '',
				photo_label: '',
				photo_class: '',
				canvasWdith: 0,
				canvasHeight: 0,
				
				current: 0,
				//imgList:['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'],
			}
		},
		async onLoad(options) {
			
			//console.log('snap load',options)
			uni.hideLoading();
			var type = this.$store.state.optype
			console.log('snap load', type)
			
			if (type == 'un_upload') {
				var res = await this.getcustname()
				this.customerlist = res
				this.showunloadlist = true
				this.tosel(0, this.customerlist[0])
				console.log('加载获取',this.customerlist);
			} else {
				// this.customer = JSON.parse(options.customer)
				this.customer = this.$store.state.customer
				console.log('customer', this.customer);
				this.reloadimgarr(this.customer.custname)
			}
			
			// this.customer = JSON.parse(options.customer)
			console.log('客户信息',this.customer);
		},
		
		
		
		onShow() {
			var that = this
			
			var type = this.$store.state.optype
			if (type == 'view') {return}  //看图后返回
			this.getPhotoClass()
			this.getLocation()		

		},
		onHide: function() {
			console.log('snap Hide')
			uni.setStorage({
				key: 'unUploadimgs',
				data: this.imgArr,
				success() {
					console.log("存储成功unUploadimgs")
				}
			})
		},
		methods: {
			RadioChange(e) {
				console.log('radio',e.detail.value);
				
			},
			async reloadimgarr(custname){
				var res = await this.getunuploadbycust(custname)
				this.imgArr = []
				res.forEach(item =>{
					let it = {
						id:item.id,
						img:item.img,
						selected:false,
						custname:item.custname,
						customer:JSON.parse(item.customer)
					}
					this.imgArr.push(it)
				})
			},
			async getcustname(){
				var sql='select distinct custname from unupload'
				var ds = await selectSql(sql)
				var ret = []
				ds.forEach(item=>{
					ret.push(item.custname)
				})
				console.log(ret)
				return ret
			},
			async getcustomerinfo(custname){
				var sql='select distinct customer from unupload where custname="' + custname + '"' 
				var ds = await selectSql(sql)
				console.log('数据库获取用户信息',ds[0].customer)//没有坐标信息 上传图片失败
				return ds[0].customer 
			},
			async getunuploadbycust(custname){
				var sql='select * from unupload where custname="' + custname + '"' 
				console.log(sql)
				var ds = await selectSql(sql)
				console.log(ds)
				return ds
			},
			async addunloadimg(item){				
				var ret = await addSql("unupload",item)
				console.log(ret)
				this.reloadimgarr(item.custname)
			},
			
			async delunloadimg(item){
				console.log('exsql',item)
				var sql='delete from unupload where id=' +item.id 
				
				var ret = await executeSql(sql)
				console.log(ret)
			},
			
			async tosel(e, cust) {
				
				console.log(e, cust)
				this.selidx = e															
				var ct = await this.getcustomerinfo(cust)				
				this.customer = JSON.parse(ct)
				this.reloadimgarr(cust)
			},

			getLocation() {
				var that = this
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(res);
						that.latitude = res.latitude; //获取到的纬度
						that.longitude = res.longitude; //获取到的经度
					},
					fail: (res) => {
						uni.showToast({
							title: '获取位置信息失败',
							icon: 'none'
						})
					}
				})
			},
			watermark(tempfile) {
				var that = this
				uni.getImageInfo({
					src: tempfile,
					success: (ress) => {
						console.log('ress', ress);
						//console.log('res :',res.tempFilePaths[0]);
						let ctx = uni.createCanvasContext('firstCanvas'); /** 创建画布 */
						//that.w = ress.width/3 +'px';
						//that.h = ress.height/3+'px';
						let imgWidth = ress.width / 3;
						let imgHeight = ress.height / 3;
						that.canvasWdith = imgWidth;
						that.canvasHeight = imgHeight;
						that.$nextTick(() => {

							//将图片src放到cancas内，宽高为图片大小
							ctx.drawImage(tempfile, 0, 0, ress.width / 3, ress.height / 3)
							ctx.setFontSize(16)
							ctx.setFillStyle('#8a2929')
							//ctx.rotate(30 * Math.PI / 180);
							let textToWidth = 5;
							let textToHeight = ress.height / 3;
							let curdt = moment().format('llll');
							ctx.fillText('客户:' + that.customer.custname, textToWidth, textToHeight -
								80)
							ctx.fillText(' 拍摄时间: ' + curdt, textToWidth, textToHeight - 55)
							ctx.fillText(' 拍摄人: ' + that.customer.saler, textToWidth, textToHeight -
								30)
							ctx.fillText(' 地址:' + that.customer.addr, textToWidth, textToHeight - 5)
							console.log('ctx');
							uni.showLoading({
								title: '制作水印中...',
							})

							/** 除了上面的文字水印，这里也可以加入图片水印 */
							//ctx.drawImage('/static/watermark.png', 0, 0, ress.width / 3, ress.height / 3)
							ctx.draw(false, () => {
								setTimeout(() => {
									uni.canvasToTempFilePath({
										canvasId: 'firstCanvas',
										quality: 0.6,
										fileType: 'jpg',
										width: that.canvasWdith,
										height: that.canvasHeight,
										success: (
											res1) => {
											console.log('res1', res1);
											uni.hideLoading();
											uni.saveImageToPhotosAlbum({ //保存到手机
												filePath: res1
													.tempFilePath,
												success: (res) => {
													console.log('re',res);			
													var imgulr = res.path
													console.log('imgulr',imgulr);
													var item = {
														selected:true,
														img: imgulr,
														custname: that.customer.custname,
														customer: JSON.stringify(that.customer)
													}													
													 that.addunloadimg(item)													
												}
											})
										},
										fail(err) {
											console.log('canvas err:', err)
											uni.hideLoading();
										}
									});
								}, 500);
							});
						})
					}
				})
			},

			snap() {
				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera'], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {
						console.log(res);
						this.watermark(res.tempFilePaths[0])
					}
				});
			},

			async del() {
				var that = this
				let selnum = 0
				this.imgArr.forEach(item => {
					if(item.selected)
					selnum +=1 
				});
				if(selnum == 0){
					uni.showToast({
						icon:'none',
						title:'您没有选择图片',
						duration:2000
					})
					return
				}
				uni.showModal({
					title: '图片删除',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: async res => {
						if (res.confirm) {
							var i = this.imgArr.length;
							while (i--) {
								var item = this.imgArr[i]
								if (item.selected) {					
							
									var ret = await that.delLocalimg(item.img)
									console.log(ret)
									if(ret =='success' || ret=='noexist'){									
											this.delunloadimg(item)
											that.imgArr.splice(i, 1);										
									}				
																
								}
							}						
														
						}
					}
				})				
			},


			async upload() {
				var that = this
				let selnum = 0
				this.imgArr.forEach(item => {
					if(item.selected)
					selnum +=1 
				});
				if(selnum == 0){
					uni.showToast({
						icon:'none',
						title:'您没有选择图片',
						duration:2000
					})
					return
				}
				console.log('upload')
				var i = this.imgArr.length;
				while (i--) {
					var item = this.imgArr[i]
					if (item.selected) {
						let res = await this.loadLocalimg(item.img)
						if(res == 'error'){
							//加载图片出错
							this.delunloadimg(item)
							that.imgArr.splice(i, 1)
							continue
						}
						let filinfo = item.img.split('/')
						let filename = filinfo[filinfo.length - 1]
						console.log('filename', filename)				

						let res2 = await this.uploadimg(filename, res)
						
						if (res2 == 'success') {
							this.delunloadimg(item)
							that.imgArr.splice(i, 1);
							uni.hideLoading()
							uni.showToast({			
								title: '上传完成',
								icon:'success',
								duration:3000
							});
						}else {
							uni.hideLoading()
							uni.showToast({			
								title: '上传失败',
								icon:'error',
								duration:3000
							});
						}

					}
				}				
				
			},
			selectAll() {
				console.log('sel', this.selectall)
				var selectall = true
				this.imgArr.forEach(item => {
					if (!item.selected) {
						selectall = false
					}
				});
				//取反、
				selectall = !selectall
				this.imgArr.forEach(item => {
					item.selected = selectall
				});
				console.log('sel', this.imgArr)
			},
			
			
			chg(item, index) {
				console.log('item', item, index)
				this.currentPic = index
				item.selected = !item.selected
			},


			ViewImage(e) {
				console.log('view', e)
				this.$store.dispatch('SetOptype','view')  //放大看图片
				var urls = []
				this.imgArr.forEach(item => {
					urls.push(item.img)
				})

				uni.previewImage({
					urls: urls,
					current: e
				});
			},




			delLocalimg(filename) {
				console.log(filename)
				const that = this;
				return new Promise((resolve, reject) => {					
					plus.io.resolveLocalFileSystemURL(filename,function(entry) {
							console.log('FILE:',filename)
							entry.remove(function(file) {								
								console.log("Remove succeeded");
								// console.log("that.imgArr.length", that.imgArr.length);				
								resolve('success');
							},function(e){
								console.log('删除图片:', e)
								resolve('noexist')
							}
							);
						},
						function(e) {
							console.log('没有图片:', e)
							resolve('noexist')
						}
					);					
					
				})
			},

			uploadimg(filename, imgdata) {
				// console.log('上传图片',filename, imgdata);
				return new Promise((resolve, reject) => {
					var that = this
					//return new Promise((resolve, reject) => {
					console.log('filename:', filename)
					//console.log('file:',evt.target.result)
					console.log('lat:', that.latitude)
					console.log('lng', that.longitude)
					var dis = that.distance(that.latitude, that.longitude, that.customer.lat, that.customer.lng);
					console.log('dis:', dis)

					var params = {
						class: "business_requ",
						eid: this.eid,
						data: {
							verno: "1.0",
							eid: this.eid,
							interface: "Customer/SignIn",
							userid: "",
						}
					}
					params.eid = getApp().globalData.eid
					params.data.eid = getApp().globalData.eid
					params.data.userid = getApp().globalData.userid
					params.data.custid = that.customer.custid
					params.data.branchid = that.customer.branchid
					params.data.saler = that.customer.saler
					params.data.lng = that.longitude
					params.data.lat = that.latitude
					params.data.custlng = that.customer.lng
					params.data.custlat = that.customer.lat
					params.data.far 	= Math.ceil(dis)?Math.ceil(dis):0
					params.data.fname = that.customer.custid + filename // file.name
					params.data.sdate = moment().format('YYYY-MM-DD')
					params.data.stype = that.photo_class
					params.data.label = that.photo_label
					params.data.notes = that.notes
					console.log('request.that.customer:', that.customer)	
					console.log('request.param:', params)
					params.data.pic = imgdata
					uni.showLoading({
						title:'图片上传中....'
					})
					this.$webSockRe(params, 10000,false).then(ret => {
						console.log('图片上传回调',ret.data)
						if (ret.class == 'business_resp' && ret.data.data.Result == 1) {
							//console.log('success')
							resolve('success')
						} else {
							resolve('fail')
						}
					}).catch(err=>{
						console.error(err)
						resolve('fail')
					})
				})
			},

			loadLocalimg(filename) {
				console.log(filename)
				//var filepath = plus.io.convertLocalFileSystemURL(filename) 
				//console.log(filepath)
				return new Promise((resolve, reject) => {
					const that = this;
					
					plus.io.resolveLocalFileSystemURL(
						filename,
						function(entry) {
							entry.file(function(file) {
								console.log('。。。。。')
								let reader = null;
								reader = new plus.io.FileReader();
								reader.onload = function(e) {};
								reader.readAsDataURL(file);
								reader.onloadend = function(e) {
									console.log('laod success')
									resolve(e.target.result)
									//let dataBase = e.target.result;
									
								};
							},
							function(e){
								console.log('打开图片出错:', e)
								resolve('error')
							});
						},
						function(e) {
							console.log('没有图片:', e)
							reject("error")
						}
					);					
										
				})
			},

			
			distance(lat1, lng1, lat2, lng2) {
				var radLat1 = lat1 * Math.PI / 180.0;
				var radLat2 = lat2 * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10;
				return s;
			},
			getPhotoClass() {
				var _this = this

				var params = {
					class: "business_requ",
					eid: this.eid,
					data: {
						verno: "1.0",
						eid: this.eid,
						interface: "SignRecord/getPhotoClass",
						pid: 5
					}
				}
				params.data.eid = getApp().globalData.eid
				params.eid = getApp().globalData.eid
				console.log('requ param :', params)
				this.$webSockRe(params, 5000).then(ret => {
					if (ret.class == 'business_resp') {
						console.log(ret);
						//var eid = ret.data.eid;
						let photocalsses = []
						ret.data.data.forEach(item => {
							photocalsses.push(item.pval)
						})
						_this.photocalsses = []
						_this.photocalsses = _this.photocalsses.concat(photocalsses)
						_this.photo_class = _this.photocalsses[0]
						//console.log('_this.photocalsses', _this.photocalsses);
						//	console.log('getApp().globalData.eid',getApp().globalData.eid);
						_this.getPhotoLabel()
					}
				})

			},
			getPhotoLabel() {
				var _this = this

				var params = {
					class: "business_requ",
					eid: this.eid,
					data: {
						verno: "1.0",
						eid: this.eid,
						interface: "SignRecord/getPhotoLabel",
						pid: 6
					}
				}
				params.data.eid = getApp().globalData.eid
				params.eid = getApp().globalData.eid
				console.log('requ param :', params)
				this.$webSockRe(params, 5000).then(ret => {
					if (ret.class == 'business_resp') {
						let photolabels = []
						ret.data.data.forEach(item => {
							photolabels.push(item.pval)
						})
						_this.photolabels = []
						_this.photolabels = _this.photolabels.concat(photolabels)
						_this.photo_label = _this.photolabels[0]
					}
				})

			},
			photocalssChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.class_index = e.target.value
				this.photo_class = this.photocalsses[this.class_index]
			},
			photolabelChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.label_index = e.target.value
				this.photo_label = this.photolabels[this.label_index]
			},
		}
	}
</script>

<style>
	.selected {
		background-color: #CCCCCC;
	}

	.scrollY {
		height: 240rpx
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.infoitem {
		margin: 20rpx 0;
	}

	.flex-1 {
		width: 170rpx;
		text-align: center;
	}

	.label {
		width: 120rpx;
		text-align: right;
		padding-right: 10rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.cust_info {}

	.func_btn {
		flex: 1;
		margin: 6prx 10rpx;
	}

	.snap-img {
		width: 100rpx;
		height: 100rpx;
	}

	.photos {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: flex-start;
	}

	.photo {
		height: 224rpx;
		width: 168rpx;
		margin: 4rpx 3rpx;
	}

	.container {
		position: relative;
		height: 232rpx;
		width: 174rpx;

	}

	.photosel {
		position: absolute;
		top: 10rpx;
		left: 100rpx;
		color: #000000;
	}

	.select-picker {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		font-size: 14px;
		line-height: 30px;
		padding: 0 4px;
		overflow: hidden;
		/* #ifdef APP-NVUE */
		height: 30px;
		/* #endif */
		border: 1px solid #e5e5e5;
		border-radius: 5px;
		text-indent: 4px;
	}

	.select-picker-arrow-area {
		position: relative;
		width: 20px;
		/* #ifndef APP-NVUE */
		margin-left: auto;
		display: flex;
		/* #endif */
		justify-content: center;
		transform: rotate(-45deg);
		transform-origin: center;
	}

	.select-picker-arrow {
		width: 7px;
		height: 7px;
		border-left: 1px solid #999;
		border-bottom: 1px solid #999
	}

	.placeholder.default {
		color: black;
		text-indent: 0px;
	}

	.select-pic {
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.customer-list{
		width: 180rpx;
		height: 200rpx;
	}
	.customer-title{
		width: 180rpx;
		height: 200rpx;
		text-align: left;
		line-height: 40rpx;
		white-space: normal !important;
		display: flex;
		align-items: center;
	}
	
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 200rpx;
	}
	.at-item {
	  animation-name: shutter-in-left;
	  animation-duration: 1s;
	  animation-timing-function: ease;
	  animation-delay: 0s;
	  animation-iteration-count: 1;
	  animation-direction: normal;
	  animation-fill-mode: none;
	}
	@keyframes shutter-in-left {
	  0%{
		 -webkit-transform: rotateY(100deg);
		 transform: rotateY(100deg);
		 -webkit-transform-origin: left;
		 transform-origin: left;
		 opacity: 0;
	  }
	  100%{
		 -webkit-transform: rotateY(0);
		 transform: rotateY(0);
		 -webkit-transform-origin: left;
		 transform-origin: left;
		 opacity: 1;
	  }
	}
</style>