Skip to content

Commit a78de9b

Browse files
James-9696James-9696
authored
fix:(tiny-vue): update style (#129)
1 parent 674e8dd commit a78de9b

6 files changed

Lines changed: 179 additions & 83 deletions

File tree

‎packages/home/src/views/tiny-vue-home/common.less‎

Lines changed: 100 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,21 @@
77
padding: 0;
88
background-color: var(--bg-color);
99

10+
.feature-title {
11+
margin-top: 20px;
12+
font-size: 40px;
13+
line-height:54px;
14+
font-weight: 700;
15+
}
16+
17+
.feature-text-description {
18+
font-size: 16px;
19+
line-height: 32px;
20+
font-weight: 400;
21+
letter-spacing: 0px;
22+
color: #808080;
23+
}
24+
1025
.container {
1126
width: 100%;
1227
overflow-x: hidden;
@@ -79,6 +94,58 @@
7994
justify-content: center;
8095
}
8196

97+
.mt-100 {
98+
margin-top: 100px;
99+
}
100+
101+
.mt-20 {
102+
margin-top: 20px;
103+
}
104+
105+
.mt-40 {
106+
margin-top: 40px;
107+
}
108+
109+
.mt-60 {
110+
margin-top: 60px;
111+
}
112+
113+
.mt-70 {
114+
margin-top: 70px;
115+
}
116+
117+
.mb-60 {
118+
margin-bottom: 60px;
119+
}
120+
121+
.mb-70 {
122+
margin-bottom: 70px;
123+
}
124+
125+
.mb-40 {
126+
margin-bottom: 40px;
127+
}
128+
129+
.mb-100 {
130+
margin-bottom: 100px;
131+
}
132+
133+
.pd-space {
134+
padding: 16px 32px 40px;
135+
}
136+
137+
.pd-space-title {
138+
padding: 0px 32px;
139+
}
140+
141+
.pb-130 {
142+
padding-bottom: 130px;
143+
}
144+
145+
.pb-100 {
146+
padding-bottom: 100px;
147+
}
148+
82149
.flex-row-column {
83150
flex-direction: column;
84151
}
@@ -181,7 +248,18 @@
181248

182249
.feature-sub-title {
183250
font-size: 20px;
184-
padding-bottom: 0;
251+
letter-spacing: 1px;
252+
padding: 16px 0 20px 0;
253+
line-height: 28px;
254+
font-weight: 300;
255+
color: #808080;
256+
}
257+
258+
.feature-desc-title {
259+
color: #191919;
260+
font-weight: 600;
261+
font-size: 22px;
262+
letter-spacing: 0;
185263
}
186264

187265
.feature-header {
@@ -191,28 +269,30 @@
191269
justify-content: center;
192270
max-width: 1400px;
193271
width: 100%;
272+
margin-top: 10px;
194273
}
195274

196275
.feature-content {
197-
position: relative;
198276
z-index: 1;
199277
display: flex;
200278
align-items: baseline;
201279
justify-content: space-between;
202280
max-width: 1400px;
203281
width: 100%;
204282
height: 100%;
283+
gap: 40px;
205284
}
206285

207286
.feature-text {
208287
flex: 1;
209-
padding: 0 20px;
288+
padding: 0 32px;
210289
}
211290

212291
.feature-visual {
213292
display: flex;
214293
justify-content: center;
215294
align-items: center;
295+
margin-top: 20px;
216296
}
217297

218298
.floating-img {
@@ -232,20 +312,29 @@
232312
display: flex;
233313
align-items: center;
234314
gap: 8px;
235-
padding-bottom: 20px;
315+
padding-bottom: 16px;
316+
317+
img {
318+
width: 24px;
319+
height: 24px;
320+
}
236321
}
237322

238323
.title-logo-text {
239-
font-size: 16px;
240-
color: #808080;
324+
font-size: 24px;
325+
color: #595959;
326+
letter-spacing: 0px;
327+
line-height: 36px;
328+
font-weight: 400;
241329
}
242330

243331
.title-number {
244-
font-size: 44px;
332+
font-size: 52px;
245333
font-weight: 600;
246334
color: #1476ff;
247-
line-height: 1.2;
248-
padding-bottom: 20px;
335+
letter-spacing: 0;
336+
line-height: 74px;
337+
padding-bottom: 8px;
249338
}
250339

251340
/* ==================== 响应式适配 ==================== */
@@ -308,7 +397,7 @@
308397
font-size: 14px;
309398
}
310399

311-
.feature-sub-title {
400+
.feature-sub-title, .feature-desc-title {
312401
font-size: 18px;
313402
padding-bottom: 0px;
314403
}
@@ -346,7 +435,7 @@
346435
font-size: 20px;
347436
}
348437

