整理项目架构

2025-09-15 15:26:59 +08:00
parent 594cc6ac6f
commit c48037930c
41 changed files with 1317 additions and 720 deletions
--- a/SmyWorkCollect-Frontend/test/background.css
+++ b/SmyWorkCollect-Frontend/test/background.css
@@ -0,0 +1,192 @@
+/* 彩虹渐变背景样式 */
+
+/* 主背景渐变 */
+body {
+    background: linear-gradient(
+        135deg,
+        rgba(255, 107, 107, 0.3) 0%,
+        rgba(255, 165, 0, 0.3) 14.28%,
+        rgba(255, 255, 0, 0.25) 28.56%,
+        rgba(50, 205, 50, 0.3) 42.84%,
+        rgba(0, 191, 255, 0.3) 57.12%,
+        rgba(65, 105, 225, 0.3) 71.4%,
+        rgba(147, 112, 219, 0.3) 85.68%,
+        rgba(255, 105, 180, 0.3) 100%
+    );
+    background-size: 400% 400%;
+    animation: rainbowShift 20s ease infinite;
+    min-height: 100vh;
+}
+
+/* 彩虹渐变动画 */
+@keyframes rainbowShift {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+/* 半透明覆盖层，增强可读性 */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.4);
+    backdrop-filter: blur(2px);
+    z-index: -1;
+    pointer-events: none;
+}
+
+/* 搜索按钮彩虹渐变 */
+.search-btn {
+    background: linear-gradient(
+        45deg,
+        rgba(255, 107, 107, 0.8),
+        rgba(255, 165, 0, 0.8),
+        rgba(255, 255, 0, 0.7),
+        rgba(50, 205, 50, 0.8),
+        rgba(0, 191, 255, 0.8),
+        rgba(65, 105, 225, 0.8),
+        rgba(147, 112, 219, 0.8)
+    );
+    background-size: 300% 300%;
+    animation: buttonRainbow 12s ease infinite;
+}
+
+@keyframes buttonRainbow {
+    0%, 100% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+}
+
+/* 结果卡片边框彩虹渐变 */
+.result-card {
+    position: relative;
+    overflow: hidden;
+}
+
+.result-card::before {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: linear-gradient(
+        45deg,
+        rgba(255, 107, 107, 0.4),
+        rgba(255, 165, 0, 0.4),
+        rgba(255, 255, 0, 0.3),
+        rgba(50, 205, 50, 0.4),
+        rgba(0, 191, 255, 0.4),
+        rgba(65, 105, 225, 0.4),
+        rgba(147, 112, 219, 0.4),
+        rgba(255, 107, 107, 0.4)
+    );
+    background-size: 400% 400%;
+    animation: borderRainbow 15s linear infinite;
+    border-radius: inherit;
+    z-index: -1;
+}
+
+@keyframes borderRainbow {
+    0% {
+        background-position: 0% 50%;
+    }
+    100% {
+        background-position: 400% 50%;
+    }
+}
+
+/* 加载动画彩虹效果 */
+.loading-spinner {
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-top: 4px solid transparent;
+    border-image: linear-gradient(
+        45deg,
+        #ff6b6b,
+        #ffa500,
+        #ffff00,
+        #32cd32,
+        #00bfff,
+        #4169e1,
+        #9370db
+    ) 1;
+    animation: spin 1s linear infinite, colorShift 3s ease infinite;
+}
+
+@keyframes colorShift {
+    0%, 100% {
+        filter: hue-rotate(0deg);
+    }
+    50% {
+        filter: hue-rotate(180deg);
+    }
+}
+
+/* 链接悬停彩虹效果 */
+.result-link:hover {
+    background: linear-gradient(
+        90deg,
+        rgba(255, 107, 107, 0.7),
+        rgba(255, 165, 0, 0.7),
+        rgba(255, 255, 0, 0.6),
+        rgba(50, 205, 50, 0.7),
+        rgba(0, 191, 255, 0.7),
+        rgba(65, 105, 225, 0.7),
+        rgba(147, 112, 219, 0.7)
+    );
+    background-size: 200% 200%;
+    animation: linkRainbow 3s ease infinite;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+@keyframes linkRainbow {
+    0%, 100% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+}
+
+/* 标题彩虹文字效果 */
+.title {
+    background: linear-gradient(
+        90deg,
+        rgba(255, 107, 107, 0.8),
+        rgba(255, 165, 0, 0.8),
+        rgba(255, 255, 0, 0.7),
+        rgba(50, 205, 50, 0.8),
+        rgba(0, 191, 255, 0.8),
+        rgba(65, 105, 225, 0.8),
+        rgba(147, 112, 219, 0.8)
+    );
+    background-size: 200% 200%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: titleRainbow 8s ease infinite;
+}
+
+@keyframes titleRainbow {
+    0%, 100% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+}