inleft
2022-08-02 70097d968795fcc872095c42f7b7bba618baaaf9
commit | author | age
9bcb19 1 <template>
I 2   <div class="result">
3     <div>
4       <a-icon :class="{ 'icon': true, [`${type}`]: true }" :type="localIsSuccess ? 'check-circle' : 'close-circle'"/>
5     </div>
6     <div class="title">
7       <slot name="title">
8         {{ title }}
9       </slot>
10     </div>
11     <div class="description">
12       <slot name="description">
13         {{ description }}
14       </slot>
15     </div>
16     <div class="extra" v-if="$slots.default">
17       <slot></slot>
18     </div>
19     <div class="action" v-if="$slots.action">
20       <slot name="action"></slot>
21     </div>
22   </div>
23 </template>
24
25 <script>
26 const resultEnum = ['success', 'error']
27
28 export default {
29   name: 'Result',
30   props: {
31     /** @Deprecated */
32     isSuccess: {
33       type: Boolean,
34       default: false
35     },
36     type: {
37       type: String,
38       default: resultEnum[0],
39       validator (val) {
40         return (val) => resultEnum.includes(val)
41       }
42     },
43     title: {
44       type: String,
45       default: ''
46     },
47     description: {
48       type: String,
49       default: ''
50     }
51   },
52   computed: {
53     localIsSuccess: function () {
54       return this.type === resultEnum[0]
55     }
56   }
57 }
58 </script>
59
60 <style lang="less" scoped>
61   .result {
62     text-align: center;
63     width: 72%;
64     margin: 0 auto;
65     padding: 24px 0 8px;
66
67     .icon {
68       font-size: 72px;
69       line-height: 72px;
70       margin-bottom: 24px;
71     }
72     .success {
73       color: #52c41a;
74     }
75     .error {
76       color: red;
77     }
78     .title {
79       font-size: 24px;
80       color: rgba(0, 0, 0, .85);
81       font-weight: 500;
82       line-height: 32px;
83       margin-bottom: 16px;
84     }
85     .description {
86       font-size: 14px;
87       line-height: 22px;
88       color: rgba(0, 0, 0, 0.45);
89       margin-bottom: 24px;
90     }
91     .extra {
92       background: #fafafa;
93       padding: 24px 40px;
94       border-radius: 2px;
95       text-align: left;
96     }
97     .action {
98       margin-top: 32px;
99     }
100   }
101
102   .mobile {
103     .result {
104       width: 100%;
105       margin: 0 auto;
106       padding: unset;
107     }
108   }
109 </style>