536 lines
		
	
	
		
			14 KiB
		
	
	
	
		
			Vue
		
	
	
	
		
		
			
		
	
	
			536 lines
		
	
	
		
			14 KiB
		
	
	
	
		
			Vue
		
	
	
	
|  | <template> | |||
|  | 	<!-- #ifdef APP-PLUS --> | |||
|  | 	<view class="ev-w-100vw"> | |||
|  | 		<view @click="getElRect1('Poster1')" class="ev-m-32 ev-fr-s-c pt20"> | |||
|  | 			<view class="card1 Poster1 d-c d-b-s pr"> | |||
|  | 				<image crossorigin="anonymous" data-etype="image" :data-enode="info.img1" :src="info.img1" mode="aspectFit" class="card-bg Poster1"></image> | |||
|  | 				<image | |||
|  | 					v-if="detail.headPath" | |||
|  | 					crossorigin="anonymous" | |||
|  | 					data-etype="image" | |||
|  | 					:data-enode="detail.headPath" | |||
|  | 					:src="detail.headPath" | |||
|  | 					class="headPath Poster1" | |||
|  | 					mode="widthFix" | |||
|  | 				></image> | |||
|  | 				<view style="z-index: 1;"> | |||
|  | 					<image crossorigin="anonymous" data-etype="image" :data-enode="info.img2" :src="info.img2" mode="widthFix" class="icon-img Poster1"></image> | |||
|  | 					<view :data-enode="$t('MN_T_1') + ':' + (detail.memberCode || '')" class="Poster1 mb20 pr" style="z-index: 1;color: rgb(255, 255, 0);"> | |||
|  | 						{{ $t('MN_T_1') + ':' + (detail.memberCode || '') }} | |||
|  | 					</view> | |||
|  | 					<view :data-enode="$t('PER_DA_14') + ':' + (detail.memberName || '')" class="Poster1 mb20 pr white" style="z-index: 1;"> | |||
|  | 						{{ $t('PER_DA_14') + ':' + (detail.memberName || '') }} | |||
|  | 					</view> | |||
|  | 					<view :data-enode="$t('PER_DA_15') + ':' + (detail.pkGradeVal || '')" class="Poster1 mb20 pr white" style="z-index: 1;"> | |||
|  | 						{{ $t('PER_DA_15') + ':' + (detail.pkGradeVal || '') }} | |||
|  | 					</view> | |||
|  | 					<view :data-enode="$t('S_C_83') + ':' + (detail.pkCountryVal || '')" class="Poster1 mb20 pr white" style="z-index: 1;"> | |||
|  | 						{{ $t('S_C_83') + ':' + (detail.pkCountryVal || '') }} | |||
|  | 					</view> | |||
|  | 				</view> | |||
|  | 				<view class="d-s-c"> | |||
|  | 					<view :data-enode="$t('S_L_4') + ':'" class="Poster1 pr white" style="z-index: 1;">{{ $t('S_L_4') + ':' }}</view> | |||
|  | 					<view :data-enode="detail.countryCode || ''" class="Poster1 f28 ml10 pr white" style="z-index: 1;">{{ detail.countryCode || '' }}</view> | |||
|  | 				</view> | |||
|  | 			</view> | |||
|  | 			<view class="card2 Poster1 d-c d-b-s pr"> | |||
|  | 				<view class="d-s-c"> | |||
|  | 					<view :data-enode="$t('PER_DA_18') + ':'" class="Poster1 white pr" style="z-index: 1">{{ $t('PER_DA_18') + ':' }}</view> | |||
|  | 					<view :data-enode="detail.globalCode || ''" class="Poster1 white pr ml10 f28" style="z-index: 1">{{ detail.globalCode || '' }}</view> | |||
|  | 				</view> | |||
|  | 
 | |||
