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.
361 lines
8.1 KiB
361 lines
8.1 KiB
<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>
|