ap-dev 1.2.21 → 1.2.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -43,12 +43,12 @@
|
|
|
43
43
|
<span class="css-text">flex垂直排 + 水平居中 + 垂直右对齐：</span>flex-col-align-end<br>
|
|
44
44
|
</api-code>
|
|
45
45
|
<br>
|
|
46
|
-
<div>
|
|
47
|
-
<b
|
|
46
|
+
<div style="margin-bottom: 10px;">
|
|
47
|
+
<b>示例：点击【名称】自动复制名称；点击“盒子”显示源码(源码有加兼容处理，实际引用可不加)</b>
|
|
48
48
|
</div>
|
|
49
|
-
<div class="demo-ctn"
|
|
49
|
+
<div class="demo-ctn">
|
|
50
50
|
<div class="demo-text" @click="copyText('flex-center', $event)">flex-center</div>
|
|
51
|
-
<div class="box-ctn flex-center">
|
|
51
|
+
<div class="box-ctn flex-center" @click="showCode('flex-center')">
|
|
52
52
|
<div class="box">1</div>
|
|
53
53
|
<div class="box">2</div>
|
|
54
54
|
<div class="box">3</div>
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
</div>
|
|
57
57
|
<div class="demo-ctn">
|
|
58
58
|
<div class="demo-text" @click="copyText('flex-justify-start', $event)">flex-justify-start</div>
|
|
59
|
-
<div class="box-ctn flex-justify-start">
|
|
59
|
+
<div class="box-ctn flex-justify-start" @click="showCode('flex-justify-start')">
|
|
60
60
|
<div class="box">1</div>
|
|
61
61
|
<div class="box">2</div>
|
|
62
62
|
<div class="box">3</div>
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
</div>
|
|
65
65
|
<div class="demo-ctn">
|
|
66
66
|
<div class="demo-text" @click="copyText('flex-justify-end', $event)">flex-justify-end</div>
|
|
67
|
-
<div class="box-ctn flex-justify-end">
|
|
67
|
+
<div class="box-ctn flex-justify-end" @click="showCode('flex-justify-end')">
|
|
68
68
|
<div class="box">1</div>
|
|
69
69
|
<div class="box">2</div>
|
|
70
70
|
<div class="box">3</div>
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
</div>
|
|
73
73
|
<div class="demo-ctn">
|
|
74
74
|
<div class="demo-text" @click="copyText('flex-justify-between', $event)">flex-justify-between</div>
|
|
75
|
-
<div class="box-ctn flex-justify-between">
|
|
75
|
+
<div class="box-ctn flex-justify-between" @click="showCode('flex-justify-between')">
|
|
76
76
|
<div class="box">1</div>
|
|
77
77
|
<div class="box">2</div>
|
|
78
78
|
<div class="box">3</div>
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
</div>
|
|
81
81
|
<div class="demo-ctn">
|
|
82
82
|
<div class="demo-text" @click="copyText('flex-justify-around', $event)">flex-justify-around</div>
|
|
83
|
-
<div class="box-ctn flex-justify-around">
|
|
83
|
+
<div class="box-ctn flex-justify-around" @click="showCode('flex-justify-around')">
|
|
84
84
|
<div class="box">1</div>
|
|
85
85
|
<div class="box">2</div>
|
|
86
86
|
<div class="box">3</div>
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
</div>
|
|
89
89
|
<div class="demo-ctn">
|
|
90
90
|
<div class="demo-text" @click="copyText('flex-justify-evenly', $event)">flex-justify-evenly</div>
|
|
91
|
-
<div class="box-ctn flex-justify-evenly">
|
|
91
|
+
<div class="box-ctn flex-justify-evenly" @click="showCode('flex-justify-evenly')">
|
|
92
92
|
<div class="box">1</div>
|
|
93
93
|
<div class="box">2</div>
|
|
94
94
|
<div class="box">3</div>
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
</div>
|
|
97
97
|
<div class="demo-ctn">
|
|
98
98
|
<div class="demo-text" @click="copyText('flex-align-start', $event)">flex-align-start</div>
|
|
99
|
-
<div class="box-ctn flex-align-start">
|
|
99
|
+
<div class="box-ctn flex-align-start" @click="showCode('flex-align-start')">
|
|
100
100
|
<div class="box">1</div>
|
|
101
101
|
<div class="box">2</div>
|
|
102
102
|
<div class="box">3</div>
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
</div>
|
|
105
105
|
<div class="demo-ctn">
|
|
106
106
|
<div class="demo-text" @click="copyText('flex-align-end', $event)">flex-align-end</div>
|
|
107
|
-
<div class="box-ctn flex-align-end">
|
|
107
|
+
<div class="box-ctn flex-align-end" @click="showCode('flex-align-end')">
|
|
108
108
|
<div class="box">1</div>
|
|
109
109
|
<div class="box">2</div>
|
|
110
110
|
<div class="box">3</div>
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
<div class="ap-split-line" style="float: left;width: 98%;"/>
|
|
114
114
|
<div class="demo-col-ctn">
|
|
115
115
|
<div class="demo-text" @click="copyText('flex-col-center', $event)">flex-col-center</div>
|
|
116
|
-
<div class="box-col-ctn flex-col-center">
|
|
116
|
+
<div class="box-col-ctn flex-col-center" @click="showCode('flex-col-center')">
|
|
117
117
|
<div class="box">1</div>
|
|
118
118
|
<div class="box">2</div>
|
|
119
119
|
<div class="box">3</div>
|
|
@@ -121,7 +121,7 @@
|
|
|
121
121
|
</div>
|
|
122
122
|
<div class="demo-col-ctn">
|
|
123
123
|
<div class="demo-text" @click="copyText('flex-col-justify-start', $event)">flex-col-justify-start</div>
|
|
124
|
-
<div class="box-col-ctn flex-col-justify-start">
|
|
124
|
+
<div class="box-col-ctn flex-col-justify-start" @click="showCode('flex-col-justify-start')">
|
|
125
125
|
<div class="box">1</div>
|
|
126
126
|
<div class="box">2</div>
|
|
127
127
|
<div class="box">3</div>
|
|
@@ -129,31 +129,34 @@
|
|
|
129
129
|
</div>
|
|
130
130
|
<div class="demo-col-ctn">
|
|
131
131
|
<div class="demo-text" @click="copyText('flex-col-justify-end', $event)">flex-col-justify-end</div>
|
|
132
|
-
<div class="box-col-ctn flex-col-justify-end">
|
|
132
|
+
<div class="box-col-ctn flex-col-justify-end" @click="showCode('flex-col-justify-end')">
|
|
133
133
|
<div class="box">1</div>
|
|
134
134
|
<div class="box">2</div>
|
|
135
135
|
<div class="box">3</div>
|
|
136
136
|
</div>
|
|
137
137
|
</div>
|
|
138
138
|
<div class="demo-col-ctn">
|
|
139
|
-
<div class="demo-text" @click="copyText('flex-col-justify-between', $event)">flex-col-justify-between
|
|
140
|
-
|
|
139
|
+
<div class="demo-text" @click="copyText('flex-col-justify-between', $event)">flex-col-justify-between
|
|
140
|
+
</div>
|
|
141
|
+
<div class="box-col-ctn flex-col-justify-between" @click="showCode('flex-col-justify-between')">
|
|
141
142
|
<div class="box">1</div>
|
|
142
143
|
<div class="box">2</div>
|
|
143
144
|
<div class="box">3</div>
|
|
144
145
|
</div>
|
|
145
146
|
</div>
|
|
146
147
|
<div class="demo-col-ctn">
|
|
147
|
-
<div class="demo-text" @click="copyText('flex-col-justify-around', $event)">flex-col-justify-around
|
|
148
|
-
|
|
148
|
+
<div class="demo-text" @click="copyText('flex-col-justify-around', $event)">flex-col-justify-around
|
|
149
|
+
</div>
|
|
150
|
+
<div class="box-col-ctn flex-col-justify-around" @click="showCode('flex-col-justify-around')">
|
|
149
151
|
<div class="box">1</div>
|
|
150
152
|
<div class="box">2</div>
|
|
151
153
|
<div class="box">3</div>
|
|
152
154
|
</div>
|
|
153
155
|
</div>
|
|
154
156
|
<div class="demo-col-ctn">
|
|
155
|
-
<div class="demo-text" @click="copyText('flex-col-justify-evenly', $event)">flex-col-justify-evenly
|
|
156
|
-
|
|
157
|
+
<div class="demo-text" @click="copyText('flex-col-justify-evenly', $event)">flex-col-justify-evenly
|
|
158
|
+
</div>
|
|
159
|
+
<div class="box-col-ctn flex-col-justify-evenly" @click="showCode('flex-col-justify-evenly')">
|
|
157
160
|
<div class="box">1</div>
|
|
158
161
|
<div class="box">2</div>
|
|
159
162
|
<div class="box">3</div>
|
|
@@ -161,15 +164,15 @@
|
|
|
161
164
|
</div>
|
|
162
165
|
<div class="demo-col-ctn">
|
|
163
166
|
<div class="demo-text" @click="copyText('flex-col-align-start', $event)">flex-col-align-start</div>
|
|
164
|
-
<div class="box-col-ctn flex-col-align-start">
|
|
167
|
+
<div class="box-col-ctn flex-col-align-start" @click="showCode('flex-col-align-start')">
|
|
165
168
|
<div class="box">1</div>
|
|
166
169
|
<div class="box">2</div>
|
|
167
170
|
<div class="box">3</div>
|
|
168
171
|
</div>
|
|
169
172
|
</div>
|
|
170
173
|
<div class="demo-col-ctn">
|
|
171
|
-
<div class="demo-text" @click="copyText('flex-col-align-end
|
|
172
|
-
<div class="box-col-ctn flex-col-align-end ">
|
|
174
|
+
<div class="demo-text" @click="copyText('flex-col-align-end', $event)">flex-col-align-end</div>
|
|
175
|
+
<div class="box-col-ctn flex-col-align-end " @click="showCode('flex-col-align-end')">
|
|
173
176
|
<div class="box">1</div>
|
|
174
177
|
<div class="box">2</div>
|
|
175
178
|
<div class="box">3</div>
|
|
@@ -178,14 +181,13 @@
|
|
|
178
181
|
<div class="ap-split-line" style="float: left;width: 98%;"/>
|
|
179
182
|
<div class="demo-col-ctn">
|
|
180
183
|
<div class="demo-text" @click="copyText('flex-col', $event)">flex-col</div>
|
|
181
|
-
<div class="box-col-ctn flex-col">
|
|
184
|
+
<div class="box-col-ctn flex-col" @click="showCode('flex-col')">
|
|
182
185
|
<div class="box">1</div>
|
|
183
186
|
<div class="box">2</div>
|
|
184
187
|
<div class="box">3</div>
|
|
185
188
|
</div>
|
|
186
189
|
</div>
|
|
187
190
|
</api-content>
|
|
188
|
-
|
|
189
191
|
</div>
|
|
190
192
|
</template>
|
|
191
193
|
|
|
@@ -197,13 +199,345 @@ export default {
|
|
|
197
199
|
name: 'ApiCssFlex',
|
|
198
200
|
components: {ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2},
|
|
199
201
|
data() {
|
|
200
|
-
|
|
201
|
-
|
|
202
|
+
|
|
203
|
+
let boxCode = {
|
|
204
|
+
'flex-center': `.flex-center {
|
|
205
|
+
display: -webkit-box;
|
|
206
|
+
display: -ms-flexbox;
|
|
207
|
+
display: -webkit-flex;
|
|
208
|
+
display: flex;
|
|
209
|
+
|
|
210
|
+
-webkit-box-pack: center;
|
|
211
|
+
-ms-flex-pack: center;
|
|
212
|
+
-webkit-justify-content: center;
|
|
213
|
+
justify-content: center;
|
|
214
|
+
|
|
215
|
+
-webkit-box-align: center;
|
|
216
|
+
-ms-flex-align: center;
|
|
217
|
+
-webkit-align-items: center;
|
|
218
|
+
align-items: center;
|
|
219
|
+
}`,
|
|
220
|
+
|
|
221
|
+
'flex-justify-start': `.flex-justify-start {
|
|
222
|
+
display: -webkit-box;
|
|
223
|
+
display: -ms-flexbox;
|
|
224
|
+
display: -webkit-flex;
|
|
225
|
+
display: flex;
|
|
226
|
+
|
|
227
|
+
-webkit-box-pack: start;
|
|
228
|
+
-ms-flex-pack: start;
|
|
229
|
+
-webkit-justify-content: flex-start;
|
|
230
|
+
justify-content: flex-start;
|
|
231
|
+
|
|
232
|
+
-webkit-box-align: center;
|
|
233
|
+
-ms-flex-align: center;
|
|
234
|
+
-webkit-align-items: center;
|
|
235
|
+
align-items: center;
|
|
236
|
+
}`,
|
|
237
|
+
|
|
238
|
+
'flex-justify-end': `.flex-justify-end {
|
|
239
|
+
display: -webkit-box;
|
|
240
|
+
display: -ms-flexbox;
|
|
241
|
+
display: -webkit-flex;
|
|
242
|
+
display: flex;
|
|
243
|
+
|
|
244
|
+
-webkit-box-pack: end;
|
|
245
|
+
-ms-flex-pack: end;
|
|
246
|
+
-webkit-justify-content: flex-end;
|
|
247
|
+
justify-content: flex-end;
|
|
248
|
+
|
|
249
|
+
-webkit-box-align: center;
|
|
250
|
+
-ms-flex-align: center;
|
|
251
|
+
-webkit-align-items: center;
|
|
252
|
+
align-items: center;
|
|
253
|
+
}`,
|
|
254
|
+
|
|
255
|
+
'flex-justify-between': `.flex-justify-between {
|
|
256
|
+
display: -webkit-box;
|
|
257
|
+
display: -ms-flexbox;
|
|
258
|
+
display: -webkit-flex;
|
|
259
|
+
display: flex;
|
|
260
|
+
|
|
261
|
+
-webkit-box-pack: justify;
|
|
262
|
+
-ms-flex-pack: justify;
|
|
263
|
+
-webkit-justify-content: space-between;
|
|
264
|
+
justify-content: space-between;
|
|
265
|
+
|
|
266
|
+
-webkit-box-align: center;
|
|
267
|
+
-ms-flex-align: center;
|
|
268
|
+
-webkit-align-items: center;
|
|
269
|
+
align-items: center;
|
|
270
|
+
}`,
|
|
271
|
+
|
|
272
|
+
'flex-justify-around': `.flex-justify-around {
|
|
273
|
+
display: -webkit-box;
|
|
274
|
+
display: -ms-flexbox;
|
|
275
|
+
display: -webkit-flex;
|
|
276
|
+
display: flex;
|
|
277
|
+
|
|
278
|
+
-ms-flex-pack: distribute;
|
|
279
|
+
-webkit-justify-content: space-around;
|
|
280
|
+
justify-content: space-around;
|
|
281
|
+
|
|
282
|
+
-webkit-box-align: center;
|
|
283
|
+
-ms-flex-align: center;
|
|
284
|
+
-webkit-align-items: center;
|
|
285
|
+
align-items: center;
|
|
286
|
+
}`,
|
|
287
|
+
|
|
288
|
+
'flex-justify-evenly': `.flex-justify-evenly {
|
|
289
|
+
display: -webkit-box;
|
|
290
|
+
display: -ms-flexbox;
|
|
291
|
+
display: -webkit-flex;
|
|
292
|
+
display: flex;
|
|
293
|
+
|
|
294
|
+
-ms-flex-pack: distribute;
|
|
295
|
+
-webkit-justify-content: space-evenly;
|
|
296
|
+
justify-content: space-evenly;
|
|
297
|
+
|
|
298
|
+
-webkit-box-align: center;
|
|
299
|
+
-ms-flex-align: center;
|
|
300
|
+
-webkit-align-items: center;
|
|
301
|
+
align-items: center;
|
|
302
|
+
}`,
|
|
303
|
+
|
|
304
|
+
'flex-align-start': `.flex-align-start {
|
|
305
|
+
display: -webkit-box;
|
|
306
|
+
display: -ms-flexbox;
|
|
307
|
+
display: -webkit-flex;
|
|
308
|
+
display: flex;
|
|
309
|
+
|
|
310
|
+
-webkit-box-pack: center;
|
|
311
|
+
-ms-flex-pack: center;
|
|
312
|
+
-webkit-justify-content: center;
|
|
313
|
+
justify-content: center;
|
|
314
|
+
|
|
315
|
+
-webkit-box-align: start;
|
|
316
|
+
-ms-flex-align: start;
|
|
317
|
+
-webkit-align-items: flex-start;
|
|
318
|
+
align-items: flex-start;
|
|
319
|
+
}`,
|
|
320
|
+
|
|
321
|
+
'flex-align-end': `.flex-align-end {
|
|
322
|
+
display: -webkit-box;
|
|
323
|
+
display: -ms-flexbox;
|
|
324
|
+
display: -webkit-flex;
|
|
325
|
+
display: flex;
|
|
326
|
+
|
|
327
|
+
-webkit-box-pack: center;
|
|
328
|
+
-ms-flex-pack: center;
|
|
329
|
+
-webkit-justify-content: center;
|
|
330
|
+
justify-content: center;
|
|
331
|
+
|
|
332
|
+
-webkit-box-align: end;
|
|
333
|
+
-ms-flex-align: end;
|
|
334
|
+
-webkit-align-items: flex-end;
|
|
335
|
+
align-items: flex-end;
|
|
336
|
+
}`,
|
|
337
|
+
|
|
338
|
+
'flex-col': `.flex-col {
|
|
339
|
+
display: -webkit-box;
|
|
340
|
+
display: -ms-flexbox;
|
|
341
|
+
display: -webkit-flex;
|
|
342
|
+
display: flex;
|
|
343
|
+
|
|
344
|
+
-webkit-box-orient: vertical;
|
|
345
|
+
-webkit-box-direction: normal;
|
|
346
|
+
-ms-flex-direction: column;
|
|
347
|
+
-webkit-flex-direction: column;
|
|
348
|
+
flex-direction: column;
|
|
349
|
+
}`,
|
|
350
|
+
|
|
351
|
+
'flex-col-center': `.flex-col-center {
|
|
352
|
+
display: -webkit-box;
|
|
353
|
+
display: -ms-flexbox;
|
|
354
|
+
display: -webkit-flex;
|
|
355
|
+
display: flex;
|
|
356
|
+
|
|
357
|
+
-webkit-box-orient: vertical;
|
|
358
|
+
-webkit-box-direction: normal;
|
|
359
|
+
-ms-flex-direction: column;
|
|
360
|
+
-webkit-flex-direction: column;
|
|
361
|
+
flex-direction: column;
|
|
362
|
+
|
|
363
|
+
-webkit-box-pack: center;
|
|
364
|
+
-ms-flex-pack: center;
|
|
365
|
+
-webkit-justify-content: center;
|
|
366
|
+
justify-content: center;
|
|
367
|
+
|
|
368
|
+
-webkit-box-align: center;
|
|
369
|
+
-ms-flex-align: center;
|
|
370
|
+
-webkit-align-items: center;
|
|
371
|
+
align-items: center;
|
|
372
|
+
}`,
|
|
373
|
+
'flex-col-justify-start': `.flex-col-justify-start {
|
|
374
|
+
display: -webkit-box;
|
|
375
|
+
display: -ms-flexbox;
|
|
376
|
+
display: -webkit-flex;
|
|
377
|
+
display: flex;
|
|
378
|
+
|
|
379
|
+
-webkit-box-orient: vertical;
|
|
380
|
+
-webkit-box-direction: normal;
|
|
381
|
+
-ms-flex-direction: column;
|
|
382
|
+
-webkit-flex-direction: column;
|
|
383
|
+
flex-direction: column;
|
|
384
|
+
|
|
385
|
+
-webkit-box-pack: start;
|
|
386
|
+
-ms-flex-pack: start;
|
|
387
|
+
-webkit-justify-content: flex-start;
|
|
388
|
+
justify-content: flex-start;
|
|
389
|
+
|
|
390
|
+
-webkit-box-align: center;
|
|
391
|
+
-ms-flex-align: center;
|
|
392
|
+
-webkit-align-items: center;
|
|
393
|
+
align-items: center;
|
|
394
|
+
}`,
|
|
395
|
+
'flex-col-justify-end': `.flex-col-justify-end {
|
|
396
|
+
display: -webkit-box;
|
|
397
|
+
display: -ms-flexbox;
|
|
398
|
+
display: -webkit-flex;
|
|
399
|
+
display: flex;
|
|
400
|
+
|
|
401
|
+
-webkit-box-orient: vertical;
|
|
402
|
+
-webkit-box-direction: normal;
|
|
403
|
+
-ms-flex-direction: column;
|
|
404
|
+
-webkit-flex-direction: column;
|
|
405
|
+
flex-direction: column;
|
|
406
|
+
|
|
407
|
+
-webkit-box-pack: end;
|
|
408
|
+
-ms-flex-pack: end;
|
|
409
|
+
-webkit-justify-content: flex-end;
|
|
410
|
+
justify-content: flex-end;
|
|
411
|
+
|
|
412
|
+
-webkit-box-align: center;
|
|
413
|
+
-ms-flex-align: center;
|
|
414
|
+
-webkit-align-items: center;
|
|
415
|
+
align-items: center;
|
|
416
|
+
}`,
|
|
417
|
+
'flex-col-justify-around': `.flex-col-justify-around {
|
|
418
|
+
display: -webkit-box;
|
|
419
|
+
display: -ms-flexbox;
|
|
420
|
+
display: -webkit-flex;
|
|
421
|
+
display: flex;
|
|
422
|
+
|
|
423
|
+
-webkit-box-orient: vertical;
|
|
424
|
+
-webkit-box-direction: normal;
|
|
425
|
+
-ms-flex-direction: column;
|
|
426
|
+
-webkit-flex-direction: column;
|
|
427
|
+
flex-direction: column;
|
|
428
|
+
|
|
429
|
+
-ms-flex-pack: distribute;
|
|
430
|
+
-webkit-justify-content: space-around;
|
|
431
|
+
justify-content: space-around;
|
|
432
|
+
|
|
433
|
+
-webkit-box-align: center;
|
|
434
|
+
-ms-flex-align: center;
|
|
435
|
+
-webkit-align-items: center;
|
|
436
|
+
align-items: center;
|
|
437
|
+
}`,
|
|
438
|
+
'flex-col-justify-between': `.flex-col-justify-between {
|
|
439
|
+
display: -webkit-box;
|
|
440
|
+
display: -ms-flexbox;
|
|
441
|
+
display: -webkit-flex;
|
|
442
|
+
display: flex;
|
|
443
|
+
|
|
444
|
+
-webkit-box-orient: vertical;
|
|
445
|
+
-webkit-box-direction: normal;
|
|
446
|
+
-ms-flex-direction: column;
|
|
447
|
+
-webkit-flex-direction: column;
|
|
448
|
+
flex-direction: column;
|
|
449
|
+
|
|
450
|
+
-webkit-box-pack: justify;
|
|
451
|
+
-ms-flex-pack: justify;
|
|
452
|
+
-webkit-justify-content: space-between;
|
|
453
|
+
justify-content: space-between;
|
|
454
|
+
|
|
455
|
+
-webkit-box-align: center;
|
|
456
|
+
-ms-flex-align: center;
|
|
457
|
+
-webkit-align-items: center;
|
|
458
|
+
align-items: center;
|
|
459
|
+
}`,
|
|
460
|
+
'flex-col-justify-evenly': `.flex-col-justify-evenly {
|
|
461
|
+
display: -webkit-box;
|
|
462
|
+
display: -ms-flexbox;
|
|
463
|
+
display: -webkit-flex;
|
|
464
|
+
display: flex;
|
|
465
|
+
|
|
466
|
+
-webkit-box-orient: vertical;
|
|
467
|
+
-webkit-box-direction: normal;
|
|
468
|
+
-ms-flex-direction: column;
|
|
469
|
+
-webkit-flex-direction: column;
|
|
470
|
+
flex-direction: column;
|
|
471
|
+
|
|
472
|
+
-ms-flex-pack: distribute;
|
|
473
|
+
-webkit-justify-content: space-evenly;
|
|
474
|
+
justify-content: space-evenly;
|
|
475
|
+
|
|
476
|
+
-webkit-box-align: center;
|
|
477
|
+
-ms-flex-align: center;
|
|
478
|
+
-webkit-align-items: center;
|
|
479
|
+
align-items: center;
|
|
480
|
+
}`,
|
|
481
|
+
'flex-col-align-start': `.flex-col-align-start {
|
|
482
|
+
display: -webkit-box;
|
|
483
|
+
display: -ms-flexbox;
|
|
484
|
+
display: -webkit-flex;
|
|
485
|
+
display: flex;
|
|
486
|
+
|
|
487
|
+
-webkit-box-orient: vertical;
|
|
488
|
+
-webkit-box-direction: normal;
|
|
489
|
+
-ms-flex-direction: column;
|
|
490
|
+
-webkit-flex-direction: column;
|
|
491
|
+
flex-direction: column;
|
|
492
|
+
|
|
493
|
+
-webkit-box-pack: center;
|
|
494
|
+
-ms-flex-pack: center;
|
|
495
|
+
-webkit-justify-content: center;
|
|
496
|
+
justify-content: center;
|
|
497
|
+
|
|
498
|
+
-webkit-box-align: start;
|
|
499
|
+
-ms-flex-align: start;
|
|
500
|
+
-webkit-align-items: flex-start;
|
|
501
|
+
align-items: flex-start;
|
|
502
|
+
}`,
|
|
503
|
+
|
|
504
|
+
'flex-col-align-end': `.flex-col-align-end {
|
|
505
|
+
display: -webkit-box;
|
|
506
|
+
display: -ms-flexbox;
|
|
507
|
+
display: -webkit-flex;
|
|
508
|
+
display: flex;
|
|
509
|
+
|
|
510
|
+
-webkit-box-orient: vertical;
|
|
511
|
+
-webkit-box-direction: normal;
|
|
512
|
+
-ms-flex-direction: column;
|
|
513
|
+
-webkit-flex-direction: column;
|
|
514
|
+
flex-direction: column;
|
|
515
|
+
|
|
516
|
+
-webkit-box-pack: center;
|
|
517
|
+
-ms-flex-pack: center;
|
|
518
|
+
-webkit-justify-content: center;
|
|
519
|
+
justify-content: center;
|
|
520
|
+
|
|
521
|
+
-webkit-box-align: end;
|
|
522
|
+
-ms-flex-align: end;
|
|
523
|
+
-webkit-align-items: flex-end;
|
|
524
|
+
align-items: flex-end;
|
|
525
|
+
}`,
|
|
526
|
+
}
|
|
527
|
+
return {boxCode}
|
|
202
528
|
},
|
|
203
529
|
methods: {
|
|
204
530
|
copyText(value, event) {
|
|
205
531
|
clipboard(value, event)
|
|
206
532
|
},
|
|
533
|
+
showCode(type) {
|
|
534
|
+
console.log(type);
|
|
535
|
+
let msg = this.boxCode[type]
|
|
536
|
+
|
|
537
|
+
msg = `<div style="line-height:14px;word-break: normal;width: auto; white-space:pre-wrap;word-wrap : break-word ">${msg}</div>`
|
|
538
|
+
|
|
539
|
+
this.$alert(msg, type, {dangerouslyUseHTMLString: true})
|
|
540
|
+
}
|
|
207
541
|
}
|
|
208
542
|
}
|
|
209
543
|
</script>
|
|
@@ -219,12 +553,14 @@ export default {
|
|
|
219
553
|
width: 150px;
|
|
220
554
|
height: 130px;
|
|
221
555
|
}
|
|
556
|
+
|
|
222
557
|
.demo-col-ctn {
|
|
223
558
|
float: left;
|
|
224
559
|
margin-right: 30px;
|
|
225
560
|
height: 200px;
|
|
226
561
|
width: 150px;
|
|
227
562
|
}
|
|
563
|
+
|
|
228
564
|
.demo-text {
|
|
229
565
|
color: #c7254e;
|
|
230
566
|
cursor: pointer;
|
|
@@ -236,12 +572,14 @@ export default {
|
|
|
236
572
|
background-color: #FFF2CC;
|
|
237
573
|
border: 1px solid #BF8F00;
|
|
238
574
|
}
|
|
575
|
+
|
|
239
576
|
.box-col-ctn {
|
|
240
577
|
height: 150px;
|
|
241
578
|
width: 100px;
|
|
242
579
|
background-color: #FFF2CC;
|
|
243
580
|
border: 1px solid #BF8F00;
|
|
244
581
|
}
|
|
582
|
+
|
|
245
583
|
.box {
|
|
246
584
|
width: 30px;
|
|
247
585
|
height: 30px;
|
|
@@ -42,8 +42,10 @@ const iconGroup = [
|
|
|
42
42
|
'group2',
|
|
43
43
|
'example',
|
|
44
44
|
'yingyongmokuai',
|
|
45
|
+
'jichengrenwu',
|
|
45
46
|
'group',
|
|
46
47
|
'zhongxin1',
|
|
48
|
+
'jichengyingyong',
|
|
47
49
|
|
|
48
50
|
'coin',
|
|
49
51
|
'pic-part',
|
|
@@ -59,8 +61,22 @@ const iconGroup = [
|
|
|
59
61
|
'peizhi2',
|
|
60
62
|
'peizhi3',
|
|
61
63
|
'peizhi5',
|
|
62
|
-
'kaifapeizhi',
|
|
63
64
|
|
|
65
|
+
'lanmupeizhi',
|
|
66
|
+
'peizhishujuyuan',
|
|
67
|
+
'caidanpeizhi',
|
|
68
|
+
'configchecklist',
|
|
69
|
+
'peizhiguanli',
|
|
70
|
+
'setconfigure',
|
|
71
|
+
'shijianpeizhi',
|
|
72
|
+
'xiaoxipeizhi',
|
|
73
|
+
'peizhi',
|
|
74
|
+
'quyupeizhi',
|
|
75
|
+
'peizhi6',
|
|
76
|
+
'yunweifuwujicheng',
|
|
77
|
+
'baobiaopeizhi',
|
|
78
|
+
'xitongpeizhi',
|
|
79
|
+
'kaifapeizhi',
|
|
64
80
|
|
|
65
81
|
'set-up',
|
|
66
82
|
'key',
|
|
@@ -317,6 +333,7 @@ const iconGroup = [
|
|
|
317
333
|
'f',
|
|
318
334
|
'tiaojian1',
|
|
319
335
|
'tiaojian2',
|
|
336
|
+
'kuaijiejian'
|
|
320
337
|
]
|
|
321
338
|
}, {
|
|
322
339
|
name: "文档类",
|