This is an automated email from the ASF dual-hosted git repository.
gongchao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
The following commit(s) were added to refs/heads/master by this push:
new dbcd3f3c0d [improve] Improve the login page style (#4044)
dbcd3f3c0d is described below
commit dbcd3f3c0d023d3f52cf66721e79e8f8cb908eb2
Author: Duansg <[email protected]>
AuthorDate: Fri Feb 27 23:11:45 2026 +0800
[improve] Improve the login page style (#4044)
Co-authored-by: liutianyou <[email protected]>
---
web-app/src/app/layout/layout.module.ts | 5 +-
.../app/layout/passport/passport.component.html | 52 ++++++++-------
.../app/layout/passport/passport.component.less | 75 ++++++++++++++++++++--
3 files changed, 102 insertions(+), 30 deletions(-)
diff --git a/web-app/src/app/layout/layout.module.ts
b/web-app/src/app/layout/layout.module.ts
index 2dc0ed5fb7..f8e3d8f968 100644
--- a/web-app/src/app/layout/layout.module.ts
+++ b/web-app/src/app/layout/layout.module.ts
@@ -4,7 +4,7 @@ import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { GlobalFooterModule } from '@delon/abc/global-footer';
-import { AlainThemeModule } from '@delon/theme';
+import { AlainThemeModule, I18nPipe } from '@delon/theme';
import { LayoutDefaultModule } from '@delon/theme/layout-default';
import { SettingDrawerModule } from '@delon/theme/setting-drawer';
import { ThemeBtnModule } from '@delon/theme/theme-btn';
@@ -78,7 +78,8 @@ const PASSPORT = [LayoutPassportComponent];
NzStringTemplateOutletDirective,
NzListItemActionComponent,
NzTooltipDirective,
- NzCheckboxComponent
+ NzCheckboxComponent,
+ I18nPipe
],
declarations: [...COMPONENTS, ...HEADER_COMPONENTS, ...PASSPORT,
...DIRECTIVES],
exports: [...COMPONENTS, ...PASSPORT]
diff --git a/web-app/src/app/layout/passport/passport.component.html
b/web-app/src/app/layout/passport/passport.component.html
index cceb78933d..e811c9387a 100644
--- a/web-app/src/app/layout/passport/passport.component.html
+++ b/web-app/src/app/layout/passport/passport.component.html
@@ -9,30 +9,34 @@
</div>
<div nz-row [nzGutter]="16">
<div nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 10, offset: 2 }">
- <div class="-inner-content; mobile-hide" style="margin-left: 10%">
- <div style="margin-top: 10px; font-weight: bolder; font-size:
xxx-large; color: white">
- {{ 'app.passport.intro-1' | i18n }}<br />{{ 'app.passport.intro-2'
| i18n }}
- </div>
+ <div class="mobile-hide passport-left-content">
+ <div class="passport-intro">{{ 'app.passport.intro-1' | i18n }}<br
/>{{ 'app.passport.intro-2' | i18n }}</div>
<nz-divider></nz-divider>
- <div style="margin-top: 15px; font-weight: normal; font-size:
medium; color: white">
- <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
- {{ 'about.point.1' | i18n }}
- <br />
- <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
- {{ 'about.point.2' | i18n }}
- <br />
- <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
- {{ 'about.point.3' | i18n }}
- <br />
- <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
- {{ 'about.point.4' | i18n }}
- <br />
- <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
- {{ 'about.point.5' | i18n }}
- <br />
- <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
- {{ 'about.point.6' | i18n }}
- <br />
+ <div class="passport-points">
+ <div class="point-item">
+ <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
+ <span>{{ 'about.point.1' | i18n }}</span>
+ </div>
+ <div class="point-item">
+ <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
+ <span>{{ 'about.point.2' | i18n }}</span>
+ </div>
+ <div class="point-item">
+ <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
+ <span>{{ 'about.point.3' | i18n }}</span>
+ </div>
+ <div class="point-item">
+ <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
+ <span>{{ 'about.point.4' | i18n }}</span>
+ </div>
+ <div class="point-item">
+ <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
+ <span>{{ 'about.point.5' | i18n }}</span>
+ </div>
+ <div class="point-item">
+ <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
+ <span>{{ 'about.point.6' | i18n }}</span>
+ </div>
</div>
<nz-divider></nz-divider>
</div>
@@ -42,7 +46,7 @@
</div>
</div>
<global-footer style="border-top: 1px solid #d692e3; margin-top: auto">
- <div style="margin-top: 30px">
+ <div style="margin-top: 16px">
Apache HertzBeat™ {{ version }}<br />
Copyright © {{ currentYear }}
<a href="https://hertzbeat.apache.org"; target="_blank">Apache
HertzBeat™</a>
diff --git a/web-app/src/app/layout/passport/passport.component.less
b/web-app/src/app/layout/passport/passport.component.less
index 4cabc8903d..2544919348 100644
--- a/web-app/src/app/layout/passport/passport.component.less
+++ b/web-app/src/app/layout/passport/passport.component.less
@@ -21,12 +21,12 @@
}
.wrap {
flex: 1;
- padding: 32px 0;
+ padding: 12px 0;
}
.ant-form-item {
display: flex;
justify-content: space-between;
- margin-bottom: 24px;
+ margin-bottom: 16px;
}
@media (min-width: @screen-md-min) {
@@ -38,7 +38,7 @@
background-size: cover;
}
.wrap {
- padding: 32px 0 24px;
+ padding: 12px 0 8px;
}
}
.top {
@@ -65,10 +65,77 @@
}
.desc {
margin-top: 12px;
- margin-bottom: 40px;
+ margin-bottom: 20px;
color: @text-color-secondary;
font-size: @font-size-base;
}
+
+ .passport-left-content {
+ margin-left: 10%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ height: 100%;
+
+ &.long-lang {
+ .passport-intro {
+ font-size: clamp(1.4rem, 2.5vw, 2.2rem);
+ }
+ .passport-points {
+ font-size: 12px;
+ }
+ }
+
+ nz-divider {
+ margin: 10px 0;
+ background: rgba(255, 255, 255, 0.2);
+ }
+ }
+
+ .passport-intro {
+ margin-top: 0;
+ font-weight: bolder;
+ font-size: clamp(1.6rem, 3vw, 2.4rem);
+ color: white;
+ line-height: 1.2;
+ word-break: break-word;
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ }
+
+ .passport-points {
+ margin-top: 8px;
+ font-weight: normal;
+ font-size: 13px;
+ color: white;
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 4px 24px;
+
+ @media (min-width: @screen-lg-min) {
+ .long-lang & {
+ grid-template-columns: 1fr 1fr;
+ }
+ @media (max-height: 750px) {
+ grid-template-columns: 1fr 1fr;
+ }
+ }
+
+ .point-item {
+ display: flex;
+ align-items: flex-start;
+ line-height: 1.4;
+ margin-bottom: 4px;
+ nz-badge {
+ margin-top: 5px;
+ margin-right: 8px;
+ flex-shrink: 0;
+ }
+ span {
+ flex: 1;
+ opacity: 0.9;
+ }
+ }
+ }
}
[data-theme='dark'] {
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
