feat: 表单优化 - 行业输入框 + AI落地领域复选框
- 将行业从复选框改为文本输入框，支持自由填写 - 优化AI落地领域选项（获客、流程管理、效率提升、其他） - 修复fieldset默认白框样式问题 - 清理旧备份文件 - 添加SEO配置（robots.txt, sitemap.xml） - 添加飞书多维表格集成文档
This commit is contained in:
chiguyong
parent
3faa17db24
commit
db1911b04f
|
|
@ -0,0 +1,24 @@
|
|||
# 菲西尔咨询表单服务环境变量配置
|
||||
# 复制此文件为 .env 并填写实际值
|
||||
|
||||
# 服务配置
|
||||
PORT=4001
|
||||
|
||||
# 飞书应用配置（在飞书开放平台创建应用获取）
|
||||
FEISHU_APP_ID=cli_xxxxxxxxxxxxxxxx
|
||||
FEISHU_APP_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
||||
|
||||
# 飞书多维表格配置
|
||||
# 在飞书多维表格URL中找到 app_token，格式：https://xxx.feishu.cn/bitable/xxxxx
|
||||
FEISHU_BITABLE_APP_TOKEN=basxxxxxxxxxxxxxxxx
|
||||
|
||||
# 多维表格中的数据表 table_id
|
||||
# 在多维表格中点击数据表右上角"..." -> "关于此数据表" -> "数据表 ID"
|
||||
FEISHU_BITABLE_TABLE_ID=tblXXXXXXXXXXXXXX
|
||||
|
||||
# 飞书机器人 Webhook（可选，用于发送即时通知）
|
||||
# 在飞书群中添加自定义机器人获取
|
||||
FEISHU_WEBHOOK_URL=https://open.feishu.cn/open-apis/bot/v2/hook/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
|
||||
|
||||
# 本地数据存储目录
|
||||
DATA_DIR=/opt/ai-landing/data
|
||||
|
|
@ -0,0 +1,296 @@
|
|||
# 飞书多维表格配置指南
|
||||
|
||||
## 一、创建飞书多维表格
|
||||
|
||||
### 1.1 创建多维表格
|
||||
|
||||
1. 登录飞书
|
||||
2. 进入「工作台」→ 搜索「多维表格」
|
||||
3. 点击「新建多维表格」→ 选择「空白数据表」
|
||||
4. 将多维表格命名为「官网客户咨询」
|
||||
|
||||
### 1.2 设置字段
|
||||
|
||||
在数据表中创建以下字段：
|
||||
|
||||
| 序号 | 字段名称 | 字段类型 | 说明 |
|
||||
|------|---------|---------|------|
|
||||
| 1 | 编号 | 自动编号 | 系统自动生成 |
|
||||
| 2 | 姓名 | 文本 | 客户姓名 |
|
||||
| 3 | 手机 | 电话号码 | 客户手机 |
|
||||
| 4 | 邮箱 | 邮箱 | 客户邮箱 |
|
||||
| 5 | 当前使用系统 | 多选 | 物业系统/资管系统/CRM/其他 |
|
||||
| 6 | 系统名称 | 文本 | 其他系统名称 |
|
||||
| 7 | 咨询内容 | 长文本 | 客户留言 |
|
||||
| 8 | 咨询时间 | 创建时间 | 自动记录 |
|
||||
| 9 | 处理状态 | 单选 | 待联系/已联系/已转化/无效线索 |
|
||||
| 10 | 处理备注 | 文本 | 客服跟进记录 |
|
||||
| 11 | 处理人 | 成员 | 负责客服 |
|
||||
| 12 | 跟进时间 | 修改时间 | 最后更新时间 |
|
||||
|
||||
### 1.3 获取多维表格信息
|
||||
|
||||
1. 在浏览器中打开创建的多维表格
|
||||
2. URL 格式：`https://xxx.feishu.cn/bitable/appbXXXXXXXXXXXXXX/baselXXXXXXXXXXXXXX`
|
||||
3. `appbXXXXXXXXXXXXXX` 就是 **BITABLE_APP_TOKEN**
|
||||
4. 点击数据表右上角「...」→「关于此数据表」→「数据表 ID」
|
||||
5. 或者进入数据表后，URL 中的 `tbl` 后面的字符串就是 **BITABLE_TABLE_ID**
|
||||
|
||||
## 二、创建飞书应用
|
||||
|
||||
### 2.1 创建应用
|
||||
|
||||
1. 进入 [飞书开放平台](https://open.feishu.cn/)
|
||||
2. 点击「创建企业自建应用」
|
||||
3. 填写应用名称和描述
|
||||
4. 创建后，进入应用详情页
|
||||
|
||||
### 2.2 获取凭证
|
||||
|
||||
1. 进入「凭证与基础信息」
|
||||
2. 获取 **App ID** 和 **App Secret**
|
||||
|
||||
### 2.3 配置权限
|
||||
|
||||
1. 进入「权限管理」
|
||||
2. 搜索并添加以下权限：
|
||||
- `bitable:app` - 多维表格权限
|
||||
- `contact:user.id:readonly` - 通讯录只读权限
|
||||
- `bitable:table:readonly` - 数据表只读
|
||||
- `bitable:record:create` - 创建记录
|
||||
- `bitable:record:update` - 更新记录
|
||||
|
||||
### 2.4 发布应用
|
||||
|
||||
1. 进入「版本管理与发布」
|
||||
2. 创建新版本
|
||||
3. 填写版本信息
|
||||
4. 提交审核（如果是企业自建应用，通常无需审核直接发布）
|
||||
|
||||
### 2.5 添加应用到多维表格
|
||||
|
||||
1. 打开创建的多维表格
|
||||
2. 点击右上角「...」→「添加应用」
|
||||
3. 搜索并添加刚创建的应用
|
||||
4. 确保应用有「查看和编辑」权限
|
||||
|
||||
## 三、获取 Webhook（可选）
|
||||
|
||||
### 3.1 创建群机器人
|
||||
|
||||
1. 在飞书中创建一个专用群组（如「官网咨询处理群」）
|
||||
2. 点击群设置 → 群机器人 → 添加机器人
|
||||
3. 选择「自定义机器人」
|
||||
4. 设置机器人名称，点击添加
|
||||
5. 复制 Webhook 地址
|
||||
|
||||
### 3.2 Webhook 地址格式
|
||||
|
||||
```
|
||||
https://open.feishu.cn/open-apis/bot/v2/hook/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
|
||||
```
|
||||
|
||||
## 四、环境变量配置
|
||||
|
||||
复制 `.env.example` 为 `.env`，填写配置：
|
||||
|
||||
```bash
|
||||
# 飞书应用凭证
|
||||
FEISHU_APP_ID=cli_xxxxxxxxxxxxxxxx
|
||||
FEISHU_APP_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
||||
|
||||
# 多维表格信息
|
||||
FEISHU_BITABLE_APP_TOKEN=appbXXXXXXXXXXXXXX
|
||||
FEISHU_BITABLE_TABLE_ID=tblXXXXXXXXXXXXXX
|
||||
|
||||
# Webhook（可选）
|
||||
FEISHU_WEBHOOK_URL=https://open.feishu.cn/open-apis/bot/v2/hook/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
|
||||
```
|
||||
|
||||
## 五、启动服务
|
||||
|
||||
### 5.1 安装依赖
|
||||
|
||||
```bash
|
||||
# 仅需要 Python 3.7+（标准库，无需额外安装）
|
||||
python3 --version
|
||||
```
|
||||
|
||||
### 5.2 启动服务
|
||||
|
||||
```bash
|
||||
# 方法一：直接运行
|
||||
python3 consult-service.py
|
||||
|
||||
# 方法二：使用环境变量
|
||||
FEISHU_APP_ID=xxx FEISHU_APP_SECRET=xxx python3 consult-service.py
|
||||
|
||||
# 方法三：使用 .env 文件
|
||||
# 安装 python-dotenv（可选）
|
||||
pip3 install python-dotenv
|
||||
|
||||
# 启动服务
|
||||
python3 consult-service.py
|
||||
```
|
||||
|
||||
### 5.3 验证服务
|
||||
|
||||
```bash
|
||||
# 健康检查
|
||||
curl http://localhost:4001/api/consult/health
|
||||
|
||||
# 测试提交
|
||||
curl -X POST http://localhost:4001/api/consult \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"name": "测试用户",
|
||||
"phone": "13812345678",
|
||||
"email": "test@example.com",
|
||||
"current_system": ["物业系统", "CRM"],
|
||||
"message": "测试咨询内容"
|
||||
}'
|
||||
```
|
||||
|
||||
## 六、配置 Nginx 反向代理（生产环境）
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 443 ssl;
|
||||
server_name your-domain.com;
|
||||
|
||||
location /ai/api/consult {
|
||||
proxy_pass http://127.0.0.1:4001;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
|
||||
# 限制请求体大小
|
||||
client_max_body_size 50k;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 七、数据流程
|
||||
|
||||
```
|
||||
┌─────────────┐
|
||||
│ 用户提交 │
|
||||
│ 表单数据 │
|
||||
└──────┬──────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────┐
|
||||
│ 前端验证 │
|
||||
│ (HTML5 + │
|
||||
│ JavaScript)│
|
||||
└──────┬──────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────┐
|
||||
│ 后端 API │
|
||||
│ /api/consult│
|
||||
└──────┬──────┘
|
||||
│
|
||||
├─────────────────┐
|
||||
│ │
|
||||
▼ ▼
|
||||
┌─────────────┐ ┌─────────────┐
|
||||
│ 本地存储 │ │ 飞书多维 │
|
||||
│ JSON 文件 │ │ 表格 │
|
||||
└─────────────┘ └──────┬──────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────┐
|
||||
│ 飞书通知 │
|
||||
│ (Webhook) │
|
||||
└─────────────┘
|
||||
```
|
||||
|
||||
## 八、故障排查
|
||||
|
||||
### 8.1 常见问题
|
||||
|
||||
**Q: 飞书多维表格写入失败**
|
||||
- 检查 APP_ID 和 APP_SECRET 是否正确
|
||||
- 确认应用已发布并添加到多维表格
|
||||
- 检查权限是否包含 `bitable:record:create`
|
||||
|
||||
**Q: Webhook 通知发送失败**
|
||||
- 确认 Webhook 地址正确
|
||||
- 检查网络是否可访问外网
|
||||
|
||||
**Q: CORS 跨域问题**
|
||||
- 确认后端服务正常运行
|
||||
- 检查 Nginx 配置是否正确转发
|
||||
|
||||
### 8.2 日志查看
|
||||
|
||||
服务运行时会输出详细日志：
|
||||
|
||||
```
|
||||
[2026-05-19 10:00:00] ✓ 飞书 access_token 获取成功
|
||||
[2026-05-19 10:00:01] ✓ 本地保存成功: /opt/ai-landing/data/2026-05.json
|
||||
[2026-05-19 10:00:02] ✓ 飞书多维表格记录创建成功: recXXXXXXXXXXXXXX
|
||||
[2026-05-19 10:00:03] ✓ 飞书通知发送成功
|
||||
```
|
||||
|
||||
## 九、后续扩展
|
||||
|
||||
### 9.1 自动分配处理人
|
||||
|
||||
在 `consult-service.py` 中添加逻辑，根据不同条件自动分配处理人：
|
||||
|
||||
```python
|
||||
def _auto_assign_handler(self, record):
|
||||
# 根据系统类型分配
|
||||
system = record.get("current_system", "")
|
||||
if "物业" in system:
|
||||
return "张三"
|
||||
elif "资管" in system:
|
||||
return "李四"
|
||||
else:
|
||||
return "王五"
|
||||
```
|
||||
|
||||
### 9.2 自动发送邮件通知
|
||||
|
||||
添加邮件通知功能：
|
||||
|
||||
```python
|
||||
import smtplib
|
||||
from email.mime.text import MIMEText
|
||||
|
||||
def send_email_notification(self, record):
|
||||
# 配置邮件服务器
|
||||
smtp_server = os.getenv("SMTP_SERVER")
|
||||
smtp_port = int(os.getenv("SMTP_PORT", 587))
|
||||
smtp_user = os.getenv("SMTP_USER")
|
||||
smtp_password = os.getenv("SMTP_PASSWORD")
|
||||
|
||||
msg = MIMEText(f"新咨询：{record['name']} - {record['phone']}", 'plain')
|
||||
msg['Subject'] = '官网新咨询通知'
|
||||
msg['From'] = smtp_user
|
||||
msg['To'] = 'sales@example.com'
|
||||
|
||||
with smtplib.SMTP(smtp_server, smtp_port) as server:
|
||||
server.starttls()
|
||||
server.login(smtp_user, smtp_password)
|
||||
server.send_message(msg)
|
||||
```
|
||||
|
||||
### 9.3 数据统计
|
||||
|
||||
定期统计咨询数据：
|
||||
|
||||
```python
|
||||
def get_statistics(self):
|
||||
"""获取统计数据"""
|
||||
# 按月统计
|
||||
# 按处理状态统计
|
||||
# 按来源统计
|
||||
pass
|
||||
```
|
||||
|
||||
## 十、联系支持
|
||||
|
||||
如有问题，请联系技术支持。
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
|
|
@ -0,0 +1,412 @@
|
|||
#!/usr/bin/env python3
|
||||
"""
|
||||
菲西尔官网咨询表单接收服务
|
||||
支持飞书多维表格（Bitable）集成
|
||||
"""
|
||||
import json
|
||||
import os
|
||||
import re
|
||||
from datetime import datetime
|
||||
from http.server import HTTPServer, BaseHTTPRequestHandler
|
||||
from typing import Dict, Any, Optional
|
||||
import urllib.request
|
||||
import urllib.error
|
||||
|
||||
|
||||
class FeishuConfig:
|
||||
"""飞书配置"""
|
||||
APP_ID = os.getenv("FEISHU_APP_ID", "")
|
||||
APP_SECRET = os.getenv("FEISHU_APP_SECRET", "")
|
||||
BITABLE_APP_TOKEN = os.getenv("FEISHU_BITABLE_APP_TOKEN", "")
|
||||
BITABLE_TABLE_ID = os.getenv("FEISHU_BITABLE_TABLE_ID", "")
|
||||
WEBHOOK_URL = os.getenv("FEISHU_WEBHOOK_URL", "")
|
||||
|
||||
|
||||
class FeishuBitableClient:
|
||||
"""飞书多维表格客户端"""
|
||||
|
||||
def __init__(self, config: FeishuConfig):
|
||||
self.config = config
|
||||
self.base_url = "https://open.feishu.cn/open-apis"
|
||||
self._access_token: Optional[str] = None
|
||||
|
||||
def get_access_token(self) -> str:
|
||||
"""获取 tenant_access_token"""
|
||||
url = f"{self.base_url}/auth/v3/tenant_access_token/internal"
|
||||
payload = json.dumps({
|
||||
"app_id": self.config.APP_ID,
|
||||
"app_secret": self.config.APP_SECRET
|
||||
}).encode()
|
||||
|
||||
req = urllib.request.Request(url, data=payload, method="POST")
|
||||
req.add_header("Content-Type", "application/json")
|
||||
|
||||
with urllib.request.urlopen(req, timeout=10) as resp:
|
||||
data = json.loads(resp.read())
|
||||
|
||||
if data.get("code") != 0:
|
||||
raise Exception(f"获取飞书 access_token 失败: {data.get('msg')}")
|
||||
|
||||
self._access_token = data["tenant_access_token"]
|
||||
print(f"✓ 成功获取飞书 access_token")
|
||||
return self._access_token
|
||||
|
||||
def _request(self, method: str, path: str, data: Dict = None) -> Dict[str, Any]:
|
||||
"""发送API请求"""
|
||||
if not self._access_token:
|
||||
self.get_access_token()
|
||||
|
||||
url = f"{self.base_url}{path}"
|
||||
payload = json.dumps(data).encode() if data else None
|
||||
|
||||
req = urllib.request.Request(url, data=payload, method=method)
|
||||
req.add_header("Authorization", f"Bearer {self._access_token}")
|
||||
req.add_header("Content-Type", "application/json")
|
||||
|
||||
try:
|
||||
with urllib.request.urlopen(req, timeout=15) as resp:
|
||||
result = json.loads(resp.read())
|
||||
|
||||
if result.get("code") != 0:
|
||||
raise Exception(f"飞书 API 调用失败: {result.get('msg')}")
|
||||
|
||||
return result.get("data", {})
|
||||
except urllib.error.HTTPError as e:
|
||||
error_body = e.read().decode()
|
||||
raise Exception(f"HTTP {e.code}: {error_body}")
|
||||
|
||||
def create_record(self, fields: Dict[str, Any]) -> Dict[str, Any]:
|
||||
"""创建单条记录
|
||||
|
||||
Args:
|
||||
fields: 字段数据
|
||||
|
||||
Returns:
|
||||
创建的记录信息
|
||||
"""
|
||||
path = f"/bitable/v1/apps/{self.config.BITABLE_APP_TOKEN}/tables/{self.config.BITABLE_TABLE_ID}/records"
|
||||
return self._request("POST", path, {"fields": fields})
|
||||
|
||||
def batch_create_records(self, records: list) -> Dict[str, Any]:
|
||||
"""批量创建记录
|
||||
|
||||
Args:
|
||||
records: 记录列表，每条记录包含 fields
|
||||
|
||||
Returns:
|
||||
创建结果
|
||||
"""
|
||||
path = f"/bitable/v1/apps/{self.config.BITABLE_APP_TOKEN}/tables/{self.config.BITABLE_TABLE_ID}/records/batch_create"
|
||||
return self._request("POST", path, {"records": records})
|
||||
|
||||
|
||||
class ConsultService:
|
||||
"""咨询表单服务"""
|
||||
|
||||
def __init__(self):
|
||||
self.feishu_config = FeishuConfig()
|
||||
self.data_dir = "/opt/ai-landing/data"
|
||||
os.makedirs(self.data_dir, exist_ok=True)
|
||||
|
||||
# 初始化飞书客户端
|
||||
self.bitable_client = None
|
||||
if self.feishu_config.APP_ID and self.feishu_config.BITABLE_APP_TOKEN:
|
||||
try:
|
||||
self.bitable_client = FeishuBitableClient(self.feishu_config)
|
||||
print("✓ 飞书多维表格客户端初始化成功")
|
||||
except Exception as e:
|
||||
print(f"⚠ 飞书多维表格初始化失败: {e}")
|
||||
else:
|
||||
print("⚠ 飞书配置未完成，将仅保存本地数据")
|
||||
|
||||
def validate_phone(self, phone: str) -> bool:
|
||||
"""验证手机号"""
|
||||
return bool(re.match(r"^1\d{10}$", phone.strip()))
|
||||
|
||||
def validate_email(self, email: str) -> bool:
|
||||
"""验证邮箱"""
|
||||
if not email:
|
||||
return True # 邮箱为选填
|
||||
return bool(re.match(r"^[^\s@]+@[^\s@]+\.[^\s@]+$", email.strip()))
|
||||
|
||||
def validate_name(self, name: str) -> bool:
|
||||
"""验证姓名"""
|
||||
name = name.strip()
|
||||
return 2 <= len(name) <= 50
|
||||
|
||||
def process_consult(self, data: Dict[str, Any]) -> Dict[str, Any]:
|
||||
"""处理咨询数据
|
||||
|
||||
Args:
|
||||
data: 表单提交的数据
|
||||
|
||||
Returns:
|
||||
处理结果
|
||||
"""
|
||||
# 提取字段
|
||||
name = data.get("name", "").strip()
|
||||
phone = data.get("phone", "").strip()
|
||||
email = data.get("email", "").strip()
|
||||
current_system = data.get("current_system", [])
|
||||
system_name = data.get("system_name", "").strip()
|
||||
message = data.get("message", "").strip()
|
||||
|
||||
# 验证必填字段
|
||||
errors = []
|
||||
if not name or not self.validate_name(name):
|
||||
errors.append("姓名格式不正确（2-50个字符）")
|
||||
if not phone or not self.validate_phone(phone):
|
||||
errors.append("手机号格式不正确")
|
||||
if email and not self.validate_email(email):
|
||||
errors.append("邮箱格式不正确")
|
||||
|
||||
if errors:
|
||||
return {
|
||||
"success": False,
|
||||
"error": "; ".join(errors)
|
||||
}
|
||||
|
||||
# 构建记录
|
||||
record = {
|
||||
"time": datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
|
||||
"name": name,
|
||||
"phone": phone,
|
||||
"email": email,
|
||||
"current_system": ",".join(current_system) if current_system else "",
|
||||
"system_name": system_name,
|
||||
"message": message,
|
||||
"source": "官网表单"
|
||||
}
|
||||
|
||||
# 保存本地
|
||||
self._save_local(record)
|
||||
|
||||
# 同步飞书
|
||||
self._sync_feishu(record)
|
||||
|
||||
# 发送飞书通知
|
||||
if self.feishu_config.WEBHOOK_URL:
|
||||
self._send_feishu_notification(record)
|
||||
|
||||
return {"success": True, "message": "提交成功"}
|
||||
|
||||
def _save_local(self, record: Dict[str, Any]):
|
||||
"""保存到本地文件"""
|
||||
try:
|
||||
month_file = os.path.join(
|
||||
self.data_dir,
|
||||
f"{datetime.now().strftime('%Y-%m')}.json"
|
||||
)
|
||||
|
||||
records = []
|
||||
if os.path.exists(month_file):
|
||||
with open(month_file, 'r', encoding='utf-8') as f:
|
||||
try:
|
||||
records = json.load(f)
|
||||
except json.JSONDecodeError:
|
||||
records = []
|
||||
|
||||
records.append(record)
|
||||
|
||||
with open(month_file, 'w', encoding='utf-8') as f:
|
||||
json.dump(records, f, ensure_ascii=False, indent=2)
|
||||
|
||||
print(f"✓ 本地保存成功: {month_file}")
|
||||
except Exception as e:
|
||||
print(f"⚠ 本地保存失败: {e}")
|
||||
|
||||
def _sync_feishu(self, record: Dict[str, Any]):
|
||||
"""同步到飞书多维表格"""
|
||||
if not self.bitable_client:
|
||||
return
|
||||
|
||||
try:
|
||||
# 构建飞书字段格式
|
||||
fields = {
|
||||
"姓名": record["name"],
|
||||
"手机": record["phone"],
|
||||
"咨询内容": record["message"],
|
||||
"处理状态": "待联系" # 默认状态
|
||||
}
|
||||
|
||||
if record["email"]:
|
||||
fields["邮箱"] = record["email"]
|
||||
|
||||
if record["current_system"]:
|
||||
fields["当前使用系统"] = record["current_system"].split(",")
|
||||
|
||||
if record["system_name"]:
|
||||
fields["系统名称"] = record["system_name"]
|
||||
|
||||
# 创建记录
|
||||
result = self.bitable_client.create_record(fields)
|
||||
record_id = result.get("record", {}).get("record_id", "")
|
||||
print(f"✓ 飞书多维表格记录创建成功: {record_id}")
|
||||
|
||||
except Exception as e:
|
||||
print(f"⚠ 飞书多维表格同步失败: {e}")
|
||||
|
||||
def _send_feishu_notification(self, record: Dict[str, Any]):
|
||||
"""发送飞书机器人通知"""
|
||||
try:
|
||||
systems_text = record["current_system"] or "未填写"
|
||||
|
||||
msg = {
|
||||
"msg_type": "interactive",
|
||||
"card": {
|
||||
"header": {
|
||||
"title": {
|
||||
"tag": "plain_text",
|
||||
"content": "🔔 官网新咨询"
|
||||
},
|
||||
"template": "turquoise"
|
||||
},
|
||||
"elements": [
|
||||
{
|
||||
"tag": "markdown",
|
||||
"content": (
|
||||
f"**客户信息**\n"
|
||||
f"- 姓名：{record['name']}\n"
|
||||
f"- 电话：{record['phone']}\n"
|
||||
f"- 邮箱：{record['email'] or '未填写'}\n\n"
|
||||
f"**业务信息**\n"
|
||||
f"- 当前系统：{systems_text}\n"
|
||||
f"- 系统名称：{record['system_name'] or '无'}\n\n"
|
||||
f"**咨询内容**\n{record['message'] or '无'}\n\n"
|
||||
f"⏰ 时间：{record['time']}"
|
||||
)
|
||||
},
|
||||
{
|
||||
"tag": "action",
|
||||
"actions": [
|
||||
{
|
||||
"tag": "button",
|
||||
"text": {"tag": "plain_text", "content": "📞 立即联系"},
|
||||
"type": "primary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
payload = json.dumps(msg).encode()
|
||||
req = urllib.request.Request(
|
||||
self.feishu_config.WEBHOOK_URL,
|
||||
data=payload,
|
||||
headers={"Content-Type": "application/json"}
|
||||
)
|
||||
|
||||
with urllib.request.urlopen(req, timeout=5) as resp:
|
||||
if resp.status == 200:
|
||||
print("✓ 飞书通知发送成功")
|
||||
else:
|
||||
print(f"⚠ 飞书通知响应异常: {resp.status}")
|
||||
|
||||
except Exception as e:
|
||||
print(f"⚠ 飞书通知发送失败: {e}")
|
||||
|
||||
|
||||
class RequestHandler(BaseHTTPRequestHandler):
|
||||
"""HTTP 请求处理器"""
|
||||
|
||||
def __init__(self, *args, **kwargs):
|
||||
self.service = ConsultService()
|
||||
super().__init__(*args, **kwargs)
|
||||
|
||||
def do_POST(self):
|
||||
"""处理 POST 请求"""
|
||||
if self.path != "/api/consult":
|
||||
self._send(404, {"error": "not found"})
|
||||
return
|
||||
|
||||
# 检查 Content-Length
|
||||
length = int(self.headers.get("Content-Length", 0))
|
||||
if length > 50000: # 限制 50KB
|
||||
self._send(400, {"error": "payload too large"})
|
||||
return
|
||||
if length == 0:
|
||||
self._send(400, {"error": "empty request body"})
|
||||
return
|
||||
|
||||
# 读取请求体
|
||||
body = self.rfile.read(length)
|
||||
|
||||
# 解析 JSON
|
||||
try:
|
||||
data = json.loads(body)
|
||||
except json.JSONDecodeError:
|
||||
self._send(400, {"error": "invalid json"})
|
||||
return
|
||||
|
||||
# 处理咨询
|
||||
result = self.service.process_consult(data)
|
||||
|
||||
if result.get("success"):
|
||||
self._send(200, result)
|
||||
else:
|
||||
self._send(400, result)
|
||||
|
||||
def do_GET(self):
|
||||
"""处理 GET 请求"""
|
||||
if self.path == "/api/consult/health":
|
||||
self._send(200, {"ok": True, "service": "consult-api"})
|
||||
elif self.path == "/api/consult":
|
||||
self._send(200, {
|
||||
"service": "consult-api",
|
||||
"version": "1.0.0",
|
||||
"endpoints": {
|
||||
"POST /api/consult": "提交咨询表单"
|
||||
}
|
||||
})
|
||||
else:
|
||||
self._send(404, {"error": "not found"})
|
||||
|
||||
def do_OPTIONS(self):
|
||||
"""处理 CORS 预检请求"""
|
||||
self.send_response(200)
|
||||
self.send_header("Access-Control-Allow-Origin", "*")
|
||||
self.send_header("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
|
||||
self.send_header("Access-Control-Allow-Headers", "Content-Type")
|
||||
self.send_header("Access-Control-Max-Age", "86400")
|
||||
self.end_headers()
|
||||
|
||||
def _send(self, code: int, data: Dict[str, Any]):
|
||||
"""发送响应"""
|
||||
self.send_response(code)
|
||||
self.send_header("Content-Type", "application/json")
|
||||
self.send_header("Access-Control-Allow-Origin", "*")
|
||||
self.send_header("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
|
||||
self.send_header("Access-Control-Allow-Headers", "Content-Type")
|
||||
self.end_headers()
|
||||
self.wfile.write(json.dumps(data, ensure_ascii=False).encode())
|
||||
|
||||
def log_message(self, fmt, *args):
|
||||
"""自定义日志格式"""
|
||||
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||
print(f"[{timestamp}] {fmt % args}")
|
||||
|
||||
|
||||
def main():
|
||||
"""启动服务"""
|
||||
port = int(os.getenv("PORT", 4001))
|
||||
|
||||
print("=" * 60)
|
||||
print("菲西尔官网咨询表单接收服务")
|
||||
print("=" * 60)
|
||||
print(f"服务地址：http://0.0.0.0:{port}")
|
||||
print(f"API 端点：POST /api/consult")
|
||||
print(f"健康检查：GET /api/consult/health")
|
||||
print("=" * 60)
|
||||
|
||||
server = HTTPServer(("0.0.0.0", port), RequestHandler)
|
||||
|
||||
try:
|
||||
server.serve_forever()
|
||||
except KeyboardInterrupt:
|
||||
print("\n服务已停止")
|
||||
server.shutdown()
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
#!/bin/bash
|
||||
# 菲西尔咨询表单服务 - 快速部署脚本
|
||||
|
||||
set -e
|
||||
|
||||
# 颜色定义
|
||||
RED='\033[0;31m'
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[1;33m'
|
||||
NC='\033[0m' # No Color
|
||||
|
||||
echo -e "${GREEN}========================================${NC}"
|
||||
echo -e "${GREEN}菲西尔咨询表单服务 - 快速部署${NC}"
|
||||
echo -e "${GREEN}========================================${NC}"
|
||||
|
||||
# 检查 Python 版本
|
||||
echo -e "\n${YELLOW}[1/5] 检查 Python 环境...${NC}"
|
||||
python3 --version || {
|
||||
echo -e "${RED}错误: 未找到 Python3${NC}"
|
||||
exit 1
|
||||
}
|
||||
echo -e "${GREEN}✓ Python 检查通过${NC}"
|
||||
|
||||
# 检查环境变量
|
||||
echo -e "\n${YELLOW}[2/5] 检查环境变量...${NC}"
|
||||
|
||||
if [ ! -f .env ]; then
|
||||
echo -e "${YELLOW}未找到 .env 文件，创建示例...${NC}"
|
||||
cp .env.example .env
|
||||
echo -e "${YELLOW}请编辑 .env 文件填写配置${NC}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
source .env
|
||||
|
||||
if [ -z "$FEISHU_APP_ID" ] || [ "$FEISHU_APP_ID" == "cli_xxx" ]; then
|
||||
echo -e "${RED}错误: 请在 .env 中配置 FEISHU_APP_ID${NC}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
if [ -z "$FEISHU_BITABLE_APP_TOKEN" ] || [ "$FEISHU_BITABLE_APP_TOKEN" == "basxxx" ]; then
|
||||
echo -e "${RED}错误: 请在 .env 中配置 FEISHU_BITABLE_APP_TOKEN${NC}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo -e "${GREEN}✓ 环境变量检查通过${NC}"
|
||||
|
||||
# 创建数据目录
|
||||
echo -e "\n${YELLOW}[3/5] 创建数据目录...${NC}"
|
||||
DATA_DIR="${DATA_DIR:-/opt/ai-landing/data}"
|
||||
sudo mkdir -p "$DATA_DIR"
|
||||
sudo chown $(whoami):$(whoami) "$DATA_DIR"
|
||||
echo -e "${GREEN}✓ 数据目录创建成功: $DATA_DIR${NC}"
|
||||
|
||||
# 测试飞书连接
|
||||
echo -e "\n${YELLOW}[4/5] 测试飞书连接...${NC}"
|
||||
python3 -c "
|
||||
from consult_service import ConsultService
|
||||
service = ConsultService()
|
||||
try:
|
||||
token = service.bitable_client.get_access_token()
|
||||
print('✓ 飞书连接测试成功')
|
||||
except Exception as e:
|
||||
print(f'✗ 飞书连接失败: {e}')
|
||||
exit(1)
|
||||
"
|
||||
|
||||
# 启动服务
|
||||
echo -e "\n${YELLOW}[5/5] 启动服务...${NC}"
|
||||
PORT="${PORT:-4001}"
|
||||
echo -e "${GREEN}服务将在端口 $PORT 启动${NC}"
|
||||
echo -e "${GREEN}API 端点: http://localhost:$PORT/api/consult${NC}"
|
||||
echo -e "${GREEN}健康检查: http://localhost:$PORT/api/consult/health${NC}"
|
||||
|
||||
# 使用 nohup 后台运行
|
||||
nohup python3 consult-service.py > service.log 2>&1 &
|
||||
SERVICE_PID=$!
|
||||
|
||||
echo $SERVICE_PID > .service.pid
|
||||
|
||||
sleep 2
|
||||
|
||||
# 检查服务是否启动
|
||||
if ps -p $SERVICE_PID > /dev/null; then
|
||||
echo -e "\n${GREEN}========================================${NC}"
|
||||
echo -e "${GREEN}✓ 服务启动成功！${NC}"
|
||||
echo -e "${GREEN}========================================${NC}"
|
||||
echo -e "进程 ID: $SERVICE_PID"
|
||||
echo -e "日志文件: service.log"
|
||||
echo -e "\n停止服务: kill \$(cat .service.pid)"
|
||||
else
|
||||
echo -e "\n${RED}错误: 服务启动失败${NC}"
|
||||
echo -e "请查看日志: tail -f service.log"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo -e "\n${YELLOW}下一步操作：${NC}"
|
||||
echo "1. 配置 Nginx 反向代理（可选）"
|
||||
echo "2. 设置系统服务自动启动"
|
||||
echo "3. 查看飞书多维表格配置指南: FEISHU_BITABLE_SETUP.md"
|
||||
|
|
@ -0,0 +1,447 @@
|
|||
# 菲西尔官网文案整理
|
||||
|
||||
> 更新时间：2026-05-04
|
||||
|
||||
---
|
||||
|
||||
## 一、企业信息
|
||||
|
||||
### 1.1 公司信息
|
||||
- **公司名：** 上海菲西尔智能科技有限公司
|
||||
- **定位语：** 智能叠加——不推翻重来，在现有系统上叠加 AI 能力
|
||||
|
||||
### 1.2 一句话价值主张
|
||||
|
||||
> **不换系统，2周让AI落地**
|
||||
|
||||
---
|
||||
|
||||
## 二、首页（H1）
|
||||
|
||||
### 2.1 主标题
|
||||
**原文：**
|
||||
> 不推倒重来，只做智能叠加
|
||||
|
||||
**AI味分析：**
|
||||
- ❌ "智能叠加" 太技术化，普通企业主听不懂
|
||||
- ❌ "推倒重来" 是技术语言，不够口语化
|
||||
|
||||
**建议修改：**
|
||||
> 不换系统，也能用上AI
|
||||
|
||||
---
|
||||
|
||||
### 2.2 副标题
|
||||
**原文：**
|
||||
> 在已运转的业务系统之上叠加 AI 智能层。2 周部署，零迁移成本，让旧系统拥有新大脑。
|
||||
|
||||
**AI味分析：**
|
||||
- ❌ "叠加 AI 智能层" 太技术
|
||||
- ❌ "零迁移成本" 是行业术语
|
||||
- ❌ "旧系统拥有新大脑" 过于抽象
|
||||
|
||||
**建议修改：**
|
||||
> 不换现有系统，2周让AI上岗。不用迁移数据，不用重新培训员工。
|
||||
|
||||
---
|
||||
|
||||
### 2.3 CTA按钮
|
||||
| 位置 | 原文 | AI味 | 建议修改 |
|
||||
|------|------|------|---------|
|
||||
| 主按钮 | 获取行业定制方案 | 太正式 | 预约免费诊断 |
|
||||
| 次按钮 | 了解痛点 → | 还行 | 看看适不适合我 → |
|
||||
|
||||
---
|
||||
|
||||
## 三、痛点洞察
|
||||
|
||||
### 3.1 章节标题
|
||||
**原文：** 你的系统，正在偷走你的利润
|
||||
|
||||
**AI味：** "偷走你的利润" 有点夸张，像是在恐吓营销
|
||||
|
||||
**建议修改：**
|
||||
> 你的系统，是不是越用越累？
|
||||
|
||||
---
|
||||
|
||||
### 3.2 章节副标题
|
||||
**原文：** 每一个你习以为常的流程背后，都藏着被浪费的成本和错失的机会。
|
||||
|
||||
**AI味：** 太书面化，像是在写报告
|
||||
|
||||
**建议修改：**
|
||||
> 每天忙成这样，系统帮到你了吗？
|
||||
|
||||
---
|
||||
|
||||
### 3.3 四大痛点
|
||||
|
||||
#### 痛点01
|
||||
| 项目 | 原文 | AI味分析 |
|
||||
|------|------|---------|
|
||||
| **标题** | 每年几十万数据录入费，换来零决策价值 | ⚠️ "几十万"太虚，不如说具体场景 |
|
||||
| **正文** | 物业、资管、CRM 积累了海量数据，却像仓库里的积压库存。记录了一大堆，决策还是靠拍脑袋。 | ❌ "海量数据"、"积压库存"太抽象<br>❌ "决策还是靠拍脑袋"OK |
|
||||
|
||||
**建议修改：**
|
||||
> **标题：** 数据填了一大堆，用的时候找不到
|
||||
>
|
||||
> **正文：** 物业、资管、CRM 记了几年的数据，真正想查一个客户情况的时候，还是要翻半天Excel。数据有了，但用不上。
|
||||
|
||||
---
|
||||
|
||||
#### 痛点02
|
||||
| 项目 | 原文 | AI味分析 |
|
||||
|------|------|---------|
|
||||
| **标题** | 系统越多 盲区越大，管理者像盲人摸象 | ⚠️ "盲人摸象"比喻OK，但"盲区"太抽象 |
|
||||
| **正文** | 报修、资产、客户分属不同系统。永远拼不出完整的业务全景，资源错配成了常态。 | ❌ "业务全景"太虚<br>❌ "资源错配成了常态"像报告 |
|
||||
|
||||
**建议修改：**
|
||||
> **标题：** 系统买了好几个，想看个汇总数据还要手工算
|
||||
>
|
||||
> **正文：** 报修一个系统，资产一个系统，客户又一个系统。想看看这个月整体情况？对不起，要好几天后才能算出来。
|
||||
|
||||
---
|
||||
|
||||
#### 痛点03
|
||||
| 项目 | 原文 | AI味分析 |
|
||||
|------|------|---------|
|
||||
| **标题** | 高薪人才 70% 时间，耗在填表和派单 | ⚠️ "70%"太精确，像是拍脑袋写的 |
|
||||
| **正文** | 招来的专业人才，精力被重复事务榨干。高射炮打蚊子，人效极低，人才流失率越来越高。 | ❌ "高射炮打蚊子"OK<br>❌ "人效极低"太报告化 |
|
||||
|
||||
**建议修改：**
|
||||
> **标题：** 招了人，每天却在做重复的事
|
||||
>
|
||||
> **正文：** 销售每天花2小时录入客户信息，物业员工每天填几十张巡检表。人都招对了，但时间没用在正事上。
|
||||
|
||||
---
|
||||
|
||||
#### 痛点04
|
||||
| 项目 | 原文 | AI味分析 |
|
||||
|------|------|---------|
|
||||
| **标题** | 资深员工一离职，十年经验全清零 | ⚠️ "十年"有点夸张 |
|
||||
| **正文** | 业务精髓藏在老员工脑子里。离职交接靠口口相传，离职后能力断层直接拖垮业务。 | ⚠️ "口口相传"OK<br>❌ "能力断层直接拖垮业务"太吓人 |
|
||||
|
||||
**建议修改：**
|
||||
> **标题：** 老员工一走，业务就卡壳
|
||||
>
|
||||
> **正文：** 经验都在老员工身上，他一休假，所有人等他回来。交接只能靠嘴说，做事的方法没沉淀下来。
|
||||
|
||||
---
|
||||
|
||||
### 3.4 核心洞察框
|
||||
**原文：**
|
||||
> AI 不会取代你的系统，但会让你的系统自己思考。
|
||||
> 不是推倒重来，是让现有的系统拥有大脑。
|
||||
|
||||
**AI味：**
|
||||
- ❌ "让系统自己思考"太科幻
|
||||
- ❌ "让现有的系统拥有大脑"太抽象
|
||||
|
||||
**建议修改：**
|
||||
> 不用换系统，让AI帮你干活。
|
||||
> 重复的事AI干，你做重要的决定。
|
||||
|
||||
---
|
||||
|
||||
## 四、核心服务
|
||||
|
||||
### 4.1 章节标题
|
||||
**原文：** 把 AI 变成你的，核心生产力
|
||||
|
||||
**AI味：** "核心生产力"太虚，像喊口号
|
||||
|
||||
**建议修改：**
|
||||
> 让AI替你干活，你做决定
|
||||
|
||||
---
|
||||
|
||||
### 4.2 章节副标题
|
||||
**原文：** 三个行业场景，一条相同逻辑：不替换，只增强。
|
||||
|
||||
**AI味：** OK，但可以更口语
|
||||
|
||||
**建议修改：**
|
||||
> 不换系统，只让AI帮你提升效率
|
||||
|
||||
---
|
||||
|
||||
### 4.3 服务01：AI+物业
|
||||
|
||||
| 项目 | 原文 | AI味分析 |
|
||||
|------|------|---------|
|
||||
| **指标** | 60% | ⚠️ 这个数字哪来的？没有来源 |
|
||||
| **标题** | AI+物业，智能中枢 | ❌ "智能中枢"太虚 |
|
||||
| **正文** | 工单自动分发，客诉响应提速 60%。在现有物业 ERP 之上叠加 AI 调度层——不改变任何原有流程。巡检路线自动规划、设备故障提前预警。你现有的系统不用换，但效率会翻倍。 | ❌ "叠加 AI 调度层"太技术<br>❌ "巡检路线自动规划"是功能罗列<br>❌ "效率会翻倍"没依据 |
|
||||
| **金句** | "不是换系统，是让系统变聪明。" | ⚠️ "让系统变聪明"有点虚 |
|
||||
|
||||
**建议修改：**
|
||||
> **指标：** 客诉从2小时 → 30分钟
|
||||
>
|
||||
> **标题：** 物业AI帮手
|
||||
>
|
||||
> **正文：** 客户一报修，系统自动判断该派给谁。设备快出问题了，提前提醒你。巡检路线AI规划好，不用人工排。员工还是用原来的系统，只是少了很多麻烦。
|
||||
>
|
||||
> **金句：** 员工说：这系统，终于能帮我干活了。
|
||||
|
||||
---
|
||||
|
||||
### 4.4 服务02：AI+资管
|
||||
|
||||
| 项目 | 原文 | AI味分析 |
|
||||
|------|------|---------|
|
||||
| **指标** | 90 天 | ⚠️ 太抽象 |
|
||||
| **标题** | AI+资管，风控大脑 | ❌ "风控大脑"太虚 |
|
||||
| **正文** | 空置率提前 90 天预警，租金定价误差收窄至 5%。无缝接入资管平台，让历史租赁数据变成预测模型。招商智能匹配、租约到期提醒。 | ❌ "无缝接入"太技术<br>❌ "预测模型"太虚<br>❌ "智能匹配"是功能罗列 |
|
||||
| **金句** | 资管不该靠直觉，该靠数据。 | ⚠️ OK，但不够口语 |
|
||||
|
||||
**建议修改：**
|
||||
> **指标：** 下个月哪些楼层要空，现在就知道
|
||||
>
|
||||
> **标题：** 资管AI帮手
|
||||
>
|
||||
> **正文：** 租约快到期了，系统提前告诉你。哪个楼层可能要空出来，提前做准备。定租金的时候，AI会参考历史数据给你建议。不用天天盯着Excel了。
|
||||
>
|
||||
> **金句：** 老板说：终于不用靠猜了。
|
||||
|
||||
---
|
||||
|
||||
### 4.5 服务03：AI+CRM
|
||||
|
||||
| 项目 | 原文 | AI味分析 |
|
||||
|------|------|---------|
|
||||
| **指标** | 40% | ⚠️ 没来源 |
|
||||
| **标题** | AI+CRM，效率跃升 | ❌ "效率跃升"太虚 |
|
||||
| **正文** | 线索自动清洗，销售人效提升 40%。为现有 CRM 配备 AI 助理——自动捕捉商机、生成对话摘要。销售无需学习新软件，打开原界面就能看到 AI 推荐。 | ❌ "线索自动清洗"太技术<br>❌ "人效提升"没依据<br>❌ "对话摘要"可以更具体 |
|
||||
| **金句** | "销售的时间应该花在客户身上，不是系统里。" | ⚠️ OK |
|
||||
|
||||
**建议修改：**
|
||||
> **指标：** 销售每天多跟进3个客户
|
||||
>
|
||||
> **标题：** CRM AI帮手
|
||||
>
|
||||
> **正文：** 新线索进来了，AI帮你过滤掉假的、重复的。打完电话，AI自动帮你写好跟进记录。打开CRM，推荐你今天最该联系哪些客户。不用学新东西，在原来的界面里多了一个助手。
|
||||
>
|
||||
> **金句：** 销售说：终于不用录系统了。
|
||||
|
||||
---
|
||||
|
||||
## 五、解决路径
|
||||
|
||||
### 5.1 章节标题
|
||||
**原文：** 菲西尔和其他 AI 公司有什么不同
|
||||
|
||||
**AI味：** 有点挑衅，但不是坏事
|
||||
|
||||
**建议修改：**
|
||||
> 我们和别的AI公司有什么不同
|
||||
|
||||
---
|
||||
|
||||
### 5.2 五大差异点
|
||||
|
||||
#### 01 不替换，只叠加
|
||||
| 原文 | AI味分析 |
|
||||
|------|---------|
|
||||
| 通过 API 外挂 AI 层，不停服、不迁移、不改流程。员工用原来的界面，体验无缝升级。 | ❌ "API外挂"太技术<br>❌ "无缝升级"太虚 |
|
||||
|
||||
**建议修改：**
|
||||
> 不动你的系统，在旁边加个AI帮手。你还是用原来的界面，只是多了AI帮你干那些重复的事。
|
||||
|
||||
---
|
||||
|
||||
#### 02 让数据开口说话
|
||||
| 原文 | AI味分析 |
|
||||
|------|---------|
|
||||
| 沉睡的历史数据自动转化为预测模型和决策建议。把事后统计变为事前预警。 | ❌ "预测模型"太虚<br>❌ "事前预警"OK |
|
||||
|
||||
**建议修改：**
|
||||
> 你系统里几年的数据，AI帮你分析。哪个客户可能要流失，哪个楼层可能要空，AI提前告诉你。
|
||||
|
||||
---
|
||||
|
||||
#### 03 让 AI 替你干活
|
||||
| 原文 | AI味分析 |
|
||||
|------|---------|
|
||||
| 高频重复工作交给 AI Agent——智能客服、招商匹配、巡检规划自动运转，人只负责关键决策。 | ❌ "AI Agent"太技术<br>❌ 功能罗列太抽象 |
|
||||
|
||||
**建议修改：**
|
||||
> 那些每天都要做、每次都一样的活，AI帮你干了。比如回复客户常见问题、巡检报告自动生成。AI干完了，你看一眼就行。
|
||||
|
||||
---
|
||||
|
||||
#### 04 跨系统一屏掌控
|
||||
| 原文 | AI味分析 |
|
||||
|------|---------|
|
||||
| 所有业务数据在 AI 层融合。一句自然语言就能查"本月哪些楼宇空置率超标"，告别手动汇总。 | ⚠️ "自然语言"有点虚<br>❌ "告别手动汇总"OK |
|
||||
|
||||
**建议修改：**
|
||||
> 问AI：上个月哪几个客户投诉最多？AI直接给你答案。不用再从好几个系统里导数据、拼表格。
|
||||
|
||||
---
|
||||
|
||||
#### 05 小步试错，大步扩张
|
||||
| 原文 | AI味分析 |
|
||||
|------|---------|
|
||||
| 从单一场景试点，验证有效再扩展。每一步都可衡量投入产出，钱花在刀刃上。 | ⚠️ "小步试错"OK<br>❌ "投入产出"太虚 |
|
||||
|
||||
**建议修改：**
|
||||
> 先在一个场景试，效果好再扩大。不满意可以停，不用一下子投很多钱。
|
||||
|
||||
---
|
||||
|
||||
## 六、GEO（Growth Engineering Optimization）
|
||||
|
||||
### 6.1 章节标题
|
||||
**原文：** 让用户在大模型里，第一个找到你
|
||||
|
||||
**AI味：** 有点绕
|
||||
|
||||
**建议修改：**
|
||||
> 当客户问AI"哪家做物业AI好"，你排第几？
|
||||
|
||||
---
|
||||
|
||||
### 6.2 副标题
|
||||
**原文：** 对内提效降本，对外重塑获客
|
||||
|
||||
**AI味：** 太抽象
|
||||
|
||||
**建议修改：**
|
||||
> 对内：省人工。对外：让新客户主动找上门。
|
||||
|
||||
---
|
||||
|
||||
### 6.3 正文
|
||||
**原文：**
|
||||
> 当客户问 Kimi 或文心一言"帮我找一家做 AI+物业的公司"——你的品牌会不会出现在答案里？我们优化企业在主流大模型中的内容结构与权重，从"搜索排名"进化为"答案占位"。
|
||||
|
||||
**AI味：**
|
||||
- ❌ "内容结构与权重"太技术
|
||||
- ❌ "答案占位"OK但可以更直白
|
||||
|
||||
**建议修改：**
|
||||
> 以前客户上网搜，现在客户问AI。不管客户问Kimi、ChatGPT还是文心一言，当他们问"哪家做物业AI比较好"，你的品牌能不能出现在AI的答案里？
|
||||
>
|
||||
> 我们帮你做这件事。
|
||||
|
||||
---
|
||||
|
||||
### 6.4 金句
|
||||
**原文：** "未来的获客，不是在搜索结果里抢位置，而是在 AI 答案里占一席之地。"
|
||||
|
||||
**AI味：** ⚠️ 逻辑OK，但有点绕
|
||||
|
||||
**建议修改：**
|
||||
> 以后客户找供应商，不只是看网站排名，是问AI推荐。
|
||||
> 你的品牌，能不能被AI推荐？
|
||||
|
||||
---
|
||||
|
||||
## 七、合作咨询
|
||||
|
||||
### 7.1 章节标题
|
||||
**原文：** 15 分钟，看看你的系统，能叠加什么
|
||||
|
||||
**AI味：** ⚠️ "叠加"这个词又出现了
|
||||
|
||||
**建议修改：**
|
||||
> 30分钟，我们看看你的系统能用AI干什么
|
||||
|
||||
---
|
||||
|
||||
### 7.2 正文
|
||||
**原文：** 不推销，只评估，基于你现有架构，给出一份可落地的 AI 叠加建议。
|
||||
|
||||
**AI味：** ⚠️ "可落地的AI叠加建议"太虚
|
||||
|
||||
**建议修改：**
|
||||
> 不卖东西，只帮你分析。先看看你的系统现在什么情况，AI能帮你省多少事、花多少钱。
|
||||
|
||||
---
|
||||
|
||||
### 7.3 表单标签
|
||||
| 原文 | AI味 | 建议修改 |
|
||||
|------|------|---------|
|
||||
| 怎么称呼您 | 太正式 | 您的名字 |
|
||||
| 手机号码 | OK | 手机（方便联系您）|
|
||||
| 邮箱 | OK | 邮箱（选填）|
|
||||
| 你现在用的是哪个系统？ | OK | 简单说说您现在用的什么系统（选填）|
|
||||
|
||||
---
|
||||
|
||||
### 7.4 提交按钮
|
||||
**原文：** 预约诊断名额
|
||||
|
||||
**建议修改：**
|
||||
> 预约免费诊断
|
||||
|
||||
---
|
||||
|
||||
## 八、页脚
|
||||
|
||||
### 原文
|
||||
- 技术支持：上海菲西尔智能科技有限公司
|
||||
- 版权：© 2026 SHANGHAI FISCHER INTELLIGENT TECHNOLOGY CO., LTD.
|
||||
|
||||
**建议修改：**
|
||||
- 公司名保留即可
|
||||
- 版权声明太长了，保留"© 2026 菲西尔智能"
|
||||
|
||||
---
|
||||
|
||||
## 九、总结：AI味识别清单
|
||||
|
||||
### 9.1 问题类型
|
||||
|
||||
| 问题类型 | 示例 | 修改方向 |
|
||||
|---------|------|---------|
|
||||
| **太技术化** | "API外挂"、"AI Agent"、"预测模型" | 翻译成人话 |
|
||||
| **太抽象** | "智能中枢"、"核心生产力"、"风控大脑" | 说具体能干什么 |
|
||||
| **太虚** | "效率翻倍"、"无缝升级"、"让系统变聪明" | 说具体省多少时间 |
|
||||
| **像报告** | "资源错配"、"事前预警"、"投入产出" | 像人说话 |
|
||||
| **数据没来源** | "60%"、"40%"、"70%" | 要么给来源，要么不说 |
|
||||
|
||||
### 9.2 修改原则
|
||||
|
||||
1. **能用对话的，就不用陈述**
|
||||
- ❌ "客诉响应提速60%"
|
||||
- ✅ "客户等了2小时变成30分钟"
|
||||
|
||||
2. **能说人话的，就不说术语**
|
||||
- ❌ "AI调度层"
|
||||
- ✅ "AI帮你派单"
|
||||
|
||||
3. **能用场景的，就不用概念**
|
||||
- ❌ "数据驱动决策"
|
||||
- ✅ "AI帮你分析完，告诉你该联系谁"
|
||||
|
||||
4. **能看懂的，就不解释**
|
||||
- ❌ "自然语言查询"
|
||||
- ✅ "你问AI，AI直接回答"
|
||||
|
||||
---
|
||||
|
||||
## 十、核心价值主张（最终版）
|
||||
|
||||
### 一句话
|
||||
> **不换系统，2周让AI上岗**
|
||||
|
||||
### 一段话
|
||||
> 菲西尔帮你把AI接到你现有的系统里。不用换系统，不用迁移数据，不用重新培训员工。物业、资管、CRM都能用。AI帮你干那些每天重复的事，你做重要的决定。
|
||||
>
|
||||
> 先在一个场景试，效果好再扩大。不满意可以停，不用一下子投很多钱。
|
||||
|
||||
### 金句集合
|
||||
|
||||
| 场景 | 金句 |
|
||||
|------|------|
|
||||
| 物业 | "员工说：这系统，终于能帮我干活了。" |
|
||||
| 资管 | "老板说：终于不用靠猜了。" |
|
||||
| CRM | "销售说：终于不用录系统了。" |
|
||||
| 通用 | "AI干重复的事，人做重要的事。" |
|
||||
| GEO | "以后客户找供应商，是问AI推荐。你的品牌能不能被AI推荐？" |
|
||||
|
||||
---
|
||||
|
||||
*整理时间：2026-05-04*
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
# 文案修改前后对比
|
||||
|
||||
> 更新时间：2026-05-04
|
||||
|
||||
---
|
||||
|
||||
## 一、Hero 区域
|
||||
|
||||
### 1.1 Badge（徽章）
|
||||
|
||||
| 位置 | 修改前 | 修改后 | 问题原因 |
|
||||
|------|--------|--------|---------|
|
||||
| Hero Badge | 企业的 AI 全栈伙伴 | 不换系统，2周让AI上岗 | ❌ 太营销化，像在喊口号 |
|
||||
| | | | ✅ 修改后直接说价值主张 |
|
||||
|
||||
---
|
||||
|
||||
### 1.2 主标题
|
||||
|
||||
| 修改前 | 修改后 | 问题原因 |
|
||||
|--------|--------|---------|
|
||||
| 用 AI 做事 + 被 AI 推荐<br />菲西尔让两者同时发生 | 不换系统<br />2周让AI帮你干活 | ❌ "用AI做事"太抽象<br />❌ "让两者同时发生"像废话<br />❌ "菲西尔让..."主语不对 |
|
||||
| | | ✅ 主语变成"你"，更亲切<br />✅ 直接说"不换系统" |
|
||||
|
||||
---
|
||||
|
||||
### 1.3 副标题
|
||||
|
||||
| 修改前 | 修改后 | 问题原因 |
|
||||
|--------|--------|---------|
|
||||
| 效率 AI：不换系统，24h 内让现有系统拥有 AI 能力<br />获客 AI：被 ChatGPT/Claude 推荐，客户主动找上门 | 物业、资管、CRM，都不用换<br />AI帮你干重复的事，你做重要的决定 | ❌ "效率AI"、"获客AI"是内部术语<br />❌ "24h内"太技术<br />❌ 客户不知道ChatGPT是什么 |
|
||||
| | | ✅ 说具体行业"物业、资管、CRM"<br />✅ 说人话"干重复的事" |
|
||||
|
||||
---
|
||||
|
||||
### 1.4 CTA按钮
|
||||
|
||||
| 位置 | 修改前 | 修改后 | 问题原因 |
|
||||
|------|--------|--------|---------|
|
||||
| 主按钮 | 了解方案 | 看看适不适合我 | ❌ 太正式，像销售<br />❌ "方案"这个词太虚 |
|
||||
| | | | ✅ "看看适不适合我"更真诚 |
|
||||
| 次按钮 | 预约咨询 | 先问问再说 | ❌ "预约咨询"像要去开会 |
|
||||
| | | | ✅ "先问问再说"降低决策压力 |
|
||||
|
||||
---
|
||||
|
||||
### 1.5 核心指标
|
||||
|
||||
| 修改前 | 修改后 | 问题原因 |
|
||||
|--------|--------|---------|
|
||||
| 24h / 效率 AI 上线 | 2周 / 部署上线 | ❌ "24h"太激进，不现实<br />❌ "效率AI上线"术语 |
|
||||
| 3x / 获客增长 | 原系统 / 不用换 | ❌ "3x获客增长"没依据<br />❌ 客户最关心的是"不用换系统" |
|
||||
|
||||
---
|
||||
|
||||
## 二、痛点区域
|
||||
|
||||
### 2.1 章节标题
|
||||
|
||||
| 修改前 | 修改后 | 问题原因 |
|
||||
|--------|--------|---------|
|
||||
| 你的顾虑，我们都懂 | 你的顾虑，我们都知道 | ❌ "都懂"有点油嘴滑舌 |
|
||||
| 效率 AI + 获客 AI，我们都有成熟方案 | 换系统太麻烦，数据迁移风险大，招人贵还没效果 | ❌ 客户不关心"AI"，关心自己的问题<br />✅ 说具体痛点 |
|
||||
|
||||
---
|
||||
|
||||
### 2.2 痛点卡片01
|
||||
|
||||
| 项目 | 修改前 | 修改后 | 问题原因 |
|
||||
|------|--------|--------|---------|
|
||||
| 标题 | 想升级 AI，但不敢换系统？ | 想用AI，但不想换系统 | ❌ "升级AI"太技术<br />❌ "不敢"是在恐吓 |
|
||||
| 正文 | 换了系统要重新培训，历史数据迁移风险大。我们的方案：0数据迁移，原有系统继续用，第二天就能用 AI。 | 系统用习惯了，换了要重新培训，数据迁移还有风险。其实不用换，在旁边加个AI帮手就行。 | ❌ "我们的方案"像推销<br />❌ "0数据迁移"是内部术语<br />✅ 说人话"在旁边加个AI帮手" |
|
||||
|
||||
---
|
||||
|
||||
### 2.3 痛点卡片02
|
||||
|
||||
| 项目 | 修改前 | 修改后 | 问题原因 |
|
||||
|------|--------|--------|---------|
|
||||
| 标题 | 客户越来越少，不知道去哪找？ | 招了人，天天在做重复的事 | ❌ 和GEO内容重复<br />❌ 客户真正痛点是"人没做正事" |
|
||||
| 正文 | SEO 越来越难，AI搜索正在崛起，但不知道怎么优化。我们的方案：交给菲西尔，让 AI推荐你的业务。 | 销售每天录客户信息，物业员工每天填巡检表。人招对了，但时间没用在正事上。 | ❌ SEO、AI搜索是技术术语<br />❌ "让AI推荐"没解释清楚<br />✅ 说具体场景"录客户信息、填巡检表" |
|
||||
|
||||
---
|
||||
|
||||
### 2.4 痛点卡片03
|
||||
|
||||
| 项目 | 修改前 | 修改后 | 问题原因 |
|
||||
|------|--------|--------|---------|
|
||||
| 标题 | 投入太大，效果不确定？ | 投入了没效果，钱打水漂 | ❌ "效果不确定"太抽象 |
|
||||
| 正文 | AI项目失败率高，营销效果难以衡量。我们的方案：按效果付费，没有效果不收费。 | 之前买的系统用不起来，员工不会用也不想用。先试再决定，效果好了再扩大。 | ❌ "AI项目失败率"像在吓唬人<br />❌ "按效果付费"像在承诺<br />✅ 说真实情况"系统用不起来" |
|
||||
|
||||
---
|
||||
|
||||
## 三、解决方案区域
|
||||
|
||||
### 3.1 章节标题
|
||||
|
||||
| 修改前 | 修改后 | 问题原因 |
|
||||
|--------|--------|---------|
|
||||
| 用 AI 做事 + 被 AI 推荐 | 不换系统，让AI帮你干活 | ❌ "用AI做事"太抽象<br />❌ "被AI推荐"客户不关心 |
|
||||
| 效率 AI：让现有系统拥有 AI 能力<br />获客 AI：让 AI 搜索推荐你的业务 | 物业、资管、CRM，都不用换<br />AI帮你干那些每天重复的事 | ❌ "效率AI"、"获客AI"是术语<br />✅ 说具体行业<br />✅ 说人话"干重复的事" |
|
||||
|
||||
---
|
||||
|
||||
### 3.2 服务01
|
||||
|
||||
| 项目 | 修改前 | 修改后 | 问题原因 |
|
||||
|------|--------|--------|---------|
|
||||
| 标题 | 效率 AI | 物业AI帮手 | ❌ "效率AI"是术语 |
|
||||
| 正文 | 在现有系统上叠加 AI 能力，不换系统、不迁数据、不停业务。物业、资管、CRM，24h 内全部升级。 | 客户一报修，系统自动判断该派给谁。设备快出问题了，提前提醒你。巡检路线AI规划好，不用人工排。 | ❌ "叠加AI能力"太技术<br />❌ 功能罗列太抽象<br />✅ 说具体场景"一报修就派单" |
|
||||
| 标签 | 物业系统、资管系统、CRM | 智能派单、设备预警、路线规划 | ❌ "物业系统"没说明白<br />✅ 说具体功能 |
|
||||
|
||||
---
|
||||
|
||||
### 3.3 服务02
|
||||
|
||||
| 项目 | 修改前 | 修改后 | 问题原因 |
|
||||
|------|--------|--------|---------|
|
||||
| 标题 | 获客 AI | 资管AI帮手 | ❌ "获客AI"客户不关心 |
|
||||
| 正文 | AI 时代的 SEO。当潜在客户问 ChatGPT "哪家物业公司好"，你的公司会被主动推荐。 | 租约快到期了，系统提前告诉你。哪个楼层可能要空出来，提前做准备。定租金的时候，AI会参考历史数据给你建议。 | ❌ "AI时代的SEO"客户听不懂<br />❌ "ChatGPT"客户不一定用<br />✅ 说具体场景"租约到期、空置预警" |
|
||||
|
||||
---
|
||||
|
||||
### 3.4 服务03
|
||||
|
||||
| 项目 | 修改前 | 修改后 | 问题原因 |
|
||||
|------|--------|--------|---------|
|
||||
| 标题 | 全都 AI | CRM AI帮手 | ❌ "全都AI"太虚 |
|
||||
| 正文 | 效率 AI + 获客 AI，一个伙伴全搞定。内部效率提升，外部客户主动上门。 | 新线索进来了，AI帮你过滤掉假的、重复的。打完电话，AI自动帮你写好跟进记录。推荐你今天最该联系哪些客户。 | ❌ "一个伙伴全搞定"像口号<br />❌ "内外兼顾"太虚<br />✅ 说具体场景"过滤线索、写跟进记录" |
|
||||
|
||||
---
|
||||
|
||||
## 四、方法区域
|
||||
|
||||
### 4.1 章节标题
|
||||
|
||||
| 修改前 | 修改后 | 问题原因 |
|
||||
|--------|--------|---------|
|
||||
| 效率 AI + 获客 AI | 很简单，三步搞定 | ❌ "效率AI+获客AI"是内部术语 |
|
||||
| 两种服务，两套实施路径，都很快 | 先试再决定，效果好了再扩大 | ❌ "两种服务"客户不关心<br />✅ 说核心理念"先试再决定" |
|
||||
|
||||
---
|
||||
|
||||
### 4.2 步骤01
|
||||
|
||||
| 项目 | 修改前 | 修改后 | 问题原因 |
|
||||
|------|--------|--------|---------|
|
||||
| 标签 | 效率 AI | 第一步 | ❌ 客户不关心是什么服务 |
|
||||
| 标题 | 1 小时诊断 → 4 小时接入 | 30分钟诊断 | ❌ "4小时接入"不现实<br />❌ "接入"是技术术语 |
|
||||
| 正文 | 远程诊断你的系统，确认能不能接、怎么接。接入后第二天就能用，完全不影响现有业务。 | 我们看看你的系统现在什么情况，AI能帮你省多少事、花多少钱。不卖东西，只帮你分析。 | ❌ "确认能不能接"像技术评估<br />❌ "不影响现有业务"太书面<br />✅ "不卖东西，只帮你分析" |
|
||||
|
||||
---
|
||||
|
||||
### 4.3 步骤02
|
||||
|
||||
| 项目 | 修改前 | 修改后 | 问题原因 |
|
||||
|------|--------|--------|---------|
|
||||
| 标签 | 获客 AI | 第二步 | ❌ 客户不关心是什么服务 |
|
||||
| 标题 | 诊断 → 优化 → 收录 → 获客 | 2周部署上线 | ❌ "诊断→优化→收录"是内部流程<br />❌ 太复杂 |
|
||||
| 正文 | 分析你的业务在 AI 搜索中的现状，优化内容结构，提交至 AI 平台收录。1 个月内看到效果。 | 在你现有系统旁边加个AI帮手。不换系统，不迁移数据，不影响现有业务。员工还是用原来的界面，只是多了AI帮你干重复的事。 | ❌ "优化内容结构"客户听不懂<br />❌ "提交至AI平台收录"是技术细节<br />✅ 说人话"在旁边加个AI帮手" |
|
||||
|
||||
---
|
||||
|
||||
### 4.4 步骤03
|
||||
|
||||
| 项目 | 修改前 | 修改后 | 问题原因 |
|
||||
|------|--------|--------|---------|
|
||||
| 标签 | 承诺 | 第三步 | ❌ "承诺"像在喊口号 |
|
||||
| 标题 | 按效果付费 | 看效果再决定 | ❌ "按效果付费"像在承诺 |
|
||||
| 正文 | 没有效果不收费。效率 AI 看数据提升，获客 AI 看新客户增长。 | 先在一个场景试用，效果好再扩大。不满意可以停，不用一下子投很多钱。 | ❌ "没有效果不收费"像保证<br />❌ "数据提升"、"新客户增长"太虚<br />✅ 说具体"先试再决定" |
|
||||
|
||||
---
|
||||
|
||||
## 五、CTA区域
|
||||
|
||||
### 5.1 CTA标题
|
||||
|
||||
| 修改前 | 修改后 | 问题原因 |
|
||||
|--------|--------|---------|
|
||||
| 第一步很简单 | 先聊聊，看看适不适合你 | ❌ "第一步很简单"像废话 |
|
||||
| 30 分钟远程诊断，我们告诉你能做什么 | 30分钟免费诊断，不推销，只帮你分析 | ❌ "告诉你能做什么"像销售<br />✅ "不推销，只帮你分析" |
|
||||
|
||||
---
|
||||
|
||||
## 六、联系表单
|
||||
|
||||
### 6.1 表单标签
|
||||
|
||||
| 修改前 | 修改后 | 问题原因 |
|
||||
|--------|--------|---------|
|
||||
| 姓名 | 您的名字 | ❌ 太正式 |
|
||||
| 公司 | 手机号码 | ❌ "公司"不是最重要的<br />✅ 手机更方便联系 |
|
||||
| 邮箱 | 邮箱（选填） | ❌ 邮箱是必填不合理<br />✅ 改为选填 |
|
||||
| 需求描述 | 您现在用什么系统（选填） | ❌ "需求描述"太抽象<br />✅ "用什么系统"更具体 |
|
||||
|
||||
### 6.2 按钮文字
|
||||
|
||||
| 修改前 | 修改后 | 问题原因 |
|
||||
|--------|--------|---------|
|
||||
| 提交咨询 | 预约免费诊断 | ❌ "提交咨询"像填表<br />✅ "预约免费诊断"更有价值感 |
|
||||
|
||||
---
|
||||
|
||||
## 七、总结
|
||||
|
||||
### 7.1 主要修改原则
|
||||
|
||||
1. **去掉"AI"标签**
|
||||
- ❌ 效率AI、获客AI、AI帮手
|
||||
- ✅ 物业帮手、资管帮手、CRM帮手
|
||||
|
||||
2. **说人话**
|
||||
- ❌ 叠加AI能力、数据迁移、API接入
|
||||
- ✅ 在旁边加个AI帮手
|
||||
|
||||
3. **说具体场景**
|
||||
- ❌ 提升效率、优化流程
|
||||
- ✅ 自动派单、提前预警
|
||||
|
||||
4. **说客户痛点**
|
||||
- ❌ AI项目失败率高
|
||||
- ✅ 系统用不起来
|
||||
|
||||
5. **降低决策压力**
|
||||
- ❌ 预约咨询、了解方案
|
||||
- ✅ 先聊聊、不推销
|
||||
|
||||
### 7.2 修改前后对比（关键句）
|
||||
|
||||
| 类型 | 修改前 | 修改后 |
|
||||
|------|--------|--------|
|
||||
| 价值主张 | 用AI做事 + 被AI推荐 | 不换系统，2周让AI上岗 |
|
||||
| 痛点 | 想升级AI，但不敢换系统 | 想用AI，但不想换系统 |
|
||||
| 服务标题 | 效率AI / 获客AI | 物业AI帮手 / 资管AI帮手 / CRM AI帮手 |
|
||||
| 方法论 | 诊断→优化→收录→获客 | 30分钟诊断 → 2周部署 → 看效果再决定 |
|
||||
| 行动号召 | 了解方案、预约咨询 | 看看适不适合我、先聊聊 |
|
||||
|
||||
---
|
||||
|
||||
*整理时间：2026-05-04*
|
||||
|
|
@ -0,0 +1,373 @@
|
|||
# 菲西尔官网 GEO 优化建议文档
|
||||
|
||||
> 更新时间：2026-05-19
|
||||
> 目标平台：Kimi、ChatGPT、文心一言、通义千问、360智脑等AI搜索引擎
|
||||
|
||||
---
|
||||
|
||||
## 一、GEO 概述
|
||||
|
||||
### 1.1 什么是 GEO
|
||||
|
||||
GEO（Generative Engine Optimization，生成式引擎优化）是一种新兴的数字营销策略，旨在优化内容，使其在 AI 搜索引擎和大型语言模型（LLM）的回答中被引用和推荐。
|
||||
|
||||
### 1.2 与 SEO 的区别
|
||||
|
||||
| 维度 | SEO | GEO |
|
||||
|------|-----|-----|
|
||||
| 目标 | Google、百度搜索排名 | AI 回答中的引用 |
|
||||
| 优化对象 | 关键词密度、外链 | 内容质量、结构、权威性 |
|
||||
| 评估标准 | 排名位置 | 被引用频率 |
|
||||
| 用户行为 | 点击进入网站 | 直接获得答案 |
|
||||
|
||||
### 1.3 目标 AI 平台
|
||||
|
||||
- **国内平台**：Kimi（月之暗面）、文心一言（百度）、通义千问（阿里）、讯飞星火、360智脑、字节豆包
|
||||
- **国际平台**：ChatGPT、Claude、Google Gemini、Perplexity
|
||||
|
||||
---
|
||||
|
||||
## 二、已实施的 GEO 优化
|
||||
|
||||
### 2.1 FAQ 结构化数据
|
||||
|
||||
已在网站添加完整的 FAQPage JSON-LD 结构化数据，覆盖以下问题：
|
||||
|
||||
1. 什么是 AI 叠加？和换系统有什么区别？
|
||||
2. 菲西尔支持哪些业务系统的 AI 叠加？
|
||||
3. 物业 AI 可以解决什么问题？
|
||||
4. 资管 AI 有什么具体应用？
|
||||
5. CRM AI 能帮销售做什么？
|
||||
6. 实施 AI 叠加需要多长时间？
|
||||
7. AI 叠加需要迁移数据吗？
|
||||
8. 如何预约菲西尔的 AI 诊断服务？
|
||||
|
||||
### 2.2 Organization 结构化数据
|
||||
|
||||
添加了组织信息，包括：
|
||||
- 公司名称和描述
|
||||
- 专业知识领域
|
||||
- 联系方式
|
||||
- 社交媒体链接
|
||||
|
||||
### 2.3 ProfessionalService 结构化数据
|
||||
|
||||
添加了专业服务信息，包括：
|
||||
- 服务类型
|
||||
- 地理位置
|
||||
- 营业时间
|
||||
- 价格区间
|
||||
|
||||
---
|
||||
|
||||
## 三、建议添加的内容优化
|
||||
|
||||
### 3.1 扩展 FAQ 内容
|
||||
|
||||
建议在页面中增加更详细的 FAQ 区块，使用自然语言回答用户问题：
|
||||
|
||||
```html
|
||||
<section id="faq" class="faq-section" aria-labelledby="faq-title">
|
||||
<div class="container">
|
||||
<h2 id="faq-title">常见问题解答</h2>
|
||||
|
||||
<details class="faq-item">
|
||||
<summary>什么是"AI叠加"？听起来很高大上，具体是什么意思？</summary>
|
||||
<div class="faq-answer">
|
||||
<p>通俗地说，AI叠加就是在你们公司正在用的系统旁边，再加一个"AI小助手"。</p>
|
||||
<p>比如你们现在用物业系统报修、AI叠加之后，系统会自动判断这个工单应该派给谁，甚至能提前告诉你某个设备可能要坏了。</p>
|
||||
<p>关键是：<strong>你不用换系统，不用重新录入数据，员工还是用原来的界面</strong>，只是多了AI帮你干活。</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- 更多FAQ项目... -->
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 3.2 建议增加的页面内容
|
||||
|
||||
#### 3.2.1 行业术语解释页面
|
||||
|
||||
```html
|
||||
<section id="glossary" class="glossary-section">
|
||||
<h2>行业术语解释</h2>
|
||||
<dl class="glossary-list">
|
||||
<dt>AI叠加</dt>
|
||||
<dd>在不替换现有业务系统的前提下，通过API接口叠加AI能力，让旧系统获得智能化升级。</dd>
|
||||
|
||||
<dt>智能派单</dt>
|
||||
<dd>根据报修内容自动判断应该派给哪个员工/部门，减少人工转派的麻烦。</dd>
|
||||
|
||||
<dt>租约预警</dt>
|
||||
<dd>提前提醒哪些租约即将到期，帮助资产管理者提前做好续约或招商准备。</dd>
|
||||
|
||||
<dt>线索清洗</dt>
|
||||
<dd>使用AI自动过滤掉虚假、重复、无效的销售线索，让销售只跟进真正有价值的客户。</dd>
|
||||
</dl>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 3.2.2 使用场景详细说明
|
||||
|
||||
```html
|
||||
<section id="scenarios" class="scenarios-section">
|
||||
<h2>这些场景，我们都能解决</h2>
|
||||
|
||||
<article class="scenario-item">
|
||||
<h3>场景一：物业客服小王的一天</h3>
|
||||
<blockquote>
|
||||
<p>"以前：客户打电话报修，我要问清楚情况，手动在系统里填单子，再转给维修师傅。忙起来一天要填几十张表。"</p>
|
||||
<p>"现在：客户一打电话，AI自动记录并判断该派给谁。我只需要确认一下就行。每天能多接好几个电话。"</p>
|
||||
</blockquote>
|
||||
</article>
|
||||
|
||||
<article class="scenario-item">
|
||||
<h3>场景二：资产经理老李的烦恼</h3>
|
||||
<blockquote>
|
||||
<p>"以前：每到月底就要从好几个系统里导数据，拼成Excel汇报。经常漏掉哪个租户要续约了。"</p>
|
||||
<p>"现在：直接问AI'下个月有哪些租约要到期'，它给我一个完整的列表。租金定价也有参考建议了。"</p>
|
||||
</blockquote>
|
||||
</article>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 3.3 品牌故事内容
|
||||
|
||||
建议增加品牌故事区块，回答 AI 搜索引擎可能会问的问题：
|
||||
|
||||
```html
|
||||
<section id="brand-story" class="brand-story-section">
|
||||
<h2>为什么会有菲西尔？</h2>
|
||||
<p>我们发现一个现象：很多企业其实不缺系统，缺的是让这些系统"活起来"的能力。</p>
|
||||
|
||||
<p>很多企业在2018-2022年间上了各种业务系统：物业ERP、资产管理系统、CRM。系统是有了，但：</p>
|
||||
<ul>
|
||||
<li>数据录入了一大堆，用的时候还是找不到</li>
|
||||
<li>系统买了好几个，看个汇总数据还要手工算</li>
|
||||
<li>招了人，每天却在做重复录入的工作</li>
|
||||
<li>老员工一走，业务就卡壳</li>
|
||||
</ul>
|
||||
|
||||
<p>换系统？成本太高，员工也抵触。</p>
|
||||
<p>不换？眼睁睁看着效率低下。</p>
|
||||
|
||||
<p><strong>所以我们做了菲西尔——在不换系统的前提下，让AI来提升效率。</strong></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 四、AI 平台适配建议
|
||||
|
||||
### 4.1 Kimi（Moonshot）
|
||||
|
||||
**优化策略**：
|
||||
- Kimi 擅长理解中文长文本，确保 FAQ 内容完整、逻辑清晰
|
||||
- 添加"菲西尔"品牌关键词的多种表述方式
|
||||
- 内容要口语化，因为 Kimi 用户提问通常比较直接
|
||||
|
||||
**建议内容格式**：
|
||||
```markdown
|
||||
# 菲西尔是做什么的
|
||||
|
||||
菲西尔是一家帮企业在现有系统上叠加AI能力的公司。
|
||||
|
||||
**核心产品**：
|
||||
- 物业AI帮手
|
||||
- 资管AI帮手
|
||||
- CRM AI帮手
|
||||
|
||||
**为什么选菲西尔**：
|
||||
1. 不换系统，只叠加AI
|
||||
2. 2周部署见效
|
||||
3. 数据不用迁移
|
||||
4. 员工不用重新培训
|
||||
```
|
||||
|
||||
### 4.2 文心一言（百度）
|
||||
|
||||
**优化策略**：
|
||||
- 文心一言会参考百度搜索结果，确保百度SEO同步优化
|
||||
- 添加更多百度系产品可能抓取的关键词
|
||||
- 使用百度支持的结构化数据格式
|
||||
|
||||
**建议内容格式**：
|
||||
```markdown
|
||||
公司全称：上海菲西尔智能科技有限公司
|
||||
主营业务：AI系统集成、物业管理系统AI升级、资管系统AI升级、CRM系统AI升级
|
||||
核心卖点：不换系统、2周见效、数据不迁移、员工不重新培训
|
||||
服务行业：物业管理、资产管理、企业CRM
|
||||
```
|
||||
|
||||
### 4.3 通义千问（阿里）
|
||||
|
||||
**优化策略**：
|
||||
- 通义千问参考阿里云生态内容，确保在技术社区有曝光
|
||||
- 强调技术可靠性和安全性
|
||||
- 添加与阿里云、钉钉等产品的集成说明
|
||||
|
||||
**建议内容格式**：
|
||||
```markdown
|
||||
菲西尔的技术特点：
|
||||
- 通过标准API接口连接现有系统
|
||||
- 支持私有化部署
|
||||
- 数据安全合规
|
||||
- 7x24小时技术支持
|
||||
|
||||
集成能力：
|
||||
- 已与XX物业系统、XX资管平台、XX CRM完成对接
|
||||
- 部署周期：2周
|
||||
```
|
||||
|
||||
### 4.4 ChatGPT（国际）
|
||||
|
||||
**优化策略**：
|
||||
- 英文版页面内容
|
||||
- 强调中国本土化经验
|
||||
- 添加国际企业可能关注的数据安全、隐私合规信息
|
||||
|
||||
**建议内容格式**：
|
||||
```markdown
|
||||
About Fischer Intelligence
|
||||
|
||||
Fischer Intelligence helps enterprises integrate AI capabilities into their existing business systems without replacement.
|
||||
|
||||
Our Solutions:
|
||||
- Property Management AI
|
||||
- Asset Management AI
|
||||
- CRM AI
|
||||
|
||||
Key Differentiators:
|
||||
- No system replacement required
|
||||
- 2-week deployment
|
||||
- Zero data migration
|
||||
- Employee-friendly transition
|
||||
|
||||
Target Market: China enterprise market with focus on property management, asset management, and CRM systems.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 五、内容创作建议
|
||||
|
||||
### 5.1 AI 可能问到的问题清单
|
||||
|
||||
基于 AI 搜索引擎的常见问题类型，建议准备以下内容的回答：
|
||||
|
||||
**关于公司**：
|
||||
- 菲西尔是做什么的？
|
||||
- 菲西尔和普通的AI公司有什么区别？
|
||||
- 菲西尔的创始人是谁？
|
||||
- 菲西尔成立于什么时候？
|
||||
|
||||
**关于产品**：
|
||||
- 物业AI可以解决什么问题？
|
||||
- 资管AI和传统资管软件有什么不同？
|
||||
- CRM AI能帮销售做什么？
|
||||
- AI叠加需要多长时间部署？
|
||||
|
||||
**关于价格**：
|
||||
- 菲西尔的AI叠加服务怎么收费？
|
||||
- 有没有免费试用？
|
||||
- 能不能先在一个部门试点？
|
||||
|
||||
**关于实施**：
|
||||
- 我们的系统能用吗？
|
||||
- 需要停机部署吗？
|
||||
- 员工需要重新培训吗？
|
||||
- 数据需要迁移吗？
|
||||
|
||||
### 5.2 内容更新频率
|
||||
|
||||
| 内容类型 | 更新频率 | 说明 |
|
||||
|---------|---------|------|
|
||||
| 案例更新 | 每月 | 添加新的客户案例 |
|
||||
| FAQ | 季度 | 根据用户咨询更新常见问题 |
|
||||
| 博客文章 | 双周 | 行业洞察、技术解读 |
|
||||
| 产品功能 | 按需 | 新功能上线时更新 |
|
||||
|
||||
---
|
||||
|
||||
## 六、技术层面的 GEO 优化
|
||||
|
||||
### 6.1 已实施
|
||||
|
||||
- ✅ FAQPage 结构化数据
|
||||
- ✅ Organization 结构化数据
|
||||
- ✅ ProfessionalService 结构化数据
|
||||
- ✅ WebSite 结构化数据
|
||||
- ✅ 语义化 HTML 标签
|
||||
- ✅ 图片 alt 标签优化
|
||||
- ✅ Meta 标签完善
|
||||
- ✅ Open Graph / Twitter Card
|
||||
|
||||
### 6.2 建议实施
|
||||
|
||||
- ⬜ 添加 BlogPosting 结构化数据（用于未来文章页面）
|
||||
- ⬜ 添加 VideoObject 结构化数据（用于产品演示视频）
|
||||
- ⬜ 添加 HowTo 结构化数据（用于使用指南）
|
||||
- ⬜ 添加 Review 结构化数据（用于客户评价）
|
||||
- ⬜ 添加 BreadcrumbList 结构化数据（用于导航路径）
|
||||
- ⬜ 添加 SpeakableSpecification（指定可被AI引用的内容区域）
|
||||
|
||||
### 6.3 性能优化
|
||||
|
||||
AI 搜索引擎也会考虑页面性能，建议：
|
||||
|
||||
- 图片懒加载（已实施）
|
||||
- 关键 CSS 内联
|
||||
- 预连接关键资源
|
||||
- 减少 JavaScript 体积
|
||||
- Core Web Vitals 优化
|
||||
|
||||
---
|
||||
|
||||
## 七、监测与评估
|
||||
|
||||
### 7.1 GEO 效果监测
|
||||
|
||||
由于 GEO 是一个新兴领域，没有像 SEO 一样的成熟工具。建议通过以下方式监测：
|
||||
|
||||
1. **直接调研**：询问客户是如何找到你们的
|
||||
2. **社交监听**：监控 AI 相关话题中是否提及菲西尔
|
||||
3. **品牌搜索量**：关注品牌词搜索量的变化
|
||||
4. **竞品对比**：对比竞品在 AI 平台中的出现频率
|
||||
|
||||
### 7.2 关键指标
|
||||
|
||||
| 指标 | 目标 | 监测方式 |
|
||||
|------|------|---------|
|
||||
| AI平台提及率 | 目标关键词下前3个结果 | 手动查询 |
|
||||
| 品牌搜索量 | 季度增长20% | 百度指数、Google Trends |
|
||||
| 直接流量 | 增长30% | 网站分析工具 |
|
||||
| 咨询转化率 | 提升15% | CRM数据 |
|
||||
|
||||
---
|
||||
|
||||
## 八、下一步行动计划
|
||||
|
||||
### 8.1 短期（1-2个月）
|
||||
|
||||
- [ ] 在页面中增加可视化的 FAQ 区块
|
||||
- [ ] 添加品牌故事内容
|
||||
- [ ] 完善行业术语解释
|
||||
- [ ] 创建案例详情页面
|
||||
|
||||
### 8.2 中期（3-6个月）
|
||||
|
||||
- [ ] 开设技术博客
|
||||
- [ ] 添加 HowTo 结构化数据
|
||||
- [ ] 准备英文版内容
|
||||
- [ ] 建立外部内容分发渠道
|
||||
|
||||
### 8.3 长期（6-12个月）
|
||||
|
||||
- [ ] 多语言站点
|
||||
- [ ] 视频内容制作
|
||||
- [ ] 行业白皮书发布
|
||||
- [ ] 与AI平台建立合作关系
|
||||
|
||||
---
|
||||
|
||||
*文档整理时间：2026-05-19*
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
# 菲西尔智能 Landing Page 设计方案
|
||||
|
||||
**日期**: 2026-05-02
|
||||
**项目**: fischer-site Landing Page 重新设计
|
||||
**状态**: 已批准
|
||||
|
||||
---
|
||||
|
||||
## 1. 项目概述
|
||||
|
||||
### 1.1 目标
|
||||
为上海菲西尔智能科技有限公司重新设计 Landing Page，打造具有差异化、现代化、国际化的企业智能叠加服务 landing page。
|
||||
|
||||
### 1.2 核心定位
|
||||
- **品牌定位**: AI 赋能者 - "让现有业务系统叠加 AI 能力"
|
||||
- **目标受众**: 企业决策者(A)、中层管理者(B)、渠道合作伙伴(D)
|
||||
- **核心行动**: 立即咨询(A) + 预约演示(C)
|
||||
- **差异化**: 现代、有特色、摆脱传统企业网站沉闷感
|
||||
|
||||
---
|
||||
|
||||
## 2. 设计约束
|
||||
|
||||
### 2.1 技术实现
|
||||
- 全新开始，不基于现有 index.html
|
||||
- 纯 HTML/CSS/JS 单页面实现
|
||||
- 轻量、加载快、易部署
|
||||
|
||||
### 2.2 内容保持
|
||||
- 核心业务: AI+物业 / AI+资管 / AI+CRM
|
||||
- 品牌名称: 菲西尔智能
|
||||
- 联系方式和咨询表单
|
||||
|
||||
---
|
||||
|
||||
## 3. 三个设计方案
|
||||
|
||||
### 方案一: 新锐科技 + 极简留白
|
||||
**参考**: Linear + Apple + 高级感
|
||||
|
||||
| 元素 | 设计规格 |
|
||||
|------|----------|
|
||||
| 背景色 | `#0a0a0a` 深黑 |
|
||||
| 文字色 | `#ffffff` 纯白 |
|
||||
| 强调色 | 单一品牌色点缀 |
|
||||
| 标题 | 超大(clamp 72-96px)、极多留白 |
|
||||
| 动效 | 克制优雅：淡入、轻微位移、hover 微交互 |
|
||||
| 特点 | 呼吸感强、品牌色点缀、信任感与未来感并存 |
|
||||
|
||||
### 方案二: 杂志美学 + 3D 沉浸
|
||||
**参考**: The Verge + Spline + WebGL 背景
|
||||
|
||||
| 元素 | 设计规格 |
|
||||
|------|----------|
|
||||
| 背景色 | 渐变暗色背景 |
|
||||
| 文字色 | 亮色文字 |
|
||||
| 卡片 | 玻璃拟态效果 |
|
||||
| 排版 | 杂志式大图、编辑感标题、不对称布局 |
|
||||
| 动效 | 3D 背景、视差滚动、卡片悬浮、粒子/光效 |
|
||||
| 特点 | 视觉冲击强、现代感足、记忆点突出 |
|
||||
|
||||
### 方案三: 高端质感 + 电影叙事
|
||||
**参考**: 徕卡官网 + 高端品牌 + 叙事性滚动
|
||||
|
||||
| 元素 | 设计规格 |
|
||||
|------|----------|
|
||||
| 配色 | 黑白主调 + 胶片颗粒 + 暖色或冷色点缀 |
|
||||
| 排版 | 故事线驱动、大量图片/视频、慢节奏阅读 |
|
||||
| 动效 | 缓慢 zoom、交叉溶解、胶片噪点质感 |
|
||||
| 特点 | 沉浸感强、品牌调性高、差异化显著 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 通用信息架构
|
||||
|
||||
所有方案共享以下信息架构：
|
||||
|
||||
1. **Hero Section**: 品牌标语 + 核心 CTA
|
||||
2. **Pain Points**: 目标客户的核心痛点
|
||||
3. **Solutions**: 三大解决方案 (物业/资管/CRM)
|
||||
4. **Approach**: 实施方法论
|
||||
5. **Trust Metrics**: 信任背书/数据
|
||||
6. **Contact**: 咨询表单/预约演示
|
||||
|
||||
---
|
||||
|
||||
## 5. 成功标准
|
||||
|
||||
- [ ] 三个方案都能在浏览器中正常打开
|
||||
- [ ] 响应式设计，适配桌面和移动端
|
||||
- [ ] CTA 按钮清晰可见
|
||||
- [ ] 加载速度 < 3秒
|
||||
- [ ] 无 AI 味的文案表达
|
||||
|
|
@ -0,0 +1,492 @@
|
|||
# 菲西尔官网结构文档
|
||||
|
||||
> 更新时间：2026-05-19
|
||||
|
||||
---
|
||||
|
||||
## 一、页面规划总览
|
||||
|
||||
| 序号 | 页面名称 | 主要职能 | 优先级 |
|
||||
|------|----------|----------|--------|
|
||||
| 1 | 首页 | 吸引注意、传递价值主张、CTA引导 | 必做 |
|
||||
| 2 | 服务 | 展示三大业务场景及具体能力 | 必做 |
|
||||
| 3 | 关于我们 | 建立信任、展示专业性 | 必做 |
|
||||
| 4 | 案例 | 展示成功案例、增强说服力 | 建议 |
|
||||
| 5 | 联系我们 | 获取线索、表单收集 | 必做 |
|
||||
|
||||
---
|
||||
|
||||
## 二、首页（Home）
|
||||
|
||||
### 模块结构
|
||||
|
||||
```
|
||||
首页
|
||||
├── 1.1 顶部导航栏
|
||||
├── 1.2 Hero区域（首屏）
|
||||
├── 1.3 痛点洞察
|
||||
├── 1.4 核心服务预览
|
||||
├── 1.5 差异化优势
|
||||
├── 1.6 客户证言
|
||||
├── 1.7 立即咨询
|
||||
└── 1.8 页脚
|
||||
```
|
||||
|
||||
### 模块详细内容
|
||||
|
||||
#### 1.1 顶部导航栏
|
||||
|
||||
| 元素 | 内容 |
|
||||
|------|------|
|
||||
| Logo | 菲西尔智能 |
|
||||
| 导航链接 | 首页 · 服务 · 关于我们 · 案例 · 联系我们 |
|
||||
| CTA按钮 | 预约免费诊断 |
|
||||
|
||||
---
|
||||
|
||||
#### 1.2 Hero区域（首屏）
|
||||
|
||||
**主标题：**
|
||||
> 不换系统，也能用上AI
|
||||
|
||||
**副标题：**
|
||||
> 不换现有系统，2周让AI上岗。不用迁移数据，不用重新培训员工。
|
||||
|
||||
**主CTA按钮：** 预约免费诊断
|
||||
|
||||
**次CTA按钮：** 看看适不适合我 →
|
||||
|
||||
---
|
||||
|
||||
#### 1.3 痛点洞察
|
||||
|
||||
**章节标题：** 你的系统，是不是越用越累？
|
||||
|
||||
**章节副标题：** 每天忙成这样，系统帮到你了吗？
|
||||
|
||||
**四大痛点卡片：**
|
||||
|
||||
| 序号 | 标题 | 正文 |
|
||||
|------|------|------|
|
||||
| 痛点01 | 数据填了一大堆，用的时候找不到 | 物业、资管、CRM记了几年的数据，真正想查一个客户情况的时候，还是要翻半天Excel。数据有了，但用不上。 |
|
||||
| 痛点02 | 系统买了好几个，想看个汇总数据还要手工算 | 报修一个系统，资产一个系统，客户又一个系统。想看看这个月整体情况？对不起，要好几天后才能算出来。 |
|
||||
| 痛点03 | 招了人，每天却在做重复的事 | 销售每天花2小时录入客户信息，物业员工每天填几十张巡检表。人都招对了，但时间没用在正事上。 |
|
||||
| 痛点04 | 老员工一走，业务就卡壳 | 经验都在老员工身上，他一休假，所有人等他回来。交接只能靠嘴说，做事的方法没沉淀下来。 |
|
||||
|
||||
**核心洞察框：**
|
||||
> 不用换系统，让AI帮你干活。
|
||||
>
|
||||
> 重复的事AI干，你做重要的决定。
|
||||
|
||||
---
|
||||
|
||||
#### 1.4 核心服务预览
|
||||
|
||||
**章节标题：** 让AI替你干活，你做决定
|
||||
|
||||
**章节副标题：** 不换系统，只让AI帮你提升效率
|
||||
|
||||
**三大服务预览卡片：**
|
||||
|
||||
| 服务 | 标题 | 核心描述 | 金句 |
|
||||
|------|------|----------|------|
|
||||
| AI+物业 | 物业AI帮手 | 客户一报修，系统自动判断该派给谁。设备快出问题了，提前提醒你。巡检路线AI规划好，不用人工排。 | 员工说：这系统，终于能帮我干活了。 |
|
||||
| AI+资管 | 资管AI帮手 | 租约快到期了，系统提前告诉你。哪个楼层可能要空出来，提前做准备。定租金的时候，AI会参考历史数据给你建议。 | 老板说：终于不用靠猜了。 |
|
||||
| AI+CRM | CRM AI帮手 | 新线索进来了，AI帮你过滤掉假的、重复的。打完电话，AI自动帮你写好跟进记录。 | 销售说：终于不用录系统了。 |
|
||||
|
||||
**服务页面入口：** 查看全部服务 →
|
||||
|
||||
---
|
||||
|
||||
#### 1.5 差异化优势
|
||||
|
||||
**章节标题：** 我们和别的AI公司有什么不同
|
||||
|
||||
**五大差异点：**
|
||||
|
||||
| 序号 | 标题 | 正文 |
|
||||
|------|------|------|
|
||||
| 01 | 不替换，只叠加 | 不动你的系统，在旁边加个AI帮手。你还是用原来的界面，只是多了AI帮你干那些重复的事。 |
|
||||
| 02 | 让数据开口说话 | 你系统里几年的数据，AI帮你分析。哪个客户可能要流失，哪个楼层可能要空，AI提前告诉你。 |
|
||||
| 03 | 让AI替你干活 | 那些每天都要做、每次都一样的活，AI帮你干了。比如回复客户常见问题、巡检报告自动生成。AI干完了，你看一眼就行。 |
|
||||
| 04 | 跨系统一屏掌控 | 问AI：上个月哪几个客户投诉最多？AI直接给你答案。不用再从好几个系统里导数据、拼表格。 |
|
||||
| 05 | 小步试错，大步扩张 | 先在一个场景试，效果好再扩大。不满意可以停，不用一下子投很多钱。 |
|
||||
|
||||
---
|
||||
|
||||
#### 1.6 客户证言（Social Proof）
|
||||
|
||||
**章节标题：** 他们都在用
|
||||
|
||||
**证言卡片（示例结构）：**
|
||||
|
||||
| 客户类型 | 证言内容 |
|
||||
|----------|----------|
|
||||
| 物业客户 | "用了3个月，员工最常说的一句话是：这个功能怎么不早点上。" |
|
||||
| 资管客户 | "以前每月汇报数据要准备一周，现在问AI就行。" |
|
||||
| CRM客户 | "销售终于有时间去见客户了，而不是天天填表。" |
|
||||
|
||||
---
|
||||
|
||||
#### 1.7 立即咨询
|
||||
|
||||
**区块标题：** 30分钟，我们看看你的系统能用AI干什么
|
||||
|
||||
**正文：** 不卖东西，只帮你分析。先看看你的系统现在什么情况，AI能帮你省多少事、花多少钱。
|
||||
|
||||
**表单字段：**
|
||||
|
||||
| 字段名 | 类型 | 必填 |
|
||||
|--------|------|------|
|
||||
| 您的名字 | 文本 | 是 |
|
||||
| 手机（方便联系您） | 手机号 | 是 |
|
||||
| 邮箱（选填） | 邮箱 | 否 |
|
||||
| 简单说说您现在用的什么系统（选填） | 文本 | 否 |
|
||||
|
||||
**提交按钮：** 预约免费诊断
|
||||
|
||||
---
|
||||
|
||||
#### 1.8 页脚
|
||||
|
||||
| 内容 |
|
||||
|------|
|
||||
| 公司名：上海菲西尔智能科技有限公司 |
|
||||
| 版权：© 2026 菲西尔智能 |
|
||||
|
||||
---
|
||||
|
||||
## 三、服务页面（Services）
|
||||
|
||||
### 模块结构
|
||||
|
||||
```
|
||||
服务页面
|
||||
├── 3.1 页面标题区
|
||||
├── 3.2 服务导航（三个场景切换）
|
||||
├── 3.3 AI+物业详情
|
||||
├── 3.4 AI+资管详情
|
||||
├── 3.5 AI+CRM详情
|
||||
├── 3.6 通用AI能力
|
||||
└── 3.7 服务咨询入口
|
||||
```
|
||||
|
||||
### 模块详细内容
|
||||
|
||||
#### 3.1 页面标题区
|
||||
|
||||
**页面标题：** 让AI替你干活，你做决定
|
||||
|
||||
**页面副标题：** 不换系统，只让AI帮你提升效率
|
||||
|
||||
---
|
||||
|
||||
#### 3.2 服务导航
|
||||
|
||||
三个标签切换：AI+物业 | AI+资管 | AI+CRM
|
||||
|
||||
---
|
||||
|
||||
#### 3.3 AI+物业
|
||||
|
||||
**服务标题：** 物业AI帮手
|
||||
|
||||
**核心指标：** 客诉从2小时 → 30分钟
|
||||
|
||||
**场景说明：**
|
||||
|
||||
| 场景 | 具体描述 |
|
||||
|------|----------|
|
||||
| 智能派单 | 客户一报修，系统自动判断该派给谁。不用人工转来转去。 |
|
||||
| 设备预警 | 设备快出问题了，提前提醒你。不是坏了再修，是快坏的时候就告诉你。 |
|
||||
| 巡检规划 | 巡检路线AI规划好，不用人工排。每天走多少户、几点去哪，AI都安排好了。 |
|
||||
| 数据查询 | 问AI：上个月哪几栋楼的报修最多？AI直接给你答案。 |
|
||||
|
||||
**金句：** 员工说：这系统，终于能帮我干活了。
|
||||
|
||||
**客户证言：** （待补充）
|
||||
|
||||
---
|
||||
|
||||
#### 3.4 AI+资管
|
||||
|
||||
**服务标题：** 资管AI帮手
|
||||
|
||||
**核心指标：** 下个月哪些楼层要空，现在就知道
|
||||
|
||||
**场景说明：**
|
||||
|
||||
| 场景 | 具体描述 |
|
||||
|------|----------|
|
||||
| 租约预警 | 租约快到期了，系统提前告诉你。哪个楼层可能要空出来，提前做准备。 |
|
||||
| 定价建议 | 定租金的时候，AI会参考历史数据给你建议。不是拍脑袋，是看数据。 |
|
||||
| 空置预警 | 哪个楼层可能要空出来，AI提前算好。不等到最后一刻才知道。 |
|
||||
| 报表汇总 | 问AI：本季度各楼层的出租率和租金收入？AI直接给你汇总好的数据。 |
|
||||
|
||||
**金句：** 老板说：终于不用靠猜了。
|
||||
|
||||
**客户证言：** （待补充）
|
||||
|
||||
---
|
||||
|
||||
#### 3.5 AI+CRM
|
||||
|
||||
**服务标题：** CRM AI帮手
|
||||
|
||||
**核心指标：** 销售每天多跟进3个客户
|
||||
|
||||
**场景说明：**
|
||||
|
||||
| 场景 | 具体描述 |
|
||||
|------|----------|
|
||||
| 线索清洗 | 新线索进来了，AI帮你过滤掉假的、重复的。销售只跟进真正有价值的。 |
|
||||
| 跟进记录 | 打完电话，AI自动帮你写好跟进记录。不用手动录入，省时间。 |
|
||||
| 客户推荐 | 打开CRM，推荐你今天最该联系哪些客户。按优先级排好，不用自己想。 |
|
||||
| 数据分析 | 问AI：这个月哪几个客户最活跃？AI直接给你分析结果。 |
|
||||
|
||||
**金句：** 销售说：终于不用录系统了。
|
||||
|
||||
**客户证言：** （待补充）
|
||||
|
||||
---
|
||||
|
||||
#### 3.6 通用AI能力
|
||||
|
||||
**标题：** 不管你用什么系统，都能用
|
||||
|
||||
**正文：** 物业ERP、资管平台、CRM系统——不管你现在用的是哪套，AI都能接上去。不用换系统，在旁边加个AI帮手。你还是用原来的界面，只是多了AI帮你干那些重复的事。
|
||||
|
||||
---
|
||||
|
||||
#### 3.7 服务咨询入口
|
||||
|
||||
**区块标题：** 30分钟，我们看看你的系统能用AI干什么
|
||||
|
||||
**CTA按钮：** 预约免费诊断
|
||||
|
||||
---
|
||||
|
||||
## 四、关于我们页面（About）
|
||||
|
||||
### 模块结构
|
||||
|
||||
```
|
||||
关于我们页面
|
||||
├── 4.1 页面标题区
|
||||
├── 4.2 企业介绍
|
||||
├── 4.3 核心价值观
|
||||
├── 4.4 团队介绍（可选）
|
||||
└── 4.5 联系方式
|
||||
```
|
||||
|
||||
### 模块详细内容
|
||||
|
||||
#### 4.1 页面标题区
|
||||
|
||||
**页面标题：** 我们是谁
|
||||
|
||||
**页面副标题：** 帮企业把AI接到现有系统里
|
||||
|
||||
---
|
||||
|
||||
#### 4.2 企业介绍
|
||||
|
||||
**公司简介：**
|
||||
|
||||
上海菲西尔智能科技有限公司，专注企业AI落地服务。
|
||||
|
||||
我们的核心观点：大多数企业不需要换系统，需要的是在现有系统上叠加AI能力。
|
||||
|
||||
不推翻重来，不大兴土木。用2周时间，让AI上岗。员工不用重新培训，系统不用重新部署。
|
||||
|
||||
---
|
||||
|
||||
#### 4.3 核心价值观
|
||||
|
||||
| 序号 | 价值观 | 说明 |
|
||||
|------|--------|------|
|
||||
| 01 | 不替换，只叠加 | 我们不卖新系统，我们帮你把AI接到你现有的系统里。 |
|
||||
| 02 | 先试再用 | 先在一个场景试，效果好再扩大。不满意可以停。 |
|
||||
| 03 | 说人话 | 技术的东西我们来搞，你只管用。 |
|
||||
| 04 | 效果可衡量 | 每一步都可衡量投入产出，钱花在刀刃上。 |
|
||||
|
||||
---
|
||||
|
||||
#### 4.4 团队介绍（可选）
|
||||
|
||||
**团队定位：** 技术+行业，懂AI也懂业务
|
||||
|
||||
（团队成员信息待补充）
|
||||
|
||||
---
|
||||
|
||||
#### 4.5 联系方式
|
||||
|
||||
| 联系方式 | 内容 |
|
||||
|----------|------|
|
||||
| 地址 | （待补充） |
|
||||
| 邮箱 | （待补充） |
|
||||
| 电话 | （待补充） |
|
||||
|
||||
---
|
||||
|
||||
## 五、案例页面（Cases）
|
||||
|
||||
### 模块结构
|
||||
|
||||
```
|
||||
案例页面
|
||||
├── 5.1 页面标题区
|
||||
├── 5.2 案例筛选导航
|
||||
├── 5.3 案例列表
|
||||
└── 5.4 咨询入口
|
||||
```
|
||||
|
||||
### 模块详细内容
|
||||
|
||||
#### 5.1 页面标题区
|
||||
|
||||
**页面标题：** 他们的系统，现在能用AI了
|
||||
|
||||
**页面副标题：** 真实案例，看看AI在你的行业能干什么
|
||||
|
||||
---
|
||||
|
||||
#### 5.2 案例筛选导航
|
||||
|
||||
全部 | 物业 | 资管 | CRM
|
||||
|
||||
---
|
||||
|
||||
#### 5.3 案例卡片结构
|
||||
|
||||
每个案例卡片包含：
|
||||
|
||||
| 元素 | 说明 |
|
||||
|------|------|
|
||||
| 客户logo/名称 | （待补充） |
|
||||
| 行业标签 | 物业 / 资管 / CRM |
|
||||
| 项目背景 | 客户原来面临什么问题 |
|
||||
| 解决方案 | 我们做了什么 |
|
||||
| 效果数据 | 具体带来了什么改变（用具体场景描述，不用抽象数字） |
|
||||
| 客户原话 | 一句客户的真实反馈 |
|
||||
|
||||
---
|
||||
|
||||
#### 5.4 咨询入口
|
||||
|
||||
**区块标题：** 想了解你的行业案例？
|
||||
|
||||
**CTA按钮：** 预约免费诊断
|
||||
|
||||
---
|
||||
|
||||
## 六、联系我们页面（Contact）
|
||||
|
||||
### 模块结构
|
||||
|
||||
```
|
||||
联系我们页面
|
||||
├── 6.1 页面标题区
|
||||
├── 6.2 联系方式
|
||||
├── 6.3 咨询表单
|
||||
└── 6.4 地图（可选）
|
||||
```
|
||||
|
||||
### 模块详细内容
|
||||
|
||||
#### 6.1 页面标题区
|
||||
|
||||
**页面标题：** 预约免费诊断
|
||||
|
||||
**页面副标题：** 30分钟，我们看看你的系统能用AI干什么
|
||||
|
||||
---
|
||||
|
||||
#### 6.2 联系方式
|
||||
|
||||
| 联系方式 | 内容 |
|
||||
|----------|------|
|
||||
| 地址 | （待补充） |
|
||||
| 邮箱 | （待补充） |
|
||||
| 电话 | （待补充） |
|
||||
| 工作时间 | 周一至周五 9:00-18:00 |
|
||||
|
||||
---
|
||||
|
||||
#### 6.3 咨询表单
|
||||
|
||||
**表单标题：** 先聊聊，看看适不适合
|
||||
|
||||
**正文：** 不卖东西，只帮你分析。先看看你的系统现在什么情况，AI能帮你省多少事、花多少钱。
|
||||
|
||||
**表单字段：**
|
||||
|
||||
| 字段名 | 类型 | 必填 | 占位提示 |
|
||||
|--------|------|------|----------|
|
||||
| 您的名字 | 文本 | 是 | 怎么称呼您 |
|
||||
| 手机（方便联系您） | 手机号 | 是 | 138xxxx8888 |
|
||||
| 邮箱（选填） | 邮箱 | 否 | 选填 |
|
||||
| 您现在用的什么系统 | 文本 | 否 | 比如：某物业ERP、某CRM系统 |
|
||||
| 您想解决什么问题 | 文本区 | 否 | 简单说说您现在遇到的困难 |
|
||||
|
||||
**提交按钮：** 预约免费诊断
|
||||
|
||||
---
|
||||
|
||||
## 七、核心文案库
|
||||
|
||||
### 一句话价值主张
|
||||
|
||||
> 不换系统，2周让AI上岗
|
||||
|
||||
### 一段话介绍
|
||||
|
||||
> 菲西尔帮你把AI接到你现有的系统里。不用换系统，不用迁移数据，不用重新培训员工。物业、资管、CRM都能用。AI帮你干那些每天重复的事，你做重要的决定。
|
||||
>
|
||||
> 先在一个场景试，效果好再扩大。不满意可以停，不用一下子投很多钱。
|
||||
|
||||
### 场景金句
|
||||
|
||||
| 场景 | 金句 |
|
||||
|------|------|
|
||||
| 物业 | 员工说：这系统，终于能帮我干活了。 |
|
||||
| 资管 | 老板说：终于不用靠猜了。 |
|
||||
| CRM | 销售说：终于不用录系统了。 |
|
||||
| 通用 | AI干重复的事，人做重要的事。 |
|
||||
| GEO | 以后客户找供应商，是问AI推荐。你的品牌能不能被AI推荐？ |
|
||||
|
||||
### CTA按钮文案
|
||||
|
||||
| 位置 | 文案 |
|
||||
|------|------|
|
||||
| 全局主CTA | 预约免费诊断 |
|
||||
| Hero次按钮 | 看看适不适合我 → |
|
||||
| 服务页CTA | 预约免费诊断 |
|
||||
| 案例页CTA | 预约免费诊断 |
|
||||
| 关于页CTA | 预约免费诊断 |
|
||||
|
||||
---
|
||||
|
||||
## 八、导航结构
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ [Logo] 首页 服务 关于我们 案例 联系我们 [CTA] │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 九、页面优先级
|
||||
|
||||
| 优先级 | 页面 | 说明 |
|
||||
|--------|------|------|
|
||||
| P0 | 首页 + 联系表单 | 先上线核心转化路径 |
|
||||
| P1 | 服务页 | 展示具体能力 |
|
||||
| P2 | 关于我们 | 建立信任 |
|
||||
| P3 | 案例页 | 增强说服力，可后续补充 |
|
||||
|
||||
---
|
||||
|
||||
*整理时间：2026-05-19*
|
||||
2450
index.html
2450
index.html
File diff suppressed because it is too large
Load Diff
|
|
@ -1,996 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>菲西尔智能 · AI+物业｜AI+资管｜AI+CRM 企业级智能叠加</title>
|
||||
<meta name="description" content="上海菲西尔智能科技有限公司——专注为现有业务系统叠加AI能力。智慧物业智能中枢、房产资管风控大脑、CRM效率跃升、GEO生成式引擎优化。不推倒重来，只做智能叠加。">
|
||||
<meta name="keywords" content="AI+物业,智慧物业,AI+资管,房产资产管理,AI+CRM,智能叠加,企业级AI,GEO优化,生成式引擎优化,上海菲西尔">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="http://8.153.107.96/ai/">
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="菲西尔智能 · 企业级 AI 叠加">
|
||||
<meta property="og:description" content="在已经运转良好的业务系统之上叠加 AI 能力。不推倒重来，只做智能叠加。">
|
||||
<meta property="og:url" content="http://8.153.107.96/ai/">
|
||||
<meta property="og:site_name" content="菲西尔智能 Fischer Intelligence">
|
||||
<meta property="og:locale" content="zh_CN">
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="菲西尔智能 · 企业级 AI 叠加">
|
||||
<meta name="twitter:description" content="在已经运转良好的业务系统之上叠加 AI 能力。">
|
||||
|
||||
<!-- 结构化数据 -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "上海菲西尔智能科技有限公司",
|
||||
"alternateName": "Fischer Intelligence",
|
||||
"url": "http://8.153.107.96/ai/",
|
||||
"description": "专注为现有业务系统叠加AI能力，涵盖智慧物业、房产资管、CRM领域",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"addressLocality": "上海",
|
||||
"addressCountry": "CN"
|
||||
},
|
||||
"knowsAbout": ["AI+物业", "智慧物业", "AI+资管", "房产资产管理", "AI+CRM", "GEO优化"]
|
||||
}
|
||||
</script>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Noto+Sans+SC:wght@400;600;800;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #050505;
|
||||
--text-main: #ffffff;
|
||||
--text-sub: #999999;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: 'Inter', 'Noto Sans SC', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text-main);
|
||||
line-height: 1.5;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 导航 */
|
||||
nav {
|
||||
position: fixed; top: 0; width: 100%; z-index: 100;
|
||||
padding: 24px 0; background: rgba(5,5,5,0.85); backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.nav-inner { max-width: 1400px; margin: 0 auto; padding: 0 4vw; display: flex; justify-content: space-between; align-items: center; }
|
||||
.logo { font-size: 15px; font-weight: 700; letter-spacing: 2px; color: #fff; text-transform: uppercase; }
|
||||
.nav-links a { color: #777; text-decoration: none; font-size: 12px; margin-left: 36px; font-weight: 600; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px; }
|
||||
.nav-links a:hover { color: #fff; }
|
||||
|
||||
/* HERO - 营销视频背景 */
|
||||
.hero {
|
||||
position: relative; height: 100vh; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.hero-video {
|
||||
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
|
||||
filter: brightness(0.85) saturate(1.1);
|
||||
transform: scale(1.05); /* 留余量给呼吸感缩放 */
|
||||
animation: heroZoom 20s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes heroZoom {
|
||||
from { transform: scale(1.05); }
|
||||
to { transform: scale(1.12); }
|
||||
}
|
||||
/* 视频未加载/移动端降级：静态 poster */
|
||||
.hero-poster {
|
||||
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
|
||||
}
|
||||
|
||||
/* 极轻的底层渐变，仅保留底部过渡 */
|
||||
.hero-overlay {
|
||||
position: absolute; inset: 0;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.55) 100%);
|
||||
z-index: 1; pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative; z-index: 10; text-align: center; max-width: 1000px; padding: 0 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(48px, 9vw, 110px);
|
||||
font-weight: 900; line-height: 1.05; letter-spacing: -3px; margin-bottom: 24px;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 4px 20px rgba(0,0,0,0.6);
|
||||
opacity: 0; animation: textReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-size: clamp(16px, 1.8vw, 22px); font-weight: 400; color: rgba(255,255,255,0.9);
|
||||
max-width: 700px; margin: 0 auto 48px; line-height: 1.6;
|
||||
/* 磨砂玻璃效果 */
|
||||
background: rgba(255,255,255,0.05);
|
||||
backdrop-filter: blur(20px) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(150%);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-left: 3px solid rgba(255,255,255,0.4);
|
||||
border-radius: 8px;
|
||||
padding: 24px 32px;
|
||||
opacity: 0; animation: textReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s;
|
||||
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block; padding: 18px 48px;
|
||||
background: #fff; color: #000; text-decoration: none; font-size: 14px; font-weight: 700;
|
||||
border-radius: 0; letter-spacing: 1px; text-transform: uppercase; transition: all 0.3s ease;
|
||||
opacity: 0; animation: textReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.8s;
|
||||
}
|
||||
.btn:hover { transform: translateY(-2px); background: #eee; }
|
||||
|
||||
.scroll-indicator {
|
||||
position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 10;
|
||||
width: 2px; height: 60px; background: linear-gradient(to bottom, #fff, transparent);
|
||||
animation: scrollLine 2s infinite;
|
||||
}
|
||||
@keyframes scrollLine { 0% { height: 0; opacity: 0; } 50% { height: 60px; opacity: 1; } 100% { height: 60px; opacity: 0; transform: translateY(20px); } }
|
||||
@keyframes textReveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
/* 通用板块 */
|
||||
.container { max-width: 1400px; margin: 0 auto; padding: 0 4vw; position: relative; z-index: 2; }
|
||||
section { padding: 160px 0; background: #050505; border-top: 1px solid rgba(255,255,255,0.06); }
|
||||
.section-label { font-size: 11px; font-weight: 700; color: #666; letter-spacing: 3px; margin-bottom: 80px; display: block; }
|
||||
h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 800; line-height: 1.1; margin-bottom: 24px; letter-spacing: -1px; color: #fff; }
|
||||
|
||||
/* 痛点板块 */
|
||||
#pain-points { position: relative; overflow: hidden; }
|
||||
/* 动态网格背景 */
|
||||
.pain-grid-bg {
|
||||
position: absolute; inset: 0; z-index: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
|
||||
background-size: 80px 80px;
|
||||
animation: gridMove 30s linear infinite;
|
||||
}
|
||||
@keyframes gridMove {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(80px, 80px); }
|
||||
}
|
||||
/* 径向光晕 */
|
||||
.pain-glow {
|
||||
position: absolute; top: 50%; left: 50%; width: 800px; height: 800px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
|
||||
animation: glowPulse 6s ease-in-out infinite alternate;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes glowPulse {
|
||||
0% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.9); }
|
||||
100% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
|
||||
}
|
||||
#pain-points .container { position: relative; z-index: 1; }
|
||||
|
||||
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
|
||||
.pain-item {
|
||||
background: rgba(255,255,255,0.015);
|
||||
padding: 48px 40px;
|
||||
border: 1px solid rgba(255,255,255,0.04);
|
||||
transition: all 0.6s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.pain-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.8s ease;
|
||||
}
|
||||
.pain-item:hover::before { transform: translateX(0); }
|
||||
.pain-item:hover {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-color: rgba(255,255,255,0.08);
|
||||
}
|
||||
/* 顶部 SVG 图标 */
|
||||
.pain-icon {
|
||||
position: absolute; top: 32px; left: 40px;
|
||||
width: 48px; height: 48px;
|
||||
opacity: 0.15;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
.pain-item:hover .pain-icon { opacity: 0.35; }
|
||||
.pain-icon svg { width: 100%; height: 100%; }
|
||||
.pain-icon svg line, .pain-icon svg path, .pain-icon svg circle, .pain-icon svg rect {
|
||||
stroke: #fff;
|
||||
stroke-width: 1.5;
|
||||
fill: none;
|
||||
}
|
||||
/* 编号 */
|
||||
.pain-num {
|
||||
font-size: 72px; font-weight: 900; color: rgba(255,255,255,0.04);
|
||||
line-height: 1; letter-spacing: -3px;
|
||||
position: absolute; bottom: 32px; right: 40px;
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
.pain-item:hover .pain-num {
|
||||
color: rgba(255,255,255,0.08);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
.pain-item h3 {
|
||||
font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 12px;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.pain-item p {
|
||||
font-size: 14px; color: #666; line-height: 1.7;
|
||||
}
|
||||
/* 破局之道 - 全宽特殊卡片 */
|
||||
.pain-item.highlight {
|
||||
grid-column: 1 / -1;
|
||||
min-height: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 60px;
|
||||
padding: 64px 80px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-color: rgba(255,255,255,0.08);
|
||||
}
|
||||
.pain-item.highlight h3 {
|
||||
font-size: 28px; margin-bottom: 8px; margin-left: 0;
|
||||
}
|
||||
.pain-item.highlight p {
|
||||
font-size: 16px; color: #888; margin-left: 0; max-width: 600px;
|
||||
}
|
||||
.pain-item.highlight .pain-num {
|
||||
position: static; font-size: 96px;
|
||||
}
|
||||
.pain-item.highlight .highlight-body {
|
||||
flex: 1; max-width: 600px;
|
||||
}
|
||||
|
||||
/* 思路板块 */
|
||||
.approach-list { max-width: 900px; margin: 0 auto; }
|
||||
.approach-item {
|
||||
display: flex; gap: 40px; padding: 48px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
align-items: flex-start;
|
||||
}
|
||||
.approach-item:last-child { border-bottom: none; }
|
||||
.approach-step {
|
||||
font-size: 13px; font-weight: 800; color: #555;
|
||||
letter-spacing: 2px; text-transform: uppercase;
|
||||
min-width: 60px; padding-top: 4px;
|
||||
}
|
||||
.approach-body h3 {
|
||||
font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 12px;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.approach-body p {
|
||||
font-size: 16px; color: #888; line-height: 1.7; max-width: 600px;
|
||||
}
|
||||
|
||||
/* 业务板块 - 使用本地图片 (修复了路径问题，移除暗黑滤镜) */
|
||||
.project-row { display: flex; align-items: center; gap: 80px; margin-bottom: 200px; }
|
||||
.project-row.reverse { flex-direction: row-reverse; }
|
||||
.project-text { flex: 1; }
|
||||
.project-text p { font-size: 18px; color: #999; line-height: 1.8; max-width: 550px; margin-top: 20px; }
|
||||
|
||||
.project-img {
|
||||
flex: 1.2; height: 500px; border-radius: 4px; overflow: hidden; position: relative;
|
||||
background: #111;
|
||||
}
|
||||
.project-img img {
|
||||
width: 100%; height: 100%; object-fit: cover;
|
||||
/* 移除滤镜，保持清晰明亮 */
|
||||
filter: brightness(1.0); transition: all 0.6s ease;
|
||||
}
|
||||
.project-img:hover img { transform: scale(1.03); }
|
||||
|
||||
/* 联系板块 */
|
||||
.contact-form {
|
||||
max-width: 600px; margin: 0 auto;
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
|
||||
}
|
||||
.contact-form .full-width { grid-column: 1 / -1; }
|
||||
.contact-form label {
|
||||
display: block; font-size: 11px; color: #666; font-weight: 700;
|
||||
letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px;
|
||||
}
|
||||
.contact-form input, .contact-form textarea {
|
||||
width: 100%; padding: 16px 20px; background: rgba(255,255,255,0.04);
|
||||
border: 1px solid rgba(255,255,255,0.1); border-radius: 4px;
|
||||
color: #fff; font-size: 15px; font-family: inherit;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
.contact-form input:focus, .contact-form textarea:focus {
|
||||
outline: none; border-color: rgba(255,255,255,0.4);
|
||||
}
|
||||
.contact-form textarea { min-height: 140px; resize: vertical; }
|
||||
.contact-form input::placeholder, .contact-form textarea::placeholder {
|
||||
color: #444;
|
||||
}
|
||||
.contact-submit {
|
||||
grid-column: 1 / -1; text-align: center; margin-top: 12px;
|
||||
}
|
||||
.contact-submit button {
|
||||
padding: 18px 60px; background: #fff; color: #000;
|
||||
border: none; font-size: 14px; font-weight: 700; letter-spacing: 1px;
|
||||
text-transform: uppercase; cursor: pointer; transition: all 0.3s;
|
||||
}
|
||||
.contact-submit button:hover { background: #eee; transform: translateY(-2px); }
|
||||
.contact-submit button:disabled { opacity: 0.5; cursor: default; transform: none; }
|
||||
.form-status {
|
||||
grid-column: 1 / -1; text-align: center; font-size: 13px;
|
||||
margin-top: 8px; min-height: 20px;
|
||||
}
|
||||
.form-status.ok { color: #4ade80; }
|
||||
.form-status.err { color: #f87171; }
|
||||
|
||||
/* 底部 */
|
||||
footer { padding: 100px 0; text-align: center; background: #020202; border-top: 1px solid rgba(255,255,255,0.06); }
|
||||
.tech-by { font-size: 10px; color: #444; letter-spacing: 2px; margin-bottom: 12px; }
|
||||
.company { font-size: 15px; color: #888; font-weight: 600; }
|
||||
|
||||
/* 动效 */
|
||||
.fade-up { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
|
||||
.fade-up.visible { opacity: 1; transform: translateY(0); }
|
||||
/* 桌面端：痛点和思路板块用 CSS 原生动画直接可见 */
|
||||
@media (min-width: 901px) {
|
||||
#pain-points .fade-up, #approach .fade-up {
|
||||
opacity: 1; transform: translateY(0);
|
||||
animation: sectionFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
#pain-points .pain-grid > .fade-up:nth-child(1) { animation-delay: 0.15s; }
|
||||
#pain-points .pain-grid > .fade-up:nth-child(2) { animation-delay: 0.25s; }
|
||||
#pain-points .pain-grid > .fade-up:nth-child(3) { animation-delay: 0.35s; }
|
||||
#pain-points .pain-grid > .fade-up:nth-child(4) { animation-delay: 0.45s; }
|
||||
#pain-points .pain-grid > .fade-up:nth-child(5) { animation-delay: 0.55s; }
|
||||
#pain-points .pain-grid > .fade-up:nth-child(6) { animation-delay: 0.65s; }
|
||||
}
|
||||
/* 移动端：痛点和思路板块 - 错位动画 */
|
||||
@media (max-width: 900px) {
|
||||
/* 默认状态：卡片微弱可见 */
|
||||
#pain-points .pain-item {
|
||||
opacity: 1;
|
||||
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
/* 内容元素默认在更下方（准备从下往上大幅滑入） */
|
||||
#pain-points .pain-item .pain-icon {
|
||||
transform: scale(0.6) translateY(60px);
|
||||
}
|
||||
#pain-points .pain-item h3,
|
||||
#pain-points .pain-item p {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
#pain-points .pain-item .pain-icon {
|
||||
transform: scale(0.6) translateY(60px);
|
||||
}
|
||||
/* 数字：默认状态由 JS 控制，这里不设 transform 避免冲突 */
|
||||
#pain-points .pain-item .pain-num {
|
||||
opacity: 0.3;
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
|
||||
/* 进入视口后：内容上移，数字反向坠落 */
|
||||
#pain-points .pain-item.in-view {
|
||||
opacity: 1;
|
||||
}
|
||||
#pain-points .pain-item.in-view .pain-icon {
|
||||
opacity: 0.35;
|
||||
transform: scale(1) translateY(0);
|
||||
transition-delay: 0.05s;
|
||||
}
|
||||
#pain-points .pain-item.in-view h3 {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
#pain-points .pain-item.in-view p {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.18s;
|
||||
}
|
||||
/* 数字：越落越清晰 */
|
||||
#pain-points .pain-item.in-view .pain-num {
|
||||
opacity: 0.3;
|
||||
/* transform 完全由 JS 视差逻辑接管 */
|
||||
transition-delay: 0.02s;
|
||||
}
|
||||
|
||||
/* 思路板块同样 */
|
||||
#approach .approach-item {
|
||||
opacity: 1;
|
||||
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
#approach .approach-item .approach-step,
|
||||
#approach .approach-item .approach-body h3,
|
||||
#approach .approach-item .approach-body p {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
#approach .approach-item.in-view {
|
||||
opacity: 1;
|
||||
}
|
||||
#approach .approach-item.in-view .approach-step {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.05s;
|
||||
}
|
||||
#approach .approach-item.in-view .approach-body h3 {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.12s;
|
||||
}
|
||||
#approach .approach-item.in-view .approach-body p {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sectionFadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
/* 移动端痛点沉浸式布局 */
|
||||
@media (max-width: 900px) {
|
||||
/* 痛点半块单列全屏 */
|
||||
#pain-points {
|
||||
overflow: visible;
|
||||
text-align: center;
|
||||
}
|
||||
#pain-points .section-label {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
#pain-points h2 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 90%;
|
||||
}
|
||||
/* 背景网格 - 钉在墙上完全不动 */
|
||||
.pain-grid-bg {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: 0;
|
||||
animation: none;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
}
|
||||
.pain-glow {
|
||||
position: fixed;
|
||||
top: 50%; left: 50%;
|
||||
width: 400px; height: 400px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
|
||||
animation: glowPulse 6s ease-in-out infinite alternate;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 内容层 - 在背景上正常滚动 */
|
||||
.pain-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pain-item {
|
||||
min-height: auto;
|
||||
padding: 80px 28px 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-top: 1px solid rgba(255,255,255,0.06);
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.pain-item::before { display: none; }
|
||||
.pain-item:hover { background: transparent; }
|
||||
|
||||
/* SVG 图标 - 居中放大 */
|
||||
.pain-icon {
|
||||
position: relative;
|
||||
top: auto; right: auto; left: auto;
|
||||
width: 64px; height: 64px;
|
||||
opacity: 0.35;
|
||||
margin-bottom: 40px;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
.pain-icon svg { width: 100%; height: 100%; }
|
||||
.pain-icon svg line, .pain-icon svg path, .pain-icon svg circle, .pain-icon svg rect, .pain-icon svg polyline {
|
||||
stroke: #fff;
|
||||
stroke-width: 1.5;
|
||||
fill: none;
|
||||
}
|
||||
.pain-item.in-view .pain-icon {
|
||||
animation: iconPop 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
|
||||
}
|
||||
|
||||
/* 横排大字标题 */
|
||||
.pain-item h3 {
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
color: #fff;
|
||||
}
|
||||
/* 破局之道 */
|
||||
.pain-item.highlight h3 {
|
||||
font-size: 40px;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
/* 描述文字 */
|
||||
.pain-item p {
|
||||
font-size: 15px;
|
||||
color: #888;
|
||||
line-height: 1.9;
|
||||
margin-top: 24px;
|
||||
max-width: 100%;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
/* 编号 - 超大背景装饰 */
|
||||
.pain-num {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
right: 30px;
|
||||
font-size: 110px;
|
||||
font-weight: 900;
|
||||
color: rgba(255,255,255,0.2);
|
||||
letter-spacing: -5px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 破局之道 - 高潮区域 */
|
||||
.pain-item.highlight {
|
||||
min-height: auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
padding: 80px 28px 60px;
|
||||
background: transparent;
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.pain-item.highlight .pain-num {
|
||||
font-size: 140px;
|
||||
color: rgba(255,255,255,0.04);
|
||||
}
|
||||
.pain-item.highlight h3 {
|
||||
font-size: 40px;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
.pain-item.highlight p {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
margin-top: 24px;
|
||||
padding-right: 0;
|
||||
max-width: 90%;
|
||||
}
|
||||
.pain-item.highlight .highlight-body {
|
||||
max-width: 100%;
|
||||
}
|
||||
.pain-item.highlight .pain-icon {
|
||||
width: 80px; height: 80px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
/* 思路板块移动端 */
|
||||
.approach-item {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 40px 0;
|
||||
border-top: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.approach-item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.approach-step {
|
||||
font-size: 11px;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
.approach-body h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.approach-body p {
|
||||
font-size: 14px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 业务板块 */
|
||||
.project-row, .project-row.reverse { flex-direction: column; gap: 40px; margin-bottom: 120px; }
|
||||
.project-img { width: 100%; height: 300px; }
|
||||
h1 { font-size: 42px; letter-spacing: -1px; }
|
||||
.nav-links { display: none; }
|
||||
|
||||
/* 其他板块也至少一屏 */
|
||||
#solutions, #approach, #geo, #contact {
|
||||
min-height: auto;
|
||||
}
|
||||
#solutions .project-row {
|
||||
margin-bottom: 0;
|
||||
padding: 60px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
#approach .approach-item {
|
||||
padding: 60px 0;
|
||||
}
|
||||
#geo .container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 80vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<div class="logo">AI X</div>
|
||||
<div class="nav-links">
|
||||
<a href="#pain-points">场景洞察</a>
|
||||
<a href="#solutions">核心服务</a>
|
||||
<a href="#approach">解决路径</a>
|
||||
<a href="#geo">GEO</a>
|
||||
<a href="#contact">合作咨询</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="hero">
|
||||
<!-- 视频背景 + poster 静态降级 -->
|
||||
<video class="hero-video" autoplay muted loop playsinline preload="auto" poster="assets/hero-poster.jpg?v=2">
|
||||
<source src="assets/video/hero-bg-compressed.mp4?v=2" type="video/mp4">
|
||||
</video>
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="hero-content">
|
||||
<h1>推翻重来<br>是最贵的选择</h1>
|
||||
<div class="hero-sub">
|
||||
大多数企业 AI 转型失败，不是因为技术不行，而是因为要求推翻一切重来。我们走另一条路：在现有系统之上叠加智能层，保留历史投资，释放沉睡数据，30 天看到效果。
|
||||
</div>
|
||||
<a href="#pain-points" class="btn">了解我们的做法</a>
|
||||
</div>
|
||||
<div class="scroll-indicator"></div>
|
||||
</div>
|
||||
|
||||
<section id="pain-points">
|
||||
<div class="pain-grid-bg"></div>
|
||||
<div class="pain-glow"></div>
|
||||
<div class="container">
|
||||
<span class="section-label fade-up">WHY IT MATTERS</span>
|
||||
<h2 class="fade-up" style="max-width: 700px; margin-bottom: 60px;">为什么现有系统<br>需要智能叠加</h2>
|
||||
<div class="pain-grid">
|
||||
<div class="pain-item fade-up">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<rect x="8" y="8" width="14" height="14" rx="2"/>
|
||||
<rect x="26" y="8" width="14" height="14" rx="2"/>
|
||||
<rect x="8" y="26" width="14" height="14" rx="2"/>
|
||||
<rect x="26" y="26" width="14" height="14" rx="2"/>
|
||||
<line x1="22" y1="15" x2="26" y2="15"/>
|
||||
<line x1="15" y1="22" x2="15" y2="26"/>
|
||||
<line x1="33" y1="22" x2="33" y2="26"/>
|
||||
<line x1="22" y1="33" x2="26" y2="33"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>资产闲置</h3>
|
||||
<p>物业、资管、CRM 积累了海量数据，却像仓库里的积压库存。数据停留在记录层面，从未转化为利润或决策依据。</p>
|
||||
<div class="pain-num">01</div>
|
||||
</div>
|
||||
<div class="pain-item fade-up" style="transition-delay: 0.1s;">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<rect x="4" y="12" width="12" height="24" rx="2"/>
|
||||
<rect x="18" y="12" width="12" height="24" rx="2"/>
|
||||
<rect x="32" y="12" width="12" height="24" rx="2"/>
|
||||
<line x1="10" y1="20" x2="10" y2="30"/>
|
||||
<line x1="24" y1="20" x2="24" y2="30"/>
|
||||
<line x1="38" y1="20" x2="38" y2="30"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>全局盲区</h3>
|
||||
<p>报修、资产、客户分属不同系统。管理者像盲人摸象，永远拼不出完整的业务全景，错配资源是常态。</p>
|
||||
<div class="pain-num">02</div>
|
||||
</div>
|
||||
<div class="pain-item fade-up" style="transition-delay: 0.2s;">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<circle cx="24" cy="10" r="6"/>
|
||||
<path d="M14 42c0-8 4-14 10-14s10 6 10 14"/>
|
||||
<circle cx="36" cy="16" r="4"/>
|
||||
<path d="M32 42c0-5 2-9 4-9s4 4 4 9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>效能错配</h3>
|
||||
<p>高薪招来的专业人才，70% 的时间耗在填表、派单、跟进等重复事务上。高射炮打蚊子，人效极低。</p>
|
||||
<div class="pain-num">03</div>
|
||||
</div>
|
||||
<div class="pain-item fade-up" style="transition-delay: 0.1s;">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<circle cx="24" cy="24" r="16"/>
|
||||
<polyline points="24,12 24,24 32,28"/>
|
||||
<line x1="8" y1="6" x2="8" y2="14"/>
|
||||
<line x1="40" y1="6" x2="40" y2="14"/>
|
||||
<line x1="4" y1="10" x2="4" y2="10"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>总是慢半拍</h3>
|
||||
<p>空置率超标、客户流失、租金定价……等月底报表出来，问题已经发生。企业永远在事后补救。</p>
|
||||
<div class="pain-num">04</div>
|
||||
</div>
|
||||
<div class="pain-item fade-up" style="transition-delay: 0.2s;">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<path d="M24 4L4 14v12c0 11 8 20 20 22 12-2 20-11 20-22V14L24 4z"/>
|
||||
<line x1="24" y1="18" x2="24" y2="30"/>
|
||||
<line x1="18" y1="24" x2="30" y2="24"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>转型豪赌</h3>
|
||||
<p>传统 AI 方案要求推翻重建。周期长、风险高、员工抵触。一旦失败，前期投入全部打水漂。</p>
|
||||
<div class="pain-num">05</div>
|
||||
</div>
|
||||
<div class="pain-item fade-up" style="transition-delay: 0.25s;">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<path d="M16 8c0-4 4-6 8-6s8 2 8 6c0 10-8 16-8 16s-8-6-8-16z"/>
|
||||
<line x1="24" y1="30" x2="24" y2="40"/>
|
||||
<line x1="18" y1="34" x2="30" y2="34"/>
|
||||
<circle cx="14" cy="18" r="2"/>
|
||||
<circle cx="34" cy="18" r="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>人才断层</h3>
|
||||
<p>核心业务逻辑长在老员工脑子里。人一走，能力就断层。企业无法规模化复制成功经验。</p>
|
||||
<div class="pain-num">06</div>
|
||||
</div>
|
||||
<div class="pain-item highlight fade-up" style="transition-delay: 0.3s;">
|
||||
<div class="pain-num">∞</div>
|
||||
<div class="highlight-body">
|
||||
<h3>破局之道</h3>
|
||||
<p>不推倒重来，不替换系统。在已经运转良好的基础设施之上，叠加一层 AI 能力——让旧系统拥有新大脑。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="solutions">
|
||||
<div class="container">
|
||||
<span class="section-label fade-up">CORE BUSINESS</span>
|
||||
|
||||
<!-- 物业 - 本地图 (建筑/无人员) -->
|
||||
<div class="project-row">
|
||||
<div class="project-text fade-up">
|
||||
<h2>AI+物业<br>智能中枢</h2>
|
||||
<p>工单自动分发，客诉响应提速 60%。在现有物业 ERP 之上叠加 AI 调度中枢，不改变原有流程，直接降低运营成本。</p>
|
||||
</div>
|
||||
<div class="project-img fade-up" style="transition-delay: 0.2s;">
|
||||
<img src="assets/prop.jpg?v=6" alt="Smart Building">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 资管 - 本地图 (服务器/无人员) -->
|
||||
<div class="project-row reverse">
|
||||
<div class="project-text fade-up">
|
||||
<h2>AI+资管<br>风控大脑</h2>
|
||||
<p>空置率预测、租金动态定价。无缝接入现有资管平台，让历史数据自动转化为预测模型，实现资产自动预警与动态配置，提升投资回报率。</p>
|
||||
</div>
|
||||
<div class="project-img fade-up" style="transition-delay: 0.2s;">
|
||||
<img src="assets/server.jpg?v=6" alt="Server Data">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CRM - 本地图 (电脑屏幕/无人员) -->
|
||||
<div class="project-row">
|
||||
<div class="project-text fade-up">
|
||||
<h2>AI+CRM<br>效率跃升</h2>
|
||||
<p>线索自动清洗，销售人效提升 40%。为企业现有 CRM 配备 AI 私人助理，自动捕捉线索、生成对话摘要、推荐跟进策略，销售团队无需学习新软件。</p>
|
||||
</div>
|
||||
<div class="project-img fade-up" style="transition-delay: 0.2s;">
|
||||
<img src="assets/crm.jpg?v=6" alt="CRM">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="approach">
|
||||
<div class="container">
|
||||
<span class="section-label fade-up">WHY FISCHER</span>
|
||||
<h2 class="fade-up" style="max-width: 700px; margin-bottom: 60px;">为什么选<br>菲西尔智能</h2>
|
||||
<div class="approach-list">
|
||||
<div class="approach-item fade-up">
|
||||
<div class="approach-step">优势 1</div>
|
||||
<div class="approach-body">
|
||||
<h3>零干扰集成</h3>
|
||||
<p>通过 API 外挂 AI 层，不替换原有软件，不迁移历史数据。员工无需学习新系统，对现有业务零冲击。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="approach-item fade-up" style="transition-delay: 0.1s;">
|
||||
<div class="approach-step">优势 2</div>
|
||||
<div class="approach-body">
|
||||
<h3>数据资产化</h3>
|
||||
<p>把沉睡的业务数据转化为实时洞察。自动识别异常单元、预测续约概率、生成招商建议——把事后统计变为事前预警。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="approach-item fade-up" style="transition-delay: 0.2s;">
|
||||
<div class="approach-step">优势 3</div>
|
||||
<div class="approach-body">
|
||||
<h3>智能代理执行</h3>
|
||||
<p>将高频重复工作交给 AI Agent。智能客服、招商匹配、巡检规划自动运转，释放人力聚焦关键决策。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="approach-item fade-up" style="transition-delay: 0.15s;">
|
||||
<div class="approach-step">优势 4</div>
|
||||
<div class="approach-body">
|
||||
<h3>全局决策视角</h3>
|
||||
<p>跨系统数据在 AI 层融合，形成全局业务视图。管理者通过自然语言即可查询"本月哪些楼宇空置率超标"，无需手动汇总报表。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="approach-item fade-up" style="transition-delay: 0.25s;">
|
||||
<div class="approach-step">优势 5</div>
|
||||
<div class="approach-body">
|
||||
<h3>可验证 ROI</h3>
|
||||
<p>从单一场景试点，验证效果后再扩展。每一步都可衡量投入产出，降低试错成本，确保钱花在刀刃上。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="geo">
|
||||
<div class="container">
|
||||
<span class="section-label fade-up">GENERATIVE ENGINE OPTIMIZATION</span>
|
||||
<div style="display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 80px; align-items: center;">
|
||||
<div class="fade-up">
|
||||
<h2 style="margin-bottom: 24px;">GEO<br>生成式引擎优化</h2>
|
||||
<p style="font-size: 19px; color: #ccc; line-height: 1.6; margin-bottom: 20px;">对内提效降本，对外重塑获客。</p>
|
||||
<p style="color: #888; line-height: 1.8; font-size: 16px;">通过优化企业在主流大模型（文心、Kimi、通义）中的内容结构与权重，确保品牌在用户提问时精准、优先呈现。从传统的"搜索排名"进化为 AI 时代的"答案占位"。</p>
|
||||
</div>
|
||||
<!-- GEO - 本地图 (数字地球/无人员) -->
|
||||
<div class="project-img fade-up" style="transition-delay: 0.2s; height: 450px;">
|
||||
<img src="assets/geo.jpg?v=6" alt="Network">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact">
|
||||
<div class="container">
|
||||
<span class="section-label fade-up">GET IN TOUCH</span>
|
||||
<div class="fade-up" style="text-align:center; margin-bottom:60px;">
|
||||
<h2>预约一次<br>15 分钟的系统智能诊断</h2>
|
||||
<p style="color:#777; font-size:17px; max-width:500px; margin:16px auto 0; line-height:1.7;">
|
||||
不推销，只评估。我们将基于您现有系统架构，给出一份可落地的 AI 叠加建议。
|
||||
</p>
|
||||
</div>
|
||||
<form class="contact-form fade-up" id="consultForm" onsubmit="return false;">
|
||||
<div>
|
||||
<label>姓名</label>
|
||||
<input type="text" name="name" placeholder="您的称呼" required>
|
||||
</div>
|
||||
<div>
|
||||
<label>电话</label>
|
||||
<input type="tel" name="phone" placeholder="手机号码" required>
|
||||
</div>
|
||||
<div class="full-width">
|
||||
<label>邮箱</label>
|
||||
<input type="email" name="email" placeholder="选填">
|
||||
</div>
|
||||
<div class="full-width">
|
||||
<label>留言</label>
|
||||
<textarea name="message" placeholder="简要描述您当前使用的系统（选填）"></textarea>
|
||||
</div>
|
||||
<div class="contact-submit">
|
||||
<button type="submit" id="submitBtn">获取诊断名额</button>
|
||||
</div>
|
||||
<div class="form-status" id="formStatus"></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="tech-by">TECHNICAL SUPPORT PROVIDED BY</div>
|
||||
<div class="company">上海菲西尔智能科技有限公司</div>
|
||||
<div style="margin-top: 12px; font-size: 10px; color: #444; letter-spacing: 1px;">© 2026 SHANGHAI FISCHER INTELLIGENT TECHNOLOGY CO., LTD.</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 强制视频播放并捕获错误
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const vid = document.querySelector('.hero-video');
|
||||
if (vid) {
|
||||
vid.play().catch(e => {
|
||||
console.warn('Autoplay blocked:', e);
|
||||
});
|
||||
}
|
||||
|
||||
// 表单提交
|
||||
const form = document.getElementById('consultForm');
|
||||
const btn = document.getElementById('submitBtn');
|
||||
const status = document.getElementById('formStatus');
|
||||
if (form) {
|
||||
btn.addEventListener('click', () => {
|
||||
const name = form.name.value.trim();
|
||||
const phone = form.phone.value.trim();
|
||||
const email = form.email.value.trim();
|
||||
const message = form.message.value.trim();
|
||||
if (!name || !phone) { status.textContent = '请填写姓名和电话'; status.className = 'form-status err'; return; }
|
||||
btn.disabled = true; btn.textContent = '提交中...';
|
||||
fetch('/ai/api/consult', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, phone, email, message })
|
||||
}).then(r => r.json()).then(d => {
|
||||
if (d.success) { status.textContent = '已收到，我们会尽快联系您'; status.className = 'form-status ok'; form.reset(); }
|
||||
else { status.textContent = d.error || '提交失败，请重试'; status.className = 'form-status err'; }
|
||||
}).catch(() => { status.textContent = '网络错误，请重试'; status.className = 'form-status err'; })
|
||||
.finally(() => { btn.disabled = false; btn.textContent = '提交咨询'; });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 滚动渐显动画
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) entry.target.classList.add('visible');
|
||||
});
|
||||
}, { threshold: 0.15, rootMargin: "0px 0px -50px 0px" });
|
||||
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
|
||||
|
||||
// 移动端：入场动画 + 视差滚动
|
||||
if (window.innerWidth <= 900) {
|
||||
// 3. 逐屏滚动 - 方向感知，禁止自由滚动
|
||||
|
||||
// 导航链接点击：保持原生跳转
|
||||
// 导航链接点击：定位到对应 section 并更新索引
|
||||
document.querySelectorAll('.nav-links a, .btn').forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
const href = link.getAttribute('href');
|
||||
if (!href || !href.startsWith('#')) return;
|
||||
const targetId = href.substring(1);
|
||||
const idx = snapTargets.findIndex(t => t.id === targetId);
|
||||
if (idx >= 0) {
|
||||
e.preventDefault();
|
||||
currentIndex = idx;
|
||||
goTo(idx);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,996 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>菲西尔智能 · AI+物业｜AI+资管｜AI+CRM 企业级智能叠加</title>
|
||||
<meta name="description" content="上海菲西尔智能科技有限公司——专注为现有业务系统叠加AI能力。智慧物业智能中枢、房产资管风控大脑、CRM效率跃升、GEO生成式引擎优化。不推倒重来，只做智能叠加。">
|
||||
<meta name="keywords" content="AI+物业,智慧物业,AI+资管,房产资产管理,AI+CRM,智能叠加,企业级AI,GEO优化,生成式引擎优化,上海菲西尔">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="http://8.153.107.96/ai/">
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="菲西尔智能 · 企业级 AI 叠加">
|
||||
<meta property="og:description" content="在已经运转良好的业务系统之上叠加 AI 能力。不推倒重来，只做智能叠加。">
|
||||
<meta property="og:url" content="http://8.153.107.96/ai/">
|
||||
<meta property="og:site_name" content="菲西尔智能 Fischer Intelligence">
|
||||
<meta property="og:locale" content="zh_CN">
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="菲西尔智能 · 企业级 AI 叠加">
|
||||
<meta name="twitter:description" content="在已经运转良好的业务系统之上叠加 AI 能力。">
|
||||
|
||||
<!-- 结构化数据 -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "上海菲西尔智能科技有限公司",
|
||||
"alternateName": "Fischer Intelligence",
|
||||
"url": "http://8.153.107.96/ai/",
|
||||
"description": "专注为现有业务系统叠加AI能力，涵盖智慧物业、房产资管、CRM领域",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"addressLocality": "上海",
|
||||
"addressCountry": "CN"
|
||||
},
|
||||
"knowsAbout": ["AI+物业", "智慧物业", "AI+资管", "房产资产管理", "AI+CRM", "GEO优化"]
|
||||
}
|
||||
</script>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Noto+Sans+SC:wght@400;600;800;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #050505;
|
||||
--text-main: #ffffff;
|
||||
--text-sub: #999999;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: 'Inter', 'Noto Sans SC', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text-main);
|
||||
line-height: 1.5;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 导航 */
|
||||
nav {
|
||||
position: fixed; top: 0; width: 100%; z-index: 100;
|
||||
padding: 24px 0; background: rgba(5,5,5,0.85); backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.nav-inner { max-width: 1400px; margin: 0 auto; padding: 0 4vw; display: flex; justify-content: space-between; align-items: center; }
|
||||
.logo { font-size: 15px; font-weight: 700; letter-spacing: 2px; color: #fff; text-transform: uppercase; }
|
||||
.nav-links a { color: #777; text-decoration: none; font-size: 12px; margin-left: 36px; font-weight: 600; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px; }
|
||||
.nav-links a:hover { color: #fff; }
|
||||
|
||||
/* HERO - 营销视频背景 */
|
||||
.hero {
|
||||
position: relative; height: 100vh; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.hero-video {
|
||||
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
|
||||
filter: brightness(0.85) saturate(1.1);
|
||||
transform: scale(1.05); /* 留余量给呼吸感缩放 */
|
||||
animation: heroZoom 20s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes heroZoom {
|
||||
from { transform: scale(1.05); }
|
||||
to { transform: scale(1.12); }
|
||||
}
|
||||
/* 视频未加载/移动端降级：静态 poster */
|
||||
.hero-poster {
|
||||
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
|
||||
}
|
||||
|
||||
/* 极轻的底层渐变，仅保留底部过渡 */
|
||||
.hero-overlay {
|
||||
position: absolute; inset: 0;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.55) 100%);
|
||||
z-index: 1; pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative; z-index: 10; text-align: center; max-width: 1000px; padding: 0 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(48px, 9vw, 110px);
|
||||
font-weight: 900; line-height: 1.05; letter-spacing: -3px; margin-bottom: 24px;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 4px 20px rgba(0,0,0,0.6);
|
||||
opacity: 0; animation: textReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-size: clamp(16px, 1.8vw, 22px); font-weight: 400; color: rgba(255,255,255,0.9);
|
||||
max-width: 700px; margin: 0 auto 48px; line-height: 1.6;
|
||||
/* 磨砂玻璃效果 */
|
||||
background: rgba(255,255,255,0.05);
|
||||
backdrop-filter: blur(20px) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(150%);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-left: 3px solid rgba(255,255,255,0.4);
|
||||
border-radius: 8px;
|
||||
padding: 24px 32px;
|
||||
opacity: 0; animation: textReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s;
|
||||
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block; padding: 18px 48px;
|
||||
background: #fff; color: #000; text-decoration: none; font-size: 14px; font-weight: 700;
|
||||
border-radius: 0; letter-spacing: 1px; text-transform: uppercase; transition: all 0.3s ease;
|
||||
opacity: 0; animation: textReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.8s;
|
||||
}
|
||||
.btn:hover { transform: translateY(-2px); background: #eee; }
|
||||
|
||||
.scroll-indicator {
|
||||
position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 10;
|
||||
width: 2px; height: 60px; background: linear-gradient(to bottom, #fff, transparent);
|
||||
animation: scrollLine 2s infinite;
|
||||
}
|
||||
@keyframes scrollLine { 0% { height: 0; opacity: 0; } 50% { height: 60px; opacity: 1; } 100% { height: 60px; opacity: 0; transform: translateY(20px); } }
|
||||
@keyframes textReveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
/* 通用板块 */
|
||||
.container { max-width: 1400px; margin: 0 auto; padding: 0 4vw; position: relative; z-index: 2; }
|
||||
section { padding: 160px 0; background: #050505; border-top: 1px solid rgba(255,255,255,0.06); }
|
||||
.section-label { font-size: 11px; font-weight: 700; color: #666; letter-spacing: 3px; margin-bottom: 80px; display: block; }
|
||||
h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 800; line-height: 1.1; margin-bottom: 24px; letter-spacing: -1px; color: #fff; }
|
||||
|
||||
/* 痛点板块 */
|
||||
#pain-points { position: relative; overflow: hidden; }
|
||||
/* 动态网格背景 */
|
||||
.pain-grid-bg {
|
||||
position: absolute; inset: 0; z-index: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
|
||||
background-size: 80px 80px;
|
||||
animation: gridMove 30s linear infinite;
|
||||
}
|
||||
@keyframes gridMove {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(80px, 80px); }
|
||||
}
|
||||
/* 径向光晕 */
|
||||
.pain-glow {
|
||||
position: absolute; top: 50%; left: 50%; width: 800px; height: 800px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
|
||||
animation: glowPulse 6s ease-in-out infinite alternate;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes glowPulse {
|
||||
0% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.9); }
|
||||
100% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
|
||||
}
|
||||
#pain-points .container { position: relative; z-index: 1; }
|
||||
|
||||
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
|
||||
.pain-item {
|
||||
background: rgba(255,255,255,0.015);
|
||||
padding: 48px 40px;
|
||||
border: 1px solid rgba(255,255,255,0.04);
|
||||
transition: all 0.6s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.pain-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.8s ease;
|
||||
}
|
||||
.pain-item:hover::before { transform: translateX(0); }
|
||||
.pain-item:hover {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-color: rgba(255,255,255,0.08);
|
||||
}
|
||||
/* 顶部 SVG 图标 */
|
||||
.pain-icon {
|
||||
position: absolute; top: 32px; left: 40px;
|
||||
width: 48px; height: 48px;
|
||||
opacity: 0.15;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
.pain-item:hover .pain-icon { opacity: 0.35; }
|
||||
.pain-icon svg { width: 100%; height: 100%; }
|
||||
.pain-icon svg line, .pain-icon svg path, .pain-icon svg circle, .pain-icon svg rect {
|
||||
stroke: #fff;
|
||||
stroke-width: 1.5;
|
||||
fill: none;
|
||||
}
|
||||
/* 编号 */
|
||||
.pain-num {
|
||||
font-size: 72px; font-weight: 900; color: rgba(255,255,255,0.04);
|
||||
line-height: 1; letter-spacing: -3px;
|
||||
position: absolute; bottom: 32px; right: 40px;
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
.pain-item:hover .pain-num {
|
||||
color: rgba(255,255,255,0.08);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
.pain-item h3 {
|
||||
font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 12px;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.pain-item p {
|
||||
font-size: 14px; color: #666; line-height: 1.7;
|
||||
}
|
||||
/* 破局之道 - 全宽特殊卡片 */
|
||||
.pain-item.highlight {
|
||||
grid-column: 1 / -1;
|
||||
min-height: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 60px;
|
||||
padding: 64px 80px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-color: rgba(255,255,255,0.08);
|
||||
}
|
||||
.pain-item.highlight h3 {
|
||||
font-size: 28px; margin-bottom: 8px; margin-left: 0;
|
||||
}
|
||||
.pain-item.highlight p {
|
||||
font-size: 16px; color: #888; margin-left: 0; max-width: 600px;
|
||||
}
|
||||
.pain-item.highlight .pain-num {
|
||||
position: static; font-size: 96px;
|
||||
}
|
||||
.pain-item.highlight .highlight-body {
|
||||
flex: 1; max-width: 600px;
|
||||
}
|
||||
|
||||
/* 思路板块 */
|
||||
.approach-list { max-width: 900px; margin: 0 auto; }
|
||||
.approach-item {
|
||||
display: flex; gap: 40px; padding: 48px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
align-items: flex-start;
|
||||
}
|
||||
.approach-item:last-child { border-bottom: none; }
|
||||
.approach-step {
|
||||
font-size: 13px; font-weight: 800; color: #555;
|
||||
letter-spacing: 2px; text-transform: uppercase;
|
||||
min-width: 60px; padding-top: 4px;
|
||||
}
|
||||
.approach-body h3 {
|
||||
font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 12px;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.approach-body p {
|
||||
font-size: 16px; color: #888; line-height: 1.7; max-width: 600px;
|
||||
}
|
||||
|
||||
/* 业务板块 - 使用本地图片 (修复了路径问题，移除暗黑滤镜) */
|
||||
.project-row { display: flex; align-items: center; gap: 80px; margin-bottom: 200px; }
|
||||
.project-row.reverse { flex-direction: row-reverse; }
|
||||
.project-text { flex: 1; }
|
||||
.project-text p { font-size: 18px; color: #999; line-height: 1.8; max-width: 550px; margin-top: 20px; }
|
||||
|
||||
.project-img {
|
||||
flex: 1.2; height: 500px; border-radius: 4px; overflow: hidden; position: relative;
|
||||
background: #111;
|
||||
}
|
||||
.project-img img {
|
||||
width: 100%; height: 100%; object-fit: cover;
|
||||
/* 移除滤镜，保持清晰明亮 */
|
||||
filter: brightness(1.0); transition: all 0.6s ease;
|
||||
}
|
||||
.project-img:hover img { transform: scale(1.03); }
|
||||
|
||||
/* 联系板块 */
|
||||
.contact-form {
|
||||
max-width: 600px; margin: 0 auto;
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
|
||||
}
|
||||
.contact-form .full-width { grid-column: 1 / -1; }
|
||||
.contact-form label {
|
||||
display: block; font-size: 11px; color: #666; font-weight: 700;
|
||||
letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px;
|
||||
}
|
||||
.contact-form input, .contact-form textarea {
|
||||
width: 100%; padding: 16px 20px; background: rgba(255,255,255,0.04);
|
||||
border: 1px solid rgba(255,255,255,0.1); border-radius: 4px;
|
||||
color: #fff; font-size: 15px; font-family: inherit;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
.contact-form input:focus, .contact-form textarea:focus {
|
||||
outline: none; border-color: rgba(255,255,255,0.4);
|
||||
}
|
||||
.contact-form textarea { min-height: 140px; resize: vertical; }
|
||||
.contact-form input::placeholder, .contact-form textarea::placeholder {
|
||||
color: #444;
|
||||
}
|
||||
.contact-submit {
|
||||
grid-column: 1 / -1; text-align: center; margin-top: 12px;
|
||||
}
|
||||
.contact-submit button {
|
||||
padding: 18px 60px; background: #fff; color: #000;
|
||||
border: none; font-size: 14px; font-weight: 700; letter-spacing: 1px;
|
||||
text-transform: uppercase; cursor: pointer; transition: all 0.3s;
|
||||
}
|
||||
.contact-submit button:hover { background: #eee; transform: translateY(-2px); }
|
||||
.contact-submit button:disabled { opacity: 0.5; cursor: default; transform: none; }
|
||||
.form-status {
|
||||
grid-column: 1 / -1; text-align: center; font-size: 13px;
|
||||
margin-top: 8px; min-height: 20px;
|
||||
}
|
||||
.form-status.ok { color: #4ade80; }
|
||||
.form-status.err { color: #f87171; }
|
||||
|
||||
/* 底部 */
|
||||
footer { padding: 100px 0; text-align: center; background: #020202; border-top: 1px solid rgba(255,255,255,0.06); }
|
||||
.tech-by { font-size: 10px; color: #444; letter-spacing: 2px; margin-bottom: 12px; }
|
||||
.company { font-size: 15px; color: #888; font-weight: 600; }
|
||||
|
||||
/* 动效 */
|
||||
.fade-up { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
|
||||
.fade-up.visible { opacity: 1; transform: translateY(0); }
|
||||
/* 桌面端：痛点和思路板块用 CSS 原生动画直接可见 */
|
||||
@media (min-width: 901px) {
|
||||
#pain-points .fade-up, #approach .fade-up {
|
||||
opacity: 1; transform: translateY(0);
|
||||
animation: sectionFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
#pain-points .pain-grid > .fade-up:nth-child(1) { animation-delay: 0.15s; }
|
||||
#pain-points .pain-grid > .fade-up:nth-child(2) { animation-delay: 0.25s; }
|
||||
#pain-points .pain-grid > .fade-up:nth-child(3) { animation-delay: 0.35s; }
|
||||
#pain-points .pain-grid > .fade-up:nth-child(4) { animation-delay: 0.45s; }
|
||||
#pain-points .pain-grid > .fade-up:nth-child(5) { animation-delay: 0.55s; }
|
||||
#pain-points .pain-grid > .fade-up:nth-child(6) { animation-delay: 0.65s; }
|
||||
}
|
||||
/* 移动端：痛点和思路板块 - 错位动画 */
|
||||
@media (max-width: 900px) {
|
||||
/* 默认状态：卡片微弱可见 */
|
||||
#pain-points .pain-item {
|
||||
opacity: 1;
|
||||
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
/* 内容元素默认在更下方（准备从下往上大幅滑入） */
|
||||
#pain-points .pain-item .pain-icon {
|
||||
transform: scale(0.6) translateY(60px);
|
||||
}
|
||||
#pain-points .pain-item h3,
|
||||
#pain-points .pain-item p {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
#pain-points .pain-item .pain-icon {
|
||||
transform: scale(0.6) translateY(60px);
|
||||
}
|
||||
/* 数字：默认状态由 JS 控制，这里不设 transform 避免冲突 */
|
||||
#pain-points .pain-item .pain-num {
|
||||
opacity: 0.3;
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
|
||||
/* 进入视口后：内容上移，数字反向坠落 */
|
||||
#pain-points .pain-item.in-view {
|
||||
opacity: 1;
|
||||
}
|
||||
#pain-points .pain-item.in-view .pain-icon {
|
||||
opacity: 0.35;
|
||||
transform: scale(1) translateY(0);
|
||||
transition-delay: 0.05s;
|
||||
}
|
||||
#pain-points .pain-item.in-view h3 {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
#pain-points .pain-item.in-view p {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.18s;
|
||||
}
|
||||
/* 数字：越落越清晰 */
|
||||
#pain-points .pain-item.in-view .pain-num {
|
||||
opacity: 0.3;
|
||||
/* transform 完全由 JS 视差逻辑接管 */
|
||||
transition-delay: 0.02s;
|
||||
}
|
||||
|
||||
/* 思路板块同样 */
|
||||
#approach .approach-item {
|
||||
opacity: 1;
|
||||
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
#approach .approach-item .approach-step,
|
||||
#approach .approach-item .approach-body h3,
|
||||
#approach .approach-item .approach-body p {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
#approach .approach-item.in-view {
|
||||
opacity: 1;
|
||||
}
|
||||
#approach .approach-item.in-view .approach-step {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.05s;
|
||||
}
|
||||
#approach .approach-item.in-view .approach-body h3 {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.12s;
|
||||
}
|
||||
#approach .approach-item.in-view .approach-body p {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sectionFadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
/* 移动端痛点沉浸式布局 */
|
||||
@media (max-width: 900px) {
|
||||
/* 痛点半块单列全屏 */
|
||||
#pain-points {
|
||||
overflow: visible;
|
||||
text-align: center;
|
||||
}
|
||||
#pain-points .section-label {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
#pain-points h2 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 90%;
|
||||
}
|
||||
/* 背景网格 - 钉在墙上完全不动 */
|
||||
.pain-grid-bg {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: 0;
|
||||
animation: none;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
}
|
||||
.pain-glow {
|
||||
position: fixed;
|
||||
top: 50%; left: 50%;
|
||||
width: 400px; height: 400px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
|
||||
animation: glowPulse 6s ease-in-out infinite alternate;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 内容层 - 在背景上正常滚动 */
|
||||
.pain-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pain-item {
|
||||
min-height: auto;
|
||||
padding: 80px 28px 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-top: 1px solid rgba(255,255,255,0.06);
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.pain-item::before { display: none; }
|
||||
.pain-item:hover { background: transparent; }
|
||||
|
||||
/* SVG 图标 - 居中放大 */
|
||||
.pain-icon {
|
||||
position: relative;
|
||||
top: auto; right: auto; left: auto;
|
||||
width: 64px; height: 64px;
|
||||
opacity: 0.35;
|
||||
margin-bottom: 40px;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
.pain-icon svg { width: 100%; height: 100%; }
|
||||
.pain-icon svg line, .pain-icon svg path, .pain-icon svg circle, .pain-icon svg rect, .pain-icon svg polyline {
|
||||
stroke: #fff;
|
||||
stroke-width: 1.5;
|
||||
fill: none;
|
||||
}
|
||||
.pain-item.in-view .pain-icon {
|
||||
animation: iconPop 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
|
||||
}
|
||||
|
||||
/* 横排大字标题 */
|
||||
.pain-item h3 {
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
color: #fff;
|
||||
}
|
||||
/* 破局之道 */
|
||||
.pain-item.highlight h3 {
|
||||
font-size: 40px;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
/* 描述文字 */
|
||||
.pain-item p {
|
||||
font-size: 15px;
|
||||
color: #888;
|
||||
line-height: 1.9;
|
||||
margin-top: 24px;
|
||||
max-width: 100%;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
/* 编号 - 超大背景装饰 */
|
||||
.pain-num {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
right: 30px;
|
||||
font-size: 110px;
|
||||
font-weight: 900;
|
||||
color: rgba(255,255,255,0.2);
|
||||
letter-spacing: -5px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 破局之道 - 高潮区域 */
|
||||
.pain-item.highlight {
|
||||
min-height: auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
padding: 80px 28px 60px;
|
||||
background: transparent;
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.pain-item.highlight .pain-num {
|
||||
font-size: 140px;
|
||||
color: rgba(255,255,255,0.04);
|
||||
}
|
||||
.pain-item.highlight h3 {
|
||||
font-size: 40px;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
.pain-item.highlight p {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
margin-top: 24px;
|
||||
padding-right: 0;
|
||||
max-width: 90%;
|
||||
}
|
||||
.pain-item.highlight .highlight-body {
|
||||
max-width: 100%;
|
||||
}
|
||||
.pain-item.highlight .pain-icon {
|
||||
width: 80px; height: 80px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
/* 思路板块移动端 */
|
||||
.approach-item {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 40px 0;
|
||||
border-top: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.approach-item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.approach-step {
|
||||
font-size: 11px;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
.approach-body h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.approach-body p {
|
||||
font-size: 14px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 业务板块 */
|
||||
.project-row, .project-row.reverse { flex-direction: column; gap: 40px; margin-bottom: 120px; }
|
||||
.project-img { width: 100%; height: 300px; }
|
||||
h1 { font-size: 42px; letter-spacing: -1px; }
|
||||
.nav-links { display: none; }
|
||||
|
||||
/* 其他板块也至少一屏 */
|
||||
#solutions, #approach, #geo, #contact {
|
||||
min-height: auto;
|
||||
}
|
||||
#solutions .project-row {
|
||||
margin-bottom: 0;
|
||||
padding: 60px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
#approach .approach-item {
|
||||
padding: 60px 0;
|
||||
}
|
||||
#geo .container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 80vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<div class="logo">AI X</div>
|
||||
<div class="nav-links">
|
||||
<a href="#pain-points">场景洞察</a>
|
||||
<a href="#solutions">核心服务</a>
|
||||
<a href="#approach">解决路径</a>
|
||||
<a href="#geo">GEO</a>
|
||||
<a href="#contact">合作咨询</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="hero">
|
||||
<!-- 视频背景 + poster 静态降级 -->
|
||||
<video class="hero-video" autoplay muted loop playsinline preload="auto" poster="assets/hero-poster.jpg?v=2">
|
||||
<source src="assets/video/hero-bg-compressed.mp4?v=2" type="video/mp4">
|
||||
</video>
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="hero-content">
|
||||
<h1>不推倒重来<br>只做智能叠加</h1>
|
||||
<div class="hero-sub">
|
||||
在已运转的业务系统之上叠加 AI 智能层。2 周部署，零迁移成本，让旧系统拥有新大脑。
|
||||
</div>
|
||||
<a href="#pain-points" class="btn">获取行业定制方案</a>
|
||||
</div>
|
||||
<div class="scroll-indicator"></div>
|
||||
</div>
|
||||
|
||||
<section id="pain-points">
|
||||
<div class="pain-grid-bg"></div>
|
||||
<div class="pain-glow"></div>
|
||||
<div class="container">
|
||||
<span class="section-label fade-up">THE REAL PROBLEM</span>
|
||||
<h2 class="fade-up" style="max-width: 700px; margin-bottom: 60px;">为什么你的系统<br>越用越贵</h2>
|
||||
<div class="pain-grid">
|
||||
<div class="pain-item fade-up">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<rect x="8" y="8" width="14" height="14" rx="2"/>
|
||||
<rect x="26" y="8" width="14" height="14" rx="2"/>
|
||||
<rect x="8" y="26" width="14" height="14" rx="2"/>
|
||||
<rect x="26" y="26" width="14" height="14" rx="2"/>
|
||||
<line x1="22" y1="15" x2="26" y2="15"/>
|
||||
<line x1="15" y1="22" x2="15" y2="26"/>
|
||||
<line x1="33" y1="22" x2="33" y2="26"/>
|
||||
<line x1="22" y1="33" x2="26" y2="33"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>每年几十万数据录入费<br>换来零决策价值</h3>
|
||||
<p>物业、资管、CRM 积累了海量数据，却像仓库里的积压库存。记录了一大堆，决策还是靠拍脑袋。</p>
|
||||
<div class="pain-num">01</div>
|
||||
</div>
|
||||
<div class="pain-item fade-up" style="transition-delay: 0.1s;">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<rect x="4" y="12" width="12" height="24" rx="2"/>
|
||||
<rect x="18" y="12" width="12" height="24" rx="2"/>
|
||||
<rect x="32" y="12" width="12" height="24" rx="2"/>
|
||||
<line x1="10" y1="20" x2="10" y2="30"/>
|
||||
<line x1="24" y1="20" x2="24" y2="30"/>
|
||||
<line x1="38" y1="20" x2="38" y2="30"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>系统越多 盲区越大<br>管理者像盲人摸象</h3>
|
||||
<p>报修、资产、客户分属不同系统。永远拼不出完整的业务全景，资源错配成了常态。</p>
|
||||
<div class="pain-num">02</div>
|
||||
</div>
|
||||
<div class="pain-item fade-up" style="transition-delay: 0.2s;">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<circle cx="24" cy="10" r="6"/>
|
||||
<path d="M14 42c0-8 4-14 10-14s10 6 10 14"/>
|
||||
<circle cx="36" cy="16" r="4"/>
|
||||
<path d="M32 42c0-5 2-9 4-9s4 4 4 9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>高薪人才 70% 时间<br>耗在填表和派单</h3>
|
||||
<p>招来的专业人才，精力被重复事务榨干。高射炮打蚊子，人效极低，人才流失率越来越高。</p>
|
||||
<div class="pain-num">03</div>
|
||||
</div>
|
||||
<div class="pain-item fade-up" style="transition-delay: 0.1s;">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<circle cx="24" cy="24" r="16"/>
|
||||
<polyline points="24,12 24,24 32,28"/>
|
||||
<line x1="8" y1="6" x2="8" y2="14"/>
|
||||
<line x1="40" y1="6" x2="40" y2="14"/>
|
||||
<line x1="4" y1="10" x2="4" y2="10"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>报表出来时<br>损失已经发生</h3>
|
||||
<p>空置率超标、客户流失、租金定价偏差……等月底报表出来，问题早已发生。企业永远在事后补救。</p>
|
||||
<div class="pain-num">04</div>
|
||||
</div>
|
||||
<div class="pain-item fade-up" style="transition-delay: 0.2s;">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<path d="M24 4L4 14v12c0 11 8 20 20 22 12-2 20-11 20-22V14L24 4z"/>
|
||||
<line x1="24" y1="18" x2="24" y2="30"/>
|
||||
<line x1="18" y1="24" x2="30" y2="24"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>推翻重来的项目<br>70% 超期超预算</h3>
|
||||
<p>传统 AI 方案要求重建系统。周期长、风险高、员工抵触。一旦失败，前期投入全部打水漂。</p>
|
||||
<div class="pain-num">05</div>
|
||||
</div>
|
||||
<div class="pain-item fade-up" style="transition-delay: 0.25s;">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<path d="M16 8c0-4 4-6 8-6s8 2 8 6c0 10-8 16-8 16s-8-6-8-16z"/>
|
||||
<line x1="24" y1="30" x2="24" y2="40"/>
|
||||
<line x1="18" y1="34" x2="30" y2="34"/>
|
||||
<circle cx="14" cy="18" r="2"/>
|
||||
<circle cx="34" cy="18" r="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>核心能力长在老员工脑子里<br>人走能力断</h3>
|
||||
<p>招商经验、客户判断、定价策略全靠人。人一走，能力就断层。企业无法规模化复制成功经验。</p>
|
||||
<div class="pain-num">06</div>
|
||||
</div>
|
||||
<div class="pain-item highlight fade-up" style="transition-delay: 0.3s;">
|
||||
<div class="pain-num">∞</div>
|
||||
<div class="highlight-body">
|
||||
<h3>破局之道</h3>
|
||||
<p>不替换系统，不迁移数据，不改变流程。在现有基础设施之上叠加一层 AI——让旧系统拥有新大脑。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="solutions">
|
||||
<div class="container">
|
||||
<span class="section-label fade-up">WHAT WE DO</span>
|
||||
|
||||
<!-- 物业 - 本地图 (建筑/无人员) -->
|
||||
<div class="project-row">
|
||||
<div class="project-text fade-up">
|
||||
<h2>AI+物业<br>智能中枢</h2>
|
||||
<p>工单自动分发，客诉响应提速 60%。在现有物业 ERP 之上叠加 AI 调度层——不改变任何原有流程。巡检路线自动规划、设备故障提前预警。你现有的系统不用换，但效率会翻倍。</p>
|
||||
</div>
|
||||
<div class="project-img fade-up" style="transition-delay: 0.2s;">
|
||||
<img src="assets/prop.jpg?v=6" alt="Smart Building">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 资管 - 本地图 (服务器/无人员) -->
|
||||
<div class="project-row reverse">
|
||||
<div class="project-text fade-up">
|
||||
<h2>AI+资管<br>风控大脑</h2>
|
||||
<p>空置率提前 90 天预警，租金定价误差收窄至 5%。无缝接入资管平台，让历史租赁数据变成预测模型。招商智能匹配、租约到期提醒。资管不该靠直觉，该靠数据。</p>
|
||||
</div>
|
||||
<div class="project-img fade-up" style="transition-delay: 0.2s;">
|
||||
<img src="assets/server.jpg?v=6" alt="Server Data">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CRM - 本地图 (电脑屏幕/无人员) -->
|
||||
<div class="project-row">
|
||||
<div class="project-text fade-up">
|
||||
<h2>AI+CRM<br>效率跃升</h2>
|
||||
<p>线索自动清洗，销售人效提升 40%。为现有 CRM 配备 AI 助理——自动捕捉商机、生成对话摘要。销售无需学习新软件，打开原界面就能看到 AI 推荐。</p>
|
||||
</div>
|
||||
<div class="project-img fade-up" style="transition-delay: 0.2s;">
|
||||
<img src="assets/crm.jpg?v=6" alt="CRM">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="approach">
|
||||
<div class="container">
|
||||
<span class="section-label fade-up">WHY FISCHER</span>
|
||||
<h2 class="fade-up" style="max-width: 700px; margin-bottom: 60px;">菲西尔和其他<br>AI 公司有什么不同</h2>
|
||||
<div class="approach-list">
|
||||
<div class="approach-item fade-up">
|
||||
<div class="approach-step">优势 1</div>
|
||||
<div class="approach-body">
|
||||
<h3>不替换，只叠加</h3>
|
||||
<p>通过 API 外挂 AI 层，不停服、不迁移、不改流程。员工用原来的界面，体验无缝升级。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="approach-item fade-up" style="transition-delay: 0.1s;">
|
||||
<div class="approach-step">优势 2</div>
|
||||
<div class="approach-body">
|
||||
<h3>让数据开口说话</h3>
|
||||
<p>沉睡的历史数据自动转化为预测模型和决策建议。把事后统计变为事前预警。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="approach-item fade-up" style="transition-delay: 0.2s;">
|
||||
<div class="approach-step">优势 3</div>
|
||||
<div class="approach-body">
|
||||
<h3>让 AI 替你干活</h3>
|
||||
<p>高频重复工作交给 AI Agent——智能客服、招商匹配、巡检规划自动运转，人只负责关键决策。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="approach-item fade-up" style="transition-delay: 0.15s;">
|
||||
<div class="approach-step">优势 4</div>
|
||||
<div class="approach-body">
|
||||
<h3>跨系统一屏掌控</h3>
|
||||
<p>所有业务数据在 AI 层融合。一句自然语言就能查"本月哪些楼宇空置率超标"，告别手动汇总。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="approach-item fade-up" style="transition-delay: 0.25s;">
|
||||
<div class="approach-step">优势 5</div>
|
||||
<div class="approach-body">
|
||||
<h3>小步试错，大步扩张</h3>
|
||||
<p>从单一场景试点，验证有效再扩展。每一步都可衡量投入产出，钱花在刀刃上。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="geo">
|
||||
<div class="container">
|
||||
<span class="section-label fade-up">BEYOND EFFICIENCY</span>
|
||||
<div style="display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 80px; align-items: center;">
|
||||
<div class="fade-up">
|
||||
<h2 style="margin-bottom: 24px;">让用户在大模型里<br>第一个找到你</h2>
|
||||
<p style="font-size: 19px; color: #ccc; line-height: 1.6; margin-bottom: 20px;">对内提效降本，对外重塑获客。</p>
|
||||
<p style="color: #888; line-height: 1.8; font-size: 16px;">当客户问 Kimi 或文心一言"帮我找一家做 AI+物业的公司"——你的品牌会不会出现在答案里？我们优化企业在主流大模型中的内容结构与权重，从"搜索排名"进化为"答案占位"。</p>
|
||||
</div>
|
||||
<!-- GEO - 本地图 (数字地球/无人员) -->
|
||||
<div class="project-img fade-up" style="transition-delay: 0.2s; height: 450px;">
|
||||
<img src="assets/geo.jpg?v=6" alt="Network">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact">
|
||||
<div class="container">
|
||||
<span class="section-label fade-up">GET IN TOUCH</span>
|
||||
<div class="fade-up" style="text-align:center; margin-bottom:60px;">
|
||||
<h2>15 分钟，看看你的系统<br>能叠加什么</h2>
|
||||
<p style="color:#777; font-size:17px; max-width:500px; margin:16px auto 0; line-height:1.7;">
|
||||
不推销，只评估。基于你现有架构，给出一份可落地的 AI 叠加建议。
|
||||
</p>
|
||||
</div>
|
||||
<form class="contact-form fade-up" id="consultForm" onsubmit="return false;">
|
||||
<div>
|
||||
<label>姓名</label>
|
||||
<input type="text" name="name" placeholder="怎么称呼您" required>
|
||||
</div>
|
||||
<div>
|
||||
<label>电话</label>
|
||||
<input type="tel" name="phone" placeholder="手机号码" required>
|
||||
</div>
|
||||
<div class="full-width">
|
||||
<label>邮箱</label>
|
||||
<input type="email" name="email" placeholder="选填">
|
||||
</div>
|
||||
<div class="full-width">
|
||||
<label>留言</label>
|
||||
<textarea name="message" placeholder="你现在用的是哪个系统？（选填）"></textarea>
|
||||
</div>
|
||||
<div class="contact-submit">
|
||||
<button type="submit" id="submitBtn">预约诊断名额</button>
|
||||
</div>
|
||||
<div class="form-status" id="formStatus"></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="tech-by">TECHNICAL SUPPORT PROVIDED BY</div>
|
||||
<div class="company">上海菲西尔智能科技有限公司</div>
|
||||
<div style="margin-top: 12px; font-size: 10px; color: #444; letter-spacing: 1px;">© 2026 SHANGHAI FISCHER INTELLIGENT TECHNOLOGY CO., LTD.</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 强制视频播放并捕获错误
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const vid = document.querySelector('.hero-video');
|
||||
if (vid) {
|
||||
vid.play().catch(e => {
|
||||
console.warn('Autoplay blocked:', e);
|
||||
});
|
||||
}
|
||||
|
||||
// 表单提交
|
||||
const form = document.getElementById('consultForm');
|
||||
const btn = document.getElementById('submitBtn');
|
||||
const status = document.getElementById('formStatus');
|
||||
if (form) {
|
||||
btn.addEventListener('click', () => {
|
||||
const name = form.name.value.trim();
|
||||
const phone = form.phone.value.trim();
|
||||
const email = form.email.value.trim();
|
||||
const message = form.message.value.trim();
|
||||
if (!name || !phone) { status.textContent = '请填写姓名和电话'; status.className = 'form-status err'; return; }
|
||||
btn.disabled = true; btn.textContent = '提交中...';
|
||||
fetch('/ai/api/consult', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, phone, email, message })
|
||||
}).then(r => r.json()).then(d => {
|
||||
if (d.success) { status.textContent = '已收到，我们会尽快联系您'; status.className = 'form-status ok'; form.reset(); }
|
||||
else { status.textContent = d.error || '提交失败，请重试'; status.className = 'form-status err'; }
|
||||
}).catch(() => { status.textContent = '网络错误，请重试'; status.className = 'form-status err'; })
|
||||
.finally(() => { btn.disabled = false; btn.textContent = '提交咨询'; });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 滚动渐显动画
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) entry.target.classList.add('visible');
|
||||
});
|
||||
}, { threshold: 0.15, rootMargin: "0px 0px -50px 0px" });
|
||||
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
|
||||
|
||||
// 移动端：入场动画 + 视差滚动
|
||||
if (window.innerWidth <= 900) {
|
||||
// 3. 逐屏滚动 - 方向感知，禁止自由滚动
|
||||
|
||||
// 导航链接点击：保持原生跳转
|
||||
// 导航链接点击：定位到对应 section 并更新索引
|
||||
document.querySelectorAll('.nav-links a, .btn').forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
const href = link.getAttribute('href');
|
||||
if (!href || !href.startsWith('#')) return;
|
||||
const targetId = href.substring(1);
|
||||
const idx = snapTargets.findIndex(t => t.id === targetId);
|
||||
if (idx >= 0) {
|
||||
e.preventDefault();
|
||||
currentIndex = idx;
|
||||
goTo(idx);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,996 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>菲西尔智能 · AI+物业｜AI+资管｜AI+CRM 企业级智能叠加</title>
|
||||
<meta name="description" content="上海菲西尔智能科技有限公司——专注为现有业务系统叠加AI能力。智慧物业智能中枢、房产资管风控大脑、CRM效率跃升、GEO生成式引擎优化。不推倒重来，只做智能叠加。">
|
||||
<meta name="keywords" content="AI+物业,智慧物业,AI+资管,房产资产管理,AI+CRM,智能叠加,企业级AI,GEO优化,生成式引擎优化,上海菲西尔">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="http://8.153.107.96/ai/">
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="菲西尔智能 · 企业级 AI 叠加">
|
||||
<meta property="og:description" content="在已经运转良好的业务系统之上叠加 AI 能力。不推倒重来，只做智能叠加。">
|
||||
<meta property="og:url" content="http://8.153.107.96/ai/">
|
||||
<meta property="og:site_name" content="菲西尔智能 Fischer Intelligence">
|
||||
<meta property="og:locale" content="zh_CN">
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="菲西尔智能 · 企业级 AI 叠加">
|
||||
<meta name="twitter:description" content="在已经运转良好的业务系统之上叠加 AI 能力。">
|
||||
|
||||
<!-- 结构化数据 -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "上海菲西尔智能科技有限公司",
|
||||
"alternateName": "Fischer Intelligence",
|
||||
"url": "http://8.153.107.96/ai/",
|
||||
"description": "专注为现有业务系统叠加AI能力，涵盖智慧物业、房产资管、CRM领域",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"addressLocality": "上海",
|
||||
"addressCountry": "CN"
|
||||
},
|
||||
"knowsAbout": ["AI+物业", "智慧物业", "AI+资管", "房产资产管理", "AI+CRM", "GEO优化"]
|
||||
}
|
||||
</script>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Noto+Sans+SC:wght@400;600;800;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #050505;
|
||||
--text-main: #ffffff;
|
||||
--text-sub: #999999;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: 'Inter', 'Noto Sans SC', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text-main);
|
||||
line-height: 1.5;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 导航 */
|
||||
nav {
|
||||
position: fixed; top: 0; width: 100%; z-index: 100;
|
||||
padding: 24px 0; background: rgba(5,5,5,0.85); backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.nav-inner { max-width: 1400px; margin: 0 auto; padding: 0 4vw; display: flex; justify-content: space-between; align-items: center; }
|
||||
.logo { font-size: 15px; font-weight: 700; letter-spacing: 2px; color: #fff; text-transform: uppercase; }
|
||||
.nav-links a { color: #777; text-decoration: none; font-size: 12px; margin-left: 36px; font-weight: 600; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px; }
|
||||
.nav-links a:hover { color: #fff; }
|
||||
|
||||
/* HERO - 营销视频背景 */
|
||||
.hero {
|
||||
position: relative; height: 100vh; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.hero-video {
|
||||
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
|
||||
filter: brightness(0.85) saturate(1.1);
|
||||
transform: scale(1.05); /* 留余量给呼吸感缩放 */
|
||||
animation: heroZoom 20s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes heroZoom {
|
||||
from { transform: scale(1.05); }
|
||||
to { transform: scale(1.12); }
|
||||
}
|
||||
/* 视频未加载/移动端降级：静态 poster */
|
||||
.hero-poster {
|
||||
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
|
||||
}
|
||||
|
||||
/* 极轻的底层渐变，仅保留底部过渡 */
|
||||
.hero-overlay {
|
||||
position: absolute; inset: 0;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.55) 100%);
|
||||
z-index: 1; pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative; z-index: 10; text-align: center; max-width: 1000px; padding: 0 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(48px, 9vw, 110px);
|
||||
font-weight: 900; line-height: 1.05; letter-spacing: -3px; margin-bottom: 24px;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 4px 20px rgba(0,0,0,0.6);
|
||||
opacity: 0; animation: textReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-size: clamp(16px, 1.8vw, 22px); font-weight: 400; color: rgba(255,255,255,0.9);
|
||||
max-width: 700px; margin: 0 auto 48px; line-height: 1.6;
|
||||
/* 磨砂玻璃效果 */
|
||||
background: rgba(255,255,255,0.05);
|
||||
backdrop-filter: blur(20px) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(150%);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-left: 3px solid rgba(255,255,255,0.4);
|
||||
border-radius: 8px;
|
||||
padding: 24px 32px;
|
||||
opacity: 0; animation: textReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s;
|
||||
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block; padding: 18px 48px;
|
||||
background: #fff; color: #000; text-decoration: none; font-size: 14px; font-weight: 700;
|
||||
border-radius: 0; letter-spacing: 1px; text-transform: uppercase; transition: all 0.3s ease;
|
||||
opacity: 0; animation: textReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.8s;
|
||||
}
|
||||
.btn:hover { transform: translateY(-2px); background: #eee; }
|
||||
|
||||
.scroll-indicator {
|
||||
position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 10;
|
||||
width: 2px; height: 60px; background: linear-gradient(to bottom, #fff, transparent);
|
||||
animation: scrollLine 2s infinite;
|
||||
}
|
||||
@keyframes scrollLine { 0% { height: 0; opacity: 0; } 50% { height: 60px; opacity: 1; } 100% { height: 60px; opacity: 0; transform: translateY(20px); } }
|
||||
@keyframes textReveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
/* 通用板块 */
|
||||
.container { max-width: 1400px; margin: 0 auto; padding: 0 4vw; position: relative; z-index: 2; }
|
||||
section { padding: 160px 0; background: #050505; border-top: 1px solid rgba(255,255,255,0.06); }
|
||||
.section-label { font-size: 11px; font-weight: 700; color: #666; letter-spacing: 3px; margin-bottom: 80px; display: block; }
|
||||
h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 800; line-height: 1.1; margin-bottom: 24px; letter-spacing: -1px; color: #fff; }
|
||||
|
||||
/* 痛点板块 */
|
||||
#pain-points { position: relative; overflow: hidden; }
|
||||
/* 动态网格背景 */
|
||||
.pain-grid-bg {
|
||||
position: absolute; inset: 0; z-index: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
|
||||
background-size: 80px 80px;
|
||||
animation: gridMove 30s linear infinite;
|
||||
}
|
||||
@keyframes gridMove {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(80px, 80px); }
|
||||
}
|
||||
/* 径向光晕 */
|
||||
.pain-glow {
|
||||
position: absolute; top: 50%; left: 50%; width: 800px; height: 800px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
|
||||
animation: glowPulse 6s ease-in-out infinite alternate;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes glowPulse {
|
||||
0% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.9); }
|
||||
100% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
|
||||
}
|
||||
#pain-points .container { position: relative; z-index: 1; }
|
||||
|
||||
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
|
||||
.pain-item {
|
||||
background: rgba(255,255,255,0.015);
|
||||
padding: 48px 40px;
|
||||
border: 1px solid rgba(255,255,255,0.04);
|
||||
transition: all 0.6s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.pain-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.8s ease;
|
||||
}
|
||||
.pain-item:hover::before { transform: translateX(0); }
|
||||
.pain-item:hover {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-color: rgba(255,255,255,0.08);
|
||||
}
|
||||
/* 顶部 SVG 图标 */
|
||||
.pain-icon {
|
||||
position: absolute; top: 32px; left: 40px;
|
||||
width: 48px; height: 48px;
|
||||
opacity: 0.15;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
.pain-item:hover .pain-icon { opacity: 0.35; }
|
||||
.pain-icon svg { width: 100%; height: 100%; }
|
||||
.pain-icon svg line, .pain-icon svg path, .pain-icon svg circle, .pain-icon svg rect {
|
||||
stroke: #fff;
|
||||
stroke-width: 1.5;
|
||||
fill: none;
|
||||
}
|
||||
/* 编号 */
|
||||
.pain-num {
|
||||
font-size: 72px; font-weight: 900; color: rgba(255,255,255,0.04);
|
||||
line-height: 1; letter-spacing: -3px;
|
||||
position: absolute; bottom: 32px; right: 40px;
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
.pain-item:hover .pain-num {
|
||||
color: rgba(255,255,255,0.08);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
.pain-item h3 {
|
||||
font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 12px;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.pain-item p {
|
||||
font-size: 14px; color: #666; line-height: 1.7;
|
||||
}
|
||||
/* 破局之道 - 全宽特殊卡片 */
|
||||
.pain-item.highlight {
|
||||
grid-column: 1 / -1;
|
||||
min-height: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 60px;
|
||||
padding: 64px 80px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-color: rgba(255,255,255,0.08);
|
||||
}
|
||||
.pain-item.highlight h3 {
|
||||
font-size: 28px; margin-bottom: 8px; margin-left: 0;
|
||||
}
|
||||
.pain-item.highlight p {
|
||||
font-size: 16px; color: #888; margin-left: 0; max-width: 600px;
|
||||
}
|
||||
.pain-item.highlight .pain-num {
|
||||
position: static; font-size: 96px;
|
||||
}
|
||||
.pain-item.highlight .highlight-body {
|
||||
flex: 1; max-width: 600px;
|
||||
}
|
||||
|
||||
/* 思路板块 */
|
||||
.approach-list { max-width: 900px; margin: 0 auto; }
|
||||
.approach-item {
|
||||
display: flex; gap: 40px; padding: 48px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
align-items: flex-start;
|
||||
}
|
||||
.approach-item:last-child { border-bottom: none; }
|
||||
.approach-step {
|
||||
font-size: 13px; font-weight: 800; color: #555;
|
||||
letter-spacing: 2px; text-transform: uppercase;
|
||||
min-width: 60px; padding-top: 4px;
|
||||
}
|
||||
.approach-body h3 {
|
||||
font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 12px;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.approach-body p {
|
||||
font-size: 16px; color: #888; line-height: 1.7; max-width: 600px;
|
||||
}
|
||||
|
||||
/* 业务板块 - 使用本地图片 (修复了路径问题，移除暗黑滤镜) */
|
||||
.project-row { display: flex; align-items: center; gap: 80px; margin-bottom: 200px; }
|
||||
.project-row.reverse { flex-direction: row-reverse; }
|
||||
.project-text { flex: 1; }
|
||||
.project-text p { font-size: 18px; color: #999; line-height: 1.8; max-width: 550px; margin-top: 20px; }
|
||||
|
||||
.project-img {
|
||||
flex: 1.2; height: 500px; border-radius: 4px; overflow: hidden; position: relative;
|
||||
background: #111;
|
||||
}
|
||||
.project-img img {
|
||||
width: 100%; height: 100%; object-fit: cover;
|
||||
/* 移除滤镜，保持清晰明亮 */
|
||||
filter: brightness(1.0); transition: all 0.6s ease;
|
||||
}
|
||||
.project-img:hover img { transform: scale(1.03); }
|
||||
|
||||
/* 联系板块 */
|
||||
.contact-form {
|
||||
max-width: 600px; margin: 0 auto;
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
|
||||
}
|
||||
.contact-form .full-width { grid-column: 1 / -1; }
|
||||
.contact-form label {
|
||||
display: block; font-size: 11px; color: #666; font-weight: 700;
|
||||
letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px;
|
||||
}
|
||||
.contact-form input, .contact-form textarea {
|
||||
width: 100%; padding: 16px 20px; background: rgba(255,255,255,0.04);
|
||||
border: 1px solid rgba(255,255,255,0.1); border-radius: 4px;
|
||||
color: #fff; font-size: 15px; font-family: inherit;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
.contact-form input:focus, .contact-form textarea:focus {
|
||||
outline: none; border-color: rgba(255,255,255,0.4);
|
||||
}
|
||||
.contact-form textarea { min-height: 140px; resize: vertical; }
|
||||
.contact-form input::placeholder, .contact-form textarea::placeholder {
|
||||
color: #444;
|
||||
}
|
||||
.contact-submit {
|
||||
grid-column: 1 / -1; text-align: center; margin-top: 12px;
|
||||
}
|
||||
.contact-submit button {
|
||||
padding: 18px 60px; background: #fff; color: #000;
|
||||
border: none; font-size: 14px; font-weight: 700; letter-spacing: 1px;
|
||||
text-transform: uppercase; cursor: pointer; transition: all 0.3s;
|
||||
}
|
||||
.contact-submit button:hover { background: #eee; transform: translateY(-2px); }
|
||||
.contact-submit button:disabled { opacity: 0.5; cursor: default; transform: none; }
|
||||
.form-status {
|
||||
grid-column: 1 / -1; text-align: center; font-size: 13px;
|
||||
margin-top: 8px; min-height: 20px;
|
||||
}
|
||||
.form-status.ok { color: #4ade80; }
|
||||
.form-status.err { color: #f87171; }
|
||||
|
||||
/* 底部 */
|
||||
footer { padding: 100px 0; text-align: center; background: #020202; border-top: 1px solid rgba(255,255,255,0.06); }
|
||||
.tech-by { font-size: 10px; color: #444; letter-spacing: 2px; margin-bottom: 12px; }
|
||||
.company { font-size: 15px; color: #888; font-weight: 600; }
|
||||
|
||||
/* 动效 */
|
||||
.fade-up { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
|
||||
.fade-up.visible { opacity: 1; transform: translateY(0); }
|
||||
/* 桌面端：痛点和思路板块用 CSS 原生动画直接可见 */
|
||||
@media (min-width: 901px) {
|
||||
#pain-points .fade-up, #approach .fade-up {
|
||||
opacity: 1; transform: translateY(0);
|
||||
animation: sectionFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
#pain-points .pain-grid > .fade-up:nth-child(1) { animation-delay: 0.15s; }
|
||||
#pain-points .pain-grid > .fade-up:nth-child(2) { animation-delay: 0.25s; }
|
||||
#pain-points .pain-grid > .fade-up:nth-child(3) { animation-delay: 0.35s; }
|
||||
#pain-points .pain-grid > .fade-up:nth-child(4) { animation-delay: 0.45s; }
|
||||
#pain-points .pain-grid > .fade-up:nth-child(5) { animation-delay: 0.55s; }
|
||||
#pain-points .pain-grid > .fade-up:nth-child(6) { animation-delay: 0.65s; }
|
||||
}
|
||||
/* 移动端：痛点和思路板块 - 错位动画 */
|
||||
@media (max-width: 900px) {
|
||||
/* 默认状态：卡片微弱可见 */
|
||||
#pain-points .pain-item {
|
||||
opacity: 1;
|
||||
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
/* 内容元素默认在更下方（准备从下往上大幅滑入） */
|
||||
#pain-points .pain-item .pain-icon {
|
||||
transform: scale(0.6) translateY(60px);
|
||||
}
|
||||
#pain-points .pain-item h3,
|
||||
#pain-points .pain-item p {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
#pain-points .pain-item .pain-icon {
|
||||
transform: scale(0.6) translateY(60px);
|
||||
}
|
||||
/* 数字：默认状态由 JS 控制，这里不设 transform 避免冲突 */
|
||||
#pain-points .pain-item .pain-num {
|
||||
opacity: 0.3;
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
|
||||
/* 进入视口后：内容上移，数字反向坠落 */
|
||||
#pain-points .pain-item.in-view {
|
||||
opacity: 1;
|
||||
}
|
||||
#pain-points .pain-item.in-view .pain-icon {
|
||||
opacity: 0.35;
|
||||
transform: scale(1) translateY(0);
|
||||
transition-delay: 0.05s;
|
||||
}
|
||||
#pain-points .pain-item.in-view h3 {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
#pain-points .pain-item.in-view p {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.18s;
|
||||
}
|
||||
/* 数字：越落越清晰 */
|
||||
#pain-points .pain-item.in-view .pain-num {
|
||||
opacity: 0.3;
|
||||
/* transform 完全由 JS 视差逻辑接管 */
|
||||
transition-delay: 0.02s;
|
||||
}
|
||||
|
||||
/* 思路板块同样 */
|
||||
#approach .approach-item {
|
||||
opacity: 1;
|
||||
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
#approach .approach-item .approach-step,
|
||||
#approach .approach-item .approach-body h3,
|
||||
#approach .approach-item .approach-body p {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
#approach .approach-item.in-view {
|
||||
opacity: 1;
|
||||
}
|
||||
#approach .approach-item.in-view .approach-step {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.05s;
|
||||
}
|
||||
#approach .approach-item.in-view .approach-body h3 {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.12s;
|
||||
}
|
||||
#approach .approach-item.in-view .approach-body p {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sectionFadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
/* 移动端痛点沉浸式布局 */
|
||||
@media (max-width: 900px) {
|
||||
/* 痛点半块单列全屏 */
|
||||
#pain-points {
|
||||
overflow: visible;
|
||||
text-align: center;
|
||||
}
|
||||
#pain-points .section-label {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
#pain-points h2 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 90%;
|
||||
}
|
||||
/* 背景网格 - 钉在墙上完全不动 */
|
||||
.pain-grid-bg {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: 0;
|
||||
animation: none;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
}
|
||||
.pain-glow {
|
||||
position: fixed;
|
||||
top: 50%; left: 50%;
|
||||
width: 400px; height: 400px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
|
||||
animation: glowPulse 6s ease-in-out infinite alternate;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 内容层 - 在背景上正常滚动 */
|
||||
.pain-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pain-item {
|
||||
min-height: auto;
|
||||
padding: 80px 28px 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-top: 1px solid rgba(255,255,255,0.06);
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.pain-item::before { display: none; }
|
||||
.pain-item:hover { background: transparent; }
|
||||
|
||||
/* SVG 图标 - 居中放大 */
|
||||
.pain-icon {
|
||||
position: relative;
|
||||
top: auto; right: auto; left: auto;
|
||||
width: 64px; height: 64px;
|
||||
opacity: 0.35;
|
||||
margin-bottom: 40px;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
.pain-icon svg { width: 100%; height: 100%; }
|
||||
.pain-icon svg line, .pain-icon svg path, .pain-icon svg circle, .pain-icon svg rect, .pain-icon svg polyline {
|
||||
stroke: #fff;
|
||||
stroke-width: 1.5;
|
||||
fill: none;
|
||||
}
|
||||
.pain-item.in-view .pain-icon {
|
||||
animation: iconPop 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
|
||||
}
|
||||
|
||||
/* 横排大字标题 */
|
||||
.pain-item h3 {
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
color: #fff;
|
||||
}
|
||||
/* 破局之道 */
|
||||
.pain-item.highlight h3 {
|
||||
font-size: 40px;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
/* 描述文字 */
|
||||
.pain-item p {
|
||||
font-size: 15px;
|
||||
color: #888;
|
||||
line-height: 1.9;
|
||||
margin-top: 24px;
|
||||
max-width: 100%;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
/* 编号 - 超大背景装饰 */
|
||||
.pain-num {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
right: 30px;
|
||||
font-size: 110px;
|
||||
font-weight: 900;
|
||||
color: rgba(255,255,255,0.2);
|
||||
letter-spacing: -5px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 破局之道 - 高潮区域 */
|
||||
.pain-item.highlight {
|
||||
min-height: auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
padding: 80px 28px 60px;
|
||||
background: transparent;
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.pain-item.highlight .pain-num {
|
||||
font-size: 140px;
|
||||
color: rgba(255,255,255,0.04);
|
||||
}
|
||||
.pain-item.highlight h3 {
|
||||
font-size: 40px;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
.pain-item.highlight p {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
margin-top: 24px;
|
||||
padding-right: 0;
|
||||
max-width: 90%;
|
||||
}
|
||||
.pain-item.highlight .highlight-body {
|
||||
max-width: 100%;
|
||||
}
|
||||
.pain-item.highlight .pain-icon {
|
||||
width: 80px; height: 80px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
/* 思路板块移动端 */
|
||||
.approach-item {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 40px 0;
|
||||
border-top: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.approach-item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.approach-step {
|
||||
font-size: 11px;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
.approach-body h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.approach-body p {
|
||||
font-size: 14px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 业务板块 */
|
||||
.project-row, .project-row.reverse { flex-direction: column; gap: 40px; margin-bottom: 120px; }
|
||||
.project-img { width: 100%; height: 300px; }
|
||||
h1 { font-size: 42px; letter-spacing: -1px; }
|
||||
.nav-links { display: none; }
|
||||
|
||||
/* 其他板块也至少一屏 */
|
||||
#solutions, #approach, #geo, #contact {
|
||||
min-height: auto;
|
||||
}
|
||||
#solutions .project-row {
|
||||
margin-bottom: 0;
|
||||
padding: 60px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
#approach .approach-item {
|
||||
padding: 60px 0;
|
||||
}
|
||||
#geo .container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 80vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<div class="logo">AI X</div>
|
||||
<div class="nav-links">
|
||||
<a href="#pain-points">场景洞察</a>
|
||||
<a href="#solutions">核心服务</a>
|
||||
<a href="#approach">解决路径</a>
|
||||
<a href="#geo">GEO</a>
|
||||
<a href="#contact">合作咨询</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="hero">
|
||||
<!-- 视频背景 + poster 静态降级 -->
|
||||
<video class="hero-video" autoplay muted loop playsinline preload="auto" poster="assets/hero-poster.jpg?v=2">
|
||||
<source src="assets/video/hero-bg-compressed.mp4?v=2" type="video/mp4">
|
||||
</video>
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="hero-content">
|
||||
<h1>不推倒重来<br>只做智能叠加</h1>
|
||||
<div class="hero-sub">
|
||||
在已运转的业务系统之上叠加 AI 智能层。2 周部署，零迁移成本，让旧系统拥有新大脑。
|
||||
</div>
|
||||
<a href="#pain-points" class="btn">获取行业定制方案</a>
|
||||
</div>
|
||||
<div class="scroll-indicator"></div>
|
||||
</div>
|
||||
|
||||
<section id="pain-points">
|
||||
<div class="pain-grid-bg"></div>
|
||||
<div class="pain-glow"></div>
|
||||
<div class="container">
|
||||
<span class="section-label fade-up">THE REAL PROBLEM</span>
|
||||
<h2 class="fade-up" style="max-width: 700px; margin-bottom: 60px;">为什么你的系统<br>越用越贵</h2>
|
||||
<div class="pain-grid">
|
||||
<div class="pain-item fade-up">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<rect x="8" y="8" width="14" height="14" rx="2"/>
|
||||
<rect x="26" y="8" width="14" height="14" rx="2"/>
|
||||
<rect x="8" y="26" width="14" height="14" rx="2"/>
|
||||
<rect x="26" y="26" width="14" height="14" rx="2"/>
|
||||
<line x1="22" y1="15" x2="26" y2="15"/>
|
||||
<line x1="15" y1="22" x2="15" y2="26"/>
|
||||
<line x1="33" y1="22" x2="33" y2="26"/>
|
||||
<line x1="22" y1="33" x2="26" y2="33"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>每年几十万数据录入费<br>换来零决策价值</h3>
|
||||
<p>物业、资管、CRM 积累了海量数据，却像仓库里的积压库存。记录了一大堆，决策还是靠拍脑袋。</p>
|
||||
<div class="pain-num">01</div>
|
||||
</div>
|
||||
<div class="pain-item fade-up" style="transition-delay: 0.1s;">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<rect x="4" y="12" width="12" height="24" rx="2"/>
|
||||
<rect x="18" y="12" width="12" height="24" rx="2"/>
|
||||
<rect x="32" y="12" width="12" height="24" rx="2"/>
|
||||
<line x1="10" y1="20" x2="10" y2="30"/>
|
||||
<line x1="24" y1="20" x2="24" y2="30"/>
|
||||
<line x1="38" y1="20" x2="38" y2="30"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>系统越多 盲区越大<br>管理者像盲人摸象</h3>
|
||||
<p>报修、资产、客户分属不同系统。永远拼不出完整的业务全景，资源错配成了常态。</p>
|
||||
<div class="pain-num">02</div>
|
||||
</div>
|
||||
<div class="pain-item fade-up" style="transition-delay: 0.2s;">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<circle cx="24" cy="10" r="6"/>
|
||||
<path d="M14 42c0-8 4-14 10-14s10 6 10 14"/>
|
||||
<circle cx="36" cy="16" r="4"/>
|
||||
<path d="M32 42c0-5 2-9 4-9s4 4 4 9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>高薪人才 70% 时间<br>耗在填表和派单</h3>
|
||||
<p>招来的专业人才，精力被重复事务榨干。高射炮打蚊子，人效极低，人才流失率越来越高。</p>
|
||||
<div class="pain-num">03</div>
|
||||
</div>
|
||||
<div class="pain-item fade-up" style="transition-delay: 0.1s;">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<circle cx="24" cy="24" r="16"/>
|
||||
<polyline points="24,12 24,24 32,28"/>
|
||||
<line x1="8" y1="6" x2="8" y2="14"/>
|
||||
<line x1="40" y1="6" x2="40" y2="14"/>
|
||||
<line x1="4" y1="10" x2="4" y2="10"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>报表出来时<br>损失已经发生</h3>
|
||||
<p>空置率超标、客户流失、租金定价偏差……等月底报表出来，问题早已发生。企业永远在事后补救。</p>
|
||||
<div class="pain-num">04</div>
|
||||
</div>
|
||||
<div class="pain-item fade-up" style="transition-delay: 0.2s;">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<path d="M24 4L4 14v12c0 11 8 20 20 22 12-2 20-11 20-22V14L24 4z"/>
|
||||
<line x1="24" y1="18" x2="24" y2="30"/>
|
||||
<line x1="18" y1="24" x2="30" y2="24"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>推翻重来的项目<br>70% 超期超预算</h3>
|
||||
<p>传统 AI 方案要求重建系统。周期长、风险高、员工抵触。一旦失败，前期投入全部打水漂。</p>
|
||||
<div class="pain-num">05</div>
|
||||
</div>
|
||||
<div class="pain-item fade-up" style="transition-delay: 0.25s;">
|
||||
<div class="pain-icon">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<path d="M16 8c0-4 4-6 8-6s8 2 8 6c0 10-8 16-8 16s-8-6-8-16z"/>
|
||||
<line x1="24" y1="30" x2="24" y2="40"/>
|
||||
<line x1="18" y1="34" x2="30" y2="34"/>
|
||||
<circle cx="14" cy="18" r="2"/>
|
||||
<circle cx="34" cy="18" r="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>核心能力长在老员工脑子里<br>人走能力断</h3>
|
||||
<p>招商经验、客户判断、定价策略全靠人。人一走，能力就断层。企业无法规模化复制成功经验。</p>
|
||||
<div class="pain-num">06</div>
|
||||
</div>
|
||||
<div class="pain-item highlight fade-up" style="transition-delay: 0.3s;">
|
||||
<div class="pain-num">∞</div>
|
||||
<div class="highlight-body">
|
||||
<h3>破局之道</h3>
|
||||
<p>不替换系统，不迁移数据，不改变流程。在现有基础设施之上叠加一层 AI——让旧系统拥有新大脑。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="solutions">
|
||||
<div class="container">
|
||||
<span class="section-label fade-up">WHAT WE DO</span>
|
||||
|
||||
<!-- 物业 - 本地图 (建筑/无人员) -->
|
||||
<div class="project-row">
|
||||
<div class="project-text fade-up">
|
||||
<h2>AI+物业<br>智能中枢</h2>
|
||||
<p>工单自动分发，客诉响应提速 60%。在现有物业 ERP 之上叠加 AI 调度层——不改变任何原有流程。巡检路线自动规划、设备故障提前预警。你现有的系统不用换，但效率会翻倍。</p>
|
||||
</div>
|
||||
<div class="project-img fade-up" style="transition-delay: 0.2s;">
|
||||
<img src="assets/prop.jpg?v=6" alt="Smart Building">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 资管 - 本地图 (服务器/无人员) -->
|
||||
<div class="project-row reverse">
|
||||
<div class="project-text fade-up">
|
||||
<h2>AI+资管<br>风控大脑</h2>
|
||||
<p>空置率提前 90 天预警，租金定价误差收窄至 5%。无缝接入资管平台，让历史租赁数据变成预测模型。招商智能匹配、租约到期提醒。资管不该靠直觉，该靠数据。</p>
|
||||
</div>
|
||||
<div class="project-img fade-up" style="transition-delay: 0.2s;">
|
||||
<img src="assets/server.jpg?v=6" alt="Server Data">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CRM - 本地图 (电脑屏幕/无人员) -->
|
||||
<div class="project-row">
|
||||
<div class="project-text fade-up">
|
||||
<h2>AI+CRM<br>效率跃升</h2>
|
||||
<p>线索自动清洗，销售人效提升 40%。为现有 CRM 配备 AI 助理——自动捕捉商机、生成对话摘要。销售无需学习新软件，打开原界面就能看到 AI 推荐。</p>
|
||||
</div>
|
||||
<div class="project-img fade-up" style="transition-delay: 0.2s;">
|
||||
<img src="assets/crm.jpg?v=6" alt="CRM">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="approach">
|
||||
<div class="container">
|
||||
<span class="section-label fade-up">WHY FISCHER</span>
|
||||
<h2 class="fade-up" style="max-width: 700px; margin-bottom: 60px;">菲西尔和其他<br>AI 公司有什么不同</h2>
|
||||
<div class="approach-list">
|
||||
<div class="approach-item fade-up">
|
||||
<div class="approach-step">优势 1</div>
|
||||
<div class="approach-body">
|
||||
<h3>不替换，只叠加</h3>
|
||||
<p>通过 API 外挂 AI 层，不停服、不迁移、不改流程。员工用原来的界面，体验无缝升级。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="approach-item fade-up" style="transition-delay: 0.1s;">
|
||||
<div class="approach-step">优势 2</div>
|
||||
<div class="approach-body">
|
||||
<h3>让数据开口说话</h3>
|
||||
<p>沉睡的历史数据自动转化为预测模型和决策建议。把事后统计变为事前预警。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="approach-item fade-up" style="transition-delay: 0.2s;">
|
||||
<div class="approach-step">优势 3</div>
|
||||
<div class="approach-body">
|
||||
<h3>让 AI 替你干活</h3>
|
||||
<p>高频重复工作交给 AI Agent——智能客服、招商匹配、巡检规划自动运转，人只负责关键决策。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="approach-item fade-up" style="transition-delay: 0.15s;">
|
||||
<div class="approach-step">优势 4</div>
|
||||
<div class="approach-body">
|
||||
<h3>跨系统一屏掌控</h3>
|
||||
<p>所有业务数据在 AI 层融合。一句自然语言就能查"本月哪些楼宇空置率超标"，告别手动汇总。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="approach-item fade-up" style="transition-delay: 0.25s;">
|
||||
<div class="approach-step">优势 5</div>
|
||||
<div class="approach-body">
|
||||
<h3>小步试错，大步扩张</h3>
|
||||
<p>从单一场景试点，验证有效再扩展。每一步都可衡量投入产出，钱花在刀刃上。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="geo">
|
||||
<div class="container">
|
||||
<span class="section-label fade-up">BEYOND EFFICIENCY</span>
|
||||
<div style="display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 80px; align-items: center;">
|
||||
<div class="fade-up">
|
||||
<h2 style="margin-bottom: 24px;">让用户在大模型里<br>第一个找到你</h2>
|
||||
<p style="font-size: 19px; color: #ccc; line-height: 1.6; margin-bottom: 20px;">对内提效降本，对外重塑获客。</p>
|
||||
<p style="color: #888; line-height: 1.8; font-size: 16px;">当客户问 Kimi 或文心一言"帮我找一家做 AI+物业的公司"——你的品牌会不会出现在答案里？我们优化企业在主流大模型中的内容结构与权重，从"搜索排名"进化为"答案占位"。</p>
|
||||
</div>
|
||||
<!-- GEO - 本地图 (数字地球/无人员) -->
|
||||
<div class="project-img fade-up" style="transition-delay: 0.2s; height: 450px;">
|
||||
<img src="assets/geo.jpg?v=6" alt="Network">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact">
|
||||
<div class="container">
|
||||
<span class="section-label fade-up">GET IN TOUCH</span>
|
||||
<div class="fade-up" style="text-align:center; margin-bottom:60px;">
|
||||
<h2>15 分钟，看看你的系统<br>能叠加什么</h2>
|
||||
<p style="color:#777; font-size:17px; max-width:500px; margin:16px auto 0; line-height:1.7;">
|
||||
不推销，只评估。基于你现有架构，给出一份可落地的 AI 叠加建议。
|
||||
</p>
|
||||
</div>
|
||||
<form class="contact-form fade-up" id="consultForm" onsubmit="return false;">
|
||||
<div>
|
||||
<label>姓名</label>
|
||||
<input type="text" name="name" placeholder="怎么称呼您" required>
|
||||
</div>
|
||||
<div>
|
||||
<label>电话</label>
|
||||
<input type="tel" name="phone" placeholder="手机号码" required>
|
||||
</div>
|
||||
<div class="full-width">
|
||||
<label>邮箱</label>
|
||||
<input type="email" name="email" placeholder="选填">
|
||||
</div>
|
||||
<div class="full-width">
|
||||
<label>留言</label>
|
||||
<textarea name="message" placeholder="你现在用的是哪个系统？（选填）"></textarea>
|
||||
</div>
|
||||
<div class="contact-submit">
|
||||
<button type="submit" id="submitBtn">预约诊断名额</button>
|
||||
</div>
|
||||
<div class="form-status" id="formStatus"></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="tech-by">TECHNICAL SUPPORT PROVIDED BY</div>
|
||||
<div class="company">上海菲西尔智能科技有限公司</div>
|
||||
<div style="margin-top: 12px; font-size: 10px; color: #444; letter-spacing: 1px;">© 2026 SHANGHAI FISCHER INTELLIGENT TECHNOLOGY CO., LTD.</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 强制视频播放并捕获错误
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const vid = document.querySelector('.hero-video');
|
||||
if (vid) {
|
||||
vid.play().catch(e => {
|
||||
console.warn('Autoplay blocked:', e);
|
||||
});
|
||||
}
|
||||
|
||||
// 表单提交
|
||||
const form = document.getElementById('consultForm');
|
||||
const btn = document.getElementById('submitBtn');
|
||||
const status = document.getElementById('formStatus');
|
||||
if (form) {
|
||||
btn.addEventListener('click', () => {
|
||||
const name = form.name.value.trim();
|
||||
const phone = form.phone.value.trim();
|
||||
const email = form.email.value.trim();
|
||||
const message = form.message.value.trim();
|
||||
if (!name || !phone) { status.textContent = '请填写姓名和电话'; status.className = 'form-status err'; return; }
|
||||
btn.disabled = true; btn.textContent = '提交中...';
|
||||
fetch('/ai/api/consult', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, phone, email, message })
|
||||
}).then(r => r.json()).then(d => {
|
||||
if (d.success) { status.textContent = '已收到，我们会尽快联系您'; status.className = 'form-status ok'; form.reset(); }
|
||||
else { status.textContent = d.error || '提交失败，请重试'; status.className = 'form-status err'; }
|
||||
}).catch(() => { status.textContent = '网络错误，请重试'; status.className = 'form-status err'; })
|
||||
.finally(() => { btn.disabled = false; btn.textContent = '提交咨询'; });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 滚动渐显动画
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) entry.target.classList.add('visible');
|
||||
});
|
||||
}, { threshold: 0.15, rootMargin: "0px 0px -50px 0px" });
|
||||
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
|
||||
|
||||
// 移动端：入场动画 + 视差滚动
|
||||
if (window.innerWidth <= 900) {
|
||||
// 3. 逐屏滚动 - 方向感知，禁止自由滚动
|
||||
|
||||
// 导航链接点击：保持原生跳转
|
||||
// 导航链接点击：定位到对应 section 并更新索引
|
||||
document.querySelectorAll('.nav-links a, .btn').forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
const href = link.getAttribute('href');
|
||||
if (!href || !href.startsWith('#')) return;
|
||||
const targetId = href.substring(1);
|
||||
const idx = snapTargets.findIndex(t => t.id === targetId);
|
||||
if (idx >= 0) {
|
||||
e.preventDefault();
|
||||
currentIndex = idx;
|
||||
goTo(idx);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
# ************************************
|
||||
# 菲西尔智能官网 robots.txt
|
||||
# AI叠加专家 - 物业AI | 资管AI | CRM AI
|
||||
# ************************************
|
||||
|
||||
# 允许所有爬虫访问
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
# Sitemap位置
|
||||
Sitemap: https://www.fischerai.cn/sitemap.xml
|
||||
|
||||
# 禁止访问的路径
|
||||
Disallow: /api/
|
||||
Disallow: /admin/
|
||||
Disallow: /*.json$
|
||||
Disallow: /version-*.html
|
||||
|
||||
# 允许访问重要资源
|
||||
Allow: /assets/
|
||||
Allow: /favicon-*.png
|
||||
Allow: /apple-touch-icon.png
|
||||
|
||||
# 百度爬虫特殊规则
|
||||
User-agent: Baiduspider
|
||||
Allow: /
|
||||
Crawl-delay: 1
|
||||
|
||||
# Google爬虫特殊规则
|
||||
User-agent: Googlebot
|
||||
Allow: /
|
||||
Crawl-delay: 1
|
||||
|
||||
# Bing爬虫特殊规则
|
||||
User-agent: Bingbot
|
||||
Allow: /
|
||||
Crawl-delay: 1
|
||||
|
||||
# 搜狗爬虫特殊规则
|
||||
User-agent: Sogou
|
||||
Allow: /
|
||||
Crawl-delay: 1
|
||||
|
||||
# 360搜索爬虫特殊规则
|
||||
User-agent: 360Spider
|
||||
Allow: /
|
||||
Crawl-delay: 1
|
||||
|
||||
# 字节跳动爬虫（用于抖音/今日头条搜索）
|
||||
User-agent: Bytespider
|
||||
Allow: /
|
||||
Crawl-delay: 1
|
||||
|
||||
# Kimi/Moonshot爬虫
|
||||
User-agent: Moonshot
|
||||
Allow: /
|
||||
|
||||
# 通义千问爬虫
|
||||
User-agent: CCBot
|
||||
Allow: /
|
||||
|
||||
# 文心一言爬虫
|
||||
User-agent: AppEngine-Google
|
||||
Allow: /
|
||||
|
||||
# 其他AI平台爬虫
|
||||
User-agent: GPTBot
|
||||
Allow: /
|
||||
User-agent: ChatGPT-User
|
||||
Allow: /
|
||||
|
||||
# 主机信息
|
||||
Host: https://www.fischerai.cn
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
|
||||
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
|
||||
|
||||
<!-- 首页 -->
|
||||
<url>
|
||||
<loc>https://www.fischerai.cn/</loc>
|
||||
<lastmod>2026-05-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
|
||||
<!-- 锚点页面（同一页面的不同区域） -->
|
||||
<url>
|
||||
<loc>https://www.fischerai.cn/#pain</loc>
|
||||
<lastmod>2026-05-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://www.fischerai.cn/#services</loc>
|
||||
<lastmod>2026-05-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://www.fischerai.cn/#advantages</loc>
|
||||
<lastmod>2026-05-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://www.fischerai.cn/#proof</loc>
|
||||
<lastmod>2026-05-19</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://www.fischerai.cn/#contact</loc>
|
||||
<lastmod>2026-05-19</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
|
||||
</urlset>
|
||||
2057
version-a.html
2057
version-a.html
File diff suppressed because it is too large
Load Diff
1642
version-b.html
1642
version-b.html
File diff suppressed because it is too large
Load Diff
1410
version-c.html
1410
version-c.html
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue