qwen3.6-plus-preview 在「统计卡片」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：qwen3.6-plus-preview
  • 用例名称：统计卡片
  • 测试类型：网页生成
  • 评测维度：仪表盘

系统提示词（System Prompt）

这是给 AI 模型的背景设定和角色指令：

你是一名资深前端开发工程师，擅长使用原生 HTML、CSS 和 JavaScript 构建精美的数据展示页面。 输出要求： 1. 所有代码（HTML、CSS、JavaScript）必须合并在单个 HTML 文件中，禁止引用任何外部本地文件。 2. 允许使用 CDN 链接引入外部库，但 Basic 级别优先使用原生实现。 3. 输出内容必须是完整、可直接在浏览器中独立运行的 HTML 代码，不附加任何解释文字。 4. CSS 样式追求简洁美观，使用 Flexbox 或 CSS Grid 实现布局，确保响应式断点正确生效。 5. 代码结构清晰，HTML/CSS/JS 各自用注释分隔，变量命名语义化。

用户提示词（User Prompt）

这是用户给 AI 模型的具体任务要求：

请生成一个统计卡片展示页面，所有代码写在单个 HTML 文件中，可直接在浏览器运行。 ## 卡片数据（共 4 张，默认横向一行排列） | # | 标题 | 数值 | 趋势 | 图标建议 | |---|----------|-----------|----------------|----------| | 1 | 总用户数 | 12,345 | ↑ 12% 比上月 | 👥 | | 2 | 活跃用户 | 8,901 | ↑ 5% 比上月 | 🟢 | | 3 | 总收入 | ¥89,012 | ↓ 3% 比上月 | 💰 | | 4 | 订单数 | 1,234 | ↑ 8% 比上月 | 📦 | ## 卡片设计要求 - 每张卡片包含：图标区域、指标标题、核心数值、趋势标签（百分比 + 文字说明） - 上升趋势（↑）显示绿色，下降趋势（↓）显示红色 - 卡片默认白色背景，带圆角和细边框阴影 - 鼠标悬停时卡片阴影加深，并有轻微上移过渡动画（transition） ## 布局与响应式 - 桌面端（≥768px）：4 张卡片横向一行等宽排列 - 平板端（480px ~ 767px）：2 列排列 - 手机端（<480px）：1 列排列 - 使用 CSS Grid 或 Flexbox 实现，禁止使用 float 布局 ## 页面整体 - 页面有标题区域（如「数据概览」）和副标题（如当前日期或「本月统计」） - 页面背景使用浅灰色（如 #f5f7fa），与白色卡片形成层次对比 - 整体风格简洁、专业，类似 SaaS 管理后台风格 请直接输出完整的 HTML 代码，不要附加任何说明文字。

任务要求

AI 模型需要满足以下要求：

  1. 4 张卡片均正确展示图标、标题、数值、趋势信息，数据与题目要求完全一致（数值、百分比、货币符号无误）
  2. 上升趋势标签呈现绿色，下降趋势标签呈现红色，颜色逻辑通过 CSS class 或 inline style 实现，不得硬编码为同一颜色
  3. 响应式布局正确生效：桌面 4 列、平板 2 列、手机 1 列，通过 Media Query 实现，断点设置合理
  4. 卡片悬停效果完整：阴影加深 + 轻微上移，使用 CSS transition 实现平滑过渡，无跳变
  5. 页面整体视觉层次清晰：有页面标题区域，背景色与卡片色形成对比，卡片内部信息排版整齐
  6. 所有代码在单个 HTML 文件内，无外部本地文件依赖，可直接在浏览器打开运行

评测结果

综合得分

该模型在此用例的得分为：100.0 分（满分 100 分），已通过

