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 <template> 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 </div> 116 </div>
52 </template> 117 </template>
53 -<script>  
54 118
  119 +<script>
55 export default { 120 export default {
56 name: "Login", 121 name: "Login",
57 data: function () { 122 data: function () {
@@ -77,6 +142,7 @@ export default { @@ -77,6 +142,7 @@ export default {
77 }, 142 },
78 ], 143 ],
79 }, 144 },
  145 + passwordType: 'password',
80 capsTooltip: false, 146 capsTooltip: false,
81 loading: false, 147 loading: false,
82 showDialog: false, 148 showDialog: false,
@@ -132,6 +198,30 @@ export default { @@ -132,6 +198,30 @@ export default {
132 }; 198 };
133 }, 199 },
134 methods: { 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 checkCapslock(e) { 225 checkCapslock(e) {
136 const { key } = e; 226 const { key } = e;
137 this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z"; 227 this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
@@ -159,119 +249,511 @@ export default { @@ -159,119 +249,511 @@ export default {
159 }); 249 });
160 }, 250 },
161 handlemyLogin() { 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 </script> 286 </script>
  287 +
198 <style lang="scss" scoped> 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 width: 100%; 306 width: 100%;
208 height: 100%; 307 height: 100%;
  308 + pointer-events: none;
  309 + z-index: 1;
209 } 310 }
210 -.container { 311 +
  312 +// 浮动粒子效果
  313 +.particles {
  314 + position: absolute;
211 width: 100%; 315 width: 100%;
212 height: 100%; 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 width: 100%; 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 font-size: 16px; 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 -</style> 759 -</style>
  760 +</style>
278 \ No newline at end of file 761 \ No newline at end of file