Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Seven
|
ba16f31270 | ||
|
Seven
|
e0f5719072 |
+113
-14
@@ -1,8 +1,38 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<el-input placeholder="请输入用户名" v-model="username" clearable> </el-input>
|
||||
<el-input placeholder="请输入密码" v-model="password" show-password></el-input>
|
||||
</div>
|
||||
<main class="login-page">
|
||||
<section class="login-card">
|
||||
<p class="eyebrow">CHAT DEMO</p>
|
||||
<h1>欢迎回来</h1>
|
||||
<p class="subtitle">登录后继续你的聊天</p>
|
||||
|
||||
<el-form class="login-form" @submit.native.prevent="handleLogin">
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="username"
|
||||
placeholder="请输入账号"
|
||||
clearable
|
||||
prefix-icon="el-icon-user"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="password"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
prefix-icon="el-icon-lock"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-button class="login-button" type="primary" native-type="submit">
|
||||
登录
|
||||
</el-button>
|
||||
</el-form>
|
||||
|
||||
<p class="register-tip">
|
||||
还没有账号？
|
||||
<router-link to="/register">立即注册</router-link>
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -13,23 +43,92 @@ export default {
|
||||
username: '',
|
||||
password: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleLogin() {
|
||||
// 登录接口接入后在这里提交账号和密码。
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
.login-page {
|
||||
align-items: center;
|
||||
background: #eef5f3;
|
||||
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(211, 235, 229, 0.75));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
||||
.login-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(35, 91, 80, 0.08);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 22px 55px rgba(35, 91, 80, 0.14);
|
||||
max-width: 420px;
|
||||
padding: 48px 44px 38px;
|
||||
transform: translateY(-60px);
|
||||
width: 100%;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
|
||||
.eyebrow {
|
||||
color: #3e8b7a;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
|
||||
h1 {
|
||||
color: #193b37;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #82948f;
|
||||
font-size: 14px;
|
||||
margin: 12px 0 32px;
|
||||
}
|
||||
|
||||
.login-form :deep(.el-form-item) {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.login-form :deep(.el-input__inner) {
|
||||
border-color: #dce8e4;
|
||||
border-radius: 4px;
|
||||
height: 46px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
height: 46px;
|
||||
margin-top: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.register-tip {
|
||||
color: #82948f;
|
||||
font-size: 13px;
|
||||
margin: 26px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.register-tip a {
|
||||
color: #2f806f;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.login-card {
|
||||
padding: 36px 24px 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,46 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<el-input placeholder="请输入用户名" v-model="username" clearable> </el-input>
|
||||
<el-input placeholder="请输入密码" v-model="password" show-password></el-input>
|
||||
<el-input placeholder="请确认密码" v-model="password2" show-password></el-input>
|
||||
</div>
|
||||
<main class="register-page">
|
||||
<section class="register-card">
|
||||
<p class="eyebrow">CHAT DEMO</p>
|
||||
<h1>创建账号</h1>
|
||||
<p class="subtitle">注册后开启你的聊天体验</p>
|
||||
|
||||
<el-form class="register-form" @submit.native.prevent="handleRegister">
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="username"
|
||||
placeholder="请输入账号"
|
||||
clearable
|
||||
prefix-icon="el-icon-user"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="password"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
prefix-icon="el-icon-lock"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="password2"
|
||||
placeholder="请确认密码"
|
||||
show-password
|
||||
prefix-icon="el-icon-check"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-button class="register-button" type="primary" native-type="submit">
|
||||
注册
|
||||
</el-button>
|
||||
</el-form>
|
||||
|
||||
<p class="login-tip">
|
||||
已有账号？
|
||||
<router-link to="/login">返回登录</router-link>
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -15,23 +52,97 @@ export default {
|
||||
password: '',
|
||||
password2: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRegister() {
|
||||
if (this.password !== this.password2) {
|
||||
this.$message.error('两次输入的密码不一致')
|
||||
return
|
||||
}
|
||||
|
||||
// 注册接口接入后在这里提交账号和密码。
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
.register-page {
|
||||
align-items: center;
|
||||
background: #eef5f3;
|
||||
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(211, 235, 229, 0.75));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
||||
.register-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(35, 91, 80, 0.08);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 22px 55px rgba(35, 91, 80, 0.14);
|
||||
max-width: 420px;
|
||||
padding: 48px 44px 38px;
|
||||
transform: translateY(-60px);
|
||||
width: 100%;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
|
||||
.eyebrow {
|
||||
color: #3e8b7a;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
|
||||
h1 {
|
||||
color: #193b37;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #82948f;
|
||||
font-size: 14px;
|
||||
margin: 12px 0 32px;
|
||||
}
|
||||
|
||||
.register-form :deep(.el-form-item) {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.register-form :deep(.el-input__inner) {
|
||||
border-color: #dce8e4;
|
||||
border-radius: 4px;
|
||||
height: 46px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.register-button {
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
height: 46px;
|
||||
margin-top: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-tip {
|
||||
color: #82948f;
|
||||
font-size: 13px;
|
||||
margin: 26px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-tip a {
|
||||
color: #2f806f;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.register-card {
|
||||
padding: 36px 24px 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+1
-1
@@ -20,7 +20,7 @@ const routes = [
|
||||
{
|
||||
path: '/register',
|
||||
name: 'RegisterPage',
|
||||
componenr: RegisterPage
|
||||
component: RegisterPage
|
||||
},
|
||||
{
|
||||
path: '/index',
|
||||
|
||||
Reference in New Issue
Block a user