mi

miniprogram/src/pages/services/index.tsx

@@ -0,0 +1,102 @@
+import { View, Text, Image, Button } from '@tarojs/components'
+import Taro, { useLoad } from '@tarojs/taro'
+import { useState } from 'react'
+import { getServices } from '../../api'
+import './index.scss'
+
+export default function ServicesIndex() {
+  const [services, setServices] = useState<any[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useLoad(() => {
+    fetchServices()
+  })
+
+  const fetchServices = async () => {
+    try {
+      const res: any = await getServices()
+      // Adapt API response if needed (res.data vs res)
+      setServices(res.results || res)
+    } catch (err) {
+      console.error(err)
+      Taro.showToast({ title: '加载失败', icon: 'none' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const goDetail = (id: number) => {
+    Taro.navigateTo({ url: `/pages/services/detail?id=${id}` })
+  }
+
+  if (loading) return <View className='page-container'><Text style={{color:'#fff'}}>Loading...</Text></View>
+
+  return (
+    <View className='page-container'>
+      <View className='header'>
+        <Text className='title'>AI 全栈<Text className='highlight'>解决方案</Text></Text>
+        <Text className='subtitle'>从数据处理到模型部署，我们为您提供一站式 AI 基础设施服务。</Text>
+      </View>
+
+      <View className='service-grid'>
+        {services.map((item) => (
+          <View 
+            key={item.id} 
+            className='service-card'
+            style={{ 
+              border: `1px solid ${item.color}33`,
+              boxShadow: `0 0 20px ${item.color}11`
+            }}
+            onClick={() => goDetail(item.id)}
+          >
+            <View className='hud-corner tl' style={{ borderColor: item.color }} />
+            <View className='hud-corner br' style={{ borderColor: item.color }} />
+
+            <View className='card-header'>
+              <View className='icon-box' style={{ background: `${item.color}22` }}>
+                {item.icon_url ? (
+                   <Image src={item.icon_url} className='icon-img' mode='aspectFit' />
+                ) : (
+                   <View className='icon-placeholder' style={{ background: item.color }} />
+                )}
+              </View>
+              <Text className='title'>{item.title}</Text>
+            </View>
+
+            <Text className='description'>{item.description}</Text>
+
+            <View className='features'>
+              {item.features && item.features.split('\n').map((feat: string, i: number) => (
+                <View key={i} className='feature-item' style={{ color: item.color }}>
+                  <View className='dot' style={{ background: item.color }} />
+                  <Text>{feat}</Text>
+                </View>
+              ))}
+            </View>
+
+            <Button className='btn-more'>了解更多 {'>'}</Button>
+          </View>
+        ))}
+      </View>
+
+      <View className='process-section'>
+        <Text className='section-title'>服务流程</Text>
+        <View className='process-steps'>
+           {[
+            { title: '需求分析', desc: '深度沟通需求', id: 1 },
+            { title: '数据准备', desc: '高效数据处理', id: 2 },
+            { title: '模型训练', desc: '高性能算力', id: 3 },
+            { title: '测试验证', desc: '多维精度测试', id: 4 },
+            { title: '私有化部署', desc: '全栈落地部署', id: 5 }
+          ].map((step) => (
+            <View key={step.id} className='step-item'>
+              <View className='step-icon'><Text>{step.id}</Text></View>
+              <Text className='step-title'>{step.title}</Text>
+              <Text className='step-desc'>{step.desc}</Text>
+            </View>
+          ))}
+        </View>
+      </View>
+    </View>
+  )
+}