jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-03-03 10:30:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: signup page view v1

Browse Source
This commit is contained in:
tim
2025-07-04 10:12:48 +08:00
parent 0592120a3a
commit 7cad6a163f
6 changed files with 205 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
open-isle-cli/src/views/PostPageView.vue
View File

@@ -250,6 +250,7 @@ export default {
.post-page-main-container {
overflow-y: auto;
scrollbar-width: none;
padding: 20px;
height: calc(100% - 40px);
width: calc(85% - 40px);

173
open-isle-cli/src/views/SignupPageView.vue
View File

@@ -1,6 +1,47 @@
<template>
<div class="signup-page">
<h1>Sign Up</h1>
<div class="signup-page-content">
<div class="signup-page-header">
<div class="signup-page-header-title">
Welcome :)
</div>
</div>
<div class="email-signup-page-content">
<div class="signup-page-input">
<i class="signup-page-input-icon fas fa-envelope"></i>
<input class="signup-page-input-text" type="text" placeholder="邮箱">
</div>
<div class="signup-page-input">
<i class="signup-page-input-icon fas fa-user"></i>
<input class="signup-page-input-text" type="text" placeholder="用户名">
</div>
<div class="signup-page-input">
<i class="signup-page-input-icon fas fa-lock"></i>
<input class="signup-page-input-text" type="password" placeholder="密码">
</div>
<div class="signup-page-input">
<i class="signup-page-input-icon fas fa-user"></i>
<input class="signup-page-input-text" type="text" placeholder="昵称 (可选)">
</div>
<div class="signup-page-button-primary">
<div class="signup-page-button-text">注册</div>
</div>
<div class="signup-page-button-secondary">已经有账号？ <a class="signup-page-button-secondary-link" href="/login">登录</a></div>
</div>
</div>
<div class="other-signup-page-content">
<div class="signup-page-button">
<img class="signup-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
<div class="signup-page-button-text">Google 注册</div>
</div>
</div>
</div>
</template>
@@ -12,6 +53,134 @@ export default {
<style scoped>
.signup-page {
padding: 20px;
margin-top: 100px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.signup-page-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: calc(40% - 120px);
border-right: 1px solid #ccc;
padding-right: 120px;
}
.signup-page-header-title {
font-family: 'Pacifico', 'Comic Sans MS', cursive, 'Roboto', sans-serif;
font-size: 42px;
font-weight: bold;
width: 100%;
opacity: 0.75;
}
.signup-page-header {
font-size: 42px;
font-weight: bold;
width: 100%;
}
.email-signup-page-content {
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.signup-page-input {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: calc(100% - 40px);
padding: 15px 20px;
border-radius: 10px;
border: 1px solid #ccc;
gap: 10px;
margin-bottom: 20px;
}
.signup-page-input-icon {
opacity: 0.5;
font-size: 16px;
}
.signup-page-input-text {
border: none;
outline: none;
width: 100%;
font-size: 16px;
}
.other-signup-page-content {
margin-left: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 30%;
}
.signup-page-button-primary {
margin-top: 20px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: calc(100% - 40px);
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
gap: 10px;
}
.signup-page-button-primary:hover {
background-color: var(--primary-color-hover);
}
.signup-page-button {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 10px 20px;
background-color: var(--normal-background-color);
border: 1px solid #ccc;
border-radius: 10px;
cursor: pointer;
gap: 10px;
}
.signup-page-button:hover {
background-color: #e0e0e0;
}
.signup-page-button-icon {
width: 20px;
height: 20px;
}
.signup-page-button-text {
font-size: 16px;
}
.signup-page-button-secondary {
margin-top: 20px;
font-size: 16px;
opacity: 0.7;
}
.signup-page-button-secondary-link {
color: var(--primary-color);
}
</style>