|  | 				<!-- <image crossorigin="anonymous" data-etype="image" :data-enode="info.img2" :src="info.img2" | |||
|  | 					mode="widthFix" class="icon-img Poster1" style="margin-bottom: 0;flex-shrink: 0;"></image> --> | |||
|  | 				<image crossorigin="anonymous" data-etype="image" :data-enode="info.img1 || ''" :src="info.img1 || ''" mode="aspectFit" class="card-bg Poster1"></image> | |||
|  | 				<view class="awardsIcon-box d-c d-c-c"> | |||
|  | 					<image | |||
|  | 						crossorigin="anonymous" | |||
|  | 						data-etype="image" | |||
|  | 						:data-enode="detail.awardsIcon || ''" | |||
|  | 						:src="detail.awardsIcon || ''" | |||
|  | 						mode="widthFix" | |||
|  | 						class="awardsIcon Poster1" | |||
|  | 					></image> | |||
|  | 					<!-- <view :data-enode="detail.pkAwardsVal || ''" class="Poster1 mt20 pr white">{{ detail.pkAwardsVal || '' }}</view> --> | |||
|  | 					<view :data-enode="detail.pkAwardsVal" class="Poster1 white" style="z-index: 1;">{{ detail.pkAwardsVal }}</view> | |||
|  | 				</view> | |||
|  | 				<view class="d-b-e ww100" style="height: 412rpx;"> | |||
|  | 					<view> | |||
|  | 						<view :data-enode="$t('S_L_5') + ':' + (detail.registerTime || '')" class="Poster1 pr white" style="z-index: 1;"> | |||
|  | 							{{ $t('S_L_5') + ':' + (detail.registerTime || '') }} | |||
|  | 						</view> | |||
|  | 					</view> | |||
|  | 				</view> | |||
|  | 			</view> | |||
|  | 		</view> | |||
|  | 		<button class="normal-sub-btn mt20" @click="downImage('Poster1')">{{ $t('S_C_45') }}</button> | |||
|  | 
 | |||
|  | 		<Eposter width="750" height="1334" :list="list" backgroundColor="rgb(255, 255, 255)" @on-success="onSuccess" @on-error="onErrorFunc" ref="Eposter"></Eposter> | |||
|  | 		<!-- <image crossorigin="anonymous"  class="ev-w-100vw" :src="posterImg" mode="widthFix"></image> --> | |||
|  | 	</view> | |||
|  | 	<!-- #endif --> | |||
|  | 	<!-- #ifdef H5 --> | |||
|  | 	<view class="main"> | |||
|  | 		<div id="myImage"> | |||
|  | 			<view class="bg-card"> | |||
|  | 				<image class="img" src="/static/bg/ele-user.png"></image> | |||
|  | 				<view class="content"> | |||
|  | 					<view class="logo"><image src="/static/images/logo.png"></image></view> | |||
|  | 				</view> | |||
|  | 				<view class="user-bottom"> | |||
|  | 					<!-- 	<view class="user-atatar"> | |||
|  | 		 				<image :src="userInfo.headPath"></image> | |||
|  | 		 			</view> --> | |||
|  | 				</view> | |||
|  | 				<div class="user-infos"> | |||
|  | 					<view class="user" style="color: #ffff00;">{{ $t('MN_T_1') }}:{{ userInfo.memberCode }}</view> | |||
|  | 					<div class="user">{{ $t('PER_DA_14') }}:{{ userInfo.memberName }}</div> | |||
|  | 					<div class="user">{{ $t('ENU_PER_TY_1') }}:{{ userInfo.pkGradeVal }}</div> | |||
|  | 					<div class="user">{{ $t('S_C_83') }}:{{ userInfo.pkCountryVal }}</div> | |||
|  | 				</div> | |||
|  | 				<div class="code">{{ $t('S_L_4') }}:{{ userInfo.countryCode }}</div> | |||
|  | 
 | |||
|  | 				<div class="logo-img" v-if="userInfo.headPath"><img :src="userInfo.headPath" /></div> | |||
|  | 			</view> | |||
|  | 			<view class="bg-card"> | |||
|  | 				<image class="img" src="/static/bg/ele-user.png"></image> | |||
|  | 				<view class="content"> | |||
|  | 					<view class="logo bh"> | |||
|  | 						<!-- <image src="../../static/images/logo.png"></image> --> | |||
|  | 						{{ $t('PER_DA_18') }}:{{ userInfo.globalCode }} | |||
|  | 					</view> | |||
|  | 				</view> | |||
|  | 				<view class="logos"> | |||
|  | 					<image crossorigin="" v-if="userInfos.awardsIcon" :src="userInfos.awardsIcon"></image> | |||
|  | 					<view class="award">{{ userInfo.pkAwardsVal }}</view> | |||
|  | 				</view> | |||
|  | 				<div class="code">{{ $t('S_L_5') }}:{{ datatime(userInfo.registerTime) }}</div> | |||
|  | 				<!-- <div class="time"> | |||
|  | 						{{$t('S_L_5')}}:{{ datatime(userInfo.registerTime) }} | |||
|  | 					 </div> --> | |||
|  | 			</view> | |||
|  | 		</div> | |||
|  | 		<u-button type="success" shape="circle" class="btn" @click="saveImage">{{ $t('S_C_45') }}</u-button> | |||
|  | 		<a id="link"></a> | |||
|  | 		<view style="height: 20rpx;"></view> | |||
|  | 	</view> | |||
|  | 	<!-- #endif --> | |||
|  | </template> | |||
|  | 
 | |||
