mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-03-07 08:14:01 +08:00
update
This commit is contained in:
7small7
145
basicPage/avatar/avatar.vue
Normal file
145
basicPage/avatar/avatar.vue
Normal file
@@ -0,0 +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>
|
||||
105
basicPage/badge/badge.vue
Normal file
105
basicPage/badge/badge.vue
Normal file
@@ -0,0 +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;
|
||||
}
|
||||
</style>
|
||||
141
basicPage/border/border.vue
Normal file
141
basicPage/border/border.vue
Normal file
@@ -0,0 +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;
|
||||
}
|
||||
</style>
|
||||
109
basicPage/button/button.vue
Normal file
109
basicPage/button/button.vue
Normal file
@@ -0,0 +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>
|
||||
|
||||
<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>
|
||||
759
basicPage/color/color.vue
Normal file
759
basicPage/color/color.vue
Normal file
@@ -0,0 +1,759 @@
|
||||
<template>
|
||||
<view class="basic-background">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>背景</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<view class="tn-flex tn-flex-nowrap background-container">
|
||||
<view class="background__left-container">
|
||||
<scroll-view :style="[scrollViewStyle]" scroll-y>
|
||||
<view class="background__left__picker">
|
||||
<view class="background__left__picker__item-wrapper" @click="pickerColorClick(0)">
|
||||
<view
|
||||
class="background__left__picker__item background__left__picker__item--basic picker-color-item-0"
|
||||
:class="[{'tn-shadow-blur': currentColorIndex === 0}]" style="background-color: #01BEFF;">
|
||||
<text class="tn-icon-logo-tuniao"></text>
|
||||
</view>
|
||||
</view>
|
||||
<block v-for="(item, index) in colorList" :key="index">
|
||||
<view class="background__left__picker__item-wrapper" @click="pickerColorClick(index + 1)">
|
||||
<view class="background__left__picker__item" :class="[`picker-color-item-${index + 1} tn-bg-${item.color}`, {'tn-shadow-blur': currentColorIndex === index + 1}]"></view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 选中后的边框 -->
|
||||
<view class="background__left__picker__item__select-wrapper" :style="[colorSelectItemStyle]">
|
||||
<view class="circle-wrapper right">
|
||||
<view class="circle-progress right-circle"
|
||||
:style="{borderColor: currentColorIndex === 0 ? '#01BEFF' : colorList[currentColorIndex - 1]['value']['dark']}"></view>
|
||||
</view>
|
||||
<view class="circle-wrapper left">
|
||||
<view class="circle-progress left-circle"
|
||||
:style="{borderColor: currentColorIndex === 0 ? '#01BEFF' : colorList[currentColorIndex - 1]['value']['dark']}"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="background__right-container">
|
||||
<scroll-view
|
||||
v-if="!isUpdateColorInfo"
|
||||
:style="[scrollViewStyle]"
|
||||
scroll-y
|
||||
:refresher-enabled="true"
|
||||
lower-threshold="20"
|
||||
:refresher-triggered="containerRefreshFlag"
|
||||
@scroll="containerScroll"
|
||||
@scrolltolower="containerScrollLower"
|
||||
@refresherrefresh="containerRefresh"
|
||||
>
|
||||
<view class="background__right__show">
|
||||
<block v-if="currentColorIndex === 0">
|
||||
<view class="background__right__show--title">图鸟基础配色</view>
|
||||
<!-- 色盘 start-->
|
||||
<view class="box" >
|
||||
<view v-for="(item,index) in 16" :key="index" :class="'colorwheel-box colorwheel-' + (index+1)"></view>
|
||||
</view>
|
||||
<!-- 色盘 end-->
|
||||
<view class="background__right__show__content">
|
||||
<view class="background__right__show__content__item tn-shadow-blur" style="background-color: #01BEFF;">
|
||||
<view class="background__right__show__content__item--title">主色蓝</view>
|
||||
<view class="background__right__show__content__item--value">#01BEFF</view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" style="background-color: #FBBD12;">
|
||||
<view class="background__right__show__content__item--title">主色橙</view>
|
||||
<view class="background__right__show__content__item--value">#FBBD12</view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" style="background-color: #00FFC6;">
|
||||
<view class="background__right__show__content__item--title background__right__show__content__item--title--light">点缀青</view>
|
||||
<view class="background__right__show__content__item--value">#00FFC6</view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" style="background-color: #FFF00D;">
|
||||
<view class="background__right__show__content__item--title background__right__show__content__item--title--light">点缀黄</view>
|
||||
<view class="background__right__show__content__item--value">#FFF00D</view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" style="background-color: #FF71D2;">
|
||||
<view class="background__right__show__content__item--title">辅助粉</view>
|
||||
<view class="background__right__show__content__item--value">#FF71D2</view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" style="background-color: #82B2FF;">
|
||||
<view class="background__right__show__content__item--title">辅助蓝</view>
|
||||
<view class="background__right__show__content__item--value background__right__show__content__item--value--light">#82B2FF</view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" style="background-color: #080808;">
|
||||
<view class="background__right__show__content__item--title">文字颜色</view>
|
||||
<view class="background__right__show__content__item--value background__right__show__content__item--value--light">#080808</view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" style="background-color: #F4F4F4;">
|
||||
<view class="background__right__show__content__item--title background__right__show__content__item--title--light">背景灰</view>
|
||||
<view class="background__right__show__content__item--value background__right__show__content__item--value--light">#F4F4F4</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="background__right__show--title">{{ selectColorInfo.name }}-{{ selectColorInfo.color }}</view>
|
||||
|
||||
<view class="background__right__show__content">
|
||||
<block v-for="(value, key, index) in selectColorInfo.value" :key="index">
|
||||
<view class="background__right__show__content__item tn-shadow-blur" :class="[key === 'normal' ? `tn-bg-${selectColorInfo.color}` : `tn-bg-${selectColorInfo.color}--${key}`]">
|
||||
<view class="background__right__show__content__item--title" :class="[['disabled','light'].includes(key) ? 'background__right__show__content__item--title--light' : '']">{{ key }}</view>
|
||||
<view class="background__right__show__content__item--value"
|
||||
:class="[['disabled','light'].includes(key) ? 'background__right__show__content__item--value--light' : '',{'tn-color-white': selectColorInfo.color === 'gray' && key === 'normal'}]"
|
||||
>
|
||||
{{ value }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<block v-if="!['brown','grey','gray'].includes(selectColorInfo.color)">
|
||||
<view class="background__right__show--title background__right__show--title--gradient" :class="[`tn-cool-bg-color-${currentColorIndex % 16 + 1}`]">渐变色</view>
|
||||
|
||||
<view class="background__right__show__content">
|
||||
<view class="background__right__show__content__item tn-shadow-blur" :class="[`tn-main-gradient-${selectColorInfo.color}`]">
|
||||
<view class="background__right__show__content__item--title"></view>
|
||||
<view class="background__right__show__content__item--value"></view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" :class="[`tn-main-gradient-${selectColorInfo.color}--reverse`]">
|
||||
<view class="background__right__show__content__item--title"></view>
|
||||
<view class="background__right__show__content__item--value"></view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" :class="[`tn-main-gradient-${selectColorInfo.color}--light`]">
|
||||
<view class="background__right__show__content__item--title"></view>
|
||||
<view class="background__right__show__content__item--value"></view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" :class="[`tn-main-gradient-${selectColorInfo.color}--light--reverse`]">
|
||||
<view class="background__right__show__content__item--title"></view>
|
||||
<view class="background__right__show__content__item--value"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'basicBackground',
|
||||
data() {
|
||||
return {
|
||||
colorList: [{
|
||||
name: '红色',
|
||||
color: 'red',
|
||||
value: {
|
||||
normal: '#E83A30',
|
||||
dark: '#BA2E26',
|
||||
disabled: '#F39C97',
|
||||
light: '#FAD8D6'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '紫红色',
|
||||
color: 'purplered',
|
||||
value: {
|
||||
normal: '#E72F8C',
|
||||
dark: '#B9266F',
|
||||
disabled: '#F397C5',
|
||||
light: '#FAD5E8'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '紫色',
|
||||
color: 'purple',
|
||||
value: {
|
||||
normal: '#892FE8',
|
||||
dark: '#6E26BA',
|
||||
disabled: '#C497F3',
|
||||
light: '#E7D5FA'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '蓝紫色',
|
||||
color: 'bluepurple',
|
||||
value: {
|
||||
normal: '#5F4FD9',
|
||||
dark: '#4C3FAE',
|
||||
disabled: '#AFA7EC',
|
||||
light: '#DFDCF7'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '海蓝色',
|
||||
color: 'aquablue',
|
||||
value: {
|
||||
normal: '#3646FF',
|
||||
dark: '#2B38CC',
|
||||
disabled: '#9AA2FF',
|
||||
light: '#D7DAFF'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '蓝色',
|
||||
color: 'blue',
|
||||
value: {
|
||||
normal: '#3D7EFF',
|
||||
dark: '#3165CC',
|
||||
disabled: '#9EBEFF',
|
||||
light: '#D8E5FF'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '靛蓝色',
|
||||
color: 'indigo',
|
||||
value: {
|
||||
normal: '#31C9E8',
|
||||
dark: '#27A1BA',
|
||||
disabled: '#98E4F3',
|
||||
light: '#D6F4FA'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '青色',
|
||||
color: 'cyan',
|
||||
value: {
|
||||
normal: '#2DE8BD',
|
||||
dark: '#24BA97',
|
||||
disabled: '#96F3DE',
|
||||
light: '#D5FAF2'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '青绿色',
|
||||
color: 'teal',
|
||||
value: {
|
||||
normal: '#24F083',
|
||||
dark: '#1DC069',
|
||||
disabled: '#91F7C1',
|
||||
light: '#D3FCE6'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '绿色',
|
||||
color: 'green',
|
||||
value: {
|
||||
normal: '#31E749',
|
||||
dark: '#27B93A',
|
||||
disabled: '#98F3A4',
|
||||
light: '#D6FADB'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '黄绿色',
|
||||
color: 'yellowgreen',
|
||||
value: {
|
||||
normal: '#A4E82F',
|
||||
dark: '#82BA26',
|
||||
disabled: '#D1F397',
|
||||
light: '#EDFAD5'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '酸橙色',
|
||||
color: 'lime',
|
||||
value: {
|
||||
normal: '#D5EB00',
|
||||
dark: '#AABC00',
|
||||
disabled: '#E9F57F',
|
||||
light: '#F7FBCC'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '黄色',
|
||||
color: 'yellow',
|
||||
value: {
|
||||
normal: '#FFF420',
|
||||
dark: '#CCC21A',
|
||||
disabled: '#FFF88F',
|
||||
light: '#FFFDD2'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '橘黄色',
|
||||
color: 'orangeyellow',
|
||||
value: {
|
||||
normal: '#FFCA28',
|
||||
dark: '#CCA220',
|
||||
disabled: '#FFE493',
|
||||
light: '#FFF4D4'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '橙色',
|
||||
color: 'orange',
|
||||
value: {
|
||||
normal: '#FFA726',
|
||||
dark: '#CC851E',
|
||||
disabled: '#FFD392',
|
||||
light: '#FFEDD4'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '橘红色',
|
||||
color: 'orangered',
|
||||
value: {
|
||||
normal: '#FF7043',
|
||||
dark: '#CC5A36',
|
||||
disabled: '#FFB7A1',
|
||||
light: '#FFE2D9'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '棕色',
|
||||
color: 'brown',
|
||||
value: {
|
||||
normal: '#914F2C',
|
||||
dark: '#743F23',
|
||||
disabled: '#C8A795',
|
||||
light: '#E9DCD5'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '玄灰色',
|
||||
color: 'grey',
|
||||
value: {
|
||||
normal: '#78909C',
|
||||
dark: '#5F7E8B',
|
||||
disabled: '#C6D1D8',
|
||||
light: '#E4E9EC'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '灰色',
|
||||
color: 'gray',
|
||||
value: {
|
||||
normal: '#AAAAAA',
|
||||
dark: '#838383',
|
||||
disabled: '#E6E6E6',
|
||||
light: '#F8F7F8'
|
||||
}
|
||||
}
|
||||
],
|
||||
// scrollView的样式
|
||||
scrollViewStyle: {
|
||||
height: 0
|
||||
},
|
||||
// picker列表颜色列表信息
|
||||
pickerColorInfos: [],
|
||||
// picker列表颜色选中框样式
|
||||
colorSelectItemStyle: {
|
||||
top: 0,
|
||||
left: 0
|
||||
},
|
||||
// 当前选中的颜色序号
|
||||
currentColorIndex: 0,
|
||||
// 内容容器滚动容器滚动的位置
|
||||
containerScrollTop: 0,
|
||||
// 标记是否正在更新数据
|
||||
isUpdateColorInfo: false,
|
||||
// 内容区域刷新标志
|
||||
containerRefreshFlag: false,
|
||||
// 当前选中颜色的色值信息
|
||||
selectColorInfo: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onReady() {
|
||||
// 等待加载组件完成
|
||||
setTimeout(() => {
|
||||
this.initScrollViewHeight()
|
||||
}, 10)
|
||||
},
|
||||
methods: {
|
||||
// 计算scrollView的高度
|
||||
initScrollViewHeight() {
|
||||
// 获取当前屏幕的安全高度
|
||||
uni.getSystemInfo({
|
||||
success: (systemInfo) => {
|
||||
this.scrollViewStyle.height = (systemInfo.safeArea.height - this.vuex_custom_bar_height + systemInfo.statusBarHeight) + 'px'
|
||||
this.getPickerColorItemInfo()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 内容容器滚动事件
|
||||
containerScroll(e) {
|
||||
// console.log(e);
|
||||
// this.containerScrollTop = e.detail.scrollTop
|
||||
},
|
||||
// 内容scroll-view下拉刷新事件
|
||||
containerRefresh(e) {
|
||||
// console.log(e);
|
||||
if (this.containerRefreshFlag) return
|
||||
this.containerRefreshFlag = true
|
||||
setTimeout(() => {
|
||||
this.containerRefreshFlag = false
|
||||
}, 10)
|
||||
if (this.currentColorIndex - 1 < 0 || this.isUpdateColorInfo) return
|
||||
this.pickerColorClick(this.currentColorIndex - 1)
|
||||
|
||||
},
|
||||
// 内容scroll-view滚动到底部触发事件
|
||||
containerScrollLower(e) {
|
||||
// console.log(e);
|
||||
if (e.detail.direction === 'bottom') {
|
||||
// console.log(e.detail.direction);
|
||||
// 触发底部
|
||||
// if (this.currentColorIndex + 1 > this.colorList.length || this.isUpdateColorInfo) return
|
||||
// console.log('update');
|
||||
// this.pickerColorClick(this.currentColorIndex + 1)
|
||||
}
|
||||
},
|
||||
// 获取色值列表的位置信息
|
||||
getPickerColorItemInfo() {
|
||||
// 获取picker容器的信息
|
||||
this._tGetRect('.background__left__picker').then((pickerInfo) => {
|
||||
let view = uni.createSelectorQuery().in(this)
|
||||
for (let i = 0; i <= this.colorList.length; i++) {
|
||||
view.select('.picker-color-item-' + i).boundingClientRect()
|
||||
}
|
||||
view.exec(res => {
|
||||
// 如果没有获取到，则重新获取
|
||||
if (!res.length) {
|
||||
setTimeout(() => {
|
||||
this.getPickerColorItemInfo()
|
||||
return
|
||||
}, 10)
|
||||
}
|
||||
// 将每个选择颜色值的宽高，位置信息存入列表中
|
||||
res.map((item, index) => {
|
||||
this.pickerColorInfos.push({
|
||||
x: (item.top - pickerInfo.top) + (item.height / 2),
|
||||
y: (item.left - pickerInfo.left) + (item.width / 2)
|
||||
})
|
||||
|
||||
// 初始化选中的圆环
|
||||
this.updatePickerColorSelectItem()
|
||||
this.updateSelectColorInfo()
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
// 色值选择
|
||||
pickerColorClick(index) {
|
||||
if (index === this.currentColorIndex) {
|
||||
return
|
||||
}
|
||||
this.currentColorIndex = index
|
||||
this.updatePickerColorSelectItem()
|
||||
this.updateSelectColorInfo()
|
||||
},
|
||||
// 设置选中圆环信息
|
||||
updatePickerColorSelectItem() {
|
||||
const colorInfos = this.pickerColorInfos[this.currentColorIndex]
|
||||
this.colorSelectItemStyle.top = colorInfos.x - uni.upx2px(40) + 'px'
|
||||
this.colorSelectItemStyle.left = colorInfos.y - uni.upx2px(40) + 'px'
|
||||
},
|
||||
// 设置选中颜色的信息
|
||||
updateSelectColorInfo() {
|
||||
if (this.currentColorIndex === 0) {
|
||||
return
|
||||
}
|
||||
this.isUpdateColorInfo = true
|
||||
this.$tn.message.loading('加载中...')
|
||||
// this.containerScrollTop = Math.random()
|
||||
setTimeout(() => {
|
||||
// this.containerScrollTop = 0
|
||||
this.selectColorInfo = this.colorList[this.currentColorIndex - 1]
|
||||
this.$tn.message.closeLoading()
|
||||
this.isUpdateColorInfo = false
|
||||
}, 10)
|
||||
// setTimeout(() => {
|
||||
|
||||
// }, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 色盘 start*/
|
||||
.box{
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
width: 550rpx;
|
||||
height: 600rpx;
|
||||
background: none;
|
||||
}
|
||||
.colorwheel-box{
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
height: 50%;
|
||||
left: 10%;
|
||||
bottom: 20%;
|
||||
border-radius: 100% 10rpx;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.colorwheel-1{
|
||||
background: #2DE8BD;
|
||||
transform: rotate(-78.75deg);
|
||||
}
|
||||
.colorwheel-2{
|
||||
background: #24F083;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.colorwheel-3{
|
||||
background: #31E749;
|
||||
transform: rotate(-101.25deg);
|
||||
}
|
||||
.colorwheel-4{
|
||||
background: #A4E82F;
|
||||
transform: rotate(-112.5deg);
|
||||
}
|
||||
.colorwheel-5{
|
||||
background: #D5EB00;
|
||||
transform: rotate(-123.75deg);
|
||||
}
|
||||
.colorwheel-6{
|
||||
background: #FFF420;
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
.colorwheel-7{
|
||||
background: #FFCA28;
|
||||
transform: rotate(-146.25deg);
|
||||
}
|
||||
.colorwheel-8{
|
||||
background: #FFA726;
|
||||
transform: rotate(-157.5deg);
|
||||
}
|
||||
.colorwheel-9{
|
||||
background: #FF7043;
|
||||
transform: rotate(-168.75deg);
|
||||
}
|
||||
.colorwheel-10{
|
||||
background: #E83A30;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.colorwheel-11{
|
||||
background: #E72F8C;
|
||||
transform: rotate(-11.25deg);
|
||||
}
|
||||
.colorwheel-12{
|
||||
background: #892FE8;
|
||||
transform: rotate(-22.5deg);
|
||||
}
|
||||
.colorwheel-13{
|
||||
background: #5F4FD9;
|
||||
transform: rotate(-33.75deg);
|
||||
}
|
||||
.colorwheel-14{
|
||||
background: #3646FF;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.colorwheel-15{
|
||||
background: #3D7EFF;
|
||||
transform: rotate(-56.25deg);
|
||||
}
|
||||
.colorwheel-16{
|
||||
background: #31C9E8;
|
||||
transform: rotate(-67.5deg);
|
||||
}
|
||||
/* 色盘 end*/
|
||||
|
||||
|
||||
/* 背景颜色容器 start */
|
||||
.background-container {
|
||||
.background {
|
||||
|
||||
/* 左边容器 start */
|
||||
&__left-container {
|
||||
width: 16%;
|
||||
height: 100%;
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
&__left {
|
||||
&__picker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 20rpx;
|
||||
position: relative;
|
||||
|
||||
&__item-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin: 18rpx auto;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
|
||||
&--basic {
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
&__select-wrapper {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
position: absolute;
|
||||
|
||||
.circle-wrapper {
|
||||
width: 40rpx;
|
||||
height: 80rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.circle-progress {
|
||||
display: inline-block;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border: 6rpx solid transparent;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
// transform: rotate(225deg);
|
||||
transform: rotate(45deg);
|
||||
|
||||
&.right-circle {
|
||||
right: 0;
|
||||
border-bottom-color: transparent !important;
|
||||
border-left-color: transparent !important;
|
||||
// transition: transform 0.3s cubic-bezier(0,.13,0,1.43);
|
||||
}
|
||||
|
||||
&.left-circle {
|
||||
left: 0;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
// transition: transform 0.3s cubic-bezier(0,.13,0,1.43);
|
||||
}
|
||||
|
||||
// &--active {
|
||||
// transform: rotate(45deg);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 左边容器 end */
|
||||
|
||||
/* 右边容器 start */
|
||||
&__right-container {
|
||||
width: 84%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__right {
|
||||
&__show {
|
||||
padding: 30rpx;
|
||||
overflow: hidden;
|
||||
transform-origin: 0 50%;
|
||||
// opacity: 0;
|
||||
// transition: opacity 0.2s ease;
|
||||
// transform: scaleX(0) rotate(-90deg);
|
||||
// transform: rotateY(-90deg);
|
||||
// transform: scaleX(0);
|
||||
// transition: all 0.2s linear;
|
||||
|
||||
&--visible {
|
||||
// transform: scaleX(1) rotate(0deg);
|
||||
// transform: rotateY(0deg);
|
||||
// transform: scaleX(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&--title {
|
||||
font-size: 46rpx;
|
||||
text-transform: capitalize;
|
||||
|
||||
&--gradient {
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
|
||||
margin-top: 40rpx;
|
||||
|
||||
&__item {
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 40rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 40rpx;
|
||||
|
||||
&--title {
|
||||
width: 100%;
|
||||
font-size: 1.4em;
|
||||
line-height: 1.4em;
|
||||
color: #FFFFFF;
|
||||
text-transform: capitalize;
|
||||
|
||||
&--light {
|
||||
color: #080808 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--value {
|
||||
width: 100%;
|
||||
font-size: 0.8em;
|
||||
color: #AAAAAA;
|
||||
|
||||
&--light {
|
||||
color: #818181 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 右边容器 end */
|
||||
}
|
||||
}
|
||||
|
||||
/* 背景颜色容器 end */
|
||||
|
||||
@-webkit-keyframes circleProgressLoad_right {
|
||||
0% {
|
||||
transform: rotate(225deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes circleProgressLoad_left {
|
||||
0% {
|
||||
transform: rotate(225deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
456
basicPage/flex-layout/flex-layout.vue
Normal file
456
basicPage/flex-layout/flex-layout.vue
Normal file
@@ -0,0 +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>
|
||||
169
basicPage/grid-layout/grid-layout.vue
Normal file
169
basicPage/grid-layout/grid-layout.vue
Normal file
@@ -0,0 +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="[$tn.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>
|
||||
231
basicPage/icon/icon.vue
Normal file
231
basicPage/icon/icon.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
|
||||
<view class="basic-icon">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>图标</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<view class="search-fixed">
|
||||
<view class="search-content">
|
||||
<input class="search-content__input" placeholder-class="search-content__input-placeholder tn-color-blue"
|
||||
placeholder="搜索 中文名/英文名" @input="saerchInput" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="" :style="{marginTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<block v-for="(item, index) in resultIconList" :key="index">
|
||||
|
||||
<!-- 分类标题-->
|
||||
<view class="tn-text-center tn-text-xl tn-text-bold tn-margin-lg">
|
||||
<text class="tn-icon-font"></text>
|
||||
<text class="tn-padding-left-sm tn-padding-right-sm">{{ item.title }}</text>
|
||||
<text class="tn-icon-font"></text>
|
||||
</view>
|
||||
|
||||
<view class="icon__container tn-flex tn-flex-wrap tn-flex-row-left tn-flex-col-center tn-margin">
|
||||
<view v-for="(icons_item, icons_index) in item.icons" :key="icons_index"
|
||||
class="icon__item tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center icon-shadow"
|
||||
:class="[{'icon__item--active': icons_index === currentIconIndex}]"
|
||||
@click="clickIcon(icons_index, icons_item.name, icons_item.icon)">
|
||||
<view class="icon__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view :class="[`tn-icon-${icons_item.icon}`]"></view>
|
||||
</view>
|
||||
<view class="icon__item--title tn-text-ellipsis tn-text-df tn-color-grey">{{ icons_item.icon }}</view>
|
||||
<!-- <view class="icon__item--title tn-text-ellipsis tn-text-xs tn-color-grey">{{ icons_item.name }}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view class="tn-text-center tn-margin-bottom-xl">
|
||||
<view>
|
||||
icon目前700+，支持
|
||||
<text class="tn-color-orange tn-text-lg tn-padding-xs">中文、英文</text>
|
||||
搜索
|
||||
</view>
|
||||
<button class=" tn-button--clear-style" open-type="feedback">
|
||||
<view class="tn-margin tn-text-center">
|
||||
<text>里面缺少你想要的吗？UI期待你的需求</text>
|
||||
<text class="tn-color-blue">留言</text>
|
||||
</view>
|
||||
</button>
|
||||
</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() {
|
||||
//filter会改变原数组，故使用深拷贝
|
||||
var newArr = JSON.parse(JSON.stringify(iconData.data))
|
||||
if (!this.searchValue) return iconData.data
|
||||
return newArr.filter((item1) => {
|
||||
item1.icons = item1.icons.filter((item2) => {
|
||||
if (item2.name.includes(this.searchValue) || item2.icon.includes(this.searchValue)) {
|
||||
return item2
|
||||
}
|
||||
})
|
||||
if (item1.icons.length > 0) {
|
||||
return item1
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// input输入的内容
|
||||
saerchInput(e) {
|
||||
//重新设置为-1，避免选中之前选中的图标
|
||||
this.currentIconIndex=-1;
|
||||
this.searchValue = e.target.value;
|
||||
this.resultIconList
|
||||
},
|
||||
// 点击图标
|
||||
clickIcon(index, name ,icon) {
|
||||
this.currentIconIndex = index
|
||||
// this.$tn.message.toast(name, false, null, 'none', 5000)
|
||||
//这里点击后直接复制图标名称。
|
||||
uni.setClipboardData({
|
||||
data: icon,
|
||||
showToast: false,
|
||||
success: () => {
|
||||
console.log('success'); //复制成功
|
||||
this.$tn.message.toast('已复制：' + icon, false, null, 'none', 5000)
|
||||
}
|
||||
});
|
||||
// const save = function (e) {
|
||||
// e.clipboardData.setData('text/plain', name)
|
||||
// e.preventDefault() // 阻止默认行为
|
||||
// }
|
||||
// const once = {
|
||||
// once: true
|
||||
// }
|
||||
// document.addEventListener('copy', save, once) // 添加一个copy事件,当触发时执行一次,执行完删除
|
||||
// document.execCommand('copy') // 执行copy方法
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-fixed {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
transition: all 0.25s ease-out;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 搜索框 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%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标容器 end */
|
||||
</style>
|
||||
3
basicPage/icon/iconfont.js
Normal file
3
basicPage/icon/iconfont.js
Normal file
File diff suppressed because one or more lines are too long
79
basicPage/shadow/shadow.vue
Normal file
79
basicPage/shadow/shadow.vue
Normal file
@@ -0,0 +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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
141
basicPage/tag/tag.vue
Normal file
141
basicPage/tag/tag.vue
Normal file
@@ -0,0 +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">
|
||||
<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
261
basicPage/test/test.vue
Normal 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
105
basicPage/utils/color/index.vue
Normal 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.$tn.color.getRandomColorClass()
|
||||
},
|
||||
// 获取随机颜色
|
||||
getRandomColor() {
|
||||
this.randomColorClass = this.$tn.color.getRandomColorClass('color')
|
||||
},
|
||||
// 获取随机酷炫背景颜色
|
||||
getRandomCoolColor() {
|
||||
this.randomCoolBgColorClass = this.$tn.color.getRandomCoolBgClass()
|
||||
},
|
||||
// 将hex与rgb互转
|
||||
convertToRGBOrHex() {
|
||||
if (this.rgbFlag) {
|
||||
this.hexRGBValue = this.$tn.color.rgbToHex(this.hexRGBValue)
|
||||
} else {
|
||||
this.hexRGBValue = this.$tn.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
176
basicPage/utils/message/index.vue
Normal 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.$tn.message.toast('弹出toast')
|
||||
},
|
||||
openToast_2() {
|
||||
this.$tn.message.toast('弹出toast icon', false, null, 'success')
|
||||
},
|
||||
openToast_3() {
|
||||
this.$tn.message.toast('弹出toast mask', true)
|
||||
},
|
||||
openToast_4() {
|
||||
this.$tn.message.toast('弹出toast duration', false, null, 'none', 3000)
|
||||
},
|
||||
openToast_5() {
|
||||
this.$tn.message.toast('弹出toast cb', true, () => {
|
||||
setTimeout(() => {
|
||||
this.$tn.message.toast('执行完毕后弹出', true, null, 'success')
|
||||
}, 500)
|
||||
})
|
||||
},
|
||||
// 关闭Toast
|
||||
closeToast() {
|
||||
this.$tn.message.closeToast()
|
||||
},
|
||||
|
||||
|
||||
// 弹出loading
|
||||
openLoading() {
|
||||
this.$tn.message.loading('弹出loading')
|
||||
setTimeout(() => {
|
||||
this.closeLoading()
|
||||
}, 3000)
|
||||
},
|
||||
// 关闭loading
|
||||
closeLoading() {
|
||||
this.$tn.message.closeLoading()
|
||||
},
|
||||
|
||||
|
||||
// 弹出modal
|
||||
openModal_1() {
|
||||
this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
|
||||
this.$tn.message.toast('点击了确认按钮')
|
||||
}, true, () => {
|
||||
this.$tn.message.toast('点击了取消按钮')
|
||||
})
|
||||
},
|
||||
openModal_2() {
|
||||
this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
|
||||
this.$tn.message.toast('点击了确认按钮')
|
||||
}, false, null)
|
||||
},
|
||||
openModal_3() {
|
||||
this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
|
||||
this.$tn.message.toast('点击了跳转按钮')
|
||||
}, true, () => {
|
||||
this.$tn.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
159
basicPage/utils/number/index.vue
Normal 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>{{ $tn.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>{{ $tn.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>{{ $tn.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>{{ $tn.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>{{ $tn.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>{{ $tn.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>{{ $tn.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>{{ $tn.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>{{ $tn.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>{{ $tn.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>{{ $tn.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>{{ $tn.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>{{ $tn.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.$tn.number.random(0, 100.99)
|
||||
},
|
||||
// 获取整数随机值
|
||||
getIntRandomValue() {
|
||||
this.intRandomValue = this.$tn.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
89
basicPage/utils/string/index.vue
Normal 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.$tn.string.trim(this.trimValue)
|
||||
},
|
||||
// 处理将大写字符串转换为指定的连接符连接的字符串
|
||||
handlerHumpChar() {
|
||||
this.humpCharValue = this.$tn.string.humpConvertChar(this.humpCharValue, '_')
|
||||
},
|
||||
// 处理将指定的连接字符连接的字符串转换为大写的字符串
|
||||
handlerCharHump() {
|
||||
this.charHumpValue = this.$tn.string.charConvertHump(this.charHumpValue, '_')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.basic-utils__string {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user