From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/mp/material/components/ImageTable.vue | 83 +++++++++++++++++++++++++++++++++++++++++
1 files changed, 83 insertions(+), 0 deletions(-)
diff --git a/src/views/mp/material/components/ImageTable.vue b/src/views/mp/material/components/ImageTable.vue
new file mode 100644
index 0000000..52c608f
--- /dev/null
+++ b/src/views/mp/material/components/ImageTable.vue
@@ -0,0 +1,83 @@
+<template>
+ <div class="waterfall" v-loading="props.loading">
+ <div class="waterfall-item" v-for="item in props.list" :key="item.id">
+ <a target="_blank" :href="item.url">
+ <img class="material-img" :src="item.url" />
+ <div class="item-name">{{ item.name }}</div>
+ </a>
+ <el-row justify="center">
+ <el-button
+ type="danger"
+ circle
+ @click="emit('delete', item.id)"
+ v-hasPermi="['mp:material:delete']"
+ >
+ <Icon icon="ep:delete" />
+ </el-button>
+ </el-row>
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+ list: any[]
+ loading: boolean
+}>()
+
+const emit = defineEmits<{
+ (e: 'delete', v: number)
+}>()
+</script>
+
+<style lang="scss" scoped>
+@media (width >= 992px) and (width <= 1300px) {
+ .waterfall {
+ column-count: 3;
+ }
+
+ p {
+ color: red;
+ }
+}
+
+@media (width >= 768px) and (width <= 991px) {
+ .waterfall {
+ column-count: 2;
+ }
+
+ p {
+ color: orange;
+ }
+}
+
+@media (width <= 767px) {
+ .waterfall {
+ column-count: 1;
+ }
+}
+
+.waterfall {
+ width: 100%;
+ column-gap: 10px;
+ column-count: 5;
+ margin-top: 10px;
+
+ /* 鑺嬮亾婧愮爜锛氬鍔� 10px锛岄伩鍏嶉《鐫�涓婇潰 */
+}
+
+.waterfall-item {
+ padding: 10px;
+ margin-bottom: 10px;
+ break-inside: avoid;
+ border: 1px solid #eaeaea;
+}
+
+.material-img {
+ width: 100%;
+}
+
+p {
+ line-height: 30px;
+}
+</style>
--
Gitblit v1.8.0