From 3471290659516cf21db3211a9053daff5f283e03 Mon Sep 17 00:00:00 2001
From: zhuguifei <312353457@qq.com>
Date: 星期五, 20 三月 2026 15:50:18 +0800
Subject: [PATCH] feat: 基础数据仪器管理、判定依据、判定依据明细
---
ruoyi-plus-soybean/src/styles/scss/loading.scss | 869 +++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 778 insertions(+), 91 deletions(-)
diff --git a/ruoyi-plus-soybean/src/styles/scss/loading.scss b/ruoyi-plus-soybean/src/styles/scss/loading.scss
index 99617dd..1db991c 100755
--- a/ruoyi-plus-soybean/src/styles/scss/loading.scss
+++ b/ruoyi-plus-soybean/src/styles/scss/loading.scss
@@ -1,105 +1,792 @@
-@use 'sass:math';
-
-$base-size: 100px;
-$em-to-px: math.div($base-size, 2.5);
-$loader-color-1: rgb(var(--error-color) / 75%);
-$loader-color-2: rgb(var(--primary-color) / 75%);
-$loader-color-3: rgb(var(--success-color) / 75%);
-$loader-color-4: rgb(var(--warning-color) / 75%);
-
-@function loader-size($em-value) {
- @return $em-to-px * $em-value;
-}
-
-/* From Uiverse.io by SchawnnahJ */
+/* From Uiverse.io by Admin12121 */
.loader {
+ --duration: 3s;
+ --primary: rgba(39, 94, 254, 1);
+ --primary-light: #2f71ff;
+ --primary-rgba: rgba(39, 94, 254, 0);
+ width: 200px;
+ height: 320px;
position: relative;
- width: loader-size(2.5);
- height: loader-size(2.5);
- transform: rotate(165deg);
+ transform-style: preserve-3d;
+ z-index: 0;
}
-.loader:before,
-.loader:after {
- content: '';
+@media (max-width: 480px) {
+ .loader {
+ zoom: 0.44;
+ }
+}
+
+.loader:before, .loader:after {
+ --r: 20.5deg;
+ content: "";
+ width: 320px;
+ height: 140px;
position: absolute;
- top: 50%;
- left: 50%;
- display: block;
- width: loader-size(0.5);
- height: loader-size(0.5);
- border-radius: loader-size(0.25);
- transform: translate(-50%, -50%);
-}
-
-.loader:before {
- animation: before8 2s infinite;
+ right: 32%;
+ bottom: -11px;
+ /* change the back groung color on switching from light to dark mood */
+ background: rgb(var(--layout-bg-color, 232 232 232));
+ transform: translateZ(200px) rotate(var(--r));
+ -webkit-animation: mask var(--duration) linear forwards infinite;
+ animation: mask var(--duration) linear forwards infinite;
+ z-index: 0;
}
.loader:after {
- animation: after6 2s infinite;
+ --r: -20.5deg;
+ right: auto;
+ left: 32%;
}
-@keyframes before8 {
- 0% {
- width: loader-size(0.5);
- box-shadow:
- loader-size(1) loader-size(-0.5) $loader-color-1,
- loader-size(-1) loader-size(0.5) $loader-color-2;
- }
-
- 35% {
- width: loader-size(2.5);
- box-shadow:
- 0 loader-size(-0.5) $loader-color-1,
- 0 loader-size(0.5) $loader-color-2;
- }
-
- 70% {
- width: loader-size(0.5);
- box-shadow:
- loader-size(-1) loader-size(-0.5) $loader-color-1,
- loader-size(1) loader-size(0.5) $loader-color-2;
- }
-
- 100% {
- box-shadow:
- loader-size(1) loader-size(-0.5) $loader-color-1,
- loader-size(-1) loader-size(0.5) $loader-color-2;
- }
+.loading-title {
+ position: relative;
+ z-index: 1;
}
-@keyframes after6 {
- 0% {
- height: loader-size(0.5);
- box-shadow:
- loader-size(0.5) loader-size(1) $loader-color-3,
- loader-size(-0.5) loader-size(-1) $loader-color-4;
- }
-
- 35% {
- height: loader-size(2.5);
- box-shadow:
- loader-size(0.5) 0 $loader-color-3,
- loader-size(-0.5) 0 $loader-color-4;
- }
-
- 70% {
- height: loader-size(0.5);
- box-shadow:
- loader-size(0.5) loader-size(-1) $loader-color-3,
- loader-size(-0.5) loader-size(1) $loader-color-4;
- }
-
- 100% {
- box-shadow:
- loader-size(0.5) loader-size(1) $loader-color-3,
- loader-size(-0.5) loader-size(-1) $loader-color-4;
- }
-}
-
-.loader {
+.loader .ground {
position: absolute;
- top: calc(50% - #{math.div(loader-size(2.5), 2)});
- left: calc(50% - #{math.div(loader-size(2.5), 2)});
+ left: -50px;
+ bottom: -120px;
+ transform-style: preserve-3d;
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+}
+
+.loader .ground div {
+ transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
+ width: 200px;
+ height: 200px;
+ background: var(--primary);
+ background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);
+ transform-style: preserve-3d;
+ -webkit-animation: ground var(--duration) linear forwards infinite;
+ animation: ground var(--duration) linear forwards infinite;
+}
+
+.loader .ground div:before, .loader .ground div:after {
+ --rx: 90deg;
+ --ry: 0deg;
+ --x: 44px;
+ --y: 162px;
+ --z: -50px;
+ content: "";
+ width: 156px;
+ height: 300px;
+ opacity: 0;
+ background: linear-gradient(var(--primary), var(--primary-rgba));
+ position: absolute;
+ transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
+ -webkit-animation: ground-shine var(--duration) linear forwards infinite;
+ animation: ground-shine var(--duration) linear forwards infinite;
+}
+
+.loader .ground div:after {
+ --rx: 90deg;
+ --ry: 90deg;
+ --x: 0;
+ --y: 177px;
+ --z: 150px;
+}
+
+.loader .box {
+ --x: 0;
+ --y: 0;
+ position: absolute;
+ -webkit-animation: var(--duration) linear forwards infinite;
+ animation: var(--duration) linear forwards infinite;
+ transform: translate(var(--x), var(--y));
+}
+
+.loader .box div {
+ background-color: var(--primary);
+ width: 48px;
+ height: 48px;
+ position: relative;
+ transform-style: preserve-3d;
+ -webkit-animation: var(--duration) ease forwards infinite;
+ animation: var(--duration) ease forwards infinite;
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+}
+
+.loader .box div:before, .loader .box div:after {
+ --rx: 90deg;
+ --ry: 0deg;
+ --z: 24px;
+ --y: -24px;
+ --x: 0;
+ content: "";
+ position: absolute;
+ background-color: inherit;
+ width: inherit;
+ height: inherit;
+ transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
+ filter: brightness(var(--b, 1.2));
+}
+
+.loader .box div:after {
+ --rx: 0deg;
+ --ry: 90deg;
+ --x: 24px;
+ --y: 0;
+ --b: 1.4;
+}
+
+.loader .box.box0 {
+ --x: -220px;
+ --y: -120px;
+ left: 58px;
+ top: 108px;
+}
+
+.loader .box.box1 {
+ --x: -260px;
+ --y: 120px;
+ left: 25px;
+ top: 120px;
+}
+
+.loader .box.box2 {
+ --x: 120px;
+ --y: -190px;
+ left: 58px;
+ top: 64px;
+}
+
+.loader .box.box3 {
+ --x: 280px;
+ --y: -40px;
+ left: 91px;
+ top: 120px;
+}
+
+.loader .box.box4 {
+ --x: 60px;
+ --y: 200px;
+ left: 58px;
+ top: 132px;
+}
+
+.loader .box.box5 {
+ --x: -220px;
+ --y: -120px;
+ left: 25px;
+ top: 76px;
+}
+
+.loader .box.box6 {
+ --x: -260px;
+ --y: 120px;
+ left: 91px;
+ top: 76px;
+}
+
+.loader .box.box7 {
+ --x: -240px;
+ --y: 200px;
+ left: 58px;
+ top: 87px;
+}
+
+.loader .box0 {
+ -webkit-animation-name: box-move0;
+ animation-name: box-move0;
+}
+
+.loader .box0 div {
+ -webkit-animation-name: box-scale0;
+ animation-name: box-scale0;
+}
+
+.loader .box1 {
+ -webkit-animation-name: box-move1;
+ animation-name: box-move1;
+}
+
+.loader .box1 div {
+ -webkit-animation-name: box-scale1;
+ animation-name: box-scale1;
+}
+
+.loader .box2 {
+ -webkit-animation-name: box-move2;
+ animation-name: box-move2;
+}
+
+.loader .box2 div {
+ -webkit-animation-name: box-scale2;
+ animation-name: box-scale2;
+}
+
+.loader .box3 {
+ -webkit-animation-name: box-move3;
+ animation-name: box-move3;
+}
+
+.loader .box3 div {
+ -webkit-animation-name: box-scale3;
+ animation-name: box-scale3;
+}
+
+.loader .box4 {
+ -webkit-animation-name: box-move4;
+ animation-name: box-move4;
+}
+
+.loader .box4 div {
+ -webkit-animation-name: box-scale4;
+ animation-name: box-scale4;
+}
+
+.loader .box5 {
+ -webkit-animation-name: box-move5;
+ animation-name: box-move5;
+}
+
+.loader .box5 div {
+ -webkit-animation-name: box-scale5;
+ animation-name: box-scale5;
+}
+
+.loader .box6 {
+ -webkit-animation-name: box-move6;
+ animation-name: box-move6;
+}
+
+.loader .box6 div {
+ -webkit-animation-name: box-scale6;
+ animation-name: box-scale6;
+}
+
+.loader .box7 {
+ -webkit-animation-name: box-move7;
+ animation-name: box-move7;
+}
+
+.loader .box7 div {
+ -webkit-animation-name: box-scale7;
+ animation-name: box-scale7;
+}
+
+@-webkit-keyframes box-move0 {
+ 12% {
+ transform: translate(var(--x), var(--y));
+ }
+
+ 25%, 52% {
+ transform: translate(0, 0);
+ }
+
+ 80% {
+ transform: translate(0, -32px);
+ }
+
+ 90%, 100% {
+ transform: translate(0, 188px);
+ }
+}
+
+@keyframes box-move0 {
+ 12% {
+ transform: translate(var(--x), var(--y));
+ }
+
+ 25%, 52% {
+ transform: translate(0, 0);
+ }
+
+ 80% {
+ transform: translate(0, -32px);
+ }
+
+ 90%, 100% {
+ transform: translate(0, 188px);
+ }
+}
+
+@-webkit-keyframes box-scale0 {
+ 6% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+ }
+
+ 14%, 100% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+ }
+}
+
+@keyframes box-scale0 {
+ 6% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+ }
+
+ 14%, 100% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+ }
+}
+
+@-webkit-keyframes box-move1 {
+ 16% {
+ transform: translate(var(--x), var(--y));
+ }
+
+ 29%, 52% {
+ transform: translate(0, 0);
+ }
+
+ 80% {
+ transform: translate(0, -32px);
+ }
+
+ 90%, 100% {
+ transform: translate(0, 188px);
+ }
+}
+
+@keyframes box-move1 {
+ 16% {
+ transform: translate(var(--x), var(--y));
+ }
+
+ 29%, 52% {
+ transform: translate(0, 0);
+ }
+
+ 80% {
+ transform: translate(0, -32px);
+ }
+
+ 90%, 100% {
+ transform: translate(0, 188px);
+ }
+}
+
+@-webkit-keyframes box-scale1 {
+ 10% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+ }
+
+ 18%, 100% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+ }
+}
+
+@keyframes box-scale1 {
+ 10% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+ }
+
+ 18%, 100% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+ }
+}
+
+@-webkit-keyframes box-move2 {
+ 20% {
+ transform: translate(var(--x), var(--y));
+ }
+
+ 33%, 52% {
+ transform: translate(0, 0);
+ }
+
+ 80% {
+ transform: translate(0, -32px);
+ }
+
+ 90%, 100% {
+ transform: translate(0, 188px);
+ }
+}
+
+@keyframes box-move2 {
+ 20% {
+ transform: translate(var(--x), var(--y));
+ }
+
+ 33%, 52% {
+ transform: translate(0, 0);
+ }
+
+ 80% {
+ transform: translate(0, -32px);
+ }
+
+ 90%, 100% {
+ transform: translate(0, 188px);
+ }
+}
+
+@-webkit-keyframes box-scale2 {
+ 14% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+ }
+
+ 22%, 100% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+ }
+}
+
+@keyframes box-scale2 {
+ 14% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+ }
+
+ 22%, 100% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+ }
+}
+
+@-webkit-keyframes box-move3 {
+ 24% {
+ transform: translate(var(--x), var(--y));
+ }
+
+ 37%, 52% {
+ transform: translate(0, 0);
+ }
+
+ 80% {
+ transform: translate(0, -32px);
+ }
+
+ 90%, 100% {
+ transform: translate(0, 188px);
+ }
+}
+
+@keyframes box-move3 {
+ 24% {
+ transform: translate(var(--x), var(--y));
+ }
+
+ 37%, 52% {
+ transform: translate(0, 0);
+ }
+
+ 80% {
+ transform: translate(0, -32px);
+ }
+
+ 90%, 100% {
+ transform: translate(0, 188px);
+ }
+}
+
+@-webkit-keyframes box-scale3 {
+ 18% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+ }
+
+ 26%, 100% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+ }
+}
+
+@keyframes box-scale3 {
+ 18% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+ }
+
+ 26%, 100% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+ }
+}
+
+@-webkit-keyframes box-move4 {
+ 28% {
+ transform: translate(var(--x), var(--y));
+ }
+
+ 41%, 52% {
+ transform: translate(0, 0);
+ }
+
+ 80% {
+ transform: translate(0, -32px);
+ }
+
+ 90%, 100% {
+ transform: translate(0, 188px);
+ }
+}
+
+@keyframes box-move4 {
+ 28% {
+ transform: translate(var(--x), var(--y));
+ }
+
+ 41%, 52% {
+ transform: translate(0, 0);
+ }
+
+ 80% {
+ transform: translate(0, -32px);
+ }
+
+ 90%, 100% {
+ transform: translate(0, 188px);
+ }
+}
+
+@-webkit-keyframes box-scale4 {
+ 22% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+ }
+
+ 30%, 100% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+ }
+}
+
+@keyframes box-scale4 {
+ 22% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+ }
+
+ 30%, 100% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+ }
+}
+
+@-webkit-keyframes box-move5 {
+ 32% {
+ transform: translate(var(--x), var(--y));
+ }
+
+ 45%, 52% {
+ transform: translate(0, 0);
+ }
+
+ 80% {
+ transform: translate(0, -32px);
+ }
+
+ 90%, 100% {
+ transform: translate(0, 188px);
+ }
+}
+
+@keyframes box-move5 {
+ 32% {
+ transform: translate(var(--x), var(--y));
+ }
+
+ 45%, 52% {
+ transform: translate(0, 0);
+ }
+
+ 80% {
+ transform: translate(0, -32px);
+ }
+
+ 90%, 100% {
+ transform: translate(0, 188px);
+ }
+}
+
+@-webkit-keyframes box-scale5 {
+ 26% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+ }
+
+ 34%, 100% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+ }
+}
+
+@keyframes box-scale5 {
+ 26% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+ }
+
+ 34%, 100% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+ }
+}
+
+@-webkit-keyframes box-move6 {
+ 36% {
+ transform: translate(var(--x), var(--y));
+ }
+
+ 49%, 52% {
+ transform: translate(0, 0);
+ }
+
+ 80% {
+ transform: translate(0, -32px);
+ }
+
+ 90%, 100% {
+ transform: translate(0, 188px);
+ }
+}
+
+@keyframes box-move6 {
+ 36% {
+ transform: translate(var(--x), var(--y));
+ }
+
+ 49%, 52% {
+ transform: translate(0, 0);
+ }
+
+ 80% {
+ transform: translate(0, -32px);
+ }
+
+ 90%, 100% {
+ transform: translate(0, 188px);
+ }
+}
+
+@-webkit-keyframes box-scale6 {
+ 30% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+ }
+
+ 38%, 100% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+ }
+}
+
+@keyframes box-scale6 {
+ 30% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+ }
+
+ 38%, 100% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+ }
+}
+
+@-webkit-keyframes box-move7 {
+ 40% {
+ transform: translate(var(--x), var(--y));
+ }
+
+ 53%, 52% {
+ transform: translate(0, 0);
+ }
+
+ 80% {
+ transform: translate(0, -32px);
+ }
+
+ 90%, 100% {
+ transform: translate(0, 188px);
+ }
+}
+
+@keyframes box-move7 {
+ 40% {
+ transform: translate(var(--x), var(--y));
+ }
+
+ 53%, 52% {
+ transform: translate(0, 0);
+ }
+
+ 80% {
+ transform: translate(0, -32px);
+ }
+
+ 90%, 100% {
+ transform: translate(0, 188px);
+ }
+}
+
+@-webkit-keyframes box-scale7 {
+ 34% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+ }
+
+ 42%, 100% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+ }
+}
+
+@keyframes box-scale7 {
+ 34% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+ }
+
+ 42%, 100% {
+ transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+ }
+}
+
+@-webkit-keyframes ground {
+ 0%, 65% {
+ transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
+ }
+
+ 75%, 90% {
+ transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
+ }
+
+ 100% {
+ transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
+ }
+}
+
+@keyframes ground {
+ 0%, 65% {
+ transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
+ }
+
+ 75%, 90% {
+ transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
+ }
+
+ 100% {
+ transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
+ }
+}
+
+@-webkit-keyframes ground-shine {
+ 0%, 70% {
+ opacity: 0;
+ }
+
+ 75%, 87% {
+ opacity: 0.2;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
+@keyframes ground-shine {
+ 0%, 70% {
+ opacity: 0;
+ }
+
+ 75%, 87% {
+ opacity: 0.2;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
+@-webkit-keyframes mask {
+ 0%, 65% {
+ opacity: 0;
+ }
+
+ 66%, 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes mask {
+ 0%, 65% {
+ opacity: 0;
+ }
+
+ 66%, 100% {
+ opacity: 1;
+ }
}
--
Gitblit v1.9.3