349-
.feature-sub-title {
438+
.feature-sub-title, .feature-desc-title {
350439
font-size: 16px;
351440
}
352441

‎packages/home/src/views/tiny-vue-home/components/ComponentShowcase.vue‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -109,13 +109,13 @@ const anchorData = reactive([
109109
</script>
110110

111111
<template>
112-
<section class="feature-section section bg-tech-2 bg-color-1">
112+
<section class="feature-section section bg-tech-2 bg-color-1 pb-100">
113113
<div class="feature-header fade-in-up">
114-
<h2 class="title feature-title">丰富的组件</h2>
115-
<p class="description">持续更新迭代，满足企业级应用需求。</p>
114+
<h2 class="feature-title mt-60">丰富的组件</h2>
115+
<p class="description feature-sub-title text-center">持续更新迭代，满足企业级应用需求。</p>
116116
</div>
117117
<div
118-
class="flex-row"
118+
class="flex-row mt-100 mb-60"
119119
:style="{ width: isMobile ? '100%' : '550px', gap: isMobile ? '20px' : '120px' }"
120120
>
121121
<div class="flex-row-column">
@@ -443,12 +443,12 @@ const anchorData = reactive([
443443
padding: 30px 25px;
444444
background: #fff;
445445
border-radius: 16px;
446-
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
446+
box-shadow: 2px 2px 16px 8px rgba(126, 141, 145, 0.09);
447447
flex: 1;
448448
449449
&:hover {
450-
transform: scale(1.05);
451-
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
450+
transform: scale(1.02);
451+
box-shadow: 0 8px 32px 0 rgba(126, 141, 145, 0.09);
452452
}
453453
454454
.tiny-tree-menu:before {
@@ -472,11 +472,11 @@ const anchorData = reactive([
472472
}
473473
474474
.component-demo-title {
475-
font-size: 20px;
476-
font-weight: 600;
475+
font-size: 18px;
476+
font-weight: 700;
477477
color: #191919;
478-
letter-spacing: 2px;
479-
line-height: 1.2;
478+
letter-spacing: 0px;
479+
line-height: 32px;
480480
padding-bottom: 20px;
481481
}
482482
@@ -494,6 +494,12 @@ const anchorData = reactive([
494494
width: 100%;
495495
}
496496
497+
@media (max-width: 1670px) {
498+
.component-demo-container {
499+
zoom: 0.9;
500+
}
501+
}
502+
497503
/* 响应式适配 */
498504
@media (max-width: 1024px) {
499505
.component-demo-container {
@@ -556,10 +562,6 @@ const anchorData = reactive([
556562
max-width: 100%;
557563
text-align: center;
558564
}
559-
560-
.component-demo-title {
561-
font-size: 18px;
562-
}
563565
}
564566
565567
@media (max-width: 480px) {
@@ -576,10 +578,6 @@ const anchorData = reactive([
576578
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
577579
}
578580
}
579-
580-
.component-demo-title {
581-
font-size: 18px;
582-
}
583581
}
584582
}
585583
</style>

‎packages/home/src/views/tiny-vue-home/components/ConfigArchitecture.vue‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -33,22 +33,22 @@ const isMobile = inject("isMobile");
3333

3434
<template>
3535
<section class="feature-section section bg-tech-1 min-h75">
36-
<div class="feature-header pad-t40 fade-in-up">
37-
<h2 class="title feature-title">配置式组件</h2>
38-
<p class="description">
36+
<div class="feature-header pad-t40 fade-in-up mb-40">
37+
<h2 class="feature-title">配置式组件</h2>
38+
<p class="feature-sub-title text-center">
3939
支持模板式和配置式两种使用方式， 配置式组件让复杂场景的开发更简单高效。
4040
</p>
4141
</div>
4242
<div class="feature-content pad-t40 fade-in-up">
43-
<div class="flex-row gap-30 config-content">
43+
<div class="flex-row gap-30 config-content pb-130">
4444
<div
4545
v-for="(item, index) in items"
4646
:key="index"
47-
class="flex-row flex-row-column gap-30 config-item"
47+
class="flex-row flex-row-column config-item"
4848
>
49-
<img :src="item.icon" :alt="item.title" />
50-
<div class="title feature-sub-title pad-0-30 pad-t40">{{ item.title }}</div>
51-
<div class="description feature-text-description pad-0-30">
49+
<img :src="item.icon" :alt="item.title" class="feature-icon"/>
50+
<div class="feature-desc-title pd-space-title">{{ item.title }}</div>
51+
<div class="feature-text-description pd-space">
5252
{{ item.description }}
5353
</div>
5454
</div>
@@ -65,15 +65,13 @@ const isMobile = inject("isMobile");
6565
6666
.config-item {
6767
background-color: #fff;
68-
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
69-
transition: all 0.3s ease;
68+
box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.05);
7069
align-items: baseline;
71-
gap: 20px;
7270
border-radius: 20px;
7371
7472
&:hover {
75-
transform: translateY(-5px);
76-
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
73+
transform: scale(1.02);
74+
box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.05);
7775
}
7876
7977
.description {
@@ -84,10 +82,11 @@ const isMobile = inject("isMobile");
8482
}
8583
8684
img {
87-
width: 100%;
85+
width: stretch;
8886
height: auto;
8987
border-radius: 20px 20px 0 0;
9088
object-fit: cover;
89+
margin-bottom: 48px;
9190
}
9291
9392
.title {

‎packages/home/src/views/tiny-vue-home/components/CrossPlatformFeature.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const features = [
2626
<template>
2727
<section class="feature-section section bg-tech-1 pad-t40 content-around">
2828
<div class="feature-header pad-t40 fade-in-up">
29-
<h2 class="title feature-title">跨端跨框架</h2>
29+
<h2 class="feature-title">跨端跨框架</h2>
3030
<p class="description feature-sub-title text-center">
3131
相同的组件代码可在不同的Vue版本和设备平台上运行，显著降低了企业应用的维护成本，无需重复开发，大幅提升开发效率
3232
</p>
@@ -35,9 +35,9 @@ const features = [
3535
<div v-for="(item, index) in features" :key="index" class="feature-text">
3636
<div class="title-logo">
3737
<img :src="item.icon" class="feature-icon" />
38-
<h2 class="title feature-sub-title">{{ item.title }}</h2>
38+
<h2 class="feature-desc-title">{{ item.title }}</h2>
3939
</div>
40-
<p class="description feature-text-description">{{ item.description }}</p>
40+
<p class="feature-text-description">{{ item.description }}</p>
4141
</div>
4242
</div>
4343
<div class="feature-visual pad-t40 fade-in-up">

0 commit comments

Comments
 (0)