|
1
2
3
4
5
6
7
8
9
10
|
<template>
<div :class="['detail-list', size, layout === 'vertical' ? 'vertical': 'horizontal']">
<div v-if="title" class="title">{{ title }}</div>
<a-row>
<slot></slot>
</a-row>
</div>
</template>
<script>
|
|
11
12
13
14
15
16
17
18
19
|
import {Col} from 'ant-design-vue/es/grid/'
const Item = {
name: 'DetailListItem',
props: {
term: {
type: String,
default: '',
required: false
|
|
20
|
},
|
|
21
22
23
24
|
},
inject: {
col: {
type: Number
|
|
25
|
}
|
|
26
27
28
29
30
31
32
33
|
},
render() {
return (
<Col {...{props: responsive[this.col]}}>
<div class="term">{this.$props.term}</div>
<div class="content">{this.$slots.default}</div>
</Col>
)
|
|
34
|
}
|
|
35
|
}
|
|
36
|
|
|
37
38
39
40
41
42
|
const responsive = {
1: {xs: 24},
2: {xs: 24, sm: 12},
3: {xs: 24, sm: 12, md: 8},
4: {xs: 24, sm: 12, md: 6}
}
|
|
43
|
|
|
44
45
46
47
48
49
50
51
52
53
54
|
export default {
name: "DetailList",
Item: Item,
components: {
Col
},
props: {
title: {
type: String,
default: '',
required: false
|
|
55
|
},
|
|
56
57
58
59
|
col: {
type: Number,
required: false,
default: 3
|
|
60
|
},
|
|
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
size: {
type: String,
required: false,
default: 'large'
},
layout: {
type: String,
required: false,
default: 'horizontal'
}
},
provide() {
return {
col: this.col > 4 ? 4 : this.col
|
|
75
76
|
}
}
|
|
77
|
}
|
|
78
79
80
81
|
</script>
<style lang="less">
|
|
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
.detail-list {
.title {
color: rgba(0, 0, 0, .85);
font-size: 14px;
font-weight: 500;
margin-bottom: 16px;
}
.term {
color: rgba(0, 0, 0, .85);
display: table-cell;
line-height: 20px;
margin-right: 8px;
padding-bottom: 16px;
white-space: nowrap;
&:after {
content: ":";
margin: 0 8px 0 2px;
position: relative;
top: -.5px;
}
}
.content {
color: rgba(0, 0, 0, .65);
display: table-cell;
line-height: 22px;
padding-bottom: 16px;
width: 100%;
}
&.small {
|
|
116
117
118
|
.title {
font-size: 14px;
|
|
119
120
121
|
color: rgba(0, 0, 0, .65);
font-weight: normal;
margin-bottom: 12px;
|
|
122
123
|
}
|
|
124
125
|
.term, .content {
padding-bottom: 8px;
|
|
126
|
}
|
|
127
|
}
|
|
128
|
|
|
129
130
|
&.large {
.term, .content {
|
|
131
132
133
|
padding-bottom: 16px;
}
|
|
134
135
|
.title {
font-size: 16px;
|
|
136
|
}
|
|
137
|
}
|
|
138
|
|
|
139
140
141
|
&.vertical {
.term {
padding-bottom: 8px;
|
|
142
143
|
}
|
|
144
145
|
.term, .content {
display: block;
|
|
146
147
|
}
}
|
|
148
|
}
|
|
149
|
</style>
|