1 |
|
2 | .m-pluginbox {
|
3 | display: flex;
|
4 | flex-wrap: wrap;
|
5 | max-width: 10.24rem;
|
6 | }
|
7 | .m-pluginbox-item {
|
8 | flex-basis: 100%;
|
9 | margin-bottom: 36px;
|
10 | padding: 16px;
|
11 | }
|
12 | .m-pluginbox-item .title {
|
13 | font-size: 24px;
|
14 | color: #1890ff;
|
15 | }
|
16 | .m-pluginbox-item .desc {
|
17 | margin-top: 16px;
|
18 | }
|
19 |
|
20 | @media screen and (min-width: 600px) {
|
21 | .m-pluginbox-item {
|
22 | flex-basis: 50%;
|
23 | margin-bottom: 48px;
|
24 | }
|
25 | }
|
26 | @media screen and (min-width: 960px) {
|
27 | .m-pluginbox-item {
|
28 | flex-basis: 33.3%;
|
29 | margin-bottom: 48px;
|
30 | }
|
31 | }
|
32 |
|
33 |
|
34 | .filebox {
|
35 | display: flex;
|
36 | flex-wrap: wrap;
|
37 | justify-content: space-between;
|
38 | }
|
39 | .filebox .item {
|
40 | flex: 1 0 100%;
|
41 | border-radius: 4px;
|
42 | padding: 16px 24px;
|
43 | margin-bottom: 32px;
|
44 | cursor: pointer;
|
45 | transition: all .2s;
|
46 | box-shadow: 0 1px 2px 0 rgba(43, 59, 93, 0.29);
|
47 | }
|
48 | .filebox .item:hover {
|
49 | box-shadow: 0 2px 4px 0 rgba(43, 59, 93, 0.29);
|
50 | }
|
51 | .filebox .title {
|
52 | margin-top: 16px;
|
53 | margin-bottom: 8px;
|
54 | }
|
55 |
|
56 | @media screen and (min-width: 960px) {
|
57 | .filebox .item {
|
58 | flex: 0 1 48%;
|
59 | }
|
60 | } |
\ | No newline at end of file |