登录完了
This commit is contained in:
asd
parent
78ba4ca709
commit
a9d7a909d9
190
src/login.vue
190
src/login.vue
@ -15,31 +15,52 @@
|
|||||||
<button class="getyzm">发送验证码</button>
|
<button class="getyzm">发送验证码</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="ale">
|
<div class="ale">
|
||||||
<p class="alert">未注册手机验证后自动登录</p>
|
<p class="alert">未注册手机验证后自动登录</p>
|
||||||
<p >注册即同意《隐私保护指引》</p>
|
<p>注册即同意《隐私保护指引》</p>
|
||||||
</div>
|
</div>
|
||||||
<button class="submit">登录</button>
|
<button class="submit">登录</button>
|
||||||
<div class="other">
|
<div class="other">
|
||||||
<p>密码登录</p>
|
<p>密码登录</p>
|
||||||
<p>需要帮助？</p>
|
<p @click="open">需要帮助？</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="ways">
|
<div class="ways">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<p class="text">社交帐号登录</p>
|
<p class="text">社交帐号登录</p>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="icons">
|
<div class="icons">
|
||||||
<img src="./assets/wechat.png" alt="" class="iocn">
|
<img src="./assets/wechat.png" alt class="icon" />
|
||||||
<img src="./assets/weibo.png" alt="" class="iocn">
|
<img src="./assets/weibo.png" alt class="icon" />
|
||||||
<img src="./assets/qq.png" alt="" class="iocn">
|
<img src="./assets/qq.png" alt class="icon" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="tanchuangbox" v-if="ifshow">
|
||||||
|
<div class="tanchuang">
|
||||||
|
<p class="desc desc1">找回密码</p>
|
||||||
|
<p class="desc">人工申诉</p>
|
||||||
|
<p class="off" @click="off">取消</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {};
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ifshow: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
open() {
|
||||||
|
this.ifshow = true;
|
||||||
|
},
|
||||||
|
off() {
|
||||||
|
this.ifshow = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@ -99,8 +120,8 @@ export default {};
|
|||||||
outline-color: transparent;
|
outline-color: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.shuru::placeholder{
|
.shuru::placeholder {
|
||||||
color: #999999
|
color: #999999;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tel1 {
|
.tel1 {
|
||||||
@ -118,11 +139,11 @@ export default {};
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
margin: auto 0;
|
margin: auto 0;
|
||||||
color: #6B9147;
|
color: #6b9147;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 54px;
|
line-height: 54px;
|
||||||
}
|
}
|
||||||
.ale{
|
.ale {
|
||||||
height: 58px;
|
height: 58px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
@ -130,64 +151,91 @@ export default {};
|
|||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
// line-height: 30px;
|
// line-height: 30px;
|
||||||
.alert{
|
.alert {
|
||||||
text-indent: -15px;
|
text-indent: -15px;
|
||||||
margin-bottom: 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;
|
||||||
}
|
}
|
||||||
.submit{
|
> p:last-child {
|
||||||
width: 690px;
|
margin-right: 43px;
|
||||||
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;
|
.ways {
|
||||||
font-size: 26px;
|
margin-top: 149px;
|
||||||
margin-top: 39px;
|
.top {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: center;
|
||||||
>p:first-child{
|
margin-bottom: 99px;
|
||||||
margin-left: 31px
|
height: 24px;
|
||||||
}
|
.line {
|
||||||
>p:last-child{
|
width: 120px;
|
||||||
margin-right: 43px;
|
height: 2px;
|
||||||
}
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #999999;
|
||||||
|
font-size: 24px;
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.ways{
|
}
|
||||||
margin-top: 149px;
|
.icons {
|
||||||
.top{
|
display: flex;
|
||||||
display: flex;
|
justify-content: space-around;
|
||||||
justify-content: center;
|
// margin-bottom: 165px;
|
||||||
margin-bottom: 99px;
|
margin-bottom: 100px;
|
||||||
height: 24px;
|
.icon {
|
||||||
.line{
|
width: 71px;
|
||||||
width: 120px;
|
height: 71px;
|
||||||
height: 2px;
|
|
||||||
margin-top: 12px;
|
|
||||||
}
|
|
||||||
.text{
|
|
||||||
color: #999999;
|
|
||||||
font-size: 24px;
|
|
||||||
margin-left: 20px;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.icons{
|
}
|
||||||
display: flex;
|
.tanchuangbox {
|
||||||
justify-content: space-around;
|
width: 750px;
|
||||||
margin-bottom: 165px;
|
height: 1334px;
|
||||||
.icon{
|
background: rgba(0, 0, 0, 0.3);
|
||||||
width: 71px;
|
position: absolute;
|
||||||
height: 71px;
|
top: 0;
|
||||||
}
|
.tanchuang {
|
||||||
|
width: 580px;
|
||||||
|
height: 339px;
|
||||||
|
background-color: white;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 353px;
|
||||||
|
color: #333333;
|
||||||
|
font-size: 36px;
|
||||||
|
text-align: center;
|
||||||
|
.desc {
|
||||||
|
margin-bottom: 59px;
|
||||||
|
}
|
||||||
|
.desc1 {
|
||||||
|
padding-top: 59px;
|
||||||
|
}
|
||||||
|
.off {
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
247
src/loginpwd.vue
Normal file
247
src/loginpwd.vue
Normal file
@ -0,0 +1,247 @@
|
|||||||
|
<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="输入手机号或邮箱" />
|
||||||
|
<!-- <button class="getyzm">发送验证码</button> -->
|
||||||
|
</div>
|
||||||
|
<div class="tel yzm">
|
||||||
|
<input type="text" class="shuru tel1" placeholder="输入密码" />
|
||||||
|
<!-- <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 @click="open">需要帮助？</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="icon" />
|
||||||
|
<img src="./assets/weibo.png" alt class="icon" />
|
||||||
|
<img src="./assets/qq.png" alt class="icon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tanchuangbox" v-if="ifshow">
|
||||||
|
<div class="tanchuang">
|
||||||
|
<p class="desc desc1">找回密码</p>
|
||||||
|
<p class="desc">人工申诉</p>
|
||||||
|
<p class="off" @click="off">取消</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ifshow: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
open() {
|
||||||
|
this.ifshow=true
|
||||||
|
},
|
||||||
|
off(){
|
||||||
|
this.ifshow=false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</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 {
|
||||||
|
border: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
outline: none;
|
||||||
|
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;
|
||||||
|
margin-bottom: 100px;
|
||||||
|
.icon {
|
||||||
|
width: 71px;
|
||||||
|
height: 71px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tanchuangbox{
|
||||||
|
width: 750px;
|
||||||
|
height: 1334px;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
.tanchuang{
|
||||||
|
width: 580px;
|
||||||
|
height: 339px;
|
||||||
|
background-color: white;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 353px;
|
||||||
|
color: #333333;
|
||||||
|
font-size: 36px;
|
||||||
|
text-align: center;
|
||||||
|
.desc{
|
||||||
|
margin-bottom:59px;
|
||||||
|
}
|
||||||
|
.desc1{
|
||||||
|
padding-top: 59px;
|
||||||
|
}
|
||||||
|
.off{
|
||||||
|
color: #666666
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -9,10 +9,15 @@ import index from "./index"
|
|||||||
import ManualAppeal from "./ManualAppeal"
|
import ManualAppeal from "./ManualAppeal"
|
||||||
import IndexArticleDetail from "./IndexArticleDetail"
|
import IndexArticleDetail from "./IndexArticleDetail"
|
||||||
import login from "./login"
|
import login from "./login"
|
||||||
|
import loginpwd from "./loginpwd"
|
||||||
const router=new Router({
|
const router=new Router({
|
||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
|
component: loginpwd
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
component: login
|
component: login
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user