Showing
1 changed file
with
22 additions
and
18 deletions
1 | <script setup lang="ts"> | 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 | import { ReloadOutlined } from '@ant-design/icons-vue'; | 3 | import { ReloadOutlined } from '@ant-design/icons-vue'; |
4 | import { onMounted, reactive, ref, unref } from 'vue'; | 4 | import { onMounted, reactive, ref, unref } from 'vue'; |
5 | import { OrganizationIdTree, useResetOrganizationTree } from '../common/organizationIdTree'; | 5 | import { OrganizationIdTree, useResetOrganizationTree } from '../common/organizationIdTree'; |
@@ -179,12 +179,27 @@ | @@ -179,12 +179,27 @@ | ||
179 | <Card hoverable> | 179 | <Card hoverable> |
180 | <template #cover> | 180 | <template #cover> |
181 | <div class="h-full w-full !flex justify-center items-center text-center p-1"> | 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 | </div> | 203 | </div> |
189 | </template> | 204 | </template> |
190 | <template class="ant-card-actions" #actions> | 205 | <template class="ant-card-actions" #actions> |
@@ -225,17 +240,6 @@ | @@ -225,17 +240,6 @@ | ||
225 | :trigger="['hover']" | 240 | :trigger="['hover']" |
226 | /> | 241 | /> |
227 | </template> | 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 | </Card> | 243 | </Card> |
240 | </List.Item> | 244 | </List.Item> |
241 | </template> | 245 | </template> |