From 62c7022d23f94493676f25352cfd9b434ad7bfe5 Mon Sep 17 00:00:00 2001
From: xiaoma <maruijiang666@google.com>
Date: Mon, 2 Feb 2026 21:44:40 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=20AIservicesPage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                            |   8 ++
 frontend/src/pages/AIServices.jsx    | 122 ++++++++++++++++++++-------
 frontend/src/pages/ServiceDetail.jsx |  41 +++++++--
 3 files changed, 134 insertions(+), 37 deletions(-)

diff --git a/README.md b/README.md
index ffe957c..35048e2 100644
--- a/README.md
+++ b/README.md
@@ -159,6 +159,14 @@ qweasdzxc1
 - `POST /api/payments/initiate/` - 发起支付
 - `POST /api/payments/confirm/` - 确认支付
 
+
+## 上传图片接口  不要乱传文件，造成oss存储费用增加
+### 上传硬件的3D文件（小智参数）    zip压缩包，包含3文件和材质文件
+- `POST https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/market_page/hardware_xiaozhi/product_3D_image` - 上传3D文件
+
+### 上传硬件的图片（小智参数）    单张图片
+- `POST https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/market_page/hardware_xiaozhi/product_image` - 上传图片
+
 ## 🎯 使用说明
 
 ### 推广码功能
diff --git a/frontend/src/pages/AIServices.jsx b/frontend/src/pages/AIServices.jsx
index a2a7f3d..0d19caf 100644
--- a/frontend/src/pages/AIServices.jsx
+++ b/frontend/src/pages/AIServices.jsx
@@ -1,7 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { Row, Col, Typography, Button, Spin } from 'antd';
 import { motion } from 'framer-motion';
-import { RightOutlined } from '@ant-design/icons';
+import { 
+  RightOutlined, 
+  SearchOutlined, 
+  DatabaseOutlined, 
+  ThunderboltOutlined, 
+  CheckCircleOutlined, 
+  CloudServerOutlined 
+} from '@ant-design/icons';
 import { getServices } from '../api';
 import { useNavigate } from 'react-router-dom';
 
@@ -127,41 +134,96 @@ const AIServices = () => {
         ))}
       </Row>
 
-      {/* 动态流程图模拟 */}
+      {/* 动态流程图优化 */}
       <motion.div 
-        initial={{ opacity: 0, y: 50 }}
-        whileInView={{ opacity: 1, y: 0 }}
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
         viewport={{ once: true }}
-        transition={{ duration: 0.8 }}
-        style={{ marginTop: 80, padding: 40, background: 'rgba(0,0,0,0.3)', borderRadius: 20, border: '1px dashed #333', textAlign: 'center' }}
+        transition={{ duration: 1 }}
+        style={{ 
+          marginTop: 100, 
+          padding: '60px 20px', 
+          background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,185,107,0.05) 100%)', 
+          borderRadius: 30, 
+          border: '1px solid rgba(255,255,255,0.05)',
+          position: 'relative',
+          overflow: 'hidden'
+        }}
       >
