From c547081aa61be5c7b6d4c12853c675954c2156eb Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 10 Feb 2026 14:45:18 +0800
Subject: [PATCH] 1

---
 src/views/home/index.vue |  471 +++++++++++++++++++++++++++++++++++++++++-----------------
 1 files changed, 332 insertions(+), 139 deletions(-)

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index dcf33bf..c267f41 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -268,42 +268,58 @@
 ])
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .home {
     min-height: 100vh;
-    background: #f7f7f7;
+    background: $main_background;
     padding-bottom: 56px;
 }
 
 .header {
     display: flex;
     align-items: center;
-    padding: 12px 16px;
-    background: #fff;
+    padding: 16px 20px;
+    background: $main_background;
     position: sticky;
     top: 0;
     z-index: 100;
+    border-bottom: 1px solid rgba(118, 128, 143, 0.1);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
 }
 
 .avatar {
-    width: 32px;
-    height: 32px;
-    border-radius: 16px;
-    background: #f5f5f5;
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+    background: rgba(146, 209, 255, 0.08);
     display: flex;
     align-items: center;
     justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover {
+        background: rgba(146, 209, 255, 0.12);
+        transform: scale(1.05);
+    }
 }
 
 .search-box {
     flex: 1;
     display: flex;
     align-items: center;
-    background: #f5f5f5;
-    border-radius: 16px;
+    background: $input_background;
+    border-radius: 12px;
     margin: 0 12px;
-    padding: 6px 12px;
-    height: 32px;
+    padding: 10px 16px;
+    height: 40px;
+    border: 1px solid rgba(118, 128, 143, 0.1);
+    transition: all 0.2s ease;
+    
+    &:focus-within {
+        border-color: rgba(146, 209, 255, 0.3);
+        box-shadow: 0 0 0 3px rgba(146, 209, 255, 0.1);
+    }
 }
 
 .search-box input {
@@ -312,122 +328,199 @@
     margin-left: 8px;
     width: 100%;
     font-size: 14px;
-    color: #333;
-}
-
-.search-box input::placeholder {
-    color: #999;
+    color: $text_color;
+    
+    &::placeholder {
+        color: $text_color1;
+    }
 }
 
 .header-right {
     display: flex;
-    gap: 16px;
-    color: #666;
+    gap: 12px;
+    color: $text_color1;
+    
+    svg {
+        cursor: pointer;
+        transition: all 0.2s ease;
+        
+        &:hover {
+            color: $color_main;
+            transform: scale(1.1);
+        }
+    }
 }
 
 .gift-banner {
-    margin: 12px;
-    background: #fff;
-    border-radius: 12px;
-    padding: 16px;
+    margin: 16px 20px;
+    background: linear-gradient(135deg, rgba(146, 209, 255, 0.1) 0%, rgba(123, 184, 255, 0.05) 100%);
+    border-radius: 16px;
+    padding: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+    border: 1px solid rgba(146, 209, 255, 0.15);
+    transition: all 0.3s ease;
+    
+    &:hover {
+        box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
+        transform: translateY(-2px);
+    }
 }
 
 .gift-left {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 16px;
 }
 
 .gift-icon {
-    color: #ff6b00;
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
 }
 
 .gift-amount {
-    font-size: 16px;
-    font-weight: 600;
-    color: #333;
+    font-size: 18px;
+    font-weight: 700;
+    color: $text_color;
+    letter-spacing: -0.3px;
 }
 
 .gift-desc {
-    font-size: 12px;
-    color: #999;
-    margin-top: 4px;
+    font-size: 13px;
+    color: $text_color1;
+    margin-top: 6px;
 }
 
 .register-btn {
-    background: #000;
+    background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
     color: #fff;
     border: none;
-    padding: 8px 20px;
-    border-radius: 4px;
+    padding: 10px 24px;
+    border-radius: 12px;
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 600;
+    box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    
+    &:hover {
+        background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
+        box-shadow: 0 6px 16px rgba(146, 209, 255, 0.4);
+        transform: translateY(-1px);
+    }
+    
+    &:active {
+        transform: translateY(0);
+    }
 }
 
 .nav-section {
-    background: #fff;
-    padding: 20px 16px 12px;
+    background: $main_background;
+    padding: 24px 20px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    gap: 16px 0;
+    gap: 20px 0;
 }
 
 .nav-item {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 6px;
+    gap: 8px;
+    cursor: pointer;
+    padding: 12px;
+    border-radius: 12px;
+    transition: all 0.2s ease;
+    
+    &:hover {
+        background: rgba(146, 209, 255, 0.05);
+        transform: translateY(-2px);
+    }
+    
+    svg {
+        transition: all 0.2s ease;
+    }
+    
+    &:hover svg {
+        color: $color_main;
+        transform: scale(1.1);
+    }
 }
 
 .nav-name {
-    font-size: 12px;
-    color: #333;
+    font-size: 13px;
+    color: $text_color;
+    font-weight: 500;
 }
 
 .banner-section {
-    margin: 12px;
+    margin: 0 20px 16px;
 }
 
 .banner-item {
-    background: #fff;
-    border-radius: 12px;
-    padding: 20px;
+    background: $main_background;
+    border-radius: 16px;
+    padding: 24px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+    border: 1px solid rgba(118, 128, 143, 0.1);
+    transition: all 0.3s ease;
+    
+    &:hover {
+        box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
+        transform: translateY(-2px);
+    }
 }
 
 .banner-tag {
     display: inline-flex;
     align-items: center;
-    gap: 4px;
-    background: #fff0e5;
+    gap: 6px;
+    background: linear-gradient(135deg, rgba(255, 107, 0, 0.15) 0%, rgba(255, 107, 0, 0.08) 100%);
     color: #ff6b00;
-    padding: 4px 8px;
-    border-radius: 4px;
+    padding: 6px 12px;
+    border-radius: 8px;
     font-size: 12px;
+    font-weight: 600;
+    border: 1px solid rgba(255, 107, 0, 0.2);
 }
 
 .banner-title {
-    margin: 12px 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: #333;
+    margin: 16px 0;
+    font-size: 18px;
+    font-weight: 700;
+    color: $text_color;
+    letter-spacing: -0.3px;
 }
 
 .join-btn {
     border: none;
     background: transparent;
-    color: #666;
-    padding: 4px 0;
+    color: $color_main;
+    padding: 6px 0;
     display: flex;
     align-items: center;
+    gap: 4px;
     font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover {
+        color: #7BB8FF;
+        gap: 8px;
+    }
 }
 
 .banner-right img {
@@ -437,16 +530,22 @@
 }
 
 .market-section {
-    background: #fff;
-    margin-top: 12px;
+    background: $main_background;
+    margin-top: 0;
+    border-radius: 16px;
+    margin: 0 20px 16px;
+    box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+    border: 1px solid rgba(118, 128, 143, 0.1);
+    overflow: hidden;
 }
 
 .market-tabs {
     display: flex;
-    padding: 0 16px;
-    border-bottom: 1px solid #f0f0f0;
+    padding: 0 20px;
+    border-bottom: 1px solid rgba(118, 128, 143, 0.1);
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
+    background: $main_background;
 }
 
 .market-tabs::-webkit-scrollbar {
@@ -454,16 +553,19 @@
 }
 
 .tab-item {
-    padding: 12px 16px;
+    padding: 16px 20px;
     font-size: 14px;
-    color: #666;
+    color: $text_color1;
     position: relative;
     white-space: nowrap;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-weight: 500;
 }
 
 .tab-item.active {
-    color: #333;
-    font-weight: 600;
+    color: $color_main;
+    font-weight: 700;
 }
 
 .tab-item.active::after {
@@ -472,50 +574,63 @@
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
-    width: 20px;
-    height: 2px;
-    background: #000;
-    border-radius: 1px;
+    width: 24px;
+    height: 3px;
+    background: $color_main;
+    border-radius: 2px;
 }
 
 .market-item {
     display: flex;
     justify-content: space-between;
-    padding: 16px;
-    border-bottom: 1px solid #f0f0f0;
+    padding: 20px;
+    border-bottom: 1px solid rgba(118, 128, 143, 0.1);
+    transition: all 0.2s ease;
+    cursor: pointer;
+    
+    &:hover {
+        background: rgba(146, 209, 255, 0.03);
+    }
+    
+    &:last-child {
+        border-bottom: none;
+    }
 }
 
 .stock-name {
     font-size: 16px;
-    color: #333;
-    font-weight: 500;
+    color: $text_color;
+    font-weight: 600;
+    letter-spacing: -0.2px;
 }
 
 .stock-code {
     font-size: 12px;
-    color: #999;
-    margin-top: 4px;
+    color: $text_color1;
+    margin-top: 6px;
 }
 
 .current-price {
     font-size: 16px;
     text-align: right;
-    color: #333;
-    font-weight: 500;
+    color: $text_color;
+    font-weight: 600;
+    letter-spacing: -0.2px;
 }
 
 .price-change {
-    font-size: 12px;
+    font-size: 13px;
     text-align: right;
-    margin-top: 4px;
+    margin-top: 6px;
+    font-weight: 600;
 }
 
 .up {
-    color: #00c087;
+    color: $green;
 }
 
 .down {
-    color: #ff6b6b;
+    color: $red;
 }
 
 .bottom-nav {
@@ -544,32 +659,44 @@
 }
 
 .section-block {
-    background: #fff;
-    margin-top: 12px;
-    padding: 16px;
+    background: $main_background;
+    margin: 0 20px 16px;
+    padding: 20px;
+    border-radius: 16px;
+    box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+    border: 1px solid rgba(118, 128, 143, 0.1);
 }
 
 .section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 16px;
