CRM系统前端
查看 | 历史 | 提交 | 提交对比
Vben
2021-04-07 5b8eb4a49a097a47caf491c44df427522ab58daa
提交 | 用户 | age
2f75a9 1 <template>
31ff05 2   <PageWrapper :class="prefixCls" title="标准列表">
2f75a9 3     <div :class="`${prefixCls}__top`">
陈 4       <a-row :gutter="12">
5         <a-col :span="8" :class="`${prefixCls}__top-col`">
6           <div>我的待办</div>
7           <p>8个任务</p>
8         </a-col>
9         <a-col :span="8" :class="`${prefixCls}__top-col`">
10           <div>本周任务平均处理时间</div>
11           <p>32分钟</p>
12         </a-col>
13         <a-col :span="8" :class="`${prefixCls}__top-col`">
14           <div>本周完成任务数</div>
15           <p>24个任务</p>
16         </a-col>
17       </a-row>
18     </div>
19
20     <div :class="`${prefixCls}__content`">
21       <a-list :pagination="pagination">
22         <template v-for="item in list" :key="item.id">
23           <a-list-item class="list">
24             <a-list-item-meta>
25               <template #avatar>
26                 <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
27               </template>
28               <template #title>
29                 <span>{{ item.title }}</span>
30                 <div class="extra" v-if="item.extra">
31                   {{ item.extra }}
32                 </div>
33               </template>
34               <template #description>
9edc28 35                 <div class="description">
V 36                   {{ item.description }}
37                 </div>
2f75a9 38                 <div class="info">
陈 39                   <div><span>Owner</span>{{ item.author }}</div>
40                   <div><span>开始时间</span>{{ item.datetime }}</div>
41                 </div>
42                 <div class="progress">
43                   <Progress :percent="item.percent" status="active" />
44                 </div>
45               </template>
46             </a-list-item-meta>
47           </a-list-item>
48         </template>
49       </a-list>
50     </div>
31ff05 51   </PageWrapper>
2f75a9 52 </template>
陈 53 <script lang="ts">
6392b7 54   import { Progress, Row, Col } from 'ant-design-vue';
2f75a9 55   import { defineComponent } from 'vue';
陈 56   import Icon from '/@/components/Icon/index';
57   import { cardList } from './data';
31ff05 58   import { PageWrapper } from '/@/components/Page';
6392b7 59   import { List } from 'ant-design-vue';
2f75a9 60
陈 61   export default defineComponent({
6392b7 62     components: {
V 63       Icon,
64       Progress,
65       PageWrapper,
66       [List.name]: List,
67       [List.Item.name]: List.Item,
68       AListItemMeta: List.Item.Meta,
69       [Row.name]: Row,
70       [Col.name]: Col,
71     },
2f75a9 72     setup() {
陈 73       return {
74         prefixCls: 'list-basic',
75         list: cardList,
76         pagination: {
77           show: true,
78           pageSize: 3,
79         },
80       };
81     },
82   });
83 </script>
84 <style lang="less" scoped>
85   .list-basic {
86     &__top {
87       padding: 24px;
88       text-align: center;
5b8eb4 89       background: @component-background;
2f75a9 90
陈 91       &-col {
92         &:not(:last-child) {
5b8eb4 93           border-right: 1px dashed @border-color-base;
2f75a9 94         }
陈 95
96         div {
97           margin-bottom: 12px;
98           font-size: 14px;
99           line-height: 22px;
5b8eb4 100           color: @text-color;
2f75a9 101         }
陈 102
103         p {
104           margin: 0;
105           font-size: 24px;
106           line-height: 32px;
5b8eb4 107           color: @text-color;
2f75a9 108         }
陈 109       }
110     }
111
112     &__content {
113       padding: 24px;
31ff05 114       margin-top: 12px;
5b8eb4 115       background: @component-background;
2f75a9 116
陈 117       .list {
118         position: relative;
119       }
120
121       .icon {
122         font-size: 40px !important;
123       }
124
125       .extra {
126         position: absolute;
127         top: 20px;
128         right: 15px;
129         font-weight: normal;
5b8eb4 130         color: @primary-color;
2f75a9 131         cursor: pointer;
陈 132       }
133
134       .description {
135         display: inline-block;
136         width: 40%;
137       }
138
139       .info {
140         display: inline-block;
141         width: 30%;
142         text-align: center;
143
144         div {
145           display: inline-block;
146           padding: 0 20px;
147
148           span {
149             display: block;
150           }
151         }
152       }
153
154       .progress {
155         display: inline-block;
156         width: 15%;
157         vertical-align: top;
158       }
159     }
160   }
161 </style>