功能修订

src/components/NoticeUpload.vue

@@ -1,22 +1,24 @@
 <template>
     <div class="notice-upload">
         <!-- 自定义上传附件（自旧前端 oldfront/src/components/uploadFile.vue 适配） -->
-        <Upload
-            :on-success="encloSuccess"
-            :on-remove="encloRemove"
-            :default-file-list="defaultList"
-            :action="uploadFileUrl"
-            :accept="fileType"
-            :multiple="isMultiple"
-            :before-upload="handleUpload"
-            :format="formatArr"
-            :max-size="maxSize"
-            :on-format-error="handleFormatError"
-            :on-exceeded-size="handleExceeded"
-        >
-            <Button><Icon type="ios-cloud-upload-outline"></Icon>选择文件</Button>
-        </Upload>
-        <span class="upload-tip">提示：附件大小不超过{{ maxFileSize }}</span>
+        <div class="upload-row">
+            <Upload
+                :on-success="encloSuccess"
+                :on-remove="encloRemove"
+                :default-file-list="defaultList"
+                :action="uploadFileUrl"
+                :accept="fileType"
+                :multiple="isMultiple"
+                :before-upload="handleUpload"
+                :format="formatArr"
+                :max-size="maxSize"
+                :on-format-error="handleFormatError"
+                :on-exceeded-size="handleExceeded"
+            >
+                <Button><Icon type="ios-cloud-upload-outline"></Icon>选择文件</Button>
+            </Upload>
+            <span class="upload-tip">提示：附件大小不超过{{ maxFileSize }}</span>
+        </div>
     </div>
 </template>
 
@@ -87,12 +89,23 @@ export default {
 
 <style lang="scss" scoped>
 .notice-upload {
-    display: flex;
-    align-items: center;
+    display: block;
+    .upload-row {
+        display: flex;
+        align-items: center;
+    }
     :deep(.ivu-upload) {
         display: inline-flex;
         align-items: center;
     }
+    /* 文件列表整体另起一行，每项独占一行，不再与按钮挤在一起 */
+    :deep(.ivu-upload-list) {
+        display: block;
+        margin-top: 8px;
+    }
+    :deep(.ivu-upload-list-file) {
+        padding: 4px 0;
+    }
     .upload-tip {
         margin-left: 10px;
         color: #f90;