可视化排版生成器 （纯前端 · 拖拽排序 · 导出 HTML+CSS）

<scrtpt>

  document.addEventListener('click', e => {
    const q = e.target.closest('.v-faq-q');
    if (!q) return;
    const item = q.parentElement; item.classList.toggle('open');
    const tg = q.querySelector('.v-faq-toggle');
    if (tg) tg.textContent = item.classList.contains('open') ? '−' : '+';
  });

</scrtpt>

/**可视化排版生成器**/
.v-root { --m:#5a6b87; --blue:#2563eb; --green:#059669; --bg:#f8fafc; --card:#fff; --line:#e5e7eb; --title:#0b1220; }
.v-root * { box-sizing: border-box }
.v-root .v-section { margin:28px 0 }
.v-root .v-title { font-size:24px; line-height:1.3; margin:0 0 10px; font-weight:700; color:var(--title) }
.v-root .v-intro { color:var(--m); margin:0 }
.v-root .v-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center }
@media (max-width:800px){ .v-root .v-row{grid-template-columns:1fr} }
.v-root .v-img { width:100%; border-radius:14px; background:#eef2ff; display:block; object-fit:cover }
.v-root .v-grid { display:grid; gap:16px }
.v-root .v-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.v-root .v-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.v-root .v-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.v-root .v-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.v-root .v-grid.cols-3,.v-root .v-grid.cols-2,.v-root .v-grid.cols-4{grid-template-columns:1fr}}
.v-root .v-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.v-root .v-card h4{margin:10px 0 8px;font-size:16px}
.v-root .v-card p{margin:0;color:var(--m)}
.v-root .v-list{display:grid;gap:8px}
.v-root .v-li{display:flex;gap:8px}
.v-root .v-ic{font-style:normal}
.v-root .v-badge{font-size:12px;padding:2px 8px;border-radius:999px;background:#e8f2ff;color:#114488;display:inline-block}
.v-root .v-hr{height:1px;background:var(--line);border:none;margin:20px 0}

/* 大标题 Headline */
.Headline .Headline_h1{ font-size:clamp(28px,4vw,36px); line-height:1.2; margin:0; text-align:center; letter-spacing:.2px; }
/* 标题 + 介绍 Title_Text */
.Title_Text .Title_Text_h2{ font-size:28px; }
.Title_Text .Title_Text_p{ max-width:70ch; }
@media(max-width:640px){
.Title_Text .Title_Text_h2{ font-size:24px; }
}
/* 标题 + 图片 Title_Image */
.Title_Image .Title_Image_h2{ font-size:26px;margin-bottom:10px; }
.Title_Image .Title_Image_img{ border-radius:14px; }
/* 左图右文 Image_Right_Text */
.Image_Right_Text .v-row{ gap:24px }
.Image_Right_Text .v-title{ font-size:20px;margin:0 0 8px }
.Image_Right_Text .v-intro{ margin:6px 0 0 }
  @media(max-width:800px){
  .Image_Right_Text .v-row{ grid-template-columns:1fr }
  }
/* 右图左文 Image_Left_Text */
 .Image_Left_Text .v-row{ gap:24px }
 .Image_Left_Text .v-title{ font-size:20px;margin:0 0 8px }
.Image_Left_Text .v-intro{ margin:6px 0 0 }
@media(max-width:800px){ .Image_Left_Text .v-row{ grid-template-columns:1fr } }
/*  图片 + 文字网格 Image_Text_Grid */
.Image_Text_Grid .Image_Text_Grid_Img{ aspect-ratio:16/10; object-fit:cover; border-radius:14px; }
.Image_Text_Grid .Image_Text_Grid_h4{ margin:10px 0 6px;font-size:16px }
.Image_Text_Grid .Image_Text_Grid_p{ color:var(--m) }
/* 纯文字网格 Text_Only_Grid */
.Text_Only_Grid .Text_Only_Grid_p{ color:var(--m) }
/* 要点清单 Bulletin */
.Bulletin .v-title{ font-size:20px;margin:0 0 10px }
.Bulletin .Bulletin_ul{ gap:8px }
.Bulletin .Bulletin_li .v-ic{ min-width:1.2em;text-align:center }
/* 信息卡片 Info_Card */
.Info_Card .Info_Card_h4{ margin:6px 0 8px }
/* FAQ 折叠 FAQ_Collapsible */
.FAQ_Collapsible .v-faq{display:grid;gap:10px}
.FAQ_Collapsible .v-faq-item{border:1px solid var(--line);border-radius:12px;background:#fff}
.FAQ_Collapsible .v-faq-q{cursor:pointer;padding:12px 14px;font-weight:600;display:flex;justify-content:space-between;align-items:center;font-size:16px}
FAQ_Collapsible .v-faq-a{display:none;padding:0 14px 14px;color:var(--m)}
.FAQ_Collapsible .v-faq-item .v-faq-a{display: none;  padding: 0 14px 14px;}
.FAQ_Collapsible .v-faq-item.open .v-faq-a{display:block;}
.FAQ_Collapsible .v-faq-toggle{width:22px;height:22px;border-radius:6px;line-height:16px;border:1px solid var(--line);display:inline-grid;place-items:center;font-weight:700}
/*  横幅 CTA Banner_CTA */
.Banner_CTA{margin:28px 0}
.Banner_CTA .v-cta{ border:1px dashed var(--line); border-radius:16px; padding:28px 24px; background:linear-gradient(to right,#f8fbff,#f9fafb); text-align:center; box-shadow:0 4px 16px rgba(0,0,0,0.04); }
.Banner_CTA .Banner_CTA_h3{ margin:0 0 12px; font-size:24px; font-weight:700; color:var(--title); }
.Banner_CTA .v-intro{margin:0 0 20px;font-size:15px;color:var(--m)}
.Banner_CTA .v-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.Banner_CTA .v-btn{ display:inline-block; padding:12px 22px; border-radius:999px; border:1px solid var(--blue); color:#fff; background:var(--blue); text-decoration:none; font-size:15px; font-weight:500; transition:background .25s,transform .2s,box-shadow .25s; }
.Banner_CTA .v-btn:hover{ background:#1d4ed8; transform:translateY(-2px); box-shadow:0 4px 12px rgba(37,99,235,0.25); }
.Banner_CTA .v-btn:active{transform:translateY(0);box-shadow:none}
.Banner_CTA .v-btn.ghost{background:#fff;color:var(--blue)}
.Banner_CTA .v-btn.ghost:hover{ background:#f1f5ff; transform:translateY(-2px); box-shadow:0 4px 12px rgba(37,99,235,0.15); }
.Banner_CTA .v-btn.ghost:active{transform:translateY(0);box-shadow:none}
@media(max-width:640px){
.Banner_CTA .v-cta{padding:20px 16px}
.Banner_CTA .Banner_CTA_h3{font-size:20px}
.Banner_CTA .v-actions{flex-direction:column}
.Banner_CTA .v-btn{width:100%;text-align:center}
}
/* 自定义 HTML section_html */
.section_html{margin:28px 0}
.section_html *{max-width:100%}
/* 小屏微调 */
@media(max-width:768px){
.Image_Text_Grid .Image_Text_div, .Text_Only_Grid .Text_Only_Grid_div, .Info_Card .v-card{padding:14px}
}