|  | <script> | |||
|  | import Eposter from '@/components/evils-el-poster/Poster.vue'; | |||
|  | import img1 from '@/static/bg/ele-user.png'; | |||
|  | import img2 from '@/static/bg/ele-logo.png'; | |||
|  | import html2canvas from 'html2canvas'; | |||
|  | export default { | |||
|  | 	components: { | |||
|  | 		Eposter | |||
|  | 	}, | |||
|  | 	data() { | |||
|  | 		return { | |||
|  | 			list: [], | |||
|  | 			info: { | |||
|  | 				img1: img1, | |||
|  | 				img2: img2, | |||
|  | 				name: '', | |||
|  | 				time: '', | |||
|  | 				desc: '' | |||
|  | 			}, | |||
|  | 			detail: { | |||
|  | 				memberCode: '', | |||
|  | 				memberName: '', | |||
|  | 				registerTime: '', | |||
|  | 				pkCountry: 1, | |||
|  | 				pkCountryVal: '', | |||
|  | 				countryCircularIcon: '', | |||
|  | 				countrySquareIcon: '', | |||
|  | 				pkSettleCountry: 1, | |||
|  | 				pkSettleCountryVal: '', | |||
|  | 				settleCountryCircularIcon: '', | |||
|  | 				settleCountrySquareIcon: '', | |||
|  | 				pkGrade: 0, | |||
|  | 				pkGradeVal: '', | |||
|  | 				pkAwards: 0, | |||
|  | 				pkAwardsVal: '', | |||
|  | 				awardsIcon: '', | |||
|  | 				currencyIcon: '', | |||
|  | 				registerAuthority: 0, | |||
|  | 				registerFans: 1, | |||
|  | 				registerShare: 1, | |||
|  | 				headPath: '', | |||
|  | 				consumeAchieve: '', | |||
|  | 				payTime: '', | |||
|  | 				globalCode: '', | |||
|  | 				countryCode: '' | |||
|  | 			}, | |||
|  | 			posterImg: '', | |||
|  | 			downImg: [], | |||
|  | 			userInfo: '', | |||
|  | 			userInfos: '' | |||
|  | 		}; | |||
|  | 	}, | |||
|  | 	computed: {}, | |||
|  | 	onLoad() { | |||
|  | 		this.getData(); | |||
|  | 		 | |||
|  | 	}, | |||
|  | 	methods: { | |||
|  | 		saveImage() { | |||
|  | 			const options = { | |||
|  | 				backgroundColor: null // null或transparent可将canvas背景设置为透明
 | |||
|  | 			}; | |||
|  | 			html2canvas(document.querySelector('#myImage'), options).then(canvas => { | |||
|  | 				const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream'); | |||
|  | 				const link = document.getElementById('link'); | |||
|  | 				link.setAttribute('download', '电子会员卡.png'); | |||
|  | 				link.setAttribute('href', canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')); | |||
|  | 				link.click(); | |||
|  | 			}); | |||
|  | 		}, | |||
|  | 		getCard(){ | |||
|  | 			let self = this; | |||
|  | 			self._get('member/api/member/get-card', {}, res => { | |||
|  | 				self.userInfos.gradeIcon = 'data:image/png;base64,' + res.data.gradeIconStr; | |||
|  | 				self.userInfos.awardsIcon = 'data:image/png;base64,' + res.data.awardsIconStr; | |||
|  | 			}); | |||
|  | 		}, | |||
|  | 		getData() { | |||
|  | 			let self = this; | |||
|  | 			self._get('member/api/member/get-info', {}, res => { | |||
|  | 				// if (self.detail.headPath) {
 | |||
|  | 				// 	self.getImg(self.detail.headPath, 'headPath');
 | |||
|  | 				// }
 | |||
|  | 				// if (self.detail.awardsIcon) {
 | |||
|  | 				// 	self.getImg(self.detail.awardsIcon, 'awardsIcon');
 | |||
|  | 				// }
 | |||
|  | 				// self.detail.headPath = '/static/bg/card1.png';
 | |||
|  | 				// self.detail.awardsIcon = '/static/bg/card2.png';
 | |||
|  | 
 | |||
|  | 				// #ifndef H5
 | |||
|  | 				self.detail = res.data; | |||
|  | 				console.log(self.detail); | |||
|  | 				// #endif
 | |||
|  | 				// #ifdef H5
 | |||
|  | 				self.userInfos = res.data; | |||
|  | 				self.userInfo = res.data; | |||
|  | 				// if (res.data.gradeIconStr) {
 | |||
|  | 				// 	self.userInfos.gradeIconStr = 'data:image/png;base64,' + res.data.gradeIconStr;
 | |||
|  | 				// 	self.userInfos.gradeIconStr.replace(/[\r\n]/g, '');
 | |||
|  | 				// }
 | |||
|  | 				// if (res.data.awardsIconStr) {
 | |||
|  | 				// 	self.userInfos.awardsIconStr = 'data:image/png;base64,' + res.data.awardsIconStr;
 | |||
|  | 				// 	self.userInfos.awardsIconStr.replace(/[\r\n]/g, '');
 | |||
|  | 				// }
 | |||
|  | 				// #endif
 | |||
|  | 				// #ifdef H5
 | |||
|  | 				self.getCard(); | |||
|  | 				// #endif
 | |||
|  | 			}); | |||
|  | 		}, | |||
|  | 		datatime(value) { | |||
|  | 			var data = new Date(value); | |||
|  | 			const month = data.getMonth() < 9 ? '0' + (data.getMonth() + 1) : data.getMonth() + 1; | |||
|  | 			var date = data.getDate() <= 9 ? '0' + data.getDate() : data.getDate(); | |||
|  | 			let dates = data.getFullYear() + '-' + month + '-' + date; | |||
|  | 			return dates; | |||
|  | 		}, | |||
|  | 		getImg(url, name) { | |||
|  | 			uni.getImageInfo({ | |||
|  | 				src: url, | |||
|  | 				success: res => { | |||
|  | 					console.log('res11111', res); | |||
|  | 					this.detail[name] = res.path; | |||
|  | 				}, | |||
|  | 				fail: res => { | |||
|  | 					this.detail[name] = ''; | |||
|  | 					uni.hideLoading(); | |||
|  | 					console.log('res', res.errMsg); | |||
|  | 				} | |||
|  | 			}); | |||
|  | 		}, | |||
|  | 		downImage(elClass) { | |||
|  | 			this.$refs.Eposter.createForElRect(elClass, false); | |||
|  | 		}, | |||
|  | 		getElRect1(elClass) { | |||
|  | 			this.$refs.Eposter.createForElRect(elClass, false); | |||
|  | 		}, | |||
|  | 		onSuccess(val) { | |||
|  | 			console.log('success  '); | |||
|  | 			this.posterImg = val; | |||
|  | 			this.downloadImg(this.posterImg); | |||
|  | 		}, | |||
|  | 		startDownload(item) { | |||
|  | 			let listData = []; | |||
|  | 			listData = [item]; | |||
|  | 			let self = this; | |||
|  | 			uni.showLoading({ | |||
|  | 				title: self.$t('S_C_63') | |||
|  | 			}); | |||
|  | 			self.downImg = []; | |||
|  | 			if (listData.length > 0) { | |||
|  | 				let n = 0; | |||
|  | 				listData.forEach((item, index) => { | |||
|  | 					console.log(listData); | |||
|  | 					uni.downloadFile({ | |||
|  | 						//获得的临时地址
 | |||
|  | 						url: item, | |||
|  | 						success: res => { | |||
|  | 							n++; | |||
|  | 							console.log('获取url', res); | |||
|  | 							if (res.statusCode == 200) { | |||
|  | 								self.downImg = [...self.downImg, res.tempFilePath]; | |||
|  | 								if (listData.length == n) { | |||
|  | 									uni.hideLoading(); | |||
|  | 									self.downloadImg(); | |||
|  | 								} | |||
|  | 							} else { | |||
|  | 								uni.hideLoading(); | |||
|  | 								uni.showModal({ | |||
|  | 									title: self.$t('w_0408') | |||
|  | 								}); | |||
|  | 								console.log(res); | |||
|  | 							} | |||
|  | 						}, | |||
|  | 						fail(err) { | |||
|  | 							n++; | |||
|  | 							uni.hideLoading(); | |||
|  | 							uni.showModal({ | |||
|  | 								title: self.$t('w_0408') | |||
|  | 							}); | |||
|  | 							console.log(err); | |||
|  | 						} | |||
|  | 					}); | |||
|  | 				}); | |||
|  | 			} | |||
|  | 			self.sharePop = true; | |||
|  | 		}, | |||
|  | 		downloadImg() { | |||
|  | 			let self = this; | |||
|  | 			let n = 0; | |||
|  | 			uni.showLoading({ | |||
|  | 				title: self.$t('w_0413') | |||
|  | 			}); | |||
|  | 			self.downImg = [this.posterImg]; | |||
|  | 			self.downImg.forEach((item, index) => { | |||
|  | 				// 图片保存到本地
 | |||
|  | 				uni.saveImageToPhotosAlbum({ | |||
|  | 					filePath: item, | |||
|  | 					success(data) { | |||
|  | 						n++; | |||
|  | 						if (n == self.downImg.length) { | |||
|  | 							uni.showToast({ | |||
|  | 								icon: 'none', | |||
|  | 								title: self.$t('w_0311'), | |||
|  | 								duration: 2000 | |||
|  | 							}); | |||
|  | 							uni.hideLoading(); | |||
|  | 						} | |||
|  | 					}, | |||
|  | 					fail(err) { | |||
|  | 						if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') { | |||
|  | 							uni.showToast({ | |||
|  | 								title: self.$t('w_0412'), | |||
|  | 								icon: 'none', | |||
|  | 								duration: 1000 | |||
|  | 							}); | |||
|  | 							setTimeout(() => { | |||
|  | 								uni.openSetting(); | |||
|  | 							}, 1000); | |||
|  | 						} | |||
|  | 						uni.hideLoading(); | |||
|  | 						uni.showModal({ | |||
|  | 							title: self.$t('w_0406') | |||
|  | 						}); | |||
|  | 						return; | |||
|  | 					}, | |||
|  | 					complete(res) { | |||
|  | 						console.log('complete'); | |||
|  | 					} | |||
|  | 				}); | |||
|  | 			}); | |||
|  | 		}, | |||
|  | 		onErrorFunc(err) { | |||
|  | 			console.log(`err`, err); | |||
|  | 		} | |||
|  | 	} | |||
|  | }; | |||
|  | </script> | |||
|  | 
 | |||
