|
|
@@ -1,18 +1,21 @@
|
|
|
# Requirements Confirm Card 布局方案
|
|
|
|
|
|
## 概述
|
|
|
+
|
|
|
本组件提供了两种布局方案用于"制作流程进度>需求沟通"部分的参考图片和CAD图纸上传功能。
|
|
|
|
|
|
## 方案一：简洁并排布局（当前使用）
|
|
|
+
|
|
|
- **文件**: `requirements-confirm-card.html`
|
|
|
- **样式**: `requirements-confirm-card.scss`
|
|
|
-- **特点**:
|
|
|
+- **特点**:
|
|
|
- 文本描述区域独立一行
|
|
|
- 参考图片和CAD图纸并排显示
|
|
|
- 简洁实用的设计风格
|
|
|
- 响应式布局，移动端自动变为单列
|
|
|
|
|
|
## 方案二：美观卡片式布局（备选方案）
|
|
|
+
|
|
|
- **文件**: `requirements-confirm-card-alternative.html`
|
|
|
- **样式**: `requirements-confirm-card-alternative.scss`
|
|
|
- **特点**:
|
|
|
@@ -25,18 +28,22 @@
|
|
|
## 使用方法
|
|
|
|
|
|
### 切换到备选方案
|
|
|
+
|
|
|
如需使用美观的卡片式布局，请按以下步骤操作：
|
|
|
|
|
|
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`
|
|
|
- 支持文件拖拽上传和点击上传
|
|
|
-- 包含文件类型验证和预览功能
|
|
|
+- 包含文件类型验证和预览功能
|
0235711