更新记录
1.2.3(2025-09-25)
下载此版本
庆祝图鸟生态模板在dcloud下载量达到 10W+
1.2.2(2024-06-07)
下载此版本
商品详情图新增预览,优化已知bug
1.2.0(2024-01-25)
下载此版本
优化已知bug,优化拖拽图片bug
查看更多
平台兼容性
uni-app(3.6.5)
Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
√ |
× |
√ |
√ |
√ |
× |
√ |
√ |
- |
微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
√ |
- |
- |
- |
- |
- |
- |
- |
- |
× |
× |
说明
企业官网(图鸟模板5),是基于 图鸟UI vue2进行开发的纯前端模板,支持微信小程序、APP和H5。
图鸟UI特点
- 包含基础常用的布局元素,flex、grid、浮动
- 完整一体的配色体系,包含4种色深模式,同时包含4套渐变配色
- 800+风格统一的图标icon,60+精选组件,让开发者可以快速进行开发
- 酷炫常用的页面模板,更有让你眼前一亮的界面效果
- 图片素材语雀便捷下载,图鸟生态共同成长
- 使用文档详尽说明,让你一文读懂图鸟UI
官方链接
图鸟UI 开源项目
使用文档 vue2
页面效果

图鸟UI开源项目(图鸟UI、图鸟vue3、图鸟模板1 2 3 4 5 、图鸟图表 已上传;图鸟模板6 7 8 9 10 暂未上传)

联系作者(微信如下,可备注①进微信群、②bug协助、③商业合作)
tnkewo
微信群内气氛挺不错的,应该或许可能大概,算是为数不多的,专搞技术的前端群,偶尔聊天摸鱼

版权信息
TuniaoUI开源版
遵循Apache
协议,意味着您无需支付任何费用,也无需授权,即可将TuniaoUI开源版应用到您的产品中,但是需要保留TuniaoUI的信息。
图鸟模板生态预览
图鸟UI-模板组件库
图鸟模板1-圈子商圈
<!-- 完成,已完成 -->
图鸟模板2-社区博客
<!-- 完成,已完成 -->
图鸟模板3-凶姐壁纸
<!-- 完成,已检查 -->
图鸟模板4-资讯名片
<!-- 完成,已检查 -->
图鸟模板5-企业官网
<!-- 完成,已检查 -->
图鸟模板6-品牌商城
<!-- 完成,已检查 -->
图鸟模板6-珠宝首饰-延伸版本
<!-- 完成,已检查 -->
图鸟模板7-办公OA
<!-- 完成,已检查 -->
图鸟模板8-盲盒藏品
<!-- 完成,已检查 -->
图鸟模板9-人脉交友
<!-- 完成,已检查 -->
图鸟模板10-猛犸空间
<!-- 完成,已检查 -->
图鸟模板11-教育学院
<!-- 完成,已检查 -->
图鸟模板12-花艺商城
<!-- 完成,已检查 -->
图鸟模板13-视觉商城
<!-- 完成,已检查 -->
图鸟模板14-播兔短剧
<!-- 完成,需要再检查漏了啥没有 -->
图鸟模板15-蒲公英小说
<!-- 完成,已检查 -->
图鸟模板16-作品简历-响应式
<!-- 完成,已检查 -->
<!-- -->
图鸟模板17-游戏社区
<!-- 完成,已检查 -->
图鸟模板18-拟态家居
<!-- 完成,已检查 -->
图鸟模板19-奶茶点餐
<!-- 完成,已检查 -->
图鸟模板20-拼车出行
<!-- 完成,已检查 -->
图鸟模板21-丑猫文学
<!-- 完成,已检查 -->
图鸟模板22-人脉树
<!-- 完成,已检查 -->
图鸟模板23-租赁服务
<!-- 完成,已检查 -->
图鸟模板24-米猪AI
<!-- 完成,已检查 -->
图鸟模板25-考试答题
<!-- 完成,已检查 -->
图鸟模板-零碎模板
<!-- 完成,已检查 -->
图鸟图表-uCharts酷炫模板
<!-- 完成,已检查 -->
图鸟icon-字体图标
<!-- 完成,已检查 -->
<style scoped>
@media screen and (max-width:400px) {
.waterfall {
column-count: 1; /* 设置列数 */
column-gap: 16px; /* 设置列间距 */
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 10px 36px 30px 30px;
}
.waterfall-pc {
column-count: 1; /* 设置列数 */
column-gap: 16px; /* 设置列间距 */
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 10px 36px 30px 30px;
}
}
@media screen and (min-width: 401px) and (max-width: 1200px) {
.waterfall {
column-count: 3; /* 设置列数 */
column-gap: 16px; /* 设置列间距 */
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 10px 36px 30px 30px;
}
.waterfall-pc {
column-count: 1; /* 设置列数 */
column-gap: 16px; /* 设置列间距 */
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 10px 36px 30px 30px;
}
}
@media screen and (min-width: 1201px) {
.waterfall {
column-count: 5; /* 设置列数 */
column-gap: 16px; /* 设置列间距 */
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 10px 36px 30px 30px;
}
.waterfall-pc {
column-count: 2; /* 设置列数 */
column-gap: 16px; /* 设置列间距 */
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 10px 36px 30px 30px;
}
}
.waterfall-icon {
column-count: 1; /* 设置列数 */
column-gap: 16px; /* 设置列间距 */
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 10px 36px 30px 30px;
}
.box {
min-height: 100px;
/* background-color: #f0f0f0; */
margin: 0 0 16px; /* 设置项间距 */
box-sizing: border-box;
break-inside: avoid; /* 防止元素在列中被拆分 */
border: 4px solid #AAAAAA20;
/* border-radius: 10px; */
-webkit-transition: 0.2s;
transition: 0.2s;
}
.box:hover {
border: 4px solid #01BEFF;
/* border-radius: 10px; */
}
.box img {
width: 100%;
height: auto;
display: block;
/* border-radius: 10px; */
overflow: hide
}
</style>