+    margin-bottom: 20px;
 }
 
 .section-header h3 {
-    font-size: 16px;
-    font-weight: 600;
-    color: #333;
+    font-size: 18px;
+    font-weight: 700;
+    color: $text_color;
+    letter-spacing: -0.3px;
 }
 
 .more-btn {
     border: none;
     background: transparent;
-    color: #999;
+    color: $text_color1;
     font-size: 14px;
     display: flex;
     align-items: center;
     gap: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-weight: 500;
+    
+    &:hover {
+        color: $color_main;
+        gap: 6px;
+    }
 }
 
 /* 跟单样式 */
@@ -583,9 +710,18 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 12px;
-    background: #f8f9fa;
-    border-radius: 8px;
+    padding: 16px;
+    background: $main2_background;
+    border-radius: 12px;
+    border: 1px solid rgba(118, 128, 143, 0.1);
+    transition: all 0.3s ease;
+    cursor: pointer;
+    
+    &:hover {
+        box-shadow: 0 4px 12px rgba(146, 209, 255, 0.08);
+        transform: translateY(-2px);
+        border-color: rgba(146, 209, 255, 0.2);
+    }
 }
 
 .trader-info {
@@ -595,33 +731,53 @@
 }
 
 .trader-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 20px;
+    width: 48px;
+    height: 48px;
+    border-radius: 24px;
     object-fit: cover;
