antissoft / lvqianmeiye_ERP

Commit 3744e85eb2b67653c69db9748bf64aab0b6cbdc0

Authored by “wangming”
1 parent 850bf205

Revamp login page layout and design; enhance user experience with animated backg… 

…round, improved form structure, and responsive design adjustments.
Inline Side-by-side
Showing 1 changed file with 620 additions and 138 deletions
antis-ncc-admin/src/views/login/index.vue
  View file @3744e85
1 1 <template>
2   - <div class="container">
3   - <el-container>
4   - <el-aside style="width: 50%; background-color: #fff">
5   - <img src="../../assets/images/3.png" alt="" />
6   - </el-aside>
7   - <el-main>
8   - <p>绿纤ERP</p>
9   - <!-- <span>一体化协同服务</span> -->
10   - <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
11   - <ul>
12   - <li>
13   - <el-form-item prop="account">
14   - <img src="../../assets/images/1.png" alt="" />
15   - <input
16   - type="text"
17   - name="account"
18   - v-model="loginForm.account"
19   - ref="account"
20   - tabindex="1"
21   - :placeholder="$t('login.username')"
22   - />
23   - </el-form-item>
24   - </li>
25   - <li>
26   - <el-form-item prop="password">
27   - <img src="../../assets/images/2.png" alt="" />
28   - <input
29   - type="password"
30   - name="password"
31   - v-model="loginForm.password"
32   - ref="password"
33   - tabindex="2"
34   - :placeholder="$t('login.password')"
35   - />
36   - </el-form-item>
37   - </li>
38   - <li class="bottom">
39   - <el-button
40   - :loading="loading"
41   - type="primary"
42   - round
43   - @click.native.prevent="handleLogin"
44   - >{{ $t("login.logIn") }}</el-button
  2 + <div class="login-container">
  3 + <!-- 动画背景层 -->
  4 + <div class="animated-bg">
  5 + <!-- 浮动粒子 -->
  6 + <div class="particles">
  7 + <div class="particle" v-for="n in 15" :key="n" :style="getParticleStyle(n)"></div>
  8 + </div>
  9 +
  10 + <!-- 渐变波浪 -->
  11 + <div class="gradient-waves">
  12 + <div class="wave wave-1"></div>
  13 + <div class="wave wave-2"></div>
  14 + <div class="wave wave-3"></div>
  15 + </div>
  16 + </div>
  17 +
  18 + <div class="login-wrapper">
  19 + <!-- 左侧品牌区域 -->
  20 + <div class="brand-section">
  21 + <div class="brand-content">
  22 + <div class="system-section">
  23 + <h1 class="system-title">绿纤ERP</h1>
  24 + <p class="system-desc">智能化企业资源管理平台</p>
  25 + </div>
  26 +
  27 + <div class="data-visualization">
  28 + <div class="chart-container">
  29 + <div class="chart-item">
  30 + <div class="chart-bar" style="height: 60%"></div>
  31 + <div class="chart-bar" style="height: 80%"></div>
  32 + <div class="chart-bar" style="height: 45%"></div>
  33 + <div class="chart-bar" style="height: 90%"></div>
  34 + <div class="chart-bar" style="height: 70%"></div>
  35 + </div>
  36 + <p class="chart-label">实时数据分析</p>
  37 + </div>
  38 + </div>
  39 +
  40 + <div class="core-feature">
  41 + <div class="feature-highlight">
  42 + <i class="el-icon-s-data"></i>
  43 + <span>数据驱动决策</span>
  44 + </div>
  45 + </div>
  46 + </div>
  47 + </div>
  48 +
  49 + <!-- 右侧登录表单 -->
  50 + <div class="form-section">
  51 + <div class="login-form-wrapper">
  52 + <div class="form-header">
  53 + <h2>欢迎登录</h2>
  54 + <p>请输入您的账号信息</p>
  55 + </div>
  56 +
  57 + <el-form
  58 + ref="loginForm"
  59 + :model="loginForm"
  60 + :rules="loginRules"
  61 + class="login-form"
  62 + @keyup.enter.native="handleLogin"
  63 + >
  64 + <el-form-item prop="account">
  65 + <el-input
  66 + ref="account"
  67 + v-model="loginForm.account"
  68 + :placeholder="$t('login.username')"
  69 + name="account"
  70 + type="text"
  71 + tabindex="1"
  72 + autocomplete="on"
  73 + size="large"
  74 + prefix-icon="el-icon-user"
  75 + />
  76 + </el-form-item>
  77 +
  78 + <el-form-item prop="password">
  79 + <el-input
  80 + ref="password"
  81 + v-model="loginForm.password"
  82 + :type="passwordType"
  83 + :placeholder="$t('login.password')"
  84 + name="password"
  85 + tabindex="2"
  86 + autocomplete="on"
  87 + size="large"
  88 + prefix-icon="el-icon-lock"
