99 <span v-for =" label in sub.labels"
1010 </div>
1111 </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"
1314 {{sub.title}}
1415 <div class =" labels" v-if =" sub.labels"
1516 <span v-for =" label in sub.labels"
@@ -30,13 +31,15 @@ const list = [
3031 desc: ' Vue3中文文档,国内CDN加速版'
3132 img: ' '
3233 title: ' Vue3中文文档'
33- link: ' http://vue3js.cn/docs/zh'
34+ link: ' http://vue3js.cn/docs/zh'
35+ labels: [' 新上' ' CDN'
3436 },
3537 {
3638 desc: ' 国内CDN加速版'
3739 img: ' '
3840 title: ' Vue3文档'
39- link: ' http://vue3js.cn/docs/'
41+ link: ' http://vue3js.cn/docs/'
42+ labels: [' 新上' ' CDN'
4043 },
4144 {
4245 desc: ' Vue3设计理念,动机与目的,上手必读'
@@ -60,7 +63,8 @@ const list = [
6063 desc: ' '
6164 img: ' '
6265 title: ' Vue3源码解析筹备中'
63- link: ' /start/'
66+ link: ' /start/'
67+ labels: [' 进行中' ' 诚邀加入我们'
6468 },
6569 ]
6670 },
@@ -117,6 +121,32 @@ const list = [
117121 },
118122 ]
119123 },
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+ },
120150 {
121151 title: ' 开源UI库'
122152 data: [
@@ -266,29 +296,34 @@ export default {
266296.sub .cover {
267297 position relative ;
268298 height 120px ;
269- background #fbfbfb ;
299+ background #fbfbfb !important ;
270300 /* border: 1px solid hsla(0,0%,80%,.569); */
271- border-radius 5px ;
301+ border-radius 5px ;
272302 font-size 24px ;
273303 text-align center ;
274304 line-height 120px ;
275- color #fff ;
305+ color #000 ;
276306 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; */
277311}
278312.sub .cover :hover {
279313 box-shadow 0 18px 32px -18px #000 !important ;
280314 transform translateY (-3px );
281315}
282316.sub .desc {
283- /* position: absolute; */
317+ /* position: absolute; */
284318 width 100% ;
285- color #333 ;
319+ color #9c9c9c ;
286320 /* text-shadow: 0 2px 4px rgba(7,17,27,.5); */
287321 /* font-weight: 700; */
288322 /* background: rgba(28,31,33,.6); */
289323 /* bottom: 0; */
290324 line-height 28px ;
291325 padding 5px 8px ;
326+ font-weight 400 ;
292327}
293328.sub .labels {
294329 position absolute ;
@@ -300,11 +335,12 @@ export default {
300335}
301336.sub .labels span {
302337 padding 3px 5px ;
303- background rgba ( 0 , 0 , 0 , .5 ) ;
338+ background #4CAF50 ;
304339 color #fff ;
305340 display inline-block ;
306341 margin-right 5px ;
307342 border-radius 4px ;
308343 zoom .8 ;
344+ font-weight 500 ;
309345}
310346</style >
0 commit comments