框架整理完毕

2025-07-08 15:12:54 +08:00
parent da00ee707a
commit 38f67616fc
9 changed files with 316 additions and 30 deletions
--- a/src/expert/index.scss
+++ b/src/expert/index.scss
@@ -0,0 +1,186 @@
+.veteran-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
+  
+  .hero-section {
+    position: relative;
+    padding: 40px 20px 60px;
+    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
+    overflow: hidden;
+    
+    .hero-content {
+      position: relative;
+      z-index: 2;
+      text-align: center;
+      
+      .hero-title {
+        font-size: 28px;
+        font-weight: bold;
+        color: #fff;
+        margin-bottom: 20px;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+      }
+      
+      .hero-subtitle {
+        font-size: 14px;
+        line-height: 1.6;
+        color: rgba(255, 255, 255, 0.9);
+        margin: 0 auto;
+        max-width: 320px;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+      }
+    }
+    
+    .hero-decoration {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      
+      .decoration-circle {
+        position: absolute;
+        top: -50px;
+        right: -50px;
+        width: 150px;
+        height: 150px;
+        border: 2px solid rgba(255, 255, 255, 0.1);
+        border-radius: 50%;
+        animation: rotate 20s linear infinite;
+      }
+      
+      .decoration-star {
+        position: absolute;
+        bottom: 20px;
+        right: 30px;
+        width: 0;
+        height: 0;
+        border-left: 15px solid transparent;
+        border-right: 15px solid transparent;
+        border-bottom: 10px solid rgba(255, 255, 255, 0.1);
+        transform: rotate(35deg);
+        
+        &::before {
+          content: '';
+          position: absolute;
+          left: -15px;
+          top: 3px;
+          width: 0;
+          height: 0;
+          border-left: 15px solid transparent;
+          border-right: 15px solid transparent;
+          border-bottom: 10px solid rgba(255, 255, 255, 0.1);
+          transform: rotate(-70deg);
+        }
+      }
+    }
+  }
+  
+  .veteran-list {
+    padding: 20px 15px;
+    
+    .veteran-card {
+      background: #fff;
+      border-radius: 12px;
+      margin-bottom: 15px;
+      padding: 20px;
+      display: flex;
+      align-items: flex-start;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      border: 2px solid #d32f2f;
+      transition: all 0.3s ease;
+      cursor: pointer;
+      
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+      }
+      
+      .veteran-avatar {
+        flex-shrink: 0;
+        margin-right: 15px;
+        
+        .avatar-img {
+          width: 60px;
+          height: 60px;
+          border-radius: 50%;
+          object-fit: cover;
+          border: 3px solid #d32f2f;
+          background: #f5f5f5;
+        }
+      }
+      
+      .veteran-info {
+        flex: 1;
+        
+        .veteran-name {
+          font-size: 18px;
+          font-weight: bold;
+          color: #d32f2f;
+          margin: 0 0 8px 0;
+        }
+        
+        .veteran-description {
+          font-size: 13px;
+          line-height: 1.5;
+          color: #666;
+          text-align: justify;
+        }
+      }
+    }
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 375px) {
+  .veteran-page {
+    .hero-section {
+      padding: 30px 15px 50px;
+      
+      .hero-content {
+        .hero-title {
+          font-size: 24px;
+        }
+        
+        .hero-subtitle {
+          font-size: 13px;
+        }
+      }
+    }
+    
+    .veteran-list {
+      padding: 15px 10px;
+      
+      .veteran-card {
+        padding: 15px;
+        
+        .veteran-avatar {
+          .avatar-img {
+            width: 50px;
+            height: 50px;
+          }
+        }
+        
+        .veteran-info {
+          .veteran-name {
+            font-size: 16px;
+          }
+          
+          .veteran-description {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+}