vue实现json配置数据显示多步骤动态表单评测结果问卷代码-html代码-BFW代码库

代码语言：html

代码描述：vue实现json配置数据显示多步骤动态表单评测结果问卷代码，每个选项点击下一步表单内容都在json中配置好，适合测评类问卷调查，包括主题颜色等也可配置。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
  <title>多步骤分支表单（Vue3 + JSON配置）</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

  <style>
    :root{
      --primary: #4f46e5;
      --accent:  #06b6d4;
      --bg-gradient: linear-gradient(135deg,#0ea5e9 0%, #6366f1 100%);
      --card-bg: rgba(255,255,255,0.78);
      --glass: blur(8px);
      --text: #0f172a;
      --muted: #475569;
      --success: #10b981;
      --warning: #f59e0b;
      --danger: #ef4444;
      --radius: 16px;
      --shadow-lg: 0 10px 30px rgba(2,6,23,0.15);
      --shadow-sm: 0 6px 16px rgba(2,6,23,0.10);
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body{
      margin:0;
      font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      color: var(--text);
      background: var(--bg-gradient) fixed;
      background-size: cover;
    }
    .page{
      min-height: 100vh;
      display:flex;
      align-items: stretch;
      justify-content:center;
      padding: 40px 16px;
    }
    .container{
      width: 100%;
      max-width: 1040px;
      position: relative;
    }
    .hero{
    
      border-radius: calc(var(--radius) + 6px);
      padding: 32px 28px;
      background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), var(--shadow-lg);
      margin-bottom: 18px;
      position: relative;
      overflow: hidden;
    }
    .hero:before{
      content:'';
      position:absolute;
      inset:0;
      background: radial-gradient(1200px 800px at 0% -10%, rgba(255,255,255,0.15), transparent 60%);
      pointer-events:none;
    }
    .hero-title{
      margin:0 0 6px 0;
      font-weight: 800;
      font-size: 28px;
      letter-spacing: 0.2px;
    }
    .hero-sub{
      margin:0;
      opacity:0.9;
    }
    .card{
      background: var(--card-bg);
      backdrop-filter: var(--glass);
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
    }
    .toolbar{
      position: absolute;
      right: 8px;
      top: 8px;
      display: flex;
      gap: 8px;
      z-index: 5;
    }
    .btn{
      appearance: none;
      border: none;
      outline: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      cursor: pointer;
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 14px;
      transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn:active{ transform: translateY(1px) scale(0.99); }
    .btn-primary{
      background: var(--primary);
      color: #fff;
      box-shadow: var(--shadow-sm);
    }
    .btn-ghost{
      background: rgba(255,255,255,0.6);
      color: var(--text);
      box-shadow: var(--shadow-sm);
    }
    .btn-danger{ background: var(--danger); color: #fff; }
    .btn-outline{
      background: transparent;
      border: 1px solid rgba(255,255,255,0.6);
      
    }

    .progress{
      height: 8px;
      background: rgba(148,163,184,0.25);
      border-radius: 999px;
      overflow: hidden;
      margin-top: 10px;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
    }
    .progress .bar{
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--accent), var(--primary));
      transition: width .35s ease;
    }

    .body{
      display:grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .step-card{
      padding: 22px 22px 24px 22px;
    }
    .step-head{
      display:flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }
    .step-title{
      margin:0;
      font-size: 20px;
      font-weight: 800;
    }
    .step-desc{
      margin:0;
      color: var(--muted);
      font-size: 14px;
    }
    .crumbs{
      display:flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; color: #334155;
      font-size: 13px;
    }
    .crumbs .dot{
      width:6px; height:6px; border-radius:999px; background: var(--accent); display:inline-block; margin-right:6px;
    }

    .options{
      margin-top: 18px;
      display:grid;
      grid-template-co.........完整代码请登录后点击上方下载按钮下载查看