src/views/core/base/equipment/components/AssetsUpload.vue

@@ -7,7 +7,40 @@
 
 <template>
 	<div class="assets-upload">
-        asset upload
+		<section class="operations">
+			<el-button type="text" class="expand-btn" @click="expand = !expand">
+				<i class="el-icon-folder-opened" v-if="expand"></i>
+				<i class="el-icon-folder" v-else></i>
+				展开
+			</el-button>
+			<div class="preview-btn">
+				<i class="el-icon-view"></i>
+				预览
+			</div>
+		</section>
+		<section class="file-area">
+			<el-upload class="equipment-upload" drag action="uploadUrl" multiple>
+				<i class="el-icon-upload"></i>
+				<div class="el-upload__text">
+					<span>将文件拖到此处或</span>
+					<em>点击上传</em>
+				</div>
+				<div class="el-upload__tip" slot="tip">
+					<!-- 只能上传jpg/png文件，且不超过500kb -->
+					some tips....
+				</div>
+			</el-upload>
+			<div
+				class="file-list__item"
+				v-for="n in 9"
+				:key="n"
+				style="background: #f003"
+				:style="{
+					display: n > 4 && !expand ? 'none' : 'block',
+				}">
+				1
+			</div>
+		</section>
 	</div>
 </template>
 
@@ -32,6 +65,7 @@ export default {
 	emits: ['update-filelist'],
 	data() {
 		return {
+			expand: false,
 			fileList: [],
 		};
 	},
@@ -45,11 +79,93 @@ export default {
 					break;
 			}
 		},
-		updateFileList(appendFilelist) { // Array
+		updateFileList(appendFilelist) {
+			// Array
 			this.$emit('update-filelist', this.appendFilelist);
 		},
 	},
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.assets-upload {
+	position: relative;
+}
+
+.operations {
+	position: absolute;
+	top: -36px;
+	right: 0;
+	display: flex;
+	align-items: center;
+}
+
+.expand-btn,
+.preview-btn {
+	font-size: 14px;
+	line-height: 1.2;
+	display: inline-block;
+	padding-left: 20px;
+	cursor: pointer;
+	z-index: 1000;
+}
+
+.expand-btn {
+	margin-right: 12px;
+}
+
+.preview-btn {
+	color: #ccc;
+}
+
+.expand-btn,
+.preview-btn:hover,
+.preview-btn.active {
+	// color: #0042d0;
+	color: #0b58ff;
+}
+
+:deep(.equipment-upload) {
+	background: #ccc4;
+	.el-upload-dragger {
+		width: 188px;
+		height: 128px;
+	}
+
+	.el-icon-upload {
+		margin: 12px 0;
+		font-size: 48px;
+	}
+
+	.el-upload__text {
+		font-size: 12px;
+		line-height: 2px;
+		display: flex;
+		flex-direction: column;
+
+		em {
+			margin-top: 12px;
+		}
+	}
+
+	.el-upload__tip {
+		margin: 0 0 12px;
+		transform: translateY(-12px);
+		user-select: none;
+	}
+}
+
+.file-list {
+	padding: 12px;
+	border: 1px solid #ccc;
+}
+
+// custom
+.file-area {
+	display: grid;
+	grid-template-columns: repeat(5, 188px);
+	grid-auto-rows: 128px;
+	gap: 18px;
+	place-content: center;
+}
+</style>