[Improve]: login page style (#4094)

apache · Sep 26, 2024 · 2fcf3c1 · 2fcf3c1
1 parent 360ae5a
commit 2fcf3c1
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 19 deletions.
diff --git a/streampark-console/streampark-console-webapp/src/assets/images/join_wechat.png b/streampark-console/streampark-console-webapp/src/assets/images/join_wechat.png
diff --git a/streampark-console/streampark-console-webapp/src/settings/siteSetting.ts b/streampark-console/streampark-console-webapp/src/settings/siteSetting.ts
@@ -6,3 +6,9 @@ export const DOC_URL = 'https://streampark.apache.org/docs/get-started/intro';
 
 // site url
 export const SITE_URL = 'https://streampark.apache.org';
+
+// twitter url
+export const TWITTER_URL = 'https://x.com/ASFStreampark';
+
+// email url
+export const EMAIL_URL = 'https://lists.apache.org/[email protected]';
diff --git a/streampark-console/streampark-console-webapp/src/views/base/login/Login.vue b/streampark-console/streampark-console-webapp/src/views/base/login/Login.vue
@@ -24,7 +24,7 @@
         :showText="false"
       />
     </div>
-    <div class="w-full relative h-[calc(100%-120px)] min-h-700px flex items-center section">
+    <div class="w-full relative h-[calc(100%-70px)] min-h-700px flex items-center section">
       <div class="scribble-box w-[80%] h-full absolute overflow-hidden">
         <figure class="scribble scale-2 !opacity-10 top-50 left-0">
           <SvgIcon name="block" class="text-secondary" :size="200" />
@@ -59,14 +59,38 @@
       </div>
     </div>
     <footer class="w-1150px m-auto text-center bg-transparent opacity-60">
-      <a href="https://incubator.apache.org/" target="_blank" class="w-200px m-auto inline-block">
-        <img
-          src="/@/assets/svg/apache-incubator.svg"
-          alt="Apache Incubator logo"
-          class="w-200px my-10px mx-auto"
-        />
-      </a>
-      <p class="text-light-100 pt-10px" style="border-top: 1px solid #dad7d7">
+      <div class="flex items-center justify-center">
+        <a
+          :href="TWITTER_URL"
+          target="_blank"
+          class="text-light-100 mx-3 cursor-pointer hover:text-light-400 dark:text-light-100"
+        >
+          <Icon icon="hugeicons:new-twitter" />
+        </a>
+        <div class="mx-3 text-light-100 cursor-pointer">
+          <Popover placement="top" trigger="hover" arrow-point-at-center>
+            <template #content>
+              <img src="/@/assets/images/join_wechat.png" alt="qrcode" class="h-150px w-150px" />
+            </template>
+            <Icon icon="cib:wechat" />
+          </Popover>
+        </div>
+        <a
+          :href="EMAIL_URL"
+          target="_blank"
+          class="text-light-100 mx-3 cursor-pointer hover:text-light-100 dark:text-light-100"
+        >
+          <Icon icon="ic:round-email" />
+        </a>
+        <a
+          :href="GITHUB_URL"
+          target="_blank"
+          class="text-light-100 mx-3 cursor-pointer hover:text-light-100 dark:text-light-100"
+        >
+          <Icon icon="ant-design:github-filled" />
+        </a>
+      </div>
+      <p class="text-light-100 pt-10px">
         Copyright © 2022-{{ `${new Date().getFullYear()}` }} The Apache Software Foundation. Apache
         StreamPark, StreamPark, and its feather logo are trademarks of The Apache Software
         Foundation.
@@ -78,10 +102,11 @@
   import LoginForm from './LoginForm.vue';
   import LoginSlogan from './LoginSlogan';
   import { useDesign } from '/@/hooks/web/useDesign';
-  import { Row, Col } from 'ant-design-vue';
-  import { SvgIcon } from '/@/components/Icon';
+  import { Row, Popover, Col } from 'ant-design-vue';
+  import Icon, { SvgIcon } from '/@/components/Icon';
   import { useLocale } from '/@/locales/useLocale';
   import { AppLocalePicker } from '/@/components/Application';
+  import { GITHUB_URL, EMAIL_URL, TWITTER_URL } from '/@/settings/siteSetting';
   defineProps({
     sessionTimeout: {
       type: Boolean,

diff --git a/streampark-console/streampark-console-webapp/src/views/base/login/LoginForm.vue b/streampark-console/streampark-console-webapp/src/views/base/login/LoginForm.vue
@@ -17,7 +17,7 @@
 <template>
   <div class="enter-x mb-50px text-light-50">
     <div class="text-center enter-x">
-      <img class="logo w-160px mx-auto my-20px" src="/@/assets/images/logo.png" />
+      <img class="logo mx-auto my-20px" src="/@/assets/images/logo-text.png" />
     </div>
   </div>
   <Form
@@ -41,7 +41,7 @@
         </template>
       </Input>
     </FormItem>
-    <FormItem name="password" class="enter-x">
+    <FormItem name="password" class="enter-x !mt-30px">
       <InputPassword
         visibilityToggle
         size="large"
@@ -53,7 +53,6 @@
         </template>
       </InputPassword>
     </FormItem>
-
     <FormItem class="enter-x">
       <Button
         type="primary"
@@ -87,6 +86,7 @@
 
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useMessage } from '/@/hooks/web/useMessage';
+
   import { useUserStore } from '/@/store/modules/user';
   import {
     LoginStateEnum,

diff --git a/streampark-console/streampark-console-webapp/src/views/base/login/LoginSlogan.less b/streampark-console/streampark-console-webapp/src/views/base/login/LoginSlogan.less
@@ -170,9 +170,9 @@
 }
 
 .system_info .project_title {
-  font-size: 3.5875rem;
+  font-size: 4.5rem;
   margin-bottom: 15px;
-  font-weight: bolder;
+  font-weight: lighter;
   line-height: 6rem;
 }
 
@@ -200,7 +200,6 @@
   font-size: 0.875rem;
   font-weight: 600;
   padding: 1rem 1.5rem;
-  border-radius: 6px;
   line-height: 1;
   text-transform: uppercase;
 

diff --git a/streampark-console/streampark-console-webapp/src/views/base/login/LoginSlogan.tsx b/streampark-console/streampark-console-webapp/src/views/base/login/LoginSlogan.tsx
@@ -19,7 +19,6 @@ import { defineComponent } from 'vue';
 import './LoginSlogan.less';
 import Icon from '/@/components/Icon';
 import { version } from '../../../../package.json';
-
 export default defineComponent({
   name: 'LoginSlogan',
   setup() {
@@ -53,7 +52,6 @@ export default defineComponent({
                     StreamPark
                   </span>
                 </div>
-                <span class="badge bg-secondary-home text-xl tag">Incubating</span>
               </div>
             </div>
             <p class=" text-light-200 leading-40px" style={{ fontSize: '18px' }}>