You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
377 lines
8.9 KiB
377 lines
8.9 KiB
<template>
|
|
<view class="content">
|
|
<img :src="item" width="100%" v-for="(item, index) in list"/>
|
|
<!-- <view
|
|
style="background: linear-gradient(#fff, rgb(220, 38, 7));
|
|
width: 100%;height: 150rpx;">
|
|
|
|
</view> -->
|
|
<!-- <img src="/static/24.png" alt="" width="100%"/>
|
|
<img src="/static/123.png" alt="" width="100%"/> -->
|
|
<!-- <view class="top" v-if="false">
|
|
<img src="/static/4.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
|
|
style="background: url(/static/3.png);
|
|
background-size: 100% 100%;width: 90%;
|
|
margin-top: 100rpx;text-align: center;">
|
|
<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>
|
|
|
|
<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="info"
|
|
style="color: #fff;margin-bottom: 40rpx;">
|
|
填写信息立即报名
|
|
</view>
|
|
<div class="register-username">
|
|
<!-- <image src='../../static/register/userNameLogin@3x.png'></image> -->
|
|
<u--input placeholder="请输入学生姓名" border="surround"
|
|
v-model="registerForm.name"></u--input>
|
|
</div>
|
|
<div class="register-username">
|
|
<!-- <image src='../../static/register/userNameLogin@3x.png'></image> -->
|
|
<u--input placeholder="请输入手机号" border="surround"
|
|
v-model="registerForm.phone"></u--input>
|
|
</div>
|
|
<view style="margin-bottom: 20rpx;">
|
|
<text style="color: #fff;font-size: 40rpx;
|
|
margin-right: 10rpx;">￥59.9抢</text>
|
|
<del style="color: #eee;font-size: 28rpx;">原价￥300.0</del>
|
|
</view>
|
|
<u-button type="primary" @click="Register()"
|
|
style="border-radius: 20rpx;color: #000;width: 200rpx;"
|
|
color="#fff">立即支付</u-button>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import api from '@/plugins/api.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
code : '',
|
|
registerForm: {
|
|
name: '',
|
|
phone: '',
|
|
},
|
|
list : [
|
|
'/static/0240718173256.jpg',
|
|
'/static/24.png',
|
|
'/static/123.png',
|
|
]
|
|
}
|
|
},
|
|
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);
|
|
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) {
|
|
console.log(code);
|
|
api('wxLogin', { code }, res=>{
|
|
if(res.code == 200){
|
|
localStorage.setItem("token", res.result.token)
|
|
localStorage.setItem("userInfo", JSON.stringify(res.result.userInfo))
|
|
}else{
|
|
location.href = this.VITE_REDIRECT_URI
|
|
}
|
|
})
|
|
},
|
|
Register(){
|
|
api('createOrder', {
|
|
...this.registerForm
|
|
}, res=>{
|
|
if(res.code == 200){
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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{
|
|
color: #000;
|
|
font-size: 35rpx;
|
|
font-weight: 900;
|
|
line-height: 100rpx;
|
|
letter-spacing: 7rpx;
|
|
text{
|
|
font-size: 45rpx;
|
|
}
|
|
}
|
|
.info-list{
|
|
font-size: 25rpx;
|
|
letter-spacing: 3rpx;
|
|
padding: 20rpx;
|
|
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;
|
|
background: url(/static/2.png);
|
|
background-size: 100% 100%;
|
|
width: 90%;
|
|
padding: 20rpx 0;
|
|
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%;
|
|
box-sizing: border-box;
|
|
background: linear-gradient(to right, rgb(239,118,66), rgb(220, 38, 7));
|
|
overflow: hidden;
|
|
padding: 30rpx 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.register-username{
|
|
display: flex;
|
|
border: 1px solid #ED762F;
|
|
height: 35px;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding: 0 10px;
|
|
border-radius: 5px;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
color: #000;
|
|
image {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
</style>
|