JianjianStreet-H5/pages/my/my-xiansuo-now.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>
					<p>欢迎登陆和使用 @兼兼街 本地化兼职信息服务平台，您可以在这里查看到每日最新的兼职信息更新，最新的哦 : ( </p>
					<p>本台分设长沙街超多本地兼职正在筹备，值得一提的是西安街和广州街是新上花旦福利更多哦！</p>
					<p>当然，如果您在找兼职的过程中存在什么疑惑，遇到了什么问题，请您第一时间联系我们的客服，都是可爱又温柔的小姐级哦！</p>
					<p>最后一步，请您关注我们的公众号，或者微信搜索 兼兼街，看完点关注回家不迷路！更多精彩，我们来日方长</p>
				</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>
					<view class="qrcode">
						<view class="cool-button" @click="onclick()">👉去关注</view>
					</view>
				</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() {
			
		},
		onReady() {
			this.$com.displayNav()
		},
		methods:{
			onclick:() => {
				window.location = "https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkzMzI2NDc1Ng==#wechat_redirect"
				
				
			}
		}
	}
</script>


<style lang="scss">
	.page-wapper {
		width: 100vw;
		height: 100vh;
		background-color: #3da8ff;
		
		
		.a-card {
			width: 600rpx;
			height: 880rpx;
			background-color: #fff;
			position: absolute;
			top: calc(50vh - 484rpx);
			left: calc(50vw - 300rpx);
			border-radius: 20rpx;
			box-shadow: 20rpx 10rpx 20rpx 10rpx #345dc7;
			
			.title {
				width: 36%;
				height: 80rpx;
				position: absolute;
				left: 200rpx;
				top: 60rpx;
				// background: url("@/static/5.jpg");
				background-size: 100% 100% ;
				background-position: 40% 75%;
			}
			.context {
				
				position: absolute;
				left: 40rpx;
				top: 178rpx;
				width: 480rpx;
				
				p {
					text-indent: 2em;
				}
				
				.content-around {
					color: #999;
					font-size: 24rpx;
					line-height: 34rpx;
					
					.con-title {
						background-color: #3871ce;
						color: #FFF;
						width: 120rpx;
						height: 45rpx;
						line-height: 45rpx;
						border-bottom-right-radius: 70rpx;
						border-top-left-radius: 70rpx;
						box-shadow: 10rpx 5rpx 20rpx 10rpx rgba(0, 0, 0, .1);
						
						font-size: 30rpx;
						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: 20rpx;
					right: -200rpx;
					width: 400rpx !important;
				}
			}
			
			.cool-button {
				font-weight: 900;
				font-size: 40rpx;
				color: white;
				background-color: rgba(1, 1, 1, .0);
				border: none; 
				
				text-align: left; 
				text-decoration: none;
				display: inline-block;
				margin: 4px 2px;
				cursor: pointer;
				transition-duration: 0.4s; 
			}
			.cool-button:active {
				transform: translateX(30rpx); 
			}
		}
	}
	
	.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>