45 89 >
46   - </li>
47   - </ul>
48   - </el-form>
49   - </el-main>
50   - </el-container>
  90 + <i
  91 + slot="suffix"
  92 + :class="passwordType === 'password' ? 'el-icon-view' : 'el-icon-hide'"
  93 + class="show-pwd"
  94 + @click="showPwd"
  95 + ></i>
  96 + </el-input>
  97 + </el-form-item>
  98 +
  99 + <el-button
  100 + :loading="loading"
  101 + type="primary"
  102 + size="large"
  103 + class="login-btn"
  104 + @click.native.prevent="handleLogin"
  105 + >
  106 + {{ loading ? '登录中...' : $t("login.logIn") }}
  107 + </el-button>
  108 + </el-form>
  109 +
  110 + <div class="footer">
  111 + <p>© 2024 绿纤ERP. All rights reserved.</p>
  112 + </div>
  113 + </div>
  114 + </div>
  115 + </div>
51 116 </div>
52 117 </template>
53   -<script>
54 118  
  119 +<script>
55 120 export default {
56 121 name: "Login",
57 122 data: function () {
... ... @@ -77,6 +142,7 @@ export default {
77 142 },
78 143 ],
79 144 },
  145 + passwordType: 'password',
80 146 capsTooltip: false,
81 147 loading: false,
82 148 showDialog: false,
... ... @@ -132,6 +198,30 @@ export default {
132 198 };
133 199 },
134 200 methods: {
  201 + getParticleStyle(index) {
  202 + const size = Math.random() * 4 + 2; // 2-6px
  203 + const left = Math.random() * 100; // 0-100%
  204 + const animationDelay = Math.random() * 20; // 0-20s
  205 + const animationDuration = Math.random() * 10 + 15; // 15-25s
  206 +
  207 + return {
  208 + width: `${size}px`,
  209 + height: `${size}px`,
  210 + left: `${left}%`,
  211 + animationDelay: `${animationDelay}s`,
  212 + animationDuration: `${animationDuration}s`
  213 + };
  214 + },
  215 + showPwd() {
  216 + if (this.passwordType === 'password') {
  217 + this.passwordType = ''
  218 + } else {
  219 + this.passwordType = 'password'
  220 + }
  221 + this.$nextTick(() => {
  222 + this.$refs.password.focus()
  223 + })
  224 + },
135 225 checkCapslock(e) {
136 226 const { key } = e;
137 227 this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
... ... @@ -159,119 +249,511 @@ export default {
159 249 });
160 250 },
161 251 handlemyLogin() {
162   - //this.$store.dispatch('user/logout')
163   - console.log("开始执行单点登录!");
164   - if (this.loading) return;
165   - let username = this.$route.query.username;
166   - let hospitalname=this.$route.query.hospitalname;
167   - console.log("username:"+username);
168   - if (username != null && username != "") {
169   - this.loginForm.account = username;
170   - this.loginForm.hospitalname =hospitalname;
171   - this.loading = true;
172   - this.$store.commit("user/SET_LOGIN_LOADING", true);
173   - this.$store
174   - .dispatch("user/pislogin", this.loginForm)
175   - .then(() => {
176   - this.$router.push({
177   - path: this.redirect || "/home",
178   - query: this.otherQuery,
  252 + //this.$store.dispatch('user/logout')
  253 + console.log("开始执行单点登录!");
  254 + if (this.loading) return;
  255 + let username = this.$route.query.username;
  256 + let hospitalname=this.$route.query.hospitalname;
  257 + console.log("username:"+username);
  258 + if (username != null && username != "") {
  259 + this.loginForm.account = username;
  260 + this.loginForm.hospitalname =hospitalname;
  261 + this.loading = true;
  262 + this.$store.commit("user/SET_LOGIN_LOADING", true);
  263 + this.$store
  264 + .dispatch("user/pislogin", this.loginForm)
  265 + .then(() => {
  266 + this.$router.push({
  267 + path: this.redirect || "/home",
  268 + query: this.otherQuery,
  269 + });
  270 + })
  271 + .catch(() => {
  272 + this.$store.commit("user/SET_LOGIN_LOADING", false);
179 273 });
180   - })
181   - .catch(() => {
182   - this.$store.commit("user/SET_LOGIN_LOADING", false);
183   - });
184   - }
185   - },
186   - },
187   -
188   - getOtherQuery(query) {
189   - return Object.keys(query).reduce((acc, cur) => {
190   - if (cur !== "redirect") {
191   - acc[cur] = query[cur];
192 274 }
193   - return acc;
194   - }, {});
  275 + },
  276 + getOtherQuery(query) {
  277 + return Object.keys(query).reduce((acc, cur) => {
  278 + if (cur !== "redirect") {
  279 + acc[cur] = query[cur];
  280 + }
  281 + return acc;
  282 + }, {});
  283 + },
195 284 },
196 285 };
197 286 </script>
  287 +
