手机号登录
This commit is contained in:
asd
parent
3a4402019e
commit
98cf5e7ca3
BIN
src/assets/close.png
Normal file
BIN
src/assets/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 821 B |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 37 KiB |
BIN
src/assets/order.png
Normal file
BIN
src/assets/order.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 511 B |
BIN
src/assets/qq.png
Normal file
BIN
src/assets/qq.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
src/assets/wechat.png
Normal file
BIN
src/assets/wechat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/weibo.png
Normal file
BIN
src/assets/weibo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
193
src/login.vue
Normal file
193
src/login.vue
Normal file
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<div class="logo">
|
||||
<img src="./assets/close.png" alt class="close" />
|
||||
</div>
|
||||
<div class="tel">
|
||||
<p>+86</p>
|
||||
<img src="./assets/order.png" alt class="order" />
|
||||
<div class="line"></div>
|
||||
<input type="text" class="shuru" placeholder="输入手机号" />
|
||||
</div>
|
||||
|
||||
<div class="tel yzm">
|
||||
<input type="text" class="shuru tel1" placeholder="输入6位验证码" />
|
||||
<button class="getyzm">发送验证码</button>
|
||||
</div>
|
||||
<div class="ale">
|
||||
<p class="alert">未注册手机验证后自动登录</p>
|
||||
<p >注册即同意《隐私保护指引》</p>
|
||||
</div>
|
||||
<button class="submit">登录</button>
|
||||
<div class="other">
|
||||
<p>密码登录</p>
|
||||
<p>需要帮助？</p>
|
||||
</div>
|
||||
<div class="ways">
|
||||
<div class="top">
|
||||
<div class="line"></div>
|
||||
<p class="text">社交帐号登录</p>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="icons">
|
||||
<img src="./assets/wechat.png" alt="" class="iocn">
|
||||
<img src="./assets/weibo.png" alt="" class="iocn">
|
||||
<img src="./assets/qq.png" alt="" class="iocn">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.login {
|
||||
.close {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
float: right;
|
||||
margin-top: 26px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.logo {
|
||||
width: 100%;
|
||||
height: 272px;
|
||||
background: url("./assets/logo.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.tel {
|
||||
width: 690px;
|
||||
height: 84px;
|
||||
line-height: 84px;
|
||||
text-indent: 9px;
|
||||
font-size: 25px;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
border-bottom: 2px solid #dfdfdf;
|
||||
margin-left: 30px;
|
||||
.order {
|
||||
width: 13px;
|
||||
height: 24px;
|
||||
margin: auto 0;
|
||||
margin-left: 25px;
|
||||
}
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
margin: auto 0;
|
||||
margin-left: 35px;
|
||||
background-color: #dfdfdf;
|
||||
}
|
||||
.shuru {
|
||||
width: 75%;
|
||||
height: 74px;
|
||||
color: #333333;
|
||||
font-size: 28px;
|
||||
margin: auto 0;
|
||||
margin-left: 36px;
|
||||
// position: relative;
|
||||
// top: -1px;
|
||||
outline-style: none;
|
||||
outline-width: 0px;
|
||||
border: none;
|
||||
border-style: none;
|
||||
text-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-webkit-user-select: text;
|
||||
outline-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.shuru::placeholder{
|
||||
color: #999999
|
||||
}
|
||||
}
|
||||
.tel1 {
|
||||
margin-left: 11px !important;
|
||||
font-size: 26px !important;
|
||||
}
|
||||
.yzm {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.getyzm {
|
||||
width: 166px;
|
||||
height: 54px;
|
||||
border: 2px solid rgba(107, 145, 71, 1);
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
margin: auto 0;
|
||||
color: #6B9147;
|
||||
font-size: 24px;
|
||||
line-height: 54px;
|
||||
}
|
||||
.ale{
|
||||
height: 58px;
|
||||
margin: 0 auto;
|
||||
margin-top: 50px;
|
||||
color: #999999;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
// line-height: 30px;
|
||||
.alert{
|
||||
text-indent: -15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.submit{
|
||||
width: 690px;
|
||||
height:88px;
|
||||
background-color: #6B9147;
|
||||
line-height: 88px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size:36px;
|
||||
border-radius:4px;
|
||||
margin-left: 30px;
|
||||
margin-top: 129px;
|
||||
}
|
||||
.other{
|
||||
color: #6B9147;
|
||||
font-size: 26px;
|
||||
margin-top: 39px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
>p:first-child{
|
||||
margin-left: 31px
|
||||
}
|
||||
>p:last-child{
|
||||
margin-right: 43px;
|
||||
}
|
||||
}
|
||||
.ways{
|
||||
margin-top: 149px;
|
||||
.top{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 99px;
|
||||
height: 24px;
|
||||
.line{
|
||||
width: 120px;
|
||||
height: 2px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.text{
|
||||
color: #999999;
|
||||
font-size: 24px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icons{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 165px;
|
||||
.icon{
|
||||
width: 71px;
|
||||
height: 71px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -8,10 +8,15 @@ import index from "./index"
|
||||
// import PersonalHomepage from "./PersonalHomepage"
|
||||
import ManualAppeal from "./ManualAppeal"
|
||||
import IndexArticleDetail from "./IndexArticleDetail"
|
||||
import login from "./login"
|
||||
const router=new Router({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
component: login
|
||||
},
|
||||
{
|
||||
path: '/index',
|
||||
component: index
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user