molong/tuniao-ui
1
0
Fork 0
mirror of https://gitee.com/TSpecific/tuniao-ui.git synced 2026-03-07 00:04:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新图标库

Browse Source 
修复已知bug
This commit is contained in:
jaylen
2022-06-06 13:10:28 +08:00
parent 81579ccee5
commit 1e087b5ac3
226 changed files with 51832 additions and 46044 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
basicPage/avatar/avatar.vue
View File

@@ -1,145 +1,145 @@
<template>
<view class="basic-avatar tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>头像</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="tn-margin-sm">
<tn-avatar></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar backgroundColor="#FFFFFF"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar icon="link" backgroundColor="#FFFFFF"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar text="TN" backgroundColor="#FFFFFF"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar :shadow="true" :src="src"></tn-avatar>
</view>
</view>
</demo-title>
<demo-title title="大小">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="tn-margin-sm">
<tn-avatar size="sm" :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar size="lg" :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar size="xl" :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar size="160rpx" :src="src"></tn-avatar>
</view>
</view>
</demo-title>
<demo-title title="形状">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="tn-margin-sm">
<tn-avatar shape="circle" :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar shape="square" :src="src"></tn-avatar>
</view>
</view>
</demo-title>
<demo-title title="边框">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="tn-margin-sm">
<tn-avatar :border="true" :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar :border="true" borderColor="#01BEFF" :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar :border="true" borderColor="#01BEFF" :borderSize="4" :src="src"></tn-avatar>
</view>
</view>
</demo-title>
<demo-title title="角标">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="tn-margin-sm">
<tn-avatar :badge="true" badgeText="99+" :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar :badge="true" badgeIcon="vip" :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar :badge="true" badgeIcon="vip" badgeBgColor="transparent" badgeColor="tn-color-orange" :badgeSize="40" :badgePosition="[-8, 18]" :src="src"></tn-avatar>
</view>
</view>
</demo-title>
<demo-title title="头像组">
<view class="tn-margin-sm">
<tn-avatar-group :lists="groupList"></tn-avatar-group>
</view>
<view class="tn-margin-sm">
<tn-avatar-group :lists="groupList" shape="shape"></tn-avatar-group>
</view>
<view class="tn-margin-sm">
<tn-avatar-group :lists="groupList" size="lg"></tn-avatar-group>
</view>
<view class="tn-margin-sm">
<tn-avatar-group :lists="groupList" size="lg" :gap="0.5"></tn-avatar-group>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicAvatar',
components: {demoTitle},
data() {
return {
src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai4.jpg',
groupList: [
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
{text: 'TN'},
{icon: 'logo-tuniao'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
]
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.basic-avatar {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>
<template>
<view class="basic-avatar tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>头像</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="tn-margin-sm">
<tn-avatar></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar backgroundColor="#FFFFFF"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar icon="link" backgroundColor="#FFFFFF"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar text="TN" backgroundColor="#FFFFFF"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar :shadow="true" :src="src"></tn-avatar>
</view>
</view>
</demo-title>
<demo-title title="大小">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="tn-margin-sm">
<tn-avatar size="sm" :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar size="lg" :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar size="xl" :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar size="160rpx" :src="src"></tn-avatar>
</view>
</view>
</demo-title>
<demo-title title="形状">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="tn-margin-sm">
<tn-avatar shape="circle" :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar shape="square" :src="src"></tn-avatar>
</view>
</view>
</demo-title>
<demo-title title="边框">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="tn-margin-sm">
<tn-avatar :border="true" :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar :border="true" borderColor="#01BEFF" :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar :border="true" borderColor="#01BEFF" :borderSize="4" :src="src"></tn-avatar>
</view>
</view>
</demo-title>
<demo-title title="角标">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="tn-margin-sm">
<tn-avatar :badge="true" badgeText="99+" :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar :badge="true" badgeIcon="vip" :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar :badge="true" badgeIcon="vip" badgeBgColor="transparent" badgeColor="tn-color-orange" :badgeSize="40" :badgePosition="[-8, 18]" :src="src"></tn-avatar>
</view>
</view>
</demo-title>
<demo-title title="头像组">
<view class="tn-margin-sm">
<tn-avatar-group :lists="groupList"></tn-avatar-group>
</view>
<view class="tn-margin-sm">
<tn-avatar-group :lists="groupList" shape="shape"></tn-avatar-group>
</view>
<view class="tn-margin-sm">
<tn-avatar-group :lists="groupList" size="lg"></tn-avatar-group>
</view>
<view class="tn-margin-sm">
<tn-avatar-group :lists="groupList" size="lg" :gap="0.5"></tn-avatar-group>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicAvatar',
components: {demoTitle},
data() {
return {
src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai4.jpg',
groupList: [
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
{text: 'TN'},
{icon: 'logo-tuniao'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
]
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.basic-avatar {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>

208
basicPage/badge/badge.vue
View File

@@ -1,105 +1,105 @@
<template>
<view class="basic-badge tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>微标</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<tn-badge :dot="true" margin="10rpx 10rpx"><text>0</text></tn-badge>
<tn-badge margin="10rpx 10rpx"><text>0</text></tn-badge>
<tn-badge margin="10rpx 10rpx"><text>99</text></tn-badge>
<tn-badge margin="10rpx 10rpx"><text>99+</text></tn-badge>
</view>
</demo-title>
<demo-title title="大小">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<tn-badge :dot="true" :radius="30" margin="10rpx 10rpx"><text>0</text></tn-badge>
<tn-badge :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
<tn-badge :radius="60" :fontSize="30" margin="10rpx 10rpx"><text>99</text></tn-badge>
<tn-badge :fontSize="30" padding="10rpx 30rpx" margin="10rpx 10rpx"><text>99+</text></tn-badge>
</view>
</demo-title>
<demo-title title="颜色">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<tn-badge backgroundColor="#01BEFF" :dot="true" :radius="30" margin="10rpx 10rpx"><text>0</text></tn-badge>
<tn-badge backgroundColor="rgba(1, 190, 255, 0.8)" fontColor="#FFFFFF" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
<tn-badge backgroundColor="tn-bg-teal" fontColor="tn-color-white" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
<tn-badge backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
<tn-badge backgroundColor="tn-main-gradient-indigo" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
</view>
</demo-title>
<demo-title title="微标使用">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" >
<text>99+</text>
</tn-badge>
</view>
<view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" :translateCenter="false">
<text>99+</text>
</tn-badge>
</view>
<view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" top="-18rpx" right="20rpx">
<text>99+</text>
</tn-badge>
</view>
</view>
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap tn-margin-top">
<view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" ></tn-badge>
</view>
<view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" :translateCenter="false"></tn-badge>
</view>
<view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" top="-18rpx" right="20rpx"></tn-badge>
</view>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicBadge',
components: {demoTitle},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.basic-badge {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
.badge-demo {
position: relative;
width: 160rpx;
height: 160rpx;
background-color: #FFFFFF;
margin: 18rpx 20rpx;
}
<template>
<view class="basic-badge tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>微标</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<tn-badge :dot="true" margin="10rpx 10rpx"><text>0</text></tn-badge>
<tn-badge margin="10rpx 10rpx"><text>0</text></tn-badge>
<tn-badge margin="10rpx 10rpx"><text>99</text></tn-badge>
<tn-badge margin="10rpx 10rpx"><text>99+</text></tn-badge>
</view>
</demo-title>
<demo-title title="大小">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<tn-badge :dot="true" :radius="30" margin="10rpx 10rpx"><text>0</text></tn-badge>
<tn-badge :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
<tn-badge :radius="60" :fontSize="30" margin="10rpx 10rpx"><text>99</text></tn-badge>
<tn-badge :fontSize="30" padding="10rpx 30rpx" margin="10rpx 10rpx"><text>99+</text></tn-badge>
</view>
</demo-title>
<demo-title title="颜色">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<tn-badge backgroundColor="#01BEFF" :dot="true" :radius="30" margin="10rpx 10rpx"><text>0</text></tn-badge>
<tn-badge backgroundColor="rgba(1, 190, 255, 0.8)" fontColor="#FFFFFF" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
<tn-badge backgroundColor="tn-bg-teal" fontColor="tn-color-white" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
<tn-badge backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
<tn-badge backgroundColor="tn-main-gradient-indigo" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
</view>
</demo-title>
<demo-title title="微标使用">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" >
<text>99+</text>
</tn-badge>
</view>
<view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" :translateCenter="false">
<text>99+</text>
</tn-badge>
</view>
<view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" top="-18rpx" right="20rpx">
<text>99+</text>
</tn-badge>
</view>
</view>
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap tn-margin-top">
<view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" ></tn-badge>
</view>
<view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" :translateCenter="false"></tn-badge>
</view>
<view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" top="-18rpx" right="20rpx"></tn-badge>
</view>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicBadge',
components: {demoTitle},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.basic-badge {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
.badge-demo {
position: relative;
width: 160rpx;
height: 160rpx;
background-color: #FFFFFF;
margin: 18rpx 20rpx;
}
</style>

280
basicPage/border/border.vue
View File

@@ -1,141 +1,141 @@
<template>
<view class="basic-border tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>边框</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="普通边框">
<view class="border-content tn-border-solid">
<view>四周边框</view>
</view>
<view class="border-content tn-border-solid-top">
<view>顶部边框</view>
</view>
<view class="border-content tn-border-solid-right">
<view>右边边框</view>
</view>
<view class="border-content tn-border-solid-bottom">
<view>下面边框</view>
</view>
<view class="border-content tn-border-solid-left">
<view>左边边框</view>
</view>
</demo-title>
<demo-title title="加粗边框">
<view class="border-content tn-border-solids">
<view>四周边框</view>
</view>
<view class="border-content tn-border-solids-top">
<view>顶部边框</view>
</view>
<view class="border-content tn-border-solids-right">
<view>右边边框</view>
</view>
<view class="border-content tn-border-solids-bottom">
<view>下面边框</view>
</view>
<view class="border-content tn-border-solids-left">
<view>左边边框</view>
</view>
</demo-title>
<demo-title title="虚线边框">
<view class="border-content tn-border-dashed">
<view>四周边框</view>
</view>
<view class="border-content tn-border-dashed-top">
<view>顶部边框</view>
</view>
<view class="border-content tn-border-dashed-right">
<view>右边边框</view>
</view>
<view class="border-content tn-border-dashed-bottom">
<view>下面边框</view>
</view>
<view class="border-content tn-border-dashed-left">
<view>左边边框</view>
</view>
</demo-title>
<demo-title title="隐藏某一边框">
<view class="border-content tn-border-solid tn-none-border-top">
<view>隐藏上边框</view>
</view>
<view class="border-content tn-border-solid tn-none-border-right">
<view>隐藏右边框</view>
</view>
<view class="border-content tn-border-solid tn-none-border-bottom">
<view>隐藏下边框</view>
</view>
<view class="border-content tn-border-solid tn-none-border-left">
<view>隐藏左边框</view>
</view>
<view class="border-content tn-border-dashed tn-none-border-top">
<view>隐藏上边框</view>
</view>
<view class="border-content tn-border-dashed tn-none-border-right">
<view>隐藏右边框</view>
</view>
<view class="border-content tn-border-dashed tn-none-border-bottom">
<view>隐藏下边框</view>
</view>
<view class="border-content tn-border-dashed tn-none-border-left">
<view>隐藏左边框</view>
</view>
</demo-title>
<demo-title title="颜色">
<view class="border-content tn-border-solid tn-border-indigo">
</view>
<view class="border-content tn-border-solids tn-border-green">
</view>
<view class="border-content tn-border-dashed tn-border-purplered">
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicBorder',
components: {demoTitle},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.basic-border {
min-height: 100vh;
}
.border-content {
display: flex;
align-items: center;
justify-content: center;
height: 80rpx;
background-color: #FFFFFF;
margin: 30rpx 0rpx;
}
<template>
<view class="basic-border tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>边框</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="普通边框">
<view class="border-content tn-border-solid">
<view>四周边框</view>
</view>
<view class="border-content tn-border-solid-top">
<view>顶部边框</view>
</view>
<view class="border-content tn-border-solid-right">
<view>右边边框</view>
</view>
<view class="border-content tn-border-solid-bottom">
<view>下面边框</view>
</view>
<view class="border-content tn-border-solid-left">
<view>左边边框</view>
</view>
</demo-title>
<demo-title title="加粗边框">
<view class="border-content tn-border-solids">
<view>四周边框</view>
</view>
<view class="border-content tn-border-solids-top">
<view>顶部边框</view>
</view>
<view class="border-content tn-border-solids-right">
<view>右边边框</view>
</view>
<view class="border-content tn-border-solids-bottom">
<view>下面边框</view>
</view>
<view class="border-content tn-border-solids-left">
<view>左边边框</view>
</view>
</demo-title>
<demo-title title="虚线边框">
<view class="border-content tn-border-dashed">
<view>四周边框</view>
</view>
<view class="border-content tn-border-dashed-top">
<view>顶部边框</view>
</view>
<view class="border-content tn-border-dashed-right">
<view>右边边框</view>
</view>
<view class="border-content tn-border-dashed-bottom">
<view>下面边框</view>
</view>
<view class="border-content tn-border-dashed-left">
<view>左边边框</view>
</view>
</demo-title>
<demo-title title="隐藏某一边框">
<view class="border-content tn-border-solid tn-none-border-top">
<view>隐藏上边框</view>
</view>
<view class="border-content tn-border-solid tn-none-border-right">
<view>隐藏右边框</view>
</view>
<view class="border-content tn-border-solid tn-none-border-bottom">
<view>隐藏下边框</view>
</view>
<view class="border-content tn-border-solid tn-none-border-left">
<view>隐藏左边框</view>
</view>
<view class="border-content tn-border-dashed tn-none-border-top">
<view>隐藏上边框</view>
</view>
<view class="border-content tn-border-dashed tn-none-border-right">
<view>隐藏右边框</view>
</view>
<view class="border-content tn-border-dashed tn-none-border-bottom">
<view>隐藏下边框</view>
</view>
<view class="border-content tn-border-dashed tn-none-border-left">
<view>隐藏左边框</view>
</view>
</demo-title>
<demo-title title="颜色">
<view class="border-content tn-border-solid tn-border-indigo">
</view>
<view class="border-content tn-border-solids tn-border-green">
</view>
<view class="border-content tn-border-dashed tn-border-purplered">
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicBorder',
components: {demoTitle},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.basic-border {
min-height: 100vh;
}
.border-content {
display: flex;
align-items: center;
justify-content: center;
height: 80rpx;
background-color: #FFFFFF;
margin: 30rpx 0rpx;
}
</style>

202
basicPage/button/button.vue
View File

@@ -1,109 +1,109 @@
<template>
<view class="basic-button tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>按钮</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础">
<tn-button>按钮</tn-button>
</demo-title>
<demo-title title="大小">
<view>
<tn-button size="sm" margin="10rpx 10rpx">按钮</tn-button>
<tn-button margin="10rpx 10rpx">按钮</tn-button>
<tn-button size="lg" margin="10rpx 10rpx">按钮</tn-button>
<tn-button width="150rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">按钮</tn-button>
</view>
<view class="tn-margin-top">
<tn-button padding="20rpx 40rpx" margin="10rpx 10rpx">按钮</tn-button>
<tn-button margin="10rpx 10rpx">按钮</tn-button>
<tn-button margin="10rpx 10rpx" :fontBold="true">按钮</tn-button>
</view>
<view class="tn-margin-top">
<tn-button width="100%">按钮</tn-button>
</view>
</demo-title>
<demo-title title="形状">
<tn-button margin="10rpx 10rpx">按钮</tn-button>
<tn-button shape="round" margin="10rpx 10rpx">按钮</tn-button>
<tn-button shape="icon" margin="10rpx 10rpx"><text class="tn-icon-link"></text></tn-button>
<tn-button width="150rpx" height="100rpx" :fontSize="40" shape="icon" margin="10rpx 10rpx"><text class="tn-icon-link"></text></tn-button>
</demo-title>
<demo-title title="颜色">
<view>
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 10rpx">按钮</tn-button>
<tn-button backgroundColor="rgba(1, 190, 255, 0.8)" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
<tn-button backgroundColor="tn-bg-teal" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
<tn-button backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
</view>
<view class="tn-margin-top">
<tn-button backgroundColor="tn-main-gradient-indigo" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
<tn-button backgroundColor="tn-main-gradient-indigo--reverse" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
<tn-button backgroundColor="tn-main-gradient-indigo--light" margin="10rpx 10rpx">按钮</tn-button>
<tn-button backgroundColor="tn-main-gradient-indigo--single" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
</view>
</demo-title>
<demo-title title="边框">
<view>
<tn-button :plain="true" margin="10rpx 10rpx">按钮</tn-button>
<tn-button :plain="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">按钮</tn-button>
<tn-button :plain="true" :borderBold="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">按钮</tn-button>
<tn-button :plain="true" backgroundColor="rgba(1, 190, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
<tn-button :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10rpx">按钮</tn-button>
</view>
</demo-title>
<demo-title title="阴影">
<tn-button :shadow="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
<tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 0">按钮</tn-button>
<tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-bg-teal" fontColor="#FFFFFF" margin="10rpx 0">按钮</tn-button>
<tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-main-gradient-indigo" margin="10rpx 0">按钮</tn-button>
<tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-cool-bg-color-7" margin="10rpx 0">按钮</tn-button>
<tn-button :shadow="true" :plain="true" height="100rpx" width="100%" :border="false" margin="10rpx 0">镂空无边框</tn-button>
</demo-title>
<demo-title title="加载中">
<tn-button :loading="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
</demo-title>
<demo-title title="禁止点击">
<tn-button :disabled="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
<template>
<view class="basic-button tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>按钮</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础">
<tn-button>按钮</tn-button>
</demo-title>
<demo-title title="大小">
<view>
<tn-button size="sm" margin="10rpx 10rpx">按钮</tn-button>
<tn-button margin="10rpx 10rpx">按钮</tn-button>
<tn-button size="lg" margin="10rpx 10rpx">按钮</tn-button>
<tn-button width="150rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">按钮</tn-button>
</view>
<view class="tn-margin-top">
<tn-button padding="20rpx 40rpx" margin="10rpx 10rpx">按钮</tn-button>
<tn-button margin="10rpx 10rpx">按钮</tn-button>
<tn-button margin="10rpx 10rpx" :fontBold="true">按钮</tn-button>
</view>
<view class="tn-margin-top">
<tn-button width="100%">按钮</tn-button>
</view>
</demo-title>
<demo-title title="形状">
<tn-button margin="10rpx 10rpx">按钮</tn-button>
<tn-button shape="round" margin="10rpx 10rpx">按钮</tn-button>
<tn-button shape="icon" margin="10rpx 10rpx"><text class="tn-icon-link"></text></tn-button>
<tn-button width="150rpx" height="100rpx" :fontSize="40" shape="icon" margin="10rpx 10rpx"><text class="tn-icon-link"></text></tn-button>
</demo-title>
<demo-title title="颜色">
<view>
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 10rpx">按钮</tn-button>
<tn-button backgroundColor="rgba(1, 190, 255, 0.8)" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
<tn-button backgroundColor="tn-bg-teal" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
<tn-button backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
</view>
<view class="tn-margin-top">
<tn-button backgroundColor="tn-main-gradient-indigo" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
<tn-button backgroundColor="tn-main-gradient-indigo--reverse" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
<tn-button backgroundColor="tn-main-gradient-indigo--light" margin="10rpx 10rpx">按钮</tn-button>
<tn-button backgroundColor="tn-main-gradient-indigo--single" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
</view>
</demo-title>
<demo-title title="边框">
<view>
<tn-button :plain="true" margin="10rpx 10rpx">按钮</tn-button>
<tn-button :plain="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">按钮</tn-button>
<tn-button :plain="true" :borderBold="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">按钮</tn-button>
<tn-button :plain="true" backgroundColor="rgba(1, 190, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
<tn-button :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10rpx">按钮</tn-button>
</view>
</demo-title>
<demo-title title="阴影">
<tn-button :shadow="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
<tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 0">按钮</tn-button>
<tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-bg-teal" fontColor="#FFFFFF" margin="10rpx 0">按钮</tn-button>
<tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-main-gradient-indigo" margin="10rpx 0">按钮</tn-button>
<tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-cool-bg-color-7" margin="10rpx 0">按钮</tn-button>
<tn-button :shadow="true" :plain="true" height="100rpx" width="100%" :border="false" margin="10rpx 0">镂空无边框</tn-button>
</demo-title>
<demo-title title="加载中">
<tn-button :loading="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
</demo-title>
<demo-title title="禁止点击">
<tn-button :disabled="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicButton',
components: {demoTitle},
data() {
return {
}
},
methods: {
}
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicButton',
components: {demoTitle},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.basic-button {
background-color: $tn-bg-gray-color;
min-height: 100vh;
<style lang="scss" scoped>
.basic-button {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>

1518
basicPage/color/color.vue
View File

File diff suppressed because it is too large Load Diff

912
basicPage/flex-layout/flex-layout.vue
View File

@@ -1,456 +1,456 @@
<template>
<view class="basic-flex tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Flex布局</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="固定尺寸 & 元素">
<view class="tn-flex tn-flex-wrap">
<view class="tn-flex-basic-xs tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">xs(20%)</view>
<view class="tn-flex-basic-md"></view>
<view class="tn-flex-basic-sm tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">sm(40%)</view>
<view class="tn-flex-basic-md"></view>
<view class="tn-flex-basic-md tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">md(50%)</view>
<view class="tn-flex-basic-lg tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">lg(60%)</view>
<view class="tn-flex-basic-xl tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">xl(80%)</view>
<view class="tn-flex-basic-full tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">full(100%)</view>
</view>
</demo-title>
<demo-title title="应用示例1">
<view class="tn-flex tn-flex-wrap">
<view class="tn-flex-basic-md">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-basic-md">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-basic-xs">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-basic-xs">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-basic-xs">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-basic-xs">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-basic-xs">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="比例布局 & 元素">
<view class="tn-flex">
<view class="tn-flex-1 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">1</view>
<view class="tn-flex-1 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">1</view>
</view>
<view class="tn-flex">
<view class="tn-flex-1 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">1</view>
<view class="tn-flex-2 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">2</view>
</view>
<view class="tn-flex">
<view class="tn-flex-1 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">1</view>
<view class="tn-flex-2 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">2</view>
<view class="tn-flex-3 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">3</view>
</view>
</demo-title>
<demo-title title="应用示例1">
<view class="tn-flex">
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例2">
<view class="tn-flex">
<view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例3">
<view class="tn-flex">
<view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例4">
<view class="tn-flex">
<view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-3">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例5">
<view class="tn-flex">
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例6">
<view class="tn-flex">
<view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
</view>
</demo-title>
<demo-title title="应用示例7">
<view class="tn-flex">
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例8">
<view class="tn-flex">
<view class="tn-flex-3">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例9">
<view class="tn-flex">
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
</view>
</demo-title>
<demo-title title="应用示例10">
<view class="tn-flex">
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
</view>
</demo-title>
<demo-title title="应用示例11">
<view class="tn-flex">
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例12">
<view class="tn-flex">
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-3">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例13">
<view class="tn-flex">
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例14">
<view class="tn-flex">
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="水平对齐 & justify">
<view class="tn-flex tn-flex-row-left">
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">start</view>
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">start</view>
</view>
<view class="tn-flex tn-flex-row-right tn-margin-top-sm">
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">end</view>
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">end</view>
</view>
<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">center</view>
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">center</view>
</view>
<view class="tn-flex tn-flex-row-around tn-margin-top-sm">
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">around</view>
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">around</view>
</view>
<view class="tn-flex tn-flex-row-between tn-margin-top-sm">
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">between</view>
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">between</view>
</view>
</demo-title>
<demo-title title="应用示例1">
<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
</view>
</demo-title>
<demo-title title="应用示例2">
<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
<view class="justify-content-item">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
<view class="justify-content-item">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
<view class="justify-content-item">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例3">
<view class="tn-flex tn-flex-row-around tn-margin-top-sm">
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
</view>
</demo-title>
<demo-title title="应用示例4">
<view class="tn-flex tn-flex-row-around tn-margin-top-sm">
<view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
<view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
<view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例5">
<view class="tn-flex tn-flex-row-between tn-margin-top-sm">
<view class="justify-content-item tn-padding-xl tn-text-center tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="justify-content-item tn-padding-xl tn-text-center tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="justify-content-item tn-padding-xl tn-text-center tn-radius bg-flex-shadow tn-shadow-blur"></view>
</view>
</demo-title>
<demo-title title="应用示例6">
<view class="tn-flex tn-flex-row-between tn-margin-top-sm">
<view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
<view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
<view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
</view>
</demo-title>
<demo-title title="垂直对齐 & align">
<view class="tn-flex tn-flex-col-top">
<view class="align-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">left</view>
<view class="align-content-item tn-padding-sm tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">top</view>
</view>
<view class="tn-flex tn-flex-col-center tn-margin-top-sm">
<view class="align-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">left</view>
<view class="align-content-item tn-padding-sm tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">center</view>
</view>
<view class="tn-flex tn-flex-col-bottom tn-margin-top-sm">
<view class="align-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">left</view>
<view class="align-content-item tn-padding-sm tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">bottom</view>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'BasicFlexLayout',
components: {demoTitle},
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
/* 内容容器 start */
.bg-flex-shadow{
background-color: #00C3FF;
z-index: 9999;
}
/* 内容容器 end */
</style>
<template>
<view class="basic-flex tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Flex布局</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="固定尺寸 & 元素">
<view class="tn-flex tn-flex-wrap">
<view class="tn-flex-basic-xs tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">xs(20%)</view>
<view class="tn-flex-basic-md"></view>
<view class="tn-flex-basic-sm tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">sm(40%)</view>
<view class="tn-flex-basic-md"></view>
<view class="tn-flex-basic-md tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">md(50%)</view>
<view class="tn-flex-basic-lg tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">lg(60%)</view>
<view class="tn-flex-basic-xl tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">xl(80%)</view>
<view class="tn-flex-basic-full tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">full(100%)</view>
</view>
</demo-title>
<demo-title title="应用示例1">
<view class="tn-flex tn-flex-wrap">
<view class="tn-flex-basic-md">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-basic-md">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-basic-xs">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-basic-xs">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-basic-xs">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-basic-xs">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-basic-xs">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="比例布局 & 元素">
<view class="tn-flex">
<view class="tn-flex-1 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">1</view>
<view class="tn-flex-1 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">1</view>
</view>
<view class="tn-flex">
<view class="tn-flex-1 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">1</view>
<view class="tn-flex-2 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">2</view>
</view>
<view class="tn-flex">
<view class="tn-flex-1 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">1</view>
<view class="tn-flex-2 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">2</view>
<view class="tn-flex-3 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">3</view>
</view>
</demo-title>
<demo-title title="应用示例1">
<view class="tn-flex">
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例2">
<view class="tn-flex">
<view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例3">
<view class="tn-flex">
<view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例4">
<view class="tn-flex">
<view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-3">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例5">
<view class="tn-flex">
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例6">
<view class="tn-flex">
<view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
</view>
</demo-title>
<demo-title title="应用示例7">
<view class="tn-flex">
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例8">
<view class="tn-flex">
<view class="tn-flex-3">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例9">
<view class="tn-flex">
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
</view>
</demo-title>
<demo-title title="应用示例10">
<view class="tn-flex">
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
</view>
</demo-title>
<demo-title title="应用示例11">
<view class="tn-flex">
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例12">
<view class="tn-flex">
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-3">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例13">
<view class="tn-flex">
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
<view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例14">
<view class="tn-flex">
<view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
</view>
</view>
</demo-title>
<demo-title title="水平对齐 & justify">
<view class="tn-flex tn-flex-row-left">
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">start</view>
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">start</view>
</view>
<view class="tn-flex tn-flex-row-right tn-margin-top-sm">
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">end</view>
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">end</view>
</view>
<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">center</view>
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">center</view>
</view>
<view class="tn-flex tn-flex-row-around tn-margin-top-sm">
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">around</view>
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">around</view>
</view>
<view class="tn-flex tn-flex-row-between tn-margin-top-sm">
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">between</view>
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">between</view>
</view>
</demo-title>
<demo-title title="应用示例1">
<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
</view>
</demo-title>
<demo-title title="应用示例2">
<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
<view class="justify-content-item">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
<view class="justify-content-item">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
<view class="justify-content-item">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例3">
<view class="tn-flex tn-flex-row-around tn-margin-top-sm">
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
</view>
</demo-title>
<demo-title title="应用示例4">
<view class="tn-flex tn-flex-row-around tn-margin-top-sm">
<view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
<view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
<view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
</view>
</demo-title>
<demo-title title="应用示例5">
<view class="tn-flex tn-flex-row-between tn-margin-top-sm">
<view class="justify-content-item tn-padding-xl tn-text-center tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="justify-content-item tn-padding-xl tn-text-center tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="justify-content-item tn-padding-xl tn-text-center tn-radius bg-flex-shadow tn-shadow-blur"></view>
</view>
</demo-title>
<demo-title title="应用示例6">
<view class="tn-flex tn-flex-row-between tn-margin-top-sm">
<view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
<view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
<view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view>
</view>
</view>
</demo-title>
<demo-title title="垂直对齐 & align">
<view class="tn-flex tn-flex-col-top">
<view class="align-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">left</view>
<view class="align-content-item tn-padding-sm tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">top</view>
</view>
<view class="tn-flex tn-flex-col-center tn-margin-top-sm">
<view class="align-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">left</view>
<view class="align-content-item tn-padding-sm tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">center</view>
</view>
<view class="tn-flex tn-flex-col-bottom tn-margin-top-sm">
<view class="align-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">left</view>
<view class="align-content-item tn-padding-sm tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">bottom</view>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'BasicFlexLayout',
components: {demoTitle},
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
/* 内容容器 start */
.bg-flex-shadow{
background-color: #00C3FF;
z-index: 9999;
}
/* 内容容器 end */
</style>

338
basicPage/grid-layout/grid-layout.vue
View File

@@ -1,169 +1,169 @@
<template>
<view class="basic-grid">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Grid布局</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
<tn-grid v-if="showGrid" :align="align" :hoverClass="hoverClass" :col="col">
<block v-for="(item, index) in icons" :key="index">
<!-- #ifndef MP-WEIXIN -->
<tn-grid-item>
<view class="" style="margin: 60rpx 20rpx;font-size: 70rpx;color: #01BEFF;">
<text class="" :class="['tn-icon-' + item]"></text>
</view>
</tn-grid-item>
<!-- #endif-->
<!-- #ifdef MP-WEIXIN -->
<tn-grid-item :style="{width: gridItemWidth}">
<view class="icon__item--icon tn-cool-color-icon" :class="[$t.colorUtils.getRandomCoolBgClass(index)]">
<view class="tn-margin-top-sm" :class="['tn-icon-' + item]"></view>
</view>
</tn-grid-item>
<!-- #endif-->
</block>
</tn-grid>
</dynamic-demo-template>
</view>
</view>
</template>
<script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default {
name: 'BasicGridLayout',
components: {dynamicDemoTemplate},
data() {
return {
showGrid: true,
align: 'left',
hoverClass: 'tn-hover',
col: 3,
icons: [
'zodiac-shu',
'zodiac-niu',
'zodiac-hu',
'zodiac-tu',
'zodiac-long',
'zodiac-she',
'zodiac-ma',
'zodiac-yang',
'zodiac-hou',
'zodiac-ji',
'zodiac-gou',
'zodiac-zhu',
'logo-tuniao',
],
tips: ['无需依赖额外的样式文件','使用tn-grid、tn-grid-item组件'],
sectionList: [
{
name: '参数切换',
section: [
{
title: '对齐方式',
optional: ['左对齐','居中','右对齐'],
methods: 'alignChange'
},
{
title: '点击效果',
optional: ['开启','关闭'],
methods: 'hoverChange'
},
{
title: '列数',
optional: ['3','4'],
methods: 'colChange'
}
]
}
]
}
},
computed: {
// 兼容小程序
// #ifdef MP-WEIXIN
gridItemWidth() {
return 100 / this.col + '%'
},
// #endif
},
methods: {
click(event) {
this[event.methods] && this[event.methods](event)
},
// 对齐方式控制
alignChange(event) {
switch(event.index) {
case 0:
this.align = 'left'
break
case 1:
this.align = 'center'
break
case 2:
this.align = 'right'
break
}
},
// 点击效果控制
hoverChange(event) {
this.hoverClass = event.index === 0 ? 'tn-hover' : 'none'
},
// 列数修改
colChange(event) {
this.col = event.index === 0 ? 3 : 4
this.$refs.demoTemplate.updateSectionScrollView()
},
},
}
</script>
<style lang="scss" scoped>
.icon {
&__item {
width: 30%;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 30rpx;
margin: 20rpx 10rpx;
margin-top: 0;
transform: scale(1);
transition: transform 0.3s linear;
transform-origin: center center;
&--icon {
width: 100rpx;
height: 100rpx;
font-size: 60rpx;
border-radius: 50%;
margin: 30rpx;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
}
}
}
}
</style>
<template>
<view class="basic-grid">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Grid布局</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
<tn-grid v-if="showGrid" :align="align" :hoverClass="hoverClass" :col="col">
<block v-for="(item, index) in icons" :key="index">
<!-- #ifndef MP-WEIXIN -->
<tn-grid-item>
<view class="" style="margin: 60rpx 20rpx;font-size: 70rpx;color: #01BEFF;">
<text class="" :class="['tn-icon-' + item]"></text>
</view>
</tn-grid-item>
<!-- #endif-->
<!-- #ifdef MP-WEIXIN -->
<tn-grid-item :style="{width: gridItemWidth}">
<view class="icon__item--icon tn-cool-color-icon" :class="[$t.color.getRandomCoolBgClass(index)]">
<view class="tn-margin-top-sm" :class="['tn-icon-' + item]"></view>
</view>
</tn-grid-item>
<!-- #endif-->
</block>
</tn-grid>
</dynamic-demo-template>
</view>
</view>
</template>
<script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default {
name: 'BasicGridLayout',
components: {dynamicDemoTemplate},
data() {
return {
showGrid: true,
align: 'left',
hoverClass: 'tn-hover',
col: 3,
icons: [
'zodiac-shu',
'zodiac-niu',
'zodiac-hu',
'zodiac-tu',
'zodiac-long',
'zodiac-she',
'zodiac-ma',
'zodiac-yang',
'zodiac-hou',
'zodiac-ji',
'zodiac-gou',
'zodiac-zhu',
'logo-tuniao',
],
tips: ['无需依赖额外的样式文件','使用tn-grid、tn-grid-item组件'],
sectionList: [
{
name: '参数切换',
section: [
{
title: '对齐方式',
optional: ['左对齐','居中','右对齐'],
methods: 'alignChange'
},
{
title: '点击效果',
optional: ['开启','关闭'],
methods: 'hoverChange'
},
{
title: '列数',
optional: ['3','4'],
methods: 'colChange'
}
]
}
]
}
},
computed: {
// 兼容小程序
// #ifdef MP-WEIXIN
gridItemWidth() {
return 100 / this.col + '%'
},
// #endif
},
methods: {
click(event) {
this[event.methods] && this[event.methods](event)
},
// 对齐方式控制
alignChange(event) {
switch(event.index) {
case 0:
this.align = 'left'
break
case 1:
this.align = 'center'
break
case 2:
this.align = 'right'
break
}
},
// 点击效果控制
hoverChange(event) {
this.hoverClass = event.index === 0 ? 'tn-hover' : 'none'
},
// 列数修改
colChange(event) {
this.col = event.index === 0 ? 3 : 4
this.$refs.demoTemplate.updateSectionScrollView()
},
},
}
</script>
<style lang="scss" scoped>
.icon {
&__item {
width: 30%;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 30rpx;
margin: 20rpx 10rpx;
margin-top: 0;
transform: scale(1);
transition: transform 0.3s linear;
transform-origin: center center;
&--icon {
width: 100rpx;
height: 100rpx;
font-size: 60rpx;
border-radius: 50%;
margin: 30rpx;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
}
}
}
}
</style>

336
basicPage/icon/icon.vue
View File

@@ -1,168 +1,168 @@
<template>
<view class="basic-icon">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>图标</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<tn-sticky :customNavHeight="vuex_custom_bar_height">
<view class="search-content">
<input class="search-content__input" placeholder-class="search-content__input-placeholder" placeholder="请输入图标名称吖" @input="saerchInput" />
</view>
</tn-sticky>
<view class="icon__container tn-flex tn-flex-wrap tn-flex-row-left tn-flex-col-center tn-margin">
<block v-for="(item, index) in resultIconList" :key="index">
<view
class="icon__item tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center icon-shadow"
:class="[{'icon__item--active': index === currentIconIndex}]"
@click="clickIcon(index, item.name)"
>
<view class="icon__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
<view :class="[`tn-icon-${item.name}`]"></view>
</view>
<view class="icon__item--title tn-text-ellipsis">{{ item.name }}</view>
</view>
</block>
</view>
<view class="tn-text-center tn-margin-bottom-xl">
<view>目前300+，里面缺少你想要的吗？</view>
<view>请前往图鸟语雀留言写下你的需求叭</view>
</view>
<view class="tn-padding-bottom"></view>
</view>
</view>
</template>
<script>
import iconData from './iconfont.js'
export default {
name: 'basicIcon',
data() {
return {
// 图标列表
iconList: iconData.data,
// 用户输入的内容
searchValue: '',
// 当前点击的图标序号
currentIconIndex: -1
}
},
computed: {
resultIconList() {
if (this.searchValue === '') return this.iconList
return this.iconList.filter((item) => {
return item.name.includes(this.searchValue)
})
}
},
methods: {
// input输入的内容
saerchInput(e) {
this.searchValue = e.target.value
},
// 点击图标
clickIcon(index, name) {
this.currentIconIndex = index
this.$t.messageUtils.toast(name, false, null, 'none', 5000)
},
}
}
</script>
<style lang="scss" scoped>
/* 搜索框 start */
.search-content {
padding-top: 16rpx;
margin: 40rpx 40rpx;
&__input {
caret-color: $tn-main-color;
width: 100%;
height: 70rpx;
line-height: 60rpx;
border-radius: 100rpx;
text-align: center;
margin: 0 auto;
background-color: #FFFFFF;
color: #080808;
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
}
&__input-placeholder {
font-size: 24rpx;
}
}
/* 搜索框 end */
/* 图标容器 start */
.icon-shadow{
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.06);
}
.icon {
&__container {
margin-bottom: 30rpx;
}
&__item {
width: 30.4%;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 30rpx;
margin: 20rpx 10rpx;
margin-top: 0;
transform: scale(1);
transition: transform 0.2s linear;
transform-origin: center center;
&--active {
transform: scale(0.95);
box-shadow:
inset 10rpx 10rpx 18rpx rgba(0, 0, 120, 0.04),
inset -8rpx -8rpx 20rpx rgba(0, 0, 120, 0.03);
}
&--icon {
width: 80rpx;
height: 80rpx;
font-size: 60rpx;
border-radius: 50%;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
}
}
&--title {
width: 100%;
color: #78909C;
font-size: 28rpx;
text-align: center;
}
}
}
/* 图标容器 end */
</style>
<template>
<view class="basic-icon">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>图标</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<tn-sticky :customNavHeight="vuex_custom_bar_height">
<view class="search-content">
<input class="search-content__input" placeholder-class="search-content__input-placeholder" placeholder="请输入图标名称吖" @input="saerchInput" />
</view>
</tn-sticky>
<view class="icon__container tn-flex tn-flex-wrap tn-flex-row-left tn-flex-col-center tn-margin">
<block v-for="(item, index) in resultIconList" :key="index">
<view
class="icon__item tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center icon-shadow"
:class="[{'icon__item--active': index === currentIconIndex}]"
@click="clickIcon(index, item.name)"
>
<view class="icon__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
<view :class="[`tn-icon-${item.name}`]"></view>
</view>
<view class="icon__item--title tn-text-ellipsis">{{ item.name }}</view>
</view>
</block>
</view>
<view class="tn-text-center tn-margin-bottom-xl">
<view>目前300+，里面缺少你想要的吗？</view>
<view>请前往图鸟语雀留言写下你的需求叭</view>
</view>
<view class="tn-padding-bottom"></view>
</view>
</view>
</template>
<script>
import iconData from './iconfont.js'
export default {
name: 'basicIcon',
data() {
return {
// 图标列表
iconList: iconData.data,
// 用户输入的内容
searchValue: '',
// 当前点击的图标序号
currentIconIndex: -1
}
},
computed: {
resultIconList() {
if (this.searchValue === '') return this.iconList
return this.iconList.filter((item) => {
return item.name.includes(this.searchValue)
})
}
},
methods: {
// input输入的内容
saerchInput(e) {
this.searchValue = e.target.value
},
// 点击图标
clickIcon(index, name) {
this.currentIconIndex = index
this.$t.message.toast(name, false, null, 'none', 5000)
},
}
}
</script>
<style lang="scss" scoped>
/* 搜索框 start */
.search-content {
padding-top: 16rpx;
margin: 40rpx 40rpx;
&__input {
caret-color: $tn-main-color;
width: 100%;
height: 70rpx;
line-height: 60rpx;
border-radius: 100rpx;
text-align: center;
margin: 0 auto;
background-color: #FFFFFF;
color: #080808;
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
}
&__input-placeholder {
font-size: 24rpx;
}
}
/* 搜索框 end */
/* 图标容器 start */
.icon-shadow{
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.06);
}
.icon {
&__container {
margin-bottom: 30rpx;
}
&__item {
width: 30.4%;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 30rpx;
margin: 20rpx 10rpx;
margin-top: 0;
transform: scale(1);
transition: transform 0.2s linear;
transform-origin: center center;
&--active {
transform: scale(0.95);
box-shadow:
inset 10rpx 10rpx 18rpx rgba(0, 0, 120, 0.04),
inset -8rpx -8rpx 20rpx rgba(0, 0, 120, 0.03);
}
&--icon {
width: 80rpx;
height: 80rpx;
font-size: 60rpx;
border-radius: 50%;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
}
}
&--title {
width: 100%;
color: #78909C;
font-size: 28rpx;
text-align: center;
}
}
}
/* 图标容器 end */
</style>

4
basicPage/icon/iconfont.js
View File

File diff suppressed because one or more lines are too long

156
basicPage/shadow/shadow.vue
View File

@@ -1,79 +1,79 @@
<template>
<view class="basic-shadow tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>阴影</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="普通阴影">
<view class="shadow-content tn-shadow"></view>
<view class="shadow-content tn-shadow-warp"></view>
</demo-title>
<demo-title title="有色阴影">
<view class="shadow-content tn-bg-teal tn-shadow-teal"></view>
<view class="shadow-content tn-bg-indigo tn-shadow-indigo"></view>
</demo-title>
<demo-title title="背景图片阴影">
<view class="shadow-content shadow-content__image tn-shadow-blur"></view>
</demo-title>
<demo-title title="文字阴影">
<view class="shadow-content__text tn-color-indigo tn-text-shadow-indigo">
图鸟UI，专注UI开发
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicShadow',
components: {demoTitle},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.basic-shadow {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
.shadow-content {
height: 80rpx;
background-color: #FFFFFF;
margin: 30rpx 0;
&__image {
z-index: 1;
background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7207d16b-b9c3-4105-8d0d-e9e0c7785f66/605563a1-a210-42f3-99e4-8de3c655c59e.jpg);
background-size: cover;
background-position: top;
background-repeat: no-repeat;
}
&__text {
font-size: 60rpx;
text-align: center;
}
}
<template>
<view class="basic-shadow tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>阴影</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="普通阴影">
<view class="shadow-content tn-shadow"></view>
<view class="shadow-content tn-shadow-warp"></view>
</demo-title>
<demo-title title="有色阴影">
<view class="shadow-content tn-bg-teal tn-shadow-teal"></view>
<view class="shadow-content tn-bg-indigo tn-shadow-indigo"></view>
</demo-title>
<demo-title title="背景图片阴影">
<view class="shadow-content shadow-content__image tn-shadow-blur"></view>
</demo-title>
<demo-title title="文字阴影">
<view class="shadow-content__text tn-color-indigo tn-text-shadow-indigo">
图鸟UI，专注UI开发
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicShadow',
components: {demoTitle},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.basic-shadow {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
.shadow-content {
height: 80rpx;
background-color: #FFFFFF;
margin: 30rpx 0;
&__image {
z-index: 1;
background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7207d16b-b9c3-4105-8d0d-e9e0c7785f66/605563a1-a210-42f3-99e4-8de3c655c59e.jpg);
background-size: cover;
background-position: top;
background-repeat: no-repeat;
}
&__text {
font-size: 60rpx;
text-align: center;
}
}
</style>

271
basicPage/tag/tag.vue
View File

@@ -1,132 +1,141 @@
<template>
<view class="basic-tag tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>标签</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础">
<tn-tag>标签</tn-tag>
</demo-title>
<demo-title title="大小">
<view>
<tn-tag size="sm" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag margin="10rpx 10rpx">标签</tn-tag>
<tn-tag size="lg" margin="10rpx 10rpx">标签</tn-tag>
</view>
<view class="tn-margin-top">
<tn-tag width="200rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag padding="40rpx 80rpx" margin="10rpx 10rpx">标签</tn-tag>
</view>
</demo-title>
<demo-title title="形状">
<view>
<tn-tag margin="10rpx 10rpx">标签</tn-tag>
<tn-tag shape="radius" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag shape="circle" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag shape="circleLeft" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag shape="circleRight" margin="10rpx 10rpx">标签</tn-tag>
</view>
</demo-title>
<demo-title title="颜色">
<view>
<tn-tag backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="rgba(1, 190, 255, 0.8)" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="tn-bg-teal" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
</view>
<view>
<tn-tag backgroundColor="tn-main-gradient-indigo" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="tn-main-gradient-indigo--reverse" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="tn-main-gradient-indigo--light" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="tn-main-gradient-indigo--single" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
</view>
</demo-title>
<demo-title title="镂空">
<view>
<tn-tag :plain="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag :plain="true" backgroundColor="rgba(1, 190, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10rpx">标签</tn-tag>
</view>
</demo-title>
<demo-title title="标签使用">
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
<view class="origin-demo">
<tn-tag class="origin-demo__tag" backgroundColor="#01BEFF" fontColor="#FFFFFF" width="auto" height="30rpx" shape="circle">99+</tn-tag>
</view>
<!-- #ifdef H5 -->
<view class="capsule">
<tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false">
<text class="tn-icon-add"></text>
</tn-tag>
<tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
2
</tn-tag>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="capsule">
<tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false">
<text class="tn-icon-add"></text>
</tn-tag>
<tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
2
</tn-tag>
</view>
<!-- #endif -->
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicTag',
components: {demoTitle},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.basic-tag {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
.origin-demo {
width: 180rpx;
height: 180rpx;
background-color: #FFFFFF;
margin: 20rpx;
margin-right: 70rpx;
position: relative;
&__tag {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
}
<template>
<view class="basic-tag tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>标签</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础">
<tn-tag>标签</tn-tag>
</demo-title>
<demo-title title="大小">
<view>
<tn-tag size="sm" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag margin="10rpx 10rpx">标签</tn-tag>
<tn-tag size="lg" margin="10rpx 10rpx">标签</tn-tag>
</view>
<view class="tn-margin-top">
<tn-tag width="200rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag padding="40rpx 80rpx" margin="10rpx 10rpx">标签</tn-tag>
</view>
</demo-title>
<demo-title title="形状">
<view>
<tn-tag margin="10rpx 10rpx">标签</tn-tag>
<tn-tag shape="radius" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag shape="circle" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag shape="circleLeft" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag shape="circleRight" margin="10rpx 10rpx">标签</tn-tag>
</view>
</demo-title>
<demo-title title="颜色">
<view>
<tn-tag backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="rgba(1, 190, 255, 0.8)" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="tn-bg-teal" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
</view>
<view>
<tn-tag backgroundColor="tn-main-gradient-indigo" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="tn-main-gradient-indigo--reverse" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="tn-main-gradient-indigo--light" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="tn-main-gradient-indigo--single" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
</view>
</demo-title>
<demo-title title="镂空">
<view>
<tn-tag :plain="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag :plain="true" backgroundColor="rgba(1, 190, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10rpx">标签</tn-tag>
</view>
</demo-title>
<demo-title title="标签使用">
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
<view class="origin-demo">
<view class="origin-demo__tag">
<tn-tag backgroundColor="#01BEFF" fontColor="#FFFFFF" width="auto" height="30rpx" shape="circle">99+</tn-tag>
</view>
</view>
<!-- #ifdef H5 -->
<view class="capsule">
<tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false">
<text class="tn-icon-add"></text>
</tn-tag>
<tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
2
</tn-tag>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="capsule">
<tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false">
<text class="tn-icon-add"></text>
</tn-tag>
<tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
2
</tn-tag>
</view>
<!-- #endif -->
<tn-tag :plain="true" backgroundColor="#01BEFF" width="auto" margin="0px 30rpx">
<view class="tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-center">
<view>带关闭按钮</view>
<view class="tn-icon-close tn-margin-left-xs"></view>
</view>
</tn-tag>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicTag',
components: {demoTitle},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.basic-tag {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
.origin-demo {
width: 180rpx;
height: 180rpx;
background-color: #FFFFFF;
margin: 20rpx;
margin-right: 70rpx;
position: relative;
&__tag {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
}
</style>

261
basicPage/test/test.vue Normal file
View File

@@ -0,0 +1,261 @@
<template>
<view class="basic-test">
<swiper class="swiper" :circular="true" :current="currentSwiperIndex" previous-margin="260rpx" next-margin="260rpx" @change="swiperChange">
<swiper-item v-for="(item, index) in swiperList" :key="index" class="swiper__item" :class="[swiperItemClass(index)]">
<view class="swiper__item__content" :class="[swiperContentClass(index)]">
<image :src="item" mode="scaleToFill"></image>
</view>
</swiper-item>
</swiper>
<swiper class="phone-swiper" :circular="true"
:current="phoneCurrentSwiperIndex" previous-margin="190rpx" next-margin="190rpx" @change="phoneSwiperChange">
<swiper-item v-for="(item,index) in phoneSwiperList" :key="index" class="phone-swiper__item">
<view class="tnphone-black-min phone-swiper__item__content wow fadeInLeft2" :class="[phoneSwiperContentClass(index)]">
<view class="skin wow fadeInRight2">
<view class="screen wow fadeInUp2">
<view class="peak wow">
<view class="sound"></view>
<view class="lens"></view>
</view>
<view class="demo-image">
<image :src="item.url" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
name: 'TestPage',
data() {
return {
swiperList: [
'https://tnuiimage.tnkjapp.com/swiper/spring.jpg',
'https://tnuiimage.tnkjapp.com/swiper/summer.jpg',
'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg',
'https://tnuiimage.tnkjapp.com/swiper/winter.jpg',
'https://tnuiimage.tnkjapp.com/swiper/winter.jpg'
],
phoneSwiperList: [{
id: 0,
type: 'image',
name: '总有你想不到的创意',
text: '海量分享',
url: 'https://tnuiimage.tnkjapp.com/swiper/test.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d1.png'
}, {
id: 1,
type: 'image',
name: '寻找一起成长的小伙伴',
text: '愉快玩耍',
url: 'https://tnuiimage.tnkjapp.com/swiper/banner-animate.png',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d4.png'
}, {
id: 2,
type: 'image',
name: '更多彩蛋等你探索',
text: '酷炫多彩',
url: 'https://tnuiimage.tnkjapp.com/swiper/test.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d5.png'
}, {
id: 3,
type: 'image',
name: '更多彩蛋等你探索',
text: '酷炫多彩',
url: 'https://tnuiimage.tnkjapp.com/swiper/banner-animate.png',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d5.png'
}],
currentSwiperIndex: 0,
phoneCurrentSwiperIndex: 0
}
},
computed: {
// 计算当前对应轮播前后的item对应的类
swiperItemClass() {
return (index) => {
if ((this.currentSwiperIndex === 0 && index === this.swiperList.length - 1) || (this.currentSwiperIndex - 1 === index)) {
return 'swiper__item--prev'
}
if ((this.currentSwiperIndex === this.swiperList.length - 1 && index === 0) || (this.currentSwiperIndex + 1 === index)) {
return 'swiper__item--next'
}
if (this.currentSwiperIndex === index) {
return 'swiper__item--current'
}
}
},
// 计算轮播内容对应的类
swiperContentClass() {
return (index) => {
if (this.currentSwiperIndex === index) {
return 'swiper__item__content--current'
}
if ((this.currentSwiperIndex === 0 && index === this.swiperList.length - 1) || (this.currentSwiperIndex - 1 === index)) {
return 'swiper__item__content--prev'
}
if ((this.currentSwiperIndex === this.swiperList.length - 1 && index === 0) || (this.currentSwiperIndex + 1 === index)) {
return 'swiper__item__content--next'
}
}
},
// 计算轮播内容对应的类
phoneSwiperContentClass() {
return (index) => {
if (this.phoneCurrentSwiperIndex === index) {
return 'phone-swiper__item__content--current'
}
if ((this.phoneCurrentSwiperIndex === 0 && index === this.phoneSwiperList.length - 1) || (this.phoneCurrentSwiperIndex - 1 === index)) {
return 'phone-swiper__item__content--prev'
}
if ((this.phoneCurrentSwiperIndex === this.phoneSwiperList.length - 1 && index === 0) || (this.phoneCurrentSwiperIndex + 1 === index)) {
return 'phone-swiper__item__content--next'
}
}
}
},
onReady() {
},
methods: {
// 轮播图切换
swiperChange(e) {
// console.log(e.detail.current);
this.currentSwiperIndex = e.detail.current
},
phoneSwiperChange(e) {
this.phoneCurrentSwiperIndex = e.detail.current
}
}
}
</script>
<style lang="scss" scoped>
.basic-test {
min-height: 100vh;
}
.swiper {
width: 100%;
height: 400rpx;
/deep/ .uni-swiper-slides {
inset: 0 260rpx;
}
&__item {
&--prev {
left: -10rpx;
}
&--next {
left: 10rpx;
}
&--current {
left: 0px;
}
&__content {
width: 100%;
height: 100%;
margin: 0 auto;
border-radius: 30rpx;
overflow: hidden;
transition: transform 0.25s ease;
transform: scale(0.8);
&--prev {
transform: scale(0.8) perspective(200rpx) rotateY(10deg);
}
&--next {
transform: scale(0.8) perspective(200rpx) rotateY(-10deg);
}
&--current {
transform: scale(1);
}
image {
width: 100%;
height: 100%;
}
}
}
}
.phone-swiper {
margin-top: 180rpx;
height: 900rpx;
/deep/ .uni-swiper-slides {
inset: 0 190rpx;
}
&__item {
&__content {
transition: transform 0.25s ease;
transform: scale(0.8);
&--prev {
transform: scale(0.8) perspective(200rpx) rotateY(10deg);
}
&--next {
transform: scale(0.8) perspective(200rpx) rotateY(-10deg);
}
&--current {
transform: scale(1);
}
}
.demo-image {
display: flex;
align-items: center;
justify-content: center;
image {
width: 100%;
height: 730rpx;
}
}
}
}
/* tnphone-black-min 细边框 start */
.tnphone-black-min {width: 380rpx; height: 760rpx; border-radius: 40rpx; background: #C6D1D8; padding: 7rpx; display: table; color: #333;
box-sizing: border-box; box-shadow: 0rpx 0rpx 0rpx 5rpx rgba(80,80,80,.8) inset; cursor: default; position: relative}
.tnphone-black-min .skin {width: 100%; height: 100%; border-radius: 40rpx; background: #222; padding: 10rpx; box-shadow: 0rpx 0rpx 0rpx 7rpx rgba(68,68,68,.3)}
.tnphone-black-min .screen {width: 100%; height: 100%; border-radius: 30rpx; background: #fff; position: relative; overflow: hidden}
.tnphone-black-min .head {width: 100%; height: 90rpx; text-align: center; position: absolute; padding: 45rpx 15rpx 10rpx 15rpx;}
.tnphone-black-min .peak {left: 22%;width: 56%; height: 27rpx; margin: -2rpx auto 0rpx; border-radius: 0 0 20rpx 20rpx; background: #222; position: absolute}
.tnphone-black-min .sound {width: 48rpx; height: 6rpx; border-radius: 15rpx; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24rpx; margin-top: -10rpx;
box-shadow: 0rpx 4rpx 4rpx 0rpx #444 inset}
.tnphone-black-min .lens {width: 6rpx; height: 6rpx; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34rpx; margin-top: -10rpx}
.tnphone-black-min .talk {width: 50%; height: 6rpx; border-radius: 15rpx; background: rgba(0,0,0,.3); position: absolute; bottom: 8rpx; left: 50%; margin-left: -25%}
.tnphone-black-min .area-l,.tnphone-black-min .area-r {width: 70rpx; height: 16rpx; position: absolute; top: 6rpx}
.tnphone-black-min .area-l {left: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-left: 20rpx;}
.tnphone-black-min .area-r {right: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-right: 20rpx;}
.tnphone-black-min .fa-feed {float: left; font-size: 12rpx!important; transform:rotate(-45deg); margin-top: 4rpx; margin-right: 8rpx}
.tnphone-black-min .fa-battery-full {float: left; font-size: 12rpx!important; margin-top: 6rpx}
.tnphone-black-min .fa-chevron-left {float: left; margin-top: 4rpx}
.tnphone-black-min .fa-cog {float: right; margin-top: 4rpx}
.tnphone-black-min .btn01 {width: 3rpx; height: 28rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 105rpx; left: -3rpx}
.tnphone-black-min .btn02 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 160rpx; left: -3rpx}
.tnphone-black-min .btn03 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 230rpx; left: -3rpx}
.tnphone-black-min .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
/* tnphone-black-min 细边框 end */
</style>

105
basicPage/utils/color/index.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<view class="basic-utils__color tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Color工具</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="获取内置随机颜色">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view class="bg-color-item" :class="randomBgColorClass">背景颜色</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomBgColor">获取</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view class="bg-color-item" :class="randomColorClass">文字颜色</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomColor">获取</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view class="bg-color-item" :class="randomCoolBgColorClass">酷炫背景颜色</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomCoolColor">获取</tn-button></view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="hex与rgb互转">
<view class="tn-bg-white">
<tn-form-item>
<view class="tn-margin-left">
<tn-input v-model="hexRGBValue"></tn-input>
</view>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="convertToRGBOrHex">{{ rgbFlag ? '转换为hex' : '转换为rgb' }}</tn-button>
</view>
</template>
</tn-form-item>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicUtilsColor',
components: {demoTitle},
data() {
return {
randomBgColorClass: '',
randomColorClass: '',
randomCoolBgColorClass: '',
hexRGBValue: '#01BEFF',
rgbFlag: false
}
},
methods: {
// 获取随机背景颜色
getRandomBgColor() {
this.randomBgColorClass = this.$t.color.getRandomColorClass()
},
// 获取随机颜色
getRandomColor() {
this.randomColorClass = this.$t.color.getRandomColorClass('color')
},
// 获取随机酷炫背景颜色
getRandomCoolColor() {
this.randomCoolBgColorClass = this.$t.color.getRandomCoolBgClass()
},
// 将hex与rgb互转
convertToRGBOrHex() {
if (this.rgbFlag) {
this.hexRGBValue = this.$t.color.rgbToHex(this.hexRGBValue)
} else {
this.hexRGBValue = this.$t.color.hexToRGB(this.hexRGBValue)
}
this.rgbFlag = !this.rgbFlag
}
}
}
</script>
<style lang="scss" scoped>
.basic-utils__color {
background-color: $tn-bg-gray-color;
min-height: 100vh;
.bg-color-item {
height: 100%;
width: auto;
padding: 10rpx 20rpx;
}
}
</style>

176
basicPage/utils/message/index.vue Normal file
View File

@@ -0,0 +1,176 @@
<template>
<view class="basic-utils__message tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Message工具</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="uni内置toast框">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>默认toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_1">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带图标 toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_2">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带透明mask toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_3">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>设置时间 toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_4">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>设置回调 toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_5">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>关闭 toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="closeToast">关闭</tn-button></view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="uni内置loading框">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>弹出loading框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openLoading">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>关闭loading框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="closeLoading">关闭</tn-button></view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="uni内置modal框">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>默认modal框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_1">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>隐藏取消按钮 modal框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_2">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>修改文字 modal框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_3">弹出</tn-button></view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicUtilsMessage',
components: {demoTitle},
data() {
return {
}
},
methods: {
// 弹出toast
openToast_1() {
this.$t.message.toast('弹出toast')
},
openToast_2() {
this.$t.message.toast('弹出toast icon', false, null, 'success')
},
openToast_3() {
this.$t.message.toast('弹出toast mask', true)
},
openToast_4() {
this.$t.message.toast('弹出toast duration', false, null, 'none', 3000)
},
openToast_5() {
this.$t.message.toast('弹出toast cb', true, () => {
setTimeout(() => {
this.$t.message.toast('执行完毕后弹出', true, null, 'success')
}, 500)
})
},
// 关闭Toast
closeToast() {
this.$t.message.closeToast()
},
// 弹出loading
openLoading() {
this.$t.message.loading('弹出loading')
setTimeout(() => {
this.closeLoading()
}, 3000)
},
// 关闭loading
closeLoading() {
this.$t.message.closeLoading()
},
// 弹出modal
openModal_1() {
this.$t.message.modal("提示", "请进行登录后进行操作", () => {
this.$t.message.toast('点击了确认按钮')
}, true, () => {
this.$t.message.toast('点击了取消按钮')
})
},
openModal_2() {
this.$t.message.modal("提示", "请进行登录后进行操作", () => {
this.$t.message.toast('点击了确认按钮')
}, false, null)
},
openModal_3() {
this.$t.message.modal("提示", "请进行登录后进行操作", () => {
this.$t.message.toast('点击了跳转按钮')
}, true, () => {
this.$t.message.toast('点击了拒绝按钮')
}, "跳转登录", "拒绝登录")
}
}
}
</script>
<style lang="scss" scoped>
.basic-utils__message {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>

159
basicPage/utils/number/index.vue Normal file
View File

@@ -0,0 +1,159 @@
<template>
<view class="basic-utils__number tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Number工具</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="超过指定长度自动添加'+'号">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过2位自动添加'+'号</view>
<view>{{ $t.number.formatNumberString(56) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过2位自动添加'+'号</view>
<view>{{ $t.number.formatNumberString(100) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过3位自动添加'+'号</view>
<view>{{ $t.number.formatNumberString(899, 3) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过3位自动添加'+'号</view>
<view>{{ $t.number.formatNumberString(1000, 3) }}</view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="往数字前添加'0'">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>只有一位时会往前面添加'0'</view>
<view>{{ $t.number.formatNumberAddZero(6) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过两位时不会往前面添加'0'</view>
<view>{{ $t.number.formatNumberAddZero(16) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过两位时不会往前面添加'0'</view>
<view>{{ $t.number.formatNumberAddZero(106) }}</view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="数值转换为带单位金额">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>不带单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(100) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>不带单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(100.88) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带K单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(1000) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带K单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(1032.89) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带W单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(10000) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带W单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(10875.90) }}</view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="获取随机值">
<view class="tn-bg-white">
<tn-form-item>
<view class="tn-margin-left"><tn-input v-model="randomValue" :disabled="true"></tn-input></view>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="getRandomValue">获取随机值</tn-button>
</view>
</template>
</tn-form-item>
<tn-form-item>
<view class="tn-margin-left"><tn-input v-model="intRandomValue" :disabled="true"></tn-input></view>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="getIntRandomValue">获取整数随机值</tn-button>
</view>
</template>
</tn-form-item>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicUtilsNumber',
components: {demoTitle},
data() {
return {
randomValue: '',
intRandomValue: '',
}
},
methods: {
// 获取随机值
getRandomValue() {
this.randomValue = this.$t.number.random(0, 100.99)
},
// 获取整数随机值
getIntRandomValue() {
this.intRandomValue = this.$t.number.randomInt(0, 100)
}
}
}
</script>
<style lang="scss" scoped>
.basic-utils__number {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>

89
basicPage/utils/string/index.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<view class="basic-utils__string tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>String工具</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="去除空格">
<view class="tn-bg-white">
<tn-form-item>
<tn-input v-model="trimValue" :trim="false"></tn-input>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerTrim">清除空格</tn-button>
</view>
</template>
</tn-form-item>
</view>
</demo-title>
<demo-title title="大写转指定连接符">
<view class="tn-bg-white">
<tn-form-item>
<tn-input v-model="humpCharValue"></tn-input>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerHumpChar">转换</tn-button>
</view>
</template>
</tn-form-item>
</view>
</demo-title>
<demo-title title="将自定的连接符转为大写">
<view class="tn-bg-white">
<tn-form-item>
<tn-input v-model="charHumpValue"></tn-input>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerCharHump">转换</tn-button>
</view>
</template>
</tn-form-item>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicUtilsString',
components: {demoTitle},
data() {
return {
trimValue: ' 前后都有空格啊 ',
humpCharValue: 'TuniaoUI',
charHumpValue: 'Tuniao_u_i'
}
},
methods: {
// 处理去除空格
handlerTrim() {
this.trimValue = this.$t.string.trim(this.trimValue)
},
// 处理将大写字符串转换为指定的连接符连接的字符串
handlerHumpChar() {
this.humpCharValue = this.$t.string.humpConvertChar(this.humpCharValue, '_')
},
// 处理将指定的连接字符连接的字符串转换为大写的字符串
handlerCharHump() {
this.charHumpValue = this.$t.string.charConvertHump(this.charHumpValue, '_')
}
}
}
</script>
<style lang="scss" scoped>
.basic-utils__string {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>