|
|
@@ -53,15 +53,17 @@
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="上传房屋图纸" required>
|
|
|
- <el-upload
|
|
|
- v-model:file-list="fileList"
|
|
|
- list-type="picture-card"
|
|
|
- :disabled="true"
|
|
|
- :on-preview="handlePictureCardPreview"
|
|
|
- :on-remove="handleRemove"
|
|
|
- >
|
|
|
- <el-icon><Plus /></el-icon>
|
|
|
- </el-upload>
|
|
|
+ <div class="upload-wrapper">
|
|
|
+ <el-upload
|
|
|
+ v-model:file-list="fileList"
|
|
|
+ list-type="picture-card"
|
|
|
+ :disabled="true"
|
|
|
+ :on-preview="handlePictureCardPreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ >
|
|
|
+ <el-icon><Plus /></el-icon>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
<div class="upload-tip">({{ fileList.length }}/9)</div>
|
|
|
</el-form-item>
|
|
|
|
|
|
@@ -319,14 +321,38 @@ onMounted(() => {
|
|
|
border-top: 1px solid #ebeef5;
|
|
|
}
|
|
|
|
|
|
- :deep(.el-upload--picture-card) {
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- }
|
|
|
+ .upload-wrapper {
|
|
|
+ :deep(.el-upload) {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-upload-list--picture-card) {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 10px;
|
|
|
+ margin: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-upload--picture-card) {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
+ display: none; // 禁用状态下隐藏上传按钮
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-upload-list--picture-card .el-upload-list__item) {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
+ aspect-ratio: 1;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
|
|
|
- :deep(.el-upload-list--picture-card .el-upload-list__item) {
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
+ // 确保图片缩略图正确显示
|
|
|
+ :deep(.el-upload-list__item-thumbnail) {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
