zyronon
4 years ago
11 changed files with 418 additions and 31 deletions
|
After Width: | Height: | Size: 6.3 KiB |
@ -0,0 +1,12 @@
@@ -0,0 +1,12 @@
|
||||
.anim-bounce { |
||||
animation: bounce .1s ease-in-out 5 alternate; |
||||
} |
||||
|
||||
@keyframes bounce { |
||||
from { |
||||
transform: translateX(-1rem); |
||||
} |
||||
to { |
||||
transform: translateX(1rem); |
||||
} |
||||
} |
||||
@ -0,0 +1,40 @@
@@ -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> |
||||
@ -0,0 +1,168 @@
@@ -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> |
||||
@ -0,0 +1,62 @@
@@ -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> |
||||
Loading…
Reference in new issue