注册页面
This commit is contained in:
parent
7e8c5da593
commit
71adc2622e
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: Kane
|
||||
* @Date: 2022-11-12 23:32:20
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2022-11-14 07:42:30
|
||||
* @LastEditTime: 2022-11-16 11:08:23
|
||||
* @FilePath: \car_dealer\css\app.css
|
||||
* @Description:
|
||||
*
|
||||
|
|
@ -10,11 +10,6 @@
|
|||
*/
|
||||
@import url("colors.css");
|
||||
|
||||
#root,
|
||||
#app {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--backupground-color);
|
||||
padding: 50px;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: Kane
|
||||
* @Date: 2022-11-12 23:22:59
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2022-11-12 23:23:29
|
||||
* @LastEditTime: 2022-11-16 15:26:04
|
||||
* @FilePath: \car_dealer\css\colors.css
|
||||
* @Description:
|
||||
*
|
||||
|
|
@ -16,4 +16,6 @@ html {
|
|||
--btn-color-green: #5bad60;
|
||||
--btn-color-red: #e56651;
|
||||
--btn-font-color: #fff;
|
||||
|
||||
--input-focus-color: #e56651;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
/*
|
||||
* @Author: Kane
|
||||
* @Date: 2022-11-16 10:58:30
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2022-11-16 14:38:15
|
||||
* @FilePath: \car_dealer\vue\注册\css\main.css
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
*/
|
||||
@import url("../../../css/colors.css");
|
||||
|
||||
html {
|
||||
--text-border-color: #f4f5f7ff;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 20rem;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#app > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* #app input {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 5px;
|
||||
} */
|
||||
|
||||
#app input[type="text"] {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
line-height: 1.5rem;
|
||||
padding: 2px 1rem;
|
||||
border: 1px solid #f4f5f7ff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#app input[type="text"]:focus {
|
||||
border: none;
|
||||
outline: 2px solid var(--input-focus-color);
|
||||
}
|
||||
|
||||
#app > * + * {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.pianhao {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.pianhao label {
|
||||
line-height: 0.8rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: var(--btn-color-red);
|
||||
color: var(--btn-font-color);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
width: 10rem;
|
||||
padding: 0.5rem 1rem;
|
||||
margin-top: 25px !important;
|
||||
}
|
||||
|
||||
button:active {
|
||||
color: var(--btn-color-red);
|
||||
background-color: var(--btn-font-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2022-11-16 10:50:27
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2022-11-16 15:07:29
|
||||
* @FilePath: \car_dealer\vue\注册\signup.html
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>注册</title>
|
||||
<link rel="stylesheet" href="../../css/root.css" />
|
||||
<link rel="stylesheet" href="../../css/normalize.css" />
|
||||
<link rel="stylesheet" href="../../css/app.css" />
|
||||
<link rel="stylesheet" href="css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="app">
|
||||
<h5>加入我们，一起创造美好世界</h5>
|
||||
<h1>创建你的账号</h1>
|
||||
<div>
|
||||
<h6>用户名 *</h6>
|
||||
<input
|
||||
type="text"
|
||||
v-model.lazy.trim="signupInfo.username"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h6>邮箱地址</h6>
|
||||
<input type="text" v-model.lazy.trim="signupInfo.email" />
|
||||
</div>
|
||||
<div>
|
||||
<h6>密码*</h6>
|
||||
<input
|
||||
type="text"
|
||||
v-model.lazy.trim="signupInfo.password"
|
||||
/>
|
||||
<h6>请确认密码长度需要大于6位</h6>
|
||||
</div>
|
||||
<div>
|
||||
<h6>偏好设置</h6>
|
||||
<div class="pianhao">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="sendUpdateMail"
|
||||
v-model="signupInfo.sendUpdateMail"
|
||||
/>
|
||||
<label for="sendUpdateMail"> 接收更新邮件</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" @click="doSignup()">创建账号</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../js/axios/1.1.3/axios.js"></script>
|
||||
<script src="../../js/vue/vue.global.js"></script>
|
||||
<script>
|
||||
const app = {
|
||||
data() {
|
||||
return {
|
||||
signupInfo: {
|
||||
username: "",
|
||||
email: "",
|
||||
password: "",
|
||||
sendUpdateMail: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doSignup() {
|
||||
let json = "";
|
||||
|
||||
if (
|
||||
this.signupInfo.username.length != 0 &&
|
||||
this.signupInfo.password.length != 0
|
||||
) {
|
||||
try {
|
||||
json = JSON.stringify(this.signupInfo);
|
||||
} catch (exception) {
|
||||
console.log(exception.message);
|
||||
}
|
||||
} else {
|
||||
}
|
||||
|
||||
console.log(json);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const vm = Vue.createApp(app);
|
||||
vm.mount("#app");
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue