|
1
|
1
|
<script setup lang="ts">
|
|
2
|
|
- import { List, Card, Button, PaginationProps, Tooltip, Popover } from 'ant-design-vue';
|
|
|
2
|
+ import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';
|
|
3
|
3
|
import { ReloadOutlined } from '@ant-design/icons-vue';
|
|
4
|
4
|
import { onMounted, reactive, ref, unref } from 'vue';
|
|
5
|
5
|
import { OrganizationIdTree, useResetOrganizationTree } from '../common/organizationIdTree';
|
|
...
|
...
|
@@ -176,30 +176,28 @@ |
|
176
|
176
|
</template>
|
|
177
|
177
|
<template #renderItem="{ item }">
|
|
178
|
178
|
<List.Item>
|
|
179
|
|
- <Card hoverable>
|
|
|
179
|
+ <Card>
|
|
180
|
180
|
<template #cover>
|
|
181
|
|
- <div class="h-full w-full !flex justify-center items-center text-center p-1">
|
|
182
|
|
- <Popover title="大屏设计器内容" trigger="hover">
|
|
183
|
|
- <template #content>
|
|
184
|
|
- <Card.Meta>
|
|
185
|
|
- <template #title>
|
|
186
|
|
- <span class="truncate">{{ item.name }}</span>
|
|
187
|
|
- </template>
|
|
188
|
|
- <template #description>
|
|
189
|
|
- <div class="truncate h-11">
|
|
190
|
|
- <div class="truncate">{{ item.organizationDTO.name }}</div>
|
|
191
|
|
- <div class="truncate">{{ item.remark || '' }} </div>
|
|
192
|
|
- </div>
|
|
193
|
|
- </template>
|
|
194
|
|
- </Card.Meta>
|
|
195
|
|
- </template>
|
|
196
|
|
- <img
|
|
197
|
|
- class="w-full h-36"
|
|
198
|
|
- alt="example"
|
|
199
|
|
- :src="item.thumbnail || configurationSrc"
|
|
200
|
|
- @click="handlePreview(item)"
|
|
201
|
|
- />
|
|
202
|
|
- </Popover>
|
|
|
181
|
+ <div class="h-full w-full hover-show-modal-content">
|
|
|
182
|
+ <img
|
|
|
183
|
+ style="position: relative"
|
|
|
184
|
+ class="w-full h-45 hover-show-modal"
|
|
|
185
|
+ alt="example"
|
|
|
186
|
+ :src="item.thumbnail || configurationSrc"
|
|
|
187
|
+ @click="handlePreview(item)"
|
|
|
188
|
+ />
|
|
|
189
|
+ <div class="masker-content">
|
|
|
190
|
+ <div class="masker-text">
|
|
|
191
|
+ <div
|
|
|
192
|
+ ><span>{{ item.name }}</span></div
|
|
|
193
|
+ >
|
|
|
194
|
+ <div>
|
|
|
195
|
+ <span class="masker-text-org"
|
|
|
196
|
+ >所属组织：{{ item.organizationDTO.name }}</span
|
|
|
197
|
+ >
|
|
|
198
|
+ </div>
|
|
|
199
|
+ </div>
|
|
|
200
|
+ </div>
|
|
203
|
201
|
</div>
|
|
204
|
202
|
</template>
|
|
205
|
203
|
<template class="ant-card-actions" #actions>
|
|
...
|
...
|
@@ -265,4 +263,45 @@ |
|
265
|
263
|
.configuration-list:deep(.ant-list-empty-text) {
|
|
266
|
264
|
@apply w-full h-full flex justify-center items-center;
|
|
267
|
265
|
}
|
|
|
266
|
+
|
|
|
267
|
+ :deep(.ant-card-body) {
|
|
|
268
|
+ display: none;
|
|
|
269
|
+ }
|
|
|
270
|
+
|
|
|
271
|
+ .masker-content {
|
|
|
272
|
+ opacity: 0;
|
|
|
273
|
+ z-index: 1000;
|
|
|
274
|
+ width: 100%;
|
|
|
275
|
+ height: 11.25rem;
|
|
|
276
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
277
|
+ position: absolute;
|
|
|
278
|
+ transition: opacity 0.5;
|
|
|
279
|
+ pointer-events: none;
|
|
|
280
|
+ top: 0;
|
|
|
281
|
+ left: 0;
|
|
|
282
|
+ right: 0;
|
|
|
283
|
+ bottom: 0;
|
|
|
284
|
+
|
|
|
285
|
+ .masker-text {
|
|
|
286
|
+ color: #fff;
|
|
|
287
|
+ font-size: 16px;
|
|
|
288
|
+ display: flex;
|
|
|
289
|
+ flex-direction: column;
|
|
|
290
|
+ align-items: center;
|
|
|
291
|
+ justify-content: center;
|
|
|
292
|
+ line-height: 2.5rem;
|
|
|
293
|
+ margin: 4rem 0;
|
|
|
294
|
+
|
|
|
295
|
+ .masker-text-org {
|
|
|
296
|
+ font-size: 12px;
|
|
|
297
|
+ position: absolute;
|
|
|
298
|
+ bottom: 0;
|
|
|
299
|
+ left: 0.8rem;
|
|
|
300
|
+ }
|
|
|
301
|
+ }
|
|
|
302
|
+ }
|
|
|
303
|
+
|
|
|
304
|
+ .hover-show-modal-content:hover > .masker-content {
|
|
|
305
|
+ opacity: 1;
|
|
|
306
|
+ }
|
|
268
|
307
|
</style> |
...
|
...
|
|
