wms / wms4_zhongputaicang · Commits

Commit 73e7bb3c695aa34e667f0c64d497c863bfa0b55b

Authored by 谭毅彬
1 parent f3022266
develop

首页样式优化

Inline Side-by-side
Showing 1 changed file with 343 additions and 336 deletions
ant-design-vue-jeecg/src/components/layouts/UserLayoutLogin.vue
  View file @73e7bb3
... ... @@ -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 &copy; 2024 华恒焊接股份有限公司
18   - </div>
  14 + <div id="company">Copyright &copy; 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   - 登&nbsp;录
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
... ...