feat: signup page view v1

2026-02-21 22:41:05 +08:00 · 2025-07-04 10:12:48 +08:00
parent 0592120a3a
commit 7cad6a163f
6 changed files with 205 additions and 5 deletions
--- a/open-isle-cli/src/App.vue
+++ b/open-isle-cli/src/App.vue
@@ -41,7 +41,6 @@ export default {
  flex-direction: row;
  max-width: var(--page-max-width);
  margin: 0 auto;
-  background-color: var(--normal-background-color);
 }

 </style>
--- a/open-isle-cli/src/assets/global.css
+++ b/open-isle-cli/src/assets/global.css
@@ -1,5 +1,6 @@
 :root {
-  --primary-color: rgb(9, 95, 105);;
+  --primary-color-hover: rgb(9, 95, 105);
+  --primary-color: rgb(10, 110, 120);
  --header-height: 60px;
  --header-background-color: white;
  --header-border-color: lightgray;
@@ -7,7 +8,7 @@
  --menu-border-color: lightgray;
  --menu-selected-background-color: rgba(208, 250, 255, 0.659);
  --scroller-background-color: rgba(130, 175, 180, 0.5);
-  --normal-background-color: lightgrrgb(208, 246, 255)
+  --normal-background-color: rgb(241, 241, 241);
  --menu-width: 200px;
  --page-max-width: 1200px;
 }
--- a/open-isle-cli/src/assets/icons/google.svg
+++ b/open-isle-cli/src/assets/icons/google.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     viewBox="0 0 48 48">
+  <defs>
+    <!-- 定义整块 “G” 轮廓，用作剪裁路径 -->
+    <path id="a"
+          d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37
+             c-7.2 0-13-5.8-13-13s5.8-13 13-13
+             c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2
+             11.8 2 2 11.8 2 24s9.8 22 22 22
+             c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/>
+  </defs>
+
+  <!-- 应用剪裁后依次绘制四段色块 -->
+  <clipPath id="b">
+    <use xlink:href="#a" overflow="visible"/>
+  </clipPath>
+
+  <!-- 黄色 (#FBBC05) -->
+  <path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"/>
+  <!-- 红色 (#EA4335) -->
+  <path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/>
+  <!-- 绿色 (#34A853) -->
+  <path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/>
+  <!-- 蓝色 (#4285F4) -->
+  <path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/>
+</svg>
--- a/open-isle-cli/src/components/MenuComponent.vue
+++ b/open-isle-cli/src/components/MenuComponent.vue
@@ -67,6 +67,7 @@ export default {
  opacity: 0.5;
 }

+/*
 .slide-enter-active, .slide-leave-active {
  transition: 
    transform 0.3s ease,
@@ -81,4 +82,5 @@ export default {
  transform: translateX(0);
  opacity: 1;
 }
+  */
 </style>
--- a/open-isle-cli/src/views/PostPageView.vue
+++ b/open-isle-cli/src/views/PostPageView.vue
@@ -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);
--- a/open-isle-cli/src/views/SignupPageView.vue
+++ b/open-isle-cli/src/views/SignupPageView.vue
@@ -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>