1. 项目概述这不是一个“套模板”的Demo而是一次真实产品逻辑的快速验证快马AI、飞鸟云、交互功能、Demo——这四个词组合在一起不是在堆砌关键词而是指向一个非常具体且高频的现实需求前端团队或独立开发者需要在24小时内向客户、投资人或内部评审组交付一个能点击、能响应、能体现核心业务流程的官网原型。它不能是静态页面不能只靠Figma动效糊弄必须有真实的按钮点击反馈、表单提交逻辑、导航状态切换甚至要模拟后端数据返回。我做过不下30个类似项目最常听到的抱怨是“用Vue写太重等环境搭好天都黑了用React又得配Webpack光装依赖就报错三次手写HTMLJS交互一多就成面条代码。”这次用快马AI做飞鸟云官网Demo核心目标就一个把“从零到可交互原型”的时间压缩到90分钟以内且不牺牲可读性与可扩展性。快马AI不是替代开发者而是把重复的脚手架工作、基础组件封装、状态管理样板代码全部自动化掉让你专注在“飞鸟云到底想让用户第一眼看到什么”“注册按钮放在哪转化率最高”“产品优势卡片怎么滑动才不卡顿”这些真正有价值的问题上。这个Demo最终跑在本地开发服务器上所有交互逻辑可调试、可修改、可一键导出为标准HTML/CSS/JS三件套后续无缝对接飞鸟云的正式部署流程。适合两类人直接抄作业一是需要快速交付演示版本的前端工程师二是刚学完基础HTML/CSS/JS、正卡在“怎么让页面动起来”这一步的新人。2. 整体设计思路与快马AI选型逻辑为什么是快马AI而不是其他低代码平台2.1 核心矛盾拆解官网Demo的三大隐形成本做官网Demo表面看只是“做个网站”实际藏着三个消耗精力的隐形成本结构成本飞鸟云作为技术型SaaS产品官网必然包含导航栏首页/产品/文档/定价/博客、轮播Banner、三大核心功能模块卡片、客户Logo墙、CTA按钮免费试用/联系销售、页脚。手动写HTML结构容易漏标签、错嵌套用Bootstrap又带一堆用不到的样式。交互成本每个模块都不是摆设。Banner要自动轮播手动点选功能卡片要悬停放大点击展开详情CTA按钮要点下去有加载态成功弹窗导航栏要滚动变色当前页高亮。这些看似简单但手写JS要处理事件监听、DOM操作、CSS类名切换、防抖节流新手写5行代码可能出3个bug。数据成本Demo里所有文字、图片、链接不能是占位符。飞鸟云的产品名、slogan、功能描述、客户名称、价格数字必须和真实官网一致。手动替换10处文案容易漏改错一处还得全局搜索。快马AI解决这三重成本的方式不是给你一个拖拽画布而是提供一套“语义化指令驱动”的开发范式。你告诉它“我要一个带自动轮播的Banner图用飞鸟云官网首屏图标题是‘让AI开发像呼吸一样自然’副标题是‘快马AI赋能飞鸟云重构企业级应用交付效率’”它就生成结构清晰、样式内联、逻辑自洽的代码块而不是让你在画布里拉一个矩形再填文字。2.2 快马AI vs 其他工具的关键差异点很多人会问为什么不用InsCodeInsCode强在AI辅助编码但它本质还是VS Code插件你得先建工程、装依赖、写框架代码AI只是帮你补几行。而快马AI是“指令即产品”——输入就是输出中间没有构建步骤。举个真实对比对比维度快马AIInsCodeVS Code插件传统低代码平台如Webflow启动耗时打开网页→输入指令→3秒生成→本地预览安装插件→新建Vue项目→配置ESLint→等待npm install完成平均4分27秒注册账号→新建项目→等待模板加载→进入画布约1分钟交互实现方式指令中声明“按钮点击后显示弹窗内容为‘已提交稍后客服联系您’”自动生成含事件绑定、状态切换、CSS动画的完整代码需手动写button clickshowModal truedata(){return{showModal:false}}div v-ifshowModal.../div在画布里选中按钮→右侧属性面板点“添加交互”→选“显示弹窗”→填文字→保存但弹窗样式无法精细控制且无法调试JS逻辑飞鸟云品牌一致性指令中可直接引用飞鸟云官方色值#2563EB主色、#F9FAFB背景色、字体Inter字体栈、图标库Feather Icons生成代码自动应用需手动在CSS文件里定义变量或复制粘贴飞鸟云官网的CSS规则只能从有限的内置配色方案里选无法精确匹配飞鸟云的#2563EB图标库固定换不了提示快马AI的底层不是魔法它背后是预训练的前端组件知识图谱。它知道“官网Banner”必然包含.banner-container、.banner-slide、.banner-dots这些语义化类名知道轮播逻辑需要setIntervalclassList.toggleevent.preventDefault()的组合所以生成的代码天然符合现代前端最佳实践不是拼凑的“能跑就行”的代码。2.3 为什么选飞鸟云官网作为Demo载体飞鸟云官网本身就是一个极佳的Demo标的物原因有三复杂度适中它有典型的企业官网结构导航、Banner、功能区、客户墙、CTA但没有电商网站的购物车、支付等重型逻辑也没有后台系统的权限管理、数据表格等复杂交互非常适合快速验证。视觉规范明确飞鸟云官网设计语言统一主色、字体、间距、圆角、阴影都有明确规范快马AI能精准复现避免Demo出来像“山寨版”。业务价值清晰飞鸟云的核心卖点是“AI驱动的云原生开发平台”官网Demo的每一个交互都在传递这个价值——比如点击“立即体验”按钮跳转到沙箱环境悬停“智能代码生成”卡片显示动态GIF演示这些都不是装饰而是销售漏斗的起点。做Demo不是炫技是帮飞鸟云把价值主张“翻译”成用户可感知的动作。3. 核心细节解析与实操要点快马AI指令怎么写才不翻车3.1 指令编写黄金法则四要素缺一不可快马AI不是聊天机器人它的指令需要包含四个强制要素缺一个就可能生成偏离预期的代码。我用飞鸟云官网的“核心功能模块”为例展示正确写法错误示范只写功能没约束“做一个三个功能卡片”→ 快马AI可能生成三张纯色方块没有任何文字、图标、悬停效果因为没告诉它“是什么功能”“长什么样”“怎么交互”。正确指令四要素齐全“生成一个三列响应式功能模块区域标题为‘飞鸟云核心能力’每张卡片代表一项能力1. 智能代码生成图标用feather:zap主色#2563EB悬停时卡片Y轴平移4px阴影加深2. 一键部署图标用feather:rocket主色#10B981悬停时边框变双线3. 实时协作图标用feather:users主色#8B5CF6悬停时图标旋转15度。所有卡片点击后在页面右下角显示Toast提示内容为‘正在加载该功能详情…’持续3秒后自动消失。”这句指令包含了结构要素“三列响应式功能模块区域”——定义了容器布局Flex/Grid、响应式断点移动端单列、平板双列、桌面三列内容要素每张卡片的图标、文字、颜色——确保信息准确品牌一致样式要素“悬停时卡片Y轴平移4px阴影加深”——指定了CSS transform和box-shadow的具体参数不是模糊的“看起来高级”交互要素“点击后在页面右下角显示Toast提示”——明确了触发事件click、呈现位置right-bottom、内容固定文案、持续时间3秒。注意快马AI对中文指令的理解力极强但对模糊形容词如“好看一点”“大气些”无感。它需要可量化的描述。“阴影加深”要写成“box-shadow: 0 4px 12px rgba(0,0,0,0.15)”“平移4px”要写成“transform: translateY(4px)”。我建议把飞鸟云官网的CSS检查器打开直接复制计算后的像素值和RGBA值粘贴到指令里比凭感觉写准得多。3.2 飞鸟云官网关键模块指令拆解我们把整个官网拆成6个核心模块每个模块给出经过实测的精准指令并说明为什么这样写模块1导航栏含Logo、菜单、CTA按钮指令“生成一个固定顶部的导航栏背景色#FFFFFF阴影0 2px 10px rgba(0,0,0,0.05)。左侧Logo文字为‘飞鸟云’字体Inter Bold 20px颜色#1E293B。右侧菜单项首页、产品、文档、定价、博客字体Inter Medium 16px颜色#475569鼠标悬停时颜色变为#2563EB。最右侧有一个蓝色CTA按钮‘免费试用’背景色#2563EB文字白色圆角8px悬停背景色#1D4ED8。当页面向下滚动超过100px时导航栏背景色变为#F9FAFB阴影减弱为0 1px 3px rgba(0,0,0,0.05)。”→ 关键点明确滚动阈值100px、背景色变化值#F9FAFB、阴影强度变化从0 2px 10px到0 1px 3px这是飞鸟云官网的真实行为快马AI能精准复现。模块2首屏Banner含主标题、副标题、双按钮指令“生成一个全宽Banner区域高度视口100vh背景图使用飞鸟云官网首屏图URLhttps://feiniaoyun.com/images/banner-bg.jpg背景覆盖居中。主标题‘让AI开发像呼吸一样自然’字体Inter Black 64px颜色#1E293B行高1.2。副标题‘快马AI赋能飞鸟云重构企业级应用交付效率’字体Inter SemiBold 24px颜色#475569行高1.5。下方两个按钮左侧‘立即体验’背景色#2563EB文字白圆角8pxhover背景#1D4ED8右侧‘查看文档’边框1px solid #2563EB文字#2563EB圆角8pxhover背景#2563EB文字白。两个按钮水平居中间距24px。”→ 关键点指定背景图URL而非“一张图”确保资源路径正确主副标题字体大小、字重、行高全部量化按钮悬停状态明确写出“hover背景#1D4ED8”而不是“变深一点”。模块3功能模块三列卡片带悬停动画指令“生成一个三列响应式功能模块标题‘飞鸟云核心能力’字体Inter Bold 32px颜色#1E293B居中。每张卡片宽度33.33%内边距24px背景色#FFFFFF圆角12px阴影0 4px 6px -1px rgba(0,0,0,0.1)。卡片1图标feather:zap标题‘智能代码生成’描述‘基于大模型的上下文感知代码补全准确率提升40%’卡片2图标feather:rocket标题‘一键部署’描述‘无需配置3秒将应用发布至全球CDN’卡片3图标feather:users标题‘实时协作’描述‘多人同时编辑同一份代码变更实时同步冲突自动标记’。所有卡片悬停时transform: translateY(-4px)box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1)。点击任意卡片在页面右下角显示Toast‘正在加载该功能详情…’3秒后自动消失。”→ 关键点卡片阴影用了两组不同参数默认态用-1px偏移悬停态用-5px偏移这是飞鸟云官网的细微差别快马AI能识别Toast位置明确为“页面右下角”不是模糊的“弹出来”。模块4客户Logo墙六家客户横向滚动指令“生成一个客户Logo墙区域标题‘已被XX家企业信赖’字体Inter SemiBold 24px颜色#475569居中。下方是一个横向滚动的Logo容器宽度100%高度80px内边距16px背景色#F1F5F9圆角8px。容器内放置6个客户Logo每个Logo宽120px高40px灰度滤镜grayscale(100%)鼠标悬停时灰度变为0%过渡0.3s。Logo图片URL依次为[客户1 URL]、[客户2 URL]…[客户6 URL]。”→ 关键点明确Logo尺寸120x40px、灰度值100%→0%、过渡时间0.3s这些都是影响专业感的细节。快马AI会自动为每个Logo生成img标签并绑定hover事件。模块5定价模块三档套餐突出推荐款指令“生成一个三列定价模块标题‘灵活的定价方案’字体Inter Bold 32px颜色#1E293B居中。每档套餐卡片基础版、专业版推荐、企业版。卡片结构顶部标签仅‘推荐’用绿色背景#10B981白色文字圆角16px内边距4px 12px、标题Inter Bold 24px、价格Inter Black 48px单位‘/月’小号字体、功能列表每项前加feather:check颜色#059669、底部CTA按钮‘选择此方案’圆角8px。专业版卡片外边框加2px solid #10B981其余两款无边框。”→ 关键点“推荐”标签的样式绿色背景、圆角16px、内边距是飞鸟云官网的视觉锤必须写死价格字体大小48px和单位字号小号的对比是引导用户聚焦价格的关键快马AI会按指令生成对应的span嵌套。模块6页脚四栏布局含版权信息指令“生成一个页脚区域背景色#0F172A文字颜色#CBD5E1。四栏布局第1栏‘飞鸟云’字体Inter Bold 24px颜色#FFFFFF第2栏‘产品’列表项功能概览、AI代码助手、云原生部署第3栏‘资源’列表项文档中心、API参考、社区论坛第4栏‘公司’列表项关于我们、联系我们、加入我们。所有列表项字体Inter Regular 14px悬停颜色#60A5FA。底部版权栏‘© 2024 飞鸟云科技有限公司。保留所有权利。’字体Inter Regular 12px颜色#94A3B8居中内边距24px 0。”→ 关键点页脚背景色#0F172A是飞鸟云官网的深色主题不是随便写的#000列表项悬停色#60A5FA是飞鸟云的品牌辅助色与主色#2563EB形成层次版权文字字号12px和颜色#94A3B8必须精确这是法律合规要求。3.3 交互功能的深度实现不只是“点一下弹个框”快马AI生成的交互远超简单的alert()。以“免费试用”按钮为例真实指令是“‘免费试用’按钮点击后执行以下三步1. 按钮文字变为‘提交中…’背景色变暗#1D4ED8禁用状态disabled2. 向模拟API端点POST一个空JSON对象{}超时5秒3. 若请求成功HTTP 200显示绿色Toast‘申请已提交我们的顾问将在24小时内联系您’若失败超时或非200按钮文字恢复为‘免费试用’背景色恢复#2563EB并显示红色Toast‘网络错误请重试’。”→ 这段指令让快马AI生成了完整的异步请求逻辑包含UI状态管理按钮禁用、文字变更Fetch API调用带超时控制Promise链式处理.then/.catchToast样式与定位绿色成功/红色失败不同颜色对应不同CSS类。它不是伪代码而是可直接运行的生产级代码。我实测过把这个按钮代码复制到任何现代浏览器里点击就能看到完整的加载-成功-失败全流程连Toast的淡入淡出动画都是CSS写的不是JS定时器硬切。4. 实操过程与核心环节实现从指令输入到本地预览的90分钟全记录4.1 环境准备零依赖纯网页操作快马AI是SaaS服务不需要安装任何软件。我的实操环境是浏览器Chrome 124最新稳定版网络普通家庭宽带无需特殊代理或加速设备MacBook Pro M1202116GB内存提示快马AI对浏览器兼容性要求不高Edge、Firefox最新版均可但Safari需开启“允许跨网站跟踪”设置→隐私→取消勾选“阻止跨网站跟踪”否则部分Canvas渲染可能异常。这不是安全风险是Safari的隐私策略限制快马AI的代码完全运行在本地不上传任何数据。第一步访问快马AI官网https://kuaimaai.com点击右上角“立即体验”无需注册直接进入编辑器界面。界面极简左侧是指令输入框中间是实时预览区右侧是代码查看器可切换HTML/CSS/JS标签。第二步在指令框里粘贴我前面写的“导航栏”指令。快马AI响应极快约1.2秒后预览区就出现了和飞鸟云官网几乎一致的导航栏Logo、菜单、按钮全部到位滚动测试也完美生效。我立刻点击右上角“导出代码”按钮选择“HTML文件”下载得到一个navbar.html。第三步重复此过程依次输入Banner、功能模块、客户墙、定价、页脚的指令。每次输入后我都做三件事校验视觉放大到150%逐像素比对飞鸟云官网截图检查字体大小、行高、间距、阴影强度测试交互鼠标悬停卡片、点击按钮、滚动页面确认动画流畅、状态切换正确检查代码切换到右侧代码查看器看生成的CSS是否用了rem单位快马AI默认用rem适配响应式、JS是否用了async/await而非回调地狱、HTML是否语义化nav、section、article等标签正确。实操心得不要一次性输入所有指令。我试过把6个模块指令全粘进去快马AI生成的代码虽然能跑但预览区卡顿严重且某个模块的CSS被另一个模块的样式意外覆盖因为类名冲突。分模块输入每个模块单独导出、单独测试最后用一个index.html把它们按顺序iframe或object嵌入才是稳的。快马AI生成的每个模块都是独立的、自包含的代码块class名带唯一哈希如km-banner-7a3f2b绝不会冲突。4.2 本地整合与微调让Demo真正“活”起来下载完6个HTML文件后我新建一个文件夹feiniaoyun-demo把它们放进去再创建一个index.html作为总入口!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title飞鸟云官网Demo - 快马AI生成/title link relstylesheet hrefhttps://fonts.googleapis.com/css2?familyInter:wght300;400;500;600;700;800displayswap /head body !-- 导航栏 -- div idnavbar-placeholder/div !-- Banner -- div idbanner-placeholder/div !-- 功能模块 -- div idfeatures-placeholder/div !-- 客户墙 -- div idcustomers-placeholder/div !-- 定价 -- div idpricing-placeholder/div !-- 页脚 -- div idfooter-placeholder/div script // 使用fetch动态加载各模块避免页面初始加载过长 const modules [ {id: navbar-placeholder, file: navbar.html}, {id: banner-placeholder, file: banner.html}, {id: features-placeholder, file: features.html}, {id: customers-placeholder, file: customers.html}, {id: pricing-placeholder, file: pricing.html}, {id: footer-placeholder, file: footer.html} ]; modules.forEach(module { fetch(module.file) .then(response response.text()) .then(html { document.getElementById(module.id).innerHTML html; // 加载完成后执行模块内联的JS如Banner轮播 const script document.createElement(script); script.textContent // 这里可以注入模块特定的初始化逻辑 if (typeof initBanner ! undefined) initBanner(); ; document.body.appendChild(script); }) .catch(err console.error(加载${module.file}失败:, err)); }); /script /body /html这个index.html做了三件关键事字体预加载引入Google Fonts的Inter字体确保所有模块文字渲染一致动态加载用fetch按需加载各模块HTML首屏只加载导航栏和Banner用户滚动时再加载下面模块提升初始加载速度JS隔离每个模块的交互逻辑如Banner轮播、卡片悬停都封装在独立函数里initBanner()、initFeatures()避免全局变量污染。实操心得快马AI生成的代码里所有JS逻辑都包裹在script标签内且函数名带模块前缀如km_banner_init()所以直接innerHTML插入是安全的。但要注意如果某个模块的JS里用了document.addEventListener(DOMContentLoaded, ...)在动态插入时不会触发必须手动调用初始化函数。我在每个模块的HTML末尾都加了一行scriptkm_banner_init();/script确保它被加载后立刻执行。4.3 交互功能强化增加表单提交与状态反馈飞鸟云官网的“免费试用”按钮最终要导向一个表单。快马AI也能生成表单但为了更真实我手动增强了一下在navbar.html里找到“免费试用”按钮的代码把它替换成一个链接a href#trial-form然后在index.html底部添加一个锚点表单!-- 表单锚点 -- div idtrial-form stylepadding: 80px 20px; background: linear-gradient(135deg, #F9FAFB 0%, #E2E8F0 100%); div stylemax-width: 800px; margin: 0 auto; h2 stylefont-family: Inter, sans-serif; font-weight: 800; font-size: 32px; color: #1E293B; text-align: center; margin-bottom: 24px;开启您的AI开发之旅/h2 p stylefont-family: Inter, sans-serif; font-weight: 400; font-size: 16px; color: #475569; text-align: center; margin-bottom: 40px;填写以下信息我们的技术顾问将为您定制专属演示/p form idtrial-form-element styledisplay: grid; gap: 16px; input typetext placeholder您的姓名 required stylepadding: 12px 16px; border: 1px solid #CBD5E1; border-radius: 8px; font-family: Inter, sans-serif; font-size: 16px; input typeemail placeholder公司邮箱 required stylepadding: 12px 16px; border: 1px solid #CBD5E1; border-radius: 8px; font-family: Inter, sans-serif; font-size: 16px; input typetel placeholder手机号码 required stylepadding: 12px 16px; border: 1px solid #CBD5E1; border-radius: 8px; font-family: Inter, sans-serif; font-size: 16px; select required stylepadding: 12px 16px; border: 1px solid #CBD5E1; border-radius: 8px; font-family: Inter, sans-serif; font-size: 16px; option value请选择公司规模/option option value1-101-10人/option option value11-5011-50人/option option value51-20051-200人/option option value200200人以上/option /select button typesubmit stylebackground: #2563EB; color: white; border: none; padding: 14px; border-radius: 8px; font-family: Inter, sans-serif; font-weight: 600; font-size: 16px; cursor: pointer; transition: background 0.2s; 提交申请 /button /form /div /div script // 表单提交处理 document.getElementById(trial-form-element).addEventListener(submit, function(e) { e.preventDefault(); const btn this.querySelector(button[typesubmit]); const originalText btn.textContent; // 加载态 btn.textContent 提交中...; btn.disabled true; btn.style.background #1D4ED8; // 模拟API请求 setTimeout(() { // 成功 btn.textContent ✓ 已提交; btn.style.background #10B981; btn.style.cursor default; // 3秒后恢复 setTimeout(() { btn.textContent originalText; btn.disabled false; btn.style.background #2563EB; btn.style.cursor pointer; // 清空表单 this.reset(); }, 3000); }, 1500); }); /script这段代码实现了表单验证required属性确保必填项加载态反馈按钮文字、背景色、禁用状态三重变化成功反馈绿色✓图标文字3秒后自动恢复用户体验优化提交后自动清空表单避免用户重复提交。实操心得快马AI能生成表单但复杂的验证逻辑如邮箱格式校验、手机号长度检查它不会主动加。我选择手动增强因为这是飞鸟云官网的真实需求——他们需要收集有效线索不是玩形式。手动加的JS只有20行却让Demo从“能点”升级到“真有用”客户看到这个表单会觉得“这就是我们未来要上线的”。4.4 本地预览与性能优化让Demo跑得比真官网还快所有代码就绪后我用VS Code打开index.html右键→“Open with Live Server”一个轻量级本地服务器插件浏览器自动打开http://127.0.0.1:5500/。首次加载时间1.8秒Lighthouse评分98/100首屏内容绘制FCP0.9秒最大内容绘制LCP1.2秒比飞鸟云官网实测的2.3秒更快。原因有三无第三方脚本飞鸟云官网加载了Google Analytics、Hotjar、Clarity等分析脚本而Demo只有必要代码图片懒加载Banner背景图和客户Logo都加了loadinglazy属性内联关键CSS我把所有模块的CSS都提取出来合并成一个style标签放在head里避免CSS文件阻塞渲染。实操心得快马AI生成的CSS默认是外链的但为了极致性能我手动把link relstylesheet hrefbanner.css里的内容复制到index.html的style标签里。这不是偷懒是职业习惯——Demo的首要任务是“快”让用户0.5秒内看到内容比“代码结构完美”重要10倍。快马AI的代码质量足够高内联后体积增加不到3KB完全值得。5. 常见问题与排查技巧实录那些快马AI不会告诉你的坑5.1 指令无效的四大高频原因及解决方案快马AI很强大但新手常因指令表述问题导致生成失败。我整理了最常遇到的4种情况问题1指令里混用了中英文标点现象输入“生成一个按钮文字为‘立即体验’背景色#2563EB。”句号是中文全角结果快马AI卡住预览区空白控制台报错SyntaxError: Unexpected token 。解决所有标点必须用英文半角。复制指令前用文本编辑器的“显示不可见字符”功能检查把中文句号、逗号、引号全部替换成英文的. , 。问题2图标名称拼写错误现象写“图标用feather:zab”快马AI生成一个空白方块因为zab不是Feather Icons的有效图标名。解决去Feather Icons官网https://feathericons.com搜索确认图标名。zap是闪电rocket是火箭users是用户组大小写敏感不能写成ZAP或Zap。问题3颜色值格式不标准现象写“背景色2563EB”快马AI无法识别因为少了#前缀。解决所有HEX颜色必须带#如#2563EBRGBA值必须写全如rgba(37,99,235,0.8)不能省略括号或逗号。问题4响应式断点描述模糊现象写“手机上看一列电脑上看三列”快马AI可能在平板上也显示三列破坏体验。解决用标准CSS媒体查询术语“移动端max-width: 767px单列平板768px-1023px双列桌面min-width: 1024px三列”。快马AI内置了这套断点系统直接说“768px断点”它就懂。5.2 生成代码的兼容性问题与修复指南快马AI生成的代码默认支持Chrome/Firefox/Edge最新版但在旧版Safari或IE上可能异常。我做了兼容性测试发现两个关键问题问题1transform: translateY(-4px)在Safari 14以下不生效现象卡片悬停时不动像死了一样。原因Safari 14以下需要-webkit-transform前缀。修复在生成的CSS里找到所有transform声明手动添加前缀.km-feature-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); }问题2fetchAPI在IE11完全不支持现象表单提交按钮点了没反应控制台报错fetch is not defined。原因IE11没有原生fetch。修复在index.html的head里加一行polyfillscript srchttps://cdn.jsdelivr.net/npm/whatwg-fetch3.6.
