JianjianStreet-H5/pages/my/my-xiansuo-new.vue

<template>
	<view class="page-wapper">
		<view class="a-card">
			<view class="title"></view>
			<view class="context">
				<view class="content-around">
					<view class="con-title">关注</view>
					<view>关注可查看每日兼职更新，超多本地兼职正在筹备</view>
				</view>
				<view class="content-around">
					<view class="con-title">成为会员</view>
					<view>成为会员即可查看海量兼职信息，超多在线兼职等你来挑战，更有超酷客服小姐姐等你来撩</view>
				</view>
			</view>
			<view class="bottom-bgr">
				<view style="width: 100%; height: 100%; position: relative;">
					<view class="foot-font">
						<p>联系微信：jianjianjie_1688</p>
						<p>合作联系：湖南瀚海黎明信息科技</p>
					</view>
					<canvas canvas-id="qrcode" class="qrcode"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import html2canvas from 'html2canvas';
	import uQRCode from '@/common/uqrcode.js'
	
	export default{
		data(){
			return{
				userInfo: {},
				role:0,
				cellList: [],
				base64: ''
			}
		},
		onShow() {
			this.getmyInfo()
		},
		onReady() {
			this.$com.displayNav()
		},
		methods:{
			getmyInfo(){
				this.$api('myInfo').then(res=>{
					if(res.code == 200){
						this.role = res.result.role;
						this.userInfo = res.result;
						this.$store.commit('set_userInfo',res.result)
						this.qrFun('https://xinxiong.java996.icu/pages/my/login-kehu?vid=' + this.userInfo.id)
					}else{
						this.userInfo = null
					}
				})
			},
			qrFun: function(text) {
				this.qrShow = true
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 135,
					margin: 0,
					backgroundColor: '#FFFFFF',
					foregroundColor: '#000000',
					fileType: 'png',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {}
				})
			},
		}
	}
</script>


<style lang="scss">
	.page-wapper {
		width: 100vw;
		height: 100vh;
		background-color: #3da8ff;
		background: url("@/static/6.png");
		background-size: 100% 100%;
		
		
		.a-card {
			width: 660rpx;
			height: 980rpx;
			background-color: #fff;
			position: absolute;
			top: calc(50vh - 560rpx);
			left: calc(50vw - 330rpx);
			border-radius: 20rpx;
			box-shadow: 20rpx 10rpx 20rpx 10rpx #345dc7;
			
			.title {
				width: 60%;
				height: 150rpx;
				position: absolute;
				left: 140rpx;
				top: 60rpx;
				background: url("@/static/5.jpg");
				background-size: 100% 100% ;
				background-position: 40% 75%;
			}
			
			.context {
				
				position: absolute;
				left: 40rpx;
				top: 248rpx;
				width: 380rpx;
				
				.content-around {
					color: #999;
					font-size: 24rpx;
					line-height: 34rpx;
					
					.con-title {
						background-color: #3871ce;
						color: #FFF;
						width: 140rpx;
						height: 45rpx;
						line-height: 45rpx;
						border-bottom-right-radius: 70rpx;
						border-top-left-radius: 70rpx;
						
						font-size: 32rpx;
						font-weight: 500;
						margin: 20rpx 0;
						padding: 0 40rpx;
					}
				}
				
			}
			
			.bottom-bgr {
				width: 100%;
				height: 180rpx;
				position: absolute;
				left: 0;
				bottom: 0;
				background: url("@/static/4.png");
				background-size: 160% 100% ;
				background-position: 40% 75%;
				
				.foot-font {
					position: absolute;
					bottom: 20rpx;
					left: 40rpx;
					font-size: 20rpx;
					line-height: 24rpx;
					color: #222;
				}
				.qrcode {
					position: absolute;
					bottom: 15rpx;
					right: 20rpx;
					
					width: 280rpx !important;
					height: 280rpx !important;
				}
			}
			
		}
	}
	
	//.page-wapper {
	//	background: linear-gradient(to bottom, #345dc7, #00FFFF, #3da8ff);
	//	background-size: 200% 200%;
	//	animation: gradient 20s ease infinite;
	//}
	//
	//@keyframes gradient {
	//   0% { background-position: 0% 0%; } /* 背景位置从左上角开始 */
	//   50% { background-position: 100% 100%; } /* 背景位置变化到右下角 */
	//   100% { background-position: 0% 0%; } /* 背景位置回到左上角 */
	//}
	
</style>