Skip to content

Commit 65cc848

Browse files
discreted66discreted66
authored
feat:ai-extension开发以及细节优化 (#98)
1 parent 3aaa146 commit 65cc848

File tree

17 files changed

+1725
-952
lines changed

17 files changed

+1725
-952
lines changed

‎packages/home/src/views/ai-extension-home/common.less‎

Lines changed: 278 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,278 @@
1+
/* ==================== 公共样式 ==================== */
2+
3+
.ai-extension-home {
4+
/* 工具类 */
5+
.pad-b40 {
6+
padding-bottom: 40px !important;
7+
}
8+
9+
.pad-t40 {
10+
padding-top: 40px !important;
11+
}
12+
13+
/* 通用布局 */
14+
.section {
15+
min-height: 100vh;
16+
width: 100%;
17+
position: relative;
18+
overflow: hidden;
19+
display: flex;
20+
flex-direction: column;
21+
justify-content: center;
22+
align-items: center;
23+
}
24+
25+
.text-center {
26+
text-align: center;
27+
}
28+
29+
/* 背景类 */
30+
.bg-tech-1 {
31+
background-size: cover;
32+
background-position: center;
33+
}
34+
35+
.bg-tech-2 {
36+
background-size: cover;
37+
background-position: center;
38+
}
39+
40+
/* 通用文字样式 */
41+
.title {
42+
font-size: 52px;
43+
font-weight: 700;
44+
color: #191919;
45+
letter-spacing: 2px;
46+
line-height: 1.2;
47+
padding-bottom: 32px;
48+
.title-us {
49+
font-size: 56px;
50+
}
51+
}
52+
53+
.subtitle {
54+
font-size: 50px;
55+
padding-bottom: 48px;
56+
line-height: 1.5;
57+
background: linear-gradient(90deg, #cb43a8 10%, #2c5fef 50%);
58+
-webkit-background-clip: text;
59+
background-clip: text;
60+
letter-spacing: 5px;
61+
-webkit-text-fill-color: transparent;
62+
font-weight: 700;
63+
}
64+
65+
.description {
66+
font-size: 18px;
67+
padding-bottom: 48px;
68+
line-height: 2;
69+
color: #a0a0a0;
70+
letter-spacing: 2px;
71+
font-weight: 400;
72+
}
73+
74+
.feature-title {
75+
font-size: 36px;
76+
}
77+
78+
/* 按钮样式 */
79+
.btn {
80+
padding: 12px 44px;
81+
line-height: 24px;
82+
border-radius: 30px;
83+
font-size: 16px;
84+
text-decoration: none;
85+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
86+
cursor: pointer;
87+
letter-spacing: 1px;
88+
position: relative;
89+
overflow: hidden;
90+
font-weight: 400;
91+
}
92+
93+
.btn.primary {
94+
background: #191919;
95+
color: white;
96+
border: none;
97+
box-shadow: 0 10px 25px rgba(94, 124, 226, 0.3);
98+
}
99+
100+
.btn.primary:hover {
101+
transform: translateY(-3px);
102+
box-shadow: 0 15px 35px rgba(94, 124, 226, 0.5);
103+
}
104+
105+
.btn.secondary {
106+
background: transparent;
107+
color: #191919;
108+
border: 1px solid #191919;
109+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
110+
}
111+
112+
.btn.secondary:hover {
113+
transform: translateY(-3px);
114+
border-color: #191919;
115+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
116+
}
117+
118+
/* 动画效果 */
119+
.fade-in-up {
120+
opacity: 0;
121+
transform: translateY(30px);
122+
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
123+
}
124+
125+
.fade-in-up.is-visible {
126+
opacity: 1;
127+
transform: translateY(0);
128+
}
129+
130+
@keyframes fadeInUp {
131+
from {
132+
opacity: 0;
133+
transform: translateY(40px);
134+
}
135+
to {
136+
opacity: 1;
137+
transform: translateY(0);
138+
}
139+
}
140+
141+
@keyframes float {
142+
0% {
143+
transform: translateY(0px);
144+
}
145+
50% {
146+
transform: translateY(-25px);
147+
}
148+
100% {
149+
transform: translateY(0px);
150+
}
151+
}
152+
153+
/* ==================== 响应式适配 ==================== */
154+
155+
/* 中等屏幕 (1024px - 1440px) - 小桌面 */
156+
@media (max-width: 1440px) {
157+
* {
158+
zoom: 0.9;
159+
}
160+
}
161+
162+
/* 平板横屏 (1024px - 1440px) */
163+
@media (max-width: 1024px) {
164+
* {
165+
zoom: 1;
166+
}
167+
168+
.title {
169+
font-size: 28px;
170+
letter-spacing: 3px;
171+
}
172+
173+
.subtitle {
174+
font-size: 26px;
175+
letter-spacing: 3px;
176+
}
177+
178+
.description {
179+
font-size: 16px;
180+
}
181+
182+
.feature-title {
183+
font-size: 30px;
184+
}
185+
}
186+
187+
/* 平板竖屏 / 大手机 (768px - 1024px) */
188+
@media (max-width: 768px) {
189+
* {
190+
zoom: 1;
191+
}
192+
193+
.section {
194+
min-height: auto;
195+
padding: 60px 20px;
196+
}
197+
198+
.title {
199+
font-size: 28px;
200+
letter-spacing: 2px;
201+
padding-bottom: 15px;
202+
}
203+
204+
.subtitle {
205+
font-size: 26px;
206+
letter-spacing: 2px;
207+
padding-bottom: 15px;
208+
}
209+
210+
.description {
211+
padding-bottom: 20px;
212+
}
213+
214+
.cta-group {
215+
gap: 15px;
216+
width: 100%;
217+
justify-content: center;
218+
}
219+
220+
.btn {
221+
padding: 14px 30px;
222+
font-size: 14px;
223+
}
224+
225+
.feature-title {
226+
font-size: 28px;
227+
}
228+
229+
.pad-b40 {
230+
padding-bottom: 30px !important;
231+
}
232+
}
233+
234+
/* 小手机 (< 480px) */
235+
@media (max-width: 480px) {
236+
.section {
237+
padding: 40px 15px;
238+
}
239+
240+
.btn {
241+
padding: 12px 24px;
242+
font-size: 14px;
243+
line-height: 1;
244+
}
245+
246+
.description {
247+
letter-spacing: 0px;
248+
padding-left: 15px;
249+
padding-right: 15px;
250+
}
251+
252+
.title {
253+
font-size: 22px;
254+
letter-spacing: 1px;
255+
.title-us {
256+
font-size: 24px;
257+
}
258+
}
259+
260+
.subtitle {
261+
font-size: 20px;
262+
letter-spacing: 1px;
263+
}
264+
265+
.feature-title {
266+
font-size: 24px;
267+
}
268+
}
269+
270+
/* 无障碍支持 */
271+
@media (prefers-reduced-motion: reduce) {
272+
.fade-in-up {
273+
opacity: 1 !important;
274+
transform: none !important;
275+
transition: none !important;
276+
}
277+
}
278+
}

0 commit comments

Comments
 (0)