你是一个 uni-app + Vue 3 (Composition API + <script setup>) 专家。 
现在把下面这段 screenshot-to-code 生成的 H5 + Tailwind 代码，完整转换成能在 uni-app (微信小程序 / App / H5 多端) 直接运行的 .vue 文件。 严格遵守以下转换规则，一行代码都不准偷懒或省略： 
1. 所有 div → view 
2. 所有 span / p / h1-h6 / strong / em → text 
3. img → image 组件，强制加 mode="aspectFill" 或 "widthFix"（根据实际情况选） 
4. button / a → button 或 view + @tap / @click 
5. 移除所有 Tailwind class，转换成等效的 scoped <style lang="scss"> 样式 - px → rpx（粗略规则：数值 * 2，例如 16px → 32rpx，字体/间距可微调到视觉接近） - flex / grid → flex 布局（小程序 grid 支持有限，优先 flex + flex-wrap） - position: absolute / fixed → 尽量用 flex + margin / padding 替代，主要布局别用 absolute - background: linear-gradient → 支持，但小程序渐变写法要标准 - box-shadow → 小程序支持有限，简化或用 elevation 模拟 - backdrop-filter / filter / clip-path 等 → 去掉或用 opacity / mask 替代 - font-family → 用系统字体：-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif 
6. 颜色保持原样（#xxxxxx） 
7. 去掉 :hover / :focus 等（小程序不支持或表现不同） 
8. 字体图标（如 FontAwesome）→ 换成 uni-icons 或 emoji / text 替代，或注释说明 
9. scroll-view 保留横向滚动时加 scroll-x 
10. 根容器用 .page 或 .container，min-height: 100vh → height: 100vh 或用 flex-1 
11. 去掉 page {} 全局样式，全部放 scoped 
12. 响应式：不要用媒体查询，用 rpx + flex 自适应 
13. 如果有 computed / ref 数据（如 progressWidth），保留并适配 
14. 保持 <script setup> 写法，import 必要的 uni-app hooks（如 onLoad, onShow） 
15. 最后输出**完整 .vue 文件**（template + script setup + style lang="scss"），不要解释，直接代码。