1006 lines
35 KiB
Vue
1006 lines
35 KiB
Vue
<template>
|
||
<div class="login-container">
|
||
<!-- 几何图形装饰 -->
|
||
<div class="geometric-shape hexagon-1"></div>
|
||
<div class="geometric-shape hexagon-2"></div>
|
||
<div class="geometric-shape circle-1"></div>
|
||
<div class="geometric-shape circle-2"></div>
|
||
|
||
<!-- 小行星 -->
|
||
<div class="asteroid asteroid-1"></div>
|
||
<div class="asteroid asteroid-2"></div>
|
||
<div class="asteroid asteroid-3"></div>
|
||
<div class="asteroid asteroid-4"></div>
|
||
<div class="asteroid asteroid-5"></div>
|
||
|
||
<!-- 月亮 -->
|
||
<div class="moon">
|
||
<svg viewBox="0 0 1024 1024" width="120" height="120">
|
||
<circle cx="512" cy="512" r="400" fill="#FFF394" opacity="0.9"/>
|
||
<circle cx="400" cy="400" r="80" fill="#002770" opacity="0.3"/>
|
||
<circle cx="550" cy="450" r="60" fill="#002770" opacity="0.2"/>
|
||
<circle cx="480" cy="580" r="50" fill="#002770" opacity="0.25"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 流星 -->
|
||
<div class="meteor meteor-1"></div>
|
||
<div class="meteor meteor-2"></div>
|
||
<div class="meteor meteor-3"></div>
|
||
|
||
<!-- 连接线 -->
|
||
<svg class="connection-lines" width="100%" height="100%">
|
||
<defs>
|
||
<linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#FFF394;stop-opacity:0.6" />
|
||
<stop offset="100%" style="stop-color:#FFF394;stop-opacity:0.2" />
|
||
</linearGradient>
|
||
</defs>
|
||
<line x1="10%" y1="20%" x2="30%" y2="40%" class="connection-line" />
|
||
<line x1="70%" y1="15%" x2="85%" y2="35%" class="connection-line" />
|
||
<line x1="20%" y1="60%" x2="40%" y2="80%" class="connection-line" />
|
||
<line x1="60%" y1="70%" x2="80%" y2="85%" class="connection-line" />
|
||
</svg>
|
||
|
||
<!-- 光点粒子 -->
|
||
<div class="particle particle-1"></div>
|
||
<div class="particle particle-2"></div>
|
||
<div class="particle particle-3"></div>
|
||
<div class="particle particle-4"></div>
|
||
<div class="particle particle-5"></div>
|
||
|
||
<!-- 地球轨道 -->
|
||
<div class="earth-orbit orbit-1"></div>
|
||
<div class="earth-orbit orbit-2"></div>
|
||
|
||
<!-- 地球 -->
|
||
<div class="earth">
|
||
<svg viewBox="0 0 1040 1024" width="300" height="300">
|
||
<path d="M518.24 427.728c3.904-5.84 10-9.648 14.864-14.832-0.64 0.656-1.296 1.312-1.952 2.016 4.864-4.96 17.76-10.672 19.952-17.568 1.28-3.68-4.384-8.576-1.376-13.776 2.256-4.064 7.696-2.464 9.888-5.056 3.072-3.776 3.488-10.08 6.72-14.032 3.328-4.096 9.744-4.64 13.136-7.712 7.792-7.264 9.904-15.376 19.056-19.776 8.688-5.856 17.76-15.952 28.704-11.392-3.968 4.592-13.936 7.376-16.864 11.648-1.936 2.944 14.928 1.28 17.12 0.448 9.568-3.52 17.104-10.72 25.12-16.032 13.792-9.2 29.76-9.696 46.464-6.32 5.12 1.056-9.232-19.856-10.784-21.584-5.76-6.72-7.2-12.72-16.608-3.984-2.688 2.56-5.52 11.12-7.472 14.656-5.92 10.832-4.528 9.472-17.44 16.112 0.656-0.24 1.312-0.688 2.032-1.024-9.472 1.856-18.48 6-22.288-5.776-1.216-3.936 4.208-9.76 1.216-13.712-6.72-8.64-29.024 9.76-36.8 12.688 4.032-32.416 41.92-15.36 62.096-21.824 5.52-1.76 26.112-9.76 27.328-15.056 1.696-7.792-16.384-20.48-20.512-24.08-8.928-7.68-13.632-12.032-18.656-23.968-5.28-12.672-8.752-25.392-22.048-16.032-4.96 3.52-1.376 11.072-9.984 12.256-5.344 0.736-10.864-6.144-13.936-9.44-4.64-4.832-9.568-16.768-18-17.872-7.296-0.912-27.744-11.776-37.312-4.72-7.296 5.376 0.976 25.808 3.248 33.184 4.704 15.712 7.712 16.32-5.44 26.128-6.48 4.896-10.368-0.32-8.096 12.768 1.28 6.72 8.512 8.08 3.328 13.952-3.168 3.52-10.72 3.2-14.352 1.504-11.52-5.44-1.216-12.752-6.816-20.464-4.048-5.824-26.192-10.496-33.728-14.032-16.704-7.68-60.736-15.712-47.12-41.92 3.648-7.136 17.44-17.568 23.6-21.712 6.48-4.176 14.512-5.28 19.872-11.072 2.992-3.28 3.232-12.272 5.92-14.432 3.808-3.2 14.912-1.76 20.912-1.52h-0.16 1.376-1.216c25.632-5.216 2.272-42.96 36.08-36.16 9.328 1.936 18.72 11.536 26.352 16.832 8.768 6.032 11.52 5.28 8.848 14.448-0.64 2.16-10.304 11.68-12.736 13.6-4.544 3.536-11.84 5.136-17.12 7.312 17.68 0 25.072-0.864 39.424 8.816 12.4 8.336 20.112 13.872 35.264 13.216-0.96-7.424-13.952-4.544-13.376-11.936 0.4-6.24 8.192 2.016 9.168 2.016 4.288 0.24 15.232 5.28 12.8-6.656-2.096-10.496-24.72-5.44-17.44-22.592 10.144-1.072 7.392 10.16 14.128 12.592 7.2 2.624 16.544-6.192 18.08-12.224-10.064-5.264-40.704-13.632-37.376-28.272 20.512 13.216 41.024 26.384 61.536 39.68-16.624 15.008 12.16 6.56 13.872 6.96 4.944 1.28 17.264 12.112 9.152 14.112-8.512 2.096-12.8-10.24-21.408-0.976 7.136 1.888 32.272 3.312 25.552 17.024-2.688 5.44-18.816 4.544-23.68 15.296 3.488-0.64 7.216 0.32 10.704-0.48-7.712 12.048 3.728 20.128 10.048 29.904 7.056 10.992 17.04 27.968 31.216 31.424 30.176 7.456 26.528-42.016 49.472-49.92 6.24-2.192 13.12-0.592 19.536-2.352 7.136-2.016 10.88-7.216 16.544-11.2 13.952-9.728 26.032-9.728 43.376-10.208h1.296c-62.272-66.304-144.08-113.52-236.032-131.936-10.08 3.44-19.712 8.16-28.64 14.032 4.72 0.768 9.344 1.44 13.952 2.176-6.64 20.512-41.664 6.72-56.112 6.8 11.44-4.512 28.32-10.4 37.872-17.552 5.024-3.68-0.08-6.112 6.816-9.808a434.368 434.368 0 0 0-153.408 5.616h1.616c-6.656 3.856-19.536 16.544-12 24.544 7.376 7.632 16.048-4.192 23.52-8 17.104-8.656 39.888-9.568 58.864-13.264-3.328 8.992-30.4 5.792-39.904 9.232-11.904 4.4-6.64 7.472-14.912 20.928 3.568-0.416 7.376 1.68 11.04 1.6v2.416c-8.208-0.64-16.064-4.592-17.76 5.216-10.464-15.888-17.28-14.608-28.48-0.576 11.04 6.24 21.904 13.952 13.152 24.608-10.624 12.96-16.96-2.944-6.08-9.68-9.904-4.592-17.6-12.432-25.392-2.416 3.328-0.32 6.896 1.44 10.224 1.344-1.792 2.8-3.728 11.696-5.52 12.688-4.288 2.416-19.952-2.832-24.56-3.456-11.68-1.504-23.2-1.104-35.2-0.48 2.192 14.688-14.192 0.56-20.032-3.04 10.784-10.992 23.76-6.816 36.256-5.12 10.464 1.44 25.856 1.344 27.072-12.032-11.36-2.336-16.864-1.68-22.784-10.416a26.896 26.896 0 0 1-4.288-10.672 448.96 448.96 0 0 0-179.6 135.952 392.144 392.144 0 0 1 25.936 19.904c7.552 6.48 11.2 14.272 15.904 22.272 0.24 0.416 4.448 6.976 6.08 9.568 5.024 5.248 9.232 11.04 10.288 18.08 1.376 8.416-1.696 15.472-2.512 24.288-2.352 26.96 1.456 52.272 22.304 71.264 5.664 5.168 13.28 7.952 18.976 13.488 6 5.712 5.264 9.68 8.912 15.712 9.568 15.968 22.224 31.024 33.248 46.112 9.568 13.216 13.616 10.72 4.208-2.992-6.4-9.232-14.432-18.416-19.776-28.304-0.48-1.12-5.92-14.16-4.144-13.696 14.848 3.2 17.92 13.408 27.568 25.504 9.488 11.856 17.6 18.512 23.12 32.784 6.48 16.656 16.368 24.784 32.592 32.08 7.952 3.616 21.008 13.216 29.52 14.32 9.968 1.312 15.408-5.216 24.8-0.608 6.4 3.04 11.28 12.88 19.056 15.2 7.552 2.192 12.576-0.688 19.632 4.112 8.352 5.824 11.36 15.712 19.2 21.792 5.696 4.336 13.792 9.792 21.008 10.992 5.2 0.816 10.88-3.12 16.064-1.36 9.248 3.04 11.264 14.48 8.512 23.552-3.168 10.128-12.576 16.528-16.304 26.624-3.392 9.152-1.28 16.976-2.432 25.728-1.216 8.976-8.352-0.128-1.216 15.168 3.408 7.136 8.272 13.616 12.48 20.192 8.528 12.912 14.528 24.288 25.952 34.784 7.952 7.392 25.552 16.048 29.52 26.96 3.488 9.84 0.576 31.248-1.216 41.6-3.728 21.488-3.168 47.456-9.088 67.44-5.664 19.44-12.32 25.216-7.456 46.48 2.112 9.136 3.728 4.704 0 16.368-1.056 3.36 0 4.72-1.28 8.16-2.688 7.216-9.088 11.52-11.84 18.992 10.128 0.48 9.392 4.016 6.24 8.048a423.6 423.6 0 0 0 50.272-6.976c-2.928-2.992-6-6.192-6-8.288 0-2.384 9.152-14.192 10.368-17.152 1.872-4.72 3.328-14.88 6.16-18.496 4.8-6.192 15.248-3.952 13.312-15.472 23.264-0.24 33.312-3.84 37.12-27.888-4.128-2.096-3.312-0.832-3.968-4.512 0.8 4.336 17.52-1.76 19.136 1.28 1.136 2.32 22.304-26.928 24.64-29.344 6.016-6.4 11.2-11.248 15.008-18.992 1.552-3.04 3.088-12.272 6.336-16.704-0.24 0.736-0.48 1.472-0.8 2.256 7.52-12.016 17.088-10.576 27.952-15.472 10.88-4.88 3.088-3.52 10.96-11.152 9.488-9.12 11.584-3.904 14.272-18.752 2.016-10.912-0.576-20.912 2.912-30.848 4.384-12.512 15.008-16.528 22.048-27.2 5.44-8.08 10.464-21.248 3.168-29.408-6.08-6.816-24.08-12.352-32.272-14.368-9.648-2.288-20.672-2.544-29.76-6.24-10.624-4.336-19.376-15.696-24.8 1.936-1.712-1.232-9.008-5.376-9.008-7.376 0 3.936 10.208-3.456 11.68-5.12-4.304 0.32-18.976 3.632-21.52 2.24v-0.08h-0.128c1.216-4.352 8.592-14.192 8.752-16.128 0.8-10.912-14.832-23.424-23.36-25.888-11.584-3.36-18.24-1.84-28.208-9.216-12-8.992-23.84-18.912-39.168-20.592-3.248-0.32-6.72 1.44-10.128 0.944-8.272-1.28-11.04-6.656-17.92-8.416-8.608-2.176-11.84 5.2-16.88 5.2-7.456 0-9.312-7.952-20.272-1.28-16.288 9.952-7.36 16.064-25.856 11.376-9.808-2.544-20.752 3.52-30.16-3.04-8.432-5.856-10.4-22.272-2.192-29.168-4.144 3.456-3.968-7.632-7.056-9.632-4.8-3.2-12.64 0.48-18.24-0.736-7.472-1.888-11.84-2.624-10.144-10.016 1.872-8 22.784-29.744 1.296-29.168-11.6 0.32-15.328 17.808-27.728 20.352-13.872 2.912-25.872-1.92-33.088-14.4-15.072-25.84 8.768-57.76 33.088-60.064 18.976-1.76 46.784-15.952 60.736 5.28 4.048 6.24 14.032 30.08 19.136 14.656 1.6-4.672-3.872-24.848-5.712-33.552 0.16-0.08 0.288-0.16 0.288-0.24a67.52 67.52 0 0 0-0.112-0.352zM519.888 1024c-282.768 0-512-229.232-512-512 0-282.768 229.232-512 512-512 282.768 0 512 229.232 512 512 0 282.768-229.232 512-512 512z m410.768-640.688c-1.776 3.952 0.24 10.144 0.08 14.528-0.16 5.12-1.936 9.84 0.896 14.352 2.592 4.224 6.976 8.576 10.72 11.936 3.712 3.2 7.52 6.656 12.64 6.496 1.44-0.08 8.512-1.2 9.568-2.064 0.16-0.16 0.24-0.4 0.32-0.48a447.728 447.728 0 0 0-17.6-64.96 7.936 7.936 0 0 1-2.016 2.64c-2.432 2.256-5.44 2.912-7.712 5.872-2.112 2.624-1.616 4.704-3.328 7.792-0.8 1.52-2.752 2.128-3.568 3.888z m5.76 233.472c6.656 5.872 13.552 11.936 21.808 14.112 9.824-37.04 15.008-75.936 15.008-116.096 0-23.216-1.696-45.952-5.024-68.224-6.24 4.432-12.8 13.008-15.568 18.128-3.808 7.056-3.648 11.36-9.568 16.832-5.76 5.2-12.64 6.88-17.76 13.488-4.864 6.24-4.064 11.12-7.952 18.336-1.776 3.36-6.32 4.72-8.192 8.912-4.208 9.056 0.576 23.456 0.256 33.6-0.48 12-4.544 22.768 1.936 33.28 6.16 9.824 16.384 20 25.056 27.632z" fill="#437ACF"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 飞机 -->
|
||
<div class="airplane airplane-large">
|
||
<svg viewBox="0 0 1934 1024" width="240" height="120">
|
||
<path d="M1934.185688 174.551156c0 323.805439-1612.997088 681.516016-1735.078338 681.516016-68.492928 0-146.201683-15.473486-146.201683-76.457222 0-20.479613 24.347985-50.061277 67.127621-85.673049L6.712762 499.494352a49.264847 49.264847 0 0 1 25.827068-70.995993l19.341857-7.509191c35.384221-13.653075 75.091915-11.71889 108.769501 5.46123l205.478785 105.356232c80.098043-45.965354 170.663443-93.978669 266.462522-141.536882L232.102283 138.711833a49.151072 49.151072 0 0 1 0.568878-84.193965l32.653605-20.024511A239.497698 239.497698 0 0 1 448.275977 7.414758l666.383857 170.20834C1322.414132 97.866383 1510.371471 43.367856 1621.302709 43.367856c29.581663 0 59.504654 0.682654 88.176112 2.61684l-201.155312 87.948561-4.892352 65.534762 310.607467-138.237389C1889.016763 78.296974 1934.185688 110.381702 1934.185688 174.551156zM1123.534333 733.644596l248.485973 273.402835c15.132159 16.611242 39.82147 21.617369 60.64241 12.173993l33.33626-14.904608c60.528634-27.306151 96.481733-89.313869 88.74499-153.597098l-31.174522-257.701799a25.827068 25.827068 0 0 0-34.132689-20.593389L1134.343018 693.481799a24.803087 24.803087 0 0 0-10.92246 40.162797z" fill="#FFF394"/>
|
||
</svg>
|
||
</div>
|
||
<div class="airplane airplane-small">
|
||
<svg viewBox="0 0 1934 1024" width="120" height="60">
|
||
<path d="M1934.185688 174.551156c0 323.805439-1612.997088 681.516016-1735.078338 681.516016-68.492928 0-146.201683-15.473486-146.201683-76.457222 0-20.479613 24.347985-50.061277 67.127621-85.673049L6.712762 499.494352a49.264847 49.264847 0 0 1 25.827068-70.995993l19.341857-7.509191c35.384221-13.653075 75.091915-11.71889 108.769501 5.46123l205.478785 105.356232c80.098043-45.965354 170.663443-93.978669 266.462522-141.536882L232.102283 138.711833a49.151072 49.151072 0 0 1 0.568878-84.193965l32.653605-20.024511A239.497698 239.497698 0 0 1 448.275977 7.414758l666.383857 170.20834C1322.414132 97.866383 1510.371471 43.367856 1621.302709 43.367856c29.581663 0 59.504654 0.682654 88.176112 2.61684l-201.155312 87.948561-4.892352 65.534762 310.607467-138.237389C1889.016763 78.296974 1934.185688 110.381702 1934.185688 174.551156zM1123.534333 733.644596l248.485973 273.402835c15.132159 16.611242 39.82147 21.617369 60.64241 12.173993l33.33626-14.904608c60.528634-27.306151 96.481733-89.313869 88.74499-153.597098l-31.174522-257.701799a25.827068 25.827068 0 0 0-34.132689-20.593389L1134.343018 693.481799a24.803087 24.803087 0 0 0-10.92246 40.162797z" fill="#FFF394"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 白云 -->
|
||
<div class="cloud cloud-1">
|
||
<svg viewBox="0 0 1509 1024" width="200" height="140">
|
||
<path d="M1291.101636 489.364492C1415.382834 513.940479 1509.051837 623.131158 1509.051837 754.0953 1509.051837 903.168064 1387.680954 1024 1237.961454 1024H271.090384C121.316989 1024 0 903.168064 0 754.0953c0-94.639108 48.882501-177.852538 122.879935-226.034407a410.300416 410.300416 0 0 1-16.707359-116.250887C106.172576 184.374337 291.354794 0.000539 519.760569 0.000539a413.749677 413.749677 0 0 1 381.197273 251.688289c37.726296-19.186516 79.494695-29.103143 121.802041-29.103143 148.048764 0 268.126175 119.430674 268.341753 266.778807z" fill="rgba(255, 255, 255, 0.6)"/>
|
||
</svg>
|
||
</div>
|
||
<div class="cloud cloud-2">
|
||
<svg viewBox="0 0 1509 1024" width="180" height="120">
|
||
<path d="M1291.101636 489.364492C1415.382834 513.940479 1509.051837 623.131158 1509.051837 754.0953 1509.051837 903.168064 1387.680954 1024 1237.961454 1024H271.090384C121.316989 1024 0 903.168064 0 754.0953c0-94.639108 48.882501-177.852538 122.879935-226.034407a410.300416 410.300416 0 0 1-16.707359-116.250887C106.172576 184.374337 291.354794 0.000539 519.760569 0.000539a413.749677 413.749677 0 0 1 381.197273 251.688289c37.726296-19.186516 79.494695-29.103143 121.802041-29.103143 148.048764 0 268.126175 119.430674 268.341753 266.778807z" fill="rgba(255, 255, 255, 0.5)"/>
|
||
</svg>
|
||
</div>
|
||
<div class="cloud cloud-3">
|
||
<svg viewBox="0 0 1509 1024" width="190" height="130">
|
||
<path d="M1291.101636 489.364492C1415.382834 513.940479 1509.051837 623.131158 1509.051837 754.0953 1509.051837 903.168064 1387.680954 1024 1237.961454 1024H271.090384C121.316989 1024 0 903.168064 0 754.0953c0-94.639108 48.882501-177.852538 122.879935-226.034407a410.300416 410.300416 0 0 1-16.707359-116.250887C106.172576 184.374337 291.354794 0.000539 519.760569 0.000539a413.749677 413.749677 0 0 1 381.197273 251.688289c37.726296-19.186516 79.494695-29.103143 121.802041-29.103143 148.048764 0 268.126175 119.430674 268.341753 266.778807z" fill="rgba(255, 255, 255, 0.55)"/>
|
||
</svg>
|
||
</div>
|
||
<div class="cloud cloud-4">
|
||
<svg viewBox="0 0 1509 1024" width="170" height="115">
|
||
<path d="M1291.101636 489.364492C1415.382834 513.940479 1509.051837 623.131158 1509.051837 754.0953 1509.051837 903.168064 1387.680954 1024 1237.961454 1024H271.090384C121.316989 1024 0 903.168064 0 754.0953c0-94.639108 48.882501-177.852538 122.879935-226.034407a410.300416 410.300416 0 0 1-16.707359-116.250887C106.172576 184.374337 291.354794 0.000539 519.760569 0.000539a413.749677 413.749677 0 0 1 381.197273 251.688289c37.726296-19.186516 79.494695-29.103143 121.802041-29.103143 148.048764 0 268.126175 119.430674 268.341753 266.778807z" fill="rgba(255, 255, 255, 0.5)"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="login-form">
|
||
<div class="login-logo">
|
||
<img class="login-icon" :src="localLogo" alt="logo" />
|
||
<h2 class="logo-text">{{ sysName }}</h2>
|
||
<div class="language-switcher">
|
||
<SelectLang />
|
||
</div>
|
||
</div>
|
||
<a-tabs v-model:active-key="activeKey" class="login-tabs">
|
||
<a-tab-pane key="pwd" :title="$t('login.tabs.account')">
|
||
<LoginForm />
|
||
</a-tab-pane>
|
||
<a-tab-pane key="wechat" :title="$t('login.tabs.wechat')">
|
||
<WechatLogin />
|
||
</a-tab-pane>
|
||
</a-tabs>
|
||
<div class="fixed-corner">
|
||
<span class="version-text">{{ sysVersion }}</span>
|
||
</div>
|
||
</div>
|
||
<Footer />
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, computed, onMounted } from 'vue';
|
||
import { useI18n } from 'vue-i18n';
|
||
import Footer from '@/components/footer/index.vue';
|
||
import LoginForm from './components/pwd-login/index.vue';
|
||
import WechatLogin from './components/wechat-login.vue';
|
||
import SelectLang from '@/components/top-nav/SelectLang.vue';
|
||
// RBAC 系统暂不使用系统配置接口
|
||
import localLogoSrc from '@/assets/logo.png';
|
||
|
||
defineOptions({
|
||
name: 'Login',
|
||
});
|
||
|
||
const { t } = useI18n();
|
||
const activeKey = ref('pwd');
|
||
|
||
// 登录参数
|
||
const sysName = computed(() => t('login.systemName'));
|
||
const sysVersion = ref('');
|
||
const sysLogo = ref('');
|
||
const localLogo = localLogoSrc;
|
||
|
||
// RBAC 系统暂不使用系统配置接口，使用默认值
|
||
onMounted(() => {
|
||
// 使用默认系统名称和版本
|
||
sysVersion.value = 'v1.0.0';
|
||
|
||
// 优化：页面加载完成后再启动动画，减少初始加载压力
|
||
// 使用 requestAnimationFrame 确保在下一帧启动动画
|
||
requestAnimationFrame(() => {
|
||
const container = document.querySelector('.login-container');
|
||
if (container) {
|
||
// 启动所有动画
|
||
const animatedElements = container.querySelectorAll('[style*="animation"], .geometric-shape, .earth, .moon, .asteroid, .meteor, .particle, .airplane, .cloud');
|
||
animatedElements.forEach((el) => {
|
||
(el as HTMLElement).style.animationPlayState = 'running';
|
||
});
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.login-container {
|
||
height: 100vh;
|
||
min-height: 550px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding: 0 60px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
/* 深蓝色科技背景 */
|
||
background: #0D1D3D;
|
||
|
||
/* 优化：减少动画对性能的影响 */
|
||
/* 在页面加载完成前暂停所有动画 */
|
||
animation-play-state: paused;
|
||
|
||
/* 支持用户的动画偏好设置 */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
}
|
||
}
|
||
|
||
/* 几何图形 */
|
||
.geometric-shape {
|
||
position: absolute;
|
||
z-index: 1;
|
||
opacity: 0.6;
|
||
/* 优化：只在动画时使用 will-change，减少内存占用 */
|
||
transform: translateZ(0); /* 启用硬件加速 */
|
||
|
||
&.hexagon-1 {
|
||
top: 25%;
|
||
right: 15%;
|
||
width: 120px;
|
||
height: 120px;
|
||
background: #FFF394;
|
||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||
filter: drop-shadow(0 0 25px rgba(255, 243, 148, 0.9));
|
||
/* 优化：延迟启动动画，减少初始加载压力 */
|
||
animation: hexagonPulse 4s ease-in-out infinite;
|
||
animation-delay: 1s;
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
&.hexagon-2 {
|
||
bottom: 30%;
|
||
right: 8%;
|
||
width: 80px;
|
||
height: 80px;
|
||
background: #FFF394;
|
||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||
filter: drop-shadow(0 0 20px rgba(255, 243, 148, 0.7));
|
||
animation: hexagonPulse 5s ease-in-out infinite reverse;
|
||
animation-delay: 1.5s;
|
||
animation-play-state: paused;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
&.circle-1 {
|
||
top: 50%;
|
||
left: 5%;
|
||
width: 100px;
|
||
height: 100px;
|
||
border: 3px solid #FFF394;
|
||
border-radius: 50%;
|
||
box-shadow:
|
||
0 0 30px rgba(255, 243, 148, 0.8),
|
||
inset 0 0 20px rgba(255, 243, 148, 0.3);
|
||
animation: circlePulse 3s ease-in-out infinite;
|
||
}
|
||
|
||
&.circle-2 {
|
||
bottom: 15%;
|
||
left: 25%;
|
||
width: 60px;
|
||
height: 60px;
|
||
border: 2px solid #FFF394;
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 20px rgba(255, 243, 148, 0.6);
|
||
animation: circlePulse 4s ease-in-out infinite reverse;
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
|
||
/* 连接线 */
|
||
.connection-lines {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
|
||
.connection-line {
|
||
stroke: url(#lineGradient);
|
||
stroke-width: 2;
|
||
stroke-dasharray: 5, 5;
|
||
animation: lineFlow 3s linear infinite;
|
||
animation-play-state: paused;
|
||
filter: drop-shadow(0 0 3px rgba(255, 243, 148, 0.8));
|
||
}
|
||
}
|
||
|
||
/* 光点粒子 - 五角星 */
|
||
.particle {
|
||
position: absolute;
|
||
width: 12px;
|
||
height: 12px;
|
||
background: #FFF394;
|
||
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
|
||
box-shadow: 0 0 10px rgba(255, 243, 148, 1);
|
||
z-index: 2;
|
||
transform: translateZ(0);
|
||
animation-play-state: paused;
|
||
|
||
&.particle-1 {
|
||
top: 20%;
|
||
left: 20%;
|
||
animation: particleFloat 8s ease-in-out infinite;
|
||
}
|
||
|
||
&.particle-2 {
|
||
top: 40%;
|
||
right: 25%;
|
||
animation: particleFloat 10s ease-in-out infinite 2s;
|
||
}
|
||
|
||
&.particle-3 {
|
||
bottom: 30%;
|
||
left: 30%;
|
||
animation: particleFloat 12s ease-in-out infinite 4s;
|
||
}
|
||
|
||
&.particle-4 {
|
||
top: 60%;
|
||
right: 15%;
|
||
animation: particleFloat 9s ease-in-out infinite 1s;
|
||
}
|
||
|
||
&.particle-5 {
|
||
bottom: 20%;
|
||
right: 30%;
|
||
animation: particleFloat 11s ease-in-out infinite 3s;
|
||
}
|
||
}
|
||
|
||
/* 地球轨道 - 3D立体效果 */
|
||
.earth-orbit {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 40%;
|
||
transform: translate(-50%, -50%) perspective(800px) rotateX(65deg);
|
||
z-index: 1;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
border: 2px solid rgba(255, 243, 148, 0.5);
|
||
border-radius: 50%;
|
||
box-shadow:
|
||
0 0 25px rgba(255, 243, 148, 0.4),
|
||
inset 0 0 40px rgba(255, 243, 148, 0.15),
|
||
0 10px 30px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
border: 1px solid rgba(255, 243, 148, 0.2);
|
||
border-radius: 50%;
|
||
filter: blur(4px);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
&.orbit-1 {
|
||
width: 400px;
|
||
height: 250px;
|
||
|
||
&::before {
|
||
width: 400px;
|
||
height: 250px;
|
||
box-shadow:
|
||
0 0 20px rgba(255, 243, 148, 0.4),
|
||
inset 0 0 35px rgba(255, 243, 148, 0.15),
|
||
0 8px 25px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
&::after {
|
||
width: 410px;
|
||
height: 260px;
|
||
}
|
||
}
|
||
|
||
&.orbit-2 {
|
||
width: 500px;
|
||
height: 300px;
|
||
|
||
&::before {
|
||
width: 500px;
|
||
height: 300px;
|
||
box-shadow:
|
||
0 0 30px rgba(255, 243, 148, 0.4),
|
||
inset 0 0 45px rgba(255, 243, 148, 0.15),
|
||
0 12px 35px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
&::after {
|
||
width: 510px;
|
||
height: 310px;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 地球 */
|
||
.earth {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 40%;
|
||
transform: translate(-50%, -50%) translateZ(0);
|
||
z-index: 2;
|
||
filter: drop-shadow(0 0 30px rgba(67, 122, 207, 0.6));
|
||
/* 优化：延迟启动地球旋转动画 */
|
||
animation: earthRotate 30s linear infinite;
|
||
animation-delay: 0.5s;
|
||
animation-play-state: paused;
|
||
|
||
svg {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
/* 月亮 */
|
||
.moon {
|
||
position: absolute;
|
||
top: 15%;
|
||
right: 10%;
|
||
z-index: 3;
|
||
filter: drop-shadow(0 0 25px rgba(255, 243, 148, 0.8));
|
||
animation: moonFloat 20s ease-in-out infinite;
|
||
animation-delay: 0.8s;
|
||
animation-play-state: paused;
|
||
transform: translateZ(0);
|
||
|
||
svg {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
/* 小行星 - 五角星 */
|
||
.asteroid {
|
||
position: absolute;
|
||
z-index: 2;
|
||
width: 24px;
|
||
height: 24px;
|
||
background: #FFF394;
|
||
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
|
||
filter: drop-shadow(0 0 8px rgba(255, 243, 148, 0.6));
|
||
opacity: 0.6;
|
||
animation: asteroidGlow 3s ease-in-out infinite;
|
||
animation-play-state: paused;
|
||
transform: translateZ(0);
|
||
|
||
&.asteroid-1 {
|
||
top: 20%;
|
||
left: 15%;
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
&.asteroid-2 {
|
||
top: 35%;
|
||
right: 20%;
|
||
animation-delay: 0.6s;
|
||
}
|
||
|
||
&.asteroid-3 {
|
||
bottom: 30%;
|
||
left: 25%;
|
||
animation-delay: 1.2s;
|
||
}
|
||
|
||
&.asteroid-4 {
|
||
top: 60%;
|
||
right: 15%;
|
||
animation-delay: 1.8s;
|
||
}
|
||
|
||
&.asteroid-5 {
|
||
bottom: 20%;
|
||
right: 30%;
|
||
animation-delay: 2.4s;
|
||
}
|
||
}
|
||
|
||
/* 流星 */
|
||
.meteor {
|
||
position: absolute;
|
||
z-index: 3;
|
||
width: 3px;
|
||
height: 100px;
|
||
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 243, 148, 0.8) 50%, transparent 100%);
|
||
border-radius: 50%;
|
||
filter: blur(2px);
|
||
box-shadow: 0 0 10px rgba(255, 243, 148, 0.8);
|
||
animation-play-state: paused;
|
||
|
||
&.meteor-1 {
|
||
top: 10%;
|
||
left: 20%;
|
||
transform: rotate(-45deg);
|
||
animation: meteorFall1 4s linear infinite;
|
||
}
|
||
|
||
&.meteor-2 {
|
||
top: 5%;
|
||
left: 60%;
|
||
transform: rotate(-60deg);
|
||
animation: meteorFall2 5s linear infinite 1.5s;
|
||
}
|
||
|
||
&.meteor-3 {
|
||
top: 15%;
|
||
left: 80%;
|
||
transform: rotate(-50deg);
|
||
animation: meteorFall3 4.5s linear infinite 3s;
|
||
}
|
||
}
|
||
|
||
/* 飞机 */
|
||
.airplane {
|
||
position: absolute;
|
||
z-index: 4;
|
||
filter: drop-shadow(0 0 15px rgba(255, 243, 148, 1));
|
||
transform: translateZ(0);
|
||
animation-play-state: paused;
|
||
|
||
svg {
|
||
display: block;
|
||
}
|
||
|
||
&.airplane-large {
|
||
bottom: 15%;
|
||
left: -240px;
|
||
animation: airplaneFlyUp1 25s linear infinite;
|
||
}
|
||
|
||
&.airplane-small {
|
||
bottom: 25%;
|
||
left: -120px;
|
||
animation: airplaneFlyUp2 30s linear infinite 5s;
|
||
}
|
||
}
|
||
|
||
/* 白云 */
|
||
.cloud {
|
||
position: absolute;
|
||
z-index: 3;
|
||
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
|
||
opacity: 0.6;
|
||
transform: translateZ(0);
|
||
animation-play-state: paused;
|
||
|
||
svg {
|
||
display: block;
|
||
}
|
||
|
||
&.cloud-1 {
|
||
top: 10%;
|
||
left: -200px;
|
||
animation: cloudMove1 40s linear infinite;
|
||
}
|
||
|
||
&.cloud-2 {
|
||
top: 20%;
|
||
right: -180px;
|
||
animation: cloudMove2 45s linear infinite;
|
||
}
|
||
|
||
&.cloud-3 {
|
||
bottom: 20%;
|
||
left: -190px;
|
||
animation: cloudMove3 42s linear infinite;
|
||
}
|
||
|
||
&.cloud-4 {
|
||
bottom: 30%;
|
||
right: -170px;
|
||
animation: cloudMove4 48s linear infinite;
|
||
}
|
||
}
|
||
|
||
.login-form {
|
||
position: relative;
|
||
z-index: 10;
|
||
width: 525px;
|
||
min-height: 650px;
|
||
padding: 63px 50px 56px;
|
||
margin-right: calc(100vw / 11);
|
||
background: rgba(255, 255, 255, 0.9);
|
||
backdrop-filter: blur(20px) saturate(180%);
|
||
border-radius: 30px;
|
||
border: 2px solid rgba(255, 255, 255, 0.5);
|
||
box-shadow:
|
||
0 25px 75px rgba(0, 0, 0, 0.15),
|
||
0 0 50px rgba(255, 255, 255, 0.3),
|
||
inset 0 0 38px rgba(255, 255, 255, 0.2);
|
||
display: flex;
|
||
flex-direction: column;
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -2px;
|
||
left: -2px;
|
||
right: -2px;
|
||
bottom: -2px;
|
||
background: linear-gradient(45deg, rgba(255, 243, 148, 0.5), transparent, rgba(255, 243, 148, 0.5), transparent);
|
||
border-radius: 24px;
|
||
z-index: -1;
|
||
opacity: 0;
|
||
transition: opacity 0.4s;
|
||
}
|
||
|
||
&:hover {
|
||
border-color: rgba(255, 255, 255, 0.8);
|
||
box-shadow:
|
||
0 30px 100px rgba(0, 0, 0, 0.2),
|
||
0 0 75px rgba(255, 255, 255, 0.4),
|
||
inset 0 0 50px rgba(255, 255, 255, 0.3);
|
||
transform: translateY(-5px) scale(1.01);
|
||
background: rgba(255, 255, 255, 0.95);
|
||
|
||
&::before {
|
||
opacity: 0.3;
|
||
animation: borderGlow 2s linear infinite;
|
||
}
|
||
}
|
||
|
||
.login-logo {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 38px;
|
||
padding-bottom: 25px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
position: relative;
|
||
|
||
.login-icon {
|
||
width: 68px;
|
||
height: 68px;
|
||
}
|
||
|
||
.logo-text {
|
||
padding: 0 0 0 31px;
|
||
margin: 0;
|
||
font-size: 40px;
|
||
font-weight: 600;
|
||
color: #002770;
|
||
letter-spacing: 2.5px;
|
||
text-shadow: none;
|
||
flex: 1;
|
||
}
|
||
|
||
.language-switcher {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
z-index: 10;
|
||
|
||
:deep(.dropDown) {
|
||
color: #8c8c8c;
|
||
font-size: 14px;
|
||
transition: color 0.3s;
|
||
|
||
&:hover {
|
||
color: #2D8C8C;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.login-tabs {
|
||
flex: 1;
|
||
min-height: 400px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
:deep(.arco-tabs-nav) {
|
||
&::before {
|
||
border-bottom-color: #e8e8e8;
|
||
}
|
||
}
|
||
|
||
:deep(.arco-tabs-tab) {
|
||
color: #8c8c8c;
|
||
transition: none;
|
||
font-size: 25px;
|
||
font-weight: 800;
|
||
|
||
&:hover {
|
||
color: #8c8c8c; /* 去除悬停变色 */
|
||
}
|
||
|
||
&.arco-tabs-tab-active {
|
||
color: #8c8c8c; /* 去除选中变色 */
|
||
}
|
||
}
|
||
|
||
:deep(.arco-tabs-content) {
|
||
flex: 1;
|
||
padding: 40px 0;
|
||
min-height: 350px;
|
||
}
|
||
|
||
:deep(.arco-tabs-content-item) {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
:deep(.arco-tabs-nav-ink) {
|
||
background-color: transparent; /* 隐藏底部指示条 */
|
||
}
|
||
}
|
||
|
||
/* 兜底：无论使用哪个登录子组件，统一按钮尺寸与圆角 */
|
||
:deep(.login-btn .arco-btn),
|
||
:deep(.login-form .arco-btn[long]),
|
||
:deep(.login-form .arco-btn-primary),
|
||
:deep(.login-form .arco-btn) {
|
||
width: 100% !important;
|
||
height: 60px !important;
|
||
line-height: 58px !important;
|
||
border-radius: 15px !important;
|
||
font-weight: 600 !important;
|
||
}
|
||
/* 覆盖尺寸类（small/medium/large）防止回退 */
|
||
:deep(.arco-btn-size-small),
|
||
:deep(.arco-btn-size-medium),
|
||
:deep(.arco-btn-size-large) {
|
||
height: 60px !important;
|
||
line-height: 58px !important;
|
||
border-radius: 15px !important;
|
||
}
|
||
/* 例外：手机号登录-获取验证码按钮保持32px */
|
||
:deep(.valid-code-container .arco-btn) {
|
||
height: 40px !important;
|
||
line-height: 38px !important;
|
||
border-radius: 10px !important;
|
||
width: auto !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 1250px) {
|
||
.login-container {
|
||
justify-content: center;
|
||
padding: 0 16px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 600px) {
|
||
.login-form {
|
||
width: 97% !important;
|
||
}
|
||
}
|
||
|
||
/* 三角形旋转浮动 */
|
||
@keyframes rotateFloat {
|
||
0%, 100% {
|
||
transform: translate(0, 0) rotate(0deg);
|
||
}
|
||
25% {
|
||
transform: translate(20px, -20px) rotate(90deg);
|
||
}
|
||
50% {
|
||
transform: translate(-15px, -30px) rotate(180deg);
|
||
}
|
||
75% {
|
||
transform: translate(-20px, 10px) rotate(270deg);
|
||
}
|
||
}
|
||
|
||
/* 六边形脉冲 */
|
||
@keyframes hexagonPulse {
|
||
0%, 100% {
|
||
transform: scale(1);
|
||
opacity: 0.6;
|
||
}
|
||
50% {
|
||
transform: scale(1.2);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* 圆形脉冲 */
|
||
@keyframes circlePulse {
|
||
0%, 100% {
|
||
transform: scale(1);
|
||
box-shadow:
|
||
0 0 30px rgba(255, 243, 148, 0.8),
|
||
inset 0 0 20px rgba(255, 243, 148, 0.3);
|
||
}
|
||
50% {
|
||
transform: scale(1.15);
|
||
box-shadow:
|
||
0 0 50px rgba(255, 243, 148, 1),
|
||
inset 0 0 30px rgba(255, 243, 148, 0.5);
|
||
}
|
||
}
|
||
|
||
/* 线条流动 */
|
||
@keyframes lineFlow {
|
||
0% {
|
||
stroke-dashoffset: 0;
|
||
opacity: 0.6;
|
||
}
|
||
50% {
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
stroke-dashoffset: -20;
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
|
||
/* 粒子浮动 */
|
||
@keyframes particleFloat {
|
||
0%, 100% {
|
||
transform: translate(0, 0) scale(1);
|
||
opacity: 0.8;
|
||
}
|
||
25% {
|
||
transform: translate(30px, -40px) scale(1.2);
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
transform: translate(-20px, -60px) scale(0.8);
|
||
opacity: 0.6;
|
||
}
|
||
75% {
|
||
transform: translate(-30px, -20px) scale(1.1);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
/* 边框发光 */
|
||
@keyframes borderGlow {
|
||
0% {
|
||
background-position: 0% 50%;
|
||
}
|
||
50% {
|
||
background-position: 100% 50%;
|
||
}
|
||
100% {
|
||
background-position: 0% 50%;
|
||
}
|
||
}
|
||
|
||
/* 地球旋转动画 */
|
||
@keyframes earthRotate {
|
||
0% {
|
||
transform: translate(-50%, -50%) rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: translate(-50%, -50%) rotate(360deg);
|
||
}
|
||
}
|
||
|
||
/* 月亮浮动 */
|
||
@keyframes moonFloat {
|
||
0%, 100% {
|
||
transform: translate(0, 0);
|
||
opacity: 0.9;
|
||
}
|
||
50% {
|
||
transform: translate(20px, -20px);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* 小行星随机高亮 */
|
||
@keyframes asteroidGlow {
|
||
0%, 70%, 100% {
|
||
opacity: 0.6;
|
||
box-shadow: 0 0 8px rgba(255, 243, 148, 0.6);
|
||
transform: scale(1);
|
||
}
|
||
35% {
|
||
opacity: 1;
|
||
box-shadow: 0 0 20px rgba(255, 243, 148, 1), 0 0 30px rgba(255, 243, 148, 0.8);
|
||
transform: scale(1.3);
|
||
}
|
||
}
|
||
|
||
/* 流星划过 */
|
||
@keyframes meteorFall1 {
|
||
0% {
|
||
transform: translate(0, 0) rotate(-45deg);
|
||
opacity: 0;
|
||
}
|
||
10% {
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
transform: translate(800px, 800px) rotate(-45deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes meteorFall2 {
|
||
0% {
|
||
transform: translate(0, 0) rotate(-60deg);
|
||
opacity: 0;
|
||
}
|
||
10% {
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
transform: translate(1000px, 1000px) rotate(-60deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes meteorFall3 {
|
||
0% {
|
||
transform: translate(0, 0) rotate(-50deg);
|
||
opacity: 0;
|
||
}
|
||
10% {
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
transform: translate(900px, 900px) rotate(-50deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
/* 飞机横向飞行 */
|
||
@keyframes airplaneFlyUp1 {
|
||
0% {
|
||
transform: translateX(0) translateY(0);
|
||
opacity: 0.8;
|
||
}
|
||
50% {
|
||
transform: translateX(calc(100vw + 240px)) translateY(-20px);
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
transform: translateX(calc(200vw + 240px)) translateY(0);
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
@keyframes airplaneFlyUp2 {
|
||
0% {
|
||
transform: translateX(0) translateY(0);
|
||
opacity: 0.7;
|
||
}
|
||
50% {
|
||
transform: translateX(calc(100vw + 120px)) translateY(15px);
|
||
opacity: 0.9;
|
||
}
|
||
100% {
|
||
transform: translateX(calc(200vw + 120px)) translateY(0);
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
/* 白云移动动画 */
|
||
@keyframes cloudMove1 {
|
||
0% {
|
||
transform: translateX(0) translateY(0);
|
||
opacity: 0.6;
|
||
}
|
||
50% {
|
||
transform: translateX(calc(100vw + 200px)) translateY(-15px);
|
||
opacity: 0.7;
|
||
}
|
||
100% {
|
||
transform: translateX(calc(200vw + 200px)) translateY(0);
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
|
||
@keyframes cloudMove2 {
|
||
0% {
|
||
transform: translateX(0) translateY(0);
|
||
opacity: 0.5;
|
||
}
|
||
50% {
|
||
transform: translateX(calc(-100vw - 180px)) translateY(12px);
|
||
opacity: 0.6;
|
||
}
|
||
100% {
|
||
transform: translateX(calc(-200vw - 180px)) translateY(0);
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
|
||
@keyframes cloudMove3 {
|
||
0% {
|
||
transform: translateX(0) translateY(0);
|
||
opacity: 0.55;
|
||
}
|
||
50% {
|
||
transform: translateX(calc(100vw + 190px)) translateY(8px);
|
||
opacity: 0.65;
|
||
}
|
||
100% {
|
||
transform: translateX(calc(200vw + 190px)) translateY(0);
|
||
opacity: 0.55;
|
||
}
|
||
}
|
||
|
||
@keyframes cloudMove4 {
|
||
0% {
|
||
transform: translateX(0) translateY(0);
|
||
opacity: 0.5;
|
||
}
|
||
50% {
|
||
transform: translateX(calc(-100vw - 170px)) translateY(-10px);
|
||
opacity: 0.6;
|
||
}
|
||
100% {
|
||
transform: translateX(calc(-200vw - 170px)) translateY(0);
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
</style>
|