Skip to content

Commit 674e8dd

Browse files
wuyiping0628wuyiping0628
authored
feat: modify the style of the official website (#123)
* feat: modify the style of the official website * feat: modify the style of the official website
1 parent 3c30b73 commit 674e8dd

8 files changed

Lines changed: 43 additions & 103 deletions

File tree

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

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,10 @@
3939

4040
/* 通用文字样式 */
4141
.title {
42+
line-height: 74px;
4243
font-size: 52px;
4344
font-weight: 700;
4445
color: #191919;
45-
letter-spacing: 2px;
46-
line-height: 1.2;
4746
padding-bottom: 32px;
4847
.title-us {
4948
font-size: 56px;
@@ -57,7 +56,6 @@
5756
background: linear-gradient(90deg, #cb43a8 10%, #2c5fef 50%);
5857
-webkit-background-clip: text;
5958
background-clip: text;
60-
letter-spacing: 5px;
6159
-webkit-text-fill-color: transparent;
6260
font-weight: 700;
6361
}
@@ -66,13 +64,11 @@
6664
font-size: 18px;
6765
padding-bottom: 48px;
6866
line-height: 2;
69-
color: #a0a0a0;
70-
letter-spacing: 2px;
71-
font-weight: 400;
67+
color: #595959;
7268
}
7369

7470
.feature-title {
75-
font-size: 36px;
71+
font-size: 40px;
7672
}
7773

7874
/* 按钮样式 */
@@ -84,7 +80,6 @@
8480
text-decoration: none;
8581
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
8682
cursor: pointer;
87-
letter-spacing: 1px;
8883
position: relative;
8984
overflow: hidden;
9085
font-weight: 400;
@@ -94,25 +89,23 @@
9489
background: #191919;
9590
color: white;
9691
border: none;
97-
box-shadow: 0 10px 25px rgba(94, 124, 226, 0.3);
9892
}
9993

10094
.btn.primary:hover {
10195
transform: translateY(-3px);
102-
box-shadow: 0 15px 35px rgba(94, 124, 226, 0.5);
10396
}
10497

10598
.btn.secondary {
99+
font-size: 16px;
106100
background: transparent;
107-
color: #191919;
108-
border: 1px solid #191919;
109-
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
101+
color: #595959;
102+
border: 1px solid #808080;
110103
}
111104

112105
.btn.secondary:hover {
106+
color: #191919;
113107
transform: translateY(-3px);
114108
border-color: #191919;
115-
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
116109
}
117110

118111
/* 动画效果 */
@@ -167,12 +160,10 @@
167160

168161
.title {
169162
font-size: 28px;
170-
letter-spacing: 3px;
171163
}
172164

173165
.subtitle {
174166
font-size: 26px;
175-
letter-spacing: 3px;
176167
}
177168

178169
.description {
@@ -197,13 +188,11 @@
197188

198189
.title {
199190
font-size: 28px;
200-
letter-spacing: 2px;
201191
padding-bottom: 15px;
202192
}
203193

204194
.subtitle {
205195
font-size: 26px;
206-
letter-spacing: 2px;
207196
padding-bottom: 15px;
208197
}
209198

@@ -244,22 +233,19 @@
244233
}
245234

246235
.description {
247-
letter-spacing: 0px;
248236
padding-left: 15px;
249237
padding-right: 15px;
250238
}
251239

252240
.title {
253241
font-size: 22px;
254-
letter-spacing: 1px;
255242
.title-us {
256243
font-size: 24px;
257244
}
258245
}
259246

260247
.subtitle {
261248
font-size: 20px;
262-
letter-spacing: 1px;
263249
}
264250

265251
.feature-title {

‎packages/home/src/views/ai-extension-home/components/HeroSection.vue‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,6 @@ import heroBgPc from "@/assets/images/home/ai-extension-home/banner-img.svg";
6161
display: flex;
6262
justify-content: center;
6363
align-items: center;
64-
65-
img {
66-
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
67-
border-radius: 20px;
68-
width: 90%;
69-
max-width: 1000px;
70-
}
7164
}
7265
7366
.cta-group {

‎packages/home/src/views/next-sdks-home/common.less‎

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
padding-top: 40px !important;
1616
}
1717

18+
.pad-t50 {
19+
padding-top: 50px !important;
20+
}
21+
1822
/* 通用布局 */
1923
.section {
2024
min-height: 100vh;
@@ -52,11 +56,10 @@
5256

5357
/* 通用文字样式（对齐 tiny-vue-home） */
5458
.title {
59+
line-height: 74px;
5560
font-size: 52px;
5661
font-weight: 600;
5762
color: #191919;
58-
letter-spacing: 2px;
59-
line-height: 1.5;
6063
padding-bottom: 32px;
6164
.title-us {
6265
font-size: 56px;
@@ -70,7 +73,6 @@
7073
background: linear-gradient(90deg, #cb43a8 10%, #2c5fef 50%);
7174
-webkit-background-clip: text;
7275
background-clip: text;
73-
letter-spacing: 5px;
7476
-webkit-text-fill-color: transparent;
7577
font-weight: 700;
7678
}
@@ -79,18 +81,15 @@
7981
font-size: 18px;
8082
padding-bottom: 48px;
8183
line-height: 2;
82-
color: #a0a0a0;
83-
letter-spacing: 2px;
84-
font-weight: 400;
84+
color: #595959;
8585
}
8686

8787
.feature-title {
88-
font-size: 36px;
88+
font-size: 40px;
8989
}
9090

9191
.feature-sub-title {
9292
font-size: 20px;
93-
letter-spacing: 2px;
9493
padding-bottom: 0;
9594
}
9695

@@ -104,12 +103,11 @@
104103
padding: 12px 44px;
105104
line-height: 24px;
106105
border-radius: 30px;
107-
font-size: 16px;
106+
font-size: 20px;
108107
font-weight: 400;
109108
text-decoration: none;
110109
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
111110
cursor: pointer;
112-
letter-spacing: 1px;
113111
position: relative;
114112
overflow: hidden;
115113
}
@@ -118,25 +116,23 @@
118116
background: #191919;
119117
color: white;
120118
border: none;
121-
box-shadow: 0 10px 25px rgba(94, 124, 226, 0.3);
122119
}
123120

124121
.btn.primary:hover {
125122
transform: translateY(-3px);
126-
box-shadow: 0 15px 35px rgba(94, 124, 226, 0.5);
127123
}
128124

129125
.btn.secondary {
126+
font-size: 16px;
130127
background: transparent;
131-
color: #191919;
132-
border: 1px solid #191919;
133-
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
128+
color: #595959;
129+
border: 1px solid #808080;
134130
}
135131

136132
.btn.secondary:hover {
133+
color: #191919;
137134
transform: translateY(-3px);
138135
border-color: #191919;
139-
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
140136
}
141137

142138
/* 动画效果 */
@@ -191,12 +187,10 @@
191187
@media (max-width: 1024px) {
192188
.title {
193189
font-size: 28px;
194-
letter-spacing: 3px;
195190
}
196191

197192
.subtitle {
198193
font-size: 26px;
199-
letter-spacing: 3px;
200194
}
201195

202196
.description {
@@ -218,13 +212,11 @@
218212

219213
.title {
220214
font-size: 28px;
221-
letter-spacing: 2px;
222215
padding-bottom: 15px;
223216
}
224217

225218
.subtitle {
226219
font-size: 26px;
227-
letter-spacing: 2px;
228220
padding-bottom: 15px;
229221
}
230222

@@ -270,22 +262,19 @@
270262
}
271263

272264
.description {
273-
letter-spacing: 0px;
274265
padding-left: 15px;
275266
padding-right: 15px;
276267
}
277268

278269
.title {
279270
font-size: 22px;
280-
letter-spacing: 1px;
281271
.title-us {
282272
font-size: 24px;
283273
}
284274
}
285275

286276
.subtitle {
287277
font-size: 20px;
288-
letter-spacing: 1px;
289278
}
290279

291280
.feature-sub-title {

‎packages/home/src/views/next-sdks-home/components/FeatureSection.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,24 +57,24 @@ const props = defineProps({
5757
5858
.feature-text {
5959
.title {
60-
font-size: 40px;
61-
letter-spacing: 2px;
60+
font-size: 36px;
6261
padding-bottom: 0px;
6362
}
6463
6564
.description {
6665
font-size: 20px;
67-
letter-spacing: 2px;
6866
color: #808080;
69-
padding-bottom: 50px;
70-
padding-top: 30px;
67+
padding-bottom: 0px;
68+
padding-top: 32px;
7169
font-family: 微软雅黑;
7270
}
7371
7472
.btn {
7573
background: transparent;
7674
padding: 12px 24px;
7775
font-size: 14px;
76+
margin-top: 32px;
77+
display: inline-block;
7878
}
7979
}
8080

‎packages/home/src/views/next-sdks-home/components/HeroSection.vue‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,12 +68,6 @@ import heroBgPc from "@/assets/images/home/next-sdk-home/banner-img.svg";
6868
justify-content: center;
6969
align-items: center;
7070
animation: fadeInUp 1s ease-out;
71-
72-
img {
73-
width: 1000px;
74-
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
75-
border-radius: 20px;
76-
}
7771
}
7872
7973
.cta-group {

‎packages/home/src/views/next-sdks-home/components/StepItem.vue‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -232,18 +232,17 @@ const copyCode = async (code, index, codeIndex) => {
232232
.step-item {
233233
position: relative;
234234
background: #fff;
235-
padding: 20px 30px 30px 30px;
235+
padding: 0 30px 0 30px;
236236
scroll-margin-top: 120px;
237237
transition: all 0.3s ease;
238-
border-left: 4px solid transparent;
239-
margin-left: -2px;
238+
margin-bottom: 40px;
240239
241240
&:last-child {
242241
margin-bottom: 0;
243242
}
244243
245244
&.step-active {
246-
border-left: 4px solid #1476ff;
245+
border-left: 3px solid #1476ff;
247246
margin-left: -2px;
248247
.step-index {
249248
background: #1476ff;
@@ -255,8 +254,6 @@ const copyCode = async (code, index, codeIndex) => {
255254
}
256255
257256
.step-header {
258-
margin-bottom: 20px;
259-
260257
.feature-sub-title {
261258
display: flex;
262259
position: relative;
@@ -289,7 +286,7 @@ const copyCode = async (code, index, codeIndex) => {
289286
padding-left: 44px;
290287
.step-description {
291288
font-size: 16px;
292-
color: #808080;
289+
color: #595959;
293290
margin-bottom: 16px;
294291
line-height: 1.5;
295292
@@ -319,7 +316,6 @@ const copyCode = async (code, index, codeIndex) => {
319316
border-radius: 8px;
320317
overflow: hidden;
321318
background: #f7f9fc;
322-
border: 1px solid #e1e8ed;
323319
}
324320
325321
.copy-button {
@@ -345,7 +341,7 @@ const copyCode = async (code, index, codeIndex) => {
345341
overflow-x: auto;
346342
font-size: 16px;
347343
line-height: 1.6;
348-
background: #f5f5f5;
344+
background: rgba(245, 245, 245, 1);
349345
350346
:deep(code) {
351347
background: transparent;
@@ -361,10 +357,6 @@ const copyCode = async (code, index, codeIndex) => {
361357
.step-item {
362358
padding: 20px 15px;
363359
}
364-
.step-header {
365-
margin-bottom: 4px;
366-
}
367-
368360
.step-title {
369361
font-size: 16px;
370362
}

0 commit comments

Comments
 (0)