mirror of
https://gitee.com/hhyykk/ipms-sjy-ui.git
synced 2025-06-19 14:52:00 +08:00
84 lines
1.4 KiB
Vue
84 lines
1.4 KiB
Vue
<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 setup lang="ts">
|
||
const props = defineProps<{
|
||
list: any[]
|
||
loading: boolean
|
||
}>()
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'delete', v: number)
|
||
}>()
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@media (min-width: 992px) and (max-width: 1300px) {
|
||
.waterfall {
|
||
column-count: 3;
|
||
}
|
||
|
||
p {
|
||
color: red;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px) and (max-width: 991px) {
|
||
.waterfall {
|
||
column-count: 2;
|
||
}
|
||
|
||
p {
|
||
color: orange;
|
||
}
|
||
}
|
||
|
||
@media (max-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>
|