-        <Title level={3} style={{ color: '#fff', marginBottom: 40 }}>服务流程</Title>
-        <Row justify="space-around" align="middle" gutter={[20, 20]}>
-           {['需求分析', '数据准备', '模型训练', '测试验证', '私有化部署'].map((step, i) => (
-             <Col key={i} xs={12} md={4}>
-               <div style={{ 
-                 width: '100%', aspectRatio: '1', 
-                 border: '2px solid #333', borderRadius: '50%', 
-                 display: 'flex', alignItems: 'center', justifyContent: 'center',
-                 color: '#888', fontSize: 16, fontWeight: 'bold',
-                 position: 'relative'
-               }}>
-                 {step}
-                 {/* 简单的连接线模拟 */}
-                 {i < 4 && (
-                   <div className="process-arrow" style={{ 
-                     position: 'absolute', right: -20, top: '50%', 
-                     width: 20, height: 2, background: '#333', 
-                     display: 'none' // 移动端隐藏
-                   }} />
-                 )}
-               </div>
-             </Col>
-           ))}
+        <div style={{ position: 'absolute', top: -50, right: -50, width: 200, height: 200, background: 'radial-gradient(circle, rgba(0,240,255,0.1) 0%, transparent 70%)', filter: 'blur(30px)' }} />
+        
+        <Title level={2} style={{ color: '#fff', marginBottom: 60, textAlign: 'center' }}>
+          <span className="neon-text-green">服务流程</span>
+        </Title>
+
+        <Row justify="center" gutter={[0, 40]} style={{ position: 'relative' }}>
+          {[
+            { title: '需求分析', icon: <SearchOutlined />, desc: '深度沟通需求' },
+            { title: '数据准备', icon: <DatabaseOutlined />, desc: '高效数据处理' },
+            { title: '模型训练', icon: <ThunderboltOutlined />, desc: '高性能算力' },
+            { title: '测试验证', icon: <CheckCircleOutlined />, desc: '多维精度测试' },
+            { title: '私有化部署', icon: <CloudServerOutlined />, desc: '全栈落地部署' }
+          ].map((step, i) => (
+            <Col key={i} xs={24} sm={12} md={4}>
+              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
+                <motion.div
+                  initial={{ scale: 0, opacity: 0 }}
+                  whileInView={{ scale: 1, opacity: 1 }}
+                  transition={{ delay: i * 0.2, type: 'spring', stiffness: 100 }}
+                  whileHover={{ y: -10 }}
+                  style={{
+                    width: 80,
+                    height: 80,
+                    borderRadius: '24px',
+                    background: 'rgba(255, 255, 255, 0.03)',
+                    border: '1px solid rgba(0, 185, 107, 0.3)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: 32,
+                    color: '#00b96b',
+                    marginBottom: 20,
+                    boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
+                    backdropFilter: 'blur(10px)',
+                    zIndex: 2
+                  }}
+                >
+                  {step.icon}
+                </motion.div>
+                
+                <motion.div
+                  initial={{ opacity: 0, y: 10 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  transition={{ delay: i * 0.2 + 0.3 }}
+                >
+                  <div style={{ color: '#fff', fontSize: 18, fontWeight: 'bold', marginBottom: 8 }}>{step.title}</div>
+                  <div style={{ color: '#666', fontSize: 12 }}>{step.desc}</div>
+                </motion.div>
+
+                {/* 连接线 */}
+                {i < 4 && (
+                  <div className="process-line" style={{
+                    position: 'absolute',
+                    top: 40,
+                    right: '-50%',
+                    width: '100%',
+                    height: '2px',
+                    background: 'linear-gradient(90deg, #00b96b33, #00b96b00)',
+                    zIndex: 1,
+                    display: 'none'
+                  }} />
+                )}
+              </div>
+            </Col>
+          ))}
         </Row>
+
         <style>{`
           @media (min-width: 768px) {
-            .process-arrow { display: block !important; }
+            .process-line { display: block !important; }
+          }
+          .neon-text-green {
+            text-shadow: 0 0 10px rgba(0, 185, 107, 0.5);
           }
         `}</style>
       </motion.div>
diff --git a/frontend/src/pages/ServiceDetail.jsx b/frontend/src/pages/ServiceDetail.jsx
index e8f7ed9..a1e2631 100644
--- a/frontend/src/pages/ServiceDetail.jsx
+++ b/frontend/src/pages/ServiceDetail.jsx
@@ -97,13 +97,28 @@ const ServiceDetail = () => {
                         {service.description}
                     </Paragraph>
                     
-                    <div style={{ marginTop: 30, background: 'rgba(255,255,255,0.05)', padding: 20, borderRadius: 12 }}>
-                        <Title level={4} style={{ color: '#fff' }}>服务详情</Title>
-                        <Descriptions column={1} labelStyle={{ color: '#888' }} contentStyle={{ color: '#fff' }}>
-                            <Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><ClockCircleOutlined style={{ marginRight: 8 }} /> 交付周期</span>}>
+                    <div style={{ 
+                        marginTop: 30, 
+                        background: 'rgba(255,255,255,0.03)', 
+                        padding: '24px', 
+                        borderRadius: 16, 
+                        border: '1px solid rgba(255,255,255,0.08)',
+                        backdropFilter: 'blur(10px)',
+                        boxShadow: '0 8px 32px rgba(0,0,0,0.2)'
+                    }}>
+                        <Title level={4} style={{ color: '#fff', marginBottom: 20, display: 'flex', alignItems: 'center' }}>
+                            <div style={{ width: 4, height: 18, background: service.color, marginRight: 10, borderRadius: 2 }} />
+                            服务详情
+                        </Title>
+                        <Descriptions 
+                            column={1} 
+                            labelStyle={{ color: '#888', fontWeight: 'normal' }} 
+                            contentStyle={{ color: '#fff', fontWeight: '500' }}
+                        >
+                            <Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><ClockCircleOutlined style={{ marginRight: 8, color: service.color }} /> 交付周期</span>}>
                                 {service.delivery_time || '待沟通'}
                             </Descriptions.Item>
-                            <Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><GiftOutlined style={{ marginRight: 8 }} /> 交付内容</span>}>
+                            <Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><GiftOutlined style={{ marginRight: 8, color: service.color }} /> 交付内容</span>}>
                                 {service.delivery_content || '根据需求定制'}
                             </Descriptions.Item>
                         </Descriptions>
@@ -147,9 +162,21 @@ const ServiceDetail = () => {
                             <span style={{ color: '#888', marginLeft: 8 }}>/ {service.unit} 起</span>
                         </div>
                         
-                        <div style={{ marginBottom: 20 }}>
+                        <div style={{ marginBottom: 25, display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
                             {service.features_list && service.features_list.map((feat, i) => (
-                                <Tag color={service.color} key={i} style={{ marginBottom: 8, padding: '4px 10px' }}>
+                                <Tag 
+                                    key={i} 
+                                    style={{ 
+                                        margin: 0,
+                                        padding: '4px 12px',
+                                        background: `${service.color}11`,
+                                        color: service.color,
+                                        border: `1px solid ${service.color}66`,
+                                        borderRadius: '6px',
+                                        fontSize: '14px',
+                                        backdropFilter: 'blur(4px)'
+                                    }}
+                                >
                                     {feat}
                                 </Tag>
                             ))}