9
9
<span v-for =" label in sub.labels" >{{label}}</span>
10
10
</div>
11
11
</div>
12
- <div v-else class =" cover" :style =" {background: bgColors[Math.floor(Math.random() * bgColors.length)]}" >
12
+ <!-- <div v-else class="cover" :style="{background: bgColors[Math.floor(Math.random() * bgColors.length)]}"> -->
13
+ <div v-else class =" cover" >
13
14
{{sub.title}}
14
15
<div class =" labels" v-if =" sub.labels" >
15
16
<span v-for =" label in sub.labels" >{{label}}</span>
@@ -30,13 +31,15 @@ const list = [
30
31
desc: ' Vue3中文文档,国内CDN加速版' ,
31
32
img: ' ' ,
32
33
title: ' Vue3中文文档' ,
33
- link: ' http://vue3js.cn/docs/zh'
34
+ link: ' http://vue3js.cn/docs/zh' ,
35
+ labels: [' 新上' , ' CDN' ],
34
36
},
35
37
{
36
38
desc: ' 国内CDN加速版' ,
37
39
img: ' ' ,
38
40
title: ' Vue3文档' ,
39
- link: ' http://vue3js.cn/docs/'
41
+ link: ' http://vue3js.cn/docs/' ,
42
+ labels: [' 新上' , ' CDN' ],
40
43
},
41
44
{
42
45
desc: ' Vue3设计理念,动机与目的,上手必读' ,
@@ -60,7 +63,8 @@ const list = [
60
63
desc: ' ' ,
61
64
img: ' ' ,
62
65
title: ' Vue3源码解析筹备中' ,
63
- link: ' /start/'
66
+ link: ' /start/' ,
67
+ labels: [' 进行中' , ' 诚邀加入我们' ],
64
68
},
65
69
]
66
70
},
@@ -117,6 +121,32 @@ const list = [
117
121
},
118
122
]
119
123
},
124
+ {
125
+ title: ' 支持Vue3组件库' ,
126
+ data: [
127
+ {
128
+ desc: ' ant-design-vue 是 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步, 目前支持 Vue 3.0 的 2.0.0 测试版 已发布' ,
129
+ img: ' ' ,
130
+ title: ' Ant-design-vue' ,
131
+ labels: [' PC端' , ' Ant-design' ],
132
+ link: ' https://antdv.com/docs/vue/introduce-cn/'
133
+ },
134
+ {
135
+ desc: ' Vant 是有赞前端团队开源的移动端组件库,于 2016 年开源,已持续维护 4 年时间。目前 Vant 已完成了对 Vue 3.0 的适配工作,并发布了 Vant 3.0 Beta 版本' ,
136
+ img: ' ' ,
137
+ title: ' Vant 3.0' ,
138
+ labels: [' 移动端' ],
139
+ link: ' https://vant-contrib.gitee.io/vant/next'
140
+ },
141
+ {
142
+ desc: ' elementui风格的组件库,Vue3.0 重构版, 没有明确发布计划,目前还在紧急开发中' ,
143
+ img: ' ' ,
144
+ title: ' Element-plus' ,
145
+ labels: [' 移动端' ],
146
+ link: ' https://element-plus.org/#/zh-CN/component/installation'
147
+ }
148
+ ]
149
+ },
120
150
{
121
151
title: ' 开源UI库' ,
122
152
data: [
@@ -266,29 +296,34 @@ export default {
266
296
.sub .cover {
267
297
position : relative ;
268
298
height : 120px ;
269
- background : #fbfbfb ;
299
+ background : #fbfbfb !important ;
270
300
/* border: 1px solid hsla(0,0%,80%,.569); */
271
- border-radius : 5px ;
301
+ border-radius : 5px ;
272
302
font-size : 24px ;
273
303
text-align : center ;
274
304
line-height : 120px ;
275
- color : #fff ;
305
+ color : #000 ;
276
306
transition : all .2s ease-in-out ;
307
+ font-weight : 200 ;
308
+ border : 1px solid #f1f1f1 ;
309
+ /* background: url(https://vue3js.cn/docs/logo.png) no-repeat right bottom; */
310
+ /* background-size: 80px; */
277
311
}
278
312
.sub .cover :hover {
279
313
box-shadow : 0 18px 32px -18px #000 !important ;
280
314
transform : translateY (-3px );
281
315
}
282
316
.sub .desc {
283
- /* position: absolute; */
317
+ /* position: absolute; */
284
318
width : 100% ;
285
- color : #333 ;
319
+ color : #9c9c9c ;
286
320
/* text-shadow: 0 2px 4px rgba(7,17,27,.5); */
287
321
/* font-weight: 700; */
288
322
/* background: rgba(28,31,33,.6); */
289
323
/* bottom: 0; */
290
324
line-height : 28px ;
291
325
padding : 5px 8px ;
326
+ font-weight : 400 ;
292
327
}
293
328
.sub .labels {
294
329
position : absolute ;
@@ -300,11 +335,12 @@ export default {
300
335
}
301
336
.sub .labels span {
302
337
padding : 3px 5px ;
303
- background : rgba ( 0 , 0 , 0 , .5 ) ;
338
+ background : #4CAF50 ;
304
339
color : #fff ;
305
340
display : inline-block ;
306
341
margin-right : 5px ;
307
342
border-radius : 4px ;
308
343
zoom : .8 ;
344
+ font-weight : 500 ;
309
345
}
310
346
</style >
0 commit comments