|  | <style lang="scss"> | |||
|  | /* #ifndef H5 */ | |||
|  | .card1 { | |||
|  | 	width: 665rpx; | |||
|  | 	height: 387rpx; | |||
|  | 	position: relative; | |||
|  | 	margin: 20rpx auto; | |||
|  | 	padding: 20rpx; | |||
|  | 	box-sizing: border-box; | |||
|  | } | |||
|  | 
 | |||
|  | .card2 { | |||
|  | 	width: 665rpx; | |||
|  | 	height: 387rpx; | |||
|  | 	position: relative; | |||
|  | 	margin: 20rpx auto; | |||
|  | 	padding: 20rpx; | |||
|  | 	box-sizing: border-box; | |||
|  | } | |||
|  | 
 | |||
|  | .icon-img { | |||
|  | 	position: relative; | |||
|  | 	z-index: 1; | |||
|  | 	width: 48rpx; | |||
|  | 	margin-bottom: 20rpx; | |||
|  | } | |||
|  | 
 | |||
|  | .awardsIcon-box { | |||
|  | 	position: absolute; | |||
|  | 	left: 50%; | |||
|  | 	top: 5%; | |||
|  | 	z-index: 0; | |||
|  | } | |||
|  | 
 | |||
|  | .awardsIcon { | |||
|  | 	width: 222rpx; | |||
|  | } | |||
|  | 
 | |||
