post-uniapp-240725/pages/index/index - 副本.vue

<template>
	<view class="content">
		<view class="top">
			<img src="/static/1.png" width="100%"
			style="position: absolute;z-index: -1;top: 0;left: 0;"/>
			
			<view class="title">
				<p>轻松<text>记单词</text></p>
				<p>专业<text>抗遗忘</text></p>
			</view>
			
			<view class="description">
				一小时熟记<text>30-100</text>个单词
			</view>
			
			<view class="info-title">
				记单词很轻松，<text>不忘记</text>是关键
			</view>
			
			<view class="info-list">
				<view class="info-item">
					一对一保姆式带训，高效学习
				</view>
				<view class="info-item">
					1套颠覆性的训练方法，快速提升20-60分
				</view>
				<view class="info-item">
					AI智能+21天抗遗忘+全程1对1真人陪练
				</view>
				<view class="info-item">
					量身定制学习方案，针对性强
				</view>
				<view class="info-item">
					量身定制学习方案，针对性强
				</view>
				<view class="info-item">
					随时约，随时学，碎片化时间更好利用！
				</view>
				<view class="info-item">
					特色抗遗忘训练，单词学的更快，记得更牢！
				</view>
			</view>
			
			<view class="footer">
				<p>从底层逻辑上系统的解决英语学不好的问题</p>
				<p>将英语这门学科变成<text>强势学科!</text></p>
				<p>对英语做到<text>秒读</text><text>秒认</text><text>秒翻译</text></p>
			</view>
		</view>
		<view class="bottom">
			<view class="shang">
				<view class="text-title">
					英语一对一
				</view>
				<view class="text-title">
					专业陪跑
				</view>
				<view class="text-description">
					每小时熟记30-100个单词
				</view>
			</view>
			<view class="xia">
				<h1>一个月搞定三年所有词汇</h1>
				<view class="tx">
					解救了词汇就解决了英语
				</view>
				<view class="asd">
					<view class="left">
						<view class="ms">
							扫码立购
						</view>
						<view class="img">
							<img src="" width="100%" 
							height="100%"/>
						</view>
					</view>
					<view class="right"
					@click="toRegister">
						<view class="price">
							<view class="qweq">
								原价300的体验课
							</view>
							<view class="num">
								￥<text>59.9</text>抢
							</view>
							<view class="mx">
								因教练团队有限，请扫描预约一对一教练
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/plugins/api.js'
	export default {
		data() {
			return {
				code : '',
				
			}
		},
		onLoad() {
			// if(this.GetQueryString('code')){		//路径上面有code说明微信已授权
			// 	this.code = this.GetQueryString('code');
			// 	//直接去登录发起请求
			// 	this.toWxLogin(this.code)
			// }else{
			// 	this.getwx_authorize()
			// }
		},
		methods: {
			getwx_authorize() {
				// let vid = uni.getStorageSync("ivcode");
				let redirect_uri = encodeURIComponent(this.VITE_REDIRECT_URI + '/pages/login/login');
				let appid = this.VITE_APPID;	
				window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appid+'&redirect_uri='+redirect_uri+'&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect'+'&t='+new Date().getTime();
				// window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid +
				// 	'&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_userinfo&state=' + 123 +
				// 	'&connect_redirect=1#wechat_redirect';
			},
			//获取url中参数的方法
			GetQueryString(name) {
				var url = window.location.href;
				try {
					var cs = url.split('?')[1]; //获取?之后的参数字符串
					var cs_arr = cs.split('&'); //参数字符串分割为数组
					for (var i = 0; i < cs_arr.length; i++) { //遍历数组，拿到json对象
						if (cs_arr[i].split('=')[0] == name) {
							return cs_arr[i].split('=')[1];
						}
					}
					return "";
				} catch {
					return "";
				}
			},
			//微信登录
			toWxLogin(code) {
				let vid = sessionStorage.getItem('vid');
				api('wxLogin', { code , vid }, res=>{
					if(res.code == 200){
						localStorage.setItem("token", res.result.token)
						localStorage.setItem("userInfo", JSON.stringify(res.result.userInfo))
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top{
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		width: 100%;
		height: 1330rpx;
		.title{
			margin-top: 140rpx;
			color: #f8621f;
			font-size: 60rpx;
			font-weight: 900;
			line-height: 100rpx;
			transform: rotateZ(-4deg);
			letter-spacing: 10rpx;
			text{
				font-size: 90rpx;
			}
		}
		.description{
			margin-top: 30rpx;
			color: #fff;
			font-size: 28rpx;
			transform: rotateZ(-3deg);
			letter-spacing: 5rpx;
			padding-left: 120rpx;
			text{
				letter-spacing: 0rpx;
				padding-left: 10rpx;
			}
		}
		
		.info-title{
			margin-top: 100rpx;
			color: #000;
			font-size: 35rpx;
			font-weight: 900;
			line-height: 100rpx;
			letter-spacing: 7rpx;
			text{
				font-size: 45rpx;
			}
		}
		.info-list{
			margin-top: 15rpx;
			font-size: 25rpx;
			letter-spacing: 3rpx;
			font-weight: 600;
			color: #000;
			line-height: 50rpx;
			.info-item{
				display: flex;
				align-items: center;
			}
			.info-item::before{
				content: '';
				display: block;
				width: 10rpx;
				height: 10rpx;
				background-color: #f8621f;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}
		.footer{
			margin-top: 90rpx;
			font-size: 28rpx;
			letter-spacing: 3rpx;
			font-weight: 600;
			color: #f8621f;
			line-height: 50rpx;
			text-align: center;
			p:nth-child(2){
				text{
					font-size: 40rpx;
					letter-spacing: 20rpx;
					margin-left: 20rpx;
				}
			}
			p:nth-child(3){
				text{
					font-size: 40rpx;
					letter-spacing: 4rpx;
					margin-left: 25rpx;
				}
			}
		}
	}
	.bottom{
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		width: 100%;
		// --color : #890404;
		--color : #dc2808;
		.shang{
			width: 100%;
			height: 500rpx;
			// background-color: #890404;
			background: linear-gradient(blue, pink);
			overflow: hidden;
			padding: 30rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.text-title{
				width: fit-content;
				padding: 0 20px;
				background-color: #f9d3d4;
				color: #fff;
				margin: 10rpx;
				font-size: 100rpx;
				margin-left: 160rpx;
			}
			.text-description{
				background-color: #fff;
				color: var(--color);
				padding: 10rpx 20rpx;
				width: fit-content;
				margin-top: 50rpx;
				margin-left: 160rpx;
				font-size: 40rpx;
			}
		}
		.xia{
			background-color: #fff;
			margin-bottom: 50rpx;
			h1{
				font-size: 50rpx;
				line-height: 150rpx;
				color: var(--color);
				font-weight: 500;
				letter-spacing: 5rpx;
				text-align: center;
			}
			.tx{
				border-left: 20rpx solid var(--color);
				border-right: 20rpx solid var(--color);
				border-top: 8rpx solid var(--color);
				border-bottom: 8rpx solid var(--color);
				width: fit-content;
				margin: 0 auto;
				background-color: #f9d3d4;
				color: #fff;
				font-size: 35rpx;
			}
			.asd{
				display: flex;
				margin-top: 20rpx;
				.left{
					width: 250rpx;
					display: flex;
					flex-direction: column;
					color: var(--color);
					font-weight: 900;
					line-height: 60rpx;
					justify-content: center;
					align-items: center;
					.img{
						// background-color: #f9d3d4;
						width: 180rpx;
						height: 180rpx;
					}
				}
				.right{
					position: relative;
					width: 500rpx;
					height: 260rpx;
					background: url(/static/5.png);
					background-size: 100% 100%;
					.price{
						color: var(--color);
						font-weight: 900;
						.qweq{
							padding: 20rpx;
							font-size: 28rpx;
						}
						.num{
							width: 400rpx;
							text-align: center;
							font-size: 40rpx;
							text{
								font-size: 55rpx;
							}
						}
						.mx{
							font-size: 16rpx;
							color: #fff;
							position: absolute;
							bottom: 75rpx;
							left: 25rpx;
							text-align: center;
							width: 350rpx;
						}
					}
				}
			}
		}
	}
</style>