+    border: 2px solid rgba(146, 209, 255, 0.1);
 }
 
 .trader-name {
-    font-size: 15px;
-    font-weight: 500;
-    color: #333;
+    font-size: 16px;
+    font-weight: 600;
+    color: $text_color;
+    letter-spacing: -0.2px;
 }
 
 .trader-stats {
     display: flex;
-    gap: 12px;
-    font-size: 12px;
-    color: #666;
-    margin-top: 4px;
+    gap: 16px;
+    font-size: 13px;
+    color: $text_color1;
+    margin-top: 6px;
+    
+    b {
+        font-weight: 700;
+    }
 }
 
 .follow-btn {
-    background: #f0f0f0;
+    background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
     border: none;
-    padding: 6px 16px;
-    border-radius: 4px;
-    color: #333;
+    padding: 8px 20px;
+    border-radius: 10px;
+    color: #fff;
     font-size: 14px;
+    font-weight: 600;
+    box-shadow: 0 2px 8px rgba(146, 209, 255, 0.3);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    
+    &:hover {
+        background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
+        box-shadow: 0 4px 12px rgba(146, 209, 255, 0.4);
+        transform: translateY(-1px);
+    }
+    
+    &:active {
+        transform: translateY(0);
+    }
 }
 
 /* 理财样式 */
