Showing
1 changed file
with
22 additions
and
18 deletions
1 | 1 | <script setup lang="ts"> |
2 | - import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue'; | |
2 | + import { List, Card, Button, PaginationProps, Tooltip, Popover } 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'; |
... | ... | @@ -179,12 +179,27 @@ |
179 | 179 | <Card hoverable> |
180 | 180 | <template #cover> |
181 | 181 | <div class="h-full w-full !flex justify-center items-center text-center p-1"> |
182 | - <img | |
183 | - class="w-full h-36" | |
184 | - alt="example" | |
185 | - :src="item.thumbnail || configurationSrc" | |
186 | - @click="handlePreview(item)" | |
187 | - /> | |
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> | |
188 | 203 | </div> |
189 | 204 | </template> |
190 | 205 | <template class="ant-card-actions" #actions> |
... | ... | @@ -225,17 +240,6 @@ |
225 | 240 | :trigger="['hover']" |
226 | 241 | /> |
227 | 242 | </template> |
228 | - <Card.Meta> | |
229 | - <template #title> | |
230 | - <span class="truncate">{{ item.name }}</span> | |
231 | - </template> | |
232 | - <template #description> | |
233 | - <div class="truncate h-11"> | |
234 | - <div class="truncate">{{ item.organizationDTO.name }}</div> | |
235 | - <div class="truncate">{{ item.remark || '' }} </div> | |
236 | - </div> | |
237 | - </template> | |
238 | - </Card.Meta> | |
239 | 243 | </Card> |
240 | 244 | </List.Item> |
241 | 245 | </template> | ... | ... |