Skip to content

Commit a98eba9

Browse files
author
weilei
committed
feat(docs): 样式优化
1 parent 3f6fcf0 commit a98eba9

File tree

1 file changed

+266
-52
lines changed

1 file changed

+266
-52
lines changed

‎docs/src/.vuepress/components/Hero.vue‎

Lines changed: 266 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,24 @@
5858
</div>
5959
</div>
6060
</div>
61-
61+
<!-- Vue2 AI Project Section -->
62+
<div class="vue2-ai-section">
63+
<div class="container">
64+
<div class="content-box">
65+
<h2 class="section-title">适用于 Vue2 的 AI 应用开发</h2>
66+
<div class="description">
67+
<p>如果您正在使用 Vue2 开发 AI 应用，Element-UI-X 将是您的理想选择：</p>
68+
<ul>
69+
<li>完全兼容 Vue2 生态系统</li>
70+
<li>基于成熟稳定的 Element-UI</li>
71+
<li>提供丰富的 AI 交互组件</li>
72+
<li>开箱即用的 Dify API 集成</li>
73+
</ul>
74+
<p class="highlight-text">为您的 AI 应用注入无限创新可能</p>
75+
</div>
76+
</div>
77+
</div>
78+
</div>
6279
<!-- Features Section -->
6380
<div class="custom-features">
6481
<div class="container">
@@ -106,7 +123,7 @@
106123
return {
107124
features: [
108125
{
109-
title: '复刻经典 推陈出新',
126+
title: '复刻经典',
110127
details: '基于Element Plus X ',
111128
},
112129
{
@@ -252,83 +269,226 @@
252269
}
253270
}
254271
}
272+
.vue2-ai-section {
273+
position: relative;
274+
padding: 2rem 0;
275+
background: linear-gradient(
276+
135deg,
277+
rgba(64, 158, 255, 0.1) 0%,
278+
rgba(121, 187, 255, 0.08) 50%,
279+
rgba(64, 158, 255, 0.06) 100%
280+
);
281+
overflow: hidden;
282+
283+
&::before {
284+
content: '';
285+
position: absolute;
286+
top: 0;
287+
left: 0;
288+
right: 0;
289+
bottom: 0;
290+
background-image: radial-gradient(
291+
circle at 20% 80%,
292+
rgba(64, 158, 255, 0.1) 0%,
293+
transparent 50%
294+
),
295+
radial-gradient(circle at 80% 20%, rgba(121, 187, 255, 0.08) 0%, transparent 50%);
296+
pointer-events: none;
297+
}
255298
256-
.custom-features {
257299
.container {
300+
position: relative;
301+
z-index: 1;
302+
max-width: 1200px;
258303
margin: 0 auto;
304+
padding: 0 2rem;
259305
}
260306
261-
.items {
262-
display: flex;
263-
flex-direction: column;
264-
gap: 16px;
265-
padding: 0 8px;
307+
.content-box {
308+
background: rgba(255, 255, 255, 0.9);
309+
backdrop-filter: blur(10px);
310+
border-radius: 16px;
311+
padding: 1.5rem;
312+
box-shadow: 0 8px 32px rgba(64, 158, 255, 0.1), 0 2px 16px rgba(0, 0, 0, 0.05);
313+
border: 1px solid rgba(255, 255, 255, 0.2);
266314
}
315+
}
267316
268-
.feature-box {
269-
background-color: #f5f7fa;
270-
border-radius: 4px;
271-
padding: 8px 16px;
317+
.section-title {
318+
font-size: 2.2rem;
319+
font-weight: 700;
320+
background: linear-gradient(120deg, #409eff, #79bbff, #409eff);
321+
-webkit-background-clip: text;
322+
-webkit-text-fill-color: transparent;
323+
text-align: center;
324+
margin-bottom: 1rem;
325+
position: relative;
326+
327+
&::after {
328+
content: '';
329+
position: absolute;
330+
bottom: -8px;
331+
left: 50%;
332+
transform: translateX(-50%);
333+
width: 60px;
334+
height: 3px;
335+
background: linear-gradient(90deg, #409eff, #79bbff);
336+
border-radius: 2px;
337+
}
338+
}
339+
340+
.description {
341+
max-width: 900px;
342+
margin: 0 auto;
343+
344+
p {
345+
font-size: 1.1rem;
346+
line-height: 1.8;
347+
color: #2c3e50;
348+
// margin-bottom: 1.5rem;
349+
text-align: center;
350+
}
351+
352+
ul {
353+
display: grid;
354+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
355+
gap: 1rem;
356+
list-style: none;
357+
padding: 0;
358+
margin: 2rem 0;
359+
}
360+
361+
li {
362+
background: rgba(64, 158, 255, 0.05);
363+
padding: 1rem 0.5rem;
364+
border-radius: 12px;
365+
border-left: 4px solid #409eff;
366+
position: relative;
272367
transition: all 0.3s ease;
273-
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
274-
width: 100%;
275-
max-width: 600px;
368+
font-size: 1.1rem;
369+
color: #2c3e50;
370+
371+
&:hover {
372+
transform: translateY(-2px);
373+
box-shadow: 0 4px 20px rgba(64, 158, 255, 0.15);
374+
}
375+
376+
&::before {
377+
content: '🚀';
378+
margin-right: 0.5rem;
379+
font-size: 1.1rem;
380+
}
381+
}
382+
}
383+
384+
.highlight-text {
385+
font-size: 1.2rem;
386+
font-weight: 600;
387+
text-align: center;
388+
background: linear-gradient(120deg, #409eff, #79bbff);
389+
-webkit-background-clip: text;
390+
-webkit-text-fill-color: transparent;
391+
margin-top: 1rem !important;
392+
position: relative;
393+
394+
&::before {
395+
content: '✨';
396+
margin-right: 0.5rem;
397+
}
398+
}
399+
.custom-features {
400+
position: relative;
401+
padding: 2rem 0;
402+
margin-top: 1rem;
403+
background: linear-gradient(
404+
135deg,
405+
rgba(64, 158, 255, 0.12) 0%,
406+
rgba(64, 158, 255, 0.08) 50%,
407+
rgba(121, 187, 255, 0.06) 100%
408+
);
409+
overflow: hidden;
410+
411+
&::before {
412+
content: '';
413+
position: absolute;
414+
top: 0;
415+
left: 0;
416+
right: 0;
417+
bottom: 0;
418+
background-image: radial-gradient(
419+
circle at 80% 20%,
420+
rgba(64, 158, 255, 0.1) 0%,
421+
transparent 60%
422+
),
423+
radial-gradient(circle at 20% 80%, rgba(121, 187, 255, 0.08) 0%, transparent 60%);
424+
pointer-events: none;
425+
}
426+
427+
.container {
428+
position: relative;
429+
z-index: 1;
430+
max-width: 1200px;
276431
margin: 0 auto;
432+
padding: 0 2rem;
433+
}
277434
278-
@media (max-width: 768px) {
279-
max-width: 100%;
280-
margin: 0;
281-
padding: 8px;
435+
.items {
436+
display: grid;
437+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
438+
gap: 2rem;
439+
padding: 0;
440+
}
282441
283-
&:hover {
284-
transform: none;
285-
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
286-
}
442+
.feature-box {
443+
background: rgba(255, 255, 255, 0.95);
444+
backdrop-filter: blur(15px);
445+
border-radius: 20px;
446+
padding: 2rem;
447+
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
448+
box-shadow: 0 10px 40px rgba(64, 158, 255, 0.1), 0 4px 20px rgba(0, 0, 0, 0.05);
449+
border: 1px solid rgba(255, 255, 255, 0.3);
450+
position: relative;
451+
overflow: hidden;
452+
453+
&::before {
454+
content: '';
455+
position: absolute;
456+
top: 0;
457+
left: 0;
458+
right: 0;
459+
height: 4px;
460+
background: linear-gradient(90deg, #409eff, #79bbff, #409eff);
287461
}
288462
289463
&:hover {
290-
transform: translateX(10px);
291-
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
464+
transform: translateY(-8px) scale(1.02);
465+
box-shadow: 0 20px 60px rgba(64, 158, 255, 0.15), 0 8px 30px rgba(0, 0, 0, 0.1);
292466
}
293467
294468
.title {
295-
font-size: 20px;
296-
font-weight: 600;
297-
color: #303133;
298-
margin-bottom: 12px;
469+
font-size: 1.4rem;
470+
font-weight: 700;
471+
color: #2c3e50;
472+
margin-bottom: 1rem;
299473
display: flex;
300474
align-items: center;
301-
gap: 8px;
302-
303-
@media (max-width: 768px) {
304-
font-size: 16px;
305-
margin-bottom: 8px;
306-
}
475+
gap: 0.75rem;
307476
308477
&::before {
309478
content: '';
310-
width: 4px;
311-
height: 20px;
312-
background: #409eff;
313-
border-radius: 2px;
314-
315-
@media (max-width: 768px) {
316-
height: 16px;
317-
}
479+
width: 8px;
480+
height: 8px;
481+
background: linear-gradient(45deg, #409eff, #79bbff);
482+
border-radius: 50%;
483+
box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
318484
}
319485
}
320486
321487
.details {
322-
font-size: 14px;
488+
font-size: 1rem;
323489
color: #606266;
324-
line-height: 1.8;
325-
padding-left: 12px;
326-
327-
@media (max-width: 768px) {
328-
font-size: 13px;
329-
line-height: 1.6;
330-
padding-left: 10px;
331-
}
490+
line-height: 1.7;
491+
padding-left: 1.75rem;
332492
}
333493
}
334494
}
@@ -395,17 +555,71 @@
395555
}
396556
397557
.custom-features {
558+
padding: 1rem 0;
559+
560+
.container {
561+
padding: 0 1rem;
562+
}
563+
398564
.items {
399565
grid-template-columns: 1fr;
566+
gap: 1.5rem;
567+
}
568+
569+
.feature-box {
570+
padding: 1.5rem;
571+
572+
&:hover {
573+
transform: translateY(-4px);
574+
}
575+
576+
.title {
577+
font-size: 1.2rem;
578+
}
579+
580+
.details {
581+
font-size: 0.9rem;
582+
}
583+
}
584+
}
585+
586+
.vue2-ai-section {
587+
padding: 2rem 0;
588+
589+
.container {
590+
padding: 0 1rem;
591+
}
592+
593+
.content-box {
594+
padding: 1.5rem;
595+
}
596+
597+
.section-title {
598+
font-size: 1.8rem;
599+
}
600+
601+
.description ul {
602+
grid-template-columns: 1fr;
400603
}
401604
}
402605
}
403606
}
404607
405608
@media (min-width: 768px) and (max-width: 992px) {
406609
.custom-features {
610+
padding: 2rem 0;
611+
612+
.container {
613+
padding: 0 1.5rem;
614+
}
615+
407616
.items {
408617
grid-template-columns: repeat(2, 1fr);
618+
gap: 1.5rem;
619+
}
620+
621+
.feature-box {
622+
padding: 1.75rem;
409623
}
410624
}
411625
}

0 commit comments

Comments
 (0)