ui: login page improved

NJUPT-SAST · Jul 29, 2024 · 60dcdc6 · 60dcdc6
1 parent b0c825d
commit 60dcdc6
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 51 deletions.
diff --git a/ui/app.slint b/ui/app.slint
@@ -7,7 +7,7 @@ export component App inherits Window {
     width: ROOT-GLOBAL.window-width;
     title: "SAST Evento";
     icon: @image-url("assets/app_icon.png");
-    main_view := MainView {
-        y: 200px;
+    main-view := MainView {
+        y: 120px;
     }
 }
diff --git a/ui/assets/evento_black.png b/ui/assets/evento_black.png
diff --git a/ui/assets/evento_white.png b/ui/assets/evento_white.png
diff --git a/ui/assets/surrealism.png b/ui/assets/surrealism.png
diff --git a/ui/assets/surrealism.svg b/ui/assets/surrealism.svg
diff --git a/ui/global.slint b/ui/global.slint
@@ -1,7 +1,7 @@
 //! global styles
 export global ROOT_GLOBAL {
-  in-out property <length> window-height : 600px;
-  in-out property <length> window-width : 800px;
+  in-out property <length> window-height : 760px;
+  in-out property <length> window-width : 1340px;
   in-out property <length> font-size : 16px;
   in-out property <length> padding : 0px;
 }
diff --git a/ui/views/main.slint b/ui/views/main.slint
@@ -2,36 +2,43 @@ import { Hello } from "../components/index.slint";
 import { SText, SButton } from "../modules/surrealism-ui/index.slint";
 
 export component MainView {
-    callback startLink;
-
-    eventoLogo := Image {
-        width: 150px;
-        height: 150px;
-        x: (root.width - self.width) / 2;
-        source: @image-url("../assets/app_icon.svg");
+    callback startLink <=> link-button.clicked;
+    evento-image := Image {
+        height: 240px;
+        width: 700px;
+        source: @image-url("../assets/evento_black.png");
     }
 
-    title := SText {
-        x: (root.width - self.width) / 2;
-        y: eventoLogo.y + eventoLogo.height;
-        text: "SAST Evento";
+    link-button := SButton {
+        width: 400px;
+        height: 80px;
+        y: evento-image.y + evento-image.height + 140px;
+        text: "使用Link登录";
         font-size: 35px;
+        theme: Dark;
+        border-radius: 12px;
+        show-icon: true;
+        icon: @image-url("../assets/sast_link.svg");
     }
 
-    linkButton := SButton {
-        x: (root.width - self.width) / 2;
-        y: title.y + title.height + 30px;
+    visitor-button := SButton {
+        y: link-button.y + link-button.height + 30px;
+        text: "访客登录";
+        theme: Light;
+        border-radius: 8px;
         show-icon: true;
-        icon: @image-url("../assets/sast_link.svg");
-        text: "使用Link登入";
-        clicked => {
-            root.startLink();
-        }
+        icon: @image-url("../modules/surrealism-ui/icons/user.svg");
     }
 
-    infoText := SText {
-        x: (root.width - self.width) / 2;
-        y: linkButton.y + linkButton.height + 30px;
+    group-label := SText {
+        y: visitor-button.y + visitor-button.height + 20px;
         text: "SAST-C++组开发";
+        theme: Light;
+    }
+
+    version-label := SText {
+        y: group-label.y + group-label.height + 5px;
+        text: "v0.0.0-alpha";
+        theme: Light;
     }
 }