198 288 <style lang="scss" scoped>
199   -* {
200   - margin: 0;
201   - padding: 0;
202   - list-style: none;
203   - box-sizing: border-box;
  289 +.login-container {
  290 + width: 100vw;
  291 + height: 100vh;
  292 + background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  293 + display: flex;
  294 + align-items: center;
  295 + justify-content: center;
  296 + font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  297 + position: relative;
  298 + overflow: hidden;
204 299 }
205   -html,
206   -body {
  300 +
  301 +// 动画背景层
  302 +.animated-bg {
  303 + position: absolute;
  304 + top: 0;
  305 + left: 0;
207 306 width: 100%;
208 307 height: 100%;
  308 + pointer-events: none;
  309 + z-index: 1;
209 310 }
210   -.container {
  311 +
  312 +// 浮动粒子效果
  313 +.particles {
  314 + position: absolute;
211 315 width: 100%;
212 316 height: 100%;
213   - background-image: url(../../assets/images/4.jpg);
214   - background-size: 100% 100%;
215   - padding-top: 10%;
216   - box-sizing: border-box;
  317 +
  318 + .particle {
  319 + position: absolute;
  320 + background: rgba(255, 255, 255, 0.6);
  321 + border-radius: 50%;
  322 + animation: floatUp linear infinite;
  323 + will-change: transform, opacity;
  324 +
  325 + &:nth-child(odd) {
  326 + background: rgba(52, 152, 219, 0.4);
  327 + }
  328 +
  329 + &:nth-child(3n) {
  330 + background: rgba(155, 89, 182, 0.3);
  331 + }
  332 + }
217 333 }
218 334  
219   -.container > .el-container {
220   - width: 50%;
221   - max-width: 900px;
222   - min-width: 600px;
223   - margin: 0 auto;
224   - background-color: #fff;
225   - border-radius: 20px;
226   - padding: 50px 0;
  335 +@keyframes floatUp {
  336 + 0% {
  337 + transform: translateY(100vh) rotate(0deg);
  338 + opacity: 0;
  339 + }
  340 + 10% {
  341 + opacity: 1;
  342 + }
  343 + 90% {
  344 + opacity: 1;
  345 + }
  346 + 100% {
  347 + transform: translateY(-100px) rotate(360deg);
  348 + opacity: 0;
  349 + }
227 350 }
228   -.el-aside {
229   - text-align: center;
230   - padding: 40px;
  351 +
  352 +// 渐变波浪效果
  353 +.gradient-waves {
  354 + position: absolute;
  355 + width: 100%;
  356 + height: 100%;
  357 +
  358 + .wave {
  359 + position: absolute;
  360 + width: 200%;
  361 + height: 200%;
  362 + background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  363 + border-radius: 50%;
  364 + animation: waveFloat ease-in-out infinite;
  365 + will-change: transform;
  366 + }
  367 +
  368 + .wave-1 {
  369 + top: -50%;
  370 + left: -50%;
  371 + animation-duration: 20s;
  372 + animation-delay: 0s;
  373 + }
  374 +
  375 + .wave-2 {
  376 + top: -30%;
  377 + right: -50%;
  378 + animation-duration: 25s;
  379 + animation-delay: -5s;
  380 + background: radial-gradient(ellipse at center, rgba(52, 152, 219, 0.08) 0%, transparent 70%);
  381 + }
  382 +
  383 + .wave-3 {
  384 + bottom: -50%;
  385 + left: -30%;
  386 + animation-duration: 30s;
  387 + animation-delay: -10s;
  388 + background: radial-gradient(ellipse at center, rgba(155, 89, 182, 0.06) 0%, transparent 70%);
  389 + }
231 390 }
232   -.el-main {
233   - padding-right: 80px;
  391 +
  392 +@keyframes waveFloat {
  393 + 0%, 100% {
  394 + transform: translate(0, 0) rotate(0deg) scale(1);
  395 + }
  396 + 25% {
  397 + transform: translate(20px, -20px) rotate(90deg) scale(1.1);
  398 + }
  399 + 50% {
  400 + transform: translate(-10px, 10px) rotate(180deg) scale(0.9);
  401 + }
  402 + 75% {
  403 + transform: translate(-20px, -10px) rotate(270deg) scale(1.05);
  404 + }
234 405 }
235   -.el-aside img {
  406 +
  407 +.login-wrapper {
236 408 width: 100%;
  409 + max-width: 1000px;
  410 + height: 600px;
  411 + background: rgba(255, 255, 255, 0.95);
  412 + backdrop-filter: blur(10px);
  413 + border-radius: 16px;
  414 + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  415 + display: flex;
  416 + overflow: hidden;
  417 + position: relative;
  418 + z-index: 2;
237 419 }
238   -.el-main p {
239   - font-size: 25px;
240   - margin-bottom: 10px;
241   - margin-top: 40px;
242   -}
243   -.el-main > span {
244   - color: #bfbfbf;
245   - font-size: 20px;
  420 +
  421 +// 左侧品牌区域
  422 +.brand-section {
  423 + flex: 1;
  424 + background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  425 + color: #fff;
  426 + display: flex;
  427 + align-items: center;
  428 + justify-content: center;
  429 + position: relative;
  430 +
  431 + .brand-content {
  432 + position: relative;
  433 + z-index: 1;
  434 + text-align: center;
  435 + padding: 40px;
  436 + width: 100%;
  437 + }
  438 +
  439 + .system-section {
  440 + margin-bottom: 50px;
  441 +
  442 + .system-title {
  443 + font-size: 42px;
  444 + font-weight: 700;
  445 + margin-bottom: 12px;
  446 + color: #fff;
  447 + letter-spacing: 2px;
  448 + }
  449 +
  450 + .system-desc {
  451 + font-size: 16px;
  452 + opacity: 0.85;
  453 + font-weight: 300;
  454 + color: #ecf0f1;
  455 + }
  456 + }
  457 +
  458 + .data-visualization {
  459 + margin-bottom: 40px;
  460 +
  461 + .chart-container {
  462 + .chart-item {
  463 + display: flex;
  464 + align-items: end;
  465 + justify-content: center;
  466 + gap: 8px;
  467 + height: 80px;
  468 + margin-bottom: 16px;
  469 +
  470 + .chart-bar {
  471 + width: 12px;
  472 + background: linear-gradient(to top, #3498db, #5dade2);
  473 + border-radius: 6px 6px 0 0;
  474 + animation: chartGrow 2s ease-out;
  475 + box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
  476 + }
  477 + }
  478 +
  479 + .chart-label {
  480 + font-size: 14px;
  481 + color: #bdc3c7;
  482 + margin: 0;
  483 + font-weight: 400;
  484 + }
  485 + }
  486 + }
  487 +
  488 + .core-feature {
  489 + .feature-highlight {
  490 + display: flex;
  491 + align-items: center;
  492 + justify-content: center;
  493 + gap: 12px;
  494 + padding: 16px 24px;
  495 + background: rgba(52, 152, 219, 0.2);
  496 + border: 1px solid rgba(52, 152, 219, 0.3);
  497 + border-radius: 12px;
  498 + transition: all 0.3s ease;
  499 +
  500 + &:hover {
  501 + background: rgba(52, 152, 219, 0.3);
  502 + transform: translateY(-2px);
  503 + box-shadow: 0 8px 20px rgba(52, 152, 219, 0.2);
  504 + }
  505 +
  506 + i {
  507 + font-size: 24px;
  508 + color: #3498db;
  509 + }
  510 +
  511 + span {
  512 + font-size: 16px;
  513 + font-weight: 500;
  514 + color: #ecf0f1;
  515 + }
  516 + }
  517 + }
246 518 }
247   -.el-main ul {
248   - margin-top: 70px;
  519 +
  520 +@keyframes chartGrow {
  521 + from {
  522 + height: 0;
  523 + opacity: 0;
  524 + }
  525 + to {
  526 + opacity: 1;
  527 + }
249 528 }
250   -.el-main ul li {
251   - border-bottom: 1px solid #eeeeee;
252   - padding-bottom: 10px;
253   - margin: 20px 0;
  529 +
  530 +// 右侧表单区域
  531 +.form-section {
  532 + flex: 1;
  533 + display: flex;
  534 + align-items: center;
  535 + justify-content: center;
  536 + padding: 40px;
254 537 }
255   -.el-main ul .bottom {
256   - border-bottom: none;
257   - margin-top: 60px;
  538 +
  539 +.login-form-wrapper {
  540 + width: 100%;
  541 + max-width: 360px;
  542 +
  543 + .form-header {
  544 + text-align: center;
  545 + margin-bottom: 40px;
  546 +
  547 + h2 {
  548 + font-size: 28px;
  549 + font-weight: 600;
  550 + color: #262626;
  551 + margin-bottom: 8px;
  552 + }
  553 +
  554 + p {
  555 + font-size: 14px;
  556 + color: #8c8c8c;
  557 + }
  558 + }
258 559 }
259   -.el-main ul li img {
260   - width: 25px;
261   - vertical-align: middle;
  560 +
  561 +.login-form {
  562 + .el-form-item {
  563 + margin-bottom: 20px;
  564 + }
  565 +
  566 + .el-input {
  567 + ::v-deep .el-input__inner {
  568 + height: 48px;
  569 + padding-left: 44px;
  570 + padding-right: 44px;
  571 + border: 1px solid #d9d9d9;
  572 + border-radius: 8px;
  573 + font-size: 14px;
  574 + transition: all 0.3s ease;
  575 +
  576 + &:focus {
  577 + border-color: #1890ff;
  578 + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
  579 + }
  580 +
  581 + &:hover {
  582 + border-color: #40a9ff;
  583 + }
  584 + }
  585 +
  586 + ::v-deep .el-input__prefix {
  587 + left: 12px;
  588 + top: 50%;
  589 + transform: translateY(-50%);
  590 +
  591 + .el-input__icon {
  592 + color: #bfbfbf;
  593 + font-size: 16px;
  594 + line-height: 1;
  595 + }
  596 + }
  597 +
  598 + ::v-deep .el-input__suffix {
  599 + right: 12px;
  600 + height: 48px;
  601 + display: flex;
  602 + align-items: center;
  603 + justify-content: center;
  604 + }
  605 +
  606 + ::v-deep .el-input__suffix-inner {
  607 + display: flex;
  608 + align-items: center;
  609 + justify-content: center;
  610 + height: 100%;
  611 + }
  612 + }
  613 +
  614 + .show-pwd {
  615 + color: #bfbfbf;
  616 + cursor: pointer;
  617 + font-size: 16px;
  618 + line-height: 1;
  619 + display: flex;
  620 + align-items: center;
  621 + justify-content: center;
  622 + width: 20px;
  623 + height: 20px;
  624 +
  625 + &:hover {
  626 + color: #1890ff;
  627 + }
  628 + }
262 629 }
263   -.el-main ul li input {
264   - width: 80%;
265   - border: none;
266   - outline: none;
267   - padding-left: 10px;
  630 +
  631 +.login-btn {
  632 + width: 100%;
  633 + height: 48px;
268 634 font-size: 16px;
  635 + font-weight: 500;
  636 + border-radius: 8px;
  637 + background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  638 + border: none;
  639 + margin-top: 8px;
  640 +
  641 + &:hover {
  642 + background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
  643 + }
269 644 }
270   -.el-main ul li button {
271   - width: 90%;
272   - color: #fff;
273   - display: block;
274   - margin: 20px auto;
275   - font-size: 20px;
  645 +
  646 +.footer {
  647 + margin-top: 32px;
  648 + text-align: center;
  649 +
  650 + p {
  651 + font-size: 12px;
  652 + color: #bfbfbf;
  653 + }
  654 +}
  655 +
  656 +// 响应式设计和性能优化
  657 +@media (max-width: 768px) {
  658 + .login-wrapper {
  659 + flex-direction: column;
  660 + height: auto;
  661 + min-height: 100vh;
  662 + border-radius: 0;
  663 + max-width: none;
  664 + }
  665 +
  666 + .brand-section {
  667 + flex: none;
  668 + height: 200px;
  669 +
  670 + .brand-content {
  671 + padding: 20px;
  672 + }
  673 +
  674 + .system-section {
  675 + margin-bottom: 20px;
  676 +
  677 + .system-title {
  678 + font-size: 32px;
  679 + }
  680 +
  681 + .system-desc {
  682 + font-size: 14px;
  683 + }
  684 + }
  685 +
  686 + .data-visualization {
  687 + margin-bottom: 20px;
  688 +
  689 + .chart-container .chart-item {
  690 + height: 60px;
  691 +
  692 + .chart-bar {
  693 + width: 8px;
  694 + }
  695 + }
  696 + }
  697 + }
  698 +
  699 + .form-section {
  700 + padding: 30px 20px;
  701 + }
  702 +
  703 + // 移动端动画优化
  704 + .particles .particle {
  705 + display: none; // 移动端隐藏粒子以提升性能
  706 + }
  707 +
  708 + .gradient-waves .wave {
  709 + animation-duration: 40s; // 减慢动画速度
  710 + }
  711 +}
  712 +
  713 +@media (max-width: 480px) {
  714 + .login-container {
  715 + padding: 0;
  716 + }
  717 +
  718 + .form-section {
  719 + padding: 20px 16px;
  720 + }
  721 +
  722 + .login-form-wrapper {
  723 + max-width: none;
  724 + }
  725 +
  726 + // 小屏幕进一步优化
  727 + .gradient-waves {
  728 + display: none; // 小屏幕完全隐藏波浪动画
  729 + }
  730 +}
  731 +
  732 +// 减少动画的媒体查询 - 尊重用户偏好
  733 +@media (prefers-reduced-motion: reduce) {
  734 + .particles .particle,
  735 + .gradient-waves .wave,
  736 + .chart-bar {
  737 + animation: none;
  738 + }
  739 +
  740 + .brand-section .core-feature .feature-highlight {
  741 + transition: none;
  742 + }
  743 +}
  744 +
  745 +// 高性能设备增强动画
  746 +@media (min-width: 1200px) and (min-height: 800px) {
  747 + .particles {
  748 + .particle {
  749 + &:nth-child(5n) {
  750 + background: rgba(46, 204, 113, 0.3);
  751 + }
  752 +
  753 + &:nth-child(7n) {
  754 + background: rgba(241, 196, 15, 0.3);
  755 + }
  756 + }
  757 + }
276 758 }
277 759 -</style>
  760 +</style>
278 761 \ No newline at end of file
... ...