基础难度评测结果

  • 得分：100.0 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 数据概览 /* ========== Reset & Base ========== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; background-color: #f5f7fa; color: #1a1a2e; min-height: 100vh; padding: 40px 24px; -webkit-font-smoothing: antialiased; } /* ========== Page Header ========== */ .page-header { max-width: 1200px; margin: 0 auto 32px; } .page-header__title { font-size: 28px; font-weight: 700; color: #1a1a2e; letter-spacing: -0.5px; } .page-header__subtitle { font-size: 14px; color: #8c8c9a; margin-top: 6px; font-weight: 400; } /* ========== Card Grid ========== */ .card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; } /* ========== Stat Card ========== */ .stat-card { background: #ffffff; border-radius: 16px; padding: 28px 24px; border: 1px solid rgba(0, 0, 0, 0.04); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: default; position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 16px 16px 0 0; opacity: 0; transition: opacity 0.3s ease; } .stat-card:hover { transform: translateY(-6px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); } .stat-card:hover::before { opacity: 1; } /* Card accent colors */ .stat-card--users::before { background: linear-gradient(90deg, #6366f1, #818cf8); } .stat-card--active::before { background: linear-gradient(90deg, #10b981, #34d399); } .stat-card--revenue::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); } .stat-card--orders::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); } /* Card Icon */ .stat-card__icon { width: 48px;...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【GEMINI】这是一份近乎完美的交付。模型不仅精确遵循了所有的技术约束（如单文件、响应式断点、布局方式），还在视觉设计上表现出色，使用了精致的阴影、圆角和顶部装饰条，展现了资深前端工程师的水准。数据准确无误，代码组织规范。

进阶难度评测结果

  • 得分：94.0 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 统计卡片展示页面 /* ========== 全局重置与基础样式 ========== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); min-height: 100vh; color: #e2e8f0; overflow-x: hidden; } /* ========== 顶部控制栏 ========== */ .control-bar { max-width: 1200px; margin: 0 auto; padding: 24px 20px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .control-bar h1 { font-size: 22px; font-weight: 700; background: linear-gradient(90deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-right: auto; } .search-box { position: relative; flex: 0 1 240px; min-width: 180px; } .search-box input { width: 100%; padding: 10px 14px 10px 38px; border: 1px solid #334155; border-radius: 10px; background: #1e293b; color: #e2e8f0; font-size: 14px; outline: none; transition: border-color 0.3s, box-shadow 0.3s; } .search-box input:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15); } .search-box input::placeholder { color: #64748b; } .search-box .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 14px; pointer-events: none; } .sort-group { display: flex; gap: 6px; } .sort-btn { padding: 9px 16px; border: 1px solid #334155; border-radius: 10px; background: #1e293b; color: #94a3b8; font-size: 13px; cursor: pointer; transition: all 0.25s; white-space: nowrap; } .sort-btn:hover { border-color: #60a5fa; color: #e2e8f0; } .sort-btn.active { background: linear-gradient(135deg, #3b82f6, #6366f1); border-color: transparent; color: #fff; box-shadow: 0 2px 12px rgba(59, 130, 246, 0.3); } .mute-btn { width: 40px; height: 40px; border: 1px solid #334155; border-radius: 10px; background: #1e293b; color: #94a3b8; font-size: 18px; cursor: pointer; transition: all 0.25s;...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【GEMINI】这是一份高质量的候选代码。它不仅完全满足了所有基础和进阶的功能要求，还在细节处理上表现卓越，如 Canvas 的曲线平滑算法、Web Audio 的频率扫描合成以及完善的响应式适配。代码结构清晰，注释详尽，是一个非常优秀的单文件 Web 应用示例。

困难难度评测结果

  • 得分：96.33 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 数据仪表盘 /* ========== 全局样式与CSS变量 ========== */ :root { --bg-primary: #0f172a; --bg-card: rgba(30, 41, 59, 0.7); --bg-card-hover: rgba(30, 41, 59, 0.9); --accent: #38bdf8; --accent-glow: rgba(56, 189, 248, 0.3); --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --green: #22c55e; --red: #ef4444; --border-color: rgba(56, 189, 248, 0.15); --glass-bg: rgba(30, 41, 59, 0.6); --glass-border: rgba(255, 255, 255, 0.08); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3); --shadow-card-hover: 0 12px 40px rgba(56, 189, 248, 0.15); --radius: 16px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; background-image: radial-gradient(ellipse at 20% 50%, rgba(56, 189, 248, 0.05) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.05) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(56, 189, 248, 0.03) 0%, transparent 50%); } /* ========== 顶部标题栏 ========== */ .header { display: flex; justify-content: space-between; align-items: center; padding: 20px 32px; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); position: sticky; top: 0; z-index: 100; } .header h1 { font-size: 24px; font-weight: 700; background: linear-gradient(135deg, var(--accent), #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 1px; } .header-right { display: flex; align-items: center; gap: 16px; } .current-time { font-size: 14px; color: var(--text-secondary); font-variant-numeric: tabular-nums; } /* 音频开关按钮 */ .audio-toggle { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass-bg); color:...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【GEMINI】这是一份极高水平的交付。不仅完全满足了所有 Hard 级别的复杂要求，还在细节表现上超出了预期，如数字滚动的缓动算法、Web Audio 的多振荡器合成以及拖拽时的位置计算逻辑。代码结构清晰，注释详尽，体现了资深全栈工程师的专业水准。

相关链接

您可以通过以下链接查看更多相关内容：

加载中...
100%