| 提交 | 用户 | age | ||
| 4cb378 | 1 | <template> |
| 31ff05 | 2 | <PageWrapper :class="prefixCls" title="搜索列表"> |
| V | 3 | <template #headerContent> |
| 4cb378 | 4 | <BasicForm |
| 陈 | 5 | :class="`${prefixCls}__header-form`" |
| 6 | :labelWidth="100" | |
| 7 | :schemas="schemas" | |
| 8 | :showActionButtonGroup="false" | |
| 9 | /> | |
| 31ff05 | 10 | </template> |
| 4cb378 | 11 | |
| 陈 | 12 | <div :class="`${prefixCls}__container`"> |
| 13 | <a-list> | |
| 14 | <template v-for="item in list" :key="item.id"> | |
| 15 | <a-list-item> | |
| 16 | <a-list-item-meta> | |
| 17 | <template #description> | |
| 9edc28 | 18 | <div :class="`${prefixCls}__content`"> |
| V | 19 | {{ item.content }} |
| 20 | </div> | |
| 4cb378 | 21 | <div :class="`${prefixCls}__action`"> |
| 陈 | 22 | <template v-for="(action, index) in actions" :key="index"> |
| 23 | <div :class="`${prefixCls}__action-item`"> | |
| 24 | <Icon | |
| 25 | v-if="action.icon" | |
| 26 | :class="`${prefixCls}__action-icon`" | |
| 27 | :icon="action.icon" | |
| 28 | :color="action.color" | |
| 29 | /> | |
| 30 | {{ action.text }} | |
| 31 | </div> | |
| 32 | </template> | |
| 33 | <span :class="`${prefixCls}__time`">{{ item.time }}</span> | |
| 34 | </div> | |
| 35 | </template> | |
| 36 | <template #title> | |
| 9edc28 | 37 | <p :class="`${prefixCls}__title`"> |
| V | 38 | {{ item.title }} |
| 39 | </p> | |
| 4cb378 | 40 | <div> |
| 陈 | 41 | <template v-for="(tag, index) in item.description" :key="index"> |
| 9edc28 | 42 | <Tag class="mb-2"> |
| V | 43 | {{ tag }} |
| 44 | </Tag> | |
| 4cb378 | 45 | </template> |
| 陈 | 46 | </div> |
| 47 | </template> | |
| 48 | </a-list-item-meta> | |
| 49 | </a-list-item> | |
| 50 | </template> | |
| 51 | </a-list> | |
| 52 | </div> | |
| 31ff05 | 53 | </PageWrapper> |
| 4cb378 | 54 | </template> |
| 陈 | 55 | <script lang="ts"> |
| 56 | import { Tag } from 'ant-design-vue'; | |
| 57 | import { defineComponent } from 'vue'; | |
| 58 | import Icon from '/@/components/Icon/index'; | |
| 59 | import { BasicForm } from '/@/components/Form/index'; | |
| 60 | import { actions, searchList, schemas } from './data'; | |
| 31ff05 | 61 | import { PageWrapper } from '/@/components/Page'; |
| 6392b7 | 62 | import { List } from 'ant-design-vue'; |
| 4cb378 | 63 | |
| 陈 | 64 | export default defineComponent({ |
| 6392b7 | 65 | components: { |
| V | 66 | Icon, |
| 67 | Tag, | |
| 68 | BasicForm, | |
| 69 | PageWrapper, | |
| 70 | [List.name]: List, | |
| 71 | [List.Item.name]: List.Item, | |
| 72 | AListItemMeta: List.Item.Meta, | |
| 73 | }, | |
| 4cb378 | 74 | setup() { |
| 陈 | 75 | return { |
| 76 | prefixCls: 'list-search', | |
| 77 | list: searchList, | |
| 78 | actions, | |
| 79 | schemas, | |
| 80 | }; | |
| 81 | }, | |
| 82 | }); | |
| 83 | </script> | |
| 84 | <style lang="less" scoped> | |
| 85 | .list-search { | |
| 86 | &__header { | |
| 87 | &-form { | |
| 88 | margin-bottom: -16px; | |
| 89 | } | |
| 90 | } | |
| 91 | ||
| 92 | &__container { | |
| 93 | padding: 12px; | |
| 5b8eb4 | 94 | background: @component-background; |
| 4cb378 | 95 | } |
| 陈 | 96 | |
| 97 | &__title { | |
| 98 | margin-bottom: 12px; | |
| 99 | font-size: 18px; | |
| 100 | } | |
| 101 | ||
| 102 | &__content { | |
| 5b8eb4 | 103 | color: @text-color-secondary; |
| 4cb378 | 104 | } |
| 陈 | 105 | |
| 106 | &__action { | |
| 107 | margin-top: 10px; | |
| 108 | ||
| 109 | &-item { | |
| 110 | display: inline-block; | |
| 111 | padding: 0 16px; | |
| 5b8eb4 | 112 | color: @text-color-secondary; |
| 4cb378 | 113 | |
| 陈 | 114 | &:nth-child(1) { |
| 115 | padding-left: 0; | |
| 116 | } | |
| 117 | ||
| 118 | &:nth-child(1), | |
| 119 | &:nth-child(2) { | |
| 5b8eb4 | 120 | border-right: 1px solid @border-color-base; |
| 4cb378 | 121 | } |
| 陈 | 122 | } |
| 123 | ||
| 124 | &-icon { | |
| 125 | margin-right: 3px; | |
| 126 | } | |
| 127 | } | |
| 128 | ||
| 129 | &__time { | |
| 130 | position: absolute; | |
| 131 | right: 20px; | |
| 132 | color: rgba(0, 0, 0, 0.45); | |
| 133 | } | |
| 134 | } | |
| 135 | </style> | |
