Skip to content

Commit 0267e4a

Browse files
ForteScarletForteScarlet
committed
grid
1 parent 6bd9477 commit 0267e4a

File tree

1 file changed

+64
-57
lines changed

1 file changed

+64
-57
lines changed

‎src/components/Index.vue

Lines changed: 64 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -9,59 +9,64 @@
99
<n-layout position="absolute" style="top: 150px; bottom: 64px" :native-scrollbar="false"
1010
:content-style="layoutCenterContentStyle">
1111

12-
<n-flex vertical>
13-
<HorizontalAdUnit />
14-
<n-collapse :default-expanded-names="[...collapseActions]" @item-header-click="handleItemHeaderClick">
15-
<n-card embedded :bordered="false">
16-
<n-collapse-item name="KDoc">
17-
<RepoDocCards/>
18-
<template #header>
19-
<n-divider title-placement="left" style="user-select: none">
20-
<Icon>
21-
<BookOutline/>
22-
</Icon> &nbsp;
23-
<n-text strong style="font-size: 19px">KDoc</n-text>
24-
</n-divider>
25-
<n-divider title-placement="center">
26-
<n-collapse-transition :show="!collapseActions.has('KDoc')">
27-
<n-text italic depth="3" style="user-select: none; font-size: 6px">点击展开</n-text>
28-
</n-collapse-transition>
29-
</n-divider>
30-
<n-divider title-placement="right">
31-
<n-collapse-transition :show="collapseActions.has('KDoc')">
32-
<n-text italic depth="3" style="user-select: none; font-size: 13px">Javadoc的好朋友</n-text>
33-
</n-collapse-transition>
34-
</n-divider>
35-
</template>
36-
</n-collapse-item>
37-
</n-card>
38-
<n-card embedded :bordered="false">
39-
<n-collapse-item name="作品展示">
40-
<ShowCards/>
41-
<template #header>
42-
<n-divider title-placement="left" style="user-select: none">
43-
<n-text strong style="font-size: 19px">作品展示</n-text>
44-
&nbsp;
45-
<Icon>
46-
<HeartOutline/>
47-
</Icon>
48-
</n-divider>
49-
<n-divider title-placement="center">
50-
<n-collapse-transition :show="!collapseActions.has('作品展示')">
51-
<n-text italic depth="3" style="user-select: none; font-size: 6px">点击展开</n-text>
52-
</n-collapse-transition>
53-
</n-divider>
54-
<n-divider title-placement="right">
55-
<n-collapse-transition :show="collapseActions.has('作品展示')">
56-
<n-text italic depth="3" style="user-select: none; font-size: 13px">看看大家的好宝贝</n-text>
57-
</n-collapse-transition>
58-
</n-divider>
59-
</template>
60-
</n-collapse-item>
61-
</n-card>
62-
</n-collapse>
63-
</n-flex>
64-
12+
<n-grid cols="8" item-responsive responsive="screen">
13+
<n-grid-item span="0 m:1 l:1 xl:2"></n-grid-item>
14+
<n-grid-item span="8 m:6 l:6 xl:4">
15+
<n-flex vertical>
16+
<HorizontalAdUnit />
17+
<n-collapse :default-expanded-names="[...collapseActions]" @item-header-click="handleItemHeaderClick">
18+
<n-card embedded :bordered="false">
19+
<n-collapse-item name="KDoc">
20+
<RepoDocCards/>
21+
<template #header>
22+
<n-divider title-placement="left" style="user-select: none">
23+
<Icon>
24+
<BookOutline/>
25+
</Icon> &nbsp;
26+
<n-text strong style="font-size: 19px">KDoc</n-text>
27+
</n-divider>
28+
<n-divider title-placement="center">
29+
<n-collapse-transition :show="!collapseActions.has('KDoc')">
30+
<n-text italic depth="3" style="user-select: none; font-size: 6px">点击展开</n-text>
31+
</n-collapse-transition>
32+
</n-divider>
33+
<n-divider title-placement="right">
34+
<n-collapse-transition :show="collapseActions.has('KDoc')">
35+
<n-text italic depth="3" style="user-select: none; font-size: 13px">Javadoc的好朋友</n-text>
36+
</n-collapse-transition>
37+
</n-divider>
38+
</template>
39+
</n-collapse-item>
40+
</n-card>
41+
<n-card embedded :bordered="false">
42+
<n-collapse-item name="作品展示">
43+
<ShowCards/>
44+
<template #header>
45+
<n-divider title-placement="left" style="user-select: none">
46+
<n-text strong style="font-size: 19px">作品展示</n-text>
47+
&nbsp;
48+
<Icon>
49+
<HeartOutline/>
50+
</Icon>
51+
</n-divider>
52+
<n-divider title-placement="center">
53+
<n-collapse-transition :show="!collapseActions.has('作品展示')">
54+
<n-text italic depth="3" style="user-select: none; font-size: 6px">点击展开</n-text>
55+
</n-collapse-transition>
56+
</n-divider>
57+
<n-divider title-placement="right">
58+
<n-collapse-transition :show="collapseActions.has('作品展示')">
59+
<n-text italic depth="3" style="user-select: none; font-size: 13px">看看大家的好宝贝</n-text>
60+
</n-collapse-transition>
61+
</n-divider>
62+
</template>
63+
</n-collapse-item>
64+
</n-card>
65+
</n-collapse>
66+
</n-flex>
67+
</n-grid-item>
68+
<n-grid-item span="0 m:1 l:1 xl:2"></n-grid-item>
69+
</n-grid>
6570

6671
</n-layout>
6772
<n-layout-footer
@@ -88,6 +93,8 @@ import {
8893
NConfigProvider,
8994
NDivider,
9095
NFlex,
96+
NGrid,
97+
NGridItem,
9198
NLayout,
9299
NLayoutFooter,
93100
NLayoutHeader,
@@ -103,10 +110,10 @@ import ShowCards from "./show/ShowCards.vue";
103110
import HorizontalAdUnit from "./ad/HorizontalAdUnit.vue";
104111
105112
const layoutCenterContentStyle = reactive({
106-
'padding-left': '50px',
107-
'padding-right': '50px',
108-
'padding-top': '50px',
109-
'padding-bottom': '50px',
113+
// 'padding-left': '50px',
114+
// 'padding-right': '50px',
115+
// 'padding-top': '50px',
116+
// 'padding-bottom': '50px',
110117
})
111118
112119
const initThemeActiveValue = localStorage.getItem("theme_dark") != null

0 commit comments

Comments
 (0)