| 提交 | 用户 | age | ||
| 3a132f | 1 | <template> |
| 31ff05 | 2 | <PageWrapper :class="prefixCls" title="卡片列表"> |
| V | 3 | <template #headerContent> |
| 367341 | 4 | 基于Vue Next, TypeScript, Ant Design Vue实现的一套完整的企业级后台管理系统。 |
| 3a132f | 5 | <div :class="`${prefixCls}__link`"> |
| 陈 | 6 | <a><Icon icon="bx:bx-paper-plane" color="#1890ff" /><span>开始</span></a> |
| 7 | <a><Icon icon="carbon:warning" color="#1890ff" /><span>简介</span></a> | |
| 8 | <a><Icon icon="gg:loadbar-doc" color="#1890ff" /><span>文档</span></a> | |
| 9 | </div> | |
| 31ff05 | 10 | </template> |
| 3a132f | 11 | |
| 陈 | 12 | <div :class="`${prefixCls}__content`"> |
| 367341 | 13 | <a-list> |
| 3a132f | 14 | <a-row :gutter="16"> |
| 陈 | 15 | <template v-for="(item, index) in list" :key="index"> |
| 16 | <a-col :span="6"> | |
| 367341 | 17 | <a-list-item> |
| V | 18 | <a-card :hoverable="true" :class="`${prefixCls}__card`"> |
| 3a132f | 19 | <div :class="`${prefixCls}__card-title`"> |
| 陈 | 20 | <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" /> |
| 21 | {{ item.title }} | |
| 22 | </div> | |
| 23 | <div :class="`${prefixCls}__card-detail`"> | |
| 367341 | 24 | 基于Vue Next, TypeScript, Ant Design Vue实现的一套完整的企业级后台管理系统 |
| 3a132f | 25 | </div> |
| 367341 | 26 | </a-card> |
| V | 27 | </a-list-item> |
| 3a132f | 28 | </a-col> |
| 陈 | 29 | </template> |
| 30 | </a-row> | |
| 367341 | 31 | </a-list> |
| 3a132f | 32 | </div> |
| 31ff05 | 33 | </PageWrapper> |
| 3a132f | 34 | </template> |
| 陈 | 35 | <script lang="ts"> |
| 36 | import { defineComponent } from 'vue'; | |
| 37 | import Icon from '/@/components/Icon/index'; | |
| 38 | import { cardList } from './data'; | |
| 31ff05 | 39 | import { PageWrapper } from '/@/components/Page'; |
| 6392b7 | 40 | import { Card, Row, Col, List } from 'ant-design-vue'; |
| 3a132f | 41 | |
| 陈 | 42 | export default defineComponent({ |
| 6392b7 | 43 | components: { |
| V | 44 | Icon, |
| 45 | PageWrapper, | |
| 46 | [Card.name]: Card, | |
| 47 | [List.name]: List, | |
| 48 | [List.Item.name]: List.Item, | |
| 49 | [Row.name]: Row, | |
| 50 | [Col.name]: Col, | |
| 51 | }, | |
| 3a132f | 52 | setup() { |
| 陈 | 53 | return { |
| 54 | prefixCls: 'list-card', | |
| 55 | list: cardList, | |
| 56 | }; | |
| 57 | }, | |
| 58 | }); | |
| 59 | </script> | |
| 60 | <style lang="less" scoped> | |
| 61 | .list-card { | |
| 62 | &__link { | |
| 63 | margin-top: 10px; | |
| 64 | font-size: 14px; | |
| 65 | ||
| 66 | a { | |
| 67 | margin-right: 30px; | |
| 68 | } | |
| 69 | ||
| 70 | span { | |
| 71 | margin-left: 5px; | |
| 72 | } | |
| 73 | } | |
| 74 | ||
| 75 | &__card { | |
| 76 | width: 100%; | |
| 77 | margin-bottom: -8px; | |
| 78 | ||
| 79 | .ant-card-body { | |
| 80 | padding: 16px; | |
| 81 | } | |
| 82 | ||
| 83 | &-title { | |
| 84 | margin-bottom: 5px; | |
| 85 | font-size: 16px; | |
| 86 | font-weight: 500; | |
| 87 | color: rgba(0, 0, 0, 0.85); | |
| 88 | ||
| 89 | .icon { | |
| 90 | margin-top: -5px; | |
| 91 | margin-right: 10px; | |
| 92 | font-size: 38px !important; | |
| 93 | } | |
| 94 | } | |
| 95 | ||
| 96 | &-detail { | |
| 97 | padding-top: 10px; | |
| 98 | padding-left: 30px; | |
| 99 | font-size: 14px; | |
| 100 | color: rgba(0, 0, 0, 0.5); | |
| 101 | } | |
| 102 | } | |
| 103 | } | |
| 104 | </style> | |
