根据下面内容 生成一页手机APP 上显示的offer签署后后续跟踪事项：🧾 Offer 已提交 · 后续跟进事项 房源信息（顶部卡片） 123 Oak Meadow Rd, Markham, ON
1q429tdcndb...
![生成一张微信小程序竖屏UI设计图，宽高比9:16，深色专业风，与智宅焕前序UI风格保持一致，是下单流程核心页面，客户可在此选配服务、查看计价、填写项目信息，页面内容可滚动。
从上到下布局：
1. 顶部步骤指示器：步骤条为「①服务模式 ✓ → ②城市选择 ✓ → ③服务与计价（当前高亮）→ ④确认支付（置灰）」。
2. 区域一：添加服务与计价，区域标题“选择服务”，全宽虚线边框“+ 添加服务”按钮，下方展示2个已添加服务卡片，核心信息清晰：
服务卡片1：名称“现场安装调试”，标签“按数量计价”，数量选择器[-] 1 [+]，单价¥800/次，小计¥800，右侧×删除按钮。
服务卡片2：名称“智能方案设计”，标签“按面积分档”，面积输入框“120 ㎡”，单价¥15/㎡，小计¥1,800，右侧×删除按钮。
卡片下方实时突出展示“服务总计：¥2,600”。
3. 区域二：填写项目信息，区域标题“项目信息”，依次排列表单占位字段：
项目名称输入框（占位“如：张先生家智能改造”），项目地址（已选城市 + 详细地址输入框，占位“请填写详细地址”），户型面积数字输入框（占位“㎡”），项目类型下拉选择（选项：平层/复式/别墅/工装/其他），需求描述多行文本输入框（占位“请描述您的项目需求...”，标注选填），关联已购产品订单下拉选择框（占位“选择历史订单”，标注选填）。
资料上传区：虚线框上传按钮，带“+ 上传文件”图标，提示文字“请上传户型图、清单、现场照片等资料，有助于我们更快审核您的订单”。
4. 底部固定悬浮操作区：左侧突出展示“订单总价：¥2,600”，右侧主色高亮按钮“提交订单并支付”。
已添加服务卡片为核心信息区，总价视觉突出，所有文字清晰可见，使用无衬线字体，整体风格与前序设计保持统一。](https://gd-cms.dancf.com/gd-cms/xi19e5/0/e600a549-b6c8-4f1f-b576-ac2b51d8e1488195.png?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第4屏] 公开课搜索功能页面展示，包含顶部搜索框、输入关键字后展示搜索结果列表。
[氛围/风格] 现代简约搜索界面设计，清晰交互反馈，干净清爽。
[元素布局] 顶部导航下方是搜索框，带放大镜搜索图标，搜索框内显示占位文字"搜索公开课关键字"，输入"数据分析"关键字后，下方展示匹配的搜索结果列表，展示2条匹配结果，每条结果和主列表样式一致。
[光影质感] 搜索框边框浅灰色，输入后高亮边框，结果列表和主列表风格一致，光影清晰，交互反馈明确。
[配色色系] 全局底色 #FFFFFF，搜索框 #F5F5F5，占位文字 #999999，输入文字 #111111，匹配结果配色和主列表一致。
[视角构图] 正视图，移动端竖屏，搜索框在顶部，结果列表向下延展，符合搜索界面交互逻辑。
[文字版式] 占位文字字号15px，搜索关键字清晰，结果列表文字排版统一规范，清晰可读。
[比例分辨率] 9:16 竖版比例，移动端适配，4K分辨率，文字清晰可辨。
[负向提示词] 布局错乱，文字模糊，搜索框变形，交互逻辑错误，水印。](https://gd-cms.dancf.com/gd-cms/xi19e5/0/04c717bd-2ae2-4ad8-b8c8-e648b6a853356783.png?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
