Skip to content

Commit f3585e8

Browse files
fengjiancaiGreatZPP
fengjiancai
and
GreatZPP
authored
feat: 官网视觉优化 (DevCloudFE#1757)
Co-authored-by: GreatZP <greatzp@greatzp.cn>
1 parent 0efd3a3 commit f3585e8

File tree

10 files changed

+818
-352
lines changed

10 files changed

+818
-352
lines changed

‎packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue

+102-71
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import NavBar from './components/NavBar.vue';
77
import SideBar from './components/SideBar.vue';
88
import Page from './components/Page.vue';
99
import HomeFooter from './components/HomeFooter.vue';
10+
import DevuiFooter from './components/DevuiFooter.vue';
1011
import { CONTRIBUTORS_MAP } from './components/PageContributorConfig';
1112
import PageContributor from './components/PageContributor.vue';
1213
import { Button } from '@devui/button';
@@ -73,6 +74,13 @@ const pageClasses = computed(() => {
7374
},
7475
];
7576
});
77+
const homeContainerClass = computed(() => {
78+
return [
79+
{
80+
'home-page-bg': enableHome.value,
81+
},
82+
];
83+
});
7684
const initLanguageConfig = () => {
7785
// layout组件加载，初始化国际化语言.
7886
const result = location.pathname.match(/[a-zA-Z]*-[A-Z]*/);
@@ -135,73 +143,76 @@ const contributors = computed(() => {
135143
</script>
136144

137145
<template>
138-
<div class="theme" :class="pageClasses">
139-
<NavBar v-if="showNavbar" @toggle="toggleSidebar">
140-
<template #search>
141-
<slot name="navbar-search"> </slot>
142-
</template>
143-
</NavBar>
144-
145-
<SideBar :open="openSideBar">
146-
<template #sidebar-top>
147-
<slot name="sidebar-top" />
148-
<AlgoliaSearchBox v-if="theme.algolia" :options="theme.algolia" :multilang="isMultiLang" :key="site.lang" />
149-
</template>
150-
<template #sidebar-bottom>
151-
<slot name="sidebar-bottom" />
152-
</template>
153-
</SideBar>
154-
<!-- TODO: make this button accessible -->
155-
<div class="sidebar-mask" @click="toggleSidebar(false)" />
156-
157-
<Content v-if="isCustomLayout" />
158-
159-
<Home v-else-if="enableHome">
160-
<template #hero>
161-
<slot name="home-hero" />
162-
</template>
163-
<template #features>
164-
<slot name="home-features" />
165-
</template>
166-
<template #footer>
167-
<slot name="home-footer" />
168-
</template>
169-
</Home>
170-
171-
<Page v-else>
172-
<template #top>
173-
<slot name="page-top-ads">
174-
<div id="ads-container" v-if="theme.carbonAds && theme.carbonAds.carbon">
175-
<CarbonAds :key="'carbon' + page.relativePath" :code="theme.carbonAds.carbon" :placement="theme.carbonAds.placement" />
176-
</div>
177-
</slot>
178-
<slot name="page-top" />
179-
</template>
180-
<template #bottom>
181-
<slot name="page-bottom" />
182-
<slot name="page-bottom-ads">
183-
<BuySellAds
184-
v-if="theme.carbonAds && theme.carbonAds.custom"
185-
:key="'custom' + page.relativePath"
186-
:code="theme.carbonAds.custom"
187-
:placement="theme.carbonAds.placement"
188-
/>
189-
</slot>
190-
</template>
191-
</Page>
192-
</div>
193-
194-
<div class="container-contributors" v-if="enableHome">
195-
<div class="contributors-inner">
196-
<h2>✨贡献者✨</h2>
197-
<PageContributor v-if="contributors && contributors.length > 0" :contributors="contributors" :spacing="20" :avatarSize="48" />
198-
<a href="/contributing/"><Button class="btn-become-contributor" variant="solid" color="primary">成为贡献者</Button></a>
146+
<div :class="homeContainerClass">
147+
<div class="content-container">
148+
<div class="theme" :class="pageClasses">
149+
<NavBar v-if="showNavbar" @toggle="toggleSidebar">
150+
<template #search>
151+
<slot name="navbar-search"> </slot>
152+
</template>
153+
</NavBar>
154+
155+
<SideBar :open="openSideBar">
156+
<template #sidebar-top>
157+
<slot name="sidebar-top" />
158+
<AlgoliaSearchBox v-if="theme.algolia" :options="theme.algolia" :multilang="isMultiLang" :key="site.lang" />
159+
</template>
160+
<template #sidebar-bottom>
161+
<slot name="sidebar-bottom" />
162+
</template>
163+
</SideBar>
164+
<!-- TODO: make this button accessible -->
165+
<div class="sidebar-mask" @click="toggleSidebar(false)" />
166+
167+
<Content v-if="isCustomLayout" />
168+
169+
<Home v-else-if="enableHome">
170+
<template #hero>
171+
<slot name="home-hero" />
172+
</template>
173+
<template #features>
174+
<slot name="home-features" />
175+
</template>
176+
<template #footer>
177+
<slot name="home-footer" />
178+
</template>
179+
</Home>
180+
181+
<Page v-else>
182+
<template #top>
183+
<slot name="page-top-ads">
184+
<div id="ads-container" v-if="theme.carbonAds && theme.carbonAds.carbon">
185+
<CarbonAds :key="'carbon' + page.relativePath" :code="theme.carbonAds.carbon" :placement="theme.carbonAds.placement" />
186+
</div>
187+
</slot>
188+
<slot name="page-top" />
189+
</template>
190+
<template #bottom>
191+
<slot name="page-bottom" />
192+
<slot name="page-bottom-ads">
193+
<BuySellAds
194+
v-if="theme.carbonAds && theme.carbonAds.custom"
195+
:key="'custom' + page.relativePath"
196+
:code="theme.carbonAds.custom"
197+
:placement="theme.carbonAds.placement"
198+
/>
199+
</slot>
200+
</template>
201+
</Page>
202+
</div>
203+
204+
<div class="container-contributors" v-if="enableHome">
205+
<div class="contributors-inner">
206+
<h2>✨贡献者✨</h2>
207+
<PageContributor v-if="contributors && contributors.length > 0" :contributors="contributors" :spacing="20" :avatarSize="48" />
208+
<a href="/contributing/"><Button class="btn-become-contributor" variant="solid" color="primary">成为贡献者</Button></a>
209+
</div>
210+
</div>
199211
</div>
200-
</div>
201-
202-
<HomeFooter />
203212

204-
<Debug v-if="false" />
213+
<DevuiFooter class="footer" v-if="enableHome" />
214+
<Debug v-if="false" />
215+
</div>
205216
</template>
206217

207218
<style lang="scss">
@@ -238,15 +249,17 @@ const contributors = computed(() => {
238249
// iPad/PC
239250
.container-contributors {
240251
padding: 2rem 0;
241-
background: var(--devui-global-bg, #f3f6f8);
252+
margin-bottom: 40px;
242253
243254
.contributors-inner {
244-
max-width: 564px;
255+
max-width: 1200px;
245256
margin: 0 auto;
257+
padding: 20px;
246258
display: flex;
247259
justify-content: center;
248260
align-items: center;
249261
flex-direction: column;
262+
box-shadow: 0 8px 32px rgba(150, 180, 255, 0.16);
250263
251264
h2 {
252265
margin-top: 1rem;
@@ -270,14 +283,28 @@ const contributors = computed(() => {
270283
271284
.page-contributor {
272285
padding: 0 20px;
273-
274-
& > a:nth-child(8n) > span {
275-
margin: 0 !important;
276-
}
277286
}
278287
}
279288
}
280289
290+
.home-page-bg {
291+
background-image: url('../../assets/banner-bg.png');
292+
background-repeat: no-repeat;
293+
background-size: 100% 50%;
294+
margin-top: 50px;
295+
background-color: var(--devui-global-bg-normal);
296+
}
297+
298+
body[ui-theme='galaxy-theme'] {
299+
.home-page-bg {
300+
background-image: url('../../assets/banner-bg-dark.png');
301+
}
302+
}
303+
304+
.content-container {
305+
min-height: calc(100vh - 214px);
306+
}
307+
281308
// iPhone 6/7/8 Plus(414) Nexus 5X/6/6P(412)
282309
@media (max-width: 420px) {
283310
.container-contributors .contributors-inner {
@@ -336,4 +363,8 @@ const contributors = computed(() => {
336363
}
337364
}
338365
}
366+
367+
.footer {
368+
max-width: 1200px !important;
369+
}
339370
</style>

‎packages/devui-vue/docs/.vitepress/devui-theme/components/AlgoliaSearchBox.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -95,14 +95,14 @@ function getRelativePath(absoluteUrl: string) {
9595
9696
--docsearch-primary-color: var(--c-brand);
9797
--docsearch-highlight-color: var(--devui-brand);
98-
--docsearch-searchbox-shadow: inset 0 0 0 1px var(--devui-brand);
98+
--docsearch-searchbox-shadow: inset 0 0 0 1px var(--devui-form-control-line-active);
9999
--docsearch-text-color: var(--devui-text);
100100
--docsearch-muted-color: var(--devui-text);
101101
--docsearch-searchbox-background: var(--devui-global-bg);
102102
103103
--docsearch-modal-background: var(--devui-global-bg-normal);
104104
--docsearch-footer-background: var(--devui-global-bg);
105-
--docsearch-searchbox-focus-background: var(--devui-base-bg);
105+
--docsearch-searchbox-focus-background: var(--devui-gray-form-control-hover-bg);
106106
--docsearch-hit-background: var(--devui-default-bg);
107107
--docsearch-footer-shadow: '';
108108
--docsearch-hit-shadow: '';

‎packages/devui-vue/docs/.vitepress/devui-theme/components/DevuiFooter.vue

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<template>
2+
<div class="devui-docs-footer">
3+
<div>
4+
<div class="devui-docs-footer-title">找到我们</div>
5+
<div class="devui-docs-footer-content">
6+
<div class="content-foot">
7+
<a rel="noopener noreferrer" href="https://github.com/DevCloudFE/ng-devui" target="_blank" class="devui-docs-footer-link">
8+
<img src="./img/github.svg" />
9+
<span>Github</span>
10+
</a>
11+
</div>
12+
13+
<div class="content-foot">
14+
<a rel="noopener noreferrer" href="https://juejin.cn/user/712139267650141" target="_blank" class="devui-docs-footer-link">
15+
<img src="./img/juejin.svg" />
16+
<span>DevUI团队</span>
17+
</a>
18+
</div>
19+
20+
<div class="content-foot">
21+
<a rel="noopener noreferrer" href="https://zhuanlan.zhihu.com/devui" target="_blank" class="devui-docs-footer-link">
22+
<img src="./img/zhihu.svg" />
23+
<span>DevUI Design</span></a
24+
>
25+
</div>
26+
27+
<div class="content-foot" style="position: relative">
28+
<a class="wechat-info">
29+
<img src="./img/wechat.svg" />
30+
<span>官方交流群</span>
31+
<img class="wechat-img" src="./img/wechat.jpg" />
32+
</a>
33+
</div>
34+
</div>
35+
</div>
36+
37+
<div class="devui-docs-footer-desc">
38+
<img src="./img/logo.svg" alt="" />
39+
<span>粤A2-20044005号</span>
40+
</div>
41+
</div>
42+
</template>
43+
44+
<style scoped lang="scss">
45+
.devui-docs-footer {
46+
height: 162px;
47+
max-width: 1024px;
48+
margin: 0 auto;
49+
padding: 32px 32px 0 32px;
50+
background-color: var(--devui-global-bg);
51+
border-radius: 20px 20px 0 0;
52+
53+
&-title {
54+
font-size: var(--devui-font-size);
55+
color: var(--devui-text);
56+
font-weight: bold;
57+
margin-bottom: 20px;
58+
}
59+
60+
&-content {
61+
display: flex;
62+
height: 52px;
63+
64+
.content-foot {
65+
margin-right: 80px;
66+
67+
a {
68+
display: flex;
69+
align-items: center;
70+
}
71+
72+
span {
73+
font-size: var(--devui-font-size-sm);
74+
line-height: 16px;
75+
margin-left: 8px;
76+
}
77+
}
78+
}
79+
80+
&-desc {
81+
border-top: 1px solid var(--devui-dividing-line);
82+
height: 40px;
83+
display: flex;
84+
align-items: center;
85+
86+
img {
87+
width: 16px;
88+
height: 16px;
89+
margin-right: 8px;
90+
}
91+
92+
span {
93+
font-size: var(--devui-font-size-sm);
94+
color: var(--devui-aide-text);
95+
line-height: 40px;
96+
}
97+
}
98+
}
99+
100+
.devui-docs-footer-link {
101+
color: var(--devui-text);
102+
103+
&:hover {
104+
color: var(--devui-link-active);
105+
cursor: pointer;
106+
}
107+
}
108+
109+
.wechat-info {
110+
color: var(--devui-text);
111+
112+
&:hover {
113+
cursor: pointer;
114+
color: var(--devui-link-active);
115+
116+
.wechat-img {
117+
display: block !important;
118+
}
119+
}
120+
121+
.wechat-img {
122+
position: absolute;
123+
display: none;
124+
width: 160px;
125+
max-width: fit-content;
126+
bottom: 60px;
127+
left: 0;
128+
}
129+
}
130+
131+
@media (max-width: 720px) {
132+
.devui-docs-footer-content {
133+
justify-content: space-between;
134+
135+
.content-foot {
136+
margin-right: 0;
137+
}
138+
}
139+
}
140+
</style>

0 commit comments

Comments
 (0)