@@ -632,48 +788,77 @@
 }
 
 .finance-card {
-    padding: 16px;
-    background: #f8f9fa;
-    border-radius: 8px;
+    padding: 20px;
+    background: $main2_background;
+    border-radius: 12px;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    border: 1px solid rgba(118, 128, 143, 0.1);
+    transition: all 0.3s ease;
+    cursor: pointer;
+    
+    &:hover {
+        box-shadow: 0 4px 12px rgba(146, 209, 255, 0.08);
+        transform: translateY(-2px);
+        border-color: rgba(146, 209, 255, 0.2);
+    }
 }
 
 .finance-name {
-    font-size: 15px;
-    font-weight: 500;
-    color: #333;
+    font-size: 16px;
+    font-weight: 600;
+    color: $text_color;
+    letter-spacing: -0.2px;
 }
 
 .finance-rate {
-    margin: 8px 0;
+    margin: 12px 0;
 }
 
 .rate-num {
-    font-size: 20px;
-    font-weight: 600;
-    color: #ff6b00;
+    font-size: 24px;
+    font-weight: 700;
+    background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    letter-spacing: -0.5px;
 }
 
 .rate-label {
-    font-size: 12px;
-    color: #999;
-    margin-left: 4px;
+    font-size: 13px;
+    color: $text_color1;
+    margin-left: 6px;
 }
 
 .finance-desc {
-    font-size: 12px;
-    color: #666;
+    font-size: 13px;
+    color: $text_color1;
+    margin-top: 4px;
 }
 
 .invest-btn {
-    background: #000;
+    background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
     color: #fff;
     border: none;
-    padding: 8px 20px;
-    border-radius: 4px;
+    padding: 10px 24px;
+    border-radius: 12px;
     font-size: 14px;
+    font-weight: 600;
+    box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    
+    &:hover {
+        background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
+        box-shadow: 0 6px 16px rgba(146, 209, 255, 0.4);
+        transform: translateY(-1px);
+    }
+    
+    &:active {
+        transform: translateY(0);
+    }
 }
 
 /* 资讯样式 */
@@ -685,14 +870,19 @@
 
 .news-item {
     display: flex;
-    gap: 12px;
-    padding-bottom: 16px;
-    border-bottom: 1px solid #f0f0f0;
-}
-
-.news-item:last-child {
-    border-bottom: none;
-    padding-bottom: 0;
+    gap: 16px;
+    padding: 16px;
+    border-radius: 12px;
+    background: $main2_background;
+    border: 1px solid rgba(118, 128, 143, 0.1);
+    transition: all 0.3s ease;
+    cursor: pointer;
+    
+    &:hover {
+        box-shadow: 0 4px 12px rgba(146, 209, 255, 0.08);
+        transform: translateY(-2px);
+        border-color: rgba(146, 209, 255, 0.2);
+    }
 }
 
 .news-content {
@@ -700,27 +890,30 @@
 }
 
 .news-title {
-    font-size: 15px;
-    color: #333;
-    line-height: 1.4;
+    font-size: 16px;
+    color: $text_color;
+    line-height: 1.5;
+    font-weight: 600;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
+    letter-spacing: -0.2px;
 }
 
 .news-meta {
-    margin-top: 8px;
+    margin-top: 10px;
     font-size: 12px;
-    color: #999;
+    color: $text_color1;
     display: flex;
-    gap: 12px;
+    gap: 16px;
 }
 
 .news-image {
     width: 100px;
     height: 70px;
-    border-radius: 4px;
+    border-radius: 10px;
     object-fit: cover;
+    border: 1px solid rgba(118, 128, 143, 0.1);
 }
 </style>
\ No newline at end of file

--
Gitblit v1.9.3