Commit 73e7bb3c695aa34e667f0c64d497c863bfa0b55b
1 parent
f3022266
首页样式优化
Showing
1 changed file
with
343 additions
and
336 deletions
ant-design-vue-jeecg/src/components/layouts/UserLayoutLogin.vue
... | ... | @@ -5,57 +5,44 @@ |
5 | 5 | <div id="logoImg"> |
6 | 6 | <img src="~@/assets/logo.png" alt="" srcset="" class="imge"> |
7 | 7 | </div> |
8 | - <div id="text"> | |
9 | - 华恒WMS仓储管理系统 | |
10 | - </div> | |
8 | + <div id="text">华恒WMS仓储管理系统</div> | |
11 | 9 | </div> |
12 | 10 | <div id="backgroundImg"> |
13 | - | |
11 | + <img src="~@/assets/beijingtu.jpg" alt="" srcset="" class="imge"/> | |
14 | 12 | </div> |
15 | 13 | <div id="copyright"> |
16 | - <div id="company"> | |
17 | - Copyright © 2024 华恒焊接股份有限公司 | |
18 | - </div> | |
14 | + <div id="company">Copyright © 2024 华恒焊接股份有限公司</div> | |
19 | 15 | </div> |
20 | 16 | </div> |
21 | - | |
22 | 17 | <div class="right-div"> |
23 | - <div id="welcome"> | |
24 | - 欢迎来到华恒仓储管理系统 ! | |
25 | - </div> | |
26 | - <a-form-model ref="form" :model="model" :rules="validatorRules"> | |
27 | - <a-form-model-item required prop="username"> | |
28 | - <a-input id="name" v-model="model.username" size="default" autocomplete="off" placeholder="请输入帐户名 / admin" | |
29 | - @blur="getWarehouse"> | |
30 | - </a-input> | |
31 | - </a-form-model-item> | |
32 | - <a-form-model-item required prop="password"> | |
33 | - <a-input id="password" v-model="model.password" size="default" type="password" autocomplete="new-password" @input="maskPassword" | |
34 | - placeholder="请输入密码"> | |
35 | - | |
36 | - </a-input> | |
37 | - </a-form-model-item> | |
38 | - <a-form-model-item prop="warehouseCode"> | |
39 | - <a-select | |
40 | - show-search | |
41 | - placeholder="请选择仓库" | |
42 | - option-filter-prop="label" | |
43 | - v-model="model.warehouseCode" id="warehouseCode"> | |
44 | - <a-select-option v-for="item in warehouseList" :key="item.name" :value="item.code">{{ | |
45 | - item.name | |
46 | - }} | |
47 | - </a-select-option> | |
48 | - </a-select> | |
49 | - </a-form-model-item> | |
50 | - <a-form-item> | |
51 | - <a-button id="logIn" size="default" type="primary" htmlType="submit" class="login-button" :loading="loginBtn" @click.stop.prevent="handleSubmit" :disabled="loginBtn"> | |
52 | - 登 录 | |
53 | - </a-button> | |
54 | - </a-form-item> | |
55 | - </a-form-model> | |
56 | - </div> | |
57 | - | |
58 | - | |
18 | + <div id="welcome">欢迎来到华恒仓储管理系统 !</div> | |
19 | + <a-form-model ref="form" :model="model" :rules="validatorRules"> | |
20 | + <a-form-model-item required prop="username"> | |
21 | + <a-input id="name" v-model="model.username" size="default" autocomplete="off" placeholder="请输入帐户名 / admin" @blur="getWarehouse"> | |
22 | + </a-input> | |
23 | + </a-form-model-item> | |
24 | + <a-form-model-item required prop="password"> | |
25 | + <a-input id="password" v-model="model.password" size="default" type="password" autocomplete="new-password" @input="maskPassword" placeholder="请输入密码"> | |
26 | + </a-input> | |
27 | + </a-form-model-item> | |
28 | + <a-form-model-item prop="warehouseCode"> | |
29 | + <a-select | |
30 | + show-search | |
31 | + placeholder="请选择仓库" | |
32 | + option-filter-prop="label" | |
33 | + v-model="model.warehouseCode" id="warehouseCode"> | |
34 | + <a-select-option v-for="item in warehouseList" :key="item.name" :value="item.code">{{ | |
35 | + item.name | |
36 | + }} | |
37 | + </a-select-option> | |
38 | + </a-select> | |
39 | + </a-form-model-item> | |
40 | + <a-form-item> | |
41 | + <a-button id="logIn" size="default" type="primary" htmlType="submit" class="login-button" | |
42 | + :loading="loginBtn" @click.stop.prevent="handleSubmit" :disabled="loginBtn">登 录</a-button> | |
43 | + </a-form-item> | |
44 | + </a-form-model> | |
45 | + </div> | |
59 | 46 | <two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess" @cancel="stepCaptchaCancel"></two-step-captcha> |
60 | 47 | <login-select-tenant ref="loginSelect" @success="loginSelectOk" ></login-select-tenant> |
61 | 48 | |
... | ... | @@ -63,19 +50,19 @@ |
63 | 50 | </template> |
64 | 51 | |
65 | 52 | <script> |
66 | -import RouteView from "@/components/layouts/RouteView" | |
67 | -import {mixinDevice} from '@/utils/mixin.js' | |
68 | -import LoginAccount from "@views/user/LoginAccount.vue"; | |
69 | -import {mapActions} from "vuex"; | |
70 | -import {getAction} from "@api/manage"; | |
71 | -import {getWarehouseByUserCode} from "@api/api"; | |
72 | -import TwoStepCaptcha from "@comp/tools/TwoStepCaptcha.vue"; | |
73 | -import LoginSelectTenant from "@views/user/LoginSelectTenant.vue"; | |
74 | -import {timeFix} from "@/utils/util"; | |
53 | +import RouteView from '@/components/layouts/RouteView' | |
54 | +import { mixinDevice } from '@/utils/mixin.js' | |
55 | +import LoginAccount from '@views/user/LoginAccount.vue' | |
56 | +import { mapActions } from 'vuex' | |
57 | +import { getAction } from '@api/manage' | |
58 | +import { getWarehouseByUserCode } from '@api/api' | |
59 | +import TwoStepCaptcha from '@comp/tools/TwoStepCaptcha.vue' | |
60 | +import LoginSelectTenant from '@views/user/LoginSelectTenant.vue' | |
61 | +import { timeFix } from '@/utils/util' | |
75 | 62 | |
76 | 63 | export default { |
77 | - name: "UserLayout", | |
78 | - components: {LoginSelectTenant, TwoStepCaptcha}, | |
64 | + name: 'UserLayout', | |
65 | + components: { LoginSelectTenant, TwoStepCaptcha }, | |
79 | 66 | data() { |
80 | 67 | return { |
81 | 68 | requestCodeSuccess: false, |
... | ... | @@ -91,29 +78,40 @@ export default { |
91 | 78 | model: { |
92 | 79 | username: '', |
93 | 80 | password: '', |
94 | - warehouseCode: '', | |
81 | + warehouseCode: '' | |
95 | 82 | // inputCode: '' |
96 | 83 | }, |
97 | 84 | validatorRules: { |
98 | 85 | username: [ |
99 | - {required: true, message: <span style="color: red; font-weight: bold; margin-left: 45px;">请输入用户名!</span>}, | |
100 | - {validator: this.handleUsernameOrEmail} | |
86 | + { | |
87 | + required: true, | |
88 | + message: <span style="color: red; font-weight: bold; margin-left: 10%;">请输入用户名!</span> | |
89 | + }, | |
90 | + { validator: this.handleUsernameOrEmail } | |
101 | 91 | ], |
102 | - password: [{ | |
103 | - required: true, message: <span style="color: red; font-weight: bold; margin-left: 45px;">请输入密码!</span>, validator: 'click' | |
104 | - }], | |
105 | - warehouseCode: [{ | |
106 | - required: true, message: <span style="color: red; font-weight: bold; margin-left: 45px;">请选择仓库!</span>, trigger: "change" , validator: 'click' | |
107 | - }], | |
92 | + password: [ | |
93 | + { | |
94 | + required: true, | |
95 | + message: <span style="color: red; font-weight: bold; margin-left: 10%;">请输入密码!</span>, | |
96 | + validator: 'click' | |
97 | + } | |
98 | + ], | |
99 | + warehouseCode: [ | |
100 | + { | |
101 | + required: true, | |
102 | + message: <span style="color: red; font-weight: bold; margin-left: 10%;">请选择仓库!</span>, | |
103 | + trigger: 'change', | |
104 | + validator: 'click' | |
105 | + } | |
106 | + ] | |
108 | 107 | } |
109 | 108 | } |
110 | 109 | }, |
111 | 110 | created() { |
112 | - this.handleChangeCheckCode(); | |
113 | - this.getWarehouse(); | |
111 | + this.handleChangeCheckCode() | |
112 | + this.getWarehouse() | |
114 | 113 | }, |
115 | 114 | |
116 | - | |
117 | 115 | methods: { |
118 | 116 | stepCaptchaCancel() { |
119 | 117 | this.Logout().then(() => { |
... | ... | @@ -126,10 +124,10 @@ export default { |
126 | 124 | this.loginSuccess() |
127 | 125 | }, |
128 | 126 | handleSubmit() { |
129 | - this.loginBtn = true; | |
127 | + this.loginBtn = true | |
130 | 128 | // if (this.customActiveKey === 'tab1') { |
131 | - // 使用账户密码登录 | |
132 | - this.handleLogin(this.rememberMe) | |
129 | + // 使用账户密码登录 | |
130 | + this.handleLogin(this.rememberMe) | |
133 | 131 | // } else { |
134 | 132 | // //手机号码登录 |
135 | 133 | // this.$refs.plogin.handleLogin(this.rememberMe) |
... | ... | @@ -137,7 +135,7 @@ export default { |
137 | 135 | }, |
138 | 136 | // 校验失败 |
139 | 137 | validateFail() { |
140 | - this.loginBtn = false; | |
138 | + this.loginBtn = false | |
141 | 139 | }, |
142 | 140 | requestSuccess(loginResult) { |
143 | 141 | this.$refs.loginSelect.show(loginResult) |
... | ... | @@ -146,52 +144,54 @@ export default { |
146 | 144 | this.loginSuccess() |
147 | 145 | }, |
148 | 146 | loginSuccess() { |
149 | - this.$router.push({path: "/dashboard/analysis"}); | |
147 | + this.$router.push({ path: '/dashboard/analysis' }) | |
150 | 148 | this.$notification.success({ |
151 | 149 | message: '欢迎', |
152 | - description: `${timeFix()},欢迎回来`, | |
153 | - }); | |
150 | + description: `${timeFix()},欢迎回来` | |
151 | + }) | |
154 | 152 | }, |
155 | 153 | //登录后台失败 |
156 | 154 | requestFailed(err) { |
157 | - let description = ((err.response || {}).data || {}).message || err.message || "请求出现错误,请稍后再试" | |
155 | + let description = ((err.response || {}).data || {}).message || err.message || '请求出现错误,请稍后再试' | |
158 | 156 | this.$notification['error']({ |
159 | 157 | message: '登录失败', |
160 | 158 | description: description, |
161 | - duration: 4, | |
162 | - }); | |
159 | + duration: 4 | |
160 | + }) | |
163 | 161 | //账户密码登录错误后更新验证码 |
164 | 162 | if (this.customActiveKey === 'tab1' && description.indexOf('密码错误') > 0) { |
165 | 163 | this.$refs.alogin.handleChangeCheckCode() |
166 | 164 | } |
167 | - this.loginBtn = false; | |
165 | + this.loginBtn = false | |
168 | 166 | }, |
169 | 167 | ...mapActions(['Login']), |
170 | 168 | /**刷新验证码*/ |
171 | 169 | handleChangeCheckCode() { |
172 | - this.currdatetime = new Date().getTime(); | |
170 | + this.currdatetime = new Date().getTime() | |
173 | 171 | // this.model.inputCode = '' |
174 | - getAction(`/sys/randomImage/${this.currdatetime}`).then(res => { | |
175 | - if (res.success) { | |
176 | - this.randCodeImage = res.result | |
177 | - this.requestCodeSuccess = true | |
178 | - } else { | |
179 | - this.$message.error(res.message) | |
172 | + getAction(`/sys/randomImage/${this.currdatetime}`) | |
173 | + .then(res => { | |
174 | + if (res.success) { | |
175 | + this.randCodeImage = res.result | |
176 | + this.requestCodeSuccess = true | |
177 | + } else { | |
178 | + this.$message.error(res.message) | |
179 | + this.requestCodeSuccess = false | |
180 | + } | |
181 | + }) | |
182 | + .catch(() => { | |
180 | 183 | this.requestCodeSuccess = false |
181 | - } | |
182 | - }).catch(() => { | |
183 | - this.requestCodeSuccess = false | |
184 | - }) | |
184 | + }) | |
185 | 185 | }, |
186 | 186 | |
187 | 187 | getWarehouse() { |
188 | - const that = this; | |
189 | - this.querySource.username = that.model.username; | |
190 | - let obj = getWarehouseByUserCode(that.querySource); | |
191 | - obj.then((res) => { | |
192 | - that.warehouseList = res.result; | |
188 | + const that = this | |
189 | + this.querySource.username = that.model.username | |
190 | + let obj = getWarehouseByUserCode(that.querySource) | |
191 | + obj.then(res => { | |
192 | + that.warehouseList = res.result | |
193 | 193 | if (this.warehouseList != null) { |
194 | - this.model.warehouseCode = this.warehouseList[0].code; | |
194 | + this.model.warehouseCode = this.warehouseList[0].code | |
195 | 195 | } |
196 | 196 | }) |
197 | 197 | }, |
... | ... | @@ -222,7 +222,7 @@ export default { |
222 | 222 | |
223 | 223 | // 判断登录类型 |
224 | 224 | handleUsernameOrEmail(rule, value, callback) { |
225 | - const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/; | |
225 | + const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/ | |
226 | 226 | if (regex.test(value)) { |
227 | 227 | this.loginType = 0 |
228 | 228 | } else { |
... | ... | @@ -239,47 +239,51 @@ export default { |
239 | 239 | let promiseArray = [] |
240 | 240 | for (let item of arr) { |
241 | 241 | let p = new Promise((resolve, reject) => { |
242 | - this.$refs['form'].validateField(item, (err) => { | |
242 | + this.$refs['form'].validateField(item, err => { | |
243 | 243 | if (!err) { |
244 | - resolve(); | |
244 | + resolve() | |
245 | 245 | } else { |
246 | - reject(err); | |
246 | + reject(err) | |
247 | 247 | } |
248 | 248 | }) |
249 | - }); | |
249 | + }) | |
250 | 250 | promiseArray.push(p) |
251 | 251 | } |
252 | - Promise.all(promiseArray).then(() => { | |
253 | - callback() | |
254 | - }).catch(err => { | |
255 | - callback(err) | |
256 | - }) | |
252 | + Promise.all(promiseArray) | |
253 | + .then(() => { | |
254 | + callback() | |
255 | + }) | |
256 | + .catch(err => { | |
257 | + callback(err) | |
258 | + }) | |
257 | 259 | }, |
258 | 260 | acceptUsername(username) { |
259 | 261 | this.model['username'] = username |
260 | 262 | }, |
261 | 263 | // 账号密码登录 |
262 | 264 | handleLogin(rememberMe) { |
263 | - this.validateFields(['username', 'password'], (err) => { | |
265 | + this.validateFields(['username', 'password'], err => { | |
264 | 266 | if (!err) { |
265 | 267 | let loginParams = { |
266 | 268 | username: this.model.username, |
267 | 269 | password: this.maskedPassword, |
268 | 270 | warehouseCode: this.model.warehouseCode, |
269 | 271 | checkKey: this.currdatetime, |
270 | - remember_me: rememberMe, | |
272 | + remember_me: rememberMe | |
271 | 273 | } |
272 | - this.Login(loginParams).then((res) => { | |
273 | - this.$emit('success', res.result) | |
274 | - this.loginSuccess() | |
275 | - }).catch((err) => { | |
276 | - this.validateFail() | |
277 | - this.requestFailed(err) | |
278 | - this.$emit('fail', err) | |
279 | - if (err.code == 499) { | |
280 | - this.$router.push({path: "/user/systemTokenModal"}) | |
281 | - } | |
282 | - }); | |
274 | + this.Login(loginParams) | |
275 | + .then(res => { | |
276 | + this.$emit('success', res.result) | |
277 | + this.loginSuccess() | |
278 | + }) | |
279 | + .catch(err => { | |
280 | + this.validateFail() | |
281 | + this.requestFailed(err) | |
282 | + this.$emit('fail', err) | |
283 | + if (err.code == 499) { | |
284 | + this.$router.push({ path: '/user/systemTokenModal' }) | |
285 | + } | |
286 | + }) | |
283 | 287 | } else { |
284 | 288 | this.validateFail() |
285 | 289 | this.$emit('validateFail') |
... | ... | @@ -291,231 +295,234 @@ export default { |
291 | 295 | </script> |
292 | 296 | |
293 | 297 | <style lang="less" scoped> |
294 | - #userLayout { | |
295 | - height: 100%; | |
296 | - display: flex; /* 设置flex布局 */ | |
297 | - width: 100%; /* 容器宽度设置为100% */ | |
298 | - } | |
299 | - ::v-deep .ant-select-selection{ | |
300 | - border-width: 1px; | |
301 | - border-radius: 12px; | |
302 | - width: 100% !important; | |
303 | - height: 100% !important; | |
304 | - background-color: #fff; | |
305 | - background-image: url(../../assets/cangku.png); | |
306 | - padding-left: 50px; /* 留出图片的空间 */ | |
307 | - background-repeat: no-repeat; | |
308 | - background-position: 20px center; | |
309 | - background-size: 28px 28px; | |
310 | - box-shadow: 2px 5px 5px #c3c3c3; | |
311 | - font-size: 18px; | |
312 | - } | |
298 | +#userLayout { | |
299 | + height: 100%; | |
300 | + display: flex; /* 设置flex布局 */ | |
301 | + width: 100%; /* 容器宽度设置为100% */ | |
302 | +} | |
303 | +::v-deep .ant-select-selection { | |
304 | + border-width: 1px; | |
305 | + border-radius: 12px; | |
306 | + width: 100% !important; | |
307 | + height: 100% !important; | |
308 | + background-color: #fff; | |
309 | + background-image: url(../../assets/cangku.png); | |
310 | + padding-left: 50px; /* 留出图片的空间 */ | |
311 | + background-repeat: no-repeat; | |
312 | + background-position: 20px center; | |
313 | + background-size: 28px 28px; | |
314 | + box-shadow: 2px 5px 5px #c3c3c3; | |
315 | + font-size: 18px; | |
316 | +} | |
313 | 317 | |
314 | - /deep/ .ant-select-selection__rendered{ | |
315 | - margin-top: 8px; | |
316 | - } | |
318 | +/deep/ .ant-select-selection__rendered { | |
319 | + margin-top: 8px; | |
320 | +} | |
317 | 321 | |
318 | - ///deep/ .ant-select-dropdown-menu-item-selected{ | |
319 | - // font-size: 18px; | |
320 | - // height: 30px; | |
321 | - //} | |
322 | +///deep/ .ant-select-dropdown-menu-item-selected{ | |
323 | +// font-size: 18px; | |
324 | +// height: 30px; | |
325 | +//} | |
322 | 326 | |
323 | - .left-div { | |
324 | - flex: 0 0 65%; /* 左侧div宽度为容器的70% */ | |
325 | - } | |
327 | +.left-div { | |
328 | + flex: 0 0 65%; /* 左侧div宽度为容器的70% */ | |
329 | +} | |
326 | 330 | |
327 | - .right-div { | |
328 | - flex: 0 0 35%; | |
329 | - background-color: #FAFAFA; | |
330 | - button.login-button { | |
331 | - padding: 0 15px; | |
332 | - font-size: 16px; | |
333 | - height: 20px; | |
334 | - width: 60%; | |
335 | - } | |
336 | - } | |
337 | - #backgroundImg { | |
338 | - //margin-top: 80px; | |
339 | - height: 60%; | |
340 | - //margin-left: 130px; | |
341 | - background-image: url(../../assets/beijingtu.jpg); | |
331 | +.right-div { | |
332 | + flex: 0 0 35%; | |
333 | + background-color: #fafafa; | |
334 | +} | |
335 | +#backgroundImg { | |
336 | + height: 80%; | |
337 | + display: flex; | |
338 | + justify-content: center; | |
339 | + align-items: flex-start; | |
340 | + .imge { | |
341 | + height: 75%; | |
342 | 342 | background-size: contain; |
343 | 343 | background-repeat: no-repeat; |
344 | 344 | position: relative; |
345 | - left: 9%; | |
346 | - } | |
347 | - #logo { | |
348 | - height: 15%; | |
349 | - width: 100%; | |
350 | - //background-color: red; | |
351 | - //margin-left: 150px; | |
352 | - //margin-left: 11%; | |
353 | - //margin-top: 30px; | |
354 | - display: flex; | |
345 | + background-position: top center; | |
355 | 346 | } |
356 | - #logoImg { | |
357 | - width: 35%; | |
358 | - height: 100%; | |
359 | - float: right; | |
360 | - position: relative; | |
361 | - //background-color: yellow; | |
362 | - .imge{ | |
363 | - width: 50%; | |
364 | - height: 20%; | |
365 | - position: absolute; | |
366 | - right: 3%; /* 水平居右 */ | |
367 | - top: 50%; /* 从顶部偏移50% */ | |
368 | - transform: translateY(-50%); /* 向上移动自身高度的50%,实现垂直居中 */ | |
369 | - //object-fit: contain; | |
370 | - //top: 39%; | |
371 | - //left: 45%; | |
372 | - //object-fit: cover; /* 或 contain、fill、none、scale-down */ | |
373 | - //object-position: center; | |
374 | - } | |
375 | - } | |
376 | - #text{ | |
377 | - height: 100%; | |
378 | - width: 100%; | |
379 | - font-size: 1vw; | |
380 | - align-content: center; | |
381 | - color: #333333; | |
382 | - //margin-left: 5px; | |
383 | - font-family: 'Microsoft YaHei', 'SimSun', sans-serif; | |
384 | - font-weight: bold; | |
385 | - //background-color: blue; | |
386 | - } | |
387 | - #copyright{ | |
388 | - height: 40%; | |
389 | - width: 100%; | |
390 | - //margin-left: 820px; | |
391 | - //margin-top: 100px; | |
392 | - } | |
393 | - #form-container{ | |
394 | - width: 200px; /* 设置宽度 */ | |
395 | - height: 50px; /* 设置高度 */ | |
396 | - //margin-left: 820px; | |
397 | - //margin-top: 100px; | |
398 | - } | |
399 | - #company{ | |
400 | - //background-color: #0c8fcf; | |
401 | - align-content: center; | |
402 | - text-align: right; | |
403 | - color: #AC1E2B; | |
404 | - font-size: 14px; | |
405 | - width: 90%; | |
406 | - height: 95%; | |
407 | - } | |
408 | - #suggest{ | |
409 | - //background-color: yellow; | |
410 | - //width: 350px; | |
411 | - width: 100%; | |
412 | - height: 25%; | |
413 | - color: #666666; | |
414 | - font-size: 14px; | |
415 | - //text-align: center; | |
416 | - } | |
417 | - #welcome{ | |
418 | - font-size: 20px; | |
419 | - margin-top: 150px; | |
420 | - margin-left: 45px; | |
421 | - color: #333333; | |
422 | - } | |
423 | - #name{ | |
424 | - border-width: 1px; | |
425 | - border-style: solid; | |
426 | - border-radius: 12px; | |
427 | - width: 450px; | |
428 | - height: 50px; | |
429 | - margin-top: 30px; | |
430 | - margin-left: 45px; | |
431 | - background-image: url(../../assets/huiyuan.png); | |
432 | - padding-left: 60px; /* 留出图片的空间 */ | |
433 | - background-repeat: no-repeat; | |
434 | - background-position: 20px center; | |
435 | - background-size: 26px 26px; | |
436 | - font-size: 18px; | |
437 | - color: #333333; | |
438 | - box-shadow: 2px 5px 5px #c3c3c3; | |
439 | - } | |
440 | - #name::after { | |
441 | - content: ""; | |
442 | - display: inline-block; | |
443 | - width: 0; | |
444 | - height: 0; | |
445 | - overflow: hidden; | |
446 | - } | |
447 | - #name::placeholder{ | |
448 | - font-size: 18px; | |
449 | - color: #999999; | |
450 | - padding-left: 0px | |
451 | - } | |
452 | - #password{ | |
453 | - //border-color: #AC1E2B; | |
454 | - border-width: 1px; | |
455 | - border-style: solid; | |
456 | - border-radius: 12px; | |
457 | - width: 450px; | |
458 | - height: 50px; | |
459 | - margin-top: 10px; | |
460 | - margin-left: 45px; | |
461 | - background-image: url(../../assets/mima.png); | |
462 | - padding-left: 60px; /* 留出图片的空间 */ | |
463 | - background-repeat: no-repeat; | |
464 | - background-position: 20px center; | |
465 | - background-size: 26px 26px; | |
466 | - font-size: 18px; | |
467 | - color: #333333; | |
468 | - box-shadow: 2px 5px 5px #c3c3c3; | |
469 | - } | |
470 | - #password::after { | |
471 | - content: ""; | |
472 | - display: inline-block; | |
473 | - width: 0; | |
474 | - height: 0; | |
475 | - overflow: hidden; | |
476 | - } | |
477 | - #password::placeholder{ | |
478 | - font-size: 18px; | |
479 | - color: #999999; | |
480 | - padding-left: 0px | |
481 | - } | |
482 | - #warehouseCode{ | |
483 | - border-color: #ebf3fd; | |
484 | - border-width: 1px; | |
485 | - border-style: solid; | |
486 | - border-radius: 12px; | |
487 | - width: 450px; | |
488 | - height: 50px; | |
489 | - margin-top: 10px; | |
490 | - margin-left: 45px; | |
491 | - font-size: 16px; | |
492 | - text-align: center; | |
493 | - //color: #333333; | |
494 | - } | |
495 | - a-select { | |
496 | - width: 100%; | |
497 | - height: 100%; | |
498 | - font-size: 16px; | |
499 | - color: #333; | |
500 | - background-color: #fff; | |
501 | - border: 1px solid #ccc; | |
502 | - border-radius: 4px; | |
503 | - } | |
504 | - #logIn{ | |
505 | - border-color: #AC1E2B; | |
506 | - border-width: 1px; | |
507 | - border-style: solid; | |
508 | - border-radius: 12px; | |
509 | - width: 450px; | |
510 | - height: 50px; | |
511 | - margin-top: 10px; | |
512 | - margin-left: 45px; | |
513 | - font-size: 26px; | |
514 | - align-items: center; | |
515 | - justify-content: center; | |
516 | - display: flex; | |
517 | - color: #ebf3fd; | |
518 | - background-color: red; | |
347 | +} | |
348 | +#logo { | |
349 | + height: 15%; | |
350 | + width: 100%; | |
351 | + //background-color: red; | |
352 | + //margin-left: 150px; | |
353 | + //margin-left: 11%; | |
354 | + //margin-top: 30px; | |
355 | + display: flex; | |
356 | +} | |
357 | +#logoImg { | |
358 | + width: 35%; | |
359 | + height: 100%; | |
360 | + float: right; | |
361 | + position: relative; | |
362 | + //background-color: yellow; | |
363 | + .imge { | |
364 | + width: 60%; | |
365 | + height: 20%; | |
366 | + position: absolute; | |
367 | + right: 3%; /* 水平居右 */ | |
368 | + top: 50%; /* 从顶部偏移50% */ | |
369 | + transform: translateY(-50%); /* 向上移动自身高度的50%,实现垂直居中 */ | |
370 | + //object-fit: contain; | |
371 | + //top: 39%; | |
372 | + //left: 45%; | |
373 | + //object-fit: cover; /* 或 contain、fill、none、scale-down */ | |
374 | + //object-position: center; | |
519 | 375 | } |
520 | - | |
376 | +} | |
377 | +#text { | |
378 | + height: 100%; | |
379 | + width: 100%; | |
380 | + font-size: 1vw; | |
381 | + align-content: center; | |
382 | + color: #333333; | |
383 | + //margin-left: 5px; | |
384 | + font-family: 'Microsoft YaHei', 'SimSun', sans-serif; | |
385 | + font-weight: bold; | |
386 | + //background-color: blue; | |
387 | +} | |
388 | +#copyright { | |
389 | + height: 5%; | |
390 | + width: stretch; | |
391 | + position: fixed; | |
392 | + // transform: translateX(-50%); | |
393 | + //margin-left: 820px; | |
394 | + //margin-top: 100px; | |
395 | +} | |
396 | +#form-container { | |
397 | + width: 200px; /* 设置宽度 */ | |
398 | + height: 50px; /* 设置高度 */ | |
399 | + //margin-left: 820px; | |
400 | + //margin-top: 100px; | |
401 | +} | |
402 | +#company { | |
403 | + align-content: center; | |
404 | + text-align: center; | |
405 | + color: #ac1e2b; | |
406 | + height: 100%; | |
407 | + width: 100%; | |
408 | + font-size: 0.9vw; | |
409 | + align-content: baseline; | |
410 | + font-family: 'Microsoft YaHei', 'SimSun', sans-serif; | |
411 | +} | |
412 | +#welcome { | |
413 | + width: 85%; | |
414 | + height: 3vw; | |
415 | + margin-top: 25%; | |
416 | + margin-left: 50%; | |
417 | + transform: translateX(-48%); | |
418 | + color: #333333; | |
419 | + font-size: 1.5vw; | |
420 | + align-content: center; | |
421 | + font-family: 'Microsoft YaHei', 'SimSun', sans-serif; | |
422 | +} | |
423 | +#name { | |
424 | + border-width: 1px; | |
425 | + border-style: solid; | |
426 | + border-radius: 0.6vw; | |
427 | + width: 85%; | |
428 | + height: 3vw; | |
429 | + line-height: 3vw; | |
430 | + margin-top: 2.5vw; | |
431 | + margin-left: 8%; | |
432 | + background-image: url(../../assets/huiyuan.png); | |
433 | + padding-left: 12%; /* 留出图片的空间 */ | |
434 | + background-repeat: no-repeat; | |
435 | + background-position: 20px center; | |
436 | + background-size: 26px 26px; | |
437 | + font-size: 1vw; | |
438 | + color: #333333; | |
439 | + box-shadow: 2px 5px 5px #c3c3c3; | |
440 | +} | |
441 | +#name::after { | |
442 | + content: ''; | |
443 | + display: inline-block; | |
444 | + width: 0; | |
445 | + height: 0; | |
446 | + overflow: hidden; | |
447 | +} | |
448 | +#name::placeholder { | |
449 | + font-size: 18px; | |
450 | + color: #999999; | |
451 | + padding-left: 0px; | |
452 | +} | |
453 | +#password { | |
454 | + //border-color: #AC1E2B; | |
455 | + border-width: 1px; | |
456 | + border-style: solid; | |
457 | + border-radius: 0.6vw; | |
458 | + width: 85%; | |
459 | + height: 3vw; | |
460 | + line-height: 3vw; | |
461 | + margin-top: 0.5vw; | |
462 | + margin-left: 8%; | |
463 | + background-image: url(../../assets/mima.png); | |
464 | + padding-left: 12%; /* 留出图片的空间 */ | |
465 | + background-repeat: no-repeat; | |
466 | + background-position: 20px center; | |
467 | + background-size: 26px 26px; | |
468 | + font-size: 1vw; | |
469 | + color: #333333; | |
470 | + box-shadow: 2px 5px 5px #c3c3c3; | |
471 | +} | |
472 | +#password::after { | |
473 | + content: ''; | |
474 | + display: inline-block; | |
475 | + width: 0; | |
476 | + height: 0; | |
477 | + overflow: hidden; | |
478 | +} | |
479 | +#password::placeholder { | |
480 | + font-size: 18px; | |
481 | + color: #999999; | |
482 | + padding-left: 0px; | |
483 | +} | |
484 | +/deep/ .ant-form-item-control{ | |
485 | + line-height: 65px; | |
486 | +} | |
487 | +#warehouseCode { | |
488 | + border-color: #ebf3fd; | |
489 | + border-width: 1px; | |
490 | + border-style: solid; | |
491 | + border-radius: 0.6vw; | |
492 | + width: 85%; | |
493 | + height: 3vw; | |
494 | + line-height: 3vw; | |
495 | + margin-top: 0.5vw; | |
496 | + margin-left: 8%; | |
497 | + font-size: 1vw; | |
498 | + text-align: center; | |
499 | + //color: #333333; | |
500 | +} | |
501 | +a-select { | |
502 | + width: 100%; | |
503 | + height: 100%; | |
504 | + font-size: 16px; | |
505 | + color: #333; | |
506 | + background-color: #fff; | |
507 | + border: 1px solid #ccc; | |
508 | + border-radius: 4px; | |
509 | +} | |
510 | +#logIn { | |
511 | + border-color: #ac1e2b; | |
512 | + border-width: 1px; | |
513 | + border-style: solid; | |
514 | + border-radius: 0.6vw; | |
515 | + width: 85%; | |
516 | + height: 3vw; | |
517 | + line-height: 3vw; | |
518 | + margin-top: 0.5vw; | |
519 | + margin-left: 8%; | |
520 | + font-size: 1.8vw; | |
521 | + align-items: center; | |
522 | + justify-content: center; | |
523 | + display: flex; | |
524 | + color: #ebf3fd; | |
525 | + background-color: red; | |
526 | + box-shadow: 2px 5px 5px #c3c3c3; | |
527 | +} | |
521 | 528 | </style> |
522 | 529 | \ No newline at end of file |
... | ... |