Skip to content

Commit 712a4d2

Browse files
0xJacky0xJacky
committed
fix: styles of installation page
1 parent e7d394b commit 712a4d2

File tree

8 files changed

+237
-464
lines changed

8 files changed

+237
-464
lines changed

‎app/src/views/other/Install.vue

Lines changed: 105 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -79,94 +79,118 @@ const onSubmit = () => {
7979

8080
<template>
8181
<ALayout>
82-
<div class="login-form">
83-
<div class="project-title">
84-
<h1>Nginx UI</h1>
82+
<ALayoutContent>
83+
<div class="login-container">
84+
<div class="login-form">
85+
<div class="project-title">
86+
<h1>Nginx UI</h1>
87+
</div>
88+
<AForm id="components-form-install">
89+
<AFormItem v-bind="validateInfos.email">
90+
<AInput
91+
v-model:value="modelRef.email"
92+
:placeholder="$gettext('Email (*)')"
93+
>
94+
<template #prefix>
95+
<MailOutlined />
96+
</template>
97+
</AInput>
98+
</AFormItem>
99+
<AFormItem v-bind="validateInfos.username">
100+
<AInput
101+
v-model:value="modelRef.username"
102+
:placeholder="$gettext('Username (*)')"
103+
>
104+
<template #prefix>
105+
<UserOutlined />
106+
</template>
107+
</AInput>
108+
</AFormItem>
109+
<AFormItem v-bind="validateInfos.password">
110+
<AInputPassword
111+
v-model:value="modelRef.password"
112+
:placeholder="$gettext('Password (*)')"
113+
>
114+
<template #prefix>
115+
<LockOutlined />
116+
</template>
117+
</AInputPassword>
118+
</AFormItem>
119+
<AFormItem>
120+
<AInput
121+
v-bind="validateInfos.database"
122+
v-model:value="modelRef.database"
123+
:placeholder="$gettext('Database (Optional, default: database)')"
124+
>
125+
<template #prefix>
126+
<DatabaseOutlined />
127+
</template>
128+
</AInput>
129+
</AFormItem>
130+
<AFormItem>
131+
<AButton
132+
type="primary"
133+
block
134+
html-type="submit"
135+
:loading="loading"
136+
@click="onSubmit"
137+
>
138+
{{ $gettext('Install') }}
139+
</AButton>
140+
</AFormItem>
141+
</AForm>
142+
<div class="footer">
143+
<p>Copyright © 2020 - {{ thisYear }} Nginx UI</p>
144+
Language
145+
<SetLanguage class="inline" />
146+
<div class="flex justify-center mt-4">
147+
<SwitchAppearance />
148+
</div>
149+
</div>
150+
</div>
85151
</div>
86-
<AForm
87-
id="components-form-install"
88-
class="login-form"
89-
>
90-
<AFormItem v-bind="validateInfos.email">
91-
<AInput
92-
v-model:value="modelRef.email"
93-
:placeholder="$gettext('Email (*)')"
94-
>
95-
<template #prefix>
96-
<MailOutlined />
97-
</template>
98-
</AInput>
99-
</AFormItem>
100-
<AFormItem v-bind="validateInfos.username">
101-
<AInput
102-
v-model:value="modelRef.username"
103-
:placeholder="$gettext('Username (*)')"
104-
>
105-
<template #prefix>
106-
<UserOutlined />
107-
</template>
108-
</AInput>
109-
</AFormItem>
110-
<AFormItem v-bind="validateInfos.password">
111-
<AInputPassword
112-
v-model:value="modelRef.password"
113-
:placeholder="$gettext('Password (*)')"
114-
>
115-
<template #prefix>
116-
<LockOutlined />
117-
</template>
118-
</AInputPassword>
119-
</AFormItem>
120-
<AFormItem>
121-
<AInput
122-
v-bind="validateInfos.database"
123-
v-model:value="modelRef.database"
124-
:placeholder="$gettext('Database (Optional, default: database)')"
125-
>
126-
<template #prefix>
127-
<DatabaseOutlined />
128-
</template>
129-
</AInput>
130-
</AFormItem>
131-
<AFormItem>
132-
<AButton
133-
type="primary"
134-
block
135-
html-type="submit"
136-
:loading="loading"
137-
@click="onSubmit"
138-
>
139-
{{ $gettext('Install') }}
140-
</AButton>
141-
</AFormItem>
142-
</AForm>
143-
<footer>
144-
Copyright © 2020 - {{ thisYear }} Nginx UI | Language
145-
<SetLanguage class="inline" />
146-
<SwitchAppearance />
147-
</footer>
148-
</div>
152+
</ALayoutContent>
149153
</ALayout>
150154
</template>
151155

152-
<style lang="less">
153-
.project-title {
154-
margin: 50px;
155-
156-
h1 {
157-
font-size: 50px;
158-
font-weight: 100;
159-
text-align: center;
160-
}
156+
<style lang="less" scoped>
157+
.ant-layout-content {
158+
background: #fff;
161159
}
162160
163-
.login-form {
164-
max-width: 500px;
165-
margin: 0 auto;
161+
.dark .ant-layout-content {
162+
background: transparent;
166163
}
167164
168-
footer {
169-
padding: 30px;
170-
text-align: center;
165+
.login-container {
166+
display: flex;
167+
align-items: center;
168+
justify-content: center;
169+
height: 100vh;
170+
171+
.login-form {
172+
max-width: 400px;
173+
width: 80%;
174+
175+
.project-title {
176+
margin: 50px;
177+
178+
h1 {
179+
font-size: 50px;
180+
font-weight: 100;
181+
text-align: center;
182+
}
183+
}
184+
185+
.anticon {
186+
color: #a8a5a5 !important;
187+
}
188+
189+
.footer {
190+
padding: 30px;
191+
text-align: center;
192+
font-size: 14px;
193+
}
194+
}
171195
}
172196
</style>

‎app/src/views/other/Login.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,5 +211,4 @@ if (route.query?.code !== undefined && route.query?.state !== undefined) {
211211
}
212212
}
213213
}
214-
215214
</style>

‎docs/.idea/.gitignore

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/.idea/docs.iml

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/.idea/modules.xml

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/.idea/vcs.xml

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"docs:preview": "vitepress preview"
88
},
99
"dependencies": {
10-
"vitepress": "^1.0.0-rc.31"
10+
"vitepress": "^1.0.0-rc.36"
1111
},
1212
"devDependencies": {
1313
"@types/node": "^20.1.0",

0 commit comments

Comments
 (0)