新增积分系统

shudao-vue-frontend/src/views/mobile/m-Index.vue

@@ -88,16 +88,29 @@
 
           <div class="mobile-service-item mobile-ai-chat-item" @click="goToAIChat">
             <div class="mobile-ai-chat-icon">
-              <img src="@/assets/Chat/29.png" alt="AI问答" class="mobile-chat-icon-img">
+              <img src="@/assets/new_index/chat-icon.png" alt="AI问答" class="mobile-chat-icon-img">
             </div>
             <div class="mobile-ai-chat-images">
-              <img src="@/assets/Chat/30.png" alt="对话1" class="mobile-chat-img mobile-chat-img-back">
-              <img src="@/assets/Chat/31.png" alt="对话2" class="mobile-chat-img mobile-chat-img-front">
+              <img src="@/assets/new_index/chat-img-1.png" alt="对话1" class="mobile-chat-img mobile-chat-img-back">
+              <img src="@/assets/new_index/chat-img-2.png" alt="对话2" class="mobile-chat-img mobile-chat-img-front">
             </div>
             <div class="mobile-service-info mobile-service-info-large">
               <div class="mobile-service-title mobile-service-title-large">AI问答</div>
               <div class="mobile-service-desc mobile-service-desc-large">AI对话助手，智能解答您的问题</div>
             </div>
+            
+            <!-- 波浪效果 -->
+            <div class="mobile-wave-container">
+              <svg class="mobile-wave" viewBox="0 0 1200 120" preserveAspectRatio="none">
+                <path d="M0,0 C150,60 350,0 600,30 C850,60 1050,0 1200,30 L1200,120 L0,120 Z" class="mobile-wave-path mobile-wave1"></path>
+              </svg>
+              <svg class="mobile-wave" viewBox="0 0 1200 120" preserveAspectRatio="none">
+                <path d="M0,0 C150,40 350,20 600,50 C850,80 1050,20 1200,50 L1200,120 L0,120 Z" class="mobile-wave-path mobile-wave2"></path>
+              </svg>
+              <svg class="mobile-wave" viewBox="0 0 1200 120" preserveAspectRatio="none">
+                <path d="M0,20 C150,60 350,40 600,70 C850,100 1050,40 1200,70 L1200,120 L0,120 Z" class="mobile-wave-path mobile-wave3"></path>
+              </svg>
+            </div>
           </div>
         </div>
 
@@ -877,17 +890,19 @@ onBeforeUnmount(() => {
     }
   }
   
-  // AI问答卡片（第2个）- 黑色文字，使用自定义背景
+  // AI问答卡片（第2个）- 使用蓝色渐变背景，与Web端一致
   .mobile-ai-chat-item {
-    background: rgb(235, 243, 255) !important;
+    background: #428EFE !important;
     background-image: none !important;
+    overflow: hidden;
     
     .mobile-ai-chat-icon {
       position: absolute;
-      top: 12px;
-      left: 12px;
+      top: 15px;
+      left: 15px;
       width: 70px;
       height: 70px;
+      z-index: 3;
       
       .mobile-chat-icon-img {
         width: 100%;
@@ -898,18 +913,19 @@ onBeforeUnmount(() => {
     
     .mobile-ai-chat-images {
       position: absolute;
-      top: 30px;
+      top: 20px;
       right: 10px;
-      width: 150px;
-      height: 120px;
+      width: 140px;
+      height: 100px;
+      z-index: 3;
       
       .mobile-chat-img {
         position: absolute;
-        width: 112px;
-        height: 63px; /* 16:9 比例 */
+        width: 90px;
+        height: 50px;
         object-fit: cover;
         border-radius: 6px;
-        border: 3px solid #FFFFFF;
+        border: 2px solid #FFFFFF;
       }
       
       .mobile-chat-img-back {
@@ -920,27 +936,69 @@ onBeforeUnmount(() => {
       }
       
       .mobile-chat-img-front {
-        top: 25px;
-        left: 30px;
+        top: 20px;
+        left: 35px;
         transform: rotate(6deg);
         z-index: 2;
       }
     }
     
     .mobile-service-info-large {
-      bottom: 28px;
+      bottom: 20px;
+      z-index: 3;
+      
       .mobile-service-title-large {
-        color: #000000;
-        font-size: 24px;
+        color: #FFFFFF;
+        font-size: 20px;
         font-weight: 600;
       }
       
       .mobile-service-desc-large {
-        color: #4B5563;
-        font-size: 16px;
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 14px;
         font-weight: 400;
       }
     }
+    
+    /* 波浪效果容器 - 三层堆叠静态效果 */
+    .mobile-wave-container {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 60px;
+      overflow: hidden;
+      z-index: 2;
+      
+      .mobile-wave {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        
+        /* 第一层波浪 - 最底层 */
+        &:nth-child(1) {
+          .mobile-wave-path {
+            fill: rgba(255, 255, 255, 0.1);
+          }
+        }
+        
+        /* 第二层波浪 - 中间层 */
+        &:nth-child(2) {
+          .mobile-wave-path {
+            fill: rgba(255, 255, 255, 0.15);
+          }
+        }
+        
+        /* 第三层波浪 - 最上层 */
+        &:nth-child(3) {
+          .mobile-wave-path {
+            fill: rgba(255, 255, 255, 0.2);
+          }
+        }
+      }
+    }
   }
 }