|  | .headPath { | |||
|  | 	width: 210rpx; | |||
|  | 	// height: 210rpx;
 | |||
|  | 	// border-radius: 15rpx;
 | |||
|  | 	position: absolute; | |||
|  | 	right: 24rpx; | |||
|  | 	top: 8rpx; | |||
|  | 	z-index: 0; | |||
|  | } | |||
|  | 
 | |||
|  | .card-bg { | |||
|  | 	width: 665rpx; | |||
|  | 	height: 387rpx; | |||
|  | 	position: absolute; | |||
|  | 	left: 0; | |||
|  | 	top: 0; | |||
|  | 	z-index: 0; | |||
|  | } | |||
|  | /* #endif */ | |||
|  | /* #ifdef H5 */ | |||
|  | .user { | |||
|  | 	color: #fff; | |||
|  | 	font-size: 24rpx; | |||
|  | 	margin-bottom: 20rpx; | |||
|  | } | |||
|  | .user-infos { | |||
|  | 	position: absolute; | |||
|  | 	top: 80rpx; | |||
|  | 	left: 20rpx; | |||
|  | } | |||
|  | .logo-img { | |||
|  | 	position: absolute; | |||
|  | 	z-index: 1; | |||
|  | 	right: 50rpx; | |||
|  | 	top: 30rpx; | |||
|  | 	img { | |||
|  | 		width: 216rpx; | |||
|  | 		// height: 276rpx;
 | |||
|  | 	} | |||
|  | } | |||
|  | .logos { | |||
|  | 	right: 20%; | |||
|  | 	top: 10%; | |||
|  | 	position: absolute; | |||
|  | 	image { | |||
|  | 		// margin-top: -95rpx;
 | |||
|  | 		width: 200rpx; | |||
|  | 		height: 200rpx; | |||
|  | 	} | |||
|  | 	.award { | |||
|  | 		color: #fff; | |||
|  | 		font-size: 24rpx; | |||
|  | 		text-align: center; | |||
|  | 	} | |||
|  | } | |||
|  | .time { | |||
|  | 	color: #fff; | |||
|  | 	font-size: 20rpx; | |||
|  | 	position: absolute; | |||
|  | 	bottom: 20rpx; | |||
|  | 	right: 20rpx; | |||
|  | } | |||
|  | .code { | |||
|  | 	color: #fff; | |||
|  | 	font-size: 20rpx; | |||
|  | 	position: absolute; | |||
|  | 	bottom: 20rpx; | |||
|  | 	left: 20rpx; | |||
|  | } | |||
|  | page { | |||
|  | 	background-color: #f2f2f2; | |||
|  | } | |||
|  | .user-info { | |||
|  | 	margin-left: 20rpx; | |||
|  | 	color: #fff; | |||
|  | 	font-size: 24rpx; | |||
|  | } | |||
|  | .user-bottom { | |||
|  | 	position: absolute; | |||
|  | 	bottom: 30rpx; | |||
|  | 	display: flex; | |||
|  | 	left: 30rpx; | |||
|  | 	width: 100%; | |||
|  | } | |||
|  | .cardNum { | |||
|  | 	position: absolute; | |||
|  | 	right: 20rpx; | |||
|  | 	top: 20rpx; | |||
|  | 	font-size: 24rpx; | |||
|  | 	color: #fff; | |||
|  | } | |||
|  | .logo { | |||
|  | 	image { | |||
|  | 		width: 50rpx; | |||
|  | 		height: 35rpx; | |||
|  | 		margin: 20rpx 0 0 20rpx; | |||
|  | 	} | |||
|  | } | |||
|  | .bh { | |||
|  | 	color: #fff; | |||
|  | 	font-size: 28rpx; | |||
|  | 	padding: 20rpx; | |||
|  | } | |||
|  | .content { | |||
|  | 	position: relative; | |||
|  | 	z-index: 1; | |||
|  | } | |||
|  | .logo { | |||
|  | 	position: absolute; | |||
|  | } | |||
|  | .bg-card { | |||
|  | 	position: relative; | |||
|  | 	width: 690rpx; | |||
|  | 	height: 410rpx; | |||
|  | 	margin: 30rpx auto; | |||
|  | 	.img { | |||
|  | 		position: absolute; | |||
|  | 		width: 690rpx; | |||
|  | 		height: 410rpx; | |||
|  | 	} | |||
|  | } | |||
|  | .btn { | |||
|  | 	background-color: #fb3024; | |||
|  | 	border: none; | |||
|  | 	height: 92rpx; | |||
|  | 	line-height: 92rpx; | |||
|  | 	font-size: 30rpx; | |||
|  | 	margin: 40rpx auto; | |||
|  | 	width: 690rpx; | |||
|  | } | |||
|  | .user-atatar { | |||
|  | 	image { | |||
|  | 		width: 80rpx; | |||
|  | 		height: 80rpx; | |||
|  | 		border-radius: 50%; | |||
|  | 	} | |||
|  | } | |||
|  | /* #endif */ | |||
|  | </style> |