优化调整

2025-07-26 00:37:18 +08:00
parent 08bbd4df0f
commit 0dfabc35d7
90 changed files with 3594 additions and 2294 deletions
@@ -0,0 +1,163 @@
+:root {
+  --tech-blue: #4A90E2;
+  --warm-orange: #F5A623;
+  --white: #FFFFFF;
+  --light-gray: #F7F8FA;
+  --text-dark: #333333;
+  --text-medium: #888888;
+}
+
+body {
+    font-family: 'Noto Sans SC', sans-serif;
+}
+
+.bg-tech-blue { background-color: var(--tech-blue); }
+.bg-warm-orange { background-color: var(--warm-orange); }
+.bg-light-gray { background-color: var(--light-gray); }
+.text-tech-blue { color: var(--tech-blue); }
+.text-text-dark { color: var(--text-dark); }
+.text-text-medium { color: var(--text-medium); }
+.border-tech-blue { border-color: var(--tech-blue); }
+
+#main-header.scrolled {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+    border-bottom-color: #e5e7eb;
+}
+
+.feature-card-bg {
+    background-color: var(--white);
+    border: 1px solid #e5e7eb;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.feature-card-bg:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.feature-card-image-container {
+    background-color: #eef5fe;
+    background-image: url('data:image/svg+xml;utf8,<svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\\\\\\\\\\\\\\\"><path d=\\\\\\\\\\\\\\\"M-10 10 C 20 20, 40 0, 60 10 S 100 0, 120 10\\\\\\\\\\\\\\\" stroke=\\\\\\\\\\\\\\\"%234A90E2\\\\\\\\\\\\\\\" fill=\\\\\\\\\\\\\\\"none\\\\\\\\\\\\\\\" stroke-width=\\\\\\\\\\\\\\\"2\\\\\\\\\\\\\\\" stroke-opacity=\\\\\\\\\\\\\\\"0.2\\\\\\\\\\\\\\\"/></svg>');
+    background-size: 50px;
+    background-repeat: repeat;
+}
+
+.animate-fade-in-up {
+    animation: fade-in-up 0.8s ease-out forwards;
+    opacity: 0;
+}
+
+@keyframes fade-in-up {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.scroll-target {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+
+.scroll-target.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.wave {
+    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTQ0MCAxNDciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHRpdGxlPmdyb3VwPC90aXRsZT48ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyBpZD0iQ29tcG9uZW50LS0tV2F2ZS1Cb3R0b20iIGZpbGw9IiM0QTkwRTIiPjxwYXRoIGQ9Ik0wLDc0LjgzMjk0MTIgQzM2MCw3NC44MzI5NDEyIDM2MCwxNDcgNzIwLDE0NyBDMTA4MCwxNDcgMTA4MCw3NC44MzI5NDEyIDE0NDAsNzQuODMyOTQxMiBMMTQ0MCwxNDcgTDAsMTQ3IEwwLDc0LjgzMjk0MTIgWiIgaWQ9IldhdmUiIG9wYWNpdHk9IjAuMSI+PC9wYXRoPjwvZz48L2c+PC9zdmc+);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 200%;
+    height: 147px;
+    animation: wave 15s linear infinite;
+}
+.wave:nth-of-type(2) {
+    animation-direction: reverse;
+    animation-duration: 20s;
+    opacity: 0.8;
+}
+
+.wave:nth-of-type(3) {
+    animation-duration: 25s;
+    opacity: 0.5;
+}
+
+@keyframes wave {
+    0% { transform: translateX(0); }
+    50% { transform: translateX(-50%); }
+    100% { transform: translateX(0); }
+}
+
+#chat-messages {
+    scrollbar-width: thin;
+    scrollbar-color: var(--tech-blue) var(--light-gray);
+}
+
+#chat-messages::-webkit-scrollbar {
+    width: 6px;
+}
+
+#chat-messages::-webkit-scrollbar-track {
+    background: var(--light-gray);
+}
+
+#chat-messages::-webkit-scrollbar-thumb {
+    background-color: var(--tech-blue);
+    border-radius: 10px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+}
+
+.message-animate {
+    animation: message-fade-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+    opacity: 0;
+    transform: translateY(10px);
+}
+
+@keyframes message-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(10px) scale(0.98);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+#topic-detail-modal.hidden {
+    display: none;
+}
+
+#login-modal:not(.hidden) {
+    animation: modal-fade-in 0.2s ease-out forwards;
+}
+
+#login-modal:not(.hidden) > div {
+    animation: modal-scale-up 0.2s ease-out forwards;
+}
+
+@keyframes modal-fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes modal-scale-up {
+    from {
+        transform: scale(0.95);
+    }
+    to {
+        transform: scale(1);
+    }
+}