Skip to content

Commit f86f83a

Browse files
committed
docs: 增加LeetCode卡片的demo
1 parent cb39c2a commit f86f83a

File tree

2 files changed

+309
-1
lines changed

2 files changed

+309
-1
lines changed

docs/.vitepress/config.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const sidebar = {
1515
{ text: "华为", link: "/features/huawei-events/" },
1616
{ text: "B站", link: "/features/bilibili-events/" },
1717
{ text: "QQ音乐", link: "/features/qqmusic/" },
18+
{ text: "LeetCode", link: "/features/leetcode-card/" },
1819
]
1920
}
2021
]
@@ -33,7 +34,9 @@ const config = {
3334
markdown: {
3435
config: (md) => {
3536
// 这里可以使用 markdown-it 插件,vitepress-theme-demoblock就是基于此开发的
36-
md.use(demoBlockPlugin)
37+
md.use(demoBlockPlugin, {
38+
cssPreprocessor: 'scss'
39+
})
3740
}
3841
}
3942
}

docs/features/leetcode-card/index.md

Lines changed: 305 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,305 @@
1+
# LeetCode
2+
3+
### 首页轮播
4+
5+
:::demo `DCarousel``DCarouselIndicator`组合使用,可以很方便地实现 LeetCode 的卡片轮播效果。
6+
7+
```vue
8+
<template>
9+
<DCarousel class="leetcode-carousel-card">
10+
<img width="258" src="https://pic.leetcode-cn.com/1643099306-QbeuFS-%E9%A6%96%E9%A1%B5%E5%8F%B3%E8%BE%B9%E6%A0%8F.png" />
11+
<img width="258" src="https://pic.leetcode-cn.com/1617250539-zSvRFh-%E6%95%99%E8%82%B2%E4%BC%98%E6%83%A0-01.png" />
12+
<img width="258" src="https://pic.leetcode-cn.com/1636622575-frBHFI-Android%20%E5%BC%80%E5%8F%91%E9%9D%A2%E8%AF%95%E7%AA%81%E5%87%BB.jpg" />
13+
<template #pagination></template>
14+
<template #indicator="page">
15+
<DCarouselIndicator>
16+
<div v-for="item of Array.from(new Array(3).keys())" :class="['leetcode-indicator-item', page.pageIndex === item && 'active']" @click="page.setPageIndex(item)"></div>
17+
</DCarouselIndicator>
18+
</template>
19+
</DCarousel>
20+
</template>
21+
<style lang="scss">
22+
.leetcode-carousel-card {
23+
width: 258px;
24+
border-radius: 8px;
25+
26+
&:hover .devui-carousel-indicator {
27+
transform: scale(1.6);
28+
}
29+
30+
.devui-carousel-indicator {
31+
transition: all 0.3s ease 0s;
32+
}
33+
34+
.leetcode-indicator-item {
35+
margin: 0 4px;
36+
opacity: 1;
37+
width: 6px;
38+
height: 6px;
39+
box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 16px, rgba(0, 0, 0, 0.1) 0px 2px 4px;
40+
background: rgba(60, 60, 67, 0.3);
41+
cursor: pointer;
42+
border-radius: 100%;
43+
44+
&.active {
45+
opacity: 1;
46+
background: rgba(38, 38, 38, 0.75);
47+
}
48+
}
49+
}
50+
</style>
51+
```
52+
53+
:::
54+
55+
### 求职页轮播
56+
57+
:::demo
58+
59+
```vue
60+
<template>
61+
<DCarousel class="leetcode-carousel-card-company">
62+
<img width="490" src="https://pic.leetcode-cn.com/1629254287-yEsnNQ-%E5%A0%86.jpg" />
63+
<img width="490" src="https://pic.leetcode-cn.com/1601206854-mLrzfT-%E9%9D%A2%E8%AF%95%E9%A1%B5.png" />
64+
<img width="490" src="https://pic.leetcode-cn.com/1604894953-QAaYoJ-%E7%AE%97%E6%B3%95%E4%B8%8E%E9%9D%A2%E8%AF%95%E6%8A%80%E5%B7%A7%E7%B2%BE%E8%AE%B2.png" />
65+
<template #pagination></template>
66+
<template #indicator="page">
67+
<DCarouselIndicator>
68+
<div v-for="item of Array.from(new Array(3).keys())" :class="['leetcode-indicator-item', page.pageIndex === item && 'active']" @click="page.setPageIndex(item)"></div>
69+
</DCarouselIndicator>
70+
</template>
71+
</DCarousel>
72+
</template>
73+
<style lang="scss">
74+
.leetcode-carousel-card-company {
75+
width: 490px;
76+
border-radius: 8px;
77+
78+
&:hover .devui-carousel-indicator {
79+
transform: scale(1.6);
80+
}
81+
82+
.devui-carousel-indicator {
83+
transition: all 0.3s ease 0s;
84+
}
85+
86+
.leetcode-indicator-item {
87+
margin: 0 4px;
88+
opacity: 1;
89+
width: 6px;
90+
height: 6px;
91+
box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 16px, rgba(0, 0, 0, 0.1) 0px 2px 4px;
92+
background: rgba(60, 60, 67, 0.3);
93+
cursor: pointer;
94+
border-radius: 100%;
95+
96+
&.active {
97+
opacity: 1;
98+
background: rgba(38, 38, 38, 0.75);
99+
}
100+
}
101+
}
102+
</style>
103+
```
104+
105+
:::
106+
107+
### 题库页
108+
109+
:::demo
110+
111+
```vue
112+
<template>
113+
<div style="width: 858px;">
114+
<div class="carousel-problemset-title">
115+
<h3>学习计划</h3>
116+
<div class="leetcode-pagination-wrapper">
117+
<div class="btn-page prev" @click="prevPage">
118+
<svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill="#293040" fill-rule="nonzero" points="10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"></polygon></g></svg>
119+
</div>
120+
<div class="btn-page" @click="nextPage">
121+
<svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill="#293040" fill-rule="nonzero" transform="translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000)" points="11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"></polygon></g></svg>
122+
</div>
123+
</div>
124+
</div>
125+
<DCarousel v-model="pageIndex" :autoplay="false" class="leetcode-carousel-card-problemset">
126+
<div class="carousel-item-problemset">
127+
<a href="https://leetcode-cn.com/study-plan/algorithms/" target="_blank">
128+
<div class="carousel-subitem">
129+
<img src="https://pic.leetcode-cn.com/1627640862-HgXcTO-Frame%201444.jpg" />
130+
<span>20 天「算法」刷题计划</span>
131+
</div>
132+
</a>
133+
<a href="https://leetcode-cn.com/study-plan/data-structures/" target="_blank">
134+
<div class="carousel-subitem">
135+
<img src="https://pic.leetcode-cn.com/1627640875-pWplzE-Frame%201438.jpg" />
136+
<span>3 周攻克「数据结构」</span>
137+
</div>
138+
</a>
139+
<a href="https://leetcode-cn.com/study-plan/dynamic-programming/" target="_blank">
140+
<div class="carousel-subitem">
141+
<img src="https://pic.leetcode-cn.com/1627640885-gGeALM-Frame%201437.jpg" />
142+
<span>「动态规划」刷题指南</span>
143+
</div>
144+
</a>
145+
<a href="https://leetcode-cn.com/study-plan/lcof/" target="_blank">
146+
<div class="carousel-subitem">
147+
<img src="https://pic.leetcode-cn.com/1628144140-BatkPp-Frame%201485%20(1).jpg" />
148+
<span>剑指 Offer</span>
149+
</div>
150+
</a>
151+
<a href="https://leetcode-cn.com/problem-list/xb9lfcwi" target="_blank">
152+
<div class="carousel-subitem">
153+
<img src="https://pic.leetcode-cn.com/1627641009-euIQrq-Frame%201486%20(1).jpg" />
154+
<span>程序员面试金典</span>
155+
</div>
156+
</a>
157+
</div>
158+
<div class="carousel-item-problemset">
159+
<a href="https://leetcode-cn.com/study-plan/efficient-winning" target="_blank">
160+
<div class="carousel-subitem">
161+
<img src="https://pic.leetcode-cn.com/1627640897-cwxoTM-%E9%AB%98%E6%95%88%E5%88%B6%E8%83%9C%E5%B0%81%E9%9D%A2.jpg" />
162+
<span>面试高效通关计划</span>
163+
</div>
164+
</a>
165+
</div>
166+
<template #indicator></template>
167+
<template #pagination></template>
168+
</DCarousel>
169+
</template>
170+
<script>
171+
import { defineComponent, getCurrentInstance } from 'vue'
172+
173+
export default defineComponent({
174+
setup() {
175+
const { usePage } = getCurrentInstance().appContext.config.globalProperties
176+
const { pageIndex, prevPage, nextPage } = usePage(1)
177+
178+
return {
179+
pageIndex, prevPage, nextPage
180+
}
181+
}
182+
})
183+
</script>
184+
<style lang="scss">
185+
.leetcode-carousel-card-problemset {
186+
187+
.carousel-subitem {
188+
width: 152.4px;
189+
margin-right: 24px;
190+
text-align: center;
191+
cursor: pointer;
192+
193+
&:nth-child(5) {
194+
margin-right: 0;
195+
}
196+
197+
img {
198+
border-radius: 13px;
199+
}
200+
201+
span {
202+
display: inline-block;
203+
text-align: center;
204+
font-size: 14px;
205+
}
206+
}
207+
}
208+
209+
.carousel-item-problemset {
210+
display: flex;
211+
212+
a {
213+
color: rgba(33,40,53);
214+
}
215+
}
216+
217+
.carousel-problemset-title {
218+
display: flex;
219+
justify-content: space-between;
220+
margin-bottom: 12px;
221+
222+
h3 {
223+
margin-top: 0;
224+
font-size: 18px;
225+
color: rgba(33,40,53,.75);
226+
}
227+
}
228+
229+
.leetcode-pagination-wrapper {
230+
.btn-page {
231+
align-items: center;
232+
justify-content: center;
233+
display: inline-flex;
234+
width: 24px;
235+
height: 24px;
236+
border-radius: 5px;
237+
background-color: rgba(0,10,32,.03);
238+
cursor: pointer;
239+
color: #fff;
240+
241+
&:hover {
242+
background-color: rgba(0,10,32,.05);
243+
}
244+
245+
&.prev {
246+
margin-right: 8px;
247+
}
248+
}
249+
}
250+
</style>
251+
```
252+
253+
:::
254+
255+
<!-- ### 学习页
256+
257+
:::demo 设置`type="card"`可以实现卡片化的效果(待实现)
258+
259+
```vue
260+
<template>
261+
<DCarousel type="card" class="leetcode-carousel-card-leetbook">
262+
<img width="828" src="https://pic.leetcode-cn.com/1635315788-FMZNev-iOS%20%E5%BC%80%E5%8F%91%E9%9D%A2%E8%AF%95%E7%AA%81%E5%87%BB.jpg" />
263+
<img width="828" src="https://pic.leetcode-cn.com/1635315493-QWhXEq-%E6%95%B0%E6%8D%AE%E5%BA%93%E7%9F%A5%E8%AF%86%E6%89%8B%E5%86%8C-%E5%AD%A6%E4%B9%A0.jpg" />
264+
<img width="828" src="https://pic.leetcode-cn.com/1613619790-YfhVOU-%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95.jpg" />
265+
<template #pagination></template>
266+
<template #indicator="page">
267+
<DCarouselIndicator>
268+
<div v-for="item of Array.from(new Array(3).keys())" :class="['leetcode-indicator-item', page.pageIndex === item && 'active']" @click="page.setPageIndex(item)"></div>
269+
</DCarouselIndicator>
270+
</template>
271+
</DCarousel>
272+
</template>
273+
<style lang="scss">
274+
.leetcode-carousel-card-leetbook {
275+
width: 828px;
276+
border-radius: 13px;
277+
278+
&:hover .devui-carousel-indicator {
279+
transform: scale(1.6);
280+
}
281+
282+
.devui-carousel-indicator {
283+
transition: all 0.3s ease 0s;
284+
}
285+
286+
.leetcode-indicator-item {
287+
margin: 0 4px;
288+
opacity: 1;
289+
width: 6px;
290+
height: 6px;
291+
box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 16px, rgba(0, 0, 0, 0.1) 0px 2px 4px;
292+
background: rgba(60, 60, 67, 0.3);
293+
cursor: pointer;
294+
border-radius: 100%;
295+
296+
&.active {
297+
opacity: 1;
298+
background: rgba(38, 38, 38, 0.75);
299+
}
300+
}
301+
}
302+
</style>
303+
```
304+
305+
::: -->

0 commit comments

Comments
 (0)