blog的后端代码
view | history | commit | commitdiff
inleft
2022-02-09 9bcb19959eeb9da9bde2561e7278f6d0a55eb151
commit | author | age
9bcb19 1 <template>
I 2   <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
3     <div class="chart-card-header">
4       <div class="meta">
5         <span class="chart-card-title">
6           <slot name="title">
7             {{ title }}
8           </slot>
9         </span>
10         <span class="chart-card-action">
11           <slot name="action"></slot>
12         </span>
13       </div>
14       <div class="total">
15         <slot name="total">
16           <span>{{ typeof total === 'function' && total() || total }}</span>
17         </slot>
18       </div>
19     </div>
20     <div class="chart-card-content">
21       <div class="content-fix">
22         <slot></slot>
23       </div>
24     </div>
25     <div class="chart-card-footer">
26       <div class="field">
27         <slot name="footer"></slot>
28       </div>
29     </div>
30   </a-card>
31 </template>
32
33 <script>
34 export default {
35   name: 'ChartCard',
36   props: {
37     title: {
38       type: String,
39       default: ''
40     },
41     total: {
42       type: [Function, Number, String],
43       required: false,
44       default: null
45     },
46     loading: {
47       type: Boolean,
48       default: false
49     }
50   }
51 }
52 </script>
53
54 <style lang="less" scoped>
55   .chart-card-header {
56     position: relative;
57     overflow: hidden;
58     width: 100%;
59
60     .meta {
61       position: relative;
62       overflow: hidden;
63       width: 100%;
64       color: rgba(0, 0, 0, .45);
65       font-size: 14px;
66       line-height: 22px;
67     }
68   }
69
70   .chart-card-action {
71     cursor: pointer;
72     position: absolute;
73     top: 0;
74     right: 0;
75   }
76
77   .chart-card-footer {
78     border-top: 1px solid #e8e8e8;
79     padding-top: 9px;
80     margin-top: 8px;
81
82     > * {
83       position: relative;
84     }
85
86     .field {
87       white-space: nowrap;
88       overflow: hidden;
89       text-overflow: ellipsis;
90       margin: 0;
91     }
92   }
93
94   .chart-card-content {
95     margin-bottom: 12px;
96     position: relative;
97     height: 46px;
98     width: 100%;
99
100     .content-fix {
101       position: absolute;
102       left: 0;
103       bottom: 0;
104       width: 100%;
105     }
106   }
107
108   .total {
109     overflow: hidden;
110     text-overflow: ellipsis;
111     word-break: break-all;
112     white-space: nowrap;
113     color: #000;
114     margin-top: 4px;
115     margin-bottom: 0;
116     font-size: 30px;
117     line-height: 38px;
118     height: 38px;
119   }
120 </style>