注册页面
This commit is contained in:
parent
7e8c5da593
commit
71adc2622e
@ -2,7 +2,7 @@
|
|||||||
* @Author: Kane
|
* @Author: Kane
|
||||||
* @Date: 2022-11-12 23:32:20
|
* @Date: 2022-11-12 23:32:20
|
||||||
* @LastEditors: Kane
|
* @LastEditors: Kane
|
||||||
* @LastEditTime: 2022-11-14 07:42:30
|
* @LastEditTime: 2022-11-16 11:08:23
|
||||||
* @FilePath: \car_dealer\css\app.css
|
* @FilePath: \car_dealer\css\app.css
|
||||||
* @Description:
|
* @Description:
|
||||||
*
|
*
|
||||||
@ -10,11 +10,6 @@
|
|||||||
*/
|
*/
|
||||||
@import url("colors.css");
|
@import url("colors.css");
|
||||||
|
|
||||||
#root,
|
|
||||||
#app {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--backupground-color);
|
background-color: var(--backupground-color);
|
||||||
padding: 50px;
|
padding: 50px;
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
* @Author: Kane
|
* @Author: Kane
|
||||||
* @Date: 2022-11-12 23:22:59
|
* @Date: 2022-11-12 23:22:59
|
||||||
* @LastEditors: Kane
|
* @LastEditors: Kane
|
||||||
* @LastEditTime: 2022-11-12 23:23:29
|
* @LastEditTime: 2022-11-16 15:26:04
|
||||||
* @FilePath: \car_dealer\css\colors.css
|
* @FilePath: \car_dealer\css\colors.css
|
||||||
* @Description:
|
* @Description:
|
||||||
*
|
*
|
||||||
@ -16,4 +16,6 @@ html {
|
|||||||
--btn-color-green: #5bad60;
|
--btn-color-green: #5bad60;
|
||||||
--btn-color-red: #e56651;
|
--btn-color-red: #e56651;
|
||||||
--btn-font-color: #fff;
|
--btn-font-color: #fff;
|
||||||
|
|
||||||
|
--input-focus-color: #e56651;
|
||||||
}
|
}
|
||||||
|
|||||||
81
code/web/car_dealer/vue/注册/css/main.css
Normal file
81
code/web/car_dealer/vue/注册/css/main.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
100
code/web/car_dealer/vue/注册/signup.html
Normal file
100
code/web/car_dealer/vue/注册/signup.html
Normal file
@ -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…
x
Reference in New Issue
Block a user