Blame view

src/views/demo/page/list/card/index.vue 2.66 KB
陈小婷 authored
1
<template>
2
3
  <PageWrapper :class="prefixCls" title="卡片列表">
    <template #headerContent>
vben authored
4
      基于Vue Next, TypeScript, Ant Design Vue实现的一套完整的企业级后台管理系统。
陈小婷 authored
5
6
7
      <div :class="`${prefixCls}__link`">
        <a><Icon icon="bx:bx-paper-plane" color="#1890ff" /><span>开始</span></a>
        <a><Icon icon="carbon:warning" color="#1890ff" /><span>简介</span></a>
8
        <a><Icon icon="ion:document-text-outline" color="#1890ff" /><span>文档</span></a>
陈小婷 authored
9
      </div>
10
    </template>
陈小婷 authored
11
12

    <div :class="`${prefixCls}__content`">
vben authored
13
      <a-list>
陈小婷 authored
14
        <a-row :gutter="16">
Vben authored
15
          <template v-for="item in list" :key="item.title">
陈小婷 authored
16
            <a-col :span="6">
vben authored
17
18
              <a-list-item>
                <a-card :hoverable="true" :class="`${prefixCls}__card`">
陈小婷 authored
19
20
21
22
23
                  <div :class="`${prefixCls}__card-title`">
                    <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
                    {{ item.title }}
                  </div>
                  <div :class="`${prefixCls}__card-detail`">
vben authored
24
                    基于Vue Next, TypeScript, Ant Design Vue实现的一套完整的企业级后台管理系统
陈小婷 authored
25
                  </div>
vben authored
26
27
                </a-card>
              </a-list-item>
陈小婷 authored
28
29
30
            </a-col>
          </template>
        </a-row>
vben authored
31
      </a-list>
陈小婷 authored
32
    </div>
33
  </PageWrapper>
陈小婷 authored
34
35
36
37
38
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import Icon from '/@/components/Icon/index';
  import { cardList } from './data';
39
  import { PageWrapper } from '/@/components/Page';
vben authored
40
  import { Card, Row, Col, List } from 'ant-design-vue';
陈小婷 authored
41
42

  export default defineComponent({
vben authored
43
44
45
46
47
48
49
50
51
    components: {
      Icon,
      PageWrapper,
      [Card.name]: Card,
      [List.name]: List,
      [List.Item.name]: List.Item,
      [Row.name]: Row,
      [Col.name]: Col,
    },
陈小婷 authored
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
    setup() {
      return {
        prefixCls: 'list-card',
        list: cardList,
      };
    },
  });
</script>
<style lang="less" scoped>
  .list-card {
    &__link {
      margin-top: 10px;
      font-size: 14px;

      a {
        margin-right: 30px;
      }

      span {
        margin-left: 5px;
      }
    }

    &__card {
      width: 100%;
      margin-bottom: -8px;

      .ant-card-body {
        padding: 16px;
      }

      &-title {
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: 500;
Vben authored
87
        color: @text-color;
陈小婷 authored
88
89
90
91
92
93
94
95
96
97
98
99

        .icon {
          margin-top: -5px;
          margin-right: 10px;
          font-size: 38px !important;
        }
      }

      &-detail {
        padding-top: 10px;
        padding-left: 30px;
        font-size: 14px;
Vben authored
100
        color: @text-color-secondary;
陈小婷 authored
101
102
103
104
      }
    }
  }
</style>