登录页面
This commit is contained in:
zyronon
parent
b0c20efa57
commit
c0881225ea
@ -70,7 +70,8 @@ export default {
|
||||
'/me/right-menu/minor-protection/trigger-time',
|
||||
'/me/right-menu/setting',
|
||||
'/login',
|
||||
'/other-login',
|
||||
'/login/other',
|
||||
'/login/password',
|
||||
|
||||
|
||||
'/service-protocol',
|
||||
|
||||
BIN
src/assets/img/icon/components/check/round-gray.png
Normal file
BIN
src/assets/img/icon/components/check/round-gray.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
12
src/assets/scss/anim.scss
Normal file
12
src/assets/scss/anim.scss
Normal file
@ -0,0 +1,12 @@
|
||||
.anim-bounce {
|
||||
animation: bounce .1s ease-in-out 5 alternate;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
from {
|
||||
transform: translateX(-1rem);
|
||||
}
|
||||
to {
|
||||
transform: translateX(1rem);
|
||||
}
|
||||
}
|
||||
@ -8,6 +8,8 @@
|
||||
//颜色
|
||||
@import "layout"; //布局
|
||||
|
||||
@import "anim";
|
||||
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
|
||||
40
src/components/Check.vue
Normal file
40
src/components/Check.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="Check" @click="$emit('update:modelValue',!modelValue)">
|
||||
<img v-show="!modelValue" src="../assets/img/icon/components/check/round-gray.png" alt="">
|
||||
<img v-show="modelValue && mode === 'gray'" src="../assets/img/icon/components/check/check-gray.png" alt="">
|
||||
<img v-show="modelValue && mode === 'red'" src="../assets/img/icon/components/check/check-red.png" alt="">
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "Check",
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'gray'//red
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../assets/scss/index";
|
||||
|
||||
.Check {
|
||||
img {
|
||||
width: 1.4rem;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -12,12 +12,14 @@
|
||||
<div class="sub-title">认证服务由中国移动提供</div>
|
||||
</div>
|
||||
|
||||
<div class="button primary no-active">一键登录</div>
|
||||
<div class="button white" @click="$nav('/other-login')">其他手机号码登录</div>
|
||||
<div class="button primary no-active" @click="login">一键登录</div>
|
||||
<div class="button white" @click="$nav('/login/other')">其他手机号码登录</div>
|
||||
|
||||
<div class="protocol">
|
||||
<!-- TODO -->
|
||||
<div class="left"></div>
|
||||
<div class="protocol" :class="showAnim?'anim-bounce':''">
|
||||
<Tooltip style="top: -100%;left: -1rem;" v-model="showTooltip"/>
|
||||
<div class="left">
|
||||
<Check v-model="isAgree"/>
|
||||
</div>
|
||||
<div class="right">
|
||||
我已阅读并同意
|
||||
<span class="link" @click="$nav('/service-protocol',{type:'“抖音”用户服务协议'})">用户协议</span>
|
||||
@ -31,25 +33,57 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- TODO -->
|
||||
<div class="other-login">
|
||||
<span class="link">其他方式登录</span>
|
||||
<transition name="fade">
|
||||
<div v-if="isOtherLogin" class="icons">
|
||||
<img src="../../assets/img/icon/login/toutiao-round.png" alt="">
|
||||
<img src="../../assets/img/icon/login/qq-round.webp" alt="">
|
||||
<img src="../../assets/img/icon/login/wechat-round.png" alt="">
|
||||
<img src="../../assets/img/icon/login/weibo-round.webp" alt="">
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<transition name="fade">
|
||||
<span v-if="!isOtherLogin" class="other-login-text link" @click="isOtherLogin = !isOtherLogin">其他方式登录</span>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Check from "../../components/Check";
|
||||
import Tooltip from "./components/Tooltip";
|
||||
|
||||
export default {
|
||||
name: "login",
|
||||
components: {
|
||||
Check,
|
||||
Tooltip
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
isAgree: false,
|
||||
isOtherLogin: false,
|
||||
showAnim: false,
|
||||
showTooltip: false,
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
},
|
||||
methods: {}
|
||||
methods: {
|
||||
login() {
|
||||
if (!this.isAgree && !this.showAnim && !this.showTooltip) {
|
||||
this.showAnim = true
|
||||
setTimeout(() => {
|
||||
this.showAnim = false
|
||||
this.showTooltip = true
|
||||
}, 500)
|
||||
setTimeout(() => {
|
||||
this.showTooltip = false
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -69,7 +103,6 @@ export default {
|
||||
|
||||
.content {
|
||||
padding: 6rem 3rem;
|
||||
//padding-top: 6rem;
|
||||
|
||||
.notice {
|
||||
margin-bottom: 8rem;
|
||||
@ -95,24 +128,53 @@ export default {
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.protocol{
|
||||
.protocol {
|
||||
position: relative;
|
||||
color: gray;
|
||||
margin-top: 2rem;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
padding-top: .1rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.other-login{
|
||||
|
||||
.other-login {
|
||||
position: absolute;
|
||||
bottom: 4rem;
|
||||
font-size: 1.2rem;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: calc(100vw - 6rem);
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
|
||||
.icons {
|
||||
img {
|
||||
width: 4rem;
|
||||
margin-right: 1.5rem;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.other-login-text {
|
||||
position: absolute;
|
||||
bottom: 5.5rem;
|
||||
font-size: 1.2rem;
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -16,12 +16,14 @@
|
||||
<span>+86</span>
|
||||
<div class="arrow"></div>
|
||||
</div>
|
||||
<input type="text" class="right" placeholder="请输入手机号">
|
||||
<input v-model="phone" type="text" class="right" placeholder="请输入手机号">
|
||||
</div>
|
||||
|
||||
<div class="protocol">
|
||||
<!-- TODO -->
|
||||
<div class="left"></div>
|
||||
<div class="protocol" :class="showAnim?'anim-bounce':''">
|
||||
<Tooltip style="top: -150%;left: -1rem;" v-model="showTooltip"/>
|
||||
<div class="left">
|
||||
<Check v-model="isAgree"/>
|
||||
</div>
|
||||
<div class="right">
|
||||
已阅读并同意
|
||||
<span class="link" @click="$nav('/service-protocol',{type:'“抖音”用户服务协议'})">用户协议</span>
|
||||
@ -31,10 +33,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button primary no-active disabled">获取短信验证码</div>
|
||||
<div class="button primary no-active" :class="phone.length>10?'':'disabled'" @click="getCode">
|
||||
获取短信验证码
|
||||
</div>
|
||||
|
||||
<div class="options">
|
||||
<span class="link">密码登录</span>
|
||||
<span class="link" @click="$nav('/login/password')">密码登录</span>
|
||||
<span class="link">其他方式登录</span>
|
||||
</div>
|
||||
|
||||
@ -42,15 +46,41 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Check from "../../components/Check";
|
||||
import Tooltip from "./components/Tooltip";
|
||||
|
||||
export default {
|
||||
name: "OtherLogin",
|
||||
components: {
|
||||
Check,
|
||||
Tooltip
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
isAgree: false,
|
||||
phone: '',
|
||||
isOtherLogin: false,
|
||||
showAnim: false,
|
||||
showTooltip: false ,
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
},
|
||||
methods: {}
|
||||
methods: {
|
||||
getCode() {
|
||||
if (!this.isAgree && !this.showAnim && !this.showTooltip && this.phone.length > 10) {
|
||||
this.showAnim = true
|
||||
setTimeout(() => {
|
||||
this.showAnim = false
|
||||
this.showTooltip = true
|
||||
}, 500)
|
||||
setTimeout(() => {
|
||||
this.showTooltip = false
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -102,6 +132,7 @@ export default {
|
||||
margin-right: 1rem;
|
||||
padding-right: 1rem;
|
||||
position: relative;
|
||||
|
||||
.arrow {
|
||||
margin-top: .4rem;
|
||||
margin-left: .5rem;
|
||||
@ -111,14 +142,14 @@ export default {
|
||||
border-top: .5rem solid black;
|
||||
}
|
||||
|
||||
&::before{
|
||||
&::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: .8rem;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
background: gray;
|
||||
background: gainsboro;
|
||||
}
|
||||
}
|
||||
|
||||
@ -127,7 +158,7 @@ export default {
|
||||
outline: none;
|
||||
border: none;
|
||||
background: whitesmoke;
|
||||
caret-color:red;
|
||||
caret-color: red;
|
||||
//background: red;
|
||||
}
|
||||
}
|
||||
@ -137,13 +168,20 @@ export default {
|
||||
}
|
||||
|
||||
.protocol {
|
||||
position: relative;
|
||||
color: gray;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
padding-top: .1rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.options{
|
||||
.options {
|
||||
font-size: 1.2rem;
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
|
||||
168
src/pages/login/PasswordLogin.vue
Normal file
168
src/pages/login/PasswordLogin.vue
Normal file
@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="PasswordLogin">
|
||||
<BaseHeader>
|
||||
<template v-slot:right>
|
||||
<span class="f16">帮助</span>
|
||||
</template>
|
||||
</BaseHeader>
|
||||
<div class="content">
|
||||
<div class="notice">
|
||||
<div class="title">登录看朋友内容</div>
|
||||
<div class="sub-title">未注册的手机号验证通过后将自动注册</div>
|
||||
</div>
|
||||
|
||||
<div class="input-number">
|
||||
<div class="left">
|
||||
<span>+86</span>
|
||||
<div class="arrow"></div>
|
||||
</div>
|
||||
<input type="text" class="right" placeholder="请输入手机号">
|
||||
</div>
|
||||
|
||||
<div class="protocol">
|
||||
<div class="left">
|
||||
<Check v-model="isAgree"/>
|
||||
</div>
|
||||
<div class="right">
|
||||
已阅读并同意
|
||||
<span class="link" @click="$nav('/service-protocol',{type:'“抖音”用户服务协议'})">用户协议</span>
|
||||
和
|
||||
<span class="link" @click="$nav('/service-protocol',{type:'“抖音”隐私政策'})">隐私政策</span>
|
||||
，同时登录并使用抖音火山版（原“火山小视频”）和抖音
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button primary no-active disabled">获取短信验证码</div>
|
||||
|
||||
<div class="options">
|
||||
<span class="link">密码登录</span>
|
||||
<span class="link">其他方式登录</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Check from "../../components/Check";
|
||||
|
||||
export default {
|
||||
name: "PasswordLogin",
|
||||
components: {
|
||||
Check
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isAgree:false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.PasswordLogin {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: black;
|
||||
font-size: 1.4rem;
|
||||
background: white;
|
||||
|
||||
.content {
|
||||
padding: 6rem 3rem;
|
||||
//padding-top: 6rem;
|
||||
|
||||
.notice {
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 4rem;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 1.2rem;
|
||||
color: $second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.input-number {
|
||||
display: flex;
|
||||
background: whitesmoke;
|
||||
padding: 1.5rem 1rem;
|
||||
|
||||
.left {
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
padding-right: 1rem;
|
||||
position: relative;
|
||||
.arrow {
|
||||
margin-top: .4rem;
|
||||
margin-left: .5rem;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: .3rem solid transparent;
|
||||
border-top: .5rem solid black;
|
||||
}
|
||||
|
||||
&::before{
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: .8rem;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
background: gainsboro;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: whitesmoke;
|
||||
caret-color:red;
|
||||
//background: red;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.protocol {
|
||||
color: gray;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
padding-top: .1rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.options{
|
||||
font-size: 1.2rem;
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
62
src/pages/login/components/Tooltip.vue
Normal file
62
src/pages/login/components/Tooltip.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div class="Tooltip" v-if="modelValue">
|
||||
<div class="arrow"></div>
|
||||
<span>请先勾选同意后再进行登录</span>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "Popover",
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.scale-enter-active,
|
||||
.scale-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.scale-enter-from,
|
||||
.scale-leave-to {
|
||||
//transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.Tooltip {
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
font-size: 1.2rem;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
border-radius: .8rem;
|
||||
background: black;
|
||||
|
||||
.arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: .7rem solid transparent;
|
||||
border-top: .7rem solid black;
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
bottom: -1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -212,7 +212,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
selectFriends() {
|
||||
let videos = this.friends.filter(v => v.select)
|
||||
let res = this.friends.filter(v => v.select)
|
||||
return res.length
|
||||
}
|
||||
},
|
||||
|
||||
@ -38,6 +38,7 @@ import Setting from "../pages/me/rightMenu/Setting";
|
||||
import Me2 from "../pages/me/Me2";
|
||||
import Login from "../pages/login/Login";
|
||||
import OtherLogin from "../pages/login/OtherLogin";
|
||||
import PasswordLogin from "../pages/login/PasswordLogin";
|
||||
|
||||
const routes = [
|
||||
// {path: '', component: Music},
|
||||
@ -79,7 +80,8 @@ const routes = [
|
||||
{path: '/me/right-menu/minor-protection/trigger-time', component: TriggerTime},
|
||||
{path: '/me/right-menu/setting', component: Setting},
|
||||
{path: '/login', component: Login},
|
||||
{path: '/other-login', component: OtherLogin},
|
||||
{path: '/login/other', component: OtherLogin},
|
||||
{path: '/login/password', component: PasswordLogin},
|
||||
]
|
||||
|
||||
export default VueRouter.createRouter({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user