更新记录

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

页面效果

图鸟官网-0

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

开源项目

联系作者(微信如下,可备注①进微信群、②bug协助、③商业合作)

tnkewo

微信群内气氛挺不错的,应该或许可能大概,算是为数不多的,专搞技术的前端群,偶尔聊天摸鱼

作者微信 tnkewo

版权信息

TuniaoUI开源版遵循Apache协议,意味着您无需支付任何费用,也无需授权,即可将TuniaoUI开源版应用到您的产品中,但是需要保留TuniaoUI的信息。

图鸟模板生态预览

图鸟UI-模板组件库
<!-- 完成,已检查 -->
图鸟模板1-圈子商圈
<!-- 完成,已完成 -->
<!-- tabbar -->
图鸟模板2-社区博客
<!-- 完成,已完成 -->
<!-- tabbar -->
图鸟模板3-凶姐壁纸
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板4-资讯名片
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板5-企业官网
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板6-品牌商城
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板6-珠宝首饰-延伸版本
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板7-办公OA
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板8-盲盒藏品
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板9-人脉交友
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板10-猛犸空间
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板11-教育学院
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板12-花艺商城
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板13-视觉商城
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板14-播兔短剧
<!-- 完成,需要再检查漏了啥没有 -->
<!-- tabbar -->
图鸟模板15-蒲公英小说
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板16-作品简历-响应式
<!-- 完成,已检查 -->
<!--
-->
图鸟模板17-游戏社区
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板18-拟态家居
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板19-奶茶点餐
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板20-拼车出行
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板21-丑猫文学
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板22-人脉树
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板23-租赁服务
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板24-米猪AI
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板25-考试答题
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟模板-零碎模板
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟图表-uCharts酷炫模板
<!-- 完成,已检查 -->
<!-- tabbar -->
图鸟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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议