zyuas.com/zyuas-neo/src/views/AIDevelopment/Index.vue

<template>
  <div class="ai-development-page">
    <div class="banner container-fluid text-center">
      <h1>AI 定制开发</h1>
      <p>AI Custom Development</p>
    </div>

    <div class="container section">
      <el-row :gutter="30">
        <el-col :xs="24" :md="12">
          <el-card class="ai-card" shadow="hover">
            <router-link to="/ai-development/rag" class="ai-link">
              <div class="ai-icon">
                <el-icon><DataAnalysis /></el-icon>
              </div>
              <h2>RAG 检索增强生成</h2>
              <p>基于企业私有知识库的智能问答系统</p>
            </router-link>
          </el-card>
        </el-col>
        <el-col :xs="24" :md="12">
          <el-card class="ai-card" shadow="hover">
            <router-link to="/ai-development/app" class="ai-link">
              <div class="ai-icon">
                <el-icon><Platform /></el-icon>
              </div>
              <h2>AI 应用开发</h2>
              <p>定制化 AI 智能体与应用开发服务</p>
            </router-link>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { DataAnalysis, Platform } from '@element-plus/icons-vue'
</script>

<style lang="scss">
.ai-development-page {
  width: 100%;
}

.banner {
  padding: 80px 0;
  color: #fff;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-size: cover;
  background-position: center;
  
  @include mobile {
    padding: $spacer-4 0;
  }
  
  h1 {
    font-size: $font-size-3xl;
    font-weight: $font-weight-bold;
    margin-bottom: 10px;
    letter-spacing: 2px;
  }
  
  p {
    font-size: $font-size-base;
    opacity: 0.8;
    letter-spacing: 1px;
  }
}

.section {
  padding: $spacer-6 0;
}

.ai-card {
  margin-bottom: $spacer-3;
  border-radius: $radius-lg;
  overflow: hidden;
  height: 300px;
  
  :deep(.el-card__body) {
    padding: 0;
    height: 100%;
  }
}

.ai-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: $spacer-4;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f2 100%);
  transition: $transition-bounce;
  
  &:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
  }
}

.ai-icon {
  width: 80px;
  height: 80px;
  background: $primary-gradient;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: $spacer-3;
  transition: $transition-bounce;
  
  .el-icon {
    font-size: 40px;
    color: #fff;
  }
  
  &:hover {
    background: #fff;
    transform: scale(1.1);
    
    .el-icon {
      color: $primary-color;
    }
  }
}

.ai-link h2 {
  font-size: $font-size-xl;
  font-weight: 700;
  margin-bottom: 12px;
}

.ai-link p {
  font-size: $font-size-sm;
  opacity: 0.8;
  text-align: center;
}
</style>