mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-03-07 16:24:01 +08:00
更新README文档,更新页面图标,更新协议。
This commit is contained in:
65
README.md
65
README.md
@@ -1,3 +1,64 @@
|
|||||||
<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">Tuniao UI</h3>
|
<p align="center">
|
||||||
<h3 align="center">炫酷且可以快速开发UI框架</h3>
|
<img alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/top.jpg" />
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">Tuniao UI</h3>
|
||||||
|
<h3 align="center">提供丰富组件和炫酷页面的UI框架</h3>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://gitee.com/TSpecific/tuniao-ui/stargazers" target="_blank">
|
||||||
|
<img src="https://svg.hamm.cn/gitee.svg?type=star&user=TSpecific&project=tuniao-ui"/>
|
||||||
|
</a>
|
||||||
|
<a href="https://gitee.com/TSpecific/tuniao-ui/members" target="_blank">
|
||||||
|
<img src="https://svg.hamm.cn/gitee.svg?type=fork&user=TSpecific&project=tuniao-ui"/>
|
||||||
|
</a>
|
||||||
|
<img src="https://svg.hamm.cn/badge.svg?key=Platform&value=uni-app"/>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# 说明
|
||||||
|
|
||||||
|
**图鸟UI**,是基于uni-app进行开发的UI框架,提供丰富的组件进行快速开发,已经支持`H5`和`微信小程序`,包含常用表单组件、信息展示组件等,并提供`丰富的酷炫页面模板`。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# 特点
|
||||||
|
|
||||||
|
- 包含基础常用的布局元素,flex、grid、浮动
|
||||||
|
- 完整一体的配色体系,包含4种色深模式,同时包含4套渐变配色
|
||||||
|
- 300+风格统一的图标icon,后续可继续增加
|
||||||
|
- 30+精选组件,让开发者可以快速进行开发
|
||||||
|
- 酷炫常用的页面模板,更有让你眼前一亮的界面效果
|
||||||
|
- 图片素材语雀便捷下载,图鸟社区共同成长
|
||||||
|
- 使用文档详尽说明,让你一文读懂图鸟UI
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# 链接
|
||||||
|
|
||||||
|
- [图鸟社区](https://www.yuque.com/tuniao)
|
||||||
|
- [使用手册](https://tuniaoui.tuniaokj.com/components/introduce.html)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# UI截图
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/1.jpg" width="300" />
|
||||||
|
<img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/2.jpg" width="300" />
|
||||||
|
<img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/3.jpg" width="300" />
|
||||||
|
<img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/4.jpg" width="300" />
|
||||||
|
<img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/5.jpg" width="300" />
|
||||||
|
<img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/6.jpg" width="300" />
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# 联系作者
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<img alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/bottom.jpg" width="380" />
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ export default {
|
|||||||
url: '/basicPage/color/color'
|
url: '/basicPage/color/color'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'topics',
|
icon: 'font',
|
||||||
title: '图标',
|
title: '图标',
|
||||||
url: '/basicPage/icon/icon'
|
url: '/basicPage/icon/icon'
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -51,24 +51,25 @@
|
|||||||
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="navTuniaoWebsite">
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="navTuniaoWebsite">
|
||||||
<view class="tn-flex tn-flex-col-center">
|
<view class="tn-flex tn-flex-col-center">
|
||||||
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" >
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" >
|
||||||
<view class="tn-icon-discover-fill"></view>
|
<view class="tn-icon-logo-tuniao"></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="tn-margin-left-sm">图鸟官网</view>
|
<view class="tn-margin-left-sm tn-flex-1">图鸟官网</view>
|
||||||
|
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
<view class="tn-flex tn-flex-col-center">
|
<view class="tn-flex tn-flex-col-center">
|
||||||
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white">
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white">
|
||||||
<view class="tn-icon-moon-fill"></view>
|
<view class="tn-icon-gitee"></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="tn-margin-left-sm tn-flex-1">Gitee地址</view>
|
<view class="tn-margin-left-sm tn-flex-1">Gitee地址</view>
|
||||||
<view class="tn-margin-left-sm tn-color-gray">整理文件中</view>
|
<view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="navPlus">
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="navPlus">
|
||||||
<view class="tn-flex tn-flex-col-center">
|
<view class="tn-flex tn-flex-col-center">
|
||||||
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
|
||||||
<view class="tn-icon-trust-fill"></view>
|
<view class="tn-icon-safe-fill"></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="tn-margin-left-sm tn-flex-1">会员协议</view>
|
<view class="tn-margin-left-sm tn-flex-1">会员协议</view>
|
||||||
<view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
|
<view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
|
||||||
@@ -96,7 +97,7 @@
|
|||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="feedback">
|
<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="feedback">
|
||||||
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-7 tn-color-white">
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-13 tn-color-white">
|
||||||
<view class="tn-icon-comment-fill"></view>
|
<view class="tn-icon-comment-fill"></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="tn-margin-left-sm">问题反馈</view>
|
<view class="tn-margin-left-sm">问题反馈</view>
|
||||||
@@ -118,25 +119,25 @@
|
|||||||
tuniaoData: [
|
tuniaoData: [
|
||||||
{
|
{
|
||||||
title: 'View',
|
title: 'View',
|
||||||
icon: 'eye-fill',
|
icon: 'eye',
|
||||||
color: 'indigo',
|
color: 'indigo',
|
||||||
value: '1.22 W'
|
value: '1.22 W'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Star',
|
title: 'Star',
|
||||||
icon: 'star-fill',
|
icon: 'star',
|
||||||
color: 'orange',
|
color: 'orange',
|
||||||
value: '406'
|
value: '406'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Fork',
|
title: 'Fork',
|
||||||
icon: 'group-circle',
|
icon: 'fork',
|
||||||
color: 'purplered',
|
color: 'purplered',
|
||||||
value: '129'
|
value: '129'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Version',
|
title: 'Version',
|
||||||
icon: 'trusty-fill',
|
icon: 'trusty',
|
||||||
color: 'green',
|
color: 'green',
|
||||||
value: '1.0.0'
|
value: '1.0.0'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</tn-nav-bar>
|
</tn-nav-bar>
|
||||||
|
|
||||||
<view class="tn-text-center tn-margin-xl tn-text-lg plus-box" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
<view class="tn-text-center tn-margin tn-text-lg plus-box" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||||
<view class="plus-text">
|
<view class="plus-text">
|
||||||
<view class="tn-text-bold">图鸟UI小程序,免费开源可商用</view>
|
<view class="tn-text-bold">图鸟UI小程序,免费开源可商用</view>
|
||||||
<view class="tn-margin-bottom-xl">(会员有更多福利鸭)</view>
|
<view class="tn-margin-bottom-xl">(会员有更多福利鸭)</view>
|
||||||
@@ -24,11 +24,6 @@
|
|||||||
<view class="tn-margin-bottom-xl">(大约等于两个前端页面价格)</view>
|
<view class="tn-margin-bottom-xl">(大约等于两个前端页面价格)</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="plus-text">
|
|
||||||
<view class="tn-text-bold">或许会员人数达到100+叭</view>
|
|
||||||
<view class="tn-margin-bottom-xl">(当然接项目恰饭最实在)</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="plus-text">
|
<view class="plus-text">
|
||||||
<view class="tn-text-bold">不断更新酷炫组件以及页面模板</view>
|
<view class="tn-text-bold">不断更新酷炫组件以及页面模板</view>
|
||||||
<view class="tn-margin-bottom-xl">(偶尔恰饭时常更新啦)</view>
|
<view class="tn-margin-bottom-xl">(偶尔恰饭时常更新啦)</view>
|
||||||
@@ -40,35 +35,48 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="plus-text">
|
<view class="plus-text">
|
||||||
<view class="tn-text-bold">使用手册 + 图片素材 + 意见反馈 + Bug提交</view>
|
<view class="tn-text-bold">图鸟北北,微信号:<text class="tn-text-bold tn-text-xxl">tnkewo</text> </view>
|
||||||
<view class="tn-margin-bottom-xl">(https://www.yuque.com/tuniao)</view>
|
<view class="">(如需入群,可备注:进微信群)</view>
|
||||||
|
<view class="">(如需合作,可备注:商业合作)</view>
|
||||||
|
<view class="tn-margin-bottom-xl">(如需会员,可备注:咨询会员)</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="plus-text">
|
<view class="plus-text">
|
||||||
<view class="tn-text-bold">如需拓展人脉,可进群与群友合作</view>
|
<view class="tn-text-bold">入群须知,群内禁止黄赌毒+广告+吵架</view>
|
||||||
<view class="tn-margin-bottom-xl">(群内禁止黄赌毒+吵架,我秒怂)</view>
|
<view class="tn-margin-bottom-xl">(可进群与群友合作,拓展人脉)</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="plus-text">
|
<view class="plus-text">
|
||||||
<view class="tn-text-bold">项目初衷是拓展业务,寻求商务合作</view>
|
<view class="tn-text-bold">会员人数会达到50+叭</view>
|
||||||
<view class="">( 图鸟北北,微信号:tnkewo )</view>
|
<view class="tn-margin-bottom-xl">(希望够垫付服务器+CDN支出)</view>
|
||||||
<view class="">(如需入群,可备注:进微信群)</view>
|
</view>
|
||||||
<view class="">(如需合作,可备注:商业合作)</view>
|
|
||||||
<view class="tn-margin-bottom-xl">(如需聊天,可备注:咨询聊天)</view>
|
<view class="plus-text">
|
||||||
|
<view class="tn-text-bold">也希望大家能喜欢这个项目</view>
|
||||||
|
<view class="tn-margin-bottom-xl">(不喜勿喷,东东还在努力成长)</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="plus-text">
|
<view class="plus-text">
|
||||||
<view class="tn-text-bold">期待你的5星好评</view>
|
<view class="tn-text-bold">期待你的5星好评</view>
|
||||||
<view class="tn-margin-bottom-xl">(尽管图鸟UI不是我最完美的作品)</view>
|
<view class="tn-margin-bottom-xl">(尽管图鸟UI不是我最完美的作品)</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="plus-text">
|
<view class="plus-text">
|
||||||
<view class="tn-text-bold">待补充....</view>
|
<view class="tn-text-bold">使用手册 + 图片素材 + 意见反馈 + Bug提交</view>
|
||||||
|
<view class="tn-margin-bottom-xl">(https://www.yuque.com/tuniao)</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="plus-text">
|
||||||
|
<view class="tn-text-bold">项目正式开始于2021年10月,于12月30上线</view>
|
||||||
|
<view class="tn-margin-bottom-xl">(期间断断续续的在接单恰饭)</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="plus-text">
|
<view class="plus-text">
|
||||||
<view class="tn-text-bold">待补充....</view>
|
<view class="tn-text-bold">灵感来源于我的上一个原创项目</view>
|
||||||
|
<view class="tn-margin-bottom-xl">(项目初衷是拓展业务,寻求商务合作)</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="plus-text">
|
<view class="plus-text">
|
||||||
<view class="tn-text-bold">待补充....</view>
|
<view class="tn-text-bold">感恩你的支持</view>
|
||||||
|
<view class="tn-margin-bottom-xl"></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="plus-text">
|
<view class="plus-text">
|
||||||
<view class="tn-text-bold">待补充....</view>
|
<view class="tn-text-bold">待补充....</view>
|
||||||
@@ -113,7 +121,7 @@
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||||
|
|
||||||
/* List */
|
/* 内容 开始 */
|
||||||
.plus-box {
|
.plus-box {
|
||||||
counter-reset: index;
|
counter-reset: index;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@@ -124,7 +132,6 @@
|
|||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* List element */
|
|
||||||
.plus-text {
|
.plus-text {
|
||||||
counter-increment: index;
|
counter-increment: index;
|
||||||
display: initial;
|
display: initial;
|
||||||
@@ -135,7 +142,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Element counter */
|
|
||||||
.plus-text::before {
|
.plus-text::before {
|
||||||
content: counters(index, ".", decimal-leading-zero);
|
content: counters(index, ".", decimal-leading-zero);
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
@@ -143,7 +149,6 @@
|
|||||||
font-feature-settings: "tnum";
|
font-feature-settings: "tnum";
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -107,12 +107,12 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="tn-padding-sm tn-margin-xs">
|
<view class="tn-padding-sm tn-margin-xs">
|
||||||
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
|
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
|
||||||
<view class="tn-icon-discover-fill"></view>
|
<view class="tn-icon-sina"></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="tn-padding-sm tn-margin-xs">
|
<view class="tn-padding-sm tn-margin-xs">
|
||||||
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
|
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
|
||||||
<view class="tn-icon-gloves-fill"></view>
|
<view class="tn-icon-qq"></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -110,12 +110,12 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="tn-padding-sm tn-margin-xs">
|
<view class="tn-padding-sm tn-margin-xs">
|
||||||
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
|
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
|
||||||
<view class="tn-icon-discover-fill"></view>
|
<view class="tn-icon-sina"></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="tn-padding-sm tn-margin-xs">
|
<view class="tn-padding-sm tn-margin-xs">
|
||||||
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-cyan tn-color-white">
|
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
|
||||||
<view class="tn-icon-gloves-fill"></view>
|
<view class="tn-icon-qq"></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
Reference in New Issue
Block a user