# Requirements Confirm Card 布局方案

## 概述

本组件提供了两种布局方案用于"制作流程进度>需求沟通"部分的参考图片和CAD图纸上传功能。

## 方案一：简洁并排布局（当前使用）

- **文件**: `requirements-confirm-card.html`
- **样式**: `requirements-confirm-card.scss`
- **特点**:
  - 文本描述区域独立一行
  - 参考图片和CAD图纸并排显示
  - 简洁实用的设计风格
  - 响应式布局，移动端自动变为单列

## 方案二：美观卡片式布局（备选方案）

- **文件**: `requirements-confirm-card-alternative.html`
- **样式**: `requirements-confirm-card-alternative.scss`
- **特点**:
  - 现代化卡片式设计
  - 渐变色彩和图标装饰
  - 悬停动画效果
  - 深色模式支持
  - 更丰富的视觉层次

## 使用方法

### 切换到备选方案

如需使用美观的卡片式布局，请按以下步骤操作：

1. 将 `requirements-confirm-card-alternative.html` 的内容复制到 `requirements-confirm-card.html`
2. 在组件的 HTML 模板中，将 `materials-section` 的 class 改为 `materials-section alternative-layout`

### 响应式特性

两种方案都支持响应式设计：

- **桌面端**: 参考图片和CAD图纸并排显示
- **移动端**: 自动切换为单列布局

## 技术实现

- 使用 CSS Grid 布局实现响应式设计
- 采用 Angular 控制流指令 `@if` 和 `@for`
- 支持文件拖拽上传和点击上传
- 包含文件类型验证和预览功能
