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

更新图标库

Browse Source 
修复已知bug
This commit is contained in:
jaylen
2022-06-06 13:10:28 +08:00
parent 81579ccee5
commit 1e087b5ac3
226 changed files with 51832 additions and 46044 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.DS_Store
Vendored
BIN
View File
Binary file not shown.
App.vue
+90 -19
View File
@@ -1,20 +1,91 @@
<script> <script>
import Vue from 'vue' import Vue from 'vue'
import store from './store/index.js'
export default { import updateCustomBarInfo from './tuniao-ui/libs/function/updateCustomBarInfo.js'
onLaunch: function() {
}, export default {
onShow: function() { onLaunch: function() {
// console.log('App Show') uni.getSystemInfo({
}, success: function(e) {
onHide: function() { // #ifndef H5
// console.log('App Hide') // 获取手机系统版本
} const system = e.system.toLowerCase()
} const platform = e.platform.toLowerCase()
</script> // 判断是否为ios设备
if (platform.indexOf('ios') != -1 && (system.indexOf('ios') != -1 || system.indexOf('macos') != -1)) {
<style lang="scss"> Vue.prototype.SystemPlatform = 'apple'
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */ } else if (platform.indexOf('android') != -1 && (system.indexOf('android') != -1)) {
@import './tuniao-ui/index.scss'; Vue.prototype.SystemPlatform = 'android'
@import './tuniao-ui/iconfont.css'; } else {
Vue.prototype.SystemPlatform = 'devtools'
}
// #endif
}
})
// 获取设备的状态栏信息和自定义顶栏信息
// store.dispatch('updateCustomBarInfo')
updateCustomBarInfo().then((res) => {
store.commit('$tStore', {
name: 'vuex_status_bar_height',
value: res.statusBarHeight
})
store.commit('$tStore', {
name: 'vuex_custom_bar_height',
value: res.customBarHeight
})
})
// #ifdef MP-WEIXIN
//更新检测
if (wx.canIUse('getUpdateManager')) {
const updateManager = wx.getUpdateManager();
updateManager && updateManager.onCheckForUpdate((res) => {
if (res.hasUpdate) {
updateManager.onUpdateReady(() => {
uni.showModal({
title: '更新提示',
content: '新版本已经准备就绪，是否需要重新启动应用？',
success: (res) => {
if (res.confirm) {
uni.clearStorageSync() // 更新完成后刷新storage的数据
updateManager.applyUpdate()
}
}
})
})
updateManager.onUpdateFailed(() => {
uni.showModal({
title: '已有新版本上线',
content: '小程序自动更新失败，请删除该小程序后重新搜索打开哟~~~',
showCancel: false
})
})
} else {
//没有更新
}
})
} else {
uni.showModal({
title: '提示',
content: '当前微信版本过低，无法使用该功能，请更新到最新的微信后再重试。',
showCancel: false
})
}
// #endif
},
onShow: function() {
// console.log('App Show')
},
onHide: function() {
// console.log('App Hide')
}
}
</script>
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import './tuniao-ui/index.scss';
@import './tuniao-ui/iconfont.css';
</style> </style>
README.md
+192 -192
View File
@@ -1,192 +1,192 @@
<p align="center"> <p align="center">
<img alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/top.jpg" width="60%" /> <img alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/top.jpg" width="60%" />
</p> </p>
<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">Tuniao UI</h3> <h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">Tuniao UI</h3>
<h3 align="center">提供丰富组件和炫酷页面的UI框架</h3> <h3 align="center">提供丰富组件和炫酷页面的UI框架</h3>
<p align="center"> <p align="center">
<a href="https://gitee.com/TSpecific/tuniao-ui/stargazers" target="_blank"> <a href="https://gitee.com/TSpecific/tuniao-ui/stargazers" target="_blank">
<img src="https://svg.hamm.cn/gitee.svg?type=star&user=TSpecific&project=tuniao-ui"/> <img src="https://svg.hamm.cn/gitee.svg?type=star&user=TSpecific&project=tuniao-ui"/>
</a> </a>
<a href="https://gitee.com/TSpecific/tuniao-ui/members" target="_blank"> <a href="https://gitee.com/TSpecific/tuniao-ui/members" target="_blank">
<img src="https://svg.hamm.cn/gitee.svg?type=fork&user=TSpecific&project=tuniao-ui"/> <img src="https://svg.hamm.cn/gitee.svg?type=fork&user=TSpecific&project=tuniao-ui"/>
</a> </a>
<img src="https://svg.hamm.cn/badge.svg?key=Platform&value=uni-app"/> <img src="https://svg.hamm.cn/badge.svg?key=Platform&value=uni-app"/>
</p> </p>
## 说明 ## 说明
**图鸟UI**，是基于uni-app进行开发的UI框架，提供丰富的组件进行快速开发，已经支持`H5`和`微信小程序`，包含常用表单组件、信息展示组件等，并提供`丰富的酷炫页面模板`。 **图鸟UI**，是基于uni-app进行开发的UI框架，提供丰富的组件进行快速开发，已经支持`H5`和`微信小程序`，包含常用表单组件、信息展示组件等，并提供`丰富的酷炫页面模板`。
### 开源版本中所使用到的图片均做了防盗链，只能在调试中使用，不保证在生产环境中可以使用。 ### 开源版本中所使用到的图片均做了防盗链，只能在调试中使用，不保证在生产环境中可以使用。
### 图片资源以上传到[图鸟社区](https://www.yuque.com/tuniao)。 ### 图片资源以上传到[图鸟社区](https://www.yuque.com/tuniao)。
## 特点 ## 特点
- 包含基础常用的布局元素，flex、grid、浮动 - 包含基础常用的布局元素，flex、grid、浮动
- 完整一体的配色体系，包含4种色深模式，同时包含4套渐变配色 - 完整一体的配色体系，包含4种色深模式，同时包含4套渐变配色
- 300+风格统一的图标icon，后续可继续增加 - 300+风格统一的图标icon，后续可继续增加
- 30+精选组件，让开发者可以快速进行开发 - 30+精选组件，让开发者可以快速进行开发
- 酷炫常用的页面模板，更有让你眼前一亮的界面效果 - 酷炫常用的页面模板，更有让你眼前一亮的界面效果
- 图片素材语雀便捷下载，图鸟社区共同成长 - 图片素材语雀便捷下载，图鸟社区共同成长
- 使用文档详尽说明，让你一文读懂图鸟UI - 使用文档详尽说明，让你一文读懂图鸟UI
## 链接 ## 链接
- [图鸟社区](https://www.yuque.com/tuniao) - [图鸟社区](https://www.yuque.com/tuniao)
- [使用手册](https://tuniaoui.tuniaokj.com/components/introduce.html) - [使用手册](https://tuniaoui.tuniaokj.com/components/introduce.html)
## 安装 ## 安装
下载地址 ------> [图鸟UI - DCloud 插件市场](https://ext.dcloud.net.cn/plugin?id=7088) 下载地址 ------> [图鸟UI - DCloud 插件市场](https://ext.dcloud.net.cn/plugin?id=7088)
## 快速上手 ## 快速上手
#### 1.复制文件到项目的根目录 #### 1.复制文件到项目的根目录
- ##### 必要文件夹 - ##### 必要文件夹
- 复制tuniao-ui文件夹 - 复制tuniao-ui文件夹
- 复制store文件夹 - 复制store文件夹
- ##### 如果使用了模板页面则需要复制以下文件夹 - ##### 如果使用了模板页面则需要复制以下文件夹
- 复制libs文件夹 - 复制libs文件夹
- 复制static文件夹 - 复制static文件夹
#### 2.引入TuniaoUI主JS库 #### 2.引入TuniaoUI主JS库
在项目根目录中的`main.js`中，引入并使用TuniaoUI的JS库，注意这两行配置代码要放在import Vue之后。 在项目根目录中的`main.js`中，引入并使用TuniaoUI的JS库，注意这两行配置代码要放在import Vue之后。
```javascript ```javascript
// 引入全局TuniaoUI // 引入全局TuniaoUI
import TuniaoUI from 'tuniao-ui' import TuniaoUI from 'tuniao-ui'
Vue.use(TuniaoUI) Vue.use(TuniaoUI)
``` ```
#### 3.引入TuniaoUI提供的vuex #### 3.引入TuniaoUI提供的vuex
在项目根目录的`main.js`中引入store 在项目根目录的`main.js`中引入store
```js ```js
// 引入store // 引入store
import store from './store' import store from './store'
... ...
const app = new Vue({ const app = new Vue({
store, store,
...App ...App
}) })
``` ```
在项目根目录中的`main.js`中，引入并使用TuniaoUI的vuex，注意这两行配置代码要放在import Vue之后。 在项目根目录中的`main.js`中，引入并使用TuniaoUI的vuex，注意这两行配置代码要放在import Vue之后。
```js ```js
// 引入TuniaoUI提供的vuex简写方法 // 引入TuniaoUI提供的vuex简写方法
let vuexStore = require('@/store/$t.mixin.js') let vuexStore = require('@/store/$t.mixin.js')
Vue.mixin(vuexStore) Vue.mixin(vuexStore)
``` ```
#### 4.引入TuniaoUI的全局SCSS主题文件 #### 4.引入TuniaoUI的全局SCSS主题文件
在项目根目录的`uni.scss`中引入此文件。 在项目根目录的`uni.scss`中引入此文件。
```scss ```scss
@import 'tuniao-ui/theme.scss' @import 'tuniao-ui/theme.scss';
``` ```
#### 5.引入TuniaoUI基础样式和图标文件 #### 5.引入TuniaoUI基础样式和图标文件
::: danger 注意 ::: danger 注意
在`App.vue`中`style标签`首行的位置引入，注意给style标签加入lang="scss"属性 在`App.vue`中`style标签`首行的位置引入，注意给style标签加入lang="scss"属性
::: :::
```scss ```scss
<style lang="scss"> <style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */ /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import './tuniao-ui/index.scss'; @import './tuniao-ui/index.scss';
@import './tuniao-ui/iconfont.css'; @import './tuniao-ui/iconfont.css';
</style> </style>
``` ```
#### 6.配置easycom组件模式 #### 6.配置easycom组件模式
此配置需要在根目录的`page.json`中进行。 此配置需要在根目录的`page.json`中进行。
::: tip 温馨提示 ::: tip 温馨提示
1. uni-app为了调试性能的原因，修改`easycom`规则不会实时生效，配置完后，您需要重启HBuilderX或者重新编译项目才能正常使用TuniaoUI的功能。 1. uni-app为了调试性能的原因，修改`easycom`规则不会实时生效，配置完后，您需要重启HBuilderX或者重新编译项目才能正常使用TuniaoUI的功能。
2. 请确保您的`pages.json`中只有一个`easycom`字段，否则请自行合并多个引入规则。 2. 请确保您的`pages.json`中只有一个`easycom`字段，否则请自行合并多个引入规则。
::: :::
``` ```
// pages.json // pages.json
{ {
"easycom": { "easycom": {
"^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue" "^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue"
}, },
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{ {
// ...... // ......
} }
] ]
// ...... // ......
} }
``` ```
## UI截图 ## UI截图
<p> <p>
<img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/1.jpg" width="300" /> <img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/1.jpg" width="300" />
<img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/2.jpg" width="300" /> <img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/2.jpg" width="300" />
<img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/3.jpg" width="300" /> <img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/3.jpg" width="300" />
<img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/4.jpg" width="300" /> <img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/4.jpg" width="300" />
<img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/5.jpg" width="300" /> <img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/5.jpg" width="300" />
<img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/6.jpg" width="300" /> <img style="margin-top: 10px; margin-left: 10px;" alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/6.jpg" width="300" />
</p> </p>
## 联系作者 ## 联系作者
<p> <p>
<img alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/bottom.jpg" width="380" /> <img alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/bottom.jpg" width="380" />
</p> </p>
### 微信群聊二维码 ### 微信群聊二维码
<p> <p>
<img alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/group_code.jpg" width="380" /> <img alt="图鸟UI" src="https://tnuiimage.tnkjapp.com/gitee_introduce_file/group_code.jpg" width="380" />
</p> </p>
## 版权信息 ## 版权信息
`TuniaoUI开源版`遵循`Apache`协议，意味着您无需支付任何费用，也无需授权，即可将TuniaoUI开源版应用到您的产品中，但是需要保留TuniaoUI的信息。 `TuniaoUI开源版`遵循`Apache`协议，意味着您无需支付任何费用，也无需授权，即可将TuniaoUI开源版应用到您的产品中，但是需要保留TuniaoUI的信息。
basicPage/avatar/avatar.vue
+145 -145
View File
@@ -1,145 +1,145 @@
<template> <template>
<view class="basic-avatar tn-safe-area-inset-bottom"> <view class="basic-avatar tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>头像</tn-nav-bar> <tn-nav-bar fixed>头像</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础"> <demo-title title="基础">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap"> <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar></tn-avatar> <tn-avatar></tn-avatar>
</view> </view>
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar backgroundColor="#FFFFFF"></tn-avatar> <tn-avatar backgroundColor="#FFFFFF"></tn-avatar>
</view> </view>
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar icon="link" backgroundColor="#FFFFFF"></tn-avatar> <tn-avatar icon="link" backgroundColor="#FFFFFF"></tn-avatar>
</view> </view>
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar text="TN" backgroundColor="#FFFFFF"></tn-avatar> <tn-avatar text="TN" backgroundColor="#FFFFFF"></tn-avatar>
</view> </view>
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar :src="src"></tn-avatar> <tn-avatar :src="src"></tn-avatar>
</view> </view>
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar :shadow="true" :src="src"></tn-avatar> <tn-avatar :shadow="true" :src="src"></tn-avatar>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="大小"> <demo-title title="大小">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap"> <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar size="sm" :src="src"></tn-avatar> <tn-avatar size="sm" :src="src"></tn-avatar>
</view> </view>
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar :src="src"></tn-avatar> <tn-avatar :src="src"></tn-avatar>
</view> </view>
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar size="lg" :src="src"></tn-avatar> <tn-avatar size="lg" :src="src"></tn-avatar>
</view> </view>
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar size="xl" :src="src"></tn-avatar> <tn-avatar size="xl" :src="src"></tn-avatar>
</view> </view>
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar size="160rpx" :src="src"></tn-avatar> <tn-avatar size="160rpx" :src="src"></tn-avatar>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="形状"> <demo-title title="形状">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap"> <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar shape="circle" :src="src"></tn-avatar> <tn-avatar shape="circle" :src="src"></tn-avatar>
</view> </view>
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar shape="square" :src="src"></tn-avatar> <tn-avatar shape="square" :src="src"></tn-avatar>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="边框"> <demo-title title="边框">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap"> <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar :border="true" :src="src"></tn-avatar> <tn-avatar :border="true" :src="src"></tn-avatar>
</view> </view>
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar :border="true" borderColor="#01BEFF" :src="src"></tn-avatar> <tn-avatar :border="true" borderColor="#01BEFF" :src="src"></tn-avatar>
</view> </view>
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar :border="true" borderColor="#01BEFF" :borderSize="4" :src="src"></tn-avatar> <tn-avatar :border="true" borderColor="#01BEFF" :borderSize="4" :src="src"></tn-avatar>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="角标"> <demo-title title="角标">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap"> <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar :badge="true" badgeText="99+" :src="src"></tn-avatar> <tn-avatar :badge="true" badgeText="99+" :src="src"></tn-avatar>
</view> </view>
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar :badge="true" badgeIcon="vip" :src="src"></tn-avatar> <tn-avatar :badge="true" badgeIcon="vip" :src="src"></tn-avatar>
</view> </view>
<view class="tn-margin-sm"> <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> <tn-avatar :badge="true" badgeIcon="vip" badgeBgColor="transparent" badgeColor="tn-color-orange" :badgeSize="40" :badgePosition="[-8, 18]" :src="src"></tn-avatar>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="头像组"> <demo-title title="头像组">
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar-group :lists="groupList"></tn-avatar-group> <tn-avatar-group :lists="groupList"></tn-avatar-group>
</view> </view>
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar-group :lists="groupList" shape="shape"></tn-avatar-group> <tn-avatar-group :lists="groupList" shape="shape"></tn-avatar-group>
</view> </view>
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar-group :lists="groupList" size="lg"></tn-avatar-group> <tn-avatar-group :lists="groupList" size="lg"></tn-avatar-group>
</view> </view>
<view class="tn-margin-sm"> <view class="tn-margin-sm">
<tn-avatar-group :lists="groupList" size="lg" :gap="0.5"></tn-avatar-group> <tn-avatar-group :lists="groupList" size="lg" :gap="0.5"></tn-avatar-group>
</view> </view>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'basicAvatar', name: 'basicAvatar',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai4.jpg', src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai4.jpg',
groupList: [ groupList: [
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'}, {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'}, {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
{text: 'TN'}, {text: 'TN'},
{icon: 'logo-tuniao'}, {icon: 'logo-tuniao'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'}, {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'}, {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
] ]
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.basic-avatar { .basic-avatar {
background-color: $tn-bg-gray-color; background-color: $tn-bg-gray-color;
min-height: 100vh; min-height: 100vh;
} }
</style> </style>
basicPage/badge/badge.vue
+104 -104
View File
@@ -1,105 +1,105 @@
<template> <template>
<view class="basic-badge tn-safe-area-inset-bottom"> <view class="basic-badge tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>微标</tn-nav-bar> <tn-nav-bar fixed>微标</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础"> <demo-title title="基础">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap"> <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 :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>0</text></tn-badge>
<tn-badge margin="10rpx 10rpx"><text>99</text></tn-badge> <tn-badge margin="10rpx 10rpx"><text>99</text></tn-badge>
<tn-badge margin="10rpx 10rpx"><text>99+</text></tn-badge> <tn-badge margin="10rpx 10rpx"><text>99+</text></tn-badge>
</view> </view>
</demo-title> </demo-title>
<demo-title title="大小"> <demo-title title="大小">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap"> <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 :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="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 :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> <tn-badge :fontSize="30" padding="10rpx 30rpx" margin="10rpx 10rpx"><text>99+</text></tn-badge>
</view> </view>
</demo-title> </demo-title>
<demo-title title="颜色"> <demo-title title="颜色">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap"> <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="#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="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-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-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> <tn-badge backgroundColor="tn-main-gradient-indigo" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
</view> </view>
</demo-title> </demo-title>
<demo-title title="微标使用"> <demo-title title="微标使用">
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap"> <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
<view class="badge-demo"> <view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" > <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" >
<text>99+</text> <text>99+</text>
</tn-badge> </tn-badge>
</view> </view>
<view class="badge-demo"> <view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" :translateCenter="false"> <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" :translateCenter="false">
<text>99+</text> <text>99+</text>
</tn-badge> </tn-badge>
</view> </view>
<view class="badge-demo"> <view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" top="-18rpx" right="20rpx"> <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" top="-18rpx" right="20rpx">
<text>99+</text> <text>99+</text>
</tn-badge> </tn-badge>
</view> </view>
</view> </view>
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap tn-margin-top"> <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap tn-margin-top">
<view class="badge-demo"> <view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" ></tn-badge> <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" ></tn-badge>
</view> </view>
<view class="badge-demo"> <view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" :translateCenter="false"></tn-badge> <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" :translateCenter="false"></tn-badge>
</view> </view>
<view class="badge-demo"> <view class="badge-demo">
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" top="-18rpx" right="20rpx"></tn-badge> <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" top="-18rpx" right="20rpx"></tn-badge>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'basicBadge', name: 'basicBadge',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.basic-badge { .basic-badge {
background-color: $tn-bg-gray-color; background-color: $tn-bg-gray-color;
min-height: 100vh; min-height: 100vh;
} }
.badge-demo { .badge-demo {
position: relative; position: relative;
width: 160rpx; width: 160rpx;
height: 160rpx; height: 160rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
margin: 18rpx 20rpx; margin: 18rpx 20rpx;
} }
</style> </style>
basicPage/border/border.vue
+140 -140
View File
@@ -1,141 +1,141 @@
<template> <template>
<view class="basic-border tn-safe-area-inset-bottom"> <view class="basic-border tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>边框</tn-nav-bar> <tn-nav-bar fixed>边框</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="普通边框"> <demo-title title="普通边框">
<view class="border-content tn-border-solid"> <view class="border-content tn-border-solid">
<view>四周边框</view> <view>四周边框</view>
</view> </view>
<view class="border-content tn-border-solid-top"> <view class="border-content tn-border-solid-top">
<view>顶部边框</view> <view>顶部边框</view>
</view> </view>
<view class="border-content tn-border-solid-right"> <view class="border-content tn-border-solid-right">
<view>右边边框</view> <view>右边边框</view>
</view> </view>
<view class="border-content tn-border-solid-bottom"> <view class="border-content tn-border-solid-bottom">
<view>下面边框</view> <view>下面边框</view>
</view> </view>
<view class="border-content tn-border-solid-left"> <view class="border-content tn-border-solid-left">
<view>左边边框</view> <view>左边边框</view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="加粗边框"> <demo-title title="加粗边框">
<view class="border-content tn-border-solids"> <view class="border-content tn-border-solids">
<view>四周边框</view> <view>四周边框</view>
</view> </view>
<view class="border-content tn-border-solids-top"> <view class="border-content tn-border-solids-top">
<view>顶部边框</view> <view>顶部边框</view>
</view> </view>
<view class="border-content tn-border-solids-right"> <view class="border-content tn-border-solids-right">
<view>右边边框</view> <view>右边边框</view>
</view> </view>
<view class="border-content tn-border-solids-bottom"> <view class="border-content tn-border-solids-bottom">
<view>下面边框</view> <view>下面边框</view>
</view> </view>
<view class="border-content tn-border-solids-left"> <view class="border-content tn-border-solids-left">
<view>左边边框</view> <view>左边边框</view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="虚线边框"> <demo-title title="虚线边框">
<view class="border-content tn-border-dashed"> <view class="border-content tn-border-dashed">
<view>四周边框</view> <view>四周边框</view>
</view> </view>
<view class="border-content tn-border-dashed-top"> <view class="border-content tn-border-dashed-top">
<view>顶部边框</view> <view>顶部边框</view>
</view> </view>
<view class="border-content tn-border-dashed-right"> <view class="border-content tn-border-dashed-right">
<view>右边边框</view> <view>右边边框</view>
</view> </view>
<view class="border-content tn-border-dashed-bottom"> <view class="border-content tn-border-dashed-bottom">
<view>下面边框</view> <view>下面边框</view>
</view> </view>
<view class="border-content tn-border-dashed-left"> <view class="border-content tn-border-dashed-left">
<view>左边边框</view> <view>左边边框</view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="隐藏某一边框"> <demo-title title="隐藏某一边框">
<view class="border-content tn-border-solid tn-none-border-top"> <view class="border-content tn-border-solid tn-none-border-top">
<view>隐藏上边框</view> <view>隐藏上边框</view>
</view> </view>
<view class="border-content tn-border-solid tn-none-border-right"> <view class="border-content tn-border-solid tn-none-border-right">
<view>隐藏右边框</view> <view>隐藏右边框</view>
</view> </view>
<view class="border-content tn-border-solid tn-none-border-bottom"> <view class="border-content tn-border-solid tn-none-border-bottom">
<view>隐藏下边框</view> <view>隐藏下边框</view>
</view> </view>
<view class="border-content tn-border-solid tn-none-border-left"> <view class="border-content tn-border-solid tn-none-border-left">
<view>隐藏左边框</view> <view>隐藏左边框</view>
</view> </view>
<view class="border-content tn-border-dashed tn-none-border-top"> <view class="border-content tn-border-dashed tn-none-border-top">
<view>隐藏上边框</view> <view>隐藏上边框</view>
</view> </view>
<view class="border-content tn-border-dashed tn-none-border-right"> <view class="border-content tn-border-dashed tn-none-border-right">
<view>隐藏右边框</view> <view>隐藏右边框</view>
</view> </view>
<view class="border-content tn-border-dashed tn-none-border-bottom"> <view class="border-content tn-border-dashed tn-none-border-bottom">
<view>隐藏下边框</view> <view>隐藏下边框</view>
</view> </view>
<view class="border-content tn-border-dashed tn-none-border-left"> <view class="border-content tn-border-dashed tn-none-border-left">
<view>隐藏左边框</view> <view>隐藏左边框</view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="颜色"> <demo-title title="颜色">
<view class="border-content tn-border-solid tn-border-indigo"> <view class="border-content tn-border-solid tn-border-indigo">
</view> </view>
<view class="border-content tn-border-solids tn-border-green"> <view class="border-content tn-border-solids tn-border-green">
</view> </view>
<view class="border-content tn-border-dashed tn-border-purplered"> <view class="border-content tn-border-dashed tn-border-purplered">
</view> </view>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'basicBorder', name: 'basicBorder',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.basic-border { .basic-border {
min-height: 100vh; min-height: 100vh;
} }
.border-content { .border-content {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 80rpx; height: 80rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
margin: 30rpx 0rpx; margin: 30rpx 0rpx;
} }
</style> </style>
basicPage/button/button.vue
+101 -101
View File
@@ -1,109 +1,109 @@
<template> <template>
<view class="basic-button tn-safe-area-inset-bottom"> <view class="basic-button tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>按钮</tn-nav-bar> <tn-nav-bar fixed>按钮</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础"> <demo-title title="基础">
<tn-button>按钮</tn-button> <tn-button>按钮</tn-button>
</demo-title> </demo-title>
<demo-title title="大小"> <demo-title title="大小">
<view> <view>
<tn-button size="sm" margin="10rpx 10rpx">按钮</tn-button> <tn-button size="sm" margin="10rpx 10rpx">按钮</tn-button>
<tn-button margin="10rpx 10rpx">按钮</tn-button> <tn-button margin="10rpx 10rpx">按钮</tn-button>
<tn-button size="lg" 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> <tn-button width="150rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">按钮</tn-button>
</view> </view>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-button padding="20rpx 40rpx" margin="10rpx 10rpx">按钮</tn-button> <tn-button padding="20rpx 40rpx" margin="10rpx 10rpx">按钮</tn-button>
<tn-button margin="10rpx 10rpx">按钮</tn-button> <tn-button margin="10rpx 10rpx">按钮</tn-button>
<tn-button margin="10rpx 10rpx" :fontBold="true">按钮</tn-button> <tn-button margin="10rpx 10rpx" :fontBold="true">按钮</tn-button>
</view> </view>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-button width="100%">按钮</tn-button> <tn-button width="100%">按钮</tn-button>
</view> </view>
</demo-title> </demo-title>
<demo-title title="形状"> <demo-title title="形状">
<tn-button margin="10rpx 10rpx">按钮</tn-button> <tn-button margin="10rpx 10rpx">按钮</tn-button>
<tn-button shape="round" 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 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> <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>
<demo-title title="颜色"> <demo-title title="颜色">
<view> <view>
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 10rpx">按钮</tn-button> <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="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-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> <tn-button backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
</view> </view>
<view class="tn-margin-top"> <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" 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--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--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> <tn-button backgroundColor="tn-main-gradient-indigo--single" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
</view> </view>
</demo-title> </demo-title>
<demo-title title="边框"> <demo-title title="边框">
<view> <view>
<tn-button :plain="true" margin="10rpx 10rpx">按钮</tn-button> <tn-button :plain="true" margin="10rpx 10rpx">按钮</tn-button>
<tn-button :plain="true" backgroundColor="#01BEFF" 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" :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="rgba(1, 190, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
<tn-button :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10rpx">按钮</tn-button> <tn-button :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10rpx">按钮</tn-button>
</view> </view>
</demo-title> </demo-title>
<demo-title 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" 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="#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-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-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" 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> <tn-button :shadow="true" :plain="true" height="100rpx" width="100%" :border="false" margin="10rpx 0">镂空无边框</tn-button>
</demo-title> </demo-title>
<demo-title title="加载中"> <demo-title title="加载中">
<tn-button :loading="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button> <tn-button :loading="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
</demo-title> </demo-title>
<demo-title title="禁止点击"> <demo-title title="禁止点击">
<tn-button :disabled="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button> <tn-button :disabled="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'basicButton', name: 'basicButton',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.basic-button { .basic-button {
background-color: $tn-bg-gray-color; background-color: $tn-bg-gray-color;
min-height: 100vh; min-height: 100vh;
} }
</style> </style>
basicPage/color/color.vue
+759 -759
View File
File diff suppressed because it is too large Load Diff
basicPage/flex-layout/flex-layout.vue
+456 -456
View File
@@ -1,456 +1,456 @@
<template> <template>
<view class="basic-flex tn-safe-area-inset-bottom"> <view class="basic-flex tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Flex布局</tn-nav-bar> <tn-nav-bar fixed>Flex布局</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="固定尺寸 & 元素"> <demo-title title="固定尺寸 & 元素">
<view class="tn-flex tn-flex-wrap"> <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-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-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-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"></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-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-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-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 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> </view>
</demo-title> </demo-title>
<demo-title title="应用示例1"> <demo-title title="应用示例1">
<view class="tn-flex tn-flex-wrap"> <view class="tn-flex tn-flex-wrap">
<view class="tn-flex-basic-md"> <view class="tn-flex-basic-md">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </view>
</view> </view>
<view class="tn-flex-basic-md"> <view class="tn-flex-basic-md">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </view>
</view> </view>
<view class="tn-flex-basic-xs"> <view class="tn-flex-basic-xs">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </view>
</view> </view>
<view class="tn-flex-basic-xs"> <view class="tn-flex-basic-xs">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </view>
</view> </view>
<view class="tn-flex-basic-xs"> <view class="tn-flex-basic-xs">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </view>
</view> </view>
<view class="tn-flex-basic-xs"> <view class="tn-flex-basic-xs">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </view>
</view> </view>
<view class="tn-flex-basic-xs"> <view class="tn-flex-basic-xs">
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </view>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="比例布局 & 元素"> <demo-title title="比例布局 & 元素">
<view class="tn-flex"> <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 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>
<view class="tn-flex"> <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 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-2 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">2</view>
</view> </view>
<view class="tn-flex"> <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 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-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 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> </view>
</demo-title> </demo-title>
<demo-title title="应用示例1"> <demo-title title="应用示例1">
<view class="tn-flex"> <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-2"> <view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="应用示例2"> <demo-title title="应用示例2">
<view class="tn-flex"> <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-2"> <view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="应用示例3"> <demo-title title="应用示例3">
<view class="tn-flex"> <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-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-2"> <view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="应用示例4"> <demo-title title="应用示例4">
<view class="tn-flex"> <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-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-flex-3">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="应用示例5"> <demo-title title="应用示例5">
<view class="tn-flex"> <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-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-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="应用示例6"> <demo-title title="应用示例6">
<view class="tn-flex"> <view class="tn-flex">
<view class="tn-flex-2"> <view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </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-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> </view>
</demo-title> </demo-title>
<demo-title title="应用示例7"> <demo-title title="应用示例7">
<view class="tn-flex"> <view class="tn-flex">
<view class="tn-flex-1"> <view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
<view class="tn-flex-1"> <view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="应用示例8"> <demo-title title="应用示例8">
<view class="tn-flex"> <view class="tn-flex">
<view class="tn-flex-3"> <view class="tn-flex-3">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
<view class="tn-flex-2"> <view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="应用示例9"> <demo-title title="应用示例9">
<view class="tn-flex"> <view class="tn-flex">
<view class="tn-flex-1"> <view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
<view class="tn-flex-1"> <view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </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> </view>
</demo-title> </demo-title>
<demo-title title="应用示例10"> <demo-title title="应用示例10">
<view class="tn-flex"> <view class="tn-flex">
<view class="tn-flex-1"> <view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
<view class="tn-flex-2"> <view class="tn-flex-2">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </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-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="应用示例11"> <demo-title title="应用示例11">
<view class="tn-flex"> <view class="tn-flex">
<view class="tn-flex-1"> <view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
<view class="tn-flex-1"> <view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
<view class="tn-flex-1"> <view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="应用示例12"> <demo-title title="应用示例12">
<view class="tn-flex"> <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-3"> <view class="tn-flex-3">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
<view class="tn-flex-1"> <view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="应用示例13"> <demo-title title="应用示例13">
<view class="tn-flex"> <view class="tn-flex">
<view class="tn-flex-1"> <view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </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-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
<view class="tn-flex-1"> <view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="应用示例14"> <demo-title title="应用示例14">
<view class="tn-flex"> <view class="tn-flex">
<view class="tn-flex-1"> <view class="tn-flex-1">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </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 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> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="水平对齐 & justify"> <demo-title title="水平对齐 & justify">
<view class="tn-flex tn-flex-row-left"> <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 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>
<view class="tn-flex tn-flex-row-right tn-margin-top-sm"> <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 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>
<view class="tn-flex tn-flex-row-center tn-margin-top-sm"> <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 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>
<view class="tn-flex tn-flex-row-around tn-margin-top-sm"> <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 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>
<view class="tn-flex tn-flex-row-between tn-margin-top-sm"> <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 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> </view>
</demo-title> </demo-title>
<demo-title title="应用示例1"> <demo-title title="应用示例1">
<view class="tn-flex tn-flex-row-center tn-margin-top-sm"> <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 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> </view>
</demo-title> </demo-title>
<demo-title title="应用示例2"> <demo-title title="应用示例2">
<view class="tn-flex tn-flex-row-center tn-margin-top-sm"> <view class="tn-flex tn-flex-row-center tn-margin-top-sm">
<view class="justify-content-item"> <view class="justify-content-item">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </view>
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view> </view>
</view> </view>
<view class="justify-content-item"> <view class="justify-content-item">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </view>
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view> </view>
</view> </view>
<view class="justify-content-item"> <view class="justify-content-item">
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
</view> </view>
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;"> <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view> </view>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="应用示例3"> <demo-title title="应用示例3">
<view class="tn-flex tn-flex-row-around tn-margin-top-sm"> <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 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> </view>
</demo-title> </demo-title>
<demo-title title="应用示例4"> <demo-title title="应用示例4">
<view class="tn-flex tn-flex-row-around tn-margin-top-sm"> <view class="tn-flex tn-flex-row-around tn-margin-top-sm">
<view class="justify-content-item"> <view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view> </view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;"> <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view> </view>
</view> </view>
<view class="justify-content-item"> <view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view> </view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;"> <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view> </view>
</view> </view>
<view class="justify-content-item"> <view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view> </view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;"> <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view> </view>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="应用示例5"> <demo-title title="应用示例5">
<view class="tn-flex tn-flex-row-between tn-margin-top-sm"> <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 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> </view>
</demo-title> </demo-title>
<demo-title title="应用示例6"> <demo-title title="应用示例6">
<view class="tn-flex tn-flex-row-between tn-margin-top-sm"> <view class="tn-flex tn-flex-row-between tn-margin-top-sm">
<view class="justify-content-item"> <view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view> </view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;"> <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view> </view>
</view> </view>
<view class="justify-content-item"> <view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view> </view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;"> <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view> </view>
</view> </view>
<view class="justify-content-item"> <view class="justify-content-item">
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur"> <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
</view> </view>
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;"> <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
</view> </view>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="垂直对齐 & align"> <demo-title title="垂直对齐 & align">
<view class="tn-flex tn-flex-col-top"> <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-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 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>
<view class="tn-flex tn-flex-col-center tn-margin-top-sm"> <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-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 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>
<view class="tn-flex tn-flex-col-bottom tn-margin-top-sm"> <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-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 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> </view>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'BasicFlexLayout', name: 'BasicFlexLayout',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
} }
}, },
onLoad() { onLoad() {
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* 内容容器 start */ /* 内容容器 start */
.bg-flex-shadow{ .bg-flex-shadow{
background-color: #00C3FF; background-color: #00C3FF;
z-index: 9999; z-index: 9999;
} }
/* 内容容器 end */ /* 内容容器 end */
</style> </style>
basicPage/grid-layout/grid-layout.vue
+169 -169
View File
@@ -1,169 +1,169 @@
<template> <template>
<view class="basic-grid"> <view class="basic-grid">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Grid布局</tn-nav-bar> <tn-nav-bar fixed>Grid布局</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click"> <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
<tn-grid v-if="showGrid" :align="align" :hoverClass="hoverClass" :col="col"> <tn-grid v-if="showGrid" :align="align" :hoverClass="hoverClass" :col="col">
<block v-for="(item, index) in icons" :key="index"> <block v-for="(item, index) in icons" :key="index">
<!-- #ifndef MP-WEIXIN --> <!-- #ifndef MP-WEIXIN -->
<tn-grid-item> <tn-grid-item>
<view class="" style="margin: 60rpx 20rpx;font-size: 70rpx;color: #01BEFF;"> <view class="" style="margin: 60rpx 20rpx;font-size: 70rpx;color: #01BEFF;">
<text class="" :class="['tn-icon-' + item]"></text> <text class="" :class="['tn-icon-' + item]"></text>
</view> </view>
</tn-grid-item> </tn-grid-item>
<!-- #endif--> <!-- #endif-->
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<tn-grid-item :style="{width: gridItemWidth}"> <tn-grid-item :style="{width: gridItemWidth}">
<view class="icon__item--icon tn-cool-color-icon" :class="[$t.colorUtils.getRandomCoolBgClass(index)]"> <view class="icon__item--icon tn-cool-color-icon" :class="[$t.color.getRandomCoolBgClass(index)]">
<view class="tn-margin-top-sm" :class="['tn-icon-' + item]"></view> <view class="tn-margin-top-sm" :class="['tn-icon-' + item]"></view>
</view> </view>
</tn-grid-item> </tn-grid-item>
<!-- #endif--> <!-- #endif-->
</block> </block>
</tn-grid> </tn-grid>
</dynamic-demo-template> </dynamic-demo-template>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue' import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default { export default {
name: 'BasicGridLayout', name: 'BasicGridLayout',
components: {dynamicDemoTemplate}, components: {dynamicDemoTemplate},
data() { data() {
return { return {
showGrid: true, showGrid: true,
align: 'left', align: 'left',
hoverClass: 'tn-hover', hoverClass: 'tn-hover',
col: 3, col: 3,
icons: [ icons: [
'zodiac-shu', 'zodiac-shu',
'zodiac-niu', 'zodiac-niu',
'zodiac-hu', 'zodiac-hu',
'zodiac-tu', 'zodiac-tu',
'zodiac-long', 'zodiac-long',
'zodiac-she', 'zodiac-she',
'zodiac-ma', 'zodiac-ma',
'zodiac-yang', 'zodiac-yang',
'zodiac-hou', 'zodiac-hou',
'zodiac-ji', 'zodiac-ji',
'zodiac-gou', 'zodiac-gou',
'zodiac-zhu', 'zodiac-zhu',
'logo-tuniao', 'logo-tuniao',
], ],
tips: ['无需依赖额外的样式文件','使用tn-grid、tn-grid-item组件'], tips: ['无需依赖额外的样式文件','使用tn-grid、tn-grid-item组件'],
sectionList: [ sectionList: [
{ {
name: '参数切换', name: '参数切换',
section: [ section: [
{ {
title: '对齐方式', title: '对齐方式',
optional: ['左对齐','居中','右对齐'], optional: ['左对齐','居中','右对齐'],
methods: 'alignChange' methods: 'alignChange'
}, },
{ {
title: '点击效果', title: '点击效果',
optional: ['开启','关闭'], optional: ['开启','关闭'],
methods: 'hoverChange' methods: 'hoverChange'
}, },
{ {
title: '列数', title: '列数',
optional: ['3','4'], optional: ['3','4'],
methods: 'colChange' methods: 'colChange'
} }
] ]
} }
] ]
} }
}, },
computed: { computed: {
// 兼容小程序 // 兼容小程序
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
gridItemWidth() { gridItemWidth() {
return 100 / this.col + '%' return 100 / this.col + '%'
}, },
// #endif // #endif
}, },
methods: { methods: {
click(event) { click(event) {
this[event.methods] && this[event.methods](event) this[event.methods] && this[event.methods](event)
}, },
// 对齐方式控制 // 对齐方式控制
alignChange(event) { alignChange(event) {
switch(event.index) { switch(event.index) {
case 0: case 0:
this.align = 'left' this.align = 'left'
break break
case 1: case 1:
this.align = 'center' this.align = 'center'
break break
case 2: case 2:
this.align = 'right' this.align = 'right'
break break
} }
}, },
// 点击效果控制 // 点击效果控制
hoverChange(event) { hoverChange(event) {
this.hoverClass = event.index === 0 ? 'tn-hover' : 'none' this.hoverClass = event.index === 0 ? 'tn-hover' : 'none'
}, },
// 列数修改 // 列数修改
colChange(event) { colChange(event) {
this.col = event.index === 0 ? 3 : 4 this.col = event.index === 0 ? 3 : 4
this.$refs.demoTemplate.updateSectionScrollView() this.$refs.demoTemplate.updateSectionScrollView()
}, },
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.icon { .icon {
&__item { &__item {
width: 30%; width: 30%;
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 10rpx; border-radius: 10rpx;
padding: 30rpx; padding: 30rpx;
margin: 20rpx 10rpx; margin: 20rpx 10rpx;
margin-top: 0; margin-top: 0;
transform: scale(1); transform: scale(1);
transition: transform 0.3s linear; transition: transform 0.3s linear;
transform-origin: center center; transform-origin: center center;
&--icon { &--icon {
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
font-size: 60rpx; font-size: 60rpx;
border-radius: 50%; border-radius: 50%;
margin: 30rpx; margin: 30rpx;
position: relative; position: relative;
z-index: 1; z-index: 1;
&::after { &::after {
content: " "; content: " ";
position: absolute; position: absolute;
z-index: -1; z-index: -1;
width: 100%; width: 100%;
height: 100%; height: 100%;
left: 0; left: 0;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
opacity: 1; opacity: 1;
transform: scale(1, 1); transform: scale(1, 1);
background-size: 100% 100%; background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png); background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
} }
} }
} }
} }
</style> </style>
basicPage/icon/icon.vue
+168 -168
View File
@@ -1,168 +1,168 @@
<template> <template>
<view class="basic-icon"> <view class="basic-icon">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>图标</tn-nav-bar> <tn-nav-bar fixed>图标</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<tn-sticky :customNavHeight="vuex_custom_bar_height"> <tn-sticky :customNavHeight="vuex_custom_bar_height">
<view class="search-content"> <view class="search-content">
<input class="search-content__input" placeholder-class="search-content__input-placeholder" placeholder="请输入图标名称吖" @input="saerchInput" /> <input class="search-content__input" placeholder-class="search-content__input-placeholder" placeholder="请输入图标名称吖" @input="saerchInput" />
</view> </view>
</tn-sticky> </tn-sticky>
<view class="icon__container tn-flex tn-flex-wrap tn-flex-row-left tn-flex-col-center tn-margin"> <view class="icon__container tn-flex tn-flex-wrap tn-flex-row-left tn-flex-col-center tn-margin">
<block v-for="(item, index) in resultIconList" :key="index"> <block v-for="(item, index) in resultIconList" :key="index">
<view <view
class="icon__item tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center icon-shadow" class="icon__item tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center icon-shadow"
:class="[{'icon__item--active': index === currentIconIndex}]" :class="[{'icon__item--active': index === currentIconIndex}]"
@click="clickIcon(index, item.name)" @click="clickIcon(index, item.name)"
> >
<view class="icon__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur"> <view class="icon__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
<view :class="[`tn-icon-${item.name}`]"></view> <view :class="[`tn-icon-${item.name}`]"></view>
</view> </view>
<view class="icon__item--title tn-text-ellipsis">{{ item.name }}</view> <view class="icon__item--title tn-text-ellipsis">{{ item.name }}</view>
</view> </view>
</block> </block>
</view> </view>
<view class="tn-text-center tn-margin-bottom-xl"> <view class="tn-text-center tn-margin-bottom-xl">
<view>目前300+，里面缺少你想要的吗？</view> <view>目前300+，里面缺少你想要的吗？</view>
<view>请前往图鸟语雀留言写下你的需求叭</view> <view>请前往图鸟语雀留言写下你的需求叭</view>
</view> </view>
<view class="tn-padding-bottom"></view> <view class="tn-padding-bottom"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import iconData from './iconfont.js' import iconData from './iconfont.js'
export default { export default {
name: 'basicIcon', name: 'basicIcon',
data() { data() {
return { return {
// 图标列表 // 图标列表
iconList: iconData.data, iconList: iconData.data,
// 用户输入的内容 // 用户输入的内容
searchValue: '', searchValue: '',
// 当前点击的图标序号 // 当前点击的图标序号
currentIconIndex: -1 currentIconIndex: -1
} }
}, },
computed: { computed: {
resultIconList() { resultIconList() {
if (this.searchValue === '') return this.iconList if (this.searchValue === '') return this.iconList
return this.iconList.filter((item) => { return this.iconList.filter((item) => {
return item.name.includes(this.searchValue) return item.name.includes(this.searchValue)
}) })
} }
}, },
methods: { methods: {
// input输入的内容 // input输入的内容
saerchInput(e) { saerchInput(e) {
this.searchValue = e.target.value this.searchValue = e.target.value
}, },
// 点击图标 // 点击图标
clickIcon(index, name) { clickIcon(index, name) {
this.currentIconIndex = index this.currentIconIndex = index
this.$t.messageUtils.toast(name, false, null, 'none', 5000) this.$t.message.toast(name, false, null, 'none', 5000)
}, },
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* 搜索框 start */ /* 搜索框 start */
.search-content { .search-content {
padding-top: 16rpx; padding-top: 16rpx;
margin: 40rpx 40rpx; margin: 40rpx 40rpx;
&__input { &__input {
caret-color: $tn-main-color; caret-color: $tn-main-color;
width: 100%; width: 100%;
height: 70rpx; height: 70rpx;
line-height: 60rpx; line-height: 60rpx;
border-radius: 100rpx; border-radius: 100rpx;
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
background-color: #FFFFFF; background-color: #FFFFFF;
color: #080808; color: #080808;
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05); box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
} }
&__input-placeholder { &__input-placeholder {
font-size: 24rpx; font-size: 24rpx;
} }
} }
/* 搜索框 end */ /* 搜索框 end */
/* 图标容器 start */ /* 图标容器 start */
.icon-shadow{ .icon-shadow{
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.06); box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.06);
} }
.icon { .icon {
&__container { &__container {
margin-bottom: 30rpx; margin-bottom: 30rpx;
} }
&__item { &__item {
width: 30.4%; width: 30.4%;
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 10rpx; border-radius: 10rpx;
padding: 30rpx; padding: 30rpx;
margin: 20rpx 10rpx; margin: 20rpx 10rpx;
margin-top: 0; margin-top: 0;
transform: scale(1); transform: scale(1);
transition: transform 0.2s linear; transition: transform 0.2s linear;
transform-origin: center center; transform-origin: center center;
&--active { &--active {
transform: scale(0.95); transform: scale(0.95);
box-shadow: box-shadow:
inset 10rpx 10rpx 18rpx rgba(0, 0, 120, 0.04), inset 10rpx 10rpx 18rpx rgba(0, 0, 120, 0.04),
inset -8rpx -8rpx 20rpx rgba(0, 0, 120, 0.03); inset -8rpx -8rpx 20rpx rgba(0, 0, 120, 0.03);
} }
&--icon { &--icon {
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
font-size: 60rpx; font-size: 60rpx;
border-radius: 50%; border-radius: 50%;
margin-bottom: 18rpx; margin-bottom: 18rpx;
position: relative; position: relative;
z-index: 1; z-index: 1;
&::after { &::after {
content: " "; content: " ";
position: absolute; position: absolute;
z-index: -1; z-index: -1;
width: 100%; width: 100%;
height: 100%; height: 100%;
left: 0; left: 0;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
opacity: 1; opacity: 1;
transform: scale(1, 1); transform: scale(1, 1);
background-size: 100% 100%; background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png); background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
} }
} }
&--title { &--title {
width: 100%; width: 100%;
color: #78909C; color: #78909C;
font-size: 28rpx; font-size: 28rpx;
text-align: center; text-align: center;
} }
} }
} }
/* 图标容器 end */ /* 图标容器 end */
</style> </style>
basicPage/icon/iconfont.js
+2 -2
View File
File diff suppressed because one or more lines are too long
basicPage/shadow/shadow.vue
+78 -78
View File
@@ -1,79 +1,79 @@
<template> <template>
<view class="basic-shadow tn-safe-area-inset-bottom"> <view class="basic-shadow tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>阴影</tn-nav-bar> <tn-nav-bar fixed>阴影</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="普通阴影"> <demo-title title="普通阴影">
<view class="shadow-content tn-shadow"></view> <view class="shadow-content tn-shadow"></view>
<view class="shadow-content tn-shadow-warp"></view> <view class="shadow-content tn-shadow-warp"></view>
</demo-title> </demo-title>
<demo-title title="有色阴影"> <demo-title title="有色阴影">
<view class="shadow-content tn-bg-teal tn-shadow-teal"></view> <view class="shadow-content tn-bg-teal tn-shadow-teal"></view>
<view class="shadow-content tn-bg-indigo tn-shadow-indigo"></view> <view class="shadow-content tn-bg-indigo tn-shadow-indigo"></view>
</demo-title> </demo-title>
<demo-title title="背景图片阴影"> <demo-title title="背景图片阴影">
<view class="shadow-content shadow-content__image tn-shadow-blur"></view> <view class="shadow-content shadow-content__image tn-shadow-blur"></view>
</demo-title> </demo-title>
<demo-title title="文字阴影"> <demo-title title="文字阴影">
<view class="shadow-content__text tn-color-indigo tn-text-shadow-indigo"> <view class="shadow-content__text tn-color-indigo tn-text-shadow-indigo">
图鸟UI，专注UI开发 图鸟UI，专注UI开发
</view> </view>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'basicShadow', name: 'basicShadow',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.basic-shadow { .basic-shadow {
background-color: $tn-bg-gray-color; background-color: $tn-bg-gray-color;
min-height: 100vh; min-height: 100vh;
} }
.shadow-content { .shadow-content {
height: 80rpx; height: 80rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
margin: 30rpx 0; margin: 30rpx 0;
&__image { &__image {
z-index: 1; z-index: 1;
background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7207d16b-b9c3-4105-8d0d-e9e0c7785f66/605563a1-a210-42f3-99e4-8de3c655c59e.jpg); background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7207d16b-b9c3-4105-8d0d-e9e0c7785f66/605563a1-a210-42f3-99e4-8de3c655c59e.jpg);
background-size: cover; background-size: cover;
background-position: top; background-position: top;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
&__text { &__text {
font-size: 60rpx; font-size: 60rpx;
text-align: center; text-align: center;
} }
} }
</style> </style>
basicPage/tag/tag.vue
+140 -131
View File
@@ -1,132 +1,141 @@
<template> <template>
<view class="basic-tag tn-safe-area-inset-bottom"> <view class="basic-tag tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>标签</tn-nav-bar> <tn-nav-bar fixed>标签</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础"> <demo-title title="基础">
<tn-tag>标签</tn-tag> <tn-tag>标签</tn-tag>
</demo-title> </demo-title>
<demo-title title="大小"> <demo-title title="大小">
<view> <view>
<tn-tag size="sm" margin="10rpx 10rpx">标签</tn-tag> <tn-tag size="sm" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag margin="10rpx 10rpx">标签</tn-tag> <tn-tag margin="10rpx 10rpx">标签</tn-tag>
<tn-tag size="lg" margin="10rpx 10rpx">标签</tn-tag> <tn-tag size="lg" margin="10rpx 10rpx">标签</tn-tag>
</view> </view>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-tag width="200rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">标签</tn-tag> <tn-tag width="200rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag padding="40rpx 80rpx" margin="10rpx 10rpx">标签</tn-tag> <tn-tag padding="40rpx 80rpx" margin="10rpx 10rpx">标签</tn-tag>
</view> </view>
</demo-title> </demo-title>
<demo-title title="形状"> <demo-title title="形状">
<view> <view>
<tn-tag margin="10rpx 10rpx">标签</tn-tag> <tn-tag margin="10rpx 10rpx">标签</tn-tag>
<tn-tag shape="radius" 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="circle" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag shape="circleLeft" margin="10rpx 10rpx">标签</tn-tag> <tn-tag shape="circleLeft" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag shape="circleRight" margin="10rpx 10rpx">标签</tn-tag> <tn-tag shape="circleRight" margin="10rpx 10rpx">标签</tn-tag>
</view> </view>
</demo-title> </demo-title>
<demo-title title="颜色"> <demo-title title="颜色">
<view> <view>
<tn-tag backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 10rpx">标签</tn-tag> <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="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-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> <tn-tag backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
</view> </view>
<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" 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--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--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> <tn-tag backgroundColor="tn-main-gradient-indigo--single" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
</view> </view>
</demo-title> </demo-title>
<demo-title title="镂空"> <demo-title title="镂空">
<view> <view>
<tn-tag :plain="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">标签</tn-tag> <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="rgba(1, 190, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10rpx">标签</tn-tag> <tn-tag :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10rpx">标签</tn-tag>
</view> </view>
</demo-title> </demo-title>
<demo-title title="标签使用"> <demo-title title="标签使用">
<view class="tn-flex tn-flex-col-center tn-flex-row-left"> <view class="tn-flex tn-flex-col-center tn-flex-row-left">
<view class="origin-demo"> <view class="origin-demo">
<tn-tag class="origin-demo__tag" backgroundColor="#01BEFF" fontColor="#FFFFFF" width="auto" height="30rpx" shape="circle">99+</tn-tag> <view class="origin-demo__tag">
</view> <tn-tag backgroundColor="#01BEFF" fontColor="#FFFFFF" width="auto" height="30rpx" shape="circle">99+</tn-tag>
</view>
<!-- #ifdef H5 --> </view>
<view class="capsule">
<tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false"> <!-- #ifdef H5 -->
<text class="tn-icon-add"></text> <view class="capsule">
</tn-tag> <tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false">
<tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true"> <text class="tn-icon-add"></text>
2 </tn-tag>
</tn-tag> <tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
</view> 2
<!-- #endif --> </tn-tag>
<!-- #ifdef MP-WEIXIN --> </view>
<view class="capsule"> <!-- #endif -->
<tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false"> <!-- #ifdef MP-WEIXIN -->
<text class="tn-icon-add"></text> <view class="capsule">
</tn-tag> <tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false">
<tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true"> <text class="tn-icon-add"></text>
2 </tn-tag>
</tn-tag> <tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
</view> 2
<!-- #endif --> </tn-tag>
</view> </view>
</demo-title> <!-- #endif -->
<view class="tn-padding-bottom-lg"></view> <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>
<view class="tn-icon-close tn-margin-left-xs"></view>
</view> </view>
</tn-tag>
</template> </view>
</demo-title>
<script>
import demoTitle from '@/libs/components/demo-title.vue' <view class="tn-padding-bottom-lg"></view>
export default {
name: 'basicTag', </view>
components: {demoTitle},
data() { </view>
return {
} </template>
},
methods: { <script>
} import demoTitle from '@/libs/components/demo-title.vue'
export default {
} name: 'basicTag',
</script> components: {demoTitle},
data() {
<style lang="scss" scoped> return {
.basic-tag { }
background-color: $tn-bg-gray-color; },
min-height: 100vh; methods: {
} }
.origin-demo {
width: 180rpx; }
height: 180rpx; </script>
background-color: #FFFFFF;
margin: 20rpx; <style lang="scss" scoped>
margin-right: 70rpx; .basic-tag {
position: relative; background-color: $tn-bg-gray-color;
min-height: 100vh;
&__tag { }
position: absolute; .origin-demo {
top: 0; width: 180rpx;
right: 0; height: 180rpx;
transform: translate(50%, -50%); background-color: #FFFFFF;
} margin: 20rpx;
} margin-right: 70rpx;
position: relative;
&__tag {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
}
</style> </style>
basicPage/test/test.vue
+261
View File
@@ -0,0 +1,261 @@
<template>
<view class="basic-test">
<swiper class="swiper" :circular="true" :current="currentSwiperIndex" previous-margin="260rpx" next-margin="260rpx" @change="swiperChange">
<swiper-item v-for="(item, index) in swiperList" :key="index" class="swiper__item" :class="[swiperItemClass(index)]">
<view class="swiper__item__content" :class="[swiperContentClass(index)]">
<image :src="item" mode="scaleToFill"></image>
</view>
</swiper-item>
</swiper>
<swiper class="phone-swiper" :circular="true"
:current="phoneCurrentSwiperIndex" previous-margin="190rpx" next-margin="190rpx" @change="phoneSwiperChange">
<swiper-item v-for="(item,index) in phoneSwiperList" :key="index" class="phone-swiper__item">
<view class="tnphone-black-min phone-swiper__item__content wow fadeInLeft2" :class="[phoneSwiperContentClass(index)]">
<view class="skin wow fadeInRight2">
<view class="screen wow fadeInUp2">
<view class="peak wow">
<view class="sound"></view>
<view class="lens"></view>
</view>
<view class="demo-image">
<image :src="item.url" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
name: 'TestPage',
data() {
return {
swiperList: [
'https://tnuiimage.tnkjapp.com/swiper/spring.jpg',
'https://tnuiimage.tnkjapp.com/swiper/summer.jpg',
'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg',
'https://tnuiimage.tnkjapp.com/swiper/winter.jpg',
'https://tnuiimage.tnkjapp.com/swiper/winter.jpg'
],
phoneSwiperList: [{
id: 0,
type: 'image',
name: '总有你想不到的创意',
text: '海量分享',
url: 'https://tnuiimage.tnkjapp.com/swiper/test.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d1.png'
}, {
id: 1,
type: 'image',
name: '寻找一起成长的小伙伴',
text: '愉快玩耍',
url: 'https://tnuiimage.tnkjapp.com/swiper/banner-animate.png',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d4.png'
}, {
id: 2,
type: 'image',
name: '更多彩蛋等你探索',
text: '酷炫多彩',
url: 'https://tnuiimage.tnkjapp.com/swiper/test.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d5.png'
}, {
id: 3,
type: 'image',
name: '更多彩蛋等你探索',
text: '酷炫多彩',
url: 'https://tnuiimage.tnkjapp.com/swiper/banner-animate.png',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d5.png'
}],
currentSwiperIndex: 0,
phoneCurrentSwiperIndex: 0
}
},
computed: {
// 计算当前对应轮播前后的item对应的类
swiperItemClass() {
return (index) => {
if ((this.currentSwiperIndex === 0 && index === this.swiperList.length - 1) || (this.currentSwiperIndex - 1 === index)) {
return 'swiper__item--prev'
}
if ((this.currentSwiperIndex === this.swiperList.length - 1 && index === 0) || (this.currentSwiperIndex + 1 === index)) {
return 'swiper__item--next'
}
if (this.currentSwiperIndex === index) {
return 'swiper__item--current'
}
}
},
// 计算轮播内容对应的类
swiperContentClass() {
return (index) => {
if (this.currentSwiperIndex === index) {
return 'swiper__item__content--current'
}
if ((this.currentSwiperIndex === 0 && index === this.swiperList.length - 1) || (this.currentSwiperIndex - 1 === index)) {
return 'swiper__item__content--prev'
}
if ((this.currentSwiperIndex === this.swiperList.length - 1 && index === 0) || (this.currentSwiperIndex + 1 === index)) {
return 'swiper__item__content--next'
}
}
},
// 计算轮播内容对应的类
phoneSwiperContentClass() {
return (index) => {
if (this.phoneCurrentSwiperIndex === index) {
return 'phone-swiper__item__content--current'
}
if ((this.phoneCurrentSwiperIndex === 0 && index === this.phoneSwiperList.length - 1) || (this.phoneCurrentSwiperIndex - 1 === index)) {
return 'phone-swiper__item__content--prev'
}
if ((this.phoneCurrentSwiperIndex === this.phoneSwiperList.length - 1 && index === 0) || (this.phoneCurrentSwiperIndex + 1 === index)) {
return 'phone-swiper__item__content--next'
}
}
}
},
onReady() {
},
methods: {
// 轮播图切换
swiperChange(e) {
// console.log(e.detail.current);
this.currentSwiperIndex = e.detail.current
},
phoneSwiperChange(e) {
this.phoneCurrentSwiperIndex = e.detail.current
}
}
}
</script>
<style lang="scss" scoped>
.basic-test {
min-height: 100vh;
}
.swiper {
width: 100%;
height: 400rpx;
/deep/ .uni-swiper-slides {
inset: 0 260rpx;
}
&__item {
&--prev {
left: -10rpx;
}
&--next {
left: 10rpx;
}
&--current {
left: 0px;
}
&__content {
width: 100%;
height: 100%;
margin: 0 auto;
border-radius: 30rpx;
overflow: hidden;
transition: transform 0.25s ease;
transform: scale(0.8);
&--prev {
transform: scale(0.8) perspective(200rpx) rotateY(10deg);
}
&--next {
transform: scale(0.8) perspective(200rpx) rotateY(-10deg);
}
&--current {
transform: scale(1);
}
image {
width: 100%;
height: 100%;
}
}
}
}
.phone-swiper {
margin-top: 180rpx;
height: 900rpx;
/deep/ .uni-swiper-slides {
inset: 0 190rpx;
}
&__item {
&__content {
transition: transform 0.25s ease;
transform: scale(0.8);
&--prev {
transform: scale(0.8) perspective(200rpx) rotateY(10deg);
}
&--next {
transform: scale(0.8) perspective(200rpx) rotateY(-10deg);
}
&--current {
transform: scale(1);
}
}
.demo-image {
display: flex;
align-items: center;
justify-content: center;
image {
width: 100%;
height: 730rpx;
}
}
}
}
/* tnphone-black-min 细边框 start */
.tnphone-black-min {width: 380rpx; height: 760rpx; border-radius: 40rpx; background: #C6D1D8; padding: 7rpx; display: table; color: #333;
box-sizing: border-box; box-shadow: 0rpx 0rpx 0rpx 5rpx rgba(80,80,80,.8) inset; cursor: default; position: relative}
.tnphone-black-min .skin {width: 100%; height: 100%; border-radius: 40rpx; background: #222; padding: 10rpx; box-shadow: 0rpx 0rpx 0rpx 7rpx rgba(68,68,68,.3)}
.tnphone-black-min .screen {width: 100%; height: 100%; border-radius: 30rpx; background: #fff; position: relative; overflow: hidden}
.tnphone-black-min .head {width: 100%; height: 90rpx; text-align: center; position: absolute; padding: 45rpx 15rpx 10rpx 15rpx;}
.tnphone-black-min .peak {left: 22%;width: 56%; height: 27rpx; margin: -2rpx auto 0rpx; border-radius: 0 0 20rpx 20rpx; background: #222; position: absolute}
.tnphone-black-min .sound {width: 48rpx; height: 6rpx; border-radius: 15rpx; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24rpx; margin-top: -10rpx;
box-shadow: 0rpx 4rpx 4rpx 0rpx #444 inset}
.tnphone-black-min .lens {width: 6rpx; height: 6rpx; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34rpx; margin-top: -10rpx}
.tnphone-black-min .talk {width: 50%; height: 6rpx; border-radius: 15rpx; background: rgba(0,0,0,.3); position: absolute; bottom: 8rpx; left: 50%; margin-left: -25%}
.tnphone-black-min .area-l,.tnphone-black-min .area-r {width: 70rpx; height: 16rpx; position: absolute; top: 6rpx}
.tnphone-black-min .area-l {left: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-left: 20rpx;}
.tnphone-black-min .area-r {right: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-right: 20rpx;}
.tnphone-black-min .fa-feed {float: left; font-size: 12rpx!important; transform:rotate(-45deg); margin-top: 4rpx; margin-right: 8rpx}
.tnphone-black-min .fa-battery-full {float: left; font-size: 12rpx!important; margin-top: 6rpx}
.tnphone-black-min .fa-chevron-left {float: left; margin-top: 4rpx}
.tnphone-black-min .fa-cog {float: right; margin-top: 4rpx}
.tnphone-black-min .btn01 {width: 3rpx; height: 28rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 105rpx; left: -3rpx}
.tnphone-black-min .btn02 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 160rpx; left: -3rpx}
.tnphone-black-min .btn03 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 230rpx; left: -3rpx}
.tnphone-black-min .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
/* tnphone-black-min 细边框 end */
</style>
basicPage/utils/color/index.vue
+105
View File
@@ -0,0 +1,105 @@
<template>
<view class="basic-utils__color tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Color工具</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="获取内置随机颜色">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view class="bg-color-item" :class="randomBgColorClass">背景颜色</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomBgColor">获取</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view class="bg-color-item" :class="randomColorClass">文字颜色</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomColor">获取</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view class="bg-color-item" :class="randomCoolBgColorClass">酷炫背景颜色</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomCoolColor">获取</tn-button></view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="hex与rgb互转">
<view class="tn-bg-white">
<tn-form-item>
<view class="tn-margin-left">
<tn-input v-model="hexRGBValue"></tn-input>
</view>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="convertToRGBOrHex">{{ rgbFlag ? '转换为hex' : '转换为rgb' }}</tn-button>
</view>
</template>
</tn-form-item>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicUtilsColor',
components: {demoTitle},
data() {
return {
randomBgColorClass: '',
randomColorClass: '',
randomCoolBgColorClass: '',
hexRGBValue: '#01BEFF',
rgbFlag: false
}
},
methods: {
// 获取随机背景颜色
getRandomBgColor() {
this.randomBgColorClass = this.$t.color.getRandomColorClass()
},
// 获取随机颜色
getRandomColor() {
this.randomColorClass = this.$t.color.getRandomColorClass('color')
},
// 获取随机酷炫背景颜色
getRandomCoolColor() {
this.randomCoolBgColorClass = this.$t.color.getRandomCoolBgClass()
},
// 将hex与rgb互转
convertToRGBOrHex() {
if (this.rgbFlag) {
this.hexRGBValue = this.$t.color.rgbToHex(this.hexRGBValue)
} else {
this.hexRGBValue = this.$t.color.hexToRGB(this.hexRGBValue)
}
this.rgbFlag = !this.rgbFlag
}
}
}
</script>
<style lang="scss" scoped>
.basic-utils__color {
background-color: $tn-bg-gray-color;
min-height: 100vh;
.bg-color-item {
height: 100%;
width: auto;
padding: 10rpx 20rpx;
}
}
</style>
basicPage/utils/message/index.vue
+176
View File
@@ -0,0 +1,176 @@
<template>
<view class="basic-utils__message tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Message工具</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="uni内置toast框">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>默认toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_1">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带图标 toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_2">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带透明mask toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_3">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>设置时间 toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_4">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>设置回调 toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_5">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>关闭 toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="closeToast">关闭</tn-button></view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="uni内置loading框">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>弹出loading框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openLoading">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>关闭loading框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="closeLoading">关闭</tn-button></view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="uni内置modal框">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>默认modal框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_1">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>隐藏取消按钮 modal框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_2">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>修改文字 modal框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_3">弹出</tn-button></view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicUtilsMessage',
components: {demoTitle},
data() {
return {
}
},
methods: {
// 弹出toast
openToast_1() {
this.$t.message.toast('弹出toast')
},
openToast_2() {
this.$t.message.toast('弹出toast icon', false, null, 'success')
},
openToast_3() {
this.$t.message.toast('弹出toast mask', true)
},
openToast_4() {
this.$t.message.toast('弹出toast duration', false, null, 'none', 3000)
},
openToast_5() {
this.$t.message.toast('弹出toast cb', true, () => {
setTimeout(() => {
this.$t.message.toast('执行完毕后弹出', true, null, 'success')
}, 500)
})
},
// 关闭Toast
closeToast() {
this.$t.message.closeToast()
},
// 弹出loading
openLoading() {
this.$t.message.loading('弹出loading')
setTimeout(() => {
this.closeLoading()
}, 3000)
},
// 关闭loading
closeLoading() {
this.$t.message.closeLoading()
},
// 弹出modal
openModal_1() {
this.$t.message.modal("提示", "请进行登录后进行操作", () => {
this.$t.message.toast('点击了确认按钮')
}, true, () => {
this.$t.message.toast('点击了取消按钮')
})
},
openModal_2() {
this.$t.message.modal("提示", "请进行登录后进行操作", () => {
this.$t.message.toast('点击了确认按钮')
}, false, null)
},
openModal_3() {
this.$t.message.modal("提示", "请进行登录后进行操作", () => {
this.$t.message.toast('点击了跳转按钮')
}, true, () => {
this.$t.message.toast('点击了拒绝按钮')
}, "跳转登录", "拒绝登录")
}
}
}
</script>
<style lang="scss" scoped>
.basic-utils__message {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>
basicPage/utils/number/index.vue
+159
View File
@@ -0,0 +1,159 @@
<template>
<view class="basic-utils__number tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Number工具</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="超过指定长度自动添加'+'号">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过2位自动添加'+'号</view>
<view>{{ $t.number.formatNumberString(56) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过2位自动添加'+'号</view>
<view>{{ $t.number.formatNumberString(100) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过3位自动添加'+'号</view>
<view>{{ $t.number.formatNumberString(899, 3) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过3位自动添加'+'号</view>
<view>{{ $t.number.formatNumberString(1000, 3) }}</view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="往数字前添加'0'">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>只有一位时会往前面添加'0'</view>
<view>{{ $t.number.formatNumberAddZero(6) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过两位时不会往前面添加'0'</view>
<view>{{ $t.number.formatNumberAddZero(16) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过两位时不会往前面添加'0'</view>
<view>{{ $t.number.formatNumberAddZero(106) }}</view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="数值转换为带单位金额">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>不带单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(100) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>不带单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(100.88) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带K单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(1000) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带K单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(1032.89) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带W单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(10000) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带W单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(10875.90) }}</view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="获取随机值">
<view class="tn-bg-white">
<tn-form-item>
<view class="tn-margin-left"><tn-input v-model="randomValue" :disabled="true"></tn-input></view>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="getRandomValue">获取随机值</tn-button>
</view>
</template>
</tn-form-item>
<tn-form-item>
<view class="tn-margin-left"><tn-input v-model="intRandomValue" :disabled="true"></tn-input></view>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="getIntRandomValue">获取整数随机值</tn-button>
</view>
</template>
</tn-form-item>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicUtilsNumber',
components: {demoTitle},
data() {
return {
randomValue: '',
intRandomValue: '',
}
},
methods: {
// 获取随机值
getRandomValue() {
this.randomValue = this.$t.number.random(0, 100.99)
},
// 获取整数随机值
getIntRandomValue() {
this.intRandomValue = this.$t.number.randomInt(0, 100)
}
}
}
</script>
<style lang="scss" scoped>
.basic-utils__number {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>
basicPage/utils/string/index.vue
+89
View File
@@ -0,0 +1,89 @@
<template>
<view class="basic-utils__string tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>String工具</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="去除空格">
<view class="tn-bg-white">
<tn-form-item>
<tn-input v-model="trimValue" :trim="false"></tn-input>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerTrim">清除空格</tn-button>
</view>
</template>
</tn-form-item>
</view>
</demo-title>
<demo-title title="大写转指定连接符">
<view class="tn-bg-white">
<tn-form-item>
<tn-input v-model="humpCharValue"></tn-input>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerHumpChar">转换</tn-button>
</view>
</template>
</tn-form-item>
</view>
</demo-title>
<demo-title title="将自定的连接符转为大写">
<view class="tn-bg-white">
<tn-form-item>
<tn-input v-model="charHumpValue"></tn-input>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerCharHump">转换</tn-button>
</view>
</template>
</tn-form-item>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicUtilsString',
components: {demoTitle},
data() {
return {
trimValue: ' 前后都有空格啊 ',
humpCharValue: 'TuniaoUI',
charHumpValue: 'Tuniao_u_i'
}
},
methods: {
// 处理去除空格
handlerTrim() {
this.trimValue = this.$t.string.trim(this.trimValue)
},
// 处理将大写字符串转换为指定的连接符连接的字符串
handlerHumpChar() {
this.humpCharValue = this.$t.string.humpConvertChar(this.humpCharValue, '_')
},
// 处理将指定的连接字符连接的字符串转换为大写的字符串
handlerCharHump() {
this.charHumpValue = this.$t.string.charConvertHump(this.charHumpValue, '_')
}
}
}
</script>
<style lang="scss" scoped>
.basic-utils__string {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>
common/config.js
+2 -2
View File
@@ -1,3 +1,3 @@
module.exports = { module.exports = {
baseUrl: 'http://api.youzixy.com' baseUrl: 'http://api.youzixy.com'
} }
componentsPage/action-sheet/action-sheet.vue
+138 -138
View File
@@ -1,139 +1,139 @@
<template> <template>
<view class="components-action_sheet"> <view class="components-action_sheet">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>操作菜单</tn-nav-bar> <tn-nav-bar fixed>操作菜单</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="demoTips" :sectionList="sectionList" :full="false" @click="click"> <dynamic-demo-template ref="demoTemplate" :tips="demoTips" :sectionList="sectionList" :full="false" @click="click">
<tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showActionSheet">弹出ActionSheet</tn-button> <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showActionSheet">弹出ActionSheet</tn-button>
</dynamic-demo-template> </dynamic-demo-template>
</view> </view>
<!-- actionSheet --> <!-- actionSheet -->
<tn-action-sheet <tn-action-sheet
v-model="show" v-model="show"
:tips="tips" :tips="tips"
:list="list" :list="list"
:borderRadius="borderRadius" :borderRadius="borderRadius"
:cancelBtn="cancelBtn" :cancelBtn="cancelBtn"
:maskCloseable="maskCloseable" :maskCloseable="maskCloseable"
@click="clickActionSheetItem" @click="clickActionSheetItem"
@close="closedActionSheet" @close="closedActionSheet"
> >
</tn-action-sheet> </tn-action-sheet>
</view> </view>
</template> </template>
<script> <script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue' import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default { export default {
name: 'componentsActionSheet', name: 'componentsActionSheet',
components: {dynamicDemoTemplate}, components: {dynamicDemoTemplate},
data() { data() {
return { return {
show: false, show: false,
tips: { tips: {
text: '请选择正确的答案', text: '请选择正确的答案',
fontSize: 26 fontSize: 26
}, },
list: [ list: [
{ {
text: 'A' text: 'A'
}, },
{ {
text: 'B', text: 'B',
subText: '这是正确答案' subText: '这是正确答案'
}, },
{ {
text: 'C', text: 'C',
disabled: true disabled: true
}, },
{ {
text: 'D' text: 'D'
} }
], ],
borderRadius: 0, borderRadius: 0,
cancelBtn: true, cancelBtn: true,
maskCloseable: true, maskCloseable: true,
demoTips: ['无需依赖额外的样式文件','使用tn-action-sheet组件'], demoTips: ['无需依赖额外的样式文件','使用tn-action-sheet组件'],
sectionList: [ sectionList: [
{ {
name: '参数切换', name: '参数切换',
section: [ section: [
{ {
title: '显示取消按钮', title: '显示取消按钮',
optional: ['是','否'], optional: ['是','否'],
methods: 'cancelBtnChange' methods: 'cancelBtnChange'
}, },
{ {
title: '设置圆角', title: '设置圆角',
optional: ['0','23'], optional: ['0','23'],
methods: 'borderRadiusChange' methods: 'borderRadiusChange'
}, },
{ {
title: '点击遮罩关闭', title: '点击遮罩关闭',
optional: ['是','否'], optional: ['是','否'],
methods: 'maskCloseableChange' methods: 'maskCloseableChange'
} }
] ]
} }
] ]
} }
}, },
methods: { methods: {
click(event) { click(event) {
this[event.methods] && this[event.methods](event) this[event.methods] && this[event.methods](event)
}, },
// 弹出ActionSheet // 弹出ActionSheet
showActionSheet() { showActionSheet() {
this.openActionSheet() this.openActionSheet()
}, },
// 切换圆角 // 切换圆角
borderRadiusChange(event) { borderRadiusChange(event) {
this.borderRadius = Number(event.name) this.borderRadius = Number(event.name)
this.openActionSheet() this.openActionSheet()
}, },
// 切换关闭按钮 // 切换关闭按钮
cancelBtnChange(event) { cancelBtnChange(event) {
this.cancelBtn = event.index === 0 ? true : false this.cancelBtn = event.index === 0 ? true : false
this.openActionSheet() this.openActionSheet()
}, },
// 切换点击遮罩关闭 // 切换点击遮罩关闭
maskCloseableChange(event) { maskCloseableChange(event) {
this.maskCloseable = event.index === 0 ? true : false this.maskCloseable = event.index === 0 ? true : false
this.openActionSheet() this.openActionSheet()
}, },
// 点击了选项 // 点击了选项
clickActionSheetItem(index) { clickActionSheetItem(index) {
if (index === 1) { if (index === 1) {
this.$t.messageUtils.toast('选择正确') this.$t.message.toast('选择正确')
} }
this.closedActionSheet() this.closedActionSheet()
}, },
// 打开actionSheet // 打开actionSheet
openActionSheet() { openActionSheet() {
this.show = true this.show = true
}, },
// 关闭actionSheet // 关闭actionSheet
closedActionSheet() { closedActionSheet() {
this.show = false this.show = false
} }
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>
componentsPage/calendar/calendar.vue
+212 -212
View File
@@ -1,213 +1,213 @@
<template> <template>
<view class="components-calendar"> <view class="components-calendar">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Calendar日历</tn-nav-bar> <tn-nav-bar fixed>Calendar日历</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click"> <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
<view class="tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-center"> <view class="tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-center">
<tn-button style="width: 100%;" width="100%" backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showCalendar">弹出日历</tn-button> <tn-button style="width: 100%;" width="100%" backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showCalendar">弹出日历</tn-button>
<view v-if="result !== ''" class="calendar-result tn-border-dashed"> <view v-if="result !== ''" class="calendar-result tn-border-dashed">
{{ result }} {{ result }}
</view> </view>
</view> </view>
</dynamic-demo-template> </dynamic-demo-template>
</view> </view>
<!-- Calendar --> <!-- Calendar -->
<tn-calendar <tn-calendar
v-if="show" v-if="show"
v-model="show" v-model="show"
:mode="mode" :mode="mode"
:showLunar="showLunar" :showLunar="showLunar"
:activeBgColor="activeBgColor" :activeBgColor="activeBgColor"
:activeColor="activeColor" :activeColor="activeColor"
:rangeBgColor="rangeBgColor" :rangeBgColor="rangeBgColor"
:rangeColor="rangeColor" :rangeColor="rangeColor"
:btnColor="btnColor" :btnColor="btnColor"
:lunarColor="lunarColor" :lunarColor="lunarColor"
:startText="startText" :startText="startText"
:endText="endText" :endText="endText"
:toolTips="toolTips" :toolTips="toolTips"
:changeYear="changeYear" :changeYear="changeYear"
:changeMonth="changeMonth" :changeMonth="changeMonth"
@change="onChange" @change="onChange"
></tn-calendar> ></tn-calendar>
</view> </view>
</template> </template>
<script> <script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue' import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default { export default {
name: 'componentsCalendar', name: 'componentsCalendar',
components: {dynamicDemoTemplate}, components: {dynamicDemoTemplate},
data() { data() {
return { return {
show: false, show: false,
mode: 'date', mode: 'date',
showLunar: true, showLunar: true,
activeBgColor: '#01BEFF', activeBgColor: '#01BEFF',
activeColor: '#FFFFFF', activeColor: '#FFFFFF',
rangeBgColor: '#E6E6E655', rangeBgColor: '#E6E6E655',
rangeColor: '#01BEFF', rangeColor: '#01BEFF',
btnColor: '#01BEFF', btnColor: '#01BEFF',
lunarColor: '#AAAAAA', lunarColor: '#AAAAAA',
startText: '开始', startText: '开始',
endText: '结束', endText: '结束',
toolTips: '请选择日期', toolTips: '请选择日期',
changeYear: true, changeYear: true,
changeMonth: true, changeMonth: true,
result: '', result: '',
tips: ['无需依赖额外的样式文件','使用tn-calendar组件'], tips: ['无需依赖额外的样式文件','使用tn-calendar组件'],
sectionList: [ sectionList: [
{ {
name: '参数切换', name: '参数切换',
section: [ section: [
{ {
title: '模式', title: '模式',
optional: ['单个日期','日期范围'], optional: ['单个日期','日期范围'],
methods: 'modeChange' methods: 'modeChange'
}, },
{ {
title: '农历显示', title: '农历显示',
optional: ['显示','隐藏'], optional: ['显示','隐藏'],
methods: 'showLunarChange' methods: 'showLunarChange'
}, },
{ {
title: '自定义颜色', title: '自定义颜色',
optional: ['默认','自定义'], optional: ['默认','自定义'],
methods: 'colorChange' methods: 'colorChange'
}, },
{ {
title: '自定义文案', title: '自定义文案',
optional: ['默认','自定义'], optional: ['默认','自定义'],
methods: 'textChange' methods: 'textChange'
}, },
{ {
title: '年月切换', title: '年月切换',
optional: ['年月切换','月切换'], optional: ['年月切换','月切换'],
methods: 'yearMonthChange' methods: 'yearMonthChange'
} }
] ]
} }
] ]
} }
}, },
methods: { methods: {
click(event) { click(event) {
this[event.methods] && this[event.methods](event) this[event.methods] && this[event.methods](event)
}, },
// 弹出日历 // 弹出日历
showCalendar() { showCalendar() {
this.openCalendar() this.openCalendar()
}, },
// 切换模式 // 切换模式
modeChange(event) { modeChange(event) {
switch (event.index) { switch (event.index) {
case 0: case 0:
this.mode = 'date' this.mode = 'date'
break break
case 1: case 1:
this.mode = 'range' this.mode = 'range'
} }
this.openCalendar() this.openCalendar()
}, },
// 切换农历显示 // 切换农历显示
showLunarChange(event) { showLunarChange(event) {
this.showLunar = event.index === 0 ? true : false this.showLunar = event.index === 0 ? true : false
this.openCalendar() this.openCalendar()
}, },
// 切换颜色 // 切换颜色
colorChange(event) { colorChange(event) {
switch (event.index) { switch (event.index) {
case 0: case 0:
this.activeBgColor = '#01BEFF' this.activeBgColor = '#01BEFF'
this.activeColor = '#FFFFFF' this.activeColor = '#FFFFFF'
this.rangeBgColor = '#E6E6E655' this.rangeBgColor = '#E6E6E655'
this.rangeColor = '#01BEFF' this.rangeColor = '#01BEFF'
this.btnColor = '#01BEFF' this.btnColor = '#01BEFF'
this.lunarColor = '#AAAAAA' this.lunarColor = '#AAAAAA'
break break
case 1: case 1:
this.activeBgColor = '#E83A30' this.activeBgColor = '#E83A30'
this.activeColor = '#FFFFFF' this.activeColor = '#FFFFFF'
this.rangeBgColor = '#E6E6E680' this.rangeBgColor = '#E6E6E680'
this.rangeColor = '#E72F8C' this.rangeColor = '#E72F8C'
this.btnColor = '#E83A30' this.btnColor = '#E83A30'
this.lunarColor = '#080808' this.lunarColor = '#080808'
break break
} }
this.openCalendar() this.openCalendar()
}, },
// 切换文案 // 切换文案
textChange(event) { textChange(event) {
switch (event.index) { switch (event.index) {
case 0: case 0:
this.startText = '开始' this.startText = '开始'
this.endText = '结束' this.endText = '结束'
this.toolTips = '请选择日期' this.toolTips = '请选择日期'
break break
case 1: case 1:
this.startText = '入住' this.startText = '入住'
this.endText = '离店' this.endText = '离店'
this.toolTips = '入住/离店日期' this.toolTips = '入住/离店日期'
break break
} }
this.openCalendar() this.openCalendar()
}, },
// 切换年月 // 切换年月
yearMonthChange(event) { yearMonthChange(event) {
switch (event.index) { switch (event.index) {
case 0: case 0:
this.changeYear = true this.changeYear = true
this.changeMonth = true this.changeMonth = true
break break
case 1: case 1:
this.changeYear = false this.changeYear = false
this.changeMonth = true this.changeMonth = true
break break
} }
this.openCalendar() this.openCalendar()
}, },
// 打开日历 // 打开日历
openCalendar() { openCalendar() {
this.show = true this.show = true
}, },
// 日历日期有改变 // 日历日期有改变
onChange(event) { onChange(event) {
if (this.mode === 'date') { if (this.mode === 'date') {
this.result = event.date this.result = event.date
} }
if (this.mode === 'range') { if (this.mode === 'range') {
this.result = `${event.startDate} 至 ${event.endDate}` this.result = `${event.startDate} 至 ${event.endDate}`
} }
this.$refs.demoTemplate.updateSectionScrollView() this.$refs.demoTemplate.updateSectionScrollView()
} }
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.calendar-result { .calendar-result {
width: 100%; width: 100%;
margin-top: 20rpx; margin-top: 20rpx;
padding: 10rpx 30rpx; padding: 10rpx 30rpx;
background-color: $tn-font-holder-color; background-color: $tn-font-holder-color;
text-align: center; text-align: center;
} }
</style> </style>
componentsPage/check-box/check-box.vue
+76 -76
View File
@@ -1,89 +1,89 @@
<template> <template>
<view class="components-check-box tn-safe-area-inset-bottom"> <view class="components-check-box tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>按钮</tn-nav-bar> <tn-nav-bar fixed>按钮</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础"> <demo-title title="基础">
<tn-checkbox v-model="value1" name="选项1">选项1</tn-checkbox> <tn-checkbox v-model="value1" name="选项1">选项1</tn-checkbox>
<tn-checkbox v-model="value1" name="选项2" disabled>选项2(不可点击)</tn-checkbox> <tn-checkbox v-model="value1" name="选项2" disabled>选项2(不可点击)</tn-checkbox>
</demo-title> </demo-title>
<demo-title title="圆形选框"> <demo-title title="圆形选框">
<tn-checkbox-group shape="circle"> <tn-checkbox-group shape="circle">
<tn-checkbox name="选项1">选项1</tn-checkbox> <tn-checkbox name="选项1">选项1</tn-checkbox>
<tn-checkbox name="选项2">选项2</tn-checkbox> <tn-checkbox name="选项2">选项2</tn-checkbox>
<tn-checkbox name="选项3">选项3</tn-checkbox> <tn-checkbox name="选项3">选项3</tn-checkbox>
</tn-checkbox-group> </tn-checkbox-group>
</demo-title> </demo-title>
<demo-title title="竖直排列"> <demo-title title="竖直排列">
<tn-checkbox-group width="100%" wrap> <tn-checkbox-group width="100%" wrap>
<tn-checkbox name="选项1">选项1</tn-checkbox> <tn-checkbox name="选项1">选项1</tn-checkbox>
<tn-checkbox name="选项2">选项2</tn-checkbox> <tn-checkbox name="选项2">选项2</tn-checkbox>
<tn-checkbox name="选项3">选项3</tn-checkbox> <tn-checkbox name="选项3">选项3</tn-checkbox>
</tn-checkbox-group> </tn-checkbox-group>
</demo-title> </demo-title>
<demo-title title="禁止点击标签"> <demo-title title="禁止点击标签">
<tn-checkbox-group disabledLabel> <tn-checkbox-group disabledLabel>
<tn-checkbox name="选项1">选项1</tn-checkbox> <tn-checkbox name="选项1">选项1</tn-checkbox>
<tn-checkbox name="选项2">选项2</tn-checkbox> <tn-checkbox name="选项2">选项2</tn-checkbox>
<tn-checkbox name="选项3">选项3</tn-checkbox> <tn-checkbox name="选项3">选项3</tn-checkbox>
</tn-checkbox-group> </tn-checkbox-group>
</demo-title> </demo-title>
<demo-title title="自定义尺寸"> <demo-title title="自定义尺寸">
<view> <view>
<tn-checkbox-group :size="26" :iconSize="18"> <tn-checkbox-group :size="26" :iconSize="18">
<tn-checkbox name="选项1">选项1</tn-checkbox> <tn-checkbox name="选项1">选项1</tn-checkbox>
<tn-checkbox name="选项2">选项2</tn-checkbox> <tn-checkbox name="选项2">选项2</tn-checkbox>
<tn-checkbox name="选项3" :size="36" :iconSize="30">选项3</tn-checkbox> <tn-checkbox name="选项3" :size="36" :iconSize="30">选项3</tn-checkbox>
</tn-checkbox-group> </tn-checkbox-group>
</view> </view>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-checkbox-group :size="46" :iconSize="40"> <tn-checkbox-group :size="46" :iconSize="40">
<tn-checkbox name="选项1">选项1</tn-checkbox> <tn-checkbox name="选项1">选项1</tn-checkbox>
<tn-checkbox name="选项2">选项2</tn-checkbox> <tn-checkbox name="选项2">选项2</tn-checkbox>
<tn-checkbox name="选项3">选项3</tn-checkbox> <tn-checkbox name="选项3">选项3</tn-checkbox>
</tn-checkbox-group> </tn-checkbox-group>
</view> </view>
</demo-title> </demo-title>
<demo-title title="自定义颜色"> <demo-title title="自定义颜色">
<tn-checkbox-group activeColor="#31E749"> <tn-checkbox-group activeColor="#31E749">
<tn-checkbox name="选项1">选项1</tn-checkbox> <tn-checkbox name="选项1">选项1</tn-checkbox>
<tn-checkbox name="选项2">选项2</tn-checkbox> <tn-checkbox name="选项2">选项2</tn-checkbox>
<tn-checkbox name="选项3" activeColor="#E83A30">选项3</tn-checkbox> <tn-checkbox name="选项3" activeColor="#E83A30">选项3</tn-checkbox>
</tn-checkbox-group> </tn-checkbox-group>
</demo-title> </demo-title>
<demo-title title="自定义图标"> <demo-title title="自定义图标">
<tn-checkbox-group> <tn-checkbox-group>
<tn-checkbox name="选项1" iconName="star">选项1</tn-checkbox> <tn-checkbox name="选项1" iconName="star">选项1</tn-checkbox>
<tn-checkbox name="选项2" iconName="fire">选项2</tn-checkbox> <tn-checkbox name="选项2" iconName="fire">选项2</tn-checkbox>
<tn-checkbox name="选项3" iconName="like">选项3</tn-checkbox> <tn-checkbox name="选项3" iconName="like">选项3</tn-checkbox>
</tn-checkbox-group> </tn-checkbox-group>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'ComponentsCheckBox', name: 'ComponentsCheckBox',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
value1: false, value1: false,
value2: false value2: false
} }
} }
componentsPage/collapse/collapse.vue
+118 -118
View File
@@ -1,119 +1,119 @@
<template> <template>
<view class="components-collapse tn-safe-area-inset-bottom"> <view class="components-collapse tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Collapse折叠面板</tn-nav-bar> <tn-nav-bar fixed>Collapse折叠面板</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="手风琴模式"> <demo-title title="手风琴模式">
<tn-collapse> <tn-collapse>
<tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title"> <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title">
<view class="tn-text-break-word"> <view class="tn-text-break-word">
{{ item.content }} {{ item.content }}
</view> </view>
</tn-collapse-item> </tn-collapse-item>
</tn-collapse> </tn-collapse>
</demo-title> </demo-title>
<demo-title title="允许全部展开"> <demo-title title="允许全部展开">
<tn-collapse :accordion="false"> <tn-collapse :accordion="false">
<tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title"> <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title">
<view class="tn-text-break-word"> <view class="tn-text-break-word">
{{ item.content }} {{ item.content }}
</view> </view>
</tn-collapse-item> </tn-collapse-item>
</tn-collapse> </tn-collapse>
</demo-title> </demo-title>
<demo-title title="禁止第二项展开"> <demo-title title="禁止第二项展开">
<tn-collapse> <tn-collapse>
<tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title" :disabled="index === 1"> <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title" :disabled="index === 1">
<view class="tn-text-break-word"> <view class="tn-text-break-word">
{{ item.content }} {{ item.content }}
</view> </view>
</tn-collapse-item> </tn-collapse-item>
</tn-collapse> </tn-collapse>
</demo-title> </demo-title>
<demo-title title="关闭点击效果"> <demo-title title="关闭点击效果">
<tn-collapse hoverClass=""> <tn-collapse hoverClass="">
<tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title"> <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title">
<view class="tn-text-break-word"> <view class="tn-text-break-word">
{{ item.content }} {{ item.content }}
</view> </view>
</tn-collapse-item> </tn-collapse-item>
</tn-collapse> </tn-collapse>
</demo-title> </demo-title>
<demo-title title="隐藏箭头"> <demo-title title="隐藏箭头">
<tn-collapse :arrow="false"> <tn-collapse :arrow="false">
<tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title"> <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title">
<view class="tn-text-break-word"> <view class="tn-text-break-word">
{{ item.content }} {{ item.content }}
</view> </view>
</tn-collapse-item> </tn-collapse-item>
</tn-collapse> </tn-collapse>
</demo-title> </demo-title>
<demo-title title="自定义样式"> <demo-title title="自定义样式">
<tn-collapse :headStyle="headStyle" :bodyStyle="bodyStyle" :itemStyle="itemStyle"> <tn-collapse :headStyle="headStyle" :bodyStyle="bodyStyle" :itemStyle="itemStyle">
<tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title" align="center"> <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title" align="center">
<view class="tn-text-break-word"> <view class="tn-text-break-word">
{{ item.content }} {{ item.content }}
</view> </view>
</tn-collapse-item> </tn-collapse-item>
</tn-collapse> </tn-collapse>
</demo-title> </demo-title>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsCollapse', name: 'componentsCollapse',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
list: [ list: [
{ {
title: '关雎', title: '关雎',
content: '关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。' content: '关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。'
}, },
{ {
title: '长歌行', title: '长歌行',
content: '青青园中葵，朝露待日晞。阳春布德泽，万物生光辉。常恐秋节至，焜黄华叶衰。百川东到海，何时复西归？少壮不努力，老大徒伤悲！' content: '青青园中葵，朝露待日晞。阳春布德泽，万物生光辉。常恐秋节至，焜黄华叶衰。百川东到海，何时复西归？少壮不努力，老大徒伤悲！'
}, },
{ {
title: '秋风辞', title: '秋风辞',
content: '秋风起兮白云飞，草木黄落兮雁南归。兰有秀兮菊有芳，怀佳人兮不能忘。泛楼船兮济汾河，横中流兮扬素波。少壮几时兮奈老何！' content: '秋风起兮白云飞，草木黄落兮雁南归。兰有秀兮菊有芳，怀佳人兮不能忘。泛楼船兮济汾河，横中流兮扬素波。少壮几时兮奈老何！'
} }
], ],
headStyle: { headStyle: {
backgroundColor: '#EFEFEF' backgroundColor: '#EFEFEF'
}, },
bodyStyle: { bodyStyle: {
backgroundColor: '#EFEFEF' backgroundColor: '#EFEFEF'
}, },
itemStyle: { itemStyle: {
backgroundColor: '#EFEFEF', backgroundColor: '#EFEFEF',
borderRadius: '20rpx', borderRadius: '20rpx',
overflow: 'hidden' overflow: 'hidden'
} }
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-collapse { .components-collapse {
background-color: $tn-bg-gray-color; background-color: $tn-bg-gray-color;
} }
</style> </style>
componentsPage/count-down/count-down.vue
+77 -77
View File
@@ -1,78 +1,78 @@
<template> <template>
<view class="components-count_down tn-safe-area-inset-bottom"> <view class="components-count_down tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>countdown倒计时</tn-nav-bar> <tn-nav-bar fixed>countdown倒计时</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基本使用"> <demo-title title="基本使用">
<tn-count-down :timestamp="3600"></tn-count-down> <tn-count-down :timestamp="3600"></tn-count-down>
</demo-title> </demo-title>
<demo-title title="显示边框"> <demo-title title="显示边框">
<tn-count-down :timestamp="3600" :showBorder="true"></tn-count-down> <tn-count-down :timestamp="3600" :showBorder="true"></tn-count-down>
</demo-title> </demo-title>
<demo-title title="中文分割时间"> <demo-title title="中文分割时间">
<tn-count-down :timestamp="3600" separator="cn"></tn-count-down> <tn-count-down :timestamp="3600" separator="cn"></tn-count-down>
</demo-title> </demo-title>
<demo-title title="天数为零时不隐藏"> <demo-title title="天数为零时不隐藏">
<tn-count-down :timestamp="3600" :hideZeroDay="true"></tn-count-down> <tn-count-down :timestamp="3600" :hideZeroDay="true"></tn-count-down>
</demo-title> </demo-title>
<demo-title title="显示天"> <demo-title title="显示天">
<tn-count-down :timestamp="360000" :showDays="true" :showHours="false" :showMinutes="false" :showSeconds="false"></tn-count-down> <tn-count-down :timestamp="360000" :showDays="true" :showHours="false" :showMinutes="false" :showSeconds="false"></tn-count-down>
</demo-title> </demo-title>
<demo-title title="显示天时"> <demo-title title="显示天时">
<tn-count-down :timestamp="360000" :showDays="true" :showHours="true" :showMinutes="false" :showSeconds="false"></tn-count-down> <tn-count-down :timestamp="360000" :showDays="true" :showHours="true" :showMinutes="false" :showSeconds="false"></tn-count-down>
</demo-title> </demo-title>
<demo-title title="显示天时分"> <demo-title title="显示天时分">
<tn-count-down :timestamp="360000" :showDays="true" :showHours="true" :showMinutes="true" :showSeconds="false"></tn-count-down> <tn-count-down :timestamp="360000" :showDays="true" :showHours="true" :showMinutes="true" :showSeconds="false"></tn-count-down>
</demo-title> </demo-title>
<demo-title title="显示天时分秒"> <demo-title title="显示天时分秒">
<tn-count-down :timestamp="360000" :showDays="true" :showHours="true" :showMinutes="true" :showSeconds="true"></tn-count-down> <tn-count-down :timestamp="360000" :showDays="true" :showHours="true" :showMinutes="true" :showSeconds="true"></tn-count-down>
</demo-title> </demo-title>
<demo-title title="自定义尺寸"> <demo-title title="自定义尺寸">
<tn-count-down :timestamp="3600" :fontSize="60" :separatorSize="60"></tn-count-down> <tn-count-down :timestamp="3600" :fontSize="60" :separatorSize="60"></tn-count-down>
</demo-title> </demo-title>
<demo-title title="自定义颜色"> <demo-title title="自定义颜色">
<tn-count-down :timestamp="3600" backgroundColor="tn-main-gradient-indigo" fontColor="#FFFFFF"></tn-count-down> <tn-count-down :timestamp="3600" backgroundColor="tn-main-gradient-indigo" fontColor="#FFFFFF"></tn-count-down>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsCountDown', name: 'componentsCountDown',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-count_down { .components-count_down {
min-height: 100vh; min-height: 100vh;
} }
</style> </style>
componentsPage/count-scroll/count-scroll.vue
+67 -67
View File
@@ -1,68 +1,68 @@
<template> <template>
<view class="components-count_scroll tn-safe-area-inset-bottom"> <view class="components-count_scroll tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>countScroll数字滚动</tn-nav-bar> <tn-nav-bar fixed>countScroll数字滚动</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基本使用"> <demo-title title="基本使用">
<view class="tn-flex tn-flex-col-center tn-flex-row-left"> <view class="tn-flex tn-flex-col-center tn-flex-row-left">
<view> <view>
<tn-count-scroll :value="888.88"></tn-count-scroll> <tn-count-scroll :value="888.88"></tn-count-scroll>
</view> </view>
<view class="tn-margin-left"> <view class="tn-margin-left">
<tn-count-scroll :value="9999"></tn-count-scroll> <tn-count-scroll :value="9999"></tn-count-scroll>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="加长持续时间"> <demo-title title="加长持续时间">
<view class="tn-flex tn-flex-col-center tn-flex-row-left"> <view class="tn-flex tn-flex-col-center tn-flex-row-left">
<view> <view>
<tn-count-scroll :value="888.88" :duration="0.5"></tn-count-scroll> <tn-count-scroll :value="888.88" :duration="0.5"></tn-count-scroll>
</view> </view>
<view class="tn-margin-left"> <view class="tn-margin-left">
<tn-count-scroll :value="9999" :duration="3"></tn-count-scroll> <tn-count-scroll :value="9999" :duration="3"></tn-count-scroll>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="字体加大加粗"> <demo-title title="字体加大加粗">
<tn-count-scroll :value="888.88" :height="100" :fontSize="100" :bold="true"></tn-count-scroll> <tn-count-scroll :value="888.88" :height="100" :fontSize="100" :bold="true"></tn-count-scroll>
</demo-title> </demo-title>
<demo-title title="自定义颜色"> <demo-title title="自定义颜色">
<tn-count-scroll :value="888.88" fontColor="#E88C30"></tn-count-scroll> <tn-count-scroll :value="888.88" fontColor="#E88C30"></tn-count-scroll>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsCountTo', name: 'componentsCountTo',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-count_scroll { .components-count_scroll {
min-height: 100vh; min-height: 100vh;
} }
</style> </style>
componentsPage/count-to/count-to.vue
+67 -67
View File
@@ -1,68 +1,68 @@
<template> <template>
<view class="components-count_to tn-safe-area-inset-bottom"> <view class="components-count_to tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>countTo数字跳转</tn-nav-bar> <tn-nav-bar fixed>countTo数字跳转</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基本使用"> <demo-title title="基本使用">
<view class="tn-flex tn-flex-col-center tn-flex-row-left"> <view class="tn-flex tn-flex-col-center tn-flex-row-left">
<view> <view>
<tn-count-to :startVal="0" :endVal="1000"></tn-count-to> <tn-count-to :startVal="0" :endVal="1000"></tn-count-to>
</view> </view>
<view class="tn-margin-left"> <view class="tn-margin-left">
<tn-count-to :startVal="100" :endVal="2000"></tn-count-to> <tn-count-to :startVal="100" :endVal="2000"></tn-count-to>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="显示小数"> <demo-title title="显示小数">
<view class="tn-flex tn-flex-col-center tn-flex-row-left"> <view class="tn-flex tn-flex-col-center tn-flex-row-left">
<view> <view>
<tn-count-to :startVal="0" :endVal="1000.9" :decimals="1"></tn-count-to> <tn-count-to :startVal="0" :endVal="1000.9" :decimals="1"></tn-count-to>
</view> </view>
<view class="tn-margin-left"> <view class="tn-margin-left">
<tn-count-to :startVal="0" :endVal="1000.99" :decimals="2"></tn-count-to> <tn-count-to :startVal="0" :endVal="1000.99" :decimals="2"></tn-count-to>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="字体加大加粗显示"> <demo-title title="字体加大加粗显示">
<tn-count-to :startVal="0" :endVal="1000" :bold="true" :fontSize="100"></tn-count-to> <tn-count-to :startVal="0" :endVal="1000" :bold="true" :fontSize="100"></tn-count-to>
</demo-title> </demo-title>
<demo-title title="自定义字体颜色"> <demo-title title="自定义字体颜色">
<tn-count-to :startVal="0" :endVal="1000" fontColor="#A4E82F"></tn-count-to> <tn-count-to :startVal="0" :endVal="1000" fontColor="#A4E82F"></tn-count-to>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsCountTo', name: 'componentsCountTo',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-count_to { .components-count_to {
min-height: 100vh; min-height: 100vh;
} }
</style> </style>
componentsPage/empty/empty.vue
+82 -82
View File
@@ -1,86 +1,86 @@
<template> <template>
<view class="components-empty tn-safe-area-inset-bottom"> <view class="components-empty tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>空页面</tn-nav-bar> <tn-nav-bar fixed>空页面</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="内置图标"> <demo-title title="内置图标">
<block v-for="(item, index) in inlineMode" :key="index"> <block v-for="(item, index) in inlineMode" :key="index">
<view class="empty__item"> <view class="empty__item">
<tn-empty :mode="item"></tn-empty> <tn-empty :mode="item"></tn-empty>
</view> </view>
</block> </block>
</demo-title> </demo-title>
<demo-title title="自定义图标"> <demo-title title="自定义图标">
<view class="empty__item"> <view class="empty__item">
<tn-empty icon="moon-fill" text="夜深人静"></tn-empty> <tn-empty icon="moon-fill" text="夜深人静"></tn-empty>
</view> </view>
</demo-title> </demo-title>
<demo-title title="自定义图片"> <demo-title title="自定义图片">
<view class="empty__item"> <view class="empty__item">
<tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" text="空空如也"></tn-empty> <tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" text="空空如也"></tn-empty>
</view> </view>
<block v-for="(value, key, index) in imgEmpty" :key="index"> <block v-for="(value, key, index) in imgEmpty" :key="index">
<view class="empty__item"> <view class="empty__item">
<tn-empty :icon="value" :mode="key"></tn-empty> <tn-empty :icon="value" :mode="key"></tn-empty>
</view> </view>
</block> </block>
</demo-title> </demo-title>
<demo-title title="隐藏文字"> <demo-title title="隐藏文字">
<view class="empty__item"> <view class="empty__item">
<tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" mode=""></tn-empty> <tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" mode=""></tn-empty>
</view> </view>
<view class="empty__item tn-margin-top"> <view class="empty__item tn-margin-top">
<tn-empty icon="help" mode=""></tn-empty> <tn-empty icon="help" mode=""></tn-empty>
</view> </view>
</demo-title> </demo-title>
<demo-title title="带跳转按钮"> <demo-title title="带跳转按钮">
<view class="empty__item"> <view class="empty__item">
<tn-empty icon="moon-fill" text="夜深人静"> <tn-empty icon="moon-fill" text="夜深人静">
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm">看看小视频</tn-button> <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm">看看小视频</tn-button>
</tn-empty> </tn-empty>
</view> </view>
</demo-title> </demo-title>
<demo-title title="自定义样式"> <demo-title title="自定义样式">
<view class="empty__item"> <view class="empty__item">
<tn-empty icon="moon-fill" text="夜深人静" :iconSize="120" :textSize="34" iconColor="#E6E6E6" textColor="#C6D1D8"></tn-empty> <tn-empty icon="moon-fill" text="夜深人静" :iconSize="120" :textSize="34" iconColor="#E6E6E6" textColor="#C6D1D8"></tn-empty>
</view> </view>
<view class="empty__item tn-margin-top"> <view class="empty__item tn-margin-top">
<tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" text="空空如也" :imgWidth="200" :imgHeight="200"></tn-empty> <tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" text="空空如也" :imgWidth="200" :imgHeight="200"></tn-empty>
</view> </view>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'ComponentsEmpty', name: 'ComponentsEmpty',
components: { demoTitle }, components: { demoTitle },
data() { data() {
return { return {
inlineMode: ['cart','page','search','address','network','order','coupon','favor','permission','history','message','list','data','comment'], inlineMode: ['cart','page','search','address','network','order','coupon','favor','permission','history','message','list','data','comment'],
imgEmpty: { imgEmpty: {
cart: '/componentsPage/static/images/empty/cart.jpg', cart: '/componentsPage/static/images/empty/cart.jpg',
comment: '/componentsPage/static/images/empty/comment.jpg', comment: '/componentsPage/static/images/empty/comment.jpg',
data: '/componentsPage/static/images/empty/data.jpg', data: '/componentsPage/static/images/empty/data.jpg',
network: '/componentsPage/static/images/empty/network.jpg', network: '/componentsPage/static/images/empty/network.jpg',
page: '/componentsPage/static/images/empty/page.jpg', page: '/componentsPage/static/images/empty/page.jpg',
permission: '/componentsPage/static/images/empty/permission.jpg', permission: '/componentsPage/static/images/empty/permission.jpg',
search: '/componentsPage/static/images/empty/search.jpg' search: '/componentsPage/static/images/empty/search.jpg'
} }
} }
} }
@@ -88,14 +88,14 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-empty { .components-empty {
background-color: $tn-bg-gray-color; background-color: $tn-bg-gray-color;
} }
.empty { .empty {
&__item { &__item {
background-color: #FFFFFF; background-color: #FFFFFF;
padding: 20rpx 0; padding: 20rpx 0;
} }
} }
</style> </style>
componentsPage/fab/fab.vue
+195 -195
View File
@@ -1,196 +1,196 @@
<template> <template>
<view class="components-fab"> <view class="components-fab">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>fab悬浮按钮</tn-nav-bar> <tn-nav-bar fixed>fab悬浮按钮</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click"> <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
<view>请点击下边悬浮按钮</view> <view>请点击下边悬浮按钮</view>
</dynamic-demo-template> </dynamic-demo-template>
</view> </view>
<tn-fab <tn-fab
:btnList="btnList" :btnList="btnList"
:left="left" :left="left"
:right="right" :right="right"
:bottom="bottom" :bottom="bottom"
:width="width" :width="width"
:height="height" :height="height"
:iconSize="iconSize" :iconSize="iconSize"
:backgroundColor="backgroundColor" :backgroundColor="backgroundColor"
:fontColor="fontColor" :fontColor="fontColor"
:icon="icon" :icon="icon"
:animationType="animationType" :animationType="animationType"
:showMask="showMask" :showMask="showMask"
@click="clickFabItem" @click="clickFabItem"
> >
</tn-fab> </tn-fab>
</view> </view>
</template> </template>
<script> <script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue' import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default { export default {
name: 'componentsFab', name: 'componentsFab',
components: {dynamicDemoTemplate}, components: {dynamicDemoTemplate},
data() { data() {
return { return {
left: 'auto', left: 'auto',
right: 40, right: 40,
bottom: 100, bottom: 100,
width: 88, width: 88,
height: 88, height: 88,
iconSize: 64, iconSize: 64,
backgroundColor: '#01BEFF', backgroundColor: '#01BEFF',
fontColor: '#FFFFFF', fontColor: '#FFFFFF',
icon: 'open', icon: 'open',
animationType: 'up', animationType: 'up',
showMask: true, showMask: true,
btnList: [ btnList: [
{ {
icon: 'logo-tuniao', icon: 'logo-tuniao',
text: '图鸟科技', text: '图鸟科技',
bgColor: '#E72F8C' bgColor: '#E72F8C'
}, },
{ {
text: 'UI', text: 'UI',
textSize: 32, textSize: 32,
bgColor: '#FF7043' bgColor: '#FF7043'
}, },
{ {
icon: 'share-triangle', icon: 'share-triangle',
iconSize: 32, iconSize: 32,
iconColor: '#AAAAAA', iconColor: '#AAAAAA',
bgColor: '#24F083', bgColor: '#24F083',
} }
], ],
tips: ['无需依赖额外的样式文件','使用tn-fab组件'], tips: ['无需依赖额外的样式文件','使用tn-fab组件'],
sectionList: [ sectionList: [
{ {
name: '参数切换', name: '参数切换',
section: [ section: [
{ {
title: '悬浮按钮位置', title: '悬浮按钮位置',
optional: ['左侧','右侧'], optional: ['左侧','右侧'],
methods: 'positionChange', methods: 'positionChange',
current: 1 current: 1
}, },
{ {
title: '自定义悬浮按钮信息', title: '自定义悬浮按钮信息',
optional: ['默认','自定义'], optional: ['默认','自定义'],
methods: 'customFabChange' methods: 'customFabChange'
}, },
{ {
title: '自定义尺寸', title: '自定义尺寸',
optional: ['默认','自定义'], optional: ['默认','自定义'],
methods: 'sizeChange' methods: 'sizeChange'
}, },
{ {
title: '动画类型', title: '动画类型',
optional: ['向上弹出','圆环弹出'], optional: ['向上弹出','圆环弹出'],
methods: 'animationChange' methods: 'animationChange'
}, },
{ {
title: '遮罩显示', title: '遮罩显示',
optional: ['显示','隐藏'], optional: ['显示','隐藏'],
methods: 'maskChange' methods: 'maskChange'
} }
] ]
} }
] ]
} }
}, },
methods: { methods: {
click(event) { click(event) {
this[event.methods] && this[event.methods](event) this[event.methods] && this[event.methods](event)
}, },
// 切换按钮位置 // 切换按钮位置
positionChange(event) { positionChange(event) {
switch (event.index) { switch (event.index) {
case 0: case 0:
this.left = 40 this.left = 40
this.right = 'auto' this.right = 'auto'
this.bottom = 100 this.bottom = 100
break break
case 1: case 1:
this.left = 'auto' this.left = 'auto'
this.right = 40 this.right = 40
this.bottom = 100 this.bottom = 100
break break
} }
}, },
// 切换悬浮按钮信息 // 切换悬浮按钮信息
customFabChange(event) { customFabChange(event) {
switch (event.index) { switch (event.index) {
case 0: case 0:
this.backgroundColor = '#01BEFF' this.backgroundColor = '#01BEFF'
this.fontColor = '#FFFFFF' this.fontColor = '#FFFFFF'
this.icon = 'open' this.icon = 'open'
break break
case 1: case 1:
this.backgroundColor = 'tn-cool-bg-color-1' this.backgroundColor = 'tn-cool-bg-color-1'
this.fontColor = '#FFFFFF' this.fontColor = '#FFFFFF'
this.icon = 'up' this.icon = 'up'
break break
} }
}, },
// 切换尺寸信息 // 切换尺寸信息
sizeChange(event) { sizeChange(event) {
switch (event.index) { switch (event.index) {
case 0: case 0:
this.width = 88 this.width = 88
this.height = 88 this.height = 88
this.iconSize = 64 this.iconSize = 64
break break
case 1: case 1:
this.width = 64 this.width = 64
this.height = 64 this.height = 64
this.iconSize = 48 this.iconSize = 48
break break
} }
}, },
// 切换遮罩信息 // 切换遮罩信息
maskChange(event) { maskChange(event) {
switch (event.index) { switch (event.index) {
case 0: case 0:
this.showMask = true this.showMask = true
break break
case 1: case 1:
this.showMask = false this.showMask = false
break break
} }
}, },
// 切换动画 // 切换动画
animationChange(event) { animationChange(event) {
switch (event.index) { switch (event.index) {
case 0: case 0:
this.animationType = 'up' this.animationType = 'up'
break break
case 1: case 1:
this.animationType = 'around' this.animationType = 'around'
break break
} }
}, },
// 点击悬浮按钮的内容 // 点击悬浮按钮的内容
clickFabItem(e) { clickFabItem(e) {
this.$t.messageUtils.toast(`点击了第 ${e.index} 个选项`) this.$t.message.toast(`点击了第 ${e.index} 个选项`)
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>
componentsPage/form/form.vue
+515 -515
View File
File diff suppressed because it is too large Load Diff
componentsPage/goods-nav/goods-nav.vue
+107 -103
View File
@@ -1,122 +1,126 @@
<template> <template>
<view class="components-goods-nav tn-safe-area-inset-bottom"> <view class="components-goods-nav tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>商品导航</tn-nav-bar> <tn-nav-bar fixed>商品导航</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础"> <demo-title title="基础" :contentPadding="false">
<tn-goods-nav></tn-goods-nav> <tn-goods-nav></tn-goods-nav>
</demo-title> </demo-title>
<demo-title title="选项设置为头像"> <demo-title title="显示阴影" :contentPadding="false">
<tn-goods-nav :options="avatarOptions"></tn-goods-nav> <tn-goods-nav :shadow="true"></tn-goods-nav>
</demo-title> </demo-title>
<demo-title title="设置角标"> <demo-title title="选项设置为头像" :contentPadding="false">
<tn-goods-nav :options="countOptions"></tn-goods-nav> <tn-goods-nav :options="avatarOptions"></tn-goods-nav>
</demo-title> </demo-title>
<demo-title title="设置边距按钮"> <demo-title title="设置角标" :contentPadding="false">
<tn-goods-nav buttonType="paddingRect"></tn-goods-nav> <tn-goods-nav :options="countOptions"></tn-goods-nav>
</demo-title> </demo-title>
<demo-title title="设置圆角按钮"> <demo-title title="设置边距按钮" :contentPadding="false">
<tn-goods-nav buttonType="round"></tn-goods-nav> <tn-goods-nav buttonType="paddingRect"></tn-goods-nav>
</demo-title> </demo-title>
<demo-title title="不设置选项"> <demo-title title="设置圆角按钮" :contentPadding="false">
<tn-goods-nav :options="[]"></tn-goods-nav> <tn-goods-nav buttonType="round"></tn-goods-nav>
</demo-title> </demo-title>
<demo-title title="自定义颜色"> <demo-title title="不设置选项" :contentPadding="false">
<tn-goods-nav :options="customOptions" buttonType="round" :buttonGroups="customButtonGroups"></tn-goods-nav> <tn-goods-nav :options="[]"></tn-goods-nav>
</demo-title> </demo-title>
<demo-title title="固定在底部"> <demo-title title="自定义颜色" :contentPadding="false">
<tn-goods-nav :fixed="true" :safeAreaInsetBottom="true" @optionClick="onOptionClick" @buttonClick="onButtonClick"></tn-goods-nav> <tn-goods-nav :options="customOptions" buttonType="round" :buttonGroups="customButtonGroups"></tn-goods-nav>
</demo-title> </demo-title>
<view style="padding-bottom: 88rpx;"></view> <demo-title title="固定在底部" :contentPadding="false">
<tn-goods-nav :fixed="true" :safeAreaInsetBottom="true" @optionClick="onOptionClick" @buttonClick="onButtonClick"></tn-goods-nav>
<view class="tn-padding-bottom-lg"></view> </demo-title>
</view>
<view style="padding-bottom: 88rpx;"></view>
<view class="tn-padding-bottom-lg"></view>
</view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'ComponentsGoodsNav', name: 'ComponentsGoodsNav',
components: { demoTitle }, components: { demoTitle },
data() { data() {
return { return {
avatarOptions: [{ avatarOptions: [{
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg' avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'
},{ },{
icon: 'service', icon: 'service',
text: '客服' text: '客服'
},{ },{
icon: 'star', icon: 'star',
text: '收藏' text: '收藏'
}], }],
countOptions: [{ countOptions: [{
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg', avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
count: 10 count: 10
},{ },{
icon: 'service', icon: 'service',
text: '客服', text: '客服',
count: 100 count: 100
},{ },{
icon: 'star', icon: 'star',
text: '收藏' text: '收藏'
}], }],
customOptions: [{ customOptions: [{
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg', avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
count: 10, count: 10,
countBackgroundColor: '#E83A30' countBackgroundColor: '#E83A30'
},{ },{
icon: 'service', icon: 'service',
text: '客服', text: '客服',
count: 100, count: 100,
countBackgroundColor: 'transparent', countBackgroundColor: 'transparent',
countFontColor: '#E83A30' countFontColor: '#E83A30'
},{ },{
icon: 'star', icon: 'star',
text: '收藏', text: '收藏',
iconColor: '#838383', iconColor: '#838383',
fontColor: '#080808' fontColor: '#080808'
}], }],
customButtonGroups: [{ customButtonGroups: [{
text: '加入购物车', text: '加入购物车',
backgroundColor: 'tn-cool-bg-color-8', backgroundColor: 'tn-cool-bg-color-8',
color: '#FFFFFF' color: '#FFFFFF'
},{ },{
text: '结算', text: '结算',
backgroundColor: 'tn-cool-bg-color-8--reverse', backgroundColor: 'tn-cool-bg-color-8--reverse',
color: '#FFFFFF' color: '#FFFFFF'
}] }]
} }
}, },
methods: { methods: {
// 选项点击事件 // 选项点击事件
onOptionClick(e) { onOptionClick(e) {
this.$t.messageUtils.toast(`点击了第${e.index}个选项`) this.$t.message.toast(`点击了第${e.index}个选项`)
}, },
// 按钮点击事件 // 按钮点击事件
onButtonClick(e) { onButtonClick(e) {
this.$t.messageUtils.toast(`点击了第${e.index}个按钮`) this.$t.message.toast(`点击了第${e.index}个按钮`)
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-goods-nav { .components-goods-nav {
background-color: $tn-bg-gray-color; background-color: $tn-bg-gray-color;
min-height: 100vh; min-height: 100vh;
} }
</style> </style>
componentsPage/image-upload/image-upload.vue
+272 -272
View File
@@ -1,273 +1,273 @@
<template> <template>
<view class="components-image_upload"> <view class="components-image_upload">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>图片上传</tn-nav-bar> <tn-nav-bar fixed>图片上传</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" :fullWindowsScroll="fullWindowsScroll" @click="click"> <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" :fullWindowsScroll="fullWindowsScroll" @click="click">
<tn-image-upload <tn-image-upload
ref="imageUpload" ref="imageUpload"
:action="action" :action="action"
:formData="formData" :formData="formData"
:fileList="fileList" :fileList="fileList"
:disabled="disabled" :disabled="disabled"
:autoUpload="autoUpload" :autoUpload="autoUpload"
:maxCount="maxCount" :maxCount="maxCount"
:showUploadList="showUploadList" :showUploadList="showUploadList"
:showProgress="showProgress" :showProgress="showProgress"
:deleteable="deleteable" :deleteable="deleteable"
:customBtn="customBtn" :customBtn="customBtn"
:beforeUpload="beforeUpload" :beforeUpload="beforeUpload"
@on-list-change="listChange" @on-list-change="listChange"
@on-oversize="oversize" @on-oversize="oversize"
@on-exceed="exceed" @on-exceed="exceed"
@on-choose-complete="chooseComplete" @on-choose-complete="chooseComplete"
@on-choose-fail="chooseFail" @on-choose-fail="chooseFail"
@on-uploaded="uploaded" @on-uploaded="uploaded"
@on-success="uploadSuccess" @on-success="uploadSuccess"
@on-change="uploadChange" @on-change="uploadChange"
@on-progress="uploadProgress" @on-progress="uploadProgress"
@on-error="uploadError" @on-error="uploadError"
@on-remove="fileRemove" @on-remove="fileRemove"
> >
<view v-if="!showUploadList" slot="file" style="width: 100%;"> <view v-if="!showUploadList" slot="file" style="width: 100%;">
<view v-for="(item,index) in lists" :key="index" class="tn-image-upload__item"> <view v-for="(item,index) in lists" :key="index" class="tn-image-upload__item">
<image <image
class="tn-image-upload__item__image" class="tn-image-upload__item__image"
:src="item.url || item.path" :src="item.url || item.path"
mode="aspectFill" mode="aspectFill"
></image> ></image>
</view> </view>
</view> </view>
<!-- <template v-if="!showUploadList" v-slot:file="data"> <!-- <template v-if="!showUploadList" v-slot:file="data">
<view v-for="(item,index) in data.file" :key="index" class="tn-image-upload__item"> <view v-for="(item,index) in data.file" :key="index" class="tn-image-upload__item">
<image <image
class="tn-image-upload__item__image" class="tn-image-upload__item__image"
:src="item.url || item.path" :src="item.url || item.path"
mode="aspectFill" mode="aspectFill"
></image> ></image>
</view> </view>
</template> --> </template> -->
<view v-if="customBtn" slot="addBtn" class="tn-image-upload__custom-btn" hover-class="tn-hover-class" hover-stay-time="150"> <view v-if="customBtn" slot="addBtn" class="tn-image-upload__custom-btn" hover-class="tn-hover-class" hover-stay-time="150">
<view>选择图片</view> <view>选择图片</view>
</view> </view>
</tn-image-upload> </tn-image-upload>
<view class="tn-flex tn-margin-top-xs tn-flex-row-center"> <view class="tn-flex tn-margin-top-xs tn-flex-row-center">
<tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @tap="upload">上传</tn-button> <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @tap="upload">上传</tn-button>
<tn-button fontColor="tn-color-white" backgroundColor="tn-bg-red" margin="0rpx 0rpx 0rpx 20rpx" @tap="clear">清空列表</tn-button> <tn-button fontColor="tn-color-white" backgroundColor="tn-bg-red" margin="0rpx 0rpx 0rpx 20rpx" @tap="clear">清空列表</tn-button>
</view> </view>
</dynamic-demo-template> </dynamic-demo-template>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue' import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default { export default {
components: {dynamicDemoTemplate}, components: {dynamicDemoTemplate},
data() { data() {
return { return {
action: 'https://www.hualigs.cn/api/upload', action: 'https://www.hualigs.cn/api/upload',
// action: '', // action: '',
formData: { formData: {
apiType: 'this,ali', apiType: 'this,ali',
token: 'dffc1e06e636cff0fdf7d877b6ae6a2e', token: 'dffc1e06e636cff0fdf7d877b6ae6a2e',
image: null image: null
}, },
// 预上传列表 // 预上传列表
// [{ // [{
// url: 'http://127.0.0.1:8888/upload/tuniao.jpg' // url: 'http://127.0.0.1:8888/upload/tuniao.jpg'
// }] // }]
fileList: [], fileList: [],
showUploadList: true, showUploadList: true,
customBtn: false, customBtn: false,
autoUpload: true, autoUpload: true,
showProgress: true, showProgress: true,
deleteable: true, deleteable: true,
customStyle: false, customStyle: false,
maxCount: 9, maxCount: 9,
disabled: false, disabled: false,
lists: [], lists: [],
tips: ['无需依赖额外的样式文件','使用tn-image-upload组件'], tips: ['无需依赖额外的样式文件','使用tn-image-upload组件'],
sectionList: [ sectionList: [
{ {
name: '参数切换', name: '参数切换',
section: [ section: [
{ {
title: '上传方式', title: '上传方式',
optional: ['自动上传','手动上传'], optional: ['自动上传','手动上传'],
methods: 'autoUploadChange' methods: 'autoUploadChange'
}, },
{ {
title: '进度显示', title: '进度显示',
optional: ['是','否'], optional: ['是','否'],
methods: 'showProgressChange' methods: 'showProgressChange'
}, },
{ {
title: '删除按钮显示', title: '删除按钮显示',
optional: ['是','否'], optional: ['是','否'],
methods: 'deleteableChange' methods: 'deleteableChange'
}, },
{ {
title: '最大上传数', title: '最大上传数',
optional: ['2','6','9'], optional: ['2','6','9'],
methods: 'maxCountChange', methods: 'maxCountChange',
current: 2 current: 2
}, },
{ {
title: '自定义列表和上传按钮样式', title: '自定义列表和上传按钮样式',
optional: ['是','否'], optional: ['是','否'],
methods: 'customUploadListChange', methods: 'customUploadListChange',
current: 1 current: 1
}, },
{ {
title: '是否禁用', title: '是否禁用',
optional: ['是','否'], optional: ['是','否'],
methods: 'disabledChange', methods: 'disabledChange',
current: 1 current: 1
} }
] ]
} }
], ],
fullWindowsScroll: false fullWindowsScroll: false
} }
}, },
methods: { methods: {
click(event) { click(event) {
this[event.methods] && this[event.methods](event) this[event.methods] && this[event.methods](event)
}, },
// 切换上传方式 // 切换上传方式
autoUploadChange(event) { autoUploadChange(event) {
this.autoUpload = event.index === 0 ? true : false this.autoUpload = event.index === 0 ? true : false
}, },
// 切换进度显示 // 切换进度显示
showProgressChange(event) { showProgressChange(event) {
this.showProgress = event.index === 0 ? true : false this.showProgress = event.index === 0 ? true : false
}, },
// 切换删除按钮显示 // 切换删除按钮显示
deleteableChange(event) { deleteableChange(event) {
this.deleteable = event.index === 0 ? true : false this.deleteable = event.index === 0 ? true : false
}, },
// 切换允许上传数 // 切换允许上传数
maxCountChange(event) { maxCountChange(event) {
this.maxCount = Number(event.name) this.maxCount = Number(event.name)
}, },
// 切换自定义列表样式 // 切换自定义列表样式
customUploadListChange(event) { customUploadListChange(event) {
if (event.index === 0) { if (event.index === 0) {
this.customStyle = true this.customStyle = true
this.showUploadList = false this.showUploadList = false
this.customBtn = true this.customBtn = true
} else if (event.index === 1) { } else if (event.index === 1) {
this.customStyle = false this.customStyle = false
this.showUploadList = true this.showUploadList = true
this.customBtn = false this.customBtn = false
} }
this.$refs.demoTemplate.updateSectionScrollView() this.$refs.demoTemplate.updateSectionScrollView()
}, },
// 切换禁用 // 切换禁用
disabledChange(event) { disabledChange(event) {
this.disabled = event.index === 0 ? true : false this.disabled = event.index === 0 ? true : false
this.$refs.demoTemplate.updateSectionScrollView() this.$refs.demoTemplate.updateSectionScrollView()
}, },
// 手动上传文件 // 手动上传文件
upload() { upload() {
this.$refs.imageUpload.upload() this.$refs.imageUpload.upload()
}, },
// 手动清空列表 // 手动清空列表
clear() { clear() {
this.$refs.imageUpload.clear() this.$refs.imageUpload.clear()
}, },
// 文件上传前执行 // 文件上传前执行
beforeUpload(index, lists) { beforeUpload(index, lists) {
console.log('文件上传前执行', lists, index); console.log('文件上传前执行', lists, index);
console.log(this.formData); console.log(this.formData);
this.formData.image = lists[index].file this.formData.image = lists[index].file
return true return true
}, },
listChange(lists, index) { listChange(lists, index) {
console.log('上传文件列表发生改变', lists, index); console.log('上传文件列表发生改变', lists, index);
this.lists.splice(0, this.lists.length) this.lists.splice(0, this.lists.length)
this.$nextTick(() => { this.$nextTick(() => {
this.lists = this.$t.deepClone(lists) this.lists = this.$t.deepClone(lists)
if (this.customStyle && lists.length > 4) { if (this.customStyle && lists.length > 4) {
this.fullWindowsScroll = true this.fullWindowsScroll = true
} else { } else {
this.$refs.demoTemplate.updateSectionScrollView() this.$refs.demoTemplate.updateSectionScrollView()
} }
}) })
}, },
oversize(val, lists, index) { oversize(val, lists, index) {
console.log('上传的文件超过大小', val, lists, index); console.log('上传的文件超过大小', val, lists, index);
}, },
exceed(val, lists, index) { exceed(val, lists, index) {
console.log('上传的文件超过允许数量', val, lists, index); console.log('上传的文件超过允许数量', val, lists, index);
}, },
chooseComplete(lists, index) { chooseComplete(lists, index) {
console.log('文件选择成功', lists, index); console.log('文件选择成功', lists, index);
}, },
chooseFail(err) { chooseFail(err) {
console.log('文件选择失败', err); console.log('文件选择失败', err);
}, },
uploaded(lists, index) { uploaded(lists, index) {
console.log('全部上传文件处理完成', lists, index); console.log('全部上传文件处理完成', lists, index);
}, },
uploadSuccess(data, currentIndex, lists, index) { uploadSuccess(data, currentIndex, lists, index) {
console.log('文件上传成功', data, currentIndex, lists, index); console.log('文件上传成功', data, currentIndex, lists, index);
}, },
uploadChange(res, currentIndex, lists, index) { uploadChange(res, currentIndex, lists, index) {
console.log('文件上传信息有变', res, currentIndex, lists, index); console.log('文件上传信息有变', res, currentIndex, lists, index);
}, },
uploadProgress(res, currentIndex, lists, index) { uploadProgress(res, currentIndex, lists, index) {
console.log('文件上传进度', res, currentIndex, lists, index); console.log('文件上传进度', res, currentIndex, lists, index);
}, },
uploadError(err, currentIndex, lists, index) { uploadError(err, currentIndex, lists, index) {
console.log('文件上传失败', err, currentIndex, lists, index); console.log('文件上传失败', err, currentIndex, lists, index);
}, },
fileRemove(currentIndex, lists, index) { fileRemove(currentIndex, lists, index) {
console.log('文件移除成功', currentIndex, lists, index); console.log('文件移除成功', currentIndex, lists, index);
}, },
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tn-image-upload__item { .tn-image-upload__item {
width: 100%; width: 100%;
height: 180rpx; height: 180rpx;
border-radius: 30rpx; border-radius: 30rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
&__image { &__image {
width: 100%; width: 100%;
height: 180rpx; height: 180rpx;
border-radius: 30rpx; border-radius: 30rpx;
} }
} }
.tn-image-upload__custom-btn { .tn-image-upload__custom-btn {
background-color: $tn-font-holder-color; background-color: $tn-font-holder-color;
width: 100%; width: 100%;
height: 180rpx; height: 180rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 30rpx; border-radius: 30rpx;
} }
</style> </style>
componentsPage/index-list/avatar/index-list.vue
+69 -69
View File
@@ -1,70 +1,70 @@
<template> <template>
<view class="components-index-list"> <view class="components-index-list">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>IndexList索引列表</tn-nav-bar> <tn-nav-bar fixed>IndexList索引列表</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<tn-index-list :scrollTop="scrollTop" :indexList="indexList" :customBarHeight="vuex_custom_bar_height" :stickyTop="vuex_custom_bar_height"> <tn-index-list :scrollTop="scrollTop" :indexList="indexList" :customBarHeight="vuex_custom_bar_height" :stickyTop="vuex_custom_bar_height">
<view v-for="(item, index) in list" :key="index"> <view v-for="(item, index) in list" :key="index">
<tn-index-anchor :index="item.letter"></tn-index-anchor> <tn-index-anchor :index="item.letter"></tn-index-anchor>
<view v-for="(data_item,data_index) in item.data" :key="data_index" class="index-list-item tn-border-solid-bottom"> <view v-for="(data_item,data_index) in item.data" :key="data_index" class="index-list-item tn-border-solid-bottom">
<image class="index-list-item__image" src="/static/favicon.ico"></image> <image class="index-list-item__image" src="/static/favicon.ico"></image>
<view class="index-list-item__name">{{ data_item.name }}</view> <view class="index-list-item__name">{{ data_item.name }}</view>
</view> </view>
</view> </view>
</tn-index-list> </tn-index-list>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import indexList from '../../mock/index.list.js' import indexList from '../../mock/index.list.js'
const letterArr = indexList.list.map(val => { const letterArr = indexList.list.map(val => {
return val.letter return val.letter
}) })
export default { export default {
name: 'componentsIndexListAvatar', name: 'componentsIndexListAvatar',
data() { data() {
return { return {
// 滚动的距离 // 滚动的距离
scrollTop: 0, scrollTop: 0,
// 索引列表 // 索引列表
indexList: letterArr, indexList: letterArr,
list: indexList.list list: indexList.list
} }
}, },
onPageScroll(e) { onPageScroll(e) {
this.scrollTop = e.scrollTop this.scrollTop = e.scrollTop
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.index-list-item { .index-list-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
overflow: hidden; overflow: hidden;
color: $tn-font-color; color: $tn-font-color;
font-size: 28rpx; font-size: 28rpx;
&__image { &__image {
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
margin: 8rpx 8rpx; margin: 8rpx 8rpx;
margin-right: 10rpx; margin-right: 10rpx;
} }
} }
</style> </style>
componentsPage/index-list/base/index-list.vue
+62 -62
View File
@@ -1,63 +1,63 @@
<template> <template>
<view class="components-index-list"> <view class="components-index-list">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>IndexList索引列表</tn-nav-bar> <tn-nav-bar fixed>IndexList索引列表</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<tn-index-list :scrollTop="scrollTop" :indexList="indexList" :customBarHeight="vuex_custom_bar_height" :stickyTop="vuex_custom_bar_height"> <tn-index-list :scrollTop="scrollTop" :indexList="indexList" :customBarHeight="vuex_custom_bar_height" :stickyTop="vuex_custom_bar_height">
<view v-for="(item, index) in list" :key="index"> <view v-for="(item, index) in list" :key="index">
<tn-index-anchor :index="item.letter"></tn-index-anchor> <tn-index-anchor :index="item.letter"></tn-index-anchor>
<view v-for="(data_item,data_index) in item.data" :key="data_index" class="index-list-item tn-border-solid-bottom"> <view v-for="(data_item,data_index) in item.data" :key="data_index" class="index-list-item tn-border-solid-bottom">
{{ data_item.name }} {{ data_item.name }}
</view> </view>
</view> </view>
</tn-index-list> </tn-index-list>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import indexList from '../../mock/index.list.js' import indexList from '../../mock/index.list.js'
const letterArr = indexList.list.map(val => { const letterArr = indexList.list.map(val => {
return val.letter return val.letter
}) })
export default { export default {
name: 'componentsIndexListBase', name: 'componentsIndexListBase',
data() { data() {
return { return {
// 滚动的距离 // 滚动的距离
scrollTop: 0, scrollTop: 0,
// 索引列表 // 索引列表
indexList: letterArr, indexList: letterArr,
list: indexList.list list: indexList.list
} }
}, },
onPageScroll(e) { onPageScroll(e) {
this.scrollTop = e.scrollTop this.scrollTop = e.scrollTop
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.index-list-item { .index-list-item {
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 20rpx 24rpx; padding: 20rpx 24rpx;
overflow: hidden; overflow: hidden;
color: $tn-font-color; color: $tn-font-color;
font-size: 28rpx; font-size: 28rpx;
line-height: 48rpx; line-height: 48rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
</style> </style>
componentsPage/index-list/index-list.vue
+39 -39
View File
@@ -1,40 +1,40 @@
<template> <template>
<view class="components-index-list"> <view class="components-index-list">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>IndexList索引列表</tn-nav-bar> <tn-nav-bar fixed>IndexList索引列表</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<multiple-options-demo <multiple-options-demo
:list="optionsList" :list="optionsList"
></multiple-options-demo> ></multiple-options-demo>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import multipleOptionsDemo from '@/libs/components/multiple-options-demo' import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
export default { export default {
name: 'componentsIndexList', name: 'componentsIndexList',
components: { multipleOptionsDemo }, components: { multipleOptionsDemo },
data() { data() {
return { return {
// 选项列表数据 // 选项列表数据
optionsList: [ optionsList: [
{ title: '普通列表', desc: '传入列表数据即可使用', url: '/componentsPage/index-list/base/index-list' }, { title: '普通列表', desc: '传入列表数据即可使用', url: '/componentsPage/index-list/base/index-list' },
{ title: '带头像列表', desc: '通过自定义列表来实现', url: '/componentsPage/index-list/avatar/index-list' } { title: '带头像列表', desc: '通过自定义列表来实现', url: '/componentsPage/index-list/avatar/index-list' }
] ]
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>
componentsPage/input/input.vue
+212 -212
View File
@@ -1,231 +1,231 @@
<template> <template>
<view class="components-input tn-safe-area-inset-bottom"> <view class="components-input tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Input输入框</tn-nav-bar> <tn-nav-bar fixed>Input输入框</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基本使用" :contentPadding="false"> <demo-title title="基本使用" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center"> <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">文本</view> <view class="content__title">文本</view>
<view class="content__data tn-flex-1"> <view class="content__data tn-flex-1">
<tn-input v-model="inputValue" type="text" placeholder="请输入文本"></tn-input> <tn-input v-model="inputValue" type="text" placeholder="请输入文本"></tn-input>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="禁止输入" :contentPadding="false"> <demo-title title="禁止输入" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center"> <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">文本</view> <view class="content__title">文本</view>
<view class="content__data tn-flex-1"> <view class="content__data tn-flex-1">
<tn-input type="text" placeholder="请输入文本" disabled></tn-input> <tn-input type="text" placeholder="请输入文本" disabled></tn-input>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="对齐方式" :contentPadding="false"> <demo-title title="对齐方式" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom"> <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
<view class="content__title">居中对齐</view> <view class="content__title">居中对齐</view>
<view class="content__data tn-flex-1"> <view class="content__data tn-flex-1">
<tn-input type="text" placeholder="请输入文本" inputAlign="center"></tn-input> <tn-input type="text" placeholder="请输入文本" inputAlign="center"></tn-input>
</view> </view>
</view> </view>
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center"> <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">右对齐</view> <view class="content__title">右对齐</view>
<view class="content__data tn-flex-1"> <view class="content__data tn-flex-1">
<tn-input type="text" placeholder="请输入文本" inputAlign="right"></tn-input> <tn-input type="text" placeholder="请输入文本" inputAlign="right"></tn-input>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="边框" :contentPadding="false"> <demo-title title="边框" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center"> <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">文本</view> <view class="content__title">文本</view>
<view class="content__data tn-flex-1"> <view class="content__data tn-flex-1">
<tn-input type="text" placeholder="请输入文本" border></tn-input> <tn-input type="text" placeholder="请输入文本" border></tn-input>
</view> </view>
</view> </view>
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom"> <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
<view class="content__title">文本</view> <view class="content__title">文本</view>
<view class="content__data tn-flex-1"> <view class="content__data tn-flex-1">
<tn-input type="text" placeholder="请输入文本" border borderColor="#01BEFF"></tn-input> <tn-input type="text" placeholder="请输入文本" border borderColor="#01BEFF"></tn-input>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="右边显示图标" :contentPadding="false"> <demo-title title="右边显示图标" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center"> <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">文本</view> <view class="content__title">文本</view>
<view class="content__data tn-flex-1"> <view class="content__data tn-flex-1">
<tn-input type="text" placeholder="请输入文本" showRightIcon rightIcon="code"></tn-input> <tn-input type="text" placeholder="请输入文本" showRightIcon rightIcon="code"></tn-input>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="文本域" :contentPadding="false"> <demo-title title="文本域" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center"> <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">文本域</view> <view class="content__title">文本域</view>
<view class="content__data tn-flex-1"> <view class="content__data tn-flex-1">
<tn-input type="textarea" placeholder="请输入文本"></tn-input> <tn-input type="textarea" placeholder="请输入文本"></tn-input>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="内置类型" :contentPadding="false"> <demo-title title="内置类型" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom"> <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
<view class="content__title">整数</view> <view class="content__title">整数</view>
<view class="content__data tn-flex-1"> <view class="content__data tn-flex-1">
<tn-input type="number" placeholder="请输入整数"></tn-input> <tn-input type="number" placeholder="请输入整数"></tn-input>
</view> </view>
</view> </view>
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom"> <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
<view class="content__title">小数</view> <view class="content__title">小数</view>
<view class="content__data tn-flex-1"> <view class="content__data tn-flex-1">
<tn-input type="digit" placeholder="请输入小数"></tn-input> <tn-input type="digit" placeholder="请输入小数"></tn-input>
</view> </view>
</view> </view>
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom"> <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
<view class="content__title">身份证</view> <view class="content__title">身份证</view>
<view class="content__data tn-flex-1"> <view class="content__data tn-flex-1">
<tn-input type="idcard" placeholder="请输入身份证"></tn-input> <tn-input type="idcard" placeholder="请输入身份证"></tn-input>
</view> </view>
</view> </view>
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center"> <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">电话号码</view> <view class="content__title">电话号码</view>
<view class="content__data tn-flex-1"> <view class="content__data tn-flex-1">
<tn-input type="tel" placeholder="请输入电话号码"></tn-input> <tn-input type="tel" placeholder="请输入电话号码"></tn-input>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="密码输入框" :contentPadding="false"> <demo-title title="密码输入框" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom"> <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
<view class="content__title">密码</view> <view class="content__title">密码</view>
<view class="content__data tn-flex-1"> <view class="content__data tn-flex-1">
<tn-input type="password" placeholder="请输入密码"></tn-input> <tn-input type="password" placeholder="请输入密码"></tn-input>
</view> </view>
</view> </view>
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center"> <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">密码</view> <view class="content__title">密码</view>
<view class="content__data tn-flex-1"> <view class="content__data tn-flex-1">
<tn-input type="password" placeholder="请输入密码" :passwordIcon="false"></tn-input> <tn-input type="password" placeholder="请输入密码" :passwordIcon="false"></tn-input>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="弹出选择" :contentPadding="false"> <demo-title title="弹出选择" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center"> <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">业务</view> <view class="content__title">业务</view>
<view class="content__data tn-flex-1"> <view class="content__data tn-flex-1">
<tn-input type="select" placeholder="请选择业务类型" :selectOpen="selectShow" @click="selectShow = true"></tn-input> <tn-input type="select" placeholder="请选择业务类型" :selectOpen="selectShow" @click="selectShow = true"></tn-input>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="配合formItem使用" :contentPadding="false"> <demo-title title="配合formItem使用" :contentPadding="false">
<view class="content tn-padding-left tn-padding-right"> <view class="content tn-padding-left tn-padding-right">
<tn-form-item label="姓名"> <tn-form-item label="姓名">
<tn-input type="text" placeholder="请输入姓名"></tn-input> <tn-input type="text" placeholder="请输入姓名"></tn-input>
</tn-form-item> </tn-form-item>
</view> </view>
<view class="content tn-padding-left tn-padding-right"> <view class="content tn-padding-left tn-padding-right">
<tn-form-item label="姓名" labelPosition="top" required> <tn-form-item label="姓名" labelPosition="top" required>
<tn-input type="text" placeholder="请输入姓名"></tn-input> <tn-input type="text" placeholder="请输入姓名"></tn-input>
</tn-form-item> </tn-form-item>
</view> </view>
<view class="content tn-padding-left tn-padding-right"> <view class="content tn-padding-left tn-padding-right">
<tn-form-item label="联系电话" :labelWidth="200"> <tn-form-item label="联系电话" :labelWidth="200">
<tn-input type="tel" placeholder="请输入电话号码"></tn-input> <tn-input type="tel" placeholder="请输入电话号码"></tn-input>
</tn-form-item> </tn-form-item>
</view> </view>
<view class="content tn-padding-left tn-padding-right"> <view class="content tn-padding-left tn-padding-right">
<tn-form-item label="联系电话" :labelWidth="200" labelAlign="center"> <tn-form-item label="联系电话" :labelWidth="200" labelAlign="center">
<tn-input type="tel" placeholder="请输入电话号码"></tn-input> <tn-input type="tel" placeholder="请输入电话号码"></tn-input>
</tn-form-item> </tn-form-item>
</view> </view>
<view class="content tn-padding-left tn-padding-right"> <view class="content tn-padding-left tn-padding-right">
<tn-form-item label="联系电话" :labelWidth="200" labelAlign="right"> <tn-form-item label="联系电话" :labelWidth="200" labelAlign="right">
<tn-input type="tel" placeholder="请输入电话号码"></tn-input> <tn-input type="tel" placeholder="请输入电话号码"></tn-input>
</tn-form-item> </tn-form-item>
</view> </view>
<view class="content tn-padding-left tn-padding-right"> <view class="content tn-padding-left tn-padding-right">
<tn-form-item label="验证码" :labelWidth="200"> <tn-form-item label="验证码" :labelWidth="200">
<tn-input type="text" placeholder="请输入验证码"></tn-input> <tn-input type="text" placeholder="请输入验证码"></tn-input>
<tn-button slot="right" backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm">获取验证码</tn-button> <tn-button slot="right" backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm">获取验证码</tn-button>
</tn-form-item> </tn-form-item>
</view> </view>
<view class="content tn-padding-left tn-padding-right"> <view class="content tn-padding-left tn-padding-right">
<tn-form-item label="身份证" :labelWidth="200" leftIcon="identity"> <tn-form-item label="身份证" :labelWidth="200" leftIcon="identity">
<tn-input type="idcard" placeholder="请输入身份证号码"></tn-input> <tn-input type="idcard" placeholder="请输入身份证号码"></tn-input>
</tn-form-item> </tn-form-item>
</view> </view>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
<!-- 业务类型select --> <!-- 业务类型select -->
<tn-select <tn-select
v-model="selectShow" v-model="selectShow"
mode="single" mode="single"
:list="selectList" :list="selectList"
@confirm="businessSelectConfirm" @confirm="businessSelectConfirm"
></tn-select> ></tn-select>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'ComponentsInput', name: 'ComponentsInput',
components: { demoTitle }, components: { demoTitle },
data() { data() {
return { return {
inputValue: '', inputValue: '',
selectShow: false, selectShow: false,
selectList: [ selectList: [
{ {
label: '免费', label: '免费',
value: 1101 value: 1101
}, },
{ {
label: '会员', label: '会员',
value: 1102 value: 1102
}, },
{ {
label: '全新开发', label: '全新开发',
value: 1103 value: 1103
} }
] ]
} }
}, },
methods: { methods: {
businessSelectConfirm() { businessSelectConfirm() {
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-input { .components-input {
background-color: $tn-bg-gray-color; background-color: $tn-bg-gray-color;
min-height: 100vh; min-height: 100vh;
.content { .content {
background-color: #FFFFFF; background-color: #FFFFFF;
&__title { &__title {
padding: 30rpx; padding: 30rpx;
} }
&__data { &__data {
margin: 10rpx 0; margin: 10rpx 0;
margin-right: 30rpx; margin-right: 30rpx;
} }
} }
} }
</style> </style>
componentsPage/keyboard/keyboard.vue
+324 -324
View File
@@ -1,324 +1,324 @@
<template> <template>
<view class="components-keyboard"> <view class="components-keyboard">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>keyboard键盘</tn-nav-bar> <tn-nav-bar fixed>keyboard键盘</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click"> <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
<view v-if="mode === 'number' || mode === 'card'" class="number-value"> <view v-if="mode === 'number' || mode === 'card'" class="number-value">
<tn-input v-model="inputValue" type="text" :disabled="true" :border="true" placeholder="键盘输入的内容" @click="showKeyboard"></tn-input> <tn-input v-model="inputValue" type="text" :disabled="true" :border="true" placeholder="键盘输入的内容" @click="showKeyboard"></tn-input>
<tn-button class="clear-btn" backgroundColor="tn-bg-gray" fontColor="white" width="120rpx" height="70rpx" @click="clearInputValue">清空</tn-button> <tn-button class="clear-btn" backgroundColor="tn-bg-gray" fontColor="white" width="120rpx" height="70rpx" @click="clearInputValue">清空</tn-button>
</view> </view>
<view v-else class="car-value"> <view v-else class="car-value">
<block v-for="(item, index) in 8" :key="index"> <block v-for="(item, index) in 8" :key="index">
<view <view
class="car-input" class="car-input"
:class="{'new-energy': index === 7 && !licensePlateValue[index]}" :class="{'new-energy': index === 7 && !licensePlateValue[index]}"
@tap="chooseLicensePlateNumber(index)" @tap="chooseLicensePlateNumber(index)"
> >
<block v-if="index === 7 && !licensePlateValue[index]"> <block v-if="index === 7 && !licensePlateValue[index]">
<view class="new-energy-car"> <view class="new-energy-car">
<view class="icon tn-icon-add"></view> <view class="icon tn-icon-add"></view>
<view class="text">新能源</view> <view class="text">新能源</view>
</view> </view>
</block> </block>
<block v-else> <block v-else>
{{ licensePlateValue[index] || '' }} {{ licensePlateValue[index] || '' }}
</block> </block>
</view> </view>
<view class="car-point" v-if="index === 1"> <view class="car-point" v-if="index === 1">
<view class="point"></view> <view class="point"></view>
</view> </view>
</block> </block>
</view> </view>
</dynamic-demo-template> </dynamic-demo-template>
</view> </view>
<!-- 键盘 --> <!-- 键盘 -->
<tn-keyboard <tn-keyboard
v-model="value" v-model="value"
:mode="mode" :mode="mode"
:dotEnabled="dotEnabled" :dotEnabled="dotEnabled"
:randomEnabled="randomEnabled" :randomEnabled="randomEnabled"
:switchEnMode="switchEnMode" :switchEnMode="switchEnMode"
:tooltip="tooltip" :tooltip="tooltip"
:mask="mask" :mask="mask"
@change="onChange" @change="onChange"
@cancel="onCancel" @cancel="onCancel"
@confirm="onConfirm" @confirm="onConfirm"
@backspace="onBackspace" @backspace="onBackspace"
></tn-keyboard> ></tn-keyboard>
</view> </view>
</template> </template>
<script> <script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue' import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default { export default {
name: 'componentsKeyboard', name: 'componentsKeyboard',
components: {dynamicDemoTemplate}, components: {dynamicDemoTemplate},
data() { data() {
return { return {
value: false, value: false,
mode: 'number', mode: 'number',
dotEnabled: true, dotEnabled: true,
randomEnabled: false, randomEnabled: false,
switchEnMode: false, switchEnMode: false,
tooltip: true, tooltip: true,
mask: true, mask: true,
// 输入的值 // 输入的值
inputValue: '', inputValue: '',
// 输入的车牌 // 输入的车牌
licensePlateValue: ['','','','','','','',''], licensePlateValue: ['','','','','','','',''],
// 当前选择输入的车牌号码位置 // 当前选择输入的车牌号码位置
currentLicensePlateIndex: 0, currentLicensePlateIndex: 0,
tips: ['无需依赖额外的样式文件','使用tn-keyboard组件'], tips: ['无需依赖额外的样式文件','使用tn-keyboard组件'],
sectionList: [ sectionList: [
{ {
name: '参数切换', name: '参数切换',
section: [ section: [
{ {
title: '模式', title: '模式',
optional: ['数字','身份证','车牌'], optional: ['数字','身份证','车牌'],
methods: 'modeChange' methods: 'modeChange'
}, },
{ {
title: '显示点', title: '显示点',
optional: ['显示','隐藏'], optional: ['显示','隐藏'],
methods: 'dotEnabledChange' methods: 'dotEnabledChange'
}, },
{ {
title: '打乱顺序', title: '打乱顺序',
optional: ['是','否'], optional: ['是','否'],
methods: 'randomEnabledChange', methods: 'randomEnabledChange',
current: 1 current: 1
}, },
{ {
title: '显示顶部工具栏', title: '显示顶部工具栏',
optional: ['显示','隐藏'], optional: ['显示','隐藏'],
methods: 'tooltipChange' methods: 'tooltipChange'
}, },
{ {
title: '遮罩显示', title: '遮罩显示',
optional: ['是','否'], optional: ['是','否'],
methods: 'maskChange' methods: 'maskChange'
} }
] ]
} }
] ]
} }
}, },
watch: { watch: {
mode(value) { mode(value) {
switch (value) { switch (value) {
case 'number': case 'number':
this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 0) this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 0)
break break
case 'card': case 'card':
this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 1) this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 1)
break break
case 'car': case 'car':
this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 2) this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 2)
break break
} }
}, },
currentLicensePlateIndex(value) { currentLicensePlateIndex(value) {
if (value === 0) { if (value === 0) {
this.switchEnMode = false this.switchEnMode = false
} else { } else {
this.switchEnMode = true this.switchEnMode = true
} }
} }
}, },
methods: { methods: {
click(event) { click(event) {
this[event.methods] && this[event.methods](event) this[event.methods] && this[event.methods](event)
}, },
// 弹出键盘 // 弹出键盘
showKeyboard() { showKeyboard() {
this.value = true this.value = true
}, },
// 切换模式 // 切换模式
modeChange(event) { modeChange(event) {
switch (event.index) { switch (event.index) {
case 0: case 0:
this.mode = 'number' this.mode = 'number'
this.dotEnabled = true this.dotEnabled = true
this.value = true this.value = true
this.$refs.demoTemplate.updateSectionBtnsState(1, true) this.$refs.demoTemplate.updateSectionBtnsState(1, true)
break break
case 1: case 1:
this.mode = 'card' this.mode = 'card'
this.value = true this.value = true
this.$refs.demoTemplate.updateSectionBtnsState(1, false) this.$refs.demoTemplate.updateSectionBtnsState(1, false)
break break
case 2: case 2:
this.mode = 'car' this.mode = 'car'
this.licensePlateValue = ['','','','','','','',''] this.licensePlateValue = ['','','','','','','','']
this.$refs.demoTemplate.updateSectionBtnsState(1, false) this.$refs.demoTemplate.updateSectionBtnsState(1, false)
break break
} }
}, },
// 切换点显示 // 切换点显示
dotEnabledChange(event) { dotEnabledChange(event) {
this.dotEnabled = event.index === 0 ? true : false this.dotEnabled = event.index === 0 ? true : false
this.value = true this.value = true
}, },
// 切换乱序显示 // 切换乱序显示
randomEnabledChange(event) { randomEnabledChange(event) {
this.randomEnabled = event.index === 0 ? true : false this.randomEnabled = event.index === 0 ? true : false
this.value = true this.value = true
}, },
// 切换顶部工具栏显示 // 切换顶部工具栏显示
tooltipChange(event) { tooltipChange(event) {
this.tooltip = event.index === 0 ? true : false this.tooltip = event.index === 0 ? true : false
this.value = true this.value = true
}, },
// 切换遮罩状态 // 切换遮罩状态
maskChange(event) { maskChange(event) {
this.mask = event.index === 0 ? true : false this.mask = event.index === 0 ? true : false
this.value = true this.value = true
}, },
// 键盘输入值改变 // 键盘输入值改变
onChange(e) { onChange(e) {
if (this.mode === 'number' || this.mode === 'card') { if (this.mode === 'number' || this.mode === 'card') {
this.inputValue += e this.inputValue += e
} else if (this.mode === 'car') { } else if (this.mode === 'car') {
// 判断输入的值是否正确 // 判断输入的值是否正确
if (this.currentLicensePlateIndex === 0 && !this.$t.test.chinese(e)) { if (this.currentLicensePlateIndex === 0 && !this.$t.test.chinese(e)) {
this.$t.messageUtils.toast('车牌归属地选择错误') this.$t.message.toast('车牌归属地选择错误')
return return
} else if (this.currentLicensePlateIndex === 1 && !this.$t.test.letter(e)) { } else if (this.currentLicensePlateIndex === 1 && !this.$t.test.letter(e)) {
this.$t.messageUtils.toast('车牌归属地字母选择错误') this.$t.message.toast('车牌归属地字母选择错误')
return return
} }
if (this.currentLicensePlateIndex !== 0 && !this.$t.test.enOrNum(e)) { if (this.currentLicensePlateIndex !== 0 && !this.$t.test.enOrNum(e)) {
this.$t.messageUtils.toast('车牌号码选择错误') this.$t.message.toast('车牌号码选择错误')
return return
} }
// this.licensePlateValue[this.currentLicensePlateIndex] = e // this.licensePlateValue[this.currentLicensePlateIndex] = e
this.$set(this.licensePlateValue, this.currentLicensePlateIndex, e) this.$set(this.licensePlateValue, this.currentLicensePlateIndex, e)
this.currentLicensePlateIndex++ this.currentLicensePlateIndex++
// 判断车牌是否已经选择完成 // 判断车牌是否已经选择完成
if (this.currentLicensePlateIndex === 8) { if (this.currentLicensePlateIndex === 8) {
this.value = false this.value = false
} }
} }
}, },
// 点击了取消按钮 // 点击了取消按钮
onCancel() { onCancel() {
this.$t.messageUtils.toast('点击了取消按钮') this.$t.message.toast('点击了取消按钮')
}, },
// 点击了确认按钮 // 点击了确认按钮
onConfirm() { onConfirm() {
this.$t.messageUtils.toast('点击了确认按钮') this.$t.message.toast('点击了确认按钮')
this.value = false this.value = false
}, },
// 点击了退格按钮 // 点击了退格按钮
onBackspace() { onBackspace() {
if (this.mode === 'number' || this.mode === 'card') { if (this.mode === 'number' || this.mode === 'card') {
if (!this.inputValue) { if (!this.inputValue) {
return return
} }
this.inputValue = this.inputValue.substring(0, this.inputValue.length - 1) this.inputValue = this.inputValue.substring(0, this.inputValue.length - 1)
} else if (this.mode === 'car') { } else if (this.mode === 'car') {
let licensePlateIndex = this.currentLicensePlateIndex > 7 ? 7 : this.currentLicensePlateIndex let licensePlateIndex = this.currentLicensePlateIndex > 7 ? 7 : this.currentLicensePlateIndex
if (this.licensePlateValue[licensePlateIndex] !== '') { if (this.licensePlateValue[licensePlateIndex] !== '') {
this.$set(this.licensePlateValue, licensePlateIndex, '') this.$set(this.licensePlateValue, licensePlateIndex, '')
} else { } else {
licensePlateIndex = licensePlateIndex < 1 ? 0 : --licensePlateIndex licensePlateIndex = licensePlateIndex < 1 ? 0 : --licensePlateIndex
this.$set(this.licensePlateValue, licensePlateIndex, '') this.$set(this.licensePlateValue, licensePlateIndex, '')
} }
this.currentLicensePlateIndex = licensePlateIndex this.currentLicensePlateIndex = licensePlateIndex
} }
}, },
// 点击车牌对于位置进行选择输入 // 点击车牌对于位置进行选择输入
chooseLicensePlateNumber(index) { chooseLicensePlateNumber(index) {
this.currentLicensePlateIndex = index this.currentLicensePlateIndex = index
this.mode = 'car' this.mode = 'car'
this.value = true this.value = true
}, },
// 清空内容 // 清空内容
clearInputValue() { clearInputValue() {
this.inputValue = '' this.inputValue = ''
} }
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.number-value { .number-value {
display: flex; display: flex;
align-items: center; align-items: center;
.clear-btn { .clear-btn {
margin-left: 10rpx; margin-left: 10rpx;
} }
} }
.car-value { .car-value {
display: flex; display: flex;
.car-input { .car-input {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 74rpx; height: 74rpx;
width: 64rpx; width: 64rpx;
border: 1px solid $tn-border-solid-color; border: 1px solid $tn-border-solid-color;
border-radius: 18rpx; border-radius: 18rpx;
text-align: center; text-align: center;
font-size: 38rpx; font-size: 38rpx;
line-height: 1; line-height: 1;
margin-left: 10rpx; margin-left: 10rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
&.new-energy { &.new-energy {
background: transparent; background: transparent;
border-style: dashed; border-style: dashed;
} }
} }
.car-point { .car-point {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 74rpx; height: 74rpx;
width: 20rpx; width: 20rpx;
margin-left: 10rpx; margin-left: 10rpx;
.point { .point {
width: 20rpx; width: 20rpx;
height: 20rpx; height: 20rpx;
background-color: $tn-font-holder-color; background-color: $tn-font-holder-color;
border-radius: 50%; border-radius: 50%;
} }
} }
.new-energy-car { .new-energy-car {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 16rpx; font-size: 16rpx;
color: $tn-font-sub-color; color: $tn-font-sub-color;
.icon { .icon {
margin-bottom: 8rpx; margin-bottom: 8rpx;
} }
} }
} }
</style> </style>
componentsPage/landscape/landscape.vue
+185 -185
View File
@@ -1,185 +1,185 @@
<template> <template>
<view class="components-landscape"> <view class="components-landscape">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>压屏窗</tn-nav-bar> <tn-nav-bar fixed>压屏窗</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click"> <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
<view class="tn-flex tn-flex-row-center"><tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @tap="showLandscape">弹出压屏窗</tn-button></view> <view class="tn-flex tn-flex-row-center"><tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @tap="showLandscape">弹出压屏窗</tn-button></view>
</dynamic-demo-template> </dynamic-demo-template>
</view> </view>
<!-- 压屏窗--> <!-- 压屏窗-->
<tn-landscape <tn-landscape
:show="show" :show="show"
:closeBtn="closeBtn" :closeBtn="closeBtn"
:closeColor="closeColor" :closeColor="closeColor"
:closeSize="closeSize" :closeSize="closeSize"
:closePosition="closePosition" :closePosition="closePosition"
:closeTop="closeTop" :closeTop="closeTop"
:closeRight="closeRight" :closeRight="closeRight"
:closeBottom="closeBottom" :closeBottom="closeBottom"
:closeLeft="closeLeft" :closeLeft="closeLeft"
:mask="mask" :mask="mask"
:maskCloseable="maskCloseable" :maskCloseable="maskCloseable"
@close="closeLandscape" @close="closeLandscape"
> >
<image src="https://tnuiimage.tnkjapp.com/landscape/2022-new-year.png" mode="widthFix"></image> <image src="https://tnuiimage.tnkjapp.com/landscape/2022-new-year.png" mode="widthFix"></image>
</tn-landscape> </tn-landscape>
</view> </view>
</template> </template>
<script> <script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue' import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default { export default {
name: 'ComponentsLandscape', name: 'ComponentsLandscape',
components: {dynamicDemoTemplate}, components: {dynamicDemoTemplate},
data() { data() {
return { return {
show: false, show: false,
closeBtn: true, closeBtn: true,
closeColor: '', closeColor: '',
closeSize: 0, closeSize: 0,
closePosition: 'rightTop', closePosition: 'rightTop',
closeTop: 0, closeTop: 0,
closeRight: 0, closeRight: 0,
closeBottom: 0, closeBottom: 0,
closeLeft: 0, closeLeft: 0,
mask: true, mask: true,
maskCloseable: true, maskCloseable: true,
tips: ['无需依赖额外的样式文件','使用tn-landscape组件'], tips: ['无需依赖额外的样式文件','使用tn-landscape组件'],
sectionList: [ sectionList: [
{ {
name: '参数切换', name: '参数切换',
section: [ section: [
{ {
title: '关闭按钮', title: '关闭按钮',
optional: ['显示','隐藏'], optional: ['显示','隐藏'],
methods: 'closeBtnChange' methods: 'closeBtnChange'
}, },
{ {
title: '关闭按钮位置', title: '关闭按钮位置',
optional: ['左上','右上','底部'], optional: ['左上','右上','底部'],
methods: 'closePositionChange', methods: 'closePositionChange',
current: 1 current: 1
}, },
{ {
title: '自定义关闭按钮', title: '自定义关闭按钮',
optional: ['默认','自定义'], optional: ['默认','自定义'],
methods: 'customCloseChange' methods: 'customCloseChange'
}, },
{ {
title: '遮罩', title: '遮罩',
optional: ['显示','隐藏'], optional: ['显示','隐藏'],
methods: 'maskChange' methods: 'maskChange'
}, },
{ {
title: '点击遮罩关闭', title: '点击遮罩关闭',
optional: ['允许','不允许'], optional: ['允许','不允许'],
methods: 'maskCloseableChange' methods: 'maskCloseableChange'
} }
] ]
} }
] ]
} }
}, },
methods: { methods: {
click(event) { click(event) {
this[event.methods] && this[event.methods](event) this[event.methods] && this[event.methods](event)
}, },
// 弹出压屏窗 // 弹出压屏窗
showLandscape() { showLandscape() {
this.openLandscape() this.openLandscape()
}, },
// 切换关闭按钮显示隐藏 // 切换关闭按钮显示隐藏
closeBtnChange(event) { closeBtnChange(event) {
switch (event.index) { switch (event.index) {
case 0: case 0:
this.closeBtn = true this.closeBtn = true
this.$refs.demoTemplate.updateSectionBtnsState([1,2], true) this.$refs.demoTemplate.updateSectionBtnsState([1,2], true)
break break
case 1: case 1:
this.closeBtn = false this.closeBtn = false
this.$refs.demoTemplate.updateSectionBtnsState([1,2], false) this.$refs.demoTemplate.updateSectionBtnsState([1,2], false)
break break
} }
this.openLandscape() this.openLandscape()
}, },
// 切换关闭按钮位置 // 切换关闭按钮位置
closePositionChange(event) { closePositionChange(event) {
switch (event.index) { switch (event.index) {
case 0: case 0:
this.closePosition = 'leftTop' this.closePosition = 'leftTop'
break break
case 1: case 1:
this.closePosition = 'rightTop' this.closePosition = 'rightTop'
break break
case 2: case 2:
this.closePosition = 'bottom' this.closePosition = 'bottom'
break break
} }
this.$refs.demoTemplate.updateSectionBtnsValue(0, 2, 0) this.$refs.demoTemplate.updateSectionBtnsValue(0, 2, 0)
this.customCloseChange({index: 0}) this.customCloseChange({index: 0})
this.openLandscape() this.openLandscape()
}, },
// 切换自定义关闭按钮样式 // 切换自定义关闭按钮样式
customCloseChange(event) { customCloseChange(event) {
if (event.index === 0) { if (event.index === 0) {
this.closeTop = 0 this.closeTop = 0
this.closeRight = 0 this.closeRight = 0
this.closeBottom = 0 this.closeBottom = 0
this.closeLeft = 0 this.closeLeft = 0
this.closeColor = '' this.closeColor = ''
this.closeSize = 0 this.closeSize = 0
} else if (event.index === 1) { } else if (event.index === 1) {
if (this.closePosition === 'leftTop') { if (this.closePosition === 'leftTop') {
this.closeTop = -40 this.closeTop = -40
this.closeLeft = 30 this.closeLeft = 30
} else if (this.closePosition === 'rightTop') { } else if (this.closePosition === 'rightTop') {
this.closeTop = -40 this.closeTop = -40
this.closeRight = 30 this.closeRight = 30
} else if (this.closePosition === 'bottom') { } else if (this.closePosition === 'bottom') {
this.closeBottom = -60 this.closeBottom = -60
} }
this.closeColor = '#E83A30' this.closeColor = '#E83A30'
this.closeSize = 60 this.closeSize = 60
} }
this.openLandscape() this.openLandscape()
}, },
// 切换遮罩显示隐藏 // 切换遮罩显示隐藏
maskChange(event) { maskChange(event) {
this.mask = event.index === 0 ? true : false this.mask = event.index === 0 ? true : false
this.openLandscape() this.openLandscape()
}, },
// 切换遮罩关闭状态 // 切换遮罩关闭状态
maskCloseableChange(event) { maskCloseableChange(event) {
this.maskCloseable = event.index === 0 ? true : false this.maskCloseable = event.index === 0 ? true : false
this.openLandscape() this.openLandscape()
}, },
// 打开压屏窗 // 打开压屏窗
openLandscape() { openLandscape() {
this.show = true this.show = true
}, },
// 关闭压屏窗 // 关闭压屏窗
closeLandscape() { closeLandscape() {
this.show = false this.show = false
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>
componentsPage/lazy-load/lazy-load.vue
+83 -83
View File
@@ -1,102 +1,102 @@
<template> <template>
<view class="components-lazy-load"> <view class="components-lazy-load">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>懒加载</tn-nav-bar> <tn-nav-bar fixed>懒加载</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="content"> <view class="content">
<block v-for="(item, index) in list" :key="index"> <block v-for="(item, index) in list" :key="index">
<view class="item"> <view class="item">
<tn-lazy-load <tn-lazy-load
:index="index" :index="index"
:image="item.src" :image="item.src"
:threshold="-450" :threshold="-450"
:height="400" :height="400"
imgMode="aspectFill" imgMode="aspectFill"
></tn-lazy-load> ></tn-lazy-load>
</view> </view>
</block> </block>
</view> </view>
<tn-load-more :status="status" @loadmore="getData"></tn-load-more> <tn-load-more :status="status" @loadmore="getData"></tn-load-more>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: 'ComponentsLazyLoad', name: 'ComponentsLazyLoad',
data() { data() {
return { return {
status: 'loadmore', status: 'loadmore',
list: [], list: [],
data: [ data: [
{ src: 'https://tnuiimage.tnkjapp.com/shop/bag1.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/bag1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/bag2.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/bag2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/banner3.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/banner3.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/card.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/card.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/computer1.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/computer1.jpg' },
{ src: 'error.jpg' }, { src: 'error.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/content.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/content.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/cup1.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/cup1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/cup2.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/cup2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/office.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/office.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/pillow.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/pillow.jpg' },
{ src: 'error.jpg' }, { src: 'error.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/pillow2.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/pillow2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/watch2.jpg' }, { src: 'https://tnuiimage.tnkjapp.com/shop/watch2.jpg' },
{ src: 'error.jpg' } { src: 'error.jpg' }
] ]
} }
}, },
onLoad() { onLoad() {
this.getData() this.getData()
}, },
onReachBottom() { onReachBottom() {
uni.$emit('tOnLazyLoadReachBottom') uni.$emit('tOnLazyLoadReachBottom')
this.getData() this.getData()
}, },
methods: { methods: {
getData() { getData() {
let index = 0 let index = 0
this.status = 'loading' this.status = 'loading'
setTimeout(() => { setTimeout(() => {
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
index = this.$t.number.random(0, this.data.length - 1) index = this.$t.number.randomInt(0, this.data.length - 1)
this.list.push({ this.list.push({
src: this.data[index].src src: this.data[index].src
}) })
} }
this.status = 'loadmore' this.status = 'loadmore'
}, 1500) }, 1500)
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
padding: 30rpx; padding: 30rpx;
.item { .item {
flex: 0 0 335rpx; flex: 0 0 335rpx;
height: 400rpx; height: 400rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
border-radius: 10rpx; border-radius: 10rpx;
overflow: hidden; overflow: hidden;
} }
} }
</style> </style>
componentsPage/list/list.vue
+365 -365
View File
@@ -1,365 +1,365 @@
<template> <template>
<view class="components-list tn-safe-area-inset-bottom"> <view class="components-list tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>列表</tn-nav-bar> <tn-nav-bar fixed>列表</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础"> <demo-title title="基础">
<view> <view>
<tn-list-view <tn-list-view
unlined="bottom" unlined="bottom"
:customTitle="true" :customTitle="true"
> >
<template slot="title"> <template slot="title">
<view class="custom-title"> <view class="custom-title">
<tn-button shape="" backgroundColor="tn-main-gradient-indigo" @click="openOptions">设置</tn-button> <tn-button shape="" backgroundColor="tn-main-gradient-indigo" @click="openOptions">设置</tn-button>
</view> </view>
</template> </template>
<tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单一</tn-list-cell> <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单一</tn-list-cell>
<tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单二</tn-list-cell> <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单二</tn-list-cell>
<tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单三</tn-list-cell> <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单三</tn-list-cell>
</tn-list-view> </tn-list-view>
</view> </view>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-list-view <tn-list-view
:card="true" :card="true"
title="卡片式列表" title="卡片式列表"
backgroundColor="#EFEFEF" backgroundColor="#EFEFEF"
> >
<tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单一</tn-list-cell> <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单一</tn-list-cell>
<tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单二</tn-list-cell> <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单二</tn-list-cell>
<tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单三</tn-list-cell> <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单三</tn-list-cell>
</tn-list-view> </tn-list-view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="列表项单独使用"> <demo-title title="列表项单独使用">
<view> <view>
<tn-list-cell> <tn-list-cell>
普通列表 普通列表
</tn-list-cell> </tn-list-cell>
</view> </view>
<view class="tn-margin-top-sm"> <view class="tn-margin-top-sm">
<tn-list-cell :radius="true"> <tn-list-cell :radius="true">
圆角列表 圆角列表
</tn-list-cell> </tn-list-cell>
</view> </view>
<view class="tn-margin-top-sm"> <view class="tn-margin-top-sm">
<tn-list-cell> <tn-list-cell>
<view class="list-icon-text"> <view class="list-icon-text">
<view class="list__left"> <view class="list__left">
<view class="list__left__icon tn-icon-discover tn-color-gray"></view> <view class="list__left__icon tn-icon-discover tn-color-gray"></view>
<view class="list__left__text">图标 + 文字</view> <view class="list__left__text">图标 + 文字</view>
</view> </view>
</view> </view>
</tn-list-cell> </tn-list-cell>
</view> </view>
<view class="tn-margin-top-sm"> <view class="tn-margin-top-sm">
<tn-list-cell> <tn-list-cell>
<view class="list-image-text"> <view class="list-image-text">
<view class="list__left"> <view class="list__left">
<image src="/static/favicon.ico" class="list__left__image"></image> <image src="/static/favicon.ico" class="list__left__image"></image>
<view class="list__left__text">图片 + 文字</view> <view class="list__left__text">图片 + 文字</view>
</view> </view>
</view> </view>
</tn-list-cell> </tn-list-cell>
</view> </view>
<view class="tn-margin-top-sm"> <view class="tn-margin-top-sm">
<tn-list-cell> <tn-list-cell>
<view class="list-icon-text"> <view class="list-icon-text">
<view class="list__left"> <view class="list__left">
<view class="list__left__icon tn-icon-order tn-color-indigo"></view> <view class="list__left__icon tn-icon-order tn-color-indigo"></view>
<view class="list__left__text">文本</view> <view class="list__left__text">文本</view>
</view> </view>
<view class="list__right"> <view class="list__right">
<view class="tn-text-sm tn-color-gray">定一个小目标吧</view> <view class="tn-text-sm tn-color-gray">定一个小目标吧</view>
</view> </view>
</view> </view>
</tn-list-cell> </tn-list-cell>
</view> </view>
<view class="tn-margin-top-sm"> <view class="tn-margin-top-sm">
<tn-list-cell> <tn-list-cell>
<view class="list-icon-text"> <view class="list-icon-text">
<view class="list__left"> <view class="list__left">
<view class="list__left__icon tn-icon-upload tn-color-cyan"></view> <view class="list__left__icon tn-icon-upload tn-color-cyan"></view>
<view class="list__left__text">按钮</view> <view class="list__left__text">按钮</view>
</view> </view>
<view class="list__right"> <view class="list__right">
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" shape="round" size="sm"> <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" shape="round" size="sm">
<text class="tn-icon-upload tn-margin-right-xs"></text>上传 <text class="tn-icon-upload tn-margin-right-xs"></text>上传
</tn-button> </tn-button>
</view> </view>
</view> </view>
</tn-list-cell> </tn-list-cell>
</view> </view>
<view class="tn-margin-top-sm"> <view class="tn-margin-top-sm">
<tn-list-cell> <tn-list-cell>
<view class="list-icon-text"> <view class="list-icon-text">
<view class="list__left"> <view class="list__left">
<view class="list__left__icon tn-icon-tag tn-text-clip tn-main-gradient-orangeyellow"></view> <view class="list__left__icon tn-icon-tag tn-text-clip tn-main-gradient-orangeyellow"></view>
<view class="list__left__text">标签</view> <view class="list__left__text">标签</view>
</view> </view>
<view class="list__right"> <view class="list__right">
<tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0rpx 5rpx">篮球</tn-tag> <tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0rpx 5rpx">篮球</tn-tag>
<tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0rpx 5rpx">足球</tn-tag> <tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0rpx 5rpx">足球</tn-tag>
<tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0rpx 5rpx">小球</tn-tag> <tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0rpx 5rpx">小球</tn-tag>
</view> </view>
</view> </view>
</tn-list-cell> </tn-list-cell>
</view> </view>
<view class="tn-margin-top-sm"> <view class="tn-margin-top-sm">
<tn-list-cell> <tn-list-cell>
<view class="list-icon-text"> <view class="list-icon-text">
<view class="list__left"> <view class="list__left">
<view class="list__left__icon tn-icon-emoji-good tn-text-clip tn-main-gradient-orangered"></view> <view class="list__left__icon tn-icon-emoji-good tn-text-clip tn-main-gradient-orangered"></view>
<view class="list__left__text">头像组</view> <view class="list__left__text">头像组</view>
</view> </view>
<view class="list__right"> <view class="list__right">
<tn-avatar-group :lists="avatarGroupList" size="sm"></tn-avatar-group> <tn-avatar-group :lists="avatarGroupList" size="sm"></tn-avatar-group>
</view> </view>
</view> </view>
</tn-list-cell> </tn-list-cell>
</view> </view>
</demo-title> </demo-title>
<demo-title title="聊天示例"> <demo-title title="聊天示例">
<tn-list-view title="消息列表" unlined="bottom"> <tn-list-view title="消息列表" unlined="bottom">
<tn-list-cell :unlined="true"> <tn-list-cell :unlined="true">
<view class="message"> <view class="message">
<view class="message__left"> <view class="message__left">
<tn-avatar src="https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg"></tn-avatar> <tn-avatar src="https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg"></tn-avatar>
</view> </view>
<view class="message__middle"> <view class="message__middle">
<view class="message__name">小图鸟</view> <view class="message__name">小图鸟</view>
<view class="message__content tn-text-ellipsis">欢迎使用图鸟UI，图鸟UI专做UI界面100年</view> <view class="message__content tn-text-ellipsis">欢迎使用图鸟UI，图鸟UI专做UI界面100年</view>
</view> </view>
<view class="message__right"> <view class="message__right">
<view class="message__time">13:14</view> <view class="message__time">13:14</view>
<view class="message__tips"> <view class="message__tips">
<tn-tag backgroundColor="tn-bg-red" fontColor="tn-color-white" shape="circle" width="auto" size="sm">99</tn-tag> <tn-tag backgroundColor="tn-bg-red" fontColor="tn-color-white" shape="circle" width="auto" size="sm">99</tn-tag>
</view> </view>
</view> </view>
</view> </view>
</tn-list-cell> </tn-list-cell>
<tn-list-cell :unlined="true"> <tn-list-cell :unlined="true">
<view class="message"> <view class="message">
<view class="message__left"> <view class="message__left">
<tn-avatar src="https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg" :badge="true" badgeText="99" badgeBgColor="tn-bg-red" badgeColor="tn-color-white"></tn-avatar> <tn-avatar src="https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg" :badge="true" badgeText="99" badgeBgColor="tn-bg-red" badgeColor="tn-color-white"></tn-avatar>
</view> </view>
<view class="message__middle"> <view class="message__middle">
<view class="message__name">小图鸟</view> <view class="message__name">小图鸟</view>
<view class="message__content tn-text-ellipsis">欢迎使用图鸟UI，图鸟UI专做UI界面100年</view> <view class="message__content tn-text-ellipsis">欢迎使用图鸟UI，图鸟UI专做UI界面100年</view>
</view> </view>
<view class="message__right"> <view class="message__right">
<view class="message__time">13:14</view> <view class="message__time">13:14</view>
<view class="message__tips"> <view class="message__tips">
<text class="message__tips__icon tn-icon-sound-close"></text> <text class="message__tips__icon tn-icon-sound-close"></text>
</view> </view>
</view> </view>
</view> </view>
</tn-list-cell> </tn-list-cell>
</tn-list-view> </tn-list-view>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
<tn-modal <tn-modal
v-model="showListOptions" v-model="showListOptions"
:custom="true" :custom="true"
padding="0" padding="0"
> >
<tn-list-view> <tn-list-view>
<tn-list-cell> <tn-list-cell>
<view class="list__options"> <view class="list__options">
<view class="list__options__title">下划线</view> <view class="list__options__title">下划线</view>
<view class="list__options__switch"><tn-switch v-model="cellShowBorderLine" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view> <view class="list__options__switch"><tn-switch v-model="cellShowBorderLine" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view>
</view> </view>
</tn-list-cell> </tn-list-cell>
<tn-list-cell v-if="!cellUnlined"> <tn-list-cell v-if="!cellUnlined">
<view class="list__options"> <view class="list__options">
<view class="list__options__title">长下划线</view> <view class="list__options__title">长下划线</view>
<view class="list__options__switch"><tn-switch v-model="cellLongBorderLine" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view> <view class="list__options__switch"><tn-switch v-model="cellLongBorderLine" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view>
</view> </view>
</tn-list-cell> </tn-list-cell>
<tn-list-cell> <tn-list-cell>
<view class="list__options"> <view class="list__options">
<view class="list__options__title">箭头</view> <view class="list__options__title">箭头</view>
<view class="list__options__switch"><tn-switch v-model="cellArrow" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view> <view class="list__options__switch"><tn-switch v-model="cellArrow" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view>
</view> </view>
</tn-list-cell> </tn-list-cell>
<tn-list-cell v-if="cellArrow"> <tn-list-cell v-if="cellArrow">
<view class="list__options"> <view class="list__options">
<view class="list__options__title">无边距箭头</view> <view class="list__options__title">无边距箭头</view>
<view class="list__options__switch"><tn-switch v-model="cellNoPaddingArrow" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view> <view class="list__options__switch"><tn-switch v-model="cellNoPaddingArrow" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view>
</view> </view>
</tn-list-cell> </tn-list-cell>
</tn-list-view> </tn-list-view>
</tn-modal> </tn-modal>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsList', name: 'componentsList',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
showListOptions: false, showListOptions: false,
cellShowBorderLine: true, cellShowBorderLine: true,
cellLongBorderLine: false, cellLongBorderLine: false,
cellNoPaddingArrow: false, cellNoPaddingArrow: false,
cellArrow: false, cellArrow: false,
cellArrowRight: true, cellArrowRight: true,
cellUnlined: false, cellUnlined: false,
cellLineLeft: true, cellLineLeft: true,
cellLineRight: true, cellLineRight: true,
avatarGroupList: [ avatarGroupList: [
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'}, {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'}, {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'}, {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'}, {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
] ]
} }
}, },
watch: { watch: {
cellShowBorderLine(val) { cellShowBorderLine(val) {
if (val) { if (val) {
this.cellUnlined = false this.cellUnlined = false
} else { } else {
this.cellUnlined = true this.cellUnlined = true
} }
}, },
cellLongBorderLine(val) { cellLongBorderLine(val) {
if (val) { if (val) {
this.cellLineLeft = false this.cellLineLeft = false
this.cellLineRight = false this.cellLineRight = false
} else { } else {
this.cellLineLeft = true this.cellLineLeft = true
this.cellLineRight = true this.cellLineRight = true
} }
}, },
cellNoPaddingArrow(val) { cellNoPaddingArrow(val) {
if (val) { if (val) {
this.cellArrowRight = false this.cellArrowRight = false
} else { } else {
this.cellArrowRight = true this.cellArrowRight = true
} }
} }
}, },
methods: { methods: {
// 弹出设置弹框 // 弹出设置弹框
openOptions() { openOptions() {
this.showListOptions = true this.showListOptions = true
}, },
// 关闭设置弹框 // 关闭设置弹框
closeOptions() { closeOptions() {
this.showListOptions = false this.showListOptions = false
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-list { .components-list {
background-color: $tn-bg-gray-color; background-color: $tn-bg-gray-color;
min-height: 100vh; min-height: 100vh;
} }
.custom-title { .custom-title {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: flex-end; justify-content: flex-end;
padding: 10rpx 20rpx; padding: 10rpx 20rpx;
} }
.list__options { .list__options {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.list { .list {
&__left { &__left {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
&__icon, &__image { &__icon, &__image {
margin-right: 18rpx; margin-right: 18rpx;
} }
} }
&__right { &__right {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
} }
} }
.list-icon-text, .list-image-text { .list-icon-text, .list-image-text {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.list-image-text { .list-image-text {
.list { .list {
&__left { &__left {
&__image { &__image {
width: 20rpx; width: 20rpx;
height: 20rpx; height: 20rpx;
} }
} }
} }
} }
.message { .message {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
&__left { &__left {
width: 10%; width: 10%;
} }
&__middle { &__middle {
width: 80%; width: 80%;
padding-left: 20rpx; padding-left: 20rpx;
padding-right: 40rpx; padding-right: 40rpx;
} }
&__right { &__right {
width: 10%; width: 10%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
&__name { &__name {
font-size: 32rpx; font-size: 32rpx;
margin-bottom: 8rpx; margin-bottom: 8rpx;
} }
&__content { &__content {
font-size: 26rpx; font-size: 26rpx;
color: #838383; color: #838383;
} }
&__tips { &__tips {
&__icon { &__icon {
font-size: 36rpx; font-size: 36rpx;
color: #AAAAAA; color: #AAAAAA;
} }
} }
} }
</style> </style>
componentsPage/load-more/load-more.vue
+73 -73
View File
@@ -1,79 +1,79 @@
<template> <template>
<view class="components-load-more tn-safe-area-inset-bottom"> <view class="components-load-more tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>加载更多</tn-nav-bar> <tn-nav-bar fixed>加载更多</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="默认"> <demo-title title="默认">
<tn-load-more></tn-load-more> <tn-load-more></tn-load-more>
</demo-title> </demo-title>
<demo-title title="加载中"> <demo-title title="加载中">
<tn-load-more status="loading" :loadingIcon="false"></tn-load-more> <tn-load-more status="loading" :loadingIcon="false"></tn-load-more>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-load-more class="tn-margin-top" status="loading"></tn-load-more> <tn-load-more class="tn-margin-top" status="loading"></tn-load-more>
</view> </view>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-load-more class="tn-margin-top" status="loading" loadingIconColor="#01BEFF"></tn-load-more> <tn-load-more class="tn-margin-top" status="loading" loadingIconColor="#01BEFF"></tn-load-more>
</view> </view>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-load-more class="tn-margin-top" status="loading" loadingIconType="flower"></tn-load-more> <tn-load-more class="tn-margin-top" status="loading" loadingIconType="flower"></tn-load-more>
</view> </view>
</demo-title> </demo-title>
<demo-title title="没有更多"> <demo-title title="没有更多">
<tn-load-more status="nomore"></tn-load-more> <tn-load-more status="nomore"></tn-load-more>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-load-more class="tn-margin-top" status="nomore" dot></tn-load-more> <tn-load-more class="tn-margin-top" status="nomore" dot></tn-load-more>
</view> </view>
</demo-title> </demo-title>
<demo-title title="修改提示语"> <demo-title title="修改提示语">
<tn-load-more status="loadmore" :loadText="loadText"></tn-load-more> <tn-load-more status="loadmore" :loadText="loadText"></tn-load-more>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-load-more class="tn-margin-top" status="loading" :loadText="loadText"></tn-load-more> <tn-load-more class="tn-margin-top" status="loading" :loadText="loadText"></tn-load-more>
</view> </view>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-load-more class="tn-margin-top" status="nomore" :loadText="loadText"></tn-load-more> <tn-load-more class="tn-margin-top" status="nomore" :loadText="loadText"></tn-load-more>
</view> </view>
</demo-title> </demo-title>
<demo-title title="修改颜色"> <demo-title title="修改颜色">
<tn-load-more status="loadmore" :loadText="loadText" fontColor="#01BEFF"></tn-load-more> <tn-load-more status="loadmore" :loadText="loadText" fontColor="#01BEFF"></tn-load-more>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-load-more class="tn-margin-top" status="loading" :loadText="loadText" fontColor="tn-color-indigo"></tn-load-more> <tn-load-more class="tn-margin-top" status="loading" :loadText="loadText" fontColor="tn-color-indigo"></tn-load-more>
</view> </view>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-load-more class="tn-margin-top" status="nomore" :loadText="loadText" fontColor="rgba(255, 129, 129, 0.8)"></tn-load-more> <tn-load-more class="tn-margin-top" status="nomore" :loadText="loadText" fontColor="rgba(255, 129, 129, 0.8)"></tn-load-more>
</view> </view>
</demo-title> </demo-title>
<demo-title title="修改字体尺寸"> <demo-title title="修改字体尺寸">
<tn-load-more :fontSize="32"></tn-load-more> <tn-load-more :fontSize="32"></tn-load-more>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'ComponentsLoadMore', name: 'ComponentsLoadMore',
components: { demoTitle }, components: { demoTitle },
data() { data() {
return { return {
loadText: { loadText: {
loadmore: '下拉加载', loadmore: '下拉加载',
loading: '快速加载中...', loading: '快速加载中...',
nomore: '已经没有了啊' nomore: '已经没有了啊'
} }
} }
} }
} }
</script> </script>
componentsPage/loading/loading.vue
+85 -85
View File
@@ -1,86 +1,86 @@
<template> <template>
<view class="components-loading tn-safe-area-inset-bottom"> <view class="components-loading tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Loading加载动画</tn-nav-bar> <tn-nav-bar fixed>Loading加载动画</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="样式"> <demo-title title="样式">
<view class="tn-flex tn-flex-col-center tn-flex-row-left"> <view class="tn-flex tn-flex-col-center tn-flex-row-left">
<view class="tn-margin-right"> <view class="tn-margin-right">
<tn-loading show="show"></tn-loading> <tn-loading show="show"></tn-loading>
</view> </view>
<view class="tn-margin-right"> <view class="tn-margin-right">
<tn-loading show="show" mode="flower"></tn-loading> <tn-loading show="show" mode="flower"></tn-loading>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="大小"> <demo-title title="大小">
<view class="tn-flex tn-flex-col-center tn-flex-row-left"> <view class="tn-flex tn-flex-col-center tn-flex-row-left">
<view class="tn-margin-right"> <view class="tn-margin-right">
<tn-loading show="show"></tn-loading> <tn-loading show="show"></tn-loading>
</view> </view>
<view class="tn-margin-right"> <view class="tn-margin-right">
<tn-loading show="show" :size="50"></tn-loading> <tn-loading show="show" :size="50"></tn-loading>
</view> </view>
<view class="tn-margin-right"> <view class="tn-margin-right">
<tn-loading show="show" :size="80"></tn-loading> <tn-loading show="show" :size="80"></tn-loading>
</view> </view>
</view> </view>
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-margin-top"> <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-margin-top">
<view class="tn-margin-right"> <view class="tn-margin-right">
<tn-loading show="show" mode="flower"></tn-loading> <tn-loading show="show" mode="flower"></tn-loading>
</view> </view>
<view class="tn-margin-right"> <view class="tn-margin-right">
<tn-loading show="show" mode="flower" :size="50"></tn-loading> <tn-loading show="show" mode="flower" :size="50"></tn-loading>
</view> </view>
<view class="tn-margin-right"> <view class="tn-margin-right">
<tn-loading show="show" mode="flower" :size="80"></tn-loading> <tn-loading show="show" mode="flower" :size="80"></tn-loading>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="颜色"> <demo-title title="颜色">
<view class="tn-flex tn-flex-col-center tn-flex-row-left"> <view class="tn-flex tn-flex-col-center tn-flex-row-left">
<view class="tn-margin-right"> <view class="tn-margin-right">
<tn-loading show="show"></tn-loading> <tn-loading show="show"></tn-loading>
</view> </view>
<view class="tn-margin-right"> <view class="tn-margin-right">
<tn-loading show="show" color="#01BEFF"></tn-loading> <tn-loading show="show" color="#01BEFF"></tn-loading>
</view> </view>
<view class="tn-margin-right"> <view class="tn-margin-right">
<tn-loading show="show" color="#E83A30"></tn-loading> <tn-loading show="show" color="#E83A30"></tn-loading>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsLoading', name: 'componentsLoading',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
show: true, show: true,
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>
componentsPage/modal/modal.vue
+276 -276
View File
@@ -1,277 +1,277 @@
<template> <template>
<view class="modal"> <view class="modal">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>模态框</tn-nav-bar> <tn-nav-bar fixed>模态框</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click"> <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
<tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showModal">弹出模态框</tn-button> <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showModal">弹出模态框</tn-button>
</dynamic-demo-template> </dynamic-demo-template>
</view> </view>
<!-- 模态框 --> <!-- 模态框 -->
<tn-modal <tn-modal
v-model="show" v-model="show"
:backgroundColor="backgroundColor" :backgroundColor="backgroundColor"
:width="width" :width="width"
:padding="padding" :padding="padding"
:radius="radius" :radius="radius"
:fontColor="fontColor" :fontColor="fontColor"
:fontSize="fontSize" :fontSize="fontSize"
:title="title" :title="title"
:content="content" :content="content"
:button="button" :button="button"
:showCloseBtn="closeBtn || !maskCloseable" :showCloseBtn="closeBtn || !maskCloseable"
:maskCloseable="maskCloseable" :maskCloseable="maskCloseable"
:zoom="zoom" :zoom="zoom"
:custom="custom" :custom="custom"
@click="clickBtn" @click="clickBtn"
> >
<view v-if="custom"> <view v-if="custom">
<view class="custom-modal-content"> <view class="custom-modal-content">
<tn-form :labelWidth="140"> <tn-form :labelWidth="140">
<tn-form-item label="手机号码" :borderBottom="false"> <tn-form-item label="手机号码" :borderBottom="false">
<tn-input placeholder="请输入手机号码"></tn-input> <tn-input placeholder="请输入手机号码"></tn-input>
</tn-form-item> </tn-form-item>
<tn-form-item label="验证码" :borderBottom="false"> <tn-form-item label="验证码" :borderBottom="false">
<tn-input placeholder="请输入验证码"></tn-input> <tn-input placeholder="请输入验证码"></tn-input>
<view slot="right" class="tn-flex tn-flex-col-center tn-flex-row-center"> <view slot="right" class="tn-flex tn-flex-col-center tn-flex-row-center">
<tn-button :fontSize="20" padding="10rpx" height="46rpx" backgroundColor="#01BEFF" fontColor="tn-color-white">获取验证码</tn-button> <tn-button :fontSize="20" padding="10rpx" height="46rpx" backgroundColor="#01BEFF" fontColor="tn-color-white">获取验证码</tn-button>
</view> </view>
</tn-form-item> </tn-form-item>
</tn-form> </tn-form>
</view> </view>
</view> </view>
</tn-modal> </tn-modal>
</view> </view>
</template> </template>
<script> <script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue' import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default { export default {
name: 'componentsModal', name: 'componentsModal',
components: {dynamicDemoTemplate}, components: {dynamicDemoTemplate},
data() { data() {
return { return {
title: '使用提醒', title: '使用提醒',
content: '确定不使用TuniaoUI', content: '确定不使用TuniaoUI',
show: false, show: false,
backgroundColor: '', backgroundColor: '',
width: '84%', width: '84%',
padding: '', padding: '',
radius: 12, radius: 12,
fontColor: '', fontColor: '',
fontSize: 0, fontSize: 0,
button:[ button:[
{ {
text: '取消', text: '取消',
backgroundColor: '#A4E82F', backgroundColor: '#A4E82F',
fontColor: '#FFFFFF' fontColor: '#FFFFFF'
}, },
{ {
text: '确定', text: '确定',
backgroundColor: 'tn-bg-indigo', backgroundColor: 'tn-bg-indigo',
fontColor: '#FFFFFF' fontColor: '#FFFFFF'
} }
], ],
closeBtn: true, closeBtn: true,
maskCloseable: true, maskCloseable: true,
zoom: true, zoom: true,
custom: false, custom: false,
tips: ['无需依赖额外的样式文件','使用tn-modal组件'], tips: ['无需依赖额外的样式文件','使用tn-modal组件'],
sectionList: [ sectionList: [
{ {
name: '参数切换', name: '参数切换',
section: [ section: [
{ {
title: '自定义颜色', title: '自定义颜色',
optional: ['默认','自定义'], optional: ['默认','自定义'],
methods: 'colorChange' methods: 'colorChange'
}, },
{ {
title: '自定义大小', title: '自定义大小',
optional: ['默认','自定义'], optional: ['默认','自定义'],
methods: 'sizeChange' methods: 'sizeChange'
}, },
{ {
title: '自定义内容', title: '自定义内容',
optional: ['是','否'], optional: ['是','否'],
methods: 'customChange', methods: 'customChange',
current: 1 current: 1
}, },
{ {
title: '圆角', title: '圆角',
optional: ['默认','60'], optional: ['默认','60'],
methods: 'radiusChange' methods: 'radiusChange'
}, },
{ {
title: '标题', title: '标题',
optional: ['显示','隐藏'], optional: ['显示','隐藏'],
methods: 'titleChange' methods: 'titleChange'
}, },
{ {
title: '按钮', title: '按钮',
optional: ['显示','隐藏'], optional: ['显示','隐藏'],
methods: 'buttonChange' methods: 'buttonChange'
}, },
{ {
title: '右上角关闭按钮', title: '右上角关闭按钮',
optional: ['显示','隐藏'], optional: ['显示','隐藏'],
methods: 'closeBtnChange' methods: 'closeBtnChange'
}, },
{ {
title: '点击mask关闭', title: '点击mask关闭',
optional: ['是','否'], optional: ['是','否'],
methods: 'maskCloseableChange' methods: 'maskCloseableChange'
}, },
{ {
title: '动画', title: '动画',
optional: ['有','无'], optional: ['有','无'],
methods: 'zoomChange' methods: 'zoomChange'
} }
] ]
} }
] ]
} }
}, },
methods: { methods: {
click(event) { click(event) {
this[event.methods] && this[event.methods](event) this[event.methods] && this[event.methods](event)
}, },
// 弹出模态框 // 弹出模态框
showModal(event) { showModal(event) {
this.openModal() this.openModal()
}, },
// 切换颜色 // 切换颜色
colorChange(event) { colorChange(event) {
if (event.index === 0) { if (event.index === 0) {
this.backgroundColor = '' this.backgroundColor = ''
this.fontColor = '' this.fontColor = ''
} else { } else {
this.backgroundColor = '#E4E9EC' this.backgroundColor = '#E4E9EC'
this.fontColor = '#BA7027' this.fontColor = '#BA7027'
} }
this.openModal() this.openModal()
}, },
// 切换大小 // 切换大小
sizeChange(event) { sizeChange(event) {
if (event.index === 0) { if (event.index === 0) {
// this.width = '84%' // this.width = '84%'
this.padding = '' this.padding = ''
this.fontSize = 0 this.fontSize = 0
} else { } else {
// this.width = '480rpx' // this.width = '480rpx'
this.padding = '30rpx 26rpx' this.padding = '30rpx 26rpx'
this.fontSize = 35 this.fontSize = 35
} }
this.openModal() this.openModal()
}, },
// 切换自定义内容 // 切换自定义内容
customChange(event) { customChange(event) {
if (event.index === 0) { if (event.index === 0) {
this.custom = true this.custom = true
this.$refs.demoTemplate.updateSectionBtnsState([4,5], false) this.$refs.demoTemplate.updateSectionBtnsState([4,5], false)
} else { } else {
this.custom = false this.custom = false
this.$refs.demoTemplate.updateSectionBtnsState([4,5], true) this.$refs.demoTemplate.updateSectionBtnsState([4,5], true)
} }
this.openModal() this.openModal()
}, },
// 切换圆角 // 切换圆角
radiusChange(event) { radiusChange(event) {
this.radius = event.index === 0 ? 12 : Number(event.name) this.radius = event.index === 0 ? 12 : Number(event.name)
this.openModal() this.openModal()
}, },
// 切换标题信息 // 切换标题信息
titleChange(event) { titleChange(event) {
this.title = event.index === 0 ? '使用提醒' : '' this.title = event.index === 0 ? '使用提醒' : ''
this.openModal() this.openModal()
}, },
// 切换按钮 // 切换按钮
buttonChange(event) { buttonChange(event) {
this.button = event.index === 0 ? [ this.button = event.index === 0 ? [
{ {
text: '取消', text: '取消',
backgroundColor: '#E6E6E6', backgroundColor: '#E6E6E6',
fontColor: '#FFFFFF' fontColor: '#FFFFFF'
}, },
{ {
text: '确定', text: '确定',
backgroundColor: 'tn-bg-indigo', backgroundColor: 'tn-bg-indigo',
fontColor: '#FFFFFF' fontColor: '#FFFFFF'
} }
] : [] ] : []
this.openModal() this.openModal()
}, },
// 切换关闭按钮显示隐藏 // 切换关闭按钮显示隐藏
closeBtnChange(event) { closeBtnChange(event) {
this.closeBtn = event.index === 0 ? true : false this.closeBtn = event.index === 0 ? true : false
this.openModal() this.openModal()
}, },
// 切换蒙版层关闭 // 切换蒙版层关闭
maskCloseableChange(event) { maskCloseableChange(event) {
if (event.index === 0) { if (event.index === 0) {
this.maskCloseable = true this.maskCloseable = true
} else { } else {
this.maskCloseable = false this.maskCloseable = false
this.closeBtn = true this.closeBtn = true
this.$refs.demoTemplate.updateSectionBtnsValue(0, 6, 0) this.$refs.demoTemplate.updateSectionBtnsValue(0, 6, 0)
} }
this.openModal() this.openModal()
}, },
// 切换动画 // 切换动画
zoomChange(event) { zoomChange(event) {
this.zoom = event.index === 0 ? true : false this.zoom = event.index === 0 ? true : false
this.openModal() this.openModal()
}, },
// 打开模态框 // 打开模态框
openModal() { openModal() {
this.show = true this.show = true
}, },
// 点击按钮 // 点击按钮
clickBtn(event) { clickBtn(event) {
this.show = false this.show = false
this.$t.messageUtils.toast('点击了第'+(event.index + 1)+'个按钮') this.$t.message.toast('点击了第'+(event.index + 1)+'个按钮')
} }
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>
<style lang="scss"> <style lang="scss">
.tn-modal-class { .tn-modal-class {
.custom-modal-content { .custom-modal-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 40rpx; padding: 40rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.icon { .icon {
font-size: 100rpx; font-size: 100rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
color: $tn-main-color; color: $tn-main-color;
} }
.text { .text {
font-size: 40rpx; font-size: 40rpx;
} }
} }
} }
</style> </style>
componentsPage/nav-bar/nav-bar.vue
+187 -187
View File
@@ -1,188 +1,188 @@
<template> <template>
<view class="components-nav_bar"> <view class="components-nav_bar">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar <tn-nav-bar
v-if="mode === 'normal'" v-if="mode === 'normal'"
fixed fixed
:height="height" :height="height"
:backgroundColor="backgroundColor" :backgroundColor="backgroundColor"
:fontColor="fontColor" :fontColor="fontColor"
:alpha="alpha" :alpha="alpha"
:bottomShadow="bottomShadow" :bottomShadow="bottomShadow"
>navBar导航栏</tn-nav-bar> >navBar导航栏</tn-nav-bar>
<tn-nav-bar <tn-nav-bar
v-if="mode === 'customBack'" v-if="mode === 'customBack'"
fixed fixed
:height="height" :height="height"
:customBack="true" :customBack="true"
:backgroundColor="backgroundColor" :backgroundColor="backgroundColor"
:fontColor="fontColor" :fontColor="fontColor"
:alpha="alpha" :alpha="alpha"
:bottomShadow="bottomShadow" :bottomShadow="bottomShadow"
> >
<view slot="back" class='tn-custom-nav-bar__back'> <view slot="back" class='tn-custom-nav-bar__back'>
<view><text class='tn-icon-left'></text></view> <view><text class='tn-icon-left'></text></view>
<view><text class='tn-icon-home-capsule-fill'></text></view> <view><text class='tn-icon-home-capsule-fill'></text></view>
</view> </view>
<view class="custom-nav-content"> <view class="custom-nav-content">
<view class="search-content"> <view class="search-content">
<tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showRightIcon="true" rightIcon="search"></tn-input> <tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showRightIcon="true" rightIcon="search"></tn-input>
</view> </view>
</view> </view>
</tn-nav-bar> </tn-nav-bar>
<tn-nav-bar <tn-nav-bar
v-if="mode === 'customNav'" v-if="mode === 'customNav'"
fixed fixed
:height="height" :height="height"
:isBack="false" :isBack="false"
:backgroundColor="backgroundColor" :backgroundColor="backgroundColor"
:fontColor="fontColor" :fontColor="fontColor"
:alpha="alpha" :alpha="alpha"
:bottomShadow="bottomShadow" :bottomShadow="bottomShadow"
> >
<view class="custom-nav-content"> <view class="custom-nav-content">
<view class="search-content"> <view class="search-content">
<tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showRightIcon="true" rightIcon="search"></tn-input> <tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showRightIcon="true" rightIcon="search"></tn-input>
</view> </view>
</view> </view>
</tn-nav-bar> </tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click" :noDemo="true"> <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click" :noDemo="true">
</dynamic-demo-template> </dynamic-demo-template>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue' import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default { export default {
name: 'componentsNavbar', name: 'componentsNavbar',
components: {dynamicDemoTemplate}, components: {dynamicDemoTemplate},
data() { data() {
return { return {
searchValue: '', searchValue: '',
mode: 'normal', mode: 'normal',
height: 0, height: 0,
backgroundColor: '#FFFFFF', backgroundColor: '#FFFFFF',
fontColor: '', fontColor: '',
alpha: false, alpha: false,
bottomShadow: true, bottomShadow: true,
tips: ['无需依赖额外的样式文件','使用tn-toast组件'], tips: ['无需依赖额外的样式文件','使用tn-toast组件'],
sectionList: [ sectionList: [
{ {
name: '参数切换', name: '参数切换',
section: [ section: [
{ {
title: '高度', title: '高度',
optional: ['默认','38','80'], optional: ['默认','38','80'],
methods: 'heightChange' methods: 'heightChange'
}, },
{ {
title: '样式', title: '样式',
optional: ['默认','自定义返回按钮', '隐藏返回栏自定义内容'], optional: ['默认','自定义返回按钮', '隐藏返回栏自定义内容'],
methods: 'modeChange' methods: 'modeChange'
}, },
{ {
title: '背景颜色', title: '背景颜色',
optional: ['默认','#01BEFF','tn-bg-grey','tn-main-gradient-indigo','透明'], optional: ['默认','#01BEFF','tn-bg-grey','tn-main-gradient-indigo','透明'],
methods: 'backgroundColorChange' methods: 'backgroundColorChange'
}, },
{ {
title: '底部阴影', title: '底部阴影',
optional: ['默认','隐藏'], optional: ['默认','隐藏'],
methods: 'bottomShadowChange' methods: 'bottomShadowChange'
} }
] ]
} }
] ]
} }
}, },
methods: { methods: {
click(event) { click(event) {
this[event.methods] && this[event.methods](event) this[event.methods] && this[event.methods](event)
}, },
// 切换高度 // 切换高度
heightChange(event) { heightChange(event) {
this.height = event.index === 0 ? 0 : Number(event.name) this.height = event.index === 0 ? 0 : Number(event.name)
}, },
// 切换样式 // 切换样式
modeChange(event) { modeChange(event) {
switch(event.index) { switch(event.index) {
case 0: case 0:
this.mode = 'normal' this.mode = 'normal'
break break
case 1: case 1:
this.mode = 'customBack' this.mode = 'customBack'
break break
case 2: case 2:
this.mode = 'customNav' this.mode = 'customNav'
break break
} }
}, },
// 切换背景颜色 // 切换背景颜色
backgroundColorChange(event) { backgroundColorChange(event) {
switch(event.index) { switch(event.index) {
case 0: case 0:
this.backgroundColor = '#FFFFFF' this.backgroundColor = '#FFFFFF'
this.fontColor = '' this.fontColor = ''
this.alpha = false this.alpha = false
break break
case 1: case 1:
case 2: case 2:
case 3: case 3:
this.fontColor = '#FFFFFF' this.fontColor = '#FFFFFF'
this.backgroundColor = event.name this.backgroundColor = event.name
this.alpha = false this.alpha = false
break break
case 4: case 4:
this.backgroundColor = '' this.backgroundColor = ''
this.fontColor = '' this.fontColor = ''
this.alpha = true this.alpha = true
break break
} }
}, },
// 切换底部阴影 // 切换底部阴影
bottomShadowChange(event) { bottomShadowChange(event) {
this.bottomShadow = event.index === 0 ? true : false this.bottomShadow = event.index === 0 ? true : false
} }
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss'; @import '@/static/css/templatePage/custom_nav_bar.scss';
.custom-nav-content { .custom-nav-content {
width: 80%; width: 80%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 20rpx; margin-left: 20rpx;
.search-content { .search-content {
flex: 1; flex: 1;
.search-input { .search-input {
border-radius: 30rpx; border-radius: 30rpx;
/* #ifdef MP-WEIXIN */ /* #ifdef MP-WEIXIN */
/deep/ .tn-input-class { /deep/ .tn-input-class {
border-radius: 30rpx; border-radius: 30rpx;
} }
/* #endif */ /* #endif */
} }
} }
} }
</style> </style>
componentsPage/notice-bar/notice-bar.vue
+92 -92
View File
@@ -1,93 +1,93 @@
<template> <template>
<view class="components-notice-bar tn-safe-area-inset-bottom"> <view class="components-notice-bar tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>noticeBar通知栏</tn-nav-bar> <tn-nav-bar fixed>noticeBar通知栏</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="水平连续滚动"> <demo-title title="水平连续滚动">
<tn-notice-bar :list="list"></tn-notice-bar> <tn-notice-bar :list="list"></tn-notice-bar>
</demo-title> </demo-title>
<demo-title title="水平不连续滚动"> <demo-title title="水平不连续滚动">
<tn-notice-bar :list="list" :circular="false"></tn-notice-bar> <tn-notice-bar :list="list" :circular="false"></tn-notice-bar>
</demo-title> </demo-title>
<demo-title title="垂直滚动"> <demo-title title="垂直滚动">
<tn-notice-bar :list="list" mode="vertical"></tn-notice-bar> <tn-notice-bar :list="list" mode="vertical"></tn-notice-bar>
</demo-title> </demo-title>
<demo-title title="手动滚动"> <demo-title title="手动滚动">
<tn-notice-bar :list="list" mode="vertical" :autoplay="false"></tn-notice-bar> <tn-notice-bar :list="list" mode="vertical" :autoplay="false"></tn-notice-bar>
</demo-title> </demo-title>
<demo-title title="停止滚动"> <demo-title title="停止滚动">
<tn-notice-bar :list="list" mode="vertical" playStatus="paused"></tn-notice-bar> <tn-notice-bar :list="list" mode="vertical" playStatus="paused"></tn-notice-bar>
</demo-title> </demo-title>
<demo-title title="慢速滚动"> <demo-title title="慢速滚动">
<tn-notice-bar :list="list" :speed="100"></tn-notice-bar> <tn-notice-bar :list="list" :speed="100"></tn-notice-bar>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-notice-bar :list="list" mode="vertical" :duration="5000"></tn-notice-bar> <tn-notice-bar :list="list" mode="vertical" :duration="5000"></tn-notice-bar>
</view> </view>
</demo-title> </demo-title>
<demo-title title="显示关闭按钮"> <demo-title title="显示关闭按钮">
<tn-notice-bar :show="closeNoticeShow" :list="list" :closeBtn="true" @close="closeNoticeShow = false"></tn-notice-bar> <tn-notice-bar :show="closeNoticeShow" :list="list" :closeBtn="true" @close="closeNoticeShow = false"></tn-notice-bar>
</demo-title> </demo-title>
<demo-title title="隐藏左右两侧图标"> <demo-title title="隐藏左右两侧图标">
<tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="false" :leftIcon="false" @close="closeNoticeShow = false"></tn-notice-bar> <tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="false" :leftIcon="false" @close="closeNoticeShow = false"></tn-notice-bar>
</demo-title> </demo-title>
<demo-title title="自定义左右两侧图标"> <demo-title title="自定义左右两侧图标">
<tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" :leftIcon="true" rightIconName="set" leftIconName="all" @close="closeNoticeShow = false"></tn-notice-bar> <tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" :leftIcon="true" rightIconName="set" leftIconName="all" @close="closeNoticeShow = false"></tn-notice-bar>
</demo-title> </demo-title>
<demo-title title="自定义大小"> <demo-title title="自定义大小">
<tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" :fontSize="34" :leftIconSize="40" :rightIconSize="40" @close="closeNoticeShow = false"></tn-notice-bar> <tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" :fontSize="34" :leftIconSize="40" :rightIconSize="40" @close="closeNoticeShow = false"></tn-notice-bar>
</demo-title> </demo-title>
<demo-title title="自定义颜色"> <demo-title title="自定义颜色">
<tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" backgroundColor="#EFEFEF" @close="closeNoticeShow = false"></tn-notice-bar> <tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" backgroundColor="#EFEFEF" @close="closeNoticeShow = false"></tn-notice-bar>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" backgroundColor="tn-main-gradient-indigo" @close="closeNoticeShow = false"></tn-notice-bar> <tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" backgroundColor="tn-main-gradient-indigo" @close="closeNoticeShow = false"></tn-notice-bar>
</view> </view>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsNoticeBar', name: 'componentsNoticeBar',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
list: [ list: [
'TuniaoUI现已发布V1.0.0', 'TuniaoUI现已发布V1.0.0',
'今天天气晴朗，适合处理bug', '今天天气晴朗，适合处理bug',
'TuniaoUIV2.0.0即将发布', 'TuniaoUIV2.0.0即将发布',
'今天想提前下班，领导不允许："你提前走人就算你是旷工了啊！"' '今天想提前下班，领导不允许："你提前走人就算你是旷工了啊！"'
], ],
closeNoticeShow: true, closeNoticeShow: true,
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>
componentsPage/number-box/number-box.vue
+79 -79
View File
@@ -1,80 +1,80 @@
<template> <template>
<view class="components-number_box tn-safe-area-inset-bottom"> <view class="components-number_box tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>numberBox步进输入</tn-nav-bar> <tn-nav-bar fixed>numberBox步进输入</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基本使用"> <demo-title title="基本使用">
<view class="tn-flex tn-flex-col-center tn-flex-row-left"> <view class="tn-flex tn-flex-col-center tn-flex-row-left">
<view> <view>
<tn-number-box v-model="value1"></tn-number-box> <tn-number-box v-model="value1"></tn-number-box>
</view> </view>
<view class="tn-margin-left"> <view class="tn-margin-left">
<tn-number-box v-model="value1" :disabled="true"></tn-number-box> <tn-number-box v-model="value1" :disabled="true"></tn-number-box>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="设置步进值"> <demo-title title="设置步进值">
<tn-number-box v-model="value2" :step="2"></tn-number-box> <tn-number-box v-model="value2" :step="2"></tn-number-box>
</demo-title> </demo-title>
<demo-title title="设置最小最大值"> <demo-title title="设置最小最大值">
<tn-number-box v-model="value3" :min="50" :max="1000"></tn-number-box> <tn-number-box v-model="value3" :min="50" :max="1000"></tn-number-box>
</demo-title> </demo-title>
<demo-title title="设置允许输入小数"> <demo-title title="设置允许输入小数">
<tn-number-box v-model="value4" :positiveInteger="false" :step="0.5"></tn-number-box> <tn-number-box v-model="value4" :positiveInteger="false" :step="0.5"></tn-number-box>
</demo-title> </demo-title>
<demo-title title="禁止输入"> <demo-title title="禁止输入">
<tn-number-box v-model="value5" :disabledInput="true"></tn-number-box> <tn-number-box v-model="value5" :disabledInput="true"></tn-number-box>
</demo-title> </demo-title>
<demo-title title="自定义尺寸"> <demo-title title="自定义尺寸">
<tn-number-box v-model="value6" :inputWidth="140" :inputHeight="60" :fontSize="40"></tn-number-box> <tn-number-box v-model="value6" :inputWidth="140" :inputHeight="60" :fontSize="40"></tn-number-box>
</demo-title> </demo-title>
<demo-title title="自定义颜色"> <demo-title title="自定义颜色">
<tn-number-box v-model="value7" backgroundColor="#AAAAAA" fontColor="#838383"></tn-number-box> <tn-number-box v-model="value7" backgroundColor="#AAAAAA" fontColor="#838383"></tn-number-box>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsNumberBox', name: 'componentsNumberBox',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
value1: 0, value1: 0,
value2: 0, value2: 0,
value3: 0, value3: 0,
value4: 0, value4: 0,
value5: 0, value5: 0,
value6: 0, value6: 0,
value7: 0 value7: 0
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-number_box { .components-number_box {
min-height: 100vh; min-height: 100vh;
} }
</style> </style>
componentsPage/picker/picker.vue
+303 -303
View File
@@ -1,303 +1,303 @@
<template> <template>
<view class="components-picker"> <view class="components-picker">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Picker选择器</tn-nav-bar> <tn-nav-bar fixed>Picker选择器</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click"> <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
<view class="tn-flex tn-flex-row-center"><tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @tap="showPicker">弹出Picker</tn-button></view> <view class="tn-flex tn-flex-row-center"><tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @tap="showPicker">弹出Picker</tn-button></view>
<view class="picker-result tn-border-dashed"> <view class="picker-result tn-border-dashed">
{{ result }} {{ result }}
</view> </view>
</dynamic-demo-template> </dynamic-demo-template>
</view> </view>
<!-- picker --> <!-- picker -->
<tn-picker <tn-picker
v-model="show" v-model="show"
:mode="mode" :mode="mode"
:params="params" :params="params"
:range="range" :range="range"
:rangeKey="rangeKey" :rangeKey="rangeKey"
:defaultSelector="defaultSelector" :defaultSelector="defaultSelector"
:showTimeTag="showTimeTag" :showTimeTag="showTimeTag"
:startYear="startYear" :startYear="startYear"
:endYear="endYear" :endYear="endYear"
:defaultTime="defaultTime" :defaultTime="defaultTime"
:defaultRegin="defaultRegion" :defaultRegin="defaultRegion"
:areaCode="areaCode" :areaCode="areaCode"
:maskCloseable="maskCloseable" :maskCloseable="maskCloseable"
@cancel="cancelPicker" @cancel="cancelPicker"
@confirm="confirmPicker" @confirm="confirmPicker"
> >
</tn-picker> </tn-picker>
</view> </view>
</template> </template>
<script> <script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue' import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default { export default {
name: 'componentsPicker', name: 'componentsPicker',
components: {dynamicDemoTemplate}, components: {dynamicDemoTemplate},
data() { data() {
return { return {
result: 'Picker结果', result: 'Picker结果',
show: false, show: false,
mode: 'selector', mode: 'selector',
params: { params: {
year: true, year: true,
month: true, month: true,
day: true, day: true,
hour: false, hour: false,
minute: false, minute: false,
second: false, second: false,
province: true, province: true,
city: true, city: true,
area: true, area: true,
timestamp: true timestamp: true
}, },
showTimeTag: false, showTimeTag: false,
startYear: 2000, startYear: 2000,
endYear: 2100, endYear: 2100,
defaultTime: '2021/10/01 12:00:00', defaultTime: '2021/10/01 12:00:00',
defaultRegion: ['广东省','广州市','天河区'], defaultRegion: ['广东省','广州市','天河区'],
areaCode: [], areaCode: [],
maskCloseable: true, maskCloseable: true,
range: ['哆啦A梦','大熊','小夫','静香','胖虎'], range: ['哆啦A梦','大熊','小夫','静香','胖虎'],
rangeKey: '', rangeKey: '',
defaultSelector: [0], defaultSelector: [0],
tips: ['无需依赖额外的样式文件','使用tn-picker组件'], tips: ['无需依赖额外的样式文件','使用tn-picker组件'],
sectionList: [ sectionList: [
{ {
name: '参数切换', name: '参数切换',
section: [ section: [
{ {
title: '模式', title: '模式',
optional: ['单列','多列','时间','地区'], optional: ['单列','多列','时间','地区'],
methods: 'modeChange' methods: 'modeChange'
}, },
{ {
title: '显示时分秒', title: '显示时分秒',
optional: ['隐藏','显示'], optional: ['隐藏','显示'],
methods: 'timeSecondChange', methods: 'timeSecondChange',
show: false show: false
}, },
{ {
title: '显示时间单位', title: '显示时间单位',
optional: ['隐藏','显示'], optional: ['隐藏','显示'],
methods: 'showTimeTagChange', methods: 'showTimeTagChange',
show: false show: false
}, },
{ {
title: '指定起始年份', title: '指定起始年份',
optional: ['2000-2100','2020-2030'], optional: ['2000-2100','2020-2030'],
methods: 'timeRangeChange', methods: 'timeRangeChange',
show: false show: false
}, },
{ {
title: '默认时间', title: '默认时间',
optional: ['2021/10/01 12:00:00','2021-10-01 17:00:00'], optional: ['2021/10/01 12:00:00','2021-10-01 17:00:00'],
methods: 'defaultTimeChange', methods: 'defaultTimeChange',
show: false show: false
}, },
{ {
title: '默认地区', title: '默认地区',
optional: ['广东省-广州市-天河区','44-4401-440107'], optional: ['广东省-广州市-天河区','44-4401-440107'],
methods: 'defaultRegionChange', methods: 'defaultRegionChange',
show: false show: false
}, },
{ {
title: '点击遮罩关闭', title: '点击遮罩关闭',
optional: ['是','否'], optional: ['是','否'],
methods: 'maskCloseableChange' methods: 'maskCloseableChange'
} }
] ]
} }
] ]
} }
}, },
methods: { methods: {
click(event) { click(event) {
this[event.methods] && this[event.methods](event) this[event.methods] && this[event.methods](event)
}, },
// 弹出Picker // 弹出Picker
showPicker(event) { showPicker(event) {
this.openPicker() this.openPicker()
}, },
// 切换模式 // 切换模式
modeChange(event) { modeChange(event) {
switch(event.index) { switch(event.index) {
case 0: case 0:
this.mode = 'selector' this.mode = 'selector'
this.range = ['哆啦A梦','大熊','小夫','静香','胖虎'] this.range = ['哆啦A梦','大熊','小夫','静香','胖虎']
this.defaultSelector = [0] this.defaultSelector = [0]
this.rangeKey = '' this.rangeKey = ''
this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], false) this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], false)
this.$refs.demoTemplate.updateSectionBtnsState(5, false) this.$refs.demoTemplate.updateSectionBtnsState(5, false)
break break
case 1: case 1:
this.mode = 'multiSelector' this.mode = 'multiSelector'
this.range = [ this.range = [
[ [
{ {
id: 1, id: 1,
name: '哆啦A梦' name: '哆啦A梦'
}, },
{ {
id: 2, id: 2,
name: '大熊' name: '大熊'
}, },
{ {
id: 3, id: 3,
name: '小夫' name: '小夫'
}, },
{ {
id: 4, id: 4,
name: '静香' name: '静香'
}, },
{ {
id: 5, id: 5,
name: '胖虎' name: '胖虎'
}, },
], ],
[ [
{ {
id: 1, id: 1,
name: '家' name: '家'
}, },
{ {
id: 2, id: 2,
name: '学校' name: '学校'
}, },
{ {
id: 3, id: 3,
name: '操场' name: '操场'
} }
] ]
] ]
this.defaultSelector = [0,0] this.defaultSelector = [0,0]
this.rangeKey = 'name' this.rangeKey = 'name'
this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], false) this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], false)
this.$refs.demoTemplate.updateSectionBtnsState(5, false) this.$refs.demoTemplate.updateSectionBtnsState(5, false)
break break
case 2: case 2:
this.mode = 'time' this.mode = 'time'
this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], true) this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], true)
this.$refs.demoTemplate.updateSectionBtnsState(5, false) this.$refs.demoTemplate.updateSectionBtnsState(5, false)
break break
case 3: case 3:
this.mode = 'region' this.mode = 'region'
this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], false) this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], false)
this.$refs.demoTemplate.updateSectionBtnsState(5, true) this.$refs.demoTemplate.updateSectionBtnsState(5, true)
break break
} }
this.openPicker() this.openPicker()
}, },
// 切换显示时分秒 // 切换显示时分秒
timeSecondChange(event) { timeSecondChange(event) {
this.params = { this.params = {
year: true, year: true,
month: true, month: true,
day: true, day: true,
hour: true, hour: true,
minute: true, minute: true,
second: true, second: true,
province: true, province: true,
city: true, city: true,
area: true, area: true,
timestamp: true timestamp: true
} }
this.openPicker() this.openPicker()
}, },
// 切换显示时间单位 // 切换显示时间单位
showTimeTagChange(event) { showTimeTagChange(event) {
this.showTimeTag = event.index === 0 ? false : true this.showTimeTag = event.index === 0 ? false : true
this.openPicker() this.openPicker()
}, },
// 切换起始年份 // 切换起始年份
timeRangeChange(event) { timeRangeChange(event) {
if (event.index === 0) { if (event.index === 0) {
this.startYear = 2000 this.startYear = 2000
this.endYear = 2100 this.endYear = 2100
} else if (event.index === 1) { } else if (event.index === 1) {
this.startYear = 2020 this.startYear = 2020
this.endYear = 2030 this.endYear = 2030
} }
this.openPicker() this.openPicker()
}, },
// 切换默认时间 // 切换默认时间
defaultTimeChange(event) { defaultTimeChange(event) {
this.defaultTime = event.name this.defaultTime = event.name
this.openPicker() this.openPicker()
}, },
// 切换默认地区 // 切换默认地区
defaultRegionChange(event) { defaultRegionChange(event) {
if (event.index === 0) { if (event.index === 0) {
this.defaultRegion = ['广东省','广州市','天河区'] this.defaultRegion = ['广东省','广州市','天河区']
this.areaCode = [] this.areaCode = []
} else if (event.index === 1) { } else if (event.index === 1) {
this.defaultRegion = [] this.defaultRegion = []
this.areaCode = ['44','4401','440111'] this.areaCode = ['44','4401','440111']
} }
this.openPicker() this.openPicker()
}, },
// 切换点击遮罩关闭 // 切换点击遮罩关闭
maskCloseableChange(event) { maskCloseableChange(event) {
this.maskCloseable = event.index === 0 ? true : false this.maskCloseable = event.index === 0 ? true : false
this.openPicker() this.openPicker()
}, },
// 点击取消按钮 // 点击取消按钮
cancelPicker(event) { cancelPicker(event) {
this.$t.messageUtils.toast('点击了取消按钮') this.$t.message.toast('点击了取消按钮')
}, },
// 点击确认按钮 // 点击确认按钮
confirmPicker(event) { confirmPicker(event) {
switch (this.mode) { switch (this.mode) {
case 'selector': case 'selector':
this.result = this.range[event[0]] this.result = this.range[event[0]]
this.defaultSelector = event this.defaultSelector = event
break break
case 'multiSelector': case 'multiSelector':
this.result = `${this.range[0][event[0]][this.rangeKey]} - ${this.range[1][event[1]][this.rangeKey]}` this.result = `${this.range[0][event[0]][this.rangeKey]} - ${this.range[1][event[1]][this.rangeKey]}`
this.defaultSelector = event this.defaultSelector = event
break break
case 'time': case 'time':
this.result = `${event.year}-${event.month}-${event.day} ${this.params.hour ? event.hour+':' : ''}${this.params.minute ? event.minute+':' : ''}${this.params.second ? event.second : ''}` this.result = `${event.year}-${event.month}-${event.day} ${this.params.hour ? event.hour+':' : ''}${this.params.minute ? event.minute+':' : ''}${this.params.second ? event.second : ''}`
this.defaultTime = this.result this.defaultTime = this.result
break break
case 'region': case 'region':
this.result = `${event.province.label}-${event.city.label}-${event.area.label}` this.result = `${event.province.label}-${event.city.label}-${event.area.label}`
break break
} }
}, },
// 打开Picker // 打开Picker
openPicker() { openPicker() {
this.show = true this.show = true
}, },
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.picker-result { .picker-result {
margin-top: 20rpx; margin-top: 20rpx;
padding: 10rpx 30rpx; padding: 10rpx 30rpx;
background-color: $tn-font-holder-color; background-color: $tn-font-holder-color;
text-align: center; text-align: center;
} }
</style> </style>
componentsPage/popup/popup.vue
+239 -239
View File
@@ -1,240 +1,240 @@
<template> <template>
<view class="components-popup"> <view class="components-popup">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>弹框</tn-nav-bar> <tn-nav-bar fixed>弹框</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click"> <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
<tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" :disabled="show" @click="showPopup">弹出弹框</tn-button> <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" :disabled="show" @click="showPopup">弹出弹框</tn-button>
</dynamic-demo-template> </dynamic-demo-template>
</view> </view>
<!-- popup --> <!-- popup -->
<tn-popup <tn-popup
v-model="show" v-model="show"
:marginTop="vuex_custom_bar_height" :marginTop="vuex_custom_bar_height"
length="50%" length="50%"
:mode="mode" :mode="mode"
:backgroundColor="backgroundColor" :backgroundColor="backgroundColor"
:width="width" :width="width"
:height="height" :height="height"
:borderRadius="borderRadius" :borderRadius="borderRadius"
:closeBtn="closeBtn" :closeBtn="closeBtn"
:closeBtnIcon="closeBtnIcon" :closeBtnIcon="closeBtnIcon"
:closeBtnPosition="closeBtnPosition" :closeBtnPosition="closeBtnPosition"
:maskCloseable="maskCloseable" :maskCloseable="maskCloseable"
@close="closedPopup" @close="closedPopup"
> >
<view class="popup-content" :class="{'popup-content--center': mode === 'center'}"> <view class="popup-content" :class="{'popup-content--center': mode === 'center'}">
<tn-button shape="round" @click="closedPopup" width="220rpx" fontColor="#080808">关闭弹窗</tn-button> <tn-button shape="round" @click="closedPopup" width="220rpx" fontColor="#080808">关闭弹窗</tn-button>
</view> </view>
</tn-popup> </tn-popup>
</view> </view>
</template> </template>
<script> <script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue' import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default { export default {
name: 'componentsPopup', name: 'componentsPopup',
components: {dynamicDemoTemplate}, components: {dynamicDemoTemplate},
data() { data() {
return { return {
show: false, show: false,
mode: 'left', mode: 'left',
backgroundColor: '', backgroundColor: '',
width: '', width: '',
height: '', height: '',
borderRadius: 0, borderRadius: 0,
closeBtn: true, closeBtn: true,
closeBtnIcon: 'close', closeBtnIcon: 'close',
closeBtnPosition: 'top-right', closeBtnPosition: 'top-right',
maskCloseable: true, maskCloseable: true,
popupShowSubsectionIndex: 1, popupShowSubsectionIndex: 1,
tips: ['无需依赖额外的样式文件','使用tn-popup组件, 如果使用了自定义顶部，需要设置marginTop属性为自定义顶部的高度'], tips: ['无需依赖额外的样式文件','使用tn-popup组件, 如果使用了自定义顶部，需要设置marginTop属性为自定义顶部的高度'],
sectionList: [ sectionList: [
{ {
name: '参数切换', name: '参数切换',
section: [ section: [
{ {
title: '背景颜色', title: '背景颜色',
optional: ['默认','tn-bg-grey--light','#C6D1D8'], optional: ['默认','tn-bg-grey--light','#C6D1D8'],
methods: 'backgroundColorChange' methods: 'backgroundColorChange'
}, },
{ {
title: '宽高', title: '宽高',
optional: ['默认','自定义'], optional: ['默认','自定义'],
methods: 'widthHeightChange' methods: 'widthHeightChange'
}, },
{ {
title: '圆角', title: '圆角',
optional: ['0','23'], optional: ['0','23'],
methods: 'borderRadiusChange' methods: 'borderRadiusChange'
}, },
{ {
title: '弹出位置', title: '弹出位置',
optional: ['上','下','中','左','右'], optional: ['上','下','中','左','右'],
methods: 'modeChange', methods: 'modeChange',
current: 3 current: 3
}, },
{ {
title: '关闭按钮', title: '关闭按钮',
optional: ['显示','隐藏'], optional: ['显示','隐藏'],
methods: 'closeBtnChange' methods: 'closeBtnChange'
}, },
{ {
title: '关闭按钮图标', title: '关闭按钮图标',
optional: ['close','cross-fill'], optional: ['close','cross-fill'],
methods: 'closeBtnIconChange' methods: 'closeBtnIconChange'
}, },
{ {
title: '关闭按钮位置', title: '关闭按钮位置',
optional: ['左上','右上','左下','右下'], optional: ['左上','右上','左下','右下'],
methods: 'closeBtnPositionChange', methods: 'closeBtnPositionChange',
current: 1 current: 1
}, },
{ {
title: '点击遮罩关闭', title: '点击遮罩关闭',
optional: ['是','否'], optional: ['是','否'],
methods: 'maskCloseableChange' methods: 'maskCloseableChange'
} }
] ]
} }
] ]
} }
}, },
methods: { methods: {
click(event) { click(event) {
this[event.methods] && this[event.methods](event) this[event.methods] && this[event.methods](event)
}, },
// 弹出弹框 // 弹出弹框
showPopup() { showPopup() {
this.openPopup() this.openPopup()
}, },
// 切换弹出位置 // 切换弹出位置
modeChange(event) { modeChange(event) {
switch(event.index) { switch(event.index) {
case 0: case 0:
this.mode = 'top' this.mode = 'top'
break break
case 1: case 1:
this.mode = 'bottom' this.mode = 'bottom'
break break
case 2: case 2:
this.mode = 'center' this.mode = 'center'
break break
case 3: case 3:
this.mode = 'left' this.mode = 'left'
break break
case 4: case 4:
this.mode = 'right' this.mode = 'right'
break break
} }
this.openPopup() this.openPopup()
}, },
// 切换背景颜色 // 切换背景颜色
backgroundColorChange(event) { backgroundColorChange(event) {
this.backgroundColor = event.index === 0 ? '' : event.name this.backgroundColor = event.index === 0 ? '' : event.name
this.openPopup() this.openPopup()
}, },
// 切换宽高设置 // 切换宽高设置
widthHeightChange(event) { widthHeightChange(event) {
if (event.index === 0) { if (event.index === 0) {
this.width = '' this.width = ''
this.height = '' this.height = ''
} else { } else {
this.width = this.mode !== 'center' ? '30%' : '60%' this.width = this.mode !== 'center' ? '30%' : '60%'
this.height = this.mode !== 'center' ? '30%' : '20%' this.height = this.mode !== 'center' ? '30%' : '20%'
} }
this.openPopup() this.openPopup()
}, },
// 切换圆角 // 切换圆角
borderRadiusChange(event) { borderRadiusChange(event) {
this.borderRadius = Number(event.name) this.borderRadius = Number(event.name)
this.openPopup() this.openPopup()
}, },
// 切换关闭按钮 // 切换关闭按钮
closeBtnChange(event) { closeBtnChange(event) {
if (event.index === 0) { if (event.index === 0) {
this.closeBtn = true this.closeBtn = true
this.$refs.demoTemplate.updateSectionBtnsState([5,6], true) this.$refs.demoTemplate.updateSectionBtnsState([5,6], true)
} else { } else {
this.closeBtn = false this.closeBtn = false
this.$refs.demoTemplate.updateSectionBtnsState([5,6], false) this.$refs.demoTemplate.updateSectionBtnsState([5,6], false)
} }
this.openPopup() this.openPopup()
}, },
// 切换关闭按钮图标 // 切换关闭按钮图标
closeBtnIconChange(event) { closeBtnIconChange(event) {
this.closeBtnIcon = event.name this.closeBtnIcon = event.name
this.openPopup() this.openPopup()
}, },
// 切换关闭按钮的位置 // 切换关闭按钮的位置
closeBtnPositionChange(event) { closeBtnPositionChange(event) {
switch(event.index) { switch(event.index) {
case 0: case 0:
this.closeBtnPosition = 'top-left' this.closeBtnPosition = 'top-left'
break break
case 1: case 1:
this.closeBtnPosition = 'top-right' this.closeBtnPosition = 'top-right'
break break
case 2: case 2:
this.closeBtnPosition = 'bottom-left' this.closeBtnPosition = 'bottom-left'
break break
case 3: case 3:
this.closeBtnPosition = 'bottom-right' this.closeBtnPosition = 'bottom-right'
break break
} }
this.openPopup() this.openPopup()
}, },
// 切换点击遮罩关闭 // 切换点击遮罩关闭
maskCloseableChange(event) { maskCloseableChange(event) {
if (event.index === 0) { if (event.index === 0) {
this.maskCloseable = true this.maskCloseable = true
} else { } else {
this.maskCloseable = false this.maskCloseable = false
this.closeBtn = true this.closeBtn = true
this.$refs.demoTemplate.updateSectionBtnsValue(0, 4, 0) this.$refs.demoTemplate.updateSectionBtnsValue(0, 4, 0)
this.$refs.demoTemplate.updateSectionBtnsState([5,6], true) this.$refs.demoTemplate.updateSectionBtnsState([5,6], true)
} }
this.openPopup() this.openPopup()
}, },
// 打开Popup // 打开Popup
openPopup() { openPopup() {
this.show = true this.show = true
}, },
// 关闭Popup // 关闭Popup
closedPopup() { closedPopup() {
this.show = false this.show = false
} }
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.popup-content { .popup-content {
height: 100%; height: 100%;
width: auto; width: auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
&--center { &--center {
padding: 150rpx 50rpx; padding: 150rpx 50rpx;
} }
} }
</style> </style>
componentsPage/progress/progress.vue
+96 -96
View File
@@ -1,97 +1,97 @@
<template> <template>
<view class="components-progress tn-safe-area-inset-bottom"> <view class="components-progress tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Progress进度条</tn-nav-bar> <tn-nav-bar fixed>Progress进度条</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基本进度条"> <demo-title title="基本进度条">
<tn-line-progress :percent="30"></tn-line-progress> <tn-line-progress :percent="30"></tn-line-progress>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-line-progress :percent="50"></tn-line-progress> <tn-line-progress :percent="50"></tn-line-progress>
</view> </view>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-line-progress :percent="80"></tn-line-progress> <tn-line-progress :percent="80"></tn-line-progress>
</view> </view>
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap tn-margin-top"> <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap tn-margin-top">
<view> <view>
<tn-circle-progress :percent="30"></tn-circle-progress> <tn-circle-progress :percent="30"></tn-circle-progress>
</view> </view>
<view class="tn-margin-left"> <view class="tn-margin-left">
<tn-circle-progress :percent="50"></tn-circle-progress> <tn-circle-progress :percent="50"></tn-circle-progress>
</view> </view>
<view class="tn-margin-left"> <view class="tn-margin-left">
<tn-circle-progress :percent="80"></tn-circle-progress> <tn-circle-progress :percent="80"></tn-circle-progress>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="修改进度条颜色"> <demo-title title="修改进度条颜色">
<tn-line-progress :percent="50" activeColor="#2DE88D"></tn-line-progress> <tn-line-progress :percent="50" activeColor="#2DE88D"></tn-line-progress>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-line-progress :percent="50" activeColor="#31E749" inactiveColor="#FAD8D6"></tn-line-progress> <tn-line-progress :percent="50" activeColor="#31E749" inactiveColor="#FAD8D6"></tn-line-progress>
</view> </view>
</demo-title> </demo-title>
<demo-title title="显示条纹"> <demo-title title="显示条纹">
<tn-line-progress :percent="50" :striped="true"></tn-line-progress> <tn-line-progress :percent="50" :striped="true"></tn-line-progress>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-line-progress :percent="50" :striped="true" :stripedAnimation="false"></tn-line-progress> <tn-line-progress :percent="50" :striped="true" :stripedAnimation="false"></tn-line-progress>
</view> </view>
</demo-title> </demo-title>
<demo-title title="显示进度信息"> <demo-title title="显示进度信息">
<tn-line-progress :percent="50" :showPercent="true"></tn-line-progress> <tn-line-progress :percent="50" :showPercent="true"></tn-line-progress>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-line-progress :percent="50"> <tn-line-progress :percent="50">
<view class="tn-color-white">加载中</view> <view class="tn-color-white">加载中</view>
</tn-line-progress> </tn-line-progress>
</view> </view>
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap tn-margin-top"> <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap tn-margin-top">
<view> <view>
<tn-circle-progress :percent="50" :showPercent="true"></tn-circle-progress> <tn-circle-progress :percent="50" :showPercent="true"></tn-circle-progress>
</view> </view>
<view class="tn-margin-left"> <view class="tn-margin-left">
<tn-circle-progress :percent="50"> <tn-circle-progress :percent="50">
<view class="tn-color-red">加载中</view> <view class="tn-color-red">加载中</view>
</tn-circle-progress> </tn-circle-progress>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsProgress', name: 'componentsProgress',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-progress { .components-progress {
min-height: 100vh; min-height: 100vh;
} }
tn-line-progress, .tn-line-progress { tn-line-progress, .tn-line-progress {
width: 100%; width: 100%;
} }
</style> </style>
componentsPage/radio/radio.vue
+70 -70
View File
@@ -1,80 +1,80 @@
<template> <template>
<view class="components-radio tn-safe-area-inset-bottom"> <view class="components-radio tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Radio单选按钮</tn-nav-bar> <tn-nav-bar fixed>Radio单选按钮</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础"> <demo-title title="基础">
<tn-radio-group> <tn-radio-group>
<tn-radio name="选项1">选项1</tn-radio> <tn-radio name="选项1">选项1</tn-radio>
<tn-radio name="选项2" disabled>选项2(禁止选中)</tn-radio> <tn-radio name="选项2" disabled>选项2(禁止选中)</tn-radio>
<tn-radio name="选项3">选项3</tn-radio> <tn-radio name="选项3">选项3</tn-radio>
</tn-radio-group> </tn-radio-group>
</demo-title> </demo-title>
<demo-title title="方形选框"> <demo-title title="方形选框">
<tn-radio-group shape="square"> <tn-radio-group shape="square">
<tn-radio name="选项1">选项1</tn-radio> <tn-radio name="选项1">选项1</tn-radio>
<tn-radio name="选项2">选项2</tn-radio> <tn-radio name="选项2">选项2</tn-radio>
<tn-radio name="选项3">选项3</tn-radio> <tn-radio name="选项3">选项3</tn-radio>
</tn-radio-group> </tn-radio-group>
</demo-title> </demo-title>
<demo-title title="竖直排列"> <demo-title title="竖直排列">
<tn-radio-group width="100%" wrap> <tn-radio-group width="100%" wrap>
<tn-radio name="选项1">选项1</tn-radio> <tn-radio name="选项1">选项1</tn-radio>
<tn-radio name="选项2">选项2</tn-radio> <tn-radio name="选项2">选项2</tn-radio>
<tn-radio name="选项3">选项3</tn-radio> <tn-radio name="选项3">选项3</tn-radio>
</tn-radio-group> </tn-radio-group>
</demo-title> </demo-title>
<demo-title title="禁止点击标签"> <demo-title title="禁止点击标签">
<tn-radio-group :disabledLabel="true"> <tn-radio-group :disabledLabel="true">
<tn-radio name="选项1">选项1</tn-radio> <tn-radio name="选项1">选项1</tn-radio>
<tn-radio name="选项2">选项2</tn-radio> <tn-radio name="选项2">选项2</tn-radio>
<tn-radio name="选项3">选项3</tn-radio> <tn-radio name="选项3">选项3</tn-radio>
</tn-radio-group> </tn-radio-group>
</demo-title> </demo-title>
<demo-title title="自定义尺寸"> <demo-title title="自定义尺寸">
<view> <view>
<tn-radio-group :size="20" :iconSize="14"> <tn-radio-group :size="20" :iconSize="14">
<tn-radio name="选项1">选项1</tn-radio> <tn-radio name="选项1">选项1</tn-radio>
<tn-radio name="选项2">选项2</tn-radio> <tn-radio name="选项2">选项2</tn-radio>
<tn-radio name="选项3" :size="36" :iconSize="26">选项3</tn-radio> <tn-radio name="选项3" :size="36" :iconSize="26">选项3</tn-radio>
</tn-radio-group> </tn-radio-group>
</view> </view>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-radio-group :size="46" :iconSize="36"> <tn-radio-group :size="46" :iconSize="36">
<tn-radio name="选项1">选项1</tn-radio> <tn-radio name="选项1">选项1</tn-radio>
<tn-radio name="选项2">选项2</tn-radio> <tn-radio name="选项2">选项2</tn-radio>
<tn-radio name="选项3">选项3</tn-radio> <tn-radio name="选项3">选项3</tn-radio>
</tn-radio-group> </tn-radio-group>
</view> </view>
</demo-title> </demo-title>
<demo-title title="自定义颜色"> <demo-title title="自定义颜色">
<tn-radio-group activeColor="#31E749"> <tn-radio-group activeColor="#31E749">
<tn-radio name="选项1">选项1</tn-radio> <tn-radio name="选项1">选项1</tn-radio>
<tn-radio name="选项2">选项2</tn-radio> <tn-radio name="选项2">选项2</tn-radio>
<tn-radio name="选项3" activeColor="#E83A30">选项3</tn-radio> <tn-radio name="选项3" activeColor="#E83A30">选项3</tn-radio>
</tn-radio-group> </tn-radio-group>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsRadio', name: 'componentsRadio',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
componentsPage/rate/rate.vue
+83 -83
View File
@@ -1,84 +1,84 @@
<template> <template>
<view class="components-rate tn-safe-area-inset-bottom"> <view class="components-rate tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>rate评分</tn-nav-bar> <tn-nav-bar fixed>rate评分</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基本使用"> <demo-title title="基本使用">
<tn-rate v-model="value1"></tn-rate> <tn-rate v-model="value1"></tn-rate>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-rate v-model="value2" :count="8"></tn-rate> <tn-rate v-model="value2" :count="8"></tn-rate>
</view> </view>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-rate v-model="value2" :count="8" :disabled="true"></tn-rate> <tn-rate v-model="value2" :count="8" :disabled="true"></tn-rate>
</view> </view>
</demo-title> </demo-title>
<demo-title title="设置尺寸"> <demo-title title="设置尺寸">
<tn-rate v-model="value3" :size="24"></tn-rate> <tn-rate v-model="value3" :size="24"></tn-rate>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-rate v-model="value4"></tn-rate> <tn-rate v-model="value4"></tn-rate>
</view> </view>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-rate v-model="value5" :size="68"></tn-rate> <tn-rate v-model="value5" :size="68"></tn-rate>
</view> </view>
</demo-title> </demo-title>
<demo-title title="可以选择半星"> <demo-title title="可以选择半星">
<tn-rate v-model="value6" :size="80" :allowHalf="true"></tn-rate> <tn-rate v-model="value6" :size="80" :allowHalf="true"></tn-rate>
</demo-title> </demo-title>
<demo-title title="自定义颜色"> <demo-title title="自定义颜色">
<tn-rate v-model="value7" inactiveColor="#E83A30" activeColor="#31E749"></tn-rate> <tn-rate v-model="value7" inactiveColor="#E83A30" activeColor="#31E749"></tn-rate>
</demo-title> </demo-title>
<demo-title title="自定义图标"> <demo-title title="自定义图标">
<tn-rate v-model="value8" inactiveIcon="emoji-sad" activeIcon="emoji-good-fill"></tn-rate> <tn-rate v-model="value8" inactiveIcon="emoji-sad" activeIcon="emoji-good-fill"></tn-rate>
</demo-title> </demo-title>
<demo-title title="根据选择数量显示不同信息"> <demo-title title="根据选择数量显示不同信息">
<tn-rate v-model="value9" :colors="colors" :icons="icons"></tn-rate> <tn-rate v-model="value9" :colors="colors" :icons="icons"></tn-rate>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsRate', name: 'componentsRate',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
value1: 0, value1: 0,
value2: 0, value2: 0,
value3: 0, value3: 0,
value4: 0, value4: 0,
value5: 0, value5: 0,
value6: 0, value6: 0,
value7: 0, value7: 0,
value8: 0, value8: 0,
value9: 0, value9: 0,
colors: ['#01BEFF','#3D7EFF','#31C9E8'], colors: ['#01BEFF','#3D7EFF','#31C9E8'],
icons: ['star-fill','praise-fill','flower-fill'] icons: ['star-fill','praise-fill','flower-fill']
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-rate { .components-rate {
min-height: 100vh; min-height: 100vh;
} }
</style> </style>
componentsPage/read-more/read-more.vue
+60 -60
View File
@@ -1,52 +1,52 @@
<template> <template>
<view class="components-read-more tn-safe-area-inset-bottom"> <view class="components-read-more tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>ReadMore查看更多</tn-nav-bar> <tn-nav-bar fixed>ReadMore查看更多</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基本使用"> <demo-title title="基本使用">
<tn-read-more> <tn-read-more>
<rich-text :nodes="content"></rich-text> <rich-text :nodes="content"></rich-text>
</tn-read-more> </tn-read-more>
</demo-title> </demo-title>
<demo-title title="允许展开后收起"> <demo-title title="允许展开后收起">
<tn-read-more :closeBtn="true"> <tn-read-more :closeBtn="true">
<rich-text :nodes="content"></rich-text> <rich-text :nodes="content"></rich-text>
</tn-read-more> </tn-read-more>
</demo-title> </demo-title>
<demo-title title="修改显示内容的高度"> <demo-title title="修改显示内容的高度">
<tn-read-more :closeBtn="true" :showHeight="200"> <tn-read-more :closeBtn="true" :showHeight="200">
<rich-text :nodes="content"></rich-text> <rich-text :nodes="content"></rich-text>
</tn-read-more> </tn-read-more>
</demo-title> </demo-title>
<demo-title title="自定义展开收起文本和图标"> <demo-title title="自定义展开收起文本和图标">
<tn-read-more :closeBtn="true" openText="付费查看剩余内容" openIcon="lucky-money" closeText="下次再看" closeIcon="close"> <tn-read-more :closeBtn="true" openText="付费查看剩余内容" openIcon="lucky-money" closeText="下次再看" closeIcon="close">
<rich-text :nodes="content"></rich-text> <rich-text :nodes="content"></rich-text>
</tn-read-more> </tn-read-more>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsReadMore', name: 'componentsReadMore',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
content: `噫吁嚱，危乎高哉！ content: `噫吁嚱，危乎高哉！
蜀道之难，难于上青天！ 蜀道之难，难于上青天！
蚕丛及鱼凫，开国何茫然！ 蚕丛及鱼凫，开国何茫然！
@@ -70,15 +70,15 @@
所守或匪亲，化为狼与豺。 所守或匪亲，化为狼与豺。
朝避猛虎，夕避长蛇，磨牙吮血，杀人如麻。 朝避猛虎，夕避长蛇，磨牙吮血，杀人如麻。
锦城虽云乐，不如早还家。 锦城虽云乐，不如早还家。
蜀道之难，难于上青天，侧身西望长咨嗟！`, 蜀道之难，难于上青天，侧身西望长咨嗟！`,
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>
componentsPage/scroll-list/scroll-list.vue
+135 -135
View File
@@ -1,135 +1,135 @@
<template> <template>
<view class="components-scroll-list tn-safe-area-inset-bottom"> <view class="components-scroll-list tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>ScrollList横向滚动</tn-nav-bar> <tn-nav-bar fixed>ScrollList横向滚动</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基本使用"> <demo-title title="基本使用">
<tn-scroll-list> <tn-scroll-list>
<view class="tn-flex tn-margin-sm"> <view class="tn-flex tn-margin-sm">
<block v-for="(item, index) in 14" :key="index"> <block v-for="(item, index) in 14" :key="index">
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius"> <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center"> <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$t.colorUtils.getRandomCoolBgClass(index)]"> <view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$t.color.getRandomCoolBgClass(index)]">
<view class="tn-icon-gloves-fill"></view> <view class="tn-icon-gloves-fill"></view>
</view> </view>
<view class="tn-color-black tn-text-lg tn-text-center"> <view class="tn-color-black tn-text-lg tn-text-center">
<text class="tn-text-ellipsis">傻北</text> <text class="tn-text-ellipsis">傻北</text>
</view> </view>
</view> </view>
</view> </view>
</block> </block>
</view> </view>
</tn-scroll-list> </tn-scroll-list>
</demo-title> </demo-title>
<demo-title title="隐藏指示器"> <demo-title title="隐藏指示器">
<tn-scroll-list :indicator="false"> <tn-scroll-list :indicator="false">
<view class="tn-flex tn-margin-sm"> <view class="tn-flex tn-margin-sm">
<block v-for="(item, index) in 14" :key="index"> <block v-for="(item, index) in 14" :key="index">
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius"> <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center"> <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$t.colorUtils.getRandomCoolBgClass(index)]"> <view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$t.color.getRandomCoolBgClass(index)]">
<view class="tn-icon-gloves-fill"></view> <view class="tn-icon-gloves-fill"></view>
</view> </view>
<view class="tn-color-black tn-text-lg tn-text-center"> <view class="tn-color-black tn-text-lg tn-text-center">
<text class="tn-text-ellipsis">傻北</text> <text class="tn-text-ellipsis">傻北</text>
</view> </view>
</view> </view>
</view> </view>
</block> </block>
</view> </view>
</tn-scroll-list> </tn-scroll-list>
</demo-title> </demo-title>
<demo-title title="自定义指示器样式"> <demo-title title="自定义指示器样式">
<tn-scroll-list :indicatorWidth="100" :indicatorBarWidth="30" indicatorColor="#D6F4FA" indicatorActiveColor="#27A1BA"> <tn-scroll-list :indicatorWidth="100" :indicatorBarWidth="30" indicatorColor="#D6F4FA" indicatorActiveColor="#27A1BA">
<view class="tn-flex tn-margin-sm"> <view class="tn-flex tn-margin-sm">
<block v-for="(item, index) in 14" :key="index"> <block v-for="(item, index) in 14" :key="index">
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius"> <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center"> <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$t.colorUtils.getRandomCoolBgClass(index)]"> <view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$t.color.getRandomCoolBgClass(index)]">
<view class="tn-icon-gloves-fill"></view> <view class="tn-icon-gloves-fill"></view>
</view> </view>
<view class="tn-color-black tn-text-lg tn-text-center"> <view class="tn-color-black tn-text-lg tn-text-center">
<text class="tn-text-ellipsis">傻北</text> <text class="tn-text-ellipsis">傻北</text>
</view> </view>
</view> </view>
</view> </view>
</block> </block>
</view> </view>
</tn-scroll-list> </tn-scroll-list>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsScrollList', name: 'componentsScrollList',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-scroll-list { .components-scroll-list {
min-height: 100vh; min-height: 100vh;
} }
.icon3 { .icon3 {
&__item { &__item {
width: 30%; width: 30%;
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 10rpx; border-radius: 10rpx;
padding: 30rpx; padding: 30rpx;
margin: 20rpx 10rpx; margin: 20rpx 10rpx;
margin-top: 0; margin-top: 0;
transform: scale(1); transform: scale(1);
transition: transform 0.3s linear; transition: transform 0.3s linear;
transform-origin: center center; transform-origin: center center;
&--icon { &--icon {
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
font-size: 60rpx; font-size: 60rpx;
border-radius: 25%; border-radius: 25%;
margin-bottom: 18rpx; margin-bottom: 18rpx;
position: relative; position: relative;
z-index: 1; z-index: 1;
&::after { &::after {
content: " "; content: " ";
position: absolute; position: absolute;
z-index: -1; z-index: -1;
width: 100%; width: 100%;
height: 100%; height: 100%;
left: 0; left: 0;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
opacity: 1; opacity: 1;
transform: scale(1, 1); transform: scale(1, 1);
background-size: 100% 100%; background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png); background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
} }
} }
} }
} }
</style> </style>
componentsPage/select/select.vue
+377 -377
View File
@@ -1,377 +1,377 @@
<template> <template>
<view class="components-select"> <view class="components-select">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Select列选择器</tn-nav-bar> <tn-nav-bar fixed>Select列选择器</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click"> <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
<view class="tn-flex tn-flex-row-center"><tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showSelect">弹出Select</tn-button></view> <view class="tn-flex tn-flex-row-center"><tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showSelect">弹出Select</tn-button></view>
<view class="select-result tn-border-dashed"> <view class="select-result tn-border-dashed">
{{ result }} {{ result }}
</view> </view>
</dynamic-demo-template> </dynamic-demo-template>
</view> </view>
<!-- select --> <!-- select -->
<tn-select <tn-select
v-model="show" v-model="show"
:mode="mode" :mode="mode"
title="请选择数据" title="请选择数据"
:list="list" :list="list"
:maskCloseable="maskCloseable" :maskCloseable="maskCloseable"
@cancel="cancelSelect" @cancel="cancelSelect"
@confirm="confirmSelect" @confirm="confirmSelect"
> >
</tn-select> </tn-select>
</view> </view>
</template> </template>
<script> <script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue' import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default { export default {
name: 'componentsSelect', name: 'componentsSelect',
components: {dynamicDemoTemplate}, components: {dynamicDemoTemplate},
data() { data() {
return { return {
result: 'Select结果', result: 'Select结果',
show: false, show: false,
mode: 'single', mode: 'single',
list: [ list: [
{ {
value: 1, value: 1,
label: '哆啦A梦' label: '哆啦A梦'
}, },
{ {
value: 2, value: 2,
label: '大熊' label: '大熊'
}, },
{ {
value: 3, value: 3,
label: '小夫' label: '小夫'
}, },
{ {
value: 4, value: 4,
label: '静香' label: '静香'
}, },
{ {
value: 5, value: 5,
label: '胖虎' label: '胖虎'
} }
], ],
maskCloseable: true, maskCloseable: true,
tips: ['无需依赖额外的样式文件','使用tn-select组件'], tips: ['无需依赖额外的样式文件','使用tn-select组件'],
sectionList: [ sectionList: [
{ {
name: '参数切换', name: '参数切换',
section: [ section: [
{ {
title: '模式', title: '模式',
optional: ['单列','多列','自动多列'], optional: ['单列','多列','自动多列'],
methods: 'modeChange' methods: 'modeChange'
}, },
{ {
title: '点击遮罩关闭', title: '点击遮罩关闭',
optional: ['是','否'], optional: ['是','否'],
methods: 'maskCloseableChange' methods: 'maskCloseableChange'
} }
] ]
} }
] ]
} }
}, },
methods: { methods: {
click(event) { click(event) {
this[event.methods] && this[event.methods](event) this[event.methods] && this[event.methods](event)
}, },
// 弹出Select // 弹出Select
showSelect(event) { showSelect(event) {
this.openSelect() this.openSelect()
}, },
// 切换模式 // 切换模式
modeChange(event) { modeChange(event) {
switch(event.index) { switch(event.index) {
case 0: case 0:
this.mode = 'single' this.mode = 'single'
this.list = [ this.list = [
{ {
value: 1, value: 1,
label: '哆啦A梦' label: '哆啦A梦'
}, },
{ {
value: 2, value: 2,
label: '大熊' label: '大熊'
}, },
{ {
value: 3, value: 3,
label: '小夫' label: '小夫'
}, },
{ {
value: 4, value: 4,
label: '静香' label: '静香'
}, },
{ {
value: 5, value: 5,
label: '胖虎' label: '胖虎'
} }
] ]
break break
case 1: case 1:
this.mode = 'multi' this.mode = 'multi'
this.list = [ this.list = [
[ [
{ {
value: 1, value: 1,
label: '哆啦A梦' label: '哆啦A梦'
}, },
{ {
value: 2, value: 2,
label: '大熊' label: '大熊'
}, },
{ {
value: 3, value: 3,
label: '小夫' label: '小夫'
}, },
{ {
value: 4, value: 4,
label: '静香' label: '静香'
}, },
{ {
value: 5, value: 5,
label: '胖虎' label: '胖虎'
}, },
], ],
[ [
{ {
value: 1, value: 1,
label: '家' label: '家'
}, },
{ {
value: 2, value: 2,
label: '学校' label: '学校'
}, },
{ {
value: 3, value: 3,
label: '操场' label: '操场'
} }
] ]
] ]
break break
case 2: case 2:
this.mode = 'multi-auto' this.mode = 'multi-auto'
this.list = [ this.list = [
{ {
value: 11, value: 11,
label: '森林—1', label: '森林—1',
children: [ children: [
{ {
value: 1101, value: 1101,
label: '树-11', label: '树-11',
children: [ children: [
{ {
value: 110101, value: 110101,
label: '树叶-111' label: '树叶-111'
}, },
{ {
value: 110102, value: 110102,
label: '树叶-112' label: '树叶-112'
}, },
{ {
value: 110103, value: 110103,
label: '树叶-113' label: '树叶-113'
}, },
{ {
value: 110104, value: 110104,
label: '树叶-114' label: '树叶-114'
} }
] ]
}, },
{ {
value: 1102, value: 1102,
label: '树-12', label: '树-12',
children: [ children: [
{ {
value: 110201, value: 110201,
label: '树叶-121' label: '树叶-121'
}, },
{ {
value: 110202, value: 110202,
label: '树叶-122' label: '树叶-122'
}, },
{ {
value: 110203, value: 110203,
label: '树叶-123' label: '树叶-123'
}, },
{ {
value: 110204, value: 110204,
label: '树叶-124' label: '树叶-124'
} }
] ]
}, },
{ {
value: 1103, value: 1103,
label: '树-13', label: '树-13',
children: [ children: [
{ {
value: 110301, value: 110301,
label: '树叶-131' label: '树叶-131'
}, },
{ {
value: 110302, value: 110302,
label: '树叶-132' label: '树叶-132'
}, },
{ {
value: 110303, value: 110303,
label: '树叶-133' label: '树叶-133'
}, },
{ {
value: 110304, value: 110304,
label: '树叶-134' label: '树叶-134'
} }
] ]
} }
] ]
}, },
{ {
value: 12, value: 12,
label: '森林—2', label: '森林—2',
children: [ children: [
{ {
value: 1201, value: 1201,
label: '树-21', label: '树-21',
children: [ children: [
{ {
value: 120101, value: 120101,
label: '树叶-211' label: '树叶-211'
}, },
{ {
value: 120102, value: 120102,
label: '树叶-212' label: '树叶-212'
}, },
{ {
value: 120103, value: 120103,
label: '树叶-213' label: '树叶-213'
}, },
{ {
value: 120104, value: 120104,
label: '树叶-214' label: '树叶-214'
} }
] ]
}, },
{ {
value: 1202, value: 1202,
label: '树-22', label: '树-22',
children: [ children: [
{ {
value: 120201, value: 120201,
label: '树叶-221' label: '树叶-221'
}, },
{ {
value: 120202, value: 120202,
label: '树叶-222' label: '树叶-222'
}, },
{ {
value: 120203, value: 120203,
label: '树叶-223' label: '树叶-223'
}, },
{ {
value: 120204, value: 120204,
label: '树叶-224' label: '树叶-224'
} }
] ]
}, },
{ {
value: 1203, value: 1203,
label: '树-23', label: '树-23',
children: [ children: [
{ {
value: 120301, value: 120301,
label: '树叶-231' label: '树叶-231'
}, },
{ {
value: 120302, value: 120302,
label: '树叶-232' label: '树叶-232'
}, },
{ {
value: 120303, value: 120303,
label: '树叶-233' label: '树叶-233'
}, },
{ {
value: 120304, value: 120304,
label: '树叶-234' label: '树叶-234'
} }
] ]
} }
] ]
} }
] ]
break break
} }
this.openSelect() this.openSelect()
}, },
// 切换点击遮罩关闭 // 切换点击遮罩关闭
maskCloseableChange(event) { maskCloseableChange(event) {
this.maskCloseable = event.index === 0 ? true : false this.maskCloseable = event.index === 0 ? true : false
this.openSelect() this.openSelect()
}, },
// 点击取消按钮 // 点击取消按钮
cancelSelect(event) { cancelSelect(event) {
this.$t.messageUtils.toast('点击了取消按钮') this.$t.message.toast('点击了取消按钮')
}, },
// 点击确认按钮 // 点击确认按钮
confirmSelect(event) { confirmSelect(event) {
console.log(event); console.log(event);
switch (this.mode) { switch (this.mode) {
case 'single': case 'single':
this.result = event[0]['label'] this.result = event[0]['label']
break break
case 'multi': case 'multi':
this.result = '' this.result = ''
if (event.length) { if (event.length) {
event.map((item, index) => { event.map((item, index) => {
if (index !== 0) this.result += ' - ' if (index !== 0) this.result += ' - '
this.result += item.label this.result += item.label
}) })
} }
break break
case 'multi-auto': case 'multi-auto':
this.result = '' this.result = ''
if (event.length) { if (event.length) {
event.map((item, index) => { event.map((item, index) => {
if (index !== 0) this.result += ' - ' if (index !== 0) this.result += ' - '
this.result += item.label this.result += item.label
}) })
} }
break break
} }
}, },
// 打开Select // 打开Select
openSelect() { openSelect() {
this.show = true this.show = true
}, },
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.select-result { .select-result {
margin-top: 10rpx; margin-top: 10rpx;
padding: 10rpx 30rpx; padding: 10rpx 30rpx;
background-color: $tn-font-holder-color; background-color: $tn-font-holder-color;
text-align: center; text-align: center;
} }
</style> </style>
componentsPage/sign-board/sign-board.vue
+133 -133
View File
@@ -1,134 +1,134 @@
<template> <template>
<view class="components-toast"> <view class="components-toast">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed :beforeBack="beforeBack">SignBoard签字板</tn-nav-bar> <tn-nav-bar fixed :beforeBack="beforeBack">SignBoard签字板</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click"> <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
<view class="tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center"> <view class="tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<view class="image"> <view class="image">
<image v-if="imageSrc" :src="imageSrc" mode="heightFix"></image> <image v-if="imageSrc" :src="imageSrc" mode="heightFix"></image>
</view> </view>
<view class="button"> <view class="button">
<tn-button fontColor="tn-color-white" @click="showSignBoard">弹出签字板</tn-button> <tn-button fontColor="tn-color-white" @click="showSignBoard">弹出签字板</tn-button>
</view> </view>
</view> </view>
</dynamic-demo-template> </dynamic-demo-template>
</view> </view>
<!-- SignBoard --> <!-- SignBoard -->
<tn-sign-board :show="show" :customBarHeight="vuex_custom_bar_height" :signSelectColor="signSelectColor" :rotate="rotate" @save="saveSign" @closed="closeSign"></tn-sign-board> <tn-sign-board :show="show" :customBarHeight="vuex_custom_bar_height" :signSelectColor="signSelectColor" :rotate="rotate" @save="saveSign" @closed="closeSign"></tn-sign-board>
</view> </view>
</template> </template>
<script> <script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue' import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default { export default {
components: {dynamicDemoTemplate}, components: {dynamicDemoTemplate},
data() { data() {
return { return {
show: false, show: false,
imageSrc: '', imageSrc: '',
signSelectColor: ['#080808', '#E83A30'], signSelectColor: ['#080808', '#E83A30'],
rotate: true, rotate: true,
tips: ['无需依赖额外的样式文件','使用tn-sign-board组件'], tips: ['无需依赖额外的样式文件','使用tn-sign-board组件'],
sectionList: [ sectionList: [
{ {
name: '参数切换', name: '参数切换',
section: [ section: [
{ {
title: '画笔颜色', title: '画笔颜色',
optional: ['默认','自定义'], optional: ['默认','自定义'],
methods: 'colorChange' methods: 'colorChange'
}, },
{ {
title: '旋转签名', title: '旋转签名',
optional: ['不旋转','旋转'], optional: ['不旋转','旋转'],
methods: 'rotateChange', methods: 'rotateChange',
current: 1 current: 1
} }
] ]
} }
] ]
} }
}, },
methods: { methods: {
click(event) { click(event) {
this[event.methods] && this[event.methods](event) this[event.methods] && this[event.methods](event)
}, },
// 弹出SignBoard // 弹出SignBoard
showSignBoard() { showSignBoard() {
this.show = true this.show = true
}, },
// 切换画笔颜色 // 切换画笔颜色
colorChange(event) { colorChange(event) {
switch (event.index) { switch (event.index) {
case 0: case 0:
this.signSelectColor = ['#080808', '#E83A30'] this.signSelectColor = ['#080808', '#E83A30']
break break
case 1: case 1:
this.signSelectColor = ['#838383', '#01BEFF'] this.signSelectColor = ['#838383', '#01BEFF']
break break
} }
this.showSignBoard() this.showSignBoard()
}, },
// 切换旋转内容 // 切换旋转内容
rotateChange(event) { rotateChange(event) {
this.rotate = event.index === 0 ? false : true this.rotate = event.index === 0 ? false : true
this.showSignBoard() this.showSignBoard()
}, },
// 保存签名 // 保存签名
saveSign(e) { saveSign(e) {
// console.log(e); // console.log(e);
this.imageSrc = e this.imageSrc = e
this.show = false this.show = false
}, },
// 关闭签名板 // 关闭签名板
closeSign() { closeSign() {
this.show = false this.show = false
}, },
// 返回前判断是否已经关闭了签名板 // 返回前判断是否已经关闭了签名板
beforeBack() { beforeBack() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (!this.show) { if (!this.show) {
resolve() resolve()
return return
} }
this.$t.messageUtils.modal('操作提示','当前已经打开了签名板，是否确认需要关闭', () => { this.$t.message.modal('操作提示','当前已经打开了签名板，是否确认需要关闭', () => {
resolve() resolve()
}, true, () => { }, true, () => {
reject() reject()
}) })
}) })
} }
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.image { .image {
height: 200rpx; height: 200rpx;
image { image {
height: 200rpx; height: 200rpx;
} }
} }
.button { .button {
margin-top: 20rpx; margin-top: 20rpx;
} }
</style> </style>
componentsPage/skeleton/skeleton.vue
+217 -217
View File
@@ -1,236 +1,236 @@
<template> <template>
<view class="components-skeleton tn-safe-area-inset-bottom"> <view class="components-skeleton tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>骨架屏</tn-nav-bar> <tn-nav-bar fixed>骨架屏</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="tn-padding-top"></view> <view class="tn-padding-top"></view>
<view class="news tn-skeleton"> <view class="news tn-skeleton">
<block v-for="(item, index) in list" :key="index"> <block v-for="(item, index) in list" :key="index">
<view class="news__item tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-top"> <view class="news__item tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-top">
<view class="news__item__info tn-flex tn-flex-direction-row tn-flex-row-center tn-flex-col-center"> <view class="news__item__info tn-flex tn-flex-direction-row tn-flex-row-center tn-flex-col-center">
<view class="news__item__avatar tn-skeleton-circle"> <view class="news__item__avatar tn-skeleton-circle">
<image :src="item.userInfo.avatar"></image> <image :src="item.userInfo.avatar"></image>
</view> </view>
<view class="news__item__outline tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-around"> <view class="news__item__outline tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-around">
<view class="news__item__nick-name tn-skeleton-fillet">{{ item.userInfo.nickName}}</view> <view class="news__item__nick-name tn-skeleton-fillet">{{ item.userInfo.nickName}}</view>
<view class="news__item__release-date tn-skeleton-fillet">{{ item.content.releaseDate }}</view> <view class="news__item__release-date tn-skeleton-fillet">{{ item.content.releaseDate }}</view>
</view> </view>
</view> </view>
<view class="news__item__content tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-center"> <view class="news__item__content tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-center">
<view class="news__item__content__data"> <view class="news__item__content__data">
<view class="news__item__title tn-text-ellipsis tn-skeleton-fillet">{{ item.content.title }}</view> <view class="news__item__title tn-text-ellipsis tn-skeleton-fillet">{{ item.content.title }}</view>
<view class="news__item__desc tn-text-ellipsis-2 tn-skeleton-fillet">{{ item.content.desc }}</view> <view class="news__item__desc tn-text-ellipsis-2 tn-skeleton-fillet">{{ item.content.desc }}</view>
</view> </view>
<view class="news__item__main-image tn-skeleton-rect"> <view class="news__item__main-image tn-skeleton-rect">
<image :src="item.content.mainImage" mode="aspectFill"></image> <image :src="item.content.mainImage" mode="aspectFill"></image>
</view> </view>
</view> </view>
</view> </view>
</block> </block>
</view> </view>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
<!-- 引用组件 --> <!-- 引用组件 -->
<tn-skeleton :show="showSkeleton"></tn-skeleton> <tn-skeleton :show="showSkeleton"></tn-skeleton>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: 'ComponentsSkeleton', name: 'ComponentsSkeleton',
data() { data() {
return { return {
showSkeleton: true, showSkeleton: true,
list: [ list: [
{ {
userInfo: { userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg', avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北' nickName: '图鸟科技-北北'
}, },
content: { content: {
title: '全新UI框架，tuniaoUI正式发布', title: '全新UI框架，tuniaoUI正式发布',
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面', desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg', mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
releaseDate: '2020年12月30日' releaseDate: '2020年12月30日'
} }
}, },
{ {
userInfo: { userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg', avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北' nickName: '图鸟科技-北北'
}, },
content: { content: {
title: '全新UI框架，tuniaoUI正式发布', title: '全新UI框架，tuniaoUI正式发布',
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面', desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg', mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
releaseDate: '2020年12月30日' releaseDate: '2020年12月30日'
} }
}, },
{ {
userInfo: { userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg', avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北' nickName: '图鸟科技-北北'
}, },
content: { content: {
title: '全新UI框架，tuniaoUI正式发布', title: '全新UI框架，tuniaoUI正式发布',
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面', desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg', mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
releaseDate: '2020年12月30日' releaseDate: '2020年12月30日'
} }
}, },
{ {
userInfo: { userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg', avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北' nickName: '图鸟科技-北北'
}, },
content: { content: {
title: '全新UI框架，tuniaoUI正式发布', title: '全新UI框架，tuniaoUI正式发布',
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面', desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg', mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
releaseDate: '2020年12月30日' releaseDate: '2020年12月30日'
} }
}, },
{ {
userInfo: { userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg', avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北' nickName: '图鸟科技-北北'
}, },
content: { content: {
title: '全新UI框架，tuniaoUI正式发布', title: '全新UI框架，tuniaoUI正式发布',
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面', desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg', mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
releaseDate: '2020年12月30日' releaseDate: '2020年12月30日'
} }
}, },
{ {
userInfo: { userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg', avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北' nickName: '图鸟科技-北北'
}, },
content: { content: {
title: '全新UI框架，tuniaoUI正式发布', title: '全新UI框架，tuniaoUI正式发布',
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面', desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg', mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
releaseDate: '2020年12月30日' releaseDate: '2020年12月30日'
} }
}, },
{ {
userInfo: { userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg', avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北' nickName: '图鸟科技-北北'
}, },
content: { content: {
title: '全新UI框架，tuniaoUI正式发布', title: '全新UI框架，tuniaoUI正式发布',
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面', desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg', mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
releaseDate: '2020年12月30日' releaseDate: '2020年12月30日'
} }
}, },
{ {
userInfo: { userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg', avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北' nickName: '图鸟科技-北北'
}, },
content: { content: {
title: '全新UI框架，tuniaoUI正式发布', title: '全新UI框架，tuniaoUI正式发布',
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面', desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg', mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
releaseDate: '2020年12月30日' releaseDate: '2020年12月30日'
} }
} }
] ]
} }
}, },
onLoad() { onLoad() {
// 模拟加载数据完毕 // 模拟加载数据完毕
setTimeout(() => { setTimeout(() => {
this.showSkeleton = false this.showSkeleton = false
}, 3000) }, 3000)
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-skeleton {
// background-color: $tn-bg-gray-color;
}
.components-skeleton { .news {
// background-color: $tn-bg-gray-color; position: relative;
}
&__item {
.news { margin: 0 30rpx;
position: relative; padding: 10rpx;
background-color: #FFFFFF;
&__item { border-radius: 10rpx;
margin: 0 30rpx; box-shadow: 4rpx 6rpx 28rpx 0px rgba(0, 0, 0, 0.1);
padding: 10rpx; margin-bottom: 30rpx;
background-color: #FFFFFF;
border-radius: 10rpx; &__info {
box-shadow: 4rpx 6rpx 28rpx 0px rgba(0, 0, 0, 0.1); height: 80rpx;
margin-bottom: 30rpx; margin-bottom: 20rpx;
}
&__info { &__avatar {
height: 80rpx; width: 80rpx;
margin-bottom: 20rpx; height: 100%;
} border-radius: 100%;
&__avatar { overflow: hidden;
width: 80rpx; image {
height: 100%; width: 100%;
border-radius: 100%; height: 100%;
overflow: hidden; }
image { }
width: 100%; &__outline {
height: 100%; height: 100%;
} margin-left: 20rpx;
} }
&__outline { &__nick-name {
height: 100%; font-size: 30rpx;
margin-left: 20rpx; margin-bottom: 6rpx;
} }
&__nick-name { &__release-date {
font-size: 30rpx; font-size: 22rpx;
margin-bottom: 6rpx; color: $tn-font-sub-color;
} }
&__release-date {
font-size: 22rpx; &__content {
color: $tn-font-sub-color; height: 140rpx;
} &__data {
width: 60%;
&__content { margin-right: 10rpx;
height: 140rpx; }
&__data { }
width: 60%; &__title {
margin-right: 10rpx; width: 100%;
} font-size: 30rpx;
} font-weight: bold;
&__title { margin-bottom: 10rpx;
width: 100%; }
font-size: 30rpx; &__desc {
font-weight: bold; width: 100%;
margin-bottom: 10rpx; word-break: break-all;
} font-size: 24rpx;
&__desc { }
width: 100%; &__main-image {
word-break: break-all; width: 40%;
font-size: 24rpx; height: 100%;
} border-radius: 5rpx;
&__main-image { overflow: hidden;
width: 40%; image {
height: 100%; width: 100%;
border-radius: 5rpx; height: 100%;
overflow: hidden; }
image { }
width: 100%; }
height: 100%;
}
}
}
} }
</style> </style>
componentsPage/slider/slider.vue
+96 -96
View File
@@ -1,97 +1,97 @@
<template> <template>
<view class="components-slider tn-safe-area-inset-bottom"> <view class="components-slider tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>slider滑动条</tn-nav-bar> <tn-nav-bar fixed>slider滑动条</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基本使用"> <demo-title title="基本使用">
<tn-slider v-model="value1"></tn-slider> <tn-slider v-model="value1"></tn-slider>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-slider v-model="value1" :disabled="true"></tn-slider> <tn-slider v-model="value1" :disabled="true"></tn-slider>
</view> </view>
</demo-title> </demo-title>
<demo-title title="设置最小最大值"> <demo-title title="设置最小最大值">
<tn-slider v-model="value2" :min="20" :max="80"></tn-slider> <tn-slider v-model="value2" :min="20" :max="80"></tn-slider>
</demo-title> </demo-title>
<demo-title title="设置步进值"> <demo-title title="设置步进值">
<tn-slider v-model="value3" :step="10"></tn-slider> <tn-slider v-model="value3" :step="10"></tn-slider>
</demo-title> </demo-title>
<demo-title title="自定义滑块滑轨信息"> <demo-title title="自定义滑块滑轨信息">
<tn-slider v-model="value5" :blockWidth="40" :lineHeight="10"></tn-slider> <tn-slider v-model="value5" :blockWidth="40" :lineHeight="10"></tn-slider>
</demo-title> </demo-title>
<demo-title title="自定义颜色信息"> <demo-title title="自定义颜色信息">
<tn-slider v-model="value6" blockColor="#838383" inactiveColor="#FAD8D6" activeColor="#31E749"></tn-slider> <tn-slider v-model="value6" blockColor="#838383" inactiveColor="#FAD8D6" activeColor="#31E749"></tn-slider>
</demo-title> </demo-title>
<demo-title title="自定义滑块"> <demo-title title="自定义滑块">
<tn-slider v-model="value7"> <tn-slider v-model="value7">
<view class="tn-slider__custom-block"> <view class="tn-slider__custom-block">
{{ value7 }} {{ value7 }}
</view> </view>
</tn-slider> </tn-slider>
</demo-title> </demo-title>
<demo-title title="配合formItem使用"> <demo-title title="配合formItem使用">
<tn-form> <tn-form>
<tn-form-item label="价格区间" :labelWidth="140"> <tn-form-item label="价格区间" :labelWidth="140">
<tn-slider v-model="value8"></tn-slider> <tn-slider v-model="value8"></tn-slider>
</tn-form-item> </tn-form-item>
</tn-form> </tn-form>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsSlider', name: 'componentsSlider',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
value1: 0, value1: 0,
value2: 0, value2: 0,
value3: 0, value3: 0,
value4: 0, value4: 0,
value5: 0, value5: 0,
value6: 0, value6: 0,
value7: 0, value7: 0,
value8: 0 value8: 0
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-slider { .components-slider {
min-height: 100vh; min-height: 100vh;
} }
.tn-slider__custom-block { .tn-slider__custom-block {
background-color: $tn-color-orange; background-color: $tn-color-orange;
width: auto; width: auto;
height: 40rpx; height: 40rpx;
line-height: 40rpx; line-height: 40rpx;
padding: 0 10rpx; padding: 0 10rpx;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
color: #FFFFFF; color: #FFFFFF;
} }
</style> </style>
componentsPage/steps/steps.vue
+104 -104
View File
@@ -1,105 +1,105 @@
<template> <template>
<view class="components-steps tn-safe-area-inset-bottom"> <view class="components-steps tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Steps步骤条</tn-nav-bar> <tn-nav-bar fixed>Steps步骤条</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="operate_btn"> <view class="operate_btn">
<view> <view>
<tn-button backgroundColor="tn-bg-indigo" fontColor="tn-color-white" @click="prevStep">上一步</tn-button> <tn-button backgroundColor="tn-bg-indigo" fontColor="tn-color-white" @click="prevStep">上一步</tn-button>
</view> </view>
<view> <view>
<tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="nextStep">下一步</tn-button> <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="nextStep">下一步</tn-button>
</view> </view>
</view> </view>
<view class="tn-padding-top-lg"></view> <view class="tn-padding-top-lg"></view>
<demo-title title="点模式"> <demo-title title="点模式">
<tn-steps :list="list" :current="current" @click="stepItemClick"></tn-steps> <tn-steps :list="list" :current="current" @click="stepItemClick"></tn-steps>
</demo-title> </demo-title>
<demo-title title="数值模式"> <demo-title title="数值模式">
<tn-steps :list="list" :current="current" mode="number" @click="stepItemClick"></tn-steps> <tn-steps :list="list" :current="current" mode="number" @click="stepItemClick"></tn-steps>
</demo-title> </demo-title>
<demo-title title="图标模式"> <demo-title title="图标模式">
<tn-steps :list="list" :current="current" mode="icon" @click="stepItemClick"></tn-steps> <tn-steps :list="list" :current="current" mode="icon" @click="stepItemClick"></tn-steps>
</demo-title> </demo-title>
<demo-title title="点图标模式"> <demo-title title="点图标模式">
<tn-steps :list="list" :current="current" mode="dotIcon" @click="stepItemClick"></tn-steps> <tn-steps :list="list" :current="current" mode="dotIcon" @click="stepItemClick"></tn-steps>
</demo-title> </demo-title>
<demo-title title="隐藏标题"> <demo-title title="隐藏标题">
<tn-steps :list="list" :current="current" mode="icon" :showTitle="false" @click="stepItemClick"></tn-steps> <tn-steps :list="list" :current="current" mode="icon" :showTitle="false" @click="stepItemClick"></tn-steps>
</demo-title> </demo-title>
<demo-title title="自定义颜色"> <demo-title title="自定义颜色">
<tn-steps :list="list" :current="current" mode="icon" activeColor="#24F083" inActiveColor="#E6E6E6" @click="stepItemClick"></tn-steps> <tn-steps :list="list" :current="current" mode="icon" activeColor="#24F083" inActiveColor="#E6E6E6" @click="stepItemClick"></tn-steps>
</demo-title> </demo-title>
<demo-title title="垂直显示"> <demo-title title="垂直显示">
<tn-steps :list="list" :current="current" direction="column" @click="stepItemClick"></tn-steps> <tn-steps :list="list" :current="current" direction="column" @click="stepItemClick"></tn-steps>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsSteps', name: 'componentsSteps',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
list: [ list: [
{name: '第一步'}, {name: '第一步'},
{name: '第二步', icon: 'trusty', selectIcon: 'trusty-fill'}, {name: '第二步', icon: 'trusty', selectIcon: 'trusty-fill'},
{name: '第三步', icon: 'safe', selectIcon: 'safe-fill'}, {name: '第三步', icon: 'safe', selectIcon: 'safe-fill'},
{name: '第四步', icon: 'vip', selectIcon: 'vip-fill'} {name: '第四步', icon: 'vip', selectIcon: 'vip-fill'}
], ],
current: 0 current: 0
} }
}, },
methods: { methods: {
prevStep() { prevStep() {
let current = this.current let current = this.current
current-- current--
this.current = current < 0 ? 0 : current this.current = current < 0 ? 0 : current
}, },
nextStep() { nextStep() {
let current = this.current let current = this.current
current++ current++
this.current = current > this.list.length ? this.list.length : current this.current = current > this.list.length ? this.list.length : current
}, },
stepItemClick(e) { stepItemClick(e) {
this.current = e.index this.current = e.index
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.operate_btn { .operate_btn {
position: fixed; position: fixed;
width: 100%; width: 100%;
padding: 0 30rpx; padding: 0 30rpx;
margin: 30rpx 0; margin: 30rpx 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
z-index: 1000; z-index: 1000;
} }
</style> </style>
componentsPage/sticky/sticky.vue
+66 -66
View File
@@ -1,67 +1,67 @@
<template> <template>
<view class="components-sticky tn-safe-area-inset-bottom" style="height: 200vh;"> <view class="components-sticky tn-safe-area-inset-bottom" style="height: 200vh;">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>sticky吸顶</tn-nav-bar> <tn-nav-bar fixed>sticky吸顶</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="吸顶"> <demo-title title="吸顶">
<tn-sticky :offsetTop="0" :customNavHeight="vuex_custom_bar_height"> <tn-sticky :offsetTop="0" :customNavHeight="vuex_custom_bar_height">
<view class="sticky-content tn-bg-orangered tn-color-white">普通吸顶</view> <view class="sticky-content tn-bg-orangered tn-color-white">普通吸顶</view>
</tn-sticky> </tn-sticky>
<view style="margin-top: 200rpx;"> <view style="margin-top: 200rpx;">
<tn-sticky :offsetTop="100" :customNavHeight="vuex_custom_bar_height"> <tn-sticky :offsetTop="100" :customNavHeight="vuex_custom_bar_height">
<view class="sticky-content tn-bg-indigo tn-color-white">有距离吸顶</view> <view class="sticky-content tn-bg-indigo tn-color-white">有距离吸顶</view>
</tn-sticky> </tn-sticky>
</view> </view>
</demo-title> </demo-title>
<demo-title title="取消吸顶"> <demo-title title="取消吸顶">
<tn-sticky :offsetTop="0" :enabled="false" :customNavHeight="vuex_custom_bar_height"> <tn-sticky :offsetTop="0" :enabled="false" :customNavHeight="vuex_custom_bar_height">
<view class="sticky-content tn-bg-red tn-color-white">不允许吸顶</view> <view class="sticky-content tn-bg-red tn-color-white">不允许吸顶</view>
</tn-sticky> </tn-sticky>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsSticky', name: 'componentsSticky',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-sticky { .components-sticky {
min-height: 100vh; min-height: 100vh;
} }
.sticky-content { .sticky-content {
height: 80rpx; height: 80rpx;
padding: 0 80rpx; padding: 0 80rpx;
margin: 0 10rpx; margin: 0 10rpx;
line-height: 80rpx; line-height: 80rpx;
text-align: center; text-align: center;
border-radius: 10rpx; border-radius: 10rpx;
} }
</style> </style>
componentsPage/subsection/subsection.vue
+49 -49
View File
@@ -1,59 +1,59 @@
<template> <template>
<view class="components-subsection tn-safe-area-inset-bottom"> <view class="components-subsection tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>分段器</tn-nav-bar> <tn-nav-bar fixed>分段器</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基本使用"> <demo-title title="基本使用">
<tn-subsection :list="list"></tn-subsection> <tn-subsection :list="list"></tn-subsection>
</demo-title> </demo-title>
<demo-title title="按钮模式"> <demo-title title="按钮模式">
<tn-subsection :list="list" mode="button"></tn-subsection> <tn-subsection :list="list" mode="button"></tn-subsection>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-subsection :list="list" mode="button" :borderRadius="50"></tn-subsection> <tn-subsection :list="list" mode="button" :borderRadius="50"></tn-subsection>
</view> </view>
</demo-title> </demo-title>
<demo-title title="取消切换动画"> <demo-title title="取消切换动画">
<tn-subsection :list="list" :animation="false"></tn-subsection> <tn-subsection :list="list" :animation="false"></tn-subsection>
</demo-title> </demo-title>
<demo-title title="贝塞尔曲线切换动画"> <demo-title title="贝塞尔曲线切换动画">
<tn-subsection :list="list" animationType="cubic-bezier"></tn-subsection> <tn-subsection :list="list" animationType="cubic-bezier"></tn-subsection>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-subsection :list="list" mode="button" :borderRadius="50" animationType="cubic-bezier"></tn-subsection> <tn-subsection :list="list" mode="button" :borderRadius="50" animationType="cubic-bezier"></tn-subsection>
</view> </view>
</demo-title> </demo-title>
<demo-title title="选中字体设置为粗体"> <demo-title title="选中字体设置为粗体">
<tn-subsection :list="list" :bold="true"></tn-subsection> <tn-subsection :list="list" :bold="true"></tn-subsection>
</demo-title> </demo-title>
<demo-title title="自定义样式"> <demo-title title="自定义样式">
<tn-subsection :list="list" :height="40" :fontSize="20"></tn-subsection> <tn-subsection :list="list" :height="40" :fontSize="20"></tn-subsection>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-subsection :list="list" mode="button" :borderRadius="50" backgroundColor="tn-cool-bg-color-9" buttonColor="tn-cool-bg-color-7" inactiveColor="#FFFFFF" activeColor="#27A1BA"></tn-subsection> <tn-subsection :list="list" mode="button" :borderRadius="50" backgroundColor="tn-cool-bg-color-9" buttonColor="tn-cool-bg-color-7" inactiveColor="#FFFFFF" activeColor="#27A1BA"></tn-subsection>
</view> </view>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-subsection :list="list" :borderRadius="50" backgroundColor="#FFFFFF" buttonColor="#E83A30" inactiveColor="#838383"></tn-subsection> <tn-subsection :list="list" :borderRadius="50" backgroundColor="#FFFFFF" buttonColor="#E83A30" inactiveColor="#838383"></tn-subsection>
</view> </view>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'ComponentsSubsection', name: 'ComponentsSubsection',
components: { demoTitle }, components: { demoTitle },
data() { data() {
return { return {
componentsPage/swipe-action/swipe-action.vue
+243 -234
View File
@@ -1,235 +1,244 @@
<template> <template>
<view class="components-swipe-action tn-safe-area-inset-bottom"> <view class="components-swipe-action tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>swipeAction滑动菜单</tn-nav-bar> <tn-nav-bar fixed>swipeAction滑动菜单</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基本使用"> <demo-title title="基本使用">
<tn-swipe-action> <!-- <tn-swipe-action>
<tn-swipe-action-item :options="options1">
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left"> </tn-swipe-action> -->
<view class="swipe-action__item__image"> <tn-swipe-action-item :options="options1" name="0" @click="onSwiperItemClick">
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image> <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
</view> <view class="swipe-action__item__image">
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right"> <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
<view class="swipe-action__item__info__title"> </view>
基本使用 <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
</view> <view class="swipe-action__item__info__title">
<view class="swipe-action__item__info__desc"> 基本使用
向左滑动即可看到 </view>
</view> <view class="swipe-action__item__info__desc">
</view> 向左滑动即可看到
</view> </view>
</tn-swipe-action-item> </view>
</tn-swipe-action> </view>
</demo-title> </tn-swipe-action-item>
</demo-title>
<demo-title title="多菜单">
<tn-swipe-action> <demo-title title="多菜单">
<tn-swipe-action-item :options="options2"> <tn-swipe-action>
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left"> <tn-swipe-action-item :options="options2">
<view class="swipe-action__item__image"> <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image> <view class="swipe-action__item__image">
</view> <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right"> </view>
<view class="swipe-action__item__info__title"> <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
多菜单 <view class="swipe-action__item__info__title">
</view> 多菜单
<view class="swipe-action__item__info__desc"> </view>
向左滑动即可看到 <view class="swipe-action__item__info__desc">
</view> 向左滑动即可看到
</view> </view>
</view> </view>
</tn-swipe-action-item> </view>
</tn-swipe-action> </tn-swipe-action-item>
</demo-title> </tn-swipe-action>
</demo-title>
<demo-title title="带图标菜单">
<tn-swipe-action> <demo-title title="带图标菜单">
<tn-swipe-action-item :options="options3"> <tn-swipe-action>
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left"> <tn-swipe-action-item :options="options3">
<view class="swipe-action__item__image"> <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image> <view class="swipe-action__item__image">
</view> <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right"> </view>
<view class="swipe-action__item__info__title"> <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
带图标菜单 <view class="swipe-action__item__info__title">
</view> 带图标菜单
<view class="swipe-action__item__info__desc"> </view>
向左滑动即可看到 <view class="swipe-action__item__info__desc">
</view> 向左滑动即可看到
</view> </view>
</view> </view>
</tn-swipe-action-item> </view>
</tn-swipe-action> </tn-swipe-action-item>
</demo-title> </tn-swipe-action>
</demo-title>
<demo-title title="单图标菜单">
<tn-swipe-action> <demo-title title="单图标菜单">
<tn-swipe-action-item :options="options4"> <tn-swipe-action>
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left"> <tn-swipe-action-item :options="options4">
<view class="swipe-action__item__image"> <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image> <view class="swipe-action__item__image">
</view> <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right"> </view>
<view class="swipe-action__item__info__title"> <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
单图标菜单 <view class="swipe-action__item__info__title">
</view> 单图标菜单
<view class="swipe-action__item__info__desc"> </view>
向左滑动即可看到 <view class="swipe-action__item__info__desc">
</view> 向左滑动即可看到
</view> </view>
</view> </view>
</tn-swipe-action-item> </view>
</tn-swipe-action> </tn-swipe-action-item>
</demo-title> </tn-swipe-action>
</demo-title>
<demo-title title="关联打开滑动菜单">
<tn-swipe-action> <demo-title title="关联打开滑动菜单">
<tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2"> <tn-swipe-action>
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left"> <tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
<view class="swipe-action__item__image"> <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image> <view class="swipe-action__item__image">
</view> <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right"> </view>
<view class="swipe-action__item__info__title"> <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
关联打开滑动菜单 <view class="swipe-action__item__info__title">
</view> 关联打开滑动菜单
<view class="swipe-action__item__info__desc"> </view>
向左滑动即可看到，同时只能打开一个菜单 <view class="swipe-action__item__info__desc">
</view> 向左滑动即可看到，同时只能打开一个菜单
</view> </view>
</view> </view>
</tn-swipe-action-item> </view>
</tn-swipe-action> </tn-swipe-action-item>
</demo-title> </tn-swipe-action>
</demo-title>
<demo-title title="非关联打开滑动菜单">
<tn-swipe-action :autoClose="false"> <demo-title title="非关联打开滑动菜单">
<tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2"> <tn-swipe-action :autoClose="false">
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left"> <tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
<view class="swipe-action__item__image"> <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image> <view class="swipe-action__item__image">
</view> <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right"> </view>
<view class="swipe-action__item__info__title"> <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
非关联打开滑动菜单 <view class="swipe-action__item__info__title">
</view> 非关联打开滑动菜单
<view class="swipe-action__item__info__desc"> </view>
向左滑动即可看到，允许同时打开多个菜单 <view class="swipe-action__item__info__desc">
</view> 向左滑动即可看到，允许同时打开多个菜单
</view> </view>
</view> </view>
</tn-swipe-action-item> </view>
</tn-swipe-action> </tn-swipe-action-item>
</demo-title> </tn-swipe-action>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view> <view class="tn-padding-bottom-lg"></view>
</view>
</view>
</view>
</template>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue' <script>
export default { import demoTitle from '@/libs/components/demo-title.vue'
name: 'componentsSwipeAction', export default {
components: { demoTitle }, name: 'componentsSwipeAction',
data() { components: { demoTitle },
return { data() {
// 滑动菜单 return {
options1: [{ // 滑动菜单
text: '置顶', options1: [{
style: { text: '置顶',
backgroundColor: '#FFA726' style: {
} backgroundColor: '#FFA726'
}], }
options2: [{ }],
text: '置顶', options2: [{
style: { text: '置顶',
backgroundColor: '#FFA726' style: {
} backgroundColor: '#FFA726'
}, }
{ },
text: '删除', {
style: { text: '删除',
backgroundColor: '#E83A30' style: {
} backgroundColor: '#E83A30'
} }
], }
options3: [{ ],
text: '置顶', options3: [{
icon: 'star', text: '置顶',
style: { icon: 'star',
backgroundColor: '#FFA726' style: {
} backgroundColor: '#FFA726'
}, }
{ },
text: '删除', {
icon: 'delete', text: '删除',
style: { icon: 'delete',
backgroundColor: '#E83A30' style: {
} backgroundColor: '#E83A30'
} }
], }
options4: [{ ],
icon: 'star', options4: [{
style: { icon: 'star',
backgroundColor: '#FFA726', style: {
width: '80rpx', backgroundColor: '#FFA726',
height: '80rpx', width: '80rpx',
margin: '0 12rpx', height: '80rpx',
borderRadius: '100rpx' margin: '0 12rpx',
} borderRadius: '100rpx'
}, }
{ },
icon: 'delete', {
style: { icon: 'delete',
backgroundColor: '#E83A30', style: {
width: '80rpx', backgroundColor: '#E83A30',
height: '80rpx', width: '80rpx',
margin: '0 12rpx', height: '80rpx',
borderRadius: '100rpx' margin: '0 12rpx',
} borderRadius: '100rpx'
} }
] }
} ]
}, }
methods: { },
} methods: {
} // 处理swiperActionItem点击事件
</script> onSwiperItemClick(e) {
if (e.type === 'button') {
<style lang="scss" scoped> this.$t.message.toast(`点击了第${e.index}个按钮`)
.swipe-action__item { } else if (e.type === 'item') {
padding: 10rpx 20rpx; this.$t.message.toast(`点击了item标签,name为${e.name}`)
}
&__image { }
image { }
width: 80rpx; }
height: 80rpx; </script>
border-radius: 20rpx;
} <style lang="scss" scoped>
} .swipe-action__item {
padding: 10rpx 20rpx;
&__info {
margin-left: 20rpx; &__image {
image {
&__title { width: 80rpx;
font-size: 30rpx; height: 80rpx;
font-weight: bold; border-radius: 20rpx;
} }
}
&__desc {
margin-top: 5rpx; &__info {
font-size: 22rpx; margin-left: 20rpx;
color: $tn-font-sub-color;
} &__title {
} font-size: 30rpx;
} font-weight: bold;
}
&__desc {
margin-top: 5rpx;
font-size: 22rpx;
color: $tn-font-sub-color;
}
}
}
</style> </style>
componentsPage/swiper/swiper.vue
+72 -72
View File
@@ -1,73 +1,73 @@
<template> <template>
<view class="components-swiper tn-safe-area-inset-bottom"> <view class="components-swiper tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Swiper轮播图</tn-nav-bar> <tn-nav-bar fixed>Swiper轮播图</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="圆角方形"> <demo-title title="圆角方形">
<tn-swiper :list="list"></tn-swiper> <tn-swiper :list="list"></tn-swiper>
</demo-title> </demo-title>
<demo-title title="方形"> <demo-title title="方形">
<tn-swiper :list="list" mode="rect"></tn-swiper> <tn-swiper :list="list" mode="rect"></tn-swiper>
</demo-title> </demo-title>
<demo-title title="点"> <demo-title title="点">
<tn-swiper :list="list" mode="dot"></tn-swiper> <tn-swiper :list="list" mode="dot"></tn-swiper>
</demo-title> </demo-title>
<demo-title title="数值"> <demo-title title="数值">
<tn-swiper :list="list" mode="number"></tn-swiper> <tn-swiper :list="list" mode="number"></tn-swiper>
</demo-title> </demo-title>
<demo-title title="隐藏指示器"> <demo-title title="隐藏指示器">
<tn-swiper :list="list" mode=""></tn-swiper> <tn-swiper :list="list" mode=""></tn-swiper>
</demo-title> </demo-title>
<demo-title title="轮播标题"> <demo-title title="轮播标题">
<tn-swiper :list="list" :title="true" mode=""></tn-swiper> <tn-swiper :list="list" :title="true" mode=""></tn-swiper>
</demo-title> </demo-title>
<demo-title title="指示器设置在右上角"> <demo-title title="指示器设置在右上角">
<tn-swiper :list="list" indicatorPosition="topRight"></tn-swiper> <tn-swiper :list="list" indicatorPosition="topRight"></tn-swiper>
</demo-title> </demo-title>
<demo-title title="3D切换效果"> <demo-title title="3D切换效果">
<tn-swiper :list="list" :effect3d="true"></tn-swiper> <tn-swiper :list="list" :effect3d="true"></tn-swiper>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsSwiper', name: 'componentsSwiper',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
list: [ list: [
{image: 'https://tnuiimage.tnkjapp.com/swiper/spring.jpg', title: '春天'}, {image: 'https://tnuiimage.tnkjapp.com/swiper/spring.jpg', title: '春天'},
{image: 'https://tnuiimage.tnkjapp.com/swiper/summer.jpg', title: '夏天'}, {image: 'https://tnuiimage.tnkjapp.com/swiper/summer.jpg', title: '夏天'},
{image: 'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg', title: '秋天'}, {image: 'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg', title: '秋天'},
{image: 'https://tnuiimage.tnkjapp.com/swiper/winter.jpg', title: '冬天'}, {image: 'https://tnuiimage.tnkjapp.com/swiper/winter.jpg', title: '冬天'},
] ]
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>
componentsPage/switch/switch.vue
+95 -95
View File
@@ -1,96 +1,96 @@
<template> <template>
<view class="components-switch tn-safe-area-inset-bottom"> <view class="components-switch tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Switch开光</tn-nav-bar> <tn-nav-bar fixed>Switch开光</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="普通切换按钮"> <demo-title title="普通切换按钮">
<view class="tn-flex tn-flex-col-center tn-flex-row-left"> <view class="tn-flex tn-flex-col-center tn-flex-row-left">
<view> <view>
<tn-switch v-model="value1"></tn-switch> <tn-switch v-model="value1"></tn-switch>
</view> </view>
<view class="tn-margin"> <view class="tn-margin">
<tn-switch v-model="value2" shape="square"></tn-switch> <tn-switch v-model="value2" shape="square"></tn-switch>
</view> </view>
<view class="tn-margin"> <view class="tn-margin">
<tn-switch v-model="value2" shape="square" :disabled="true"></tn-switch> <tn-switch v-model="value2" shape="square" :disabled="true"></tn-switch>
</view> </view>
<view class="tn-margin"> <view class="tn-margin">
<tn-switch v-model="value2" shape="square" :loading="value2"></tn-switch> <tn-switch v-model="value2" shape="square" :loading="value2"></tn-switch>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="按钮颜色"> <demo-title title="按钮颜色">
<view class="tn-flex tn-flex-col-center tn-flex-row-left"> <view class="tn-flex tn-flex-col-center tn-flex-row-left">
<view> <view>
<tn-switch v-model="value3" activeColor="#A4E82F"></tn-switch> <tn-switch v-model="value3" activeColor="#A4E82F"></tn-switch>
</view> </view>
<view class="tn-margin"> <view class="tn-margin">
<tn-switch v-model="value4" activeColor="#FFA4A4"></tn-switch> <tn-switch v-model="value4" activeColor="#FFA4A4"></tn-switch>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="按钮尺寸"> <demo-title title="按钮尺寸">
<view class="tn-flex tn-flex-col-center tn-flex-row-left"> <view class="tn-flex tn-flex-col-center tn-flex-row-left">
<view> <view>
<tn-switch v-model="value5" :size="30"></tn-switch> <tn-switch v-model="value5" :size="30"></tn-switch>
</view> </view>
<view class="tn-margin"> <view class="tn-margin">
<tn-switch v-model="value6"></tn-switch> <tn-switch v-model="value6"></tn-switch>
</view> </view>
<view class="tn-margin"> <view class="tn-margin">
<tn-switch v-model="value7" :size="60"></tn-switch> <tn-switch v-model="value7" :size="60"></tn-switch>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<demo-title title="按钮内嵌图标"> <demo-title title="按钮内嵌图标">
<view class="tn-flex tn-flex-col-center tn-flex-row-left"> <view class="tn-flex tn-flex-col-center tn-flex-row-left">
<view> <view>
<tn-switch v-model="value8" leftIcon="sex-female" rightIcon="sex-male"></tn-switch> <tn-switch v-model="value8" leftIcon="sex-female" rightIcon="sex-male"></tn-switch>
</view> </view>
</view> </view>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsSwitch', name: 'componentsSwitch',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
value1: false, value1: false,
value2: false, value2: false,
value3: false, value3: false,
value4: false, value4: false,
value5: false, value5: false,
value6: false, value6: false,
value7: false, value7: false,
value8: false, value8: false,
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-switch { .components-switch {
min-height: 100vh; min-height: 100vh;
} }
</style> </style>
componentsPage/tabs/tabs.vue
+93 -93
View File
@@ -1,94 +1,94 @@
<template> <template>
<view class="components-tabs tn-safe-area-inset-bottom"> <view class="components-tabs tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>tabs标签</tn-nav-bar> <tn-nav-bar fixed>tabs标签</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="默认" :contentPadding="false"> <demo-title title="默认" :contentPadding="false">
<tn-tabs :list="scrollList" :current="current" @change="tabChange"></tn-tabs> <tn-tabs :list="scrollList" :current="current" @change="tabChange"></tn-tabs>
</demo-title> </demo-title>
<demo-title title="隐藏底部滑块" :contentPadding="false"> <demo-title title="隐藏底部滑块" :contentPadding="false">
<tn-tabs :list="scrollList" :current="current" :showBar="false" @change="tabChange"></tn-tabs> <tn-tabs :list="scrollList" :current="current" :showBar="false" @change="tabChange"></tn-tabs>
</demo-title> </demo-title>
<demo-title title="修改背景颜色" :contentPadding="false"> <demo-title title="修改背景颜色" :contentPadding="false">
<tn-tabs :list="scrollList" :current="current" backgroundColor="#FFFFFF" @change="tabChange"></tn-tabs> <tn-tabs :list="scrollList" :current="current" backgroundColor="#FFFFFF" @change="tabChange"></tn-tabs>
<view class="tn-margin-top"> <view class="tn-margin-top">
<tn-tabs :list="scrollList" :current="current" backgroundColor="tn-main-gradient-indigo" activeColor="#FFFFFF" @change="tabChange"></tn-tabs> <tn-tabs :list="scrollList" :current="current" backgroundColor="tn-main-gradient-indigo" activeColor="#FFFFFF" @change="tabChange"></tn-tabs>
</view> </view>
</demo-title> </demo-title>
<demo-title title="自定义标签宽高" :contentPadding="false"> <demo-title title="自定义标签宽高" :contentPadding="false">
<tn-tabs :list="scrollList" :current="current" :height="120" :itemWidth="200" :barWidth="140" @change="tabChange"></tn-tabs> <tn-tabs :list="scrollList" :current="current" :height="120" :itemWidth="200" :barWidth="140" @change="tabChange"></tn-tabs>
</demo-title> </demo-title>
<demo-title title="自定义标签、滑块" :contentPadding="false"> <demo-title title="自定义标签、滑块" :contentPadding="false">
<tn-tabs :list="scrollList" :current="current" backgroundColor="#FFFFFF" :activeItemStyle="activeItemStyle" :barStyle="barStyle" @change="tabChange"></tn-tabs> <tn-tabs :list="scrollList" :current="current" backgroundColor="#FFFFFF" :activeItemStyle="activeItemStyle" :barStyle="barStyle" @change="tabChange"></tn-tabs>
</demo-title> </demo-title>
<demo-title title="固定选项标签" :contentPadding="false"> <demo-title title="固定选项标签" :contentPadding="false">
<tn-tabs :list="fixedList" :current="current" :isScroll="false" :badgeOffset="[20, 50]" @change="tabChange"></tn-tabs> <tn-tabs :list="fixedList" :current="current" :isScroll="false" :badgeOffset="[20, 50]" @change="tabChange"></tn-tabs>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'componentsTabs', name: 'componentsTabs',
components: {demoTitle}, components: {demoTitle},
data() { data() {
return { return {
current: 0, current: 0,
activeItemStyle: { activeItemStyle: {
borderTop: '1rpx solid #E6E6E6' borderTop: '1rpx solid #E6E6E6'
}, },
barStyle: { barStyle: {
boxShadow: `12rpx 12rpx 16rpx #01BEFF` boxShadow: `12rpx 12rpx 16rpx #01BEFF`
}, },
scrollList: [ scrollList: [
{name: '关注', count: 10}, {name: '关注', count: 10},
{name: '推荐'}, {name: '推荐'},
{name: '热榜', count: '99+'}, {name: '热榜', count: '99+'},
{name: '搞笑'}, {name: '搞笑'},
{name: '视频'}, {name: '视频'},
{name: '科技'}, {name: '科技'},
{name: '音乐'}, {name: '音乐'},
{name: '电影'}, {name: '电影'},
{name: '游戏'} {name: '游戏'}
], ],
fixedList: [ fixedList: [
{name: '关注', count: 10}, {name: '关注', count: 10},
{name: '推荐'}, {name: '推荐'},
{name: '热榜', count: '99+'}, {name: '热榜', count: '99+'},
{name: '搞笑'} {name: '搞笑'}
] ]
} }
}, },
methods: { methods: {
// tab选项卡切换 // tab选项卡切换
tabChange(index) { tabChange(index) {
this.current = index this.current = index
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-tabs { .components-tabs {
background-color: $tn-bg-gray-color; background-color: $tn-bg-gray-color;
min-height: 100vh; min-height: 100vh;
} }
</style> </style>
componentsPage/time-line/time-line.vue
+222 -222
View File
@@ -1,223 +1,223 @@
<template> <template>
<view class="components-time-line"> <view class="components-time-line">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Timeline时间轴</tn-nav-bar> <tn-nav-bar fixed>Timeline时间轴</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="time-line__wrap"> <view class="time-line__wrap">
<tn-time-line> <tn-time-line>
<block v-for="(item, index) in expressData" :key="index"> <block v-for="(item, index) in expressData" :key="index">
<tn-time-line-item v-if="item.status !== 0" :top="2"> <tn-time-line-item v-if="item.status !== 0" :top="2">
<template slot="node"> <template slot="node">
<view class="time-line-item__node"> <view class="time-line-item__node">
<view v-if="item.status === 1" class="time-line-item__node--icon tn-icon-image-text"></view> <view v-if="item.status === 1" class="time-line-item__node--icon tn-icon-image-text"></view>
<view v-if="item.status === 2" class="time-line-item__node--icon tn-icon-prize"></view> <view v-if="item.status === 2" class="time-line-item__node--icon tn-icon-prize"></view>
<view v-if="item.status === 3" class="time-line-item__node--icon tn-icon-gift"></view> <view v-if="item.status === 3" class="time-line-item__node--icon tn-icon-gift"></view>
<view v-if="item.status === 4" class="time-line-item__node--icon tn-icon-logistics"></view> <view v-if="item.status === 4" class="time-line-item__node--icon tn-icon-logistics"></view>
<view v-if="item.status === 5" class="time-line-item__node--icon tn-icon-my"></view> <view v-if="item.status === 5" class="time-line-item__node--icon tn-icon-my"></view>
<view v-if="item.status === 6" class="time-line-item__node--icon tn-icon-cardbag"></view> <view v-if="item.status === 6" class="time-line-item__node--icon tn-icon-cardbag"></view>
<view v-if="item.status === 7" class="time-line-item__node--icon tn-icon-success"></view> <view v-if="item.status === 7" class="time-line-item__node--icon tn-icon-success"></view>
</view> </view>
</template> </template>
<template slot="content"> <template slot="content">
<view> <view>
<view v-if="item.status === 1" class="time-line-item__content__title">已下单</view> <view v-if="item.status === 1" class="time-line-item__content__title">已下单</view>
<view v-if="item.status === 2" class="time-line-item__content__title">已发货</view> <view v-if="item.status === 2" class="time-line-item__content__title">已发货</view>
<view v-if="item.status === 3" class="time-line-item__content__title">已揽件</view> <view v-if="item.status === 3" class="time-line-item__content__title">已揽件</view>
<view v-if="item.status === 4" class="time-line-item__content__title">运输中</view> <view v-if="item.status === 4" class="time-line-item__content__title">运输中</view>
<view v-if="item.status === 5" class="time-line-item__content__title">派送中</view> <view v-if="item.status === 5" class="time-line-item__content__title">派送中</view>
<view v-if="item.status === 6" class="time-line-item__content__title">待取件</view> <view v-if="item.status === 6" class="time-line-item__content__title">待取件</view>
<view v-if="item.status === 7" class="time-line-item__content__title">已签收</view> <view v-if="item.status === 7" class="time-line-item__content__title">已签收</view>
<view class="time-line-item__content__desc">{{ item.info }}</view> <view class="time-line-item__content__desc">{{ item.info }}</view>
<view class="time-line-item__content__time">{{ item.time }}</view> <view class="time-line-item__content__time">{{ item.time }}</view>
</view> </view>
</template> </template>
</tn-time-line-item> </tn-time-line-item>
<tn-time-line-item v-else> <tn-time-line-item v-else>
<template slot="content"> <template slot="content">
<view> <view>
<view class="time-line-item__content__desc">{{ item.info }}</view> <view class="time-line-item__content__desc">{{ item.info }}</view>
<view class="time-line-item__content__time">{{ item.time }}</view> <view class="time-line-item__content__time">{{ item.time }}</view>
</view> </view>
</template> </template>
</tn-time-line-item> </tn-time-line-item>
</block> </block>
</tn-time-line> </tn-time-line>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: 'componentsTimeline', name: 'componentsTimeline',
data() { data() {
return { return {
expressData: [ expressData: [
{ {
info: '派送成功', info: '派送成功',
status: 7, status: 7,
time: '2021-11-11 17:42' time: '2021-11-11 17:42'
}, },
{ {
info: '[代收点] 您的快件已从XXX顺丰速运代理店取出〖来自代收点〗', info: '[代收点] 您的快件已从XXX顺丰速运代理店取出〖来自代收点〗',
status: 0, status: 0,
time: '2021-11-11 17:31' time: '2021-11-11 17:31'
}, },
{ {
info: '快件领取成功', info: '快件领取成功',
status: 0, status: 0,
time: '2021-11-11 17:31' time: '2021-11-11 17:31'
}, },
{ {
info: '[代收点] 您的顺丰速运包裹已由XXX顺丰速运代理店代收，代收点地址：XXX， 联系电话：18888888888 〖来自代收点〗', info: '[代收点] 您的顺丰速运包裹已由XXX顺丰速运代理店代收，代收点地址：XXX， 联系电话：18888888888 〖来自代收点〗',
status: 6, status: 6,
time: '2021-11-11 17:15' time: '2021-11-11 17:15'
}, },
{ {
info: '快件交给XXX，正在派送途中（联系电话：18888888888，顺丰已开启“安全呼叫”保护您的电话隐私，请放心接听！）（主单总件数：1件）', info: '快件交给XXX，正在派送途中（联系电话：18888888888，顺丰已开启“安全呼叫”保护您的电话隐私，请放心接听！）（主单总件数：1件）',
status: 5, status: 5,
time: '2021-11-11 17:07' time: '2021-11-11 17:07'
}, },
{ {
info: '快件到达〖XXX合作点〗', info: '快件到达〖XXX合作点〗',
status: 4, status: 4,
time: '2021-11-11 16:25' time: '2021-11-11 16:25'
}, },
{ {
info: '快件在〖XXX营业点〗完成分拣，准备发往〖XXX合作点〗', info: '快件在〖XXX营业点〗完成分拣，准备发往〖XXX合作点〗',
status: 0, status: 0,
time: '2021-11-11 13:50' time: '2021-11-11 13:50'
}, },
{ {
info: '快件到达〖XXX营业点〗', info: '快件到达〖XXX营业点〗',
status: 0, status: 0,
time: '2021-11-11 13:06' time: '2021-11-11 13:06'
}, },
{ {
info: '快件在〖XXX集散点〗完成分拣，准备发往〖XXX营业点〗', info: '快件在〖XXX集散点〗完成分拣，准备发往〖XXX营业点〗',
status: 0, status: 0,
time: '2021-11-11 12:04' time: '2021-11-11 12:04'
}, },
{ {
info: '快件到达〖XXX集散点〗', info: '快件到达〖XXX集散点〗',
status: 0, status: 0,
time: '2021-11-11 10:14' time: '2021-11-11 10:14'
}, },
{ {
info: '快件在〖XXX中转场〗完成分拣，准备发往〖XXX集散点〗', info: '快件在〖XXX中转场〗完成分拣，准备发往〖XXX集散点〗',
status: 0, status: 0,
time: '2021-11-11 05:52' time: '2021-11-11 05:52'
}, },
{ {
info: '快件到达〖XXX转场〗', info: '快件到达〖XXX转场〗',
status: 0, status: 0,
time: '2021-11-11 05:36' time: '2021-11-11 05:36'
}, },
{ {
info: '快件在〖XXX中转场〗完成分拣，准备发往〖XXX中转场〗', info: '快件在〖XXX中转场〗完成分拣，准备发往〖XXX中转场〗',
status: 0, status: 0,
time: '2021-11-10 23:36' time: '2021-11-10 23:36'
}, },
{ {
info: '快件到达〖XXX中转场〗', info: '快件到达〖XXX中转场〗',
status: 0, status: 0,
time: '2021-11-10 22:34' time: '2021-11-10 22:34'
}, },
{ {
info: '快件在〖XXX营业部〗完成分拣，准备发往〖XXX中转场〗', info: '快件在〖XXX营业部〗完成分拣，准备发往〖XXX中转场〗',
status: 0, status: 0,
time: '2021-11-10 22:01' time: '2021-11-10 22:01'
}, },
{ {
info: '顺丰速运已收取快件', info: '顺丰速运已收取快件',
status: 3, status: 3,
time: '2021-11-10 21:54' time: '2021-11-10 21:54'
}, },
{ {
info: '包裹正在等待揽收', info: '包裹正在等待揽收',
status: 1, status: 1,
time: '2021-11-10 17:41' time: '2021-11-10 17:41'
}, },
{ {
info: '商品已经下单', info: '商品已经下单',
status: 1, status: 1,
time: '2021-11-10 12:17' time: '2021-11-10 12:17'
} }
] ]
} }
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tn-time-line-class { .tn-time-line-class {
.tn-time-line-item-class { .tn-time-line-item-class {
&:first-child { &:first-child {
.tn-time-line-item__node { .tn-time-line-item__node {
.time-line-item__node { .time-line-item__node {
background-color: $tn-main-color !important; background-color: $tn-main-color !important;
} }
} }
} }
} }
} }
.time-line { .time-line {
&__wrap { &__wrap {
padding: 60rpx 30rpx 30rpx 60rpx; padding: 60rpx 30rpx 30rpx 60rpx;
} }
&-item { &-item {
&__node { &__node {
width: 44rpx; width: 44rpx;
height: 44rpx; height: 44rpx;
border-radius: 100rpx; border-radius: 100rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #AAAAAA; background-color: #AAAAAA;
&--active { &--active {
background-color: $tn-main-color; background-color: $tn-main-color;
} }
&--icon { &--icon {
color: #FFFFFF; color: #FFFFFF;
font-size: 24rpx; font-size: 24rpx;
} }
} }
&__content { &__content {
&__title { &__title {
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
} }
&__desc { &__desc {
color: $tn-font-sub-color; color: $tn-font-sub-color;
font-size: 28rpx; font-size: 28rpx;
margin-bottom: 6rpx; margin-bottom: 6rpx;
} }
&__time { &__time {
color: $tn-font-holder-color; color: $tn-font-holder-color;
font-size: 26rpx; font-size: 26rpx;
} }
} }
} }
} }
</style> </style>
componentsPage/tips/tips.vue
+132 -132
View File
@@ -1,133 +1,133 @@
<template> <template>
<view class="components-tips"> <view class="components-tips">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>提示信息框</tn-nav-bar> <tn-nav-bar fixed>提示信息框</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click"> <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
<tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showTips">弹出Tips</tn-button> <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showTips">弹出Tips</tn-button>
</dynamic-demo-template> </dynamic-demo-template>
</view> </view>
<!-- Tips --> <!-- Tips -->
<tn-tips <tn-tips
ref="tips" ref="tips"
:position="position" :position="position"
:top="vuex_custom_bar_height" :top="vuex_custom_bar_height"
@close="closeTips" @close="closeTips"
></tn-tips> ></tn-tips>
</view> </view>
</template> </template>
<script> <script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue' import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default { export default {
name: 'componentsTips', name: 'componentsTips',
components: {dynamicDemoTemplate}, components: {dynamicDemoTemplate},
data() { data() {
return { return {
msg: '这是一条信息', msg: '这是一条信息',
backgroundColor: '', backgroundColor: '',
fontColor: '', fontColor: '',
duration: 2000, duration: 2000,
position: '', position: '',
tips: ['无需依赖额外的样式文件','使用tn-tips组件'], tips: ['无需依赖额外的样式文件','使用tn-tips组件'],
sectionList: [ sectionList: [
{ {
name: '参数切换', name: '参数切换',
section: [ section: [
{ {
title: '自定义颜色', title: '自定义颜色',
optional: ['默认','自定义'], optional: ['默认','自定义'],
methods: 'colorChange' methods: 'colorChange'
}, },
{ {
title: '弹出位置', title: '弹出位置',
optional: ['默认','顶部','中间','底部'], optional: ['默认','顶部','中间','底部'],
methods: 'positionChange' methods: 'positionChange'
}, },
{ {
title: '关闭时间', title: '关闭时间',
optional: ['默认','5000'], optional: ['默认','5000'],
methods: 'durationChange' methods: 'durationChange'
} }
] ]
} }
] ]
} }
}, },
methods: { methods: {
click(event) { click(event) {
this[event.methods] && this[event.methods](event) this[event.methods] && this[event.methods](event)
}, },
// 弹出Tips // 弹出Tips
showTips() { showTips() {
this.openTips() this.openTips()
}, },
// 切换弹出位置 // 切换弹出位置
positionChange(event) { positionChange(event) {
switch(event.index) { switch(event.index) {
case 0: case 0:
this.position = '' this.position = ''
break break
case 1: case 1:
this.position = 'top' this.position = 'top'
break break
case 2: case 2:
this.position = 'center' this.position = 'center'
break break
case 3: case 3:
this.position = 'bottom' this.position = 'bottom'
break break
} }
this.openTips() this.openTips()
}, },
// 切换颜色 // 切换颜色
colorChange(event) { colorChange(event) {
if (event.index === 0) { if (event.index === 0) {
this.backgroundColor = '' this.backgroundColor = ''
this.fontColor = '' this.fontColor = ''
} else { } else {
this.backgroundColor = 'tn-bg-gray--light' this.backgroundColor = 'tn-bg-gray--light'
this.fontColor = '#E83A30' this.fontColor = '#E83A30'
} }
this.openTips() this.openTips()
}, },
// 切换Tips关闭时间 // 切换Tips关闭时间
durationChange(event) { durationChange(event) {
this.duration = event.index === 0 ? 2000 : Number(event.name) this.duration = event.index === 0 ? 2000 : Number(event.name)
this.openTips() this.openTips()
}, },
// 打开Tips // 打开Tips
openTips() { openTips() {
this.$refs.tips.show({ this.$refs.tips.show({
msg: this.msg, msg: this.msg,
backgroundColor: this.backgroundColor, backgroundColor: this.backgroundColor,
fontColor: this.fontColor, fontColor: this.fontColor,
duration: this.duration duration: this.duration
}) })
}, },
// 关闭Tips // 关闭Tips
closeTips() { closeTips() {
this.$t.messageUtils.toast('tips提示框关闭了') this.$t.message.toast('tips提示框关闭了')
} }
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>
componentsPage/toast/toast.vue
+138 -138
View File
@@ -1,139 +1,139 @@
<template> <template>
<view class="components-toast"> <view class="components-toast">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Toast</tn-nav-bar> <tn-nav-bar fixed>Toast</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click"> <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
<tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showToast">弹出Toast</tn-button> <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showToast">弹出Toast</tn-button>
</dynamic-demo-template> </dynamic-demo-template>
</view> </view>
<!-- Toast --> <!-- Toast -->
<tn-toast <tn-toast
ref="toast" ref="toast"
@closed="closedToast" @closed="closedToast"
></tn-toast> ></tn-toast>
</view> </view>
</template> </template>
<script> <script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue' import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default { export default {
name: 'componentsToast', name: 'componentsToast',
components: {dynamicDemoTemplate}, components: {dynamicDemoTemplate},
data() { data() {
return { return {
title: '提示信息', title: '提示信息',
content: '欢迎使用图鸟UI', content: '欢迎使用图鸟UI',
icon: 'balancecar', icon: 'balancecar',
image: '', image: '',
duration: 2000, duration: 2000,
tips: ['无需依赖额外的样式文件','使用tn-toast组件'], tips: ['无需依赖额外的样式文件','使用tn-toast组件'],
sectionList: [ sectionList: [
{ {
name: '参数切换', name: '参数切换',
section: [ section: [
{ {
title: '标题', title: '标题',
optional: ['无标题','有标题'], optional: ['无标题','有标题'],
methods: 'titleChange', methods: 'titleChange',
current: 1 current: 1
}, },
{ {
title: '内容', title: '内容',
optional: ['无内容','有内容'], optional: ['无内容','有内容'],
methods: 'contentChange', methods: 'contentChange',
current: 1 current: 1
}, },
{ {
title: '图标', title: '图标',
optional: ['无图标','balancecar','图片'], optional: ['无图标','balancecar','图片'],
methods: 'iconChange', methods: 'iconChange',
current: 1 current: 1
}, },
{ {
title: '关闭时间', title: '关闭时间',
optional: ['默认','5000'], optional: ['默认','5000'],
methods: 'durationChange' methods: 'durationChange'
} }
] ]
} }
] ]
} }
}, },
methods: { methods: {
click(event) { click(event) {
this[event.methods] && this[event.methods](event) this[event.methods] && this[event.methods](event)
}, },
// 弹出Toast // 弹出Toast
showToast() { showToast() {
this.openToast() this.openToast()
}, },
// 切换Toast标题 // 切换Toast标题
titleChange(event) { titleChange(event) {
this.title = event.index === 0 ? '' : '提示信息' this.title = event.index === 0 ? '' : '提示信息'
this.openToast() this.openToast()
}, },
// 切换Toast内容 // 切换Toast内容
contentChange(event) { contentChange(event) {
this.content = event.index === 0 ? '' : '欢迎使用图鸟UI' this.content = event.index === 0 ? '' : '欢迎使用图鸟UI'
this.openToast() this.openToast()
}, },
// 切换Toast图标 // 切换Toast图标
iconChange(event) { iconChange(event) {
switch (event.index) { switch (event.index) {
case 0: case 0:
this.icon = '' this.icon = ''
this.image = '' this.image = ''
break break
case 1: case 1:
this.icon = event.name this.icon = event.name
this.image = '' this.image = ''
break break
case 2: case 2:
this.icon = '' this.icon = ''
this.image = '/static/favicon.ico' this.image = '/static/favicon.ico'
break break
} }
this.openToast() this.openToast()
}, },
// 切换Toast关闭时间 // 切换Toast关闭时间
durationChange(event) { durationChange(event) {
this.duration = event.index === 0 ? 2000 : Number(event.name) this.duration = event.index === 0 ? 2000 : Number(event.name)
this.openToast() this.openToast()
}, },
// 打开Toast // 打开Toast
openToast() { openToast() {
this.$refs.toast.show({ this.$refs.toast.show({
title: this.title, title: this.title,
content: this.content, content: this.content,
icon: this.icon, icon: this.icon,
image: this.image, image: this.image,
duration: this.duration duration: this.duration
}) })
}, },
// 关闭Toast // 关闭Toast
closedToast() { closedToast() {
this.$t.messageUtils.toast('Toast关闭') this.$t.message.toast('Toast关闭')
} }
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>
componentsPage/verification-code-input/verification-code-input.vue
+72 -72
View File
@@ -1,82 +1,82 @@
<template> <template>
<view class="components-verification-code-input tn-safe-area-inset-bottom"> <view class="components-verification-code-input tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>验证码输入</tn-nav-bar> <tn-nav-bar fixed>验证码输入</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础使用"> <demo-title title="基础使用">
<view class="tn-bg-white"> <view class="tn-bg-white">
<tn-verification-code-input v-model="value1"></tn-verification-code-input> <tn-verification-code-input v-model="value1"></tn-verification-code-input>
</view> </view>
</demo-title> </demo-title>
<demo-title title="居中提示线"> <demo-title title="居中提示线">
<view class="tn-bg-white"> <view class="tn-bg-white">
<tn-verification-code-input v-model="value2" mode="middleLine"></tn-verification-code-input> <tn-verification-code-input v-model="value2" mode="middleLine"></tn-verification-code-input>
</view> </view>
</demo-title> </demo-title>
<demo-title title="底部提示线"> <demo-title title="底部提示线">
<view class="tn-bg-white"> <view class="tn-bg-white">
<tn-verification-code-input v-model="value3" mode="bottomLine"></tn-verification-code-input> <tn-verification-code-input v-model="value3" mode="bottomLine"></tn-verification-code-input>
</view> </view>
</demo-title> </demo-title>
<demo-title title="修改验证码长度"> <demo-title title="修改验证码长度">
<view class="tn-bg-white"> <view class="tn-bg-white">
<tn-verification-code-input v-model="value4" :maxLength="6"></tn-verification-code-input> <tn-verification-code-input v-model="value4" :maxLength="6"></tn-verification-code-input>
</view> </view>
</demo-title> </demo-title>
<demo-title title="使用圆点隐藏已输入"> <demo-title title="使用圆点隐藏已输入">
<view class="tn-bg-white"> <view class="tn-bg-white">
<tn-verification-code-input v-model="value5" :dotFill="true"></tn-verification-code-input> <tn-verification-code-input v-model="value5" :dotFill="true"></tn-verification-code-input>
</view> </view>
</demo-title> </demo-title>
<demo-title title="不带呼吸效果"> <demo-title title="不带呼吸效果">
<view class="tn-bg-white"> <view class="tn-bg-white">
<tn-verification-code-input v-model="value6" :breathe="false"></tn-verification-code-input> <tn-verification-code-input v-model="value6" :breathe="false"></tn-verification-code-input>
</view> </view>
</demo-title> </demo-title>
<demo-title title="字体加粗"> <demo-title title="字体加粗">
<view class="tn-bg-white"> <view class="tn-bg-white">
<tn-verification-code-input v-model="value7" :bold="true"></tn-verification-code-input> <tn-verification-code-input v-model="value7" :bold="true"></tn-verification-code-input>
</view> </view>
</demo-title> </demo-title>
<demo-title title="自定义样式"> <demo-title title="自定义样式">
<view class="tn-bg-white"> <view class="tn-bg-white">
<tn-verification-code-input v-model="value8" :fontSize="40" :inputWidth="60" activeColor="#3D7EFF" inactiveColor="#9EBEFF"></tn-verification-code-input> <tn-verification-code-input v-model="value8" :fontSize="40" :inputWidth="60" activeColor="#3D7EFF" inactiveColor="#9EBEFF"></tn-verification-code-input>
</view> </view>
</demo-title> </demo-title>
<view class="tn-padding-bottom-lg"></view> <view class="tn-padding-bottom-lg"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import demoTitle from '@/libs/components/demo-title.vue' import demoTitle from '@/libs/components/demo-title.vue'
export default { export default {
name: 'ComponentsVerificationCode', name: 'ComponentsVerificationCode',
components: { demoTitle }, components: { demoTitle },
data() { data() {
return { return {
value1: '24', value1: '24',
value2: '', value2: '',
value3: '', value3: '',
value4: '', value4: '',
value5: '', value5: '',
value6: '', value6: '',
value7: '', value7: '',
value8: '', value8: '',
value9: '', value9: '',
value10: '', value10: '',
} }
} }
@@ -84,8 +84,8 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.components-verification-code-input { .components-verification-code-input {
background-color: $tn-bg-gray-color; background-color: $tn-bg-gray-color;
min-height: 100vh; min-height: 100vh;
} }
</style> </style>
componentsPage/verification-code/verification-code.vue
+157 -157
View File
@@ -1,158 +1,158 @@
<template> <template>
<view class="components-verification_code"> <view class="components-verification_code">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed>验证码倒计时</tn-nav-bar> <tn-nav-bar fixed>验证码倒计时</tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"> <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click"> <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
<view class="tn-flex tn-flex-row-center tn-flex-wrap"> <view class="tn-flex tn-flex-row-center tn-flex-wrap">
<view style="width: 100%;"> <view style="width: 100%;">
<tn-form :labelWidth="120" :borderBottom="true"> <tn-form :labelWidth="120" :borderBottom="true">
<tn-form-item label="验证码"> <tn-form-item label="验证码">
<tn-input></tn-input> <tn-input></tn-input>
<view slot="right"> <view slot="right">
<tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" size="sm" @click="getCode">{{ tips }}</tn-button> <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" size="sm" @click="getCode">{{ tips }}</tn-button>
</view> </view>
</tn-form-item> </tn-form-item>
</tn-form> </tn-form>
</view> </view>
<view style="width: 100%;"> <view style="width: 100%;">
<tn-button width="100%" backgroundColor="tn-bg-red" fontColor="tn-color-white" margin="30rpx 0 0 0" style="width: 100%;" @click="reset">重置</tn-button> <tn-button width="100%" backgroundColor="tn-bg-red" fontColor="tn-color-white" margin="30rpx 0 0 0" style="width: 100%;" @click="reset">重置</tn-button>
</view> </view>
</view> </view>
</dynamic-demo-template> </dynamic-demo-template>
</view> </view>
<!-- verification-code --> <!-- verification-code -->
<tn-verification-code <tn-verification-code
ref="code" ref="code"
:keepRunning="keepRunning" :keepRunning="keepRunning"
:seconds="seconds" :seconds="seconds"
:startText="startText" :startText="startText"
:countDownText="countDownText" :countDownText="countDownText"
:endText="endText" :endText="endText"
@end="codeEnd" @end="codeEnd"
@start="codeStart" @start="codeStart"
@change="codeChange" @change="codeChange"
> >
</tn-verification-code> </tn-verification-code>
</view> </view>
</template> </template>
<script> <script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue' import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default { export default {
name: 'componentsVerificationCode', name: 'componentsVerificationCode',
components: {dynamicDemoTemplate}, components: {dynamicDemoTemplate},
data() { data() {
return { return {
tips: '获取验证码', tips: '获取验证码',
keepRunning: true, keepRunning: true,
seconds: 60, seconds: 60,
startText: '获取验证码', startText: '获取验证码',
countDownText: 's秒后重新获取', countDownText: 's秒后重新获取',
endText: '重新获取', endText: '重新获取',
tips: ['无需依赖额外的样式文件','使用tn-verification-code组件'], tips: ['无需依赖额外的样式文件','使用tn-verification-code组件'],
sectionList: [ sectionList: [
{ {
name: '参数切换', name: '参数切换',
section: [ section: [
{ {
title: '倒计时间', title: '倒计时间',
optional: ['60s','30s','5s'], optional: ['60s','30s','5s'],
methods: 'secondsChange' methods: 'secondsChange'
}, },
{ {
title: '退出后保持运行', title: '退出后保持运行',
optional: ['是','否'], optional: ['是','否'],
methods: 'keepRunningChange' methods: 'keepRunningChange'
}, },
{ {
title: '自定义提示语', title: '自定义提示语',
optional: ['默认','自定义'], optional: ['默认','自定义'],
methods: 'customTitleChange' methods: 'customTitleChange'
} }
] ]
} }
] ]
} }
}, },
methods: { methods: {
click(event) { click(event) {
this[event.methods] && this[event.methods](event) this[event.methods] && this[event.methods](event)
}, },
// 切换倒计时间 // 切换倒计时间
secondsChange(event) { secondsChange(event) {
this.seconds = Number(event.name.replace('s','')) this.seconds = Number(event.name.replace('s',''))
}, },
// 切换是否保持 // 切换是否保持
keepRunningChange(event) { keepRunningChange(event) {
this.keepRunning = event.index === 0 ? true : false this.keepRunning = event.index === 0 ? true : false
}, },
// 切换是否使用自定义提示语 // 切换是否使用自定义提示语
customTitleChange(event) { customTitleChange(event) {
switch (event.index) { switch (event.index) {
case 0: case 0:
this.startText = '点击获取验证码' this.startText = '点击获取验证码'
this.countDownText = '重新获取s秒后' this.countDownText = '重新获取s秒后'
this.endText = '再次获取' this.endText = '再次获取'
break break
case 1: case 1:
this.startText = '获取验证码' this.startText = '获取验证码'
this.countDownText = 's秒后重新获取' this.countDownText = 's秒后重新获取'
this.endText = '重新获取' this.endText = '重新获取'
break break
} }
this.reset() this.reset()
}, },
// 获取验证码 // 获取验证码
getCode() { getCode() {
if (this.$refs.code.canGetCode) { if (this.$refs.code.canGetCode) {
this.$t.messageUtils.loading('正在获取验证码') this.$t.message.loading('正在获取验证码')
setTimeout(() => { setTimeout(() => {
this.$t.messageUtils.closeLoading() this.$t.message.closeLoading()
this.$t.messageUtils.toast('验证码已经发送') this.$t.message.toast('验证码已经发送')
// 通知组件开始计时 // 通知组件开始计时
this.$refs.code.start() this.$refs.code.start()
}, 2000) }, 2000)
} else { } else {
this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试') this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
} }
}, },
// 重置验证码 // 重置验证码
reset() { reset() {
this.$refs.code.reset() this.$refs.code.reset()
}, },
// 开始倒计时 // 开始倒计时
codeStart() { codeStart() {
this.$t.messageUtils.toast('倒计时开始') this.$t.message.toast('倒计时开始')
}, },
// 结束倒计时 // 结束倒计时
codeEnd() { codeEnd() {
this.$t.messageUtils.toast('倒计时结束') this.$t.message.toast('倒计时结束')
}, },
// 正在倒计时 // 正在倒计时
codeChange(event) { codeChange(event) {
this.tips = event this.tips = event
} }
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>
libs/components/demo-title.vue
+86 -82
View File
@@ -1,90 +1,94 @@
<template> <template>
<view class="demo-title"> <view class="demo-title">
<view> <view>
<view v-if="type === 'first'" class="main_title"> <view v-if="type === 'first'" class="main_title">
<view v-if="leftIcon" class="main_title__icon main_title__icon--left" :class="[`tn-icon-${leftIcon}`]"></view> <view v-if="leftIcon" class="main_title__icon main_title__icon--left" :class="[`tn-icon-${leftIcon}`]"></view>
<view class="main_title__content">{{ title }}</view> <view class="main_title__content">{{ title }}</view>
<view v-if="rightIcon" class="main_title__icon main_title__icon--right" :class="[`tn-icon-${rightIcon}`]"></view> <view v-if="rightIcon" class="main_title__icon main_title__icon--right" :class="[`tn-icon-${rightIcon}`]"></view>
</view> </view>
<view v-if="type === 'second'" class="second_title"> <view v-if="type === 'second'" class="second_title">
<view class="second_title__content">{{ title }}</view> <view class="second_title__content">{{ title }}</view>
</view> </view>
</view> </view>
<view class="content" :class="[{ <view class="content" :class="[{
'content--padding': contentPadding 'content--padding': contentPadding
}]"> }]">
<slot></slot> <slot></slot>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: 'demo-title', name: 'demo-title',
props: { options: {
// 标题类型 // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
type: { virtualHost: true
type: String, },
default: 'first' props: {
}, // 标题类型
// 标题 type: {
title: { type: String,
type: String, default: 'first'
default: '' },
}, // 标题
// 左图标 title: {
leftIcon: { type: String,
type: String, default: ''
default: 'star' },
}, // 左图标
// 右图标 leftIcon: {
rightIcon: { type: String,
type: String, default: 'star'
default: 'star' },
}, // 右图标
// 内容容器是否有两边边距 rightIcon: {
contentPadding: { type: String,
type: Boolean, default: 'star'
default: true },
} // 内容容器是否有两边边距
} contentPadding: {
type: Boolean,
default: true
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.main_title { .main_title {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 50rpx; margin-top: 50rpx;
font-size: 36rpx; font-size: 36rpx;
font-weight: bold; font-weight: bold;
&__content { &__content {
padding: 0 18rpx; padding: 0 18rpx;
} }
&__icon { &__icon {
font-size: 34rpx; font-size: 34rpx;
} }
} }
.second_title { .second_title {
margin: 24rpx 0; margin: 24rpx 0;
margin-left: 30rpx; margin-left: 30rpx;
&__content { &__content {
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
} }
} }
.content { .content {
margin-top: 30rpx; margin-top: 30rpx;
&--padding { &--padding {
margin-left: 30rpx; margin-left: 30rpx;
margin-right: 30rpx; margin-right: 30rpx;
} }
} }
</style> </style>
libs/components/dynamic-demo-template.vue
+689 -689
View File
File diff suppressed because it is too large Load Diff
libs/components/multiple-options-demo.vue
+139 -139
View File
@@ -1,147 +1,147 @@
<template> <template>
<view class="multiple-options"> <view class="multiple-options">
<view class="list"> <view class="list">
<block v-for="(item, index) in listData" :key="index"> <block v-for="(item, index) in listData" :key="index">
<view <view
class="list__item" class="list__item"
:class="[`tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}--light`]" :class="[`tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}--light`]"
@tap="navOptionsPage(item.url)" @tap="navOptionsPage(item.url)"
> >
<view class="list__content"> <view class="list__content">
<view class="list__content__title">{{ item.title }}</view> <view class="list__content__title">{{ item.title }}</view>
<view class="list__content__desc">{{ item.desc }}</view> <view class="list__content__desc">{{ item.desc }}</view>
</view> </view>
<view class="list__icon"> <view class="list__icon">
<view class="list__icon__main" :class="[`tn-icon-${item.mainIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view> <view class="list__icon__main" :class="[`tn-icon-${item.mainIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view>
<view class="list__icon__sub" :class="[`tn-icon-${item.subIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view> <view class="list__icon__sub" :class="[`tn-icon-${item.subIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view>
</view> </view>
</view> </view>
</block> </block>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: 'multiple-options-demo', name: 'multiple-options-demo',
props: { props: {
// 显示的列表数据 // 显示的列表数据
list: { list: {
type: Array, type: Array,
default() { default() {
return [] return []
} }
} }
}, },
data() { data() {
return { return {
// 图鸟颜色列表 // 图鸟颜色列表
tuniaoColorList: [ tuniaoColorList: [
'red', 'red',
'purplered', 'purplered',
'purple', 'purple',
'bluepurple', 'bluepurple',
'aquablue', 'aquablue',
'blue', 'blue',
'indigo', 'indigo',
'cyan', 'cyan',
'teal', 'teal',
'green', 'green',
'orange', 'orange',
'orangered' 'orangered'
], ],
listData: [] listData: []
} }
}, },
watch: { watch: {
list(val) { list(val) {
this.initList() this.initList()
} }
}, },
created() { created() {
this.initList() this.initList()
}, },
methods: { methods: {
// 初始化列表数据 // 初始化列表数据
initList() { initList() {
// 给列表添加背景颜色数据 // 给列表添加背景颜色数据
this.listData = this.list.map((item, index) => { this.listData = this.list.map((item, index) => {
item.bgColorIndex = this.getBgNum() item.bgColorIndex = this.getBgNum()
item.mainIcon = item?.mainIcon || 'computer-fill' item.mainIcon = item?.mainIcon || 'computer-fill'
item.subIcon = item?.subIcon || 'share' item.subIcon = item?.subIcon || 'share'
return item return item
}) })
}, },
// 跳转到对应的选项页面 // 跳转到对应的选项页面
navOptionsPage(url) { navOptionsPage(url) {
uni.navigateTo({ uni.navigateTo({
url: url url: url
}) })
}, },
// 获取酷炫背景随机数 // 获取酷炫背景随机数
getBgNum() { getBgNum() {
return Math.floor((Math.random() * this.tuniaoColorList.length)) return Math.floor((Math.random() * this.tuniaoColorList.length))
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.list { .list {
&__item { &__item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: calc(100% - 60rpx); width: calc(100% - 60rpx);
margin: 108rpx 30rpx 0rpx 30rpx; margin: 108rpx 30rpx 0rpx 30rpx;
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1); box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
border-radius: 20rpx; border-radius: 20rpx;
} }
&__content { &__content {
flex: 1; flex: 1;
// color: $tn-font-color; // color: $tn-font-color;
margin: 34rpx 0rpx 27rpx 37rpx; margin: 34rpx 0rpx 27rpx 37rpx;
&__title { &__title {
font-size: 36rpx; font-size: 36rpx;
font-weight: bold; font-weight: bold;
margin-bottom: 12rpx; margin-bottom: 12rpx;
} }
&__desc { &__desc {
font-size: 28rpx; font-size: 28rpx;
} }
} }
&__icon { &__icon {
flex: 1; flex: 1;
margin-right: 26rpx; margin-right: 26rpx;
position: relative; position: relative;
&__main, &__sub { &__main, &__sub {
-webkit-background-clip: text; -webkit-background-clip: text;
color: transparent; color: transparent;
position: absolute; position: absolute;
transition: transform 0.25s ease; transition: transform 0.25s ease;
} }
&__main { &__main {
font-size: 200rpx; font-size: 200rpx;
width: 190rpx; width: 190rpx;
line-height: 200rpx; line-height: 200rpx;
top: 0; top: 0;
right: 0rpx; right: 0rpx;
transform: translateY(-60%); transform: translateY(-60%);
} }
&__sub { &__sub {
font-size: 70rpx; font-size: 70rpx;
top: 0; top: 0;
right: 175rpx; right: 175rpx;
transform: translateY(-5rpx); transform: translateY(-5rpx);
} }
} }
} }
</style> </style>
libs/components/nav-index-button.vue
+161 -161
View File
@@ -1,169 +1,169 @@
<template> <template>
<view class="nav-index-button" :style="{bottom: `${bottom}rpx`, right: `${right}rpx`}" @tap.stop="navIndex"> <view class="nav-index-button" :style="{bottom: `${bottom}rpx`, right: `${right}rpx`}" @tap.stop="navIndex">
<view class="nav-index-button__content"> <view class="nav-index-button__content">
<view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-cool-bg-color-7"> <view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-cool-bg-color-7">
<view class="tn-icon-home-vertical-fill"></view> <view class="tn-icon-home-vertical-fill"></view>
</view> </view>
</view> </view>
<view class="nav-index-button__meteor"> <view class="nav-index-button__meteor">
<view class="nav-index-button__meteor__wrapper"> <view class="nav-index-button__meteor__wrapper">
<view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item" :style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}"> <view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item" :style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
<view class="nav-index-button__meteor__item--pic"></view> <view class="nav-index-button__meteor__item--pic"></view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: 'nav-index-button', name: 'nav-index-button',
props: { props: {
// 距离底部的距离 // 距离底部的距离
bottom: { bottom: {
type: [Number, String], type: [Number, String],
default: 300 default: 300
}, },
// 距离右边的距离 // 距离右边的距离
right: { right: {
type: [Number, String], type: [Number, String],
default: 75 default: 75
}, },
// 首页地址 // 首页地址
indexPath: { indexPath: {
type: String, type: String,
default: '/pages/index/index' default: '/pages/index/index'
} }
}, },
methods: { methods: {
// 跳转回首页 // 跳转回首页
navIndex() { navIndex() {
// 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页 // 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
const pages = getCurrentPages() const pages = getCurrentPages()
if (pages && pages.length > 0) { if (pages && pages.length > 0) {
const indexPath = this.indexPath || '/pages/index/index' const indexPath = this.indexPath || '/pages/index/index'
const firstPage = pages[0] const firstPage = pages[0]
if (pages.length == 1 && (!firstPage.route || firstPage.route != indexPath.substring(1, indexPath.length))) { if (pages.length == 1 && (!firstPage.route || firstPage.route != indexPath.substring(1, indexPath.length))) {
uni.reLaunch({ uni.reLaunch({
url: indexPath url: indexPath
}) })
} else { } else {
uni.navigateBack({ uni.navigateBack({
delta: 1 delta: 1
}) })
} }
} else { } else {
uni.reLaunch({ uni.reLaunch({
url: indexPath url: indexPath
}) })
} }
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.nav-index-button { .nav-index-button {
position: fixed; position: fixed;
animation: suspension 3s ease-in-out infinite; animation: suspension 3s ease-in-out infinite;
z-index: 999999; z-index: 999999;
&__content { &__content {
position: absolute; position: absolute;
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
&--icon { &--icon {
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
font-size: 60rpx; font-size: 60rpx;
border-radius: 50%; border-radius: 50%;
margin-bottom: 18rpx; margin-bottom: 18rpx;
position: relative; position: relative;
z-index: 1; z-index: 1;
transform: scale(0.85); transform: scale(0.85);
&::after { &::after {
content: " "; content: " ";
position: absolute; position: absolute;
z-index: -1; z-index: -1;
width: 100%; width: 100%;
height: 100%; height: 100%;
left: 0; left: 0;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
opacity: 1; opacity: 1;
transform: scale(1, 1); transform: scale(1, 1);
background-size: 100% 100%; background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png); background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
} }
} }
} }
&__meteor { &__meteor {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
transform-style: preserve-3d; transform-style: preserve-3d;
transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg); transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
&__wrapper { &__wrapper {
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
transform-style: preserve-3d; transform-style: preserve-3d;
animation: spin 20s linear infinite; animation: spin 20s linear infinite;
} }
&__item { &__item {
position: absolute; position: absolute;
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
border-radius: 1000rpx; border-radius: 1000rpx;
left: 0; left: 0;
top: 0; top: 0;
&--pic { &--pic {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc3.png) no-repeat center center; background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc3.png) no-repeat center center;
background-size: 100% 100%; background-size: 100% 100%;
animation: arc 4s linear infinite; animation: arc 4s linear infinite;
} }
} }
} }
} }
@keyframes suspension { @keyframes suspension {
0%, 100% { 0%, 100% {
transform: translateY(0); transform: translateY(0);
} }
50% { 50% {
transform: translateY(-0.8rem); transform: translateY(-0.8rem);
} }
} }
@keyframes spin { @keyframes spin {
0% { 0% {
transform: rotateX(0deg); transform: rotateX(0deg);
} }
100% { 100% {
transform: rotateX(-360deg); transform: rotateX(-360deg);
} }
} }
@keyframes arc { @keyframes arc {
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
</style> </style>
libs/mixin/dynamic_demo_mixin.js
+51 -51
View File
@@ -1,52 +1,52 @@
/** /**
* 动态参数演示mixin * 动态参数演示mixin
*/ */
module.exports = { module.exports = {
data() { data() {
return { return {
// 效果显示框top的值 // 效果显示框top的值
contentContainerTop: '0px', contentContainerTop: '0px',
contentContainerIsTop: false, contentContainerIsTop: false,
// 参数显示框top的值 // 参数显示框top的值
sectionContainerTop: '0px' sectionContainerTop: '0px'
} }
}, },
onReady() { onReady() {
this.updateSectionContainerTop() this.updateSectionContainerTop()
}, },
methods: { methods: {
// 处理演示效果框的位置 // 处理演示效果框的位置
async _handleContentConatinerPosition() { async _handleContentConatinerPosition() {
// 获取效果演示框的节点信息 // 获取效果演示框的节点信息
const contentContainer = await this._tGetRect('#content_container') const contentContainer = await this._tGetRect('#content_container')
// 获取参数框的节点信息 // 获取参数框的节点信息
this._tGetRect('#section_container').then((res) => { this._tGetRect('#section_container').then((res) => {
// 判断参数框是否在移动，如果是则更新效果框的位置 // 判断参数框是否在移动，如果是则更新效果框的位置
// 如果效果框的顶部已经触控到顶部导航栏就停止跟随 // 如果效果框的顶部已经触控到顶部导航栏就停止跟随
if (res.top - contentContainer.bottom != 15) { if (res.top - contentContainer.bottom != 15) {
const newTop = res.top - (contentContainer.height + uni.upx2px(20)) const newTop = res.top - (contentContainer.height + uni.upx2px(20))
const minTop = this.vuex_custom_bar_height + 1 const minTop = this.vuex_custom_bar_height + 1
if (newTop < minTop) { if (newTop < minTop) {
this.contentContainerTop = minTop + 'px' this.contentContainerTop = minTop + 'px'
this.contentContainerIsTop = true this.contentContainerIsTop = true
} else { } else {
this.contentContainerTop = newTop + 'px' this.contentContainerTop = newTop + 'px'
this.contentContainerIsTop = false this.contentContainerIsTop = false
} }
} }
}) })
}, },
// 更新状态切换栏位置信息 // 更新状态切换栏位置信息
updateSectionContainerTop() { updateSectionContainerTop() {
this._tGetRect('#content_container').then((res) => { this._tGetRect('#content_container').then((res) => {
this.contentContainerTop = (this.vuex_custom_bar_height + 148) + 'px' this.contentContainerTop = (this.vuex_custom_bar_height + 148) + 'px'
this.sectionContainerTop = (res.height + 20) + 'px' this.sectionContainerTop = (res.height + 20) + 'px'
}) })
} }
}, },
// 监听页面滚动 // 监听页面滚动
onPageScroll() { onPageScroll() {
this._handleContentConatinerPosition() this._handleContentConatinerPosition()
} }
} }
libs/mixin/template_page_mixin.js
+59 -59
View File
@@ -1,60 +1,60 @@
/** /**
* 演示页面mixin * 演示页面mixin
*/ */
module.exports = { module.exports = {
data() { data() {
return { return {
} }
}, },
onLoad() { onLoad() {
// 更新顶部导航栏信息 // 更新顶部导航栏信息
this.updateCustomBarInfo() this.updateCustomBarInfo()
}, },
methods: { methods: {
// 点击左上角返回按钮时触发事件 // 点击左上角返回按钮时触发事件
goBack() { goBack() {
// 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页 // 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
const pages = getCurrentPages() const pages = getCurrentPages()
if (pages && pages.length > 0) { if (pages && pages.length > 0) {
const firstPage = pages[0] const firstPage = pages[0]
if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index/index')) { if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index/index')) {
uni.reLaunch({ uni.reLaunch({
url: '/pages/index/index' url: '/pages/index/index'
}) })
} else { } else {
uni.navigateBack({ uni.navigateBack({
delta: 1 delta: 1
}) })
} }
} else { } else {
uni.reLaunch({ uni.reLaunch({
url: '/pages/index/index' url: '/pages/index/index'
}) })
} }
}, },
// 更新顶部导航栏信息 // 更新顶部导航栏信息
async updateCustomBarInfo() { async updateCustomBarInfo() {
// 获取vuex中的自定义顶栏的高度 // 获取vuex中的自定义顶栏的高度
let customBarHeight = this.vuex_custom_bar_height let customBarHeight = this.vuex_custom_bar_height
let statusBarHeight = this.vuex_status_bar_height let statusBarHeight = this.vuex_status_bar_height
// 如果获取失败则重新获取 // 如果获取失败则重新获取
if (!customBarHeight) { if (!customBarHeight) {
try { try {
const navBarInfo = await this.$t.updateCustomBar() const navBarInfo = await this.$t.updateCustomBar()
customBarHeight = navBarInfo.customBarHeight customBarHeight = navBarInfo.customBarHeight
statusBarHeight = navBarInfo.statusBarHeight statusBarHeight = navBarInfo.statusBarHeight
} catch(e) { } catch(e) {
setTimeout(() => { setTimeout(() => {
this.updateCustomBarInfo() this.updateCustomBarInfo()
}, 10) }, 10)
return return
} }
} }
// 更新vuex中的导航栏信息 // 更新vuex中的导航栏信息
this.$t.vuex('vuex_status_bar_height', statusBarHeight) this.$t.vuex('vuex_status_bar_height', statusBarHeight)
this.$t.vuex('vuex_custom_bar_height', customBarHeight) this.$t.vuex('vuex_custom_bar_height', customBarHeight)
} }
} }
} }
main.js
+24 -20
View File
@@ -1,24 +1,28 @@
import App from './App' import App from './App'
import store from './store' import store from './store'
import Vue from 'vue' import Vue from 'vue'
Vue.config.productionTip = false Vue.config.productionTip = false
App.mpType = 'app' App.mpType = 'app'
// 引入全局TuniaoUI // 引入全局TuniaoUI
import TuniaoUI from 'tuniao-ui' import TuniaoUI from 'tuniao-ui'
Vue.use(TuniaoUI) Vue.use(TuniaoUI)
// 引入TuniaoUI提供的vuex简写方法 // 引入TuniaoUI提供的vuex简写方法
let vuexStore = require('@/store/$t.mixin.js') let vuexStore = require('@/store/$t.mixin.js')
Vue.mixin(vuexStore) Vue.mixin(vuexStore)
// 引入TuniaoUI对小程序分享的mixin封装 // 引入TuniaoUI对小程序分享的mixin封装
let mpShare = require('tuniao-ui/libs/mixin/mpShare.js') let mpShare = require('tuniao-ui/libs/mixin/mpShare.js')
Vue.mixin(mpShare) Vue.mixin(mpShare)
const app = new Vue({ const app = new Vue({
store, store,
...App ...App
}) })
// 引入请求封装
require('./util/request/index')(app)
app.$mount() app.$mount()
manifest.json
+56 -8
View File
@@ -1,7 +1,7 @@
{ {
"name" : "TuniaoUI_UniApp_Opensource", "name" : "TuniaoUI_UniApp",
"appid" : "__UNI__C82400B", "appid" : "__UNI__C82400B",
"description" : "TuniaoUI 开源版本", "description" : "",
"versionName" : "1.0.0", "versionName" : "1.0.0",
"versionCode" : "100", "versionCode" : "100",
"transformPx" : false, "transformPx" : false,
@@ -43,20 +43,64 @@
/* ios打包配置 */ /* ios打包配置 */
"ios" : {}, "ios" : {},
/* SDK配置 */ /* SDK配置 */
"sdkConfigs" : {} "sdkConfigs" : {},
"splashscreen" : {
"androidStyle" : "common"
},
"icons" : {
"android" : {
"hdpi" : "unpackage/res/icons/72x72.png",
"xhdpi" : "unpackage/res/icons/96x96.png",
"xxhdpi" : "unpackage/res/icons/144x144.png",
"xxxhdpi" : "unpackage/res/icons/192x192.png"
},
"ios" : {
"appstore" : "unpackage/res/icons/1024x1024.png",
"ipad" : {
"app" : "unpackage/res/icons/76x76.png",
"app@2x" : "unpackage/res/icons/152x152.png",
"notification" : "unpackage/res/icons/20x20.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"proapp@2x" : "unpackage/res/icons/167x167.png",
"settings" : "unpackage/res/icons/29x29.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"spotlight" : "unpackage/res/icons/40x40.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png"
},
"iphone" : {
"app@2x" : "unpackage/res/icons/120x120.png",
"app@3x" : "unpackage/res/icons/180x180.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"notification@3x" : "unpackage/res/icons/60x60.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"settings@3x" : "unpackage/res/icons/87x87.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png",
"spotlight@3x" : "unpackage/res/icons/120x120.png"
}
}
}
} }
}, },
/* 快应用特有相关 */ /* 快应用特有相关 */
"quickapp" : {}, "quickapp" : {},
/* 小程序特有相关 */ /* 小程序特有相关 */
"mp-weixin" : { "mp-weixin" : {
"appid" : "wx97458d91caa76a6a", "appid" : "wxf3d81a452b88ff4b",
"setting" : { "setting" : {
"urlCheck" : false, "urlCheck" : false,
"es6" : true, "es6" : true,
"minified" : true "minified" : true,
"postcss" : true
}, },
"usingComponents" : true "usingComponents" : true,
"optimization" : {
"subPackages" : true
},
"permission" : {
"scope.userLocation" : {
"desc" : "获取您的位置信息方便为您提供服务"
}
}
}, },
"mp-alipay" : { "mp-alipay" : {
"usingComponents" : true "usingComponents" : true
@@ -72,13 +116,17 @@
}, },
"vueVersion" : "2", "vueVersion" : "2",
"h5" : { "h5" : {
"template" : "template.h5.html",
"title" : "Tuniao UI", "title" : "Tuniao UI",
"template" : "template.h5.html",
"router" : { "router" : {
"mode" : "hash" "mode" : "hash"
}, },
"sdkConfigs" : { "sdkConfigs" : {
"maps" : {} "maps" : {
"qqmap" : {
"key" : "IXBBZ-HHSK3-UWW3K-3DB6K-M7Y5K-F4FM5"
}
}
} }
} }
} }
mock/basic_page.js
+87 -56
View File
@@ -1,57 +1,88 @@
/** /**
* 页面展示列表数据 * 页面展示列表数据
*/ */
export default { export default {
data: [ data: [
{ {
icon: 'menu-more', title: '基础元素',
title: 'Flex布局', backgroundColor: 'tn-cool-bg-color-1',
url: '/basicPage/flex-layout/flex-layout' list: [
}, {
{ icon: 'menu-more',
icon: 'menu-circle', title: 'Flex布局',
title: 'Grid布局', url: '/basicPage/flex-layout/flex-layout'
url: '/basicPage/grid-layout/grid-layout' },
}, {
{ icon: 'menu-circle',
icon: 'gloves', title: 'Grid布局',
title: '配色', url: '/basicPage/grid-layout/grid-layout'
url: '/basicPage/color/color' },
}, {
{ icon: 'gloves',
icon: 'font', title: '配色',
title: '图标', url: '/basicPage/color/color'
url: '/basicPage/icon/icon' },
}, {
{ icon: 'font',
icon: 'circle-fill', title: '图标',
title: '按钮', url: '/basicPage/icon/icon'
url: '/basicPage/button/button' },
}, {
{ icon: 'circle-fill',
icon: 'tag', title: '按钮',
title: '标签', url: '/basicPage/button/button'
url: '/basicPage/tag/tag' },
}, {
{ icon: 'tag',
icon: 'square', title: '标签',
title: '边框', url: '/basicPage/tag/tag'
url: '/basicPage/border/border' },
}, {
{ icon: 'square',
icon: 'copy-fill', title: '边框',
title: '阴影', url: '/basicPage/border/border'
url: '/basicPage/shadow/shadow' },
}, {
{ icon: 'copy-fill',
icon: 'moon', title: '阴影',
title: '微标', url: '/basicPage/shadow/shadow'
url: '/basicPage/badge/badge' },
}, {
{ icon: 'moon',
icon: 'emoji-good', title: '微标',
title: '头像', url: '/basicPage/badge/badge'
url: '/basicPage/avatar/avatar' },
} {
] icon: 'emoji-good',
title: '头像',
url: '/basicPage/avatar/avatar'
}
]
}, {
title: '常用工具',
backgroundColor: 'tn-cool-bg-color-2',
list: [
{
icon: 'code',
title: 'String工具',
url: '/basicPage/utils/string/index'
},
{
icon: 'code',
title: 'Number工具',
url: '/basicPage/utils/number/index'
},
{
icon: 'code',
title: 'Message工具',
url: '/basicPage/utils/message/index'
},
{
icon: 'code',
title: 'Color工具',
url: '/basicPage/utils/color/index'
}
]
}
]
} }
mock/components_page.js
+265 -265
View File
@@ -1,266 +1,266 @@
/** /**
* 页面展示列表数据 * 页面展示列表数据
*/ */
export default { export default {
data: [ data: [
{ {
title: '基础组件', title: '基础组件',
backgroundColor: 'tn-cool-bg-color-1', backgroundColor: 'tn-cool-bg-color-1',
list: [ list: [
{ {
icon: 'signpost', icon: 'signpost',
title: '列表', title: '列表',
url: '/componentsPage/list/list' url: '/componentsPage/list/list'
}, },
{ {
icon: 'circle-arrow', icon: 'circle-arrow',
title: 'Loading加载', title: 'Loading加载',
url: '/componentsPage/loading/loading' url: '/componentsPage/loading/loading'
}, },
{ {
icon: 'share', icon: 'share',
title: 'tabs标签', title: 'tabs标签',
url: '/componentsPage/tabs/tabs' url: '/componentsPage/tabs/tabs'
}, },
{ {
icon: 'receipt', icon: 'receipt',
title: 'sticky吸顶', title: 'sticky吸顶',
url: '/componentsPage/sticky/sticky' url: '/componentsPage/sticky/sticky'
}, },
{ {
icon: 'all', icon: 'all',
title: 'navBar导航栏', title: 'navBar导航栏',
url: '/componentsPage/nav-bar/nav-bar' url: '/componentsPage/nav-bar/nav-bar'
}, },
{ {
icon: 'sound', icon: 'sound',
title: 'noticeBar通知栏', title: 'noticeBar通知栏',
url: '/componentsPage/notice-bar/notice-bar' url: '/componentsPage/notice-bar/notice-bar'
}, },
{ {
icon: 'image', icon: 'image',
title: 'swiper轮播图', title: 'swiper轮播图',
url: '/componentsPage/swiper/swiper' url: '/componentsPage/swiper/swiper'
}, },
{ {
icon: 'server', icon: 'server',
title: 'collapse折叠面板', title: 'collapse折叠面板',
url: '/componentsPage/collapse/collapse' url: '/componentsPage/collapse/collapse'
}, },
{ {
icon: 'more-circle', icon: 'more-circle',
title: 'readMore查看更多', title: 'readMore查看更多',
url: '/componentsPage/read-more/read-more' url: '/componentsPage/read-more/read-more'
}, },
{ {
icon: 'success-square', icon: 'success-square',
title: 'steps步骤条', title: 'steps步骤条',
url: '/componentsPage/steps/steps' url: '/componentsPage/steps/steps'
}, },
{ {
icon: 'clock', icon: 'clock',
title: 'timeLine时间轴', title: 'timeLine时间轴',
url: '/componentsPage/time-line/time-line' url: '/componentsPage/time-line/time-line'
}, },
{ {
icon: 'level', icon: 'level',
title: 'indexList索引列表', title: 'indexList索引列表',
url: '/componentsPage/index-list/index-list' url: '/componentsPage/index-list/index-list'
}, },
{ {
icon: 'group-square', icon: 'group-square',
title: 'scrollList横向滚动', title: 'scrollList横向滚动',
url: '/componentsPage/scroll-list/scroll-list' url: '/componentsPage/scroll-list/scroll-list'
}, },
{ {
icon: 'star', icon: 'star',
title: 'swipeAction滑动菜单', title: 'swipeAction滑动菜单',
url: '/componentsPage/swipe-action/swipe-action' url: '/componentsPage/swipe-action/swipe-action'
}, },
{ {
icon: 'star', icon: 'star',
title: 'fab悬浮按钮', title: 'fab悬浮按钮',
url: '/componentsPage/fab/fab' url: '/componentsPage/fab/fab'
}, },
{ {
icon: 'star', icon: 'star',
title: '懒加载', title: '懒加载',
url: '/componentsPage/lazy-load/lazy-load' url: '/componentsPage/lazy-load/lazy-load'
}, },
{ {
icon: 'star', icon: 'star',
title: '加载更多', title: '加载更多',
url: '/componentsPage/load-more/load-more' url: '/componentsPage/load-more/load-more'
}, },
{ {
icon: 'star', icon: 'star',
title: '骨架屏', title: '骨架屏',
url: '/componentsPage/skeleton/skeleton' url: '/componentsPage/skeleton/skeleton'
}, },
{ {
icon: 'star', icon: 'star',
title: '空页面', title: '空页面',
url: '/componentsPage/empty/empty' url: '/componentsPage/empty/empty'
}, },
{ {
icon: 'star', icon: 'star',
title: '商品导航', title: '商品导航',
url: '/componentsPage/goods-nav/goods-nav' url: '/componentsPage/goods-nav/goods-nav'
} }
] ]
}, },
{ {
title: '弹框组件', title: '弹框组件',
backgroundColor: 'tn-cool-bg-color-1', backgroundColor: 'tn-cool-bg-color-1',
list: [ list: [
{ {
icon: 'prize', icon: 'prize',
title: '弹出层', title: '弹出层',
url: '/componentsPage/popup/popup' url: '/componentsPage/popup/popup'
}, },
{ {
icon: 'bankcard', icon: 'bankcard',
title: '模态框', title: '模态框',
url: '/componentsPage/modal/modal' url: '/componentsPage/modal/modal'
}, },
{ {
icon: 'comment', icon: 'comment',
title: 'Toast', title: 'Toast',
url: '/componentsPage/toast/toast' url: '/componentsPage/toast/toast'
}, },
{ {
icon: 'creative', icon: 'creative',
title: '提示信息框', title: '提示信息框',
url: '/componentsPage/tips/tips' url: '/componentsPage/tips/tips'
}, },
{ {
icon: 'creative', icon: 'creative',
title: '压屏窗', title: '压屏窗',
url: '/componentsPage/landscape/landscape' url: '/componentsPage/landscape/landscape'
} }
] ]
}, },
{ {
title: '表单组件', title: '表单组件',
backgroundColor: 'tn-cool-bg-color-1', backgroundColor: 'tn-cool-bg-color-1',
list: [ list: [
{ {
icon: 'image-text', icon: 'image-text',
title: 'Form表单', title: 'Form表单',
url: '/componentsPage/form/form' url: '/componentsPage/form/form'
}, },
{ {
icon: 'image-text', icon: 'image-text',
title: 'Input输入框', title: 'Input输入框',
url: '/componentsPage/input/input' url: '/componentsPage/input/input'
}, },
{ {
icon: 'image-text', icon: 'image-text',
title: 'Radio单选框', title: 'Radio单选框',
url: '/componentsPage/radio/radio' url: '/componentsPage/radio/radio'
}, },
{ {
icon: 'image-text', icon: 'image-text',
title: 'Checkbox复选框', title: 'Checkbox复选框',
url: '/componentsPage/check-box/check-box' url: '/componentsPage/check-box/check-box'
}, },
{ {
icon: 'ticket', icon: 'ticket',
title: 'ActionSheet操作菜单', title: 'ActionSheet操作菜单',
url: '/componentsPage/action-sheet/action-sheet' url: '/componentsPage/action-sheet/action-sheet'
}, },
{ {
icon: 'deploy', icon: 'deploy',
title: 'Picker选择器', title: 'Picker选择器',
url: '/componentsPage/picker/picker' url: '/componentsPage/picker/picker'
}, },
{ {
icon: 'organizatio', icon: 'organizatio',
title: 'Select列选择器', title: 'Select列选择器',
url: '/componentsPage/select/select' url: '/componentsPage/select/select'
}, },
{ {
icon: 'data', icon: 'data',
title: '验证码倒计时', title: '验证码倒计时',
url: '/componentsPage/verification-code/verification-code' url: '/componentsPage/verification-code/verification-code'
}, },
{ {
icon: 'power', icon: 'power',
title: 'Switch开关', title: 'Switch开关',
url: '/componentsPage/switch/switch' url: '/componentsPage/switch/switch'
}, },
{ {
icon: 'upload', icon: 'upload',
title: '图片上传', title: '图片上传',
url: '/componentsPage/image-upload/image-upload' url: '/componentsPage/image-upload/image-upload'
}, },
{ {
icon: 'calendar', icon: 'calendar',
title: '日历', title: '日历',
url: '/componentsPage/calendar/calendar' url: '/componentsPage/calendar/calendar'
}, },
{ {
icon: 'edit-write', icon: 'edit-write',
title: '签名板', title: '签名板',
url: '/componentsPage/sign-board/sign-board' url: '/componentsPage/sign-board/sign-board'
}, },
{ {
icon: 'edit-write', icon: 'edit-write',
title: '验证码输入', title: '验证码输入',
url: '/componentsPage/verification-code-input/verification-code-input' url: '/componentsPage/verification-code-input/verification-code-input'
}, },
{ {
icon: 'edit-write', icon: 'edit-write',
title: '分段器', title: '分段器',
url: '/componentsPage/subsection/subsection' url: '/componentsPage/subsection/subsection'
} }
] ]
}, },
{ {
title: '数据组件', title: '数据组件',
backgroundColor: 'tn-cool-bg-color-1', backgroundColor: 'tn-cool-bg-color-1',
list: [ list: [
{ {
icon: 'watercup', icon: 'watercup',
title: 'Progress进度条', title: 'Progress进度条',
url: '/componentsPage/progress/progress' url: '/componentsPage/progress/progress'
}, },
{ {
icon: 'star', icon: 'star',
title: 'rate评分', title: 'rate评分',
url: '/componentsPage/rate/rate' url: '/componentsPage/rate/rate'
}, },
{ {
icon: 'light', icon: 'light',
title: 'slider滑动条', title: 'slider滑动条',
url: '/componentsPage/slider/slider' url: '/componentsPage/slider/slider'
}, },
{ {
icon: 'statistics', icon: 'statistics',
title: 'numberBox步进输入', title: 'numberBox步进输入',
url: '/componentsPage/number-box/number-box' url: '/componentsPage/number-box/number-box'
}, },
{ {
icon: 'keyboard-circle', icon: 'keyboard-circle',
title: 'keyboard键盘', title: 'keyboard键盘',
url: '/componentsPage/keyboard/keyboard' url: '/componentsPage/keyboard/keyboard'
}, },
{ {
icon: 'time', icon: 'time',
title: 'countDown倒计时', title: 'countDown倒计时',
url: '/componentsPage/count-down/count-down' url: '/componentsPage/count-down/count-down'
}, },
{ {
icon: 'group-circle', icon: 'group-circle',
title: 'countTo数字跳转', title: 'countTo数字跳转',
url: '/componentsPage/count-to/count-to' url: '/componentsPage/count-to/count-to'
}, },
{ {
icon: 'sequence-vertical', icon: 'sequence-vertical',
title: 'countScroll数字滚动', title: 'countScroll数字滚动',
url: '/componentsPage/count-scroll/count-scroll' url: '/componentsPage/count-scroll/count-scroll'
} }
] ]
} }
] ]
} }
mock/template_page.js
+74 -27
View File
@@ -10,25 +10,25 @@ export default {
{ {
icon: 'send', icon: 'send',
title: '火箭登录', title: '火箭登录',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/login/demo1/demo1' url: '/templatePage/login/demo1/demo1'
}, },
{ {
icon: 'send', icon: 'send',
title: '粒子登录', title: '粒子登录',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/login/demo2/demo2' url: '/templatePage/login/demo2/demo2'
}, },
{ {
icon: 'send', icon: 'send',
title: '背景登录', title: '背景登录',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/login/demo3/demo3' url: '/templatePage/login/demo3/demo3'
}, },
{ {
icon: 'send', icon: 'send',
title: '简约登录', title: '简约登录',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/login/demo4/demo4' url: '/templatePage/login/demo4/demo4'
} }
] ]
@@ -40,20 +40,26 @@ export default {
{ {
icon: 'send', icon: 'send',
title: '夏天个人', title: '夏天个人',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/my/demo1/demo1' url: '/templatePage/my/demo1/demo1'
}, },
{ {
icon: 'send', icon: 'send',
title: '图鸟个人', title: '图鸟个人',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/my/demo2/demo2' url: '/templatePage/my/demo2/demo2'
}, },
{ {
icon: 'send', icon: 'send',
title: '外卖个人', title: '外卖个人',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/my/demo3/demo3' url: '/templatePage/my/demo3/demo3'
},
{
icon: 'send',
title: '高端个人',
author: '图鸟北北',
url: '/templatePage/my/demo4/demo4'
} }
] ]
}, },
@@ -64,37 +70,37 @@ export default {
{ {
icon: 'send', icon: 'send',
title: '音乐首页', title: '音乐首页',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/home/music/music' url: '/templatePage/home/music/music'
}, },
{ {
icon: 'send', icon: 'send',
title: '课程首页', title: '课程首页',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/home/course/course' url: '/templatePage/home/course/course'
}, },
{ {
icon: 'send', icon: 'send',
title: '设计首页', title: '设计首页',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/home/design/design' url: '/templatePage/home/design/design'
}, },
{ {
icon: 'send', icon: 'send',
title: '招聘首页', title: '招聘首页',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/home/job/job' url: '/templatePage/home/job/job'
}, },
{ {
icon: 'send', icon: 'send',
title: '投屏首页', title: '投屏首页',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/home/screen/screen' url: '/templatePage/home/screen/screen'
}, },
{ {
icon: 'send', icon: 'send',
title: '壁纸首页', title: '壁纸首页',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/home/wallpaper/wallpaper' url: '/templatePage/home/wallpaper/wallpaper'
}, },
] ]
@@ -106,26 +112,49 @@ export default {
{ {
icon: 'send', icon: 'send',
title: '健康码', title: '健康码',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/health/qrcode/qrcode' url: '/templatePage/health/qrcode/qrcode'
}, },
{
icon: 'send',
title: '关于我们',
author: 'Jaylen',
url: '/templatePage/life/about/about'
},
{
icon: 'send',
title: '全新出发',
author: '你的小可爱',
url: '/templatePage/life/outset/outset'
},
{
icon: 'send',
title: '资讯左图',
author: '图鸟北北',
url: '/templatePage/article/demo1/demo1'
},
{
icon: 'send',
title: '资讯右图',
author: '图鸟北北',
url: '/templatePage/article/demo2/demo2'
},
{ {
icon: 'send', icon: 'send',
title: '全屏轮播', title: '全屏轮播',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/life/fullpage/fullpage' url: '/templatePage/life/fullpage/fullpage'
}, },
{ {
icon: 'like-break', icon: 'rocket',
title: '浏览器', title: '浏览器',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/life/browser/browser' url: '/templatePage/life/browser/browser'
}, },
{ {
icon: 'like-break', icon: 'rocket',
title: '时钟', title: '时钟',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/time/clock/clock' url: '/templatePage/time/clock/clock'
} }
] ]
@@ -137,9 +166,15 @@ export default {
{ {
icon: 'send', icon: 'send',
title: '加载动画', title: '加载动画',
author: '可我会像', author: '图鸟北北',
url: '/templatePage/animate/loading/loading' url: '/templatePage/animate/loading/loading'
}, },
{
icon: 'send',
title: '流星悬浮',
author: '图鸟北北',
url: '/templatePage/animate/suspended/suspended'
},
{ {
icon: 'send', icon: 'send',
title: '随机粒子', title: '随机粒子',
@@ -157,6 +192,18 @@ export default {
title: '镂空效果', title: '镂空效果',
author: '你的小可爱', author: '你的小可爱',
url: '/templatePage/animate/hollow/hollow' url: '/templatePage/animate/hollow/hollow'
},
{
icon: 'send',
title: '泡泡飘出',
author: 'Jaylen',
url: '/templatePage/animate/bubble/bubble'
},
{
icon: 'send',
title: 'css波浪',
author: '图鸟北北',
url: '/templatePage/animate/wave/wave'
} }
] ]
}, },
@@ -167,29 +214,29 @@ export default {
{ {
icon: 'send', icon: 'send',
title: '3D全景(第三方，约120￥一年)', title: '3D全景(第三方，约120￥一年)',
author: '可我会像 & 芊云全景', author: '图鸟北北 & 芊云全景',
url: '/templatePage/life/pano/pano' url: '/templatePage/life/pano/pano'
}, },
{ {
icon: 'like-break', icon: 'rocket',
title: 'Ucharts图表(第三方，免费开源)', title: 'Ucharts图表(第三方，免费开源)',
author: '可我会像 & Ucharts秋云', author: '图鸟北北 & Ucharts秋云',
url: '/templatePage/life/candle/candle' url: '/templatePage/life/candle/candle'
}, },
{ {
icon: 'like-break', icon: 'rocket',
title: '隔壁的小生(第三方，赞赏6￥可商用)', title: '隔壁的小生(第三方，赞赏6￥可商用)',
author: '隔壁的小生', author: '隔壁的小生',
url: '/templatePage/life/candle/candle' url: '/templatePage/life/candle/candle'
}, },
{ {
icon: 'like-break', icon: 'rocket',
title: '阿凡提·污克西西(第三方，免费开源)', title: '阿凡提·污克西西(第三方，免费开源)',
author: '阿凡提·污克西西', author: '阿凡提·污克西西',
url: '/templatePage/life/candle/candle' url: '/templatePage/life/candle/candle'
}, },
{ {
icon: 'like-break', icon: 'rocket',
title: '期待你的加入', title: '期待你的加入',
author: '期待你的加入', author: '期待你的加入',
url: '/templatePage/life/candle/candle' url: '/templatePage/life/candle/candle'
pages.json
+633 -531
View File
File diff suppressed because it is too large Load Diff
pages/basic/basic.vue
+170 -157
View File
@@ -1,157 +1,170 @@
<template> <template>
<view class="basic tn-safe-area-inset-bottom"> <view class="basic tn-safe-area-inset-bottom">
<view class="top-backgroup"> <view class="top-backgroup">
<image src='https://tnuiimage.tnkjapp.com/index_bg/basic_new.jpg' mode='widthFix' class='backgroud-image'></image> <image src='https://tnuiimage.tnkjapp.com/index_bg/basic_new.jpg' mode='widthFix' class='backgroud-image'></image>
</view> </view>
<view class="nav_title--wrap tn-margin-bottom-sm"> <block v-for="(item, index) in navList" :key="index">
<view class="nav_title tn-cool-bg-color-15">基 / 础 / 元 / 素</view> <view class="nav_title--wrap tn-margin-bottom-sm">
</view> <view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view>
</view>
<view class='nav-list'>
<view class='nav-list'>
<block v-for="(item, index) in navList" :key="index">
<navigator <block v-for="(content_item, content_index) in item.list" :key="content_index">
open-type="navigate" <navigator
hover-class='none' open-type="navigate"
:url="item.url" hover-class='none'
class="nav-list-item tn-shadow-blur tn-cool-bg-image" :url="content_item.url"
:class="[ class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-between"
getRandomCoolBg(index) :class="[
]" getRandomCoolBg(content_index)
> ]"
<view class="nav-link"> >
<view class='title'>{{ item.title }}</view> <view class="icon">
</view> <view :class="['tn-icon-' + content_item.icon]"></view>
<view class="icon"> </view>
<view :class="['tn-icon-' + item.icon]"></view> <view class="nav-link">
</view> <view class='title'>{{ content_item.title }}</view>
</navigator> </view>
</block> </navigator>
</block>
</view>
</view>
<view class="tn-padding-bottom-xs"></view> </block>
</view> <view class="tn-padding-bottom-xs"></view>
</template>
</view>
<script> </template>
import basicListData from '@/mock/basic_page.js'
<script>
export default { import basicListData from '@/mock/basic_page.js'
name: 'Basic',
data() { export default {
return { name: 'Basic',
// nav菜单列表 filters: {
navList: basicListData.data titleFilter(value) {
} if (value.length === 0) {
}, return ''
methods: { }
getRandomCoolBg() { let newString = ''
return this.$t.colorUtils.getRandomCoolBgClass() for (let i = 0; i < value.length; i++) {
} if (i !== 0) {
} newString += ' / '
} }
</script> newString += value[i]
}
<style lang="scss" scoped> return newString
}
/* 顶部背景图 start */ },
.top-backgroup { data() {
height: 450rpx; return {
z-index: -1; // nav菜单列表
navList: basicListData.data
.backgroud-image { }
width: 100%; },
height: 667rpx; methods: {
} getRandomCoolBg() {
} return this.$t.color.getRandomCoolBgClass()
/* 顶部背景图 end */ }
}
/* 标题start */ }
.nav_title { </script>
-webkit-background-clip: text;
color: transparent; <style lang="scss" scoped>
&--wrap { /* 顶部背景图 start */
position: relative; .top-backgroup {
display: flex; height: 450rpx;
height: 120rpx; z-index: -1;
font-size: 46rpx;
align-items: center; .backgroud-image {
justify-content: center; width: 100%;
font-weight: bold; height: 667rpx;
background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png); }
background-size: cover; }
} /* 顶部背景图 end */
}
/* 标题end */ /* 标题start */
.nav_title {
/* 组件导航列表 start*/ -webkit-background-clip: text;
.nav-list { color: transparent;
display: flex;
flex-wrap: wrap; &--wrap {
padding: 0rpx 12rpx 0rpx; position: relative;
justify-content: space-between; display: flex;
height: 120rpx;
/* 列表元素 start */ font-size: 46rpx;
.nav-list-item { align-items: center;
padding: 95rpx 30rpx 5rpx 30rpx; justify-content: center;
border-radius: 12rpx; font-weight: bold;
width: 45%; background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
margin: 0 18rpx 40rpx; background-size: cover;
background-size: cover; }
background-position: center; }
position: relative; /* 标题end */
z-index: 99;
/* 组件导航列表 start*/
.nav-list {
display: flex;
/* 元素标题 start */ flex-wrap: wrap;
.nav-link { padding: 0rpx 12rpx 0rpx;
font-size: 32rpx; justify-content: space-between;
text-transform: capitalize;
padding: 0 0 10rpx 0; /* 列表元素 start */
position: relative; .nav-list-item {
padding: 20rpx 30rpx;
.title { border-radius: 12rpx;
color: #FFFFFF; width: 45%;
margin-top: 30rpx; margin: 0 18rpx 40rpx;
text-align: center; background-size: cover;
} background-position: center;
} position: relative;
/* 元素标题 end */ z-index: 99;
/* 元素图标 start */
.icon {
font-variant: small-caps; /* 元素标题 start */
position: absolute; .nav-link {
top: 20rpx; font-size: 32rpx;
right: 50rpx; text-transform: capitalize;
left: 37%; padding: 0 0 10rpx 0;
width: 90rpx; position: relative;
height: 90rpx;
line-height: 90rpx; .title {
margin: 0; color: #FFFFFF;
padding: 0; margin-top: 20rpx;
display: inline-flex; text-align: center;
text-align: center; }
justify-content: center; }
vertical-align: middle; /* 元素标题 end */
font-size: 50rpx;
color: #FFFFFF; /* 元素图标 start */
white-space: nowrap; .icon {
opacity: 0.9; font-variant: small-caps;
background-color: rgba(0, 0, 0, 0.05); width: 90rpx;
background-size: cover; height: 90rpx;
background-position: 50%; line-height: 90rpx;
border-radius: 5000rpx; margin: 0;
} padding: 0;
/* 元素图标 end */ display: inline-flex;
} text-align: center;
/* 列表元素 end */ justify-content: center;
} vertical-align: middle;
/* 组件导航列表 end*/ font-size: 50rpx;
</style> color: #FFFFFF;
white-space: nowrap;
opacity: 0.9;
background-color: rgba(0, 0, 0, 0.05);
background-size: cover;
background-position: 50%;
border-radius: 5000rpx;
}
/* 元素图标 end */
}
/* 列表元素 end */
}
/* 组件导航列表 end*/
</style>
pages/components/components.vue
+167 -167
View File
@@ -1,167 +1,167 @@
<template> <template>
<view class="components tn-safe-area-inset-bottom"> <view class="components tn-safe-area-inset-bottom">
<view class="top-backgroup"> <view class="top-backgroup">
<image src='https://tnuiimage.tnkjapp.com/index_bg/components_new.jpg' mode='widthFix' class='backgroud-image'></image> <image src='https://tnuiimage.tnkjapp.com/index_bg/components_new.jpg' mode='widthFix' class='backgroud-image'></image>
</view> </view>
<block v-for="(item, index) in navList" :key="index"> <block v-for="(item, index) in navList" :key="index">
<view class="nav_title--wrap tn-margin-bottom-sm"> <view class="nav_title--wrap tn-margin-bottom-sm">
<view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view> <view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view>
</view> </view>
<view class='nav-list'> <view class='nav-list'>
<block v-for="(content_item, content_index) in item.list" :key="content_index"> <block v-for="(content_item, content_index) in item.list" :key="content_index">
<navigator <navigator
open-type="navigate" open-type="navigate"
hover-class='none' hover-class='none'
:url="content_item.url" :url="content_item.url"
class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-col-center tn-flex-row-between" class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-col-center tn-flex-row-between"
:class="[ :class="[
getRandomCoolBg(content_index) getRandomCoolBg(content_index)
]" ]"
> >
<view class="nav-link tn-flex-1"> <view class="nav-link tn-flex-1">
<view class='title'>{{ content_item.title }}</view> <view class='title'>{{ content_item.title }}</view>
</view> </view>
<view class="icon"> <view class="icon">
<view :class="['tn-icon-' + content_item.icon]"></view> <view :class="['tn-icon-' + content_item.icon]"></view>
</view> </view>
</navigator> </navigator>
</block> </block>
</view> </view>
</block> </block>
<view class="tn-padding-bottom-xs"></view> <view class="tn-padding-bottom-xs"></view>
</view> </view>
</template> </template>
<script> <script>
import componentsListData from '@/mock/components_page.js' import componentsListData from '@/mock/components_page.js'
export default { export default {
name: 'Components', name: 'Components',
filters: { filters: {
titleFilter(value) { titleFilter(value) {
if (value.length === 0) { if (value.length === 0) {
return '' return ''
} }
let newString = '' let newString = ''
for (let i = 0; i < value.length; i++) { for (let i = 0; i < value.length; i++) {
if (i !== 0) { if (i !== 0) {
newString += ' / ' newString += ' / '
} }
newString += value[i] newString += value[i]
} }
return newString return newString
} }
}, },
data() { data() {
return { return {
// nav菜单列表 // nav菜单列表
navList: componentsListData.data navList: componentsListData.data
} }
}, },
methods: { methods: {
getRandomCoolBg() { getRandomCoolBg() {
return this.$t.colorUtils.getRandomCoolBgClass() return this.$t.color.getRandomCoolBgClass()
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* 顶部背景图 start */ /* 顶部背景图 start */
.top-backgroup { .top-backgroup {
height: 450rpx; height: 450rpx;
z-index: -1; z-index: -1;
.backgroud-image { .backgroud-image {
width: 100%; width: 100%;
height: 667rpx; height: 667rpx;
} }
} }
/* 顶部背景图 end */ /* 顶部背景图 end */
/* 标题start */ /* 标题start */
.nav_title { .nav_title {
-webkit-background-clip: text; -webkit-background-clip: text;
color: transparent; color: transparent;
&--wrap { &--wrap {
position: relative; position: relative;
display: flex; display: flex;
height: 120rpx; height: 120rpx;
font-size: 46rpx; font-size: 46rpx;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: bold; font-weight: bold;
background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png); background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
background-size: cover; background-size: cover;
} }
} }
/* 标题end */ /* 标题end */
/* 组件导航列表 start*/ /* 组件导航列表 start*/
.nav-list { .nav-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0rpx 12rpx 0rpx; padding: 0rpx 12rpx 0rpx;
justify-content: space-between; justify-content: space-between;
/* 列表元素 start */ /* 列表元素 start */
.nav-list-item { .nav-list-item {
padding: 30rpx 30rpx 20rpx 30rpx; padding: 30rpx 30rpx 20rpx 30rpx;
border-radius: 12rpx; border-radius: 12rpx;
width: 45%; width: 45%;
margin: 0 18rpx 40rpx; margin: 0 18rpx 40rpx;
background-size: cover; background-size: cover;
background-position: 50%; background-position: 50%;
position: relative; position: relative;
z-index: 99; z-index: 99;
/* 元素标题 start */ /* 元素标题 start */
.nav-link { .nav-link {
font-size: 32rpx; font-size: 32rpx;
line-height: 1.2; line-height: 1.2;
text-transform: capitalize; text-transform: capitalize;
padding: 0rpx 10rpx 0rpx 0; padding: 0rpx 10rpx 0rpx 0;
position: relative; position: relative;
.title { .title {
color: #FFFFFF; color: #FFFFFF;
text-align: left; text-align: left;
} }
} }
/* 元素标题 end */ /* 元素标题 end */
/* 元素图标 start */ /* 元素图标 start */
.icon { .icon {
font-variant: small-caps; font-variant: small-caps;
width: 70rpx; width: 70rpx;
height: 70rpx; height: 70rpx;
line-height: 70rpx; line-height: 70rpx;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: inline-flex; display: inline-flex;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
vertical-align: middle; vertical-align: middle;
font-size: 45rpx; font-size: 45rpx;
color: #FFFFFF; color: #FFFFFF;
white-space: nowrap; white-space: nowrap;
opacity: 0.9; opacity: 0.9;
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);
background-size: cover; background-size: cover;
background-position: 50%; background-position: 50%;
border-radius: 5000rpx; border-radius: 5000rpx;
} }
/* 元素图标 end */ /* 元素图标 end */
} }
/* 列表元素 end */ /* 列表元素 end */
} }
/* 组件导航列表 end*/ /* 组件导航列表 end*/
</style> </style>
pages/index/index.vue
+116 -116
View File
@@ -1,116 +1,116 @@
<template> <template>
<view class="index"> <view class="index">
<Basic v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}" ref="basic"></Basic> <Basic v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}" ref="basic"></Basic>
<components v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}" ref="components"></components> <components v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}" ref="components"></components>
<templatePage v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}" ref="template"></templatePage> <templatePage v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}" ref="template"></templatePage>
<tuniao v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}" ref="about"></tuniao> <tuniao v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}" ref="about"></tuniao>
<tn-tabbar <tn-tabbar
v-model="currentIndex" v-model="currentIndex"
:list="tabbarList" :list="tabbarList"
activeColor="#838383" activeColor="#838383"
inactiveColor="#AAAAAA" inactiveColor="#AAAAAA"
activeIconColor="tn-cool-bg-color-7" activeIconColor="tn-cool-bg-color-7"
:animation="true" :animation="true"
:safeAreaInsetBottom="true" :safeAreaInsetBottom="true"
@change="switchTabbar" @change="switchTabbar"
></tn-tabbar> ></tn-tabbar>
</view> </view>
</template> </template>
<script> <script>
import Basic from '../basic/basic.vue' import Basic from '../basic/basic.vue'
import Components from '../components/components.vue' import Components from '../components/components.vue'
import TemplatePage from '../template/template.vue' import TemplatePage from '../template/template.vue'
import Tuniao from '../tuniao/tuniao.vue' import Tuniao from '../tuniao/tuniao.vue'
export default { export default {
components: { components: {
Basic, Basic,
Components, Components,
TemplatePage, TemplatePage,
Tuniao Tuniao
}, },
data() { data() {
return { return {
// 底部tabbar菜单数据 // 底部tabbar菜单数据
tabbarList: [ tabbarList: [
{ {
title: '元素', title: '元素',
activeIcon: 'count-fill', activeIcon: 'count-fill',
inactiveIcon: 'menu' inactiveIcon: 'menu'
}, },
{ {
title: '组件', title: '组件',
activeIcon: 'honor-fill', activeIcon: 'honor-fill',
inactiveIcon: 'honor' inactiveIcon: 'honor'
}, },
{ {
title: '页面', title: '页面',
activeIcon: 'discover', activeIcon: 'discover',
inactiveIcon: 'discover' inactiveIcon: 'discover'
}, },
{ {
title: '图鸟', title: '图鸟',
activeIcon: 'computer-fill', activeIcon: 'computer-fill',
inactiveIcon: 'computer', inactiveIcon: 'computer',
dot: true dot: true
} }
], ],
// tabbar当前被选中的序号 // tabbar当前被选中的序号
currentIndex: 0, currentIndex: 0,
// 自定义底栏对应页面的加载情况 // 自定义底栏对应页面的加载情况
tabberPageLoadFlag: [] tabberPageLoadFlag: []
} }
}, },
onLoad(options) { onLoad(options) {
const index = Number(options.index || 0) const index = Number(options.index || 0)
// 根据底部tabbar菜单列表设置对应页面的加载情况 // 根据底部tabbar菜单列表设置对应页面的加载情况
this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => { this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
return index === tabbar_index return index === tabbar_index
}) })
this.switchTabbar(index) this.switchTabbar(index)
}, },
onPageScroll(e) { onPageScroll(e) {
}, },
onReachBottom() { onReachBottom() {
}, },
methods: { methods: {
// 切换导航 // 切换导航
switchTabbar(index) { switchTabbar(index) {
this._switchTabbarPage(index) this._switchTabbarPage(index)
}, },
// 导航页面滚动到底部 // 导航页面滚动到底部
tabbarPageScrollLower(e) { tabbarPageScrollLower(e) {
}, },
// 切换导航页面 // 切换导航页面
_switchTabbarPage(index) { _switchTabbarPage(index) {
const selectPageFlag = this.tabberPageLoadFlag[index] const selectPageFlag = this.tabberPageLoadFlag[index]
if (selectPageFlag === undefined) { if (selectPageFlag === undefined) {
return return
} }
if (selectPageFlag === false) { if (selectPageFlag === false) {
this.tabberPageLoadFlag[index] = true this.tabberPageLoadFlag[index] = true
} }
this.currentIndex = index this.currentIndex = index
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.index { .index {
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
} }
.custom-tabbar-page { .custom-tabbar-page {
height: calc(100vh - (100rpx + env(safe-area-inset-bottom) / 2)); height: calc(100vh - (100rpx + env(safe-area-inset-bottom) / 2));
} }
</style> </style>
pages/template/template.vue
+194 -194
View File
@@ -1,194 +1,194 @@
<template> <template>
<view class="template tn-safe-area-inset-bottom"> <view class="template tn-safe-area-inset-bottom">
<view class="top-backgroup"> <view class="top-backgroup">
<image src='https://tnuiimage.tnkjapp.com/index_bg/template_new.jpg' mode='widthFix' class='backgroud-image'></image> <image src='https://tnuiimage.tnkjapp.com/index_bg/template_new.jpg' mode='widthFix' class='backgroud-image'></image>
</view> </view>
<block v-for="(item, index) in navList" :key="index"> <block v-for="(item, index) in navList" :key="index">
<view class="nav_title--wrap tn-margin-bottom-sm"> <view class="nav_title--wrap tn-margin-bottom-sm">
<view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view> <view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view>
</view> </view>
<view class='nav-list'> <view class='nav-list'>
<block v-for="(content_item, content_index) in item.list" :key="content_index"> <block v-for="(content_item, content_index) in item.list" :key="content_index">
<navigator <navigator
open-type="navigate" open-type="navigate"
hover-class='none' hover-class='none'
:url="content_item.url" :url="content_item.url"
class="nav-list-item tn-shadow-blur tn-cool-bg-image" class="nav-list-item tn-shadow-blur tn-cool-bg-image"
:class="[ :class="[
getRandomCoolBg(content_index) getRandomCoolBg(content_index)
]" ]"
> >
<view class="tn-flex tn-flex-col-center tn-flex-row-between"> <view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view class="nav-link"> <view class="nav-link">
<view class='title'>{{ content_item.title }}</view> <view class='title'>{{ content_item.title }}</view>
</view> </view>
<view class="icon"> <view class="icon">
<view :class="['tn-icon-' + content_item.icon]"></view> <view :class="['tn-icon-' + content_item.icon]"></view>
</view> </view>
</view> </view>
<view class="author"> <view class="author">
<view class='name tn-text-sm tn-color-gray' style="margin-left: -10rpx;"> <view class='name tn-text-sm tn-color-gray' style="margin-left: -10rpx;">
<text class="tn-icon-code tn-padding-right-xs"></text> <text class="tn-icon-code tn-padding-right-xs"></text>
<text class=""> {{ content_item.author }} </text> <text class=""> {{ content_item.author }} </text>
</view> </view>
</view> </view>
</navigator> </navigator>
</block> </block>
</view> </view>
</block> </block>
<view class="tn-padding-bottom-xs"></view> <view class="tn-padding-bottom-xs"></view>
</view> </view>
</template> </template>
<script> <script>
import templateListData from '@/mock/template_page.js' import templateListData from '@/mock/template_page.js'
export default { export default {
name: 'TemplatePage', name: 'TemplatePage',
filters: { filters: {
titleFilter(value) { titleFilter(value) {
if (value.length === 0) { if (value.length === 0) {
return '' return ''
} }
let newString = '' let newString = ''
for (let i = 0; i < value.length; i++) { for (let i = 0; i < value.length; i++) {
if (i !== 0) { if (i !== 0) {
newString += ' / ' newString += ' / '
} }
newString += value[i] newString += value[i]
} }
return newString return newString
} }
}, },
data() { data() {
return { return {
// nav菜单列表 // nav菜单列表
navList: templateListData.data navList: templateListData.data
} }
}, },
methods: { methods: {
getRandomCoolBg() { getRandomCoolBg() {
return this.$t.colorUtils.getRandomCoolBgClass() return this.$t.color.getRandomCoolBgClass()
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* 顶部背景图 start */ /* 顶部背景图 start */
.top-backgroup { .top-backgroup {
height: 450rpx; height: 450rpx;
z-index: -1; z-index: -1;
.backgroud-image { .backgroud-image {
width: 100%; width: 100%;
height: 667rpx; height: 667rpx;
} }
} }
/* 顶部背景图 end */ /* 顶部背景图 end */
/* 标题start */ /* 标题start */
.nav_title { .nav_title {
-webkit-background-clip: text; -webkit-background-clip: text;
color: transparent; color: transparent;
&--wrap { &--wrap {
position: relative; position: relative;
display: flex; display: flex;
height: 120rpx; height: 120rpx;
font-size: 46rpx; font-size: 46rpx;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: bold; font-weight: bold;
background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png); background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
background-size: cover; background-size: cover;
} }
} }
/* 标题end */ /* 标题end */
/* 组件导航列表 start*/ /* 组件导航列表 start*/
.nav-list { .nav-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0rpx 12rpx 0rpx; padding: 0rpx 12rpx 0rpx;
justify-content: space-between; justify-content: space-between;
/* 列表元素 start */ /* 列表元素 start */
.nav-list-item { .nav-list-item {
padding: 50rpx 30rpx 36rpx 30rpx; padding: 50rpx 30rpx 36rpx 30rpx;
border-radius: 12rpx; border-radius: 12rpx;
width: 100%; width: 100%;
margin: 0 18rpx 90rpx; margin: 0 18rpx 90rpx;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
position: relative; position: relative;
z-index: 99; z-index: 99;
// display: flex; // display: flex;
// align-items: center; // align-items: center;
// justify-content: space-between; // justify-content: space-between;
/* 元素标题 start */ /* 元素标题 start */
.nav-link { .nav-link {
flex: 1; flex: 1;
font-size: 32rpx; font-size: 32rpx;
text-transform: capitalize; text-transform: capitalize;
padding: 10rpx 0 20rpx 0; padding: 10rpx 0 20rpx 0;
position: relative; position: relative;
.title { .title {
color: #FFFFFF; color: #FFFFFF;
text-align: left; text-align: left;
} }
} }
/* 元素标题 end */ /* 元素标题 end */
/* 元素图标 start */ /* 元素图标 start */
.icon { .icon {
font-variant: small-caps; font-variant: small-caps;
width: 70rpx; width: 70rpx;
height: 70rpx; height: 70rpx;
line-height: 70rpx; line-height: 70rpx;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: inline-flex; display: inline-flex;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
vertical-align: middle; vertical-align: middle;
font-size: 45rpx; font-size: 45rpx;
color: #FFFFFF; color: #FFFFFF;
white-space: nowrap; white-space: nowrap;
opacity: 0.9; opacity: 0.9;
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);
background-size: cover; background-size: cover;
background-position: 50%; background-position: 50%;
border-radius: 5000rpx; border-radius: 5000rpx;
} }
/* 元素图标 end */ /* 元素图标 end */
/* 作者信息 start*/ /* 作者信息 start*/
.author { .author {
// background-color: red; // background-color: red;
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12); box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
border-radius: 0 0 15rpx 15rpx; border-radius: 0 0 15rpx 15rpx;
position: absolute; position: absolute;
width: 85%; width: 85%;
line-height: 50rpx; line-height: 50rpx;
left: 50%; left: 50%;
bottom: -50rpx; bottom: -50rpx;
transform: translateX(-50%); transform: translateX(-50%);
z-index: -1; z-index: -1;
text-align: center; text-align: center;
} }
/* 作者信息 end*/ /* 作者信息 end*/
} }
/* 列表元素 end */ /* 列表元素 end */
} }
/* 组件导航列表 end*/ /* 组件导航列表 end*/
</style> </style>
pages/tuniao/tuniao.vue
+334 -334
View File
@@ -1,334 +1,334 @@
<template> <template>
<view class="about tn-safe-area-inset-bottom"> <view class="about tn-safe-area-inset-bottom">
<view class="top-backgroup"> <view class="top-backgroup">
<image src='https://tnuiimage.tnkjapp.com/index_bg/about_new.jpg' mode='widthFix' class='backgroud-image'></image> <image src='https://tnuiimage.tnkjapp.com/index_bg/about_new.jpg' mode='widthFix' class='backgroud-image'></image>
</view> </view>
<view class="about__wrap"> <view class="about__wrap">
<!-- 头像用户信息 --> <!-- 头像用户信息 -->
<view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center"> <view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<view class="user-info__avatar tn-bg-grey--light tn-flex tn-flex-col-center tn-flex-row-center"> <view class="user-info__avatar tn-bg-grey--light tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view> <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view>
</view> </view>
<view class="user-info__nick-name">图鸟小伙伴</view> <view class="user-info__nick-name">图鸟小伙伴</view>
</view> </view>
<!-- 数据信息 --> <!-- 数据信息 -->
<view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between"> <view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between">
<block v-for="(item, index) in tuniaoData" :key="index"> <block v-for="(item, index) in tuniaoData" :key="index">
<view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between about-shadow"> <view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between about-shadow">
<view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left"> <view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
<view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]"> <view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
<view :class="[`tn-icon-${item.icon}`]"></view> <view :class="[`tn-icon-${item.icon}`]"></view>
</view> </view>
<view class="tn-info__item__left__content"> <view class="tn-info__item__left__content">
<view class="tn-info__item__left__content--title">{{ item.title }}</view> <view class="tn-info__item__left__content--title">{{ item.title }}</view>
<view class="tn-info__item__left__content--data tn-padding-top-xs">{{ item.value }}</view> <view class="tn-info__item__left__content--data tn-padding-top-xs">{{ item.value }}</view>
</view> </view>
</view> </view>
<view class="tn-info__item__right"> <view class="tn-info__item__right">
<view class="tn-info__item__right--icon"> <view class="tn-info__item__right--icon">
<view class="tn-icon-code"></view> <view class="tn-icon-code"></view>
</view> </view>
</view> </view>
</view> </view>
</block> </block>
</view> </view>
<!-- 更多信息--> <!-- 更多信息-->
<view class="about-shadow tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm"> <view class="about-shadow tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="navTuniaoWebsite"> <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="navTuniaoWebsite">
<view class="tn-flex tn-flex-col-center"> <view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" > <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" >
<view class="tn-icon-logo-tuniao"></view> <view class="tn-icon-logo-tuniao"></view>
</view> </view>
<view class="tn-margin-left-sm tn-flex-1">图鸟官网</view> <view class="tn-margin-left-sm tn-flex-1">图鸟官网</view>
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view> <view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
</view> </view>
</tn-list-cell> </tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="copyGitee"> <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="copyGitee">
<view class="tn-flex tn-flex-col-center"> <view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white"> <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white">
<view class="tn-icon-gitee"></view> <view class="tn-icon-gitee"></view>
</view> </view>
<view class="tn-margin-left-sm tn-flex-1">Gitee地址</view> <view class="tn-margin-left-sm tn-flex-1">Gitee地址</view>
<view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view> <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
</view> </view>
</tn-list-cell> </tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="navPlus"> <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="navPlus">
<view class="tn-flex tn-flex-col-center"> <view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white"> <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
<view class="tn-icon-safe-fill"></view> <view class="tn-icon-safe-fill"></view>
</view> </view>
<view class="tn-margin-left-sm tn-flex-1">会员协议</view> <view class="tn-margin-left-sm tn-flex-1">会员协议</view>
<view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view> <view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
</view> </view>
</tn-list-cell> </tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30"> <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center"> <view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white"> <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white">
<view class="tn-icon-set-fill"></view> <view class="tn-icon-set-fill"></view>
</view> </view>
<view class="tn-margin-left-sm tn-flex-1">更新日志</view> <view class="tn-margin-left-sm tn-flex-1">更新日志</view>
<view class="tn-margin-left-sm tn-color-gray">懒</view> <view class="tn-margin-left-sm tn-color-gray">懒</view>
</view> </view>
</tn-list-cell> </tn-list-cell>
</view> </view>
<!-- 更多信息--> <!-- 更多信息-->
<view class="about-shadow tn-margin-top-lg tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm"> <view class="about-shadow tn-margin-top-lg tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30"> <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="contact"> <button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="contact">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-9 tn-color-white"> <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-9 tn-color-white">
<view class="tn-icon-wechat-fill"></view> <view class="tn-icon-wechat-fill"></view>
</view> </view>
<view class="tn-margin-left-sm">合作勾搭</view> <view class="tn-margin-left-sm">合作勾搭</view>
</button> </button>
</tn-list-cell> </tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30"> <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="feedback"> <button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="feedback">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-13 tn-color-white"> <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-13 tn-color-white">
<view class="tn-icon-comment-fill"></view> <view class="tn-icon-comment-fill"></view>
</view> </view>
<view class="tn-margin-left-sm">问题反馈</view> <view class="tn-margin-left-sm">问题反馈</view>
</button> </button>
</tn-list-cell> </tn-list-cell>
</view> </view>
</view> </view>
<view class="tn-padding-bottom-xs"></view> <view class="tn-padding-bottom-xs"></view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: 'Tuniao', name: 'Tuniao',
data() { data() {
return { return {
tuniaoData: [ tuniaoData: [
{ {
title: 'View', title: 'View',
icon: 'eye', icon: 'eye',
color: 'indigo', color: 'indigo',
value: '1.22 W' value: '1.22 W'
}, },
{ {
title: 'Star', title: 'Star',
icon: 'star', icon: 'star',
color: 'orange', color: 'orange',
value: '406' value: '406'
}, },
{ {
title: 'Fork', title: 'Fork',
icon: 'fork', icon: 'fork',
color: 'purplered', color: 'purplered',
value: '129' value: '129'
}, },
{ {
title: 'Version', title: 'Version',
icon: 'trusty', icon: 'trusty',
color: 'green', color: 'green',
value: '1.0.0' value: '1.0.0'
} }
] ]
} }
}, },
methods: { methods: {
// 跳转到图鸟官网 // 跳转到图鸟官网
navTuniaoWebsite() { navTuniaoWebsite() {
uni.navigateToMiniProgram({ uni.navigateToMiniProgram({
appId: 'wxa698b1eee960632f' appId: 'wxa698b1eee960632f'
}) })
}, },
// 跳转到会员协议 // 跳转到会员协议
navPlus() { navPlus() {
uni.navigateTo({ uni.navigateTo({
url: '/templatePage/life/plus/plus' url: '/templatePage/life/plus/plus'
}) })
}, },
// 复制Gitee地址 // 复制Gitee地址
copyGitee() { copyGitee() {
uni.setClipboardData({ uni.setClipboardData({
data: "https://gitee.com/TSpecific/tuniao-ui", data: "https://gitee.com/TSpecific/tuniao-ui",
}) })
}, },
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* 顶部背景图 start */ /* 顶部背景图 start */
.top-backgroup { .top-backgroup {
height: 450rpx; height: 450rpx;
z-index: -1; z-index: -1;
.backgroud-image { .backgroud-image {
width: 100%; width: 100%;
height: 667rpx; height: 667rpx;
// z-index: -1; // z-index: -1;
} }
} }
/* 顶部背景图 end */ /* 顶部背景图 end */
/* 页面 start*/ /* 页面 start*/
.about-shadow{ .about-shadow{
border-radius: 15rpx; border-radius: 15rpx;
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07); box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
} }
.about { .about {
&__wrap { &__wrap {
position: relative; position: relative;
z-index: 1; z-index: 1;
margin: 20rpx 30rpx; margin: 20rpx 30rpx;
margin-top: -180rpx; margin-top: -180rpx;
} }
} }
/* 页面 end*/ /* 页面 end*/
/* 用户信息 start */ /* 用户信息 start */
.user-info { .user-info {
&__container { &__container {
} }
&__avatar { &__avatar {
width: 180rpx; width: 180rpx;
height: 180rpx; height: 180rpx;
border: 8rpx solid rgba(255,255,255,0.05); border: 8rpx solid rgba(255,255,255,0.05);
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15); box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
} }
&__nick-name { &__nick-name {
margin-top: 26rpx; margin-top: 26rpx;
font-size: 42rpx; font-size: 42rpx;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
} }
} }
/* 用户信息 end */ /* 用户信息 end */
/* 信息展示 start */ /* 信息展示 start */
.tn-info { .tn-info {
&__container { &__container {
margin-top: 40rpx; margin-top: 40rpx;
} }
&__item { &__item {
width: 48%; width: 48%;
margin: 15rpx 0rpx; margin: 15rpx 0rpx;
padding: 28rpx; padding: 28rpx;
border-radius: 15rpx; border-radius: 15rpx;
position: relative; position: relative;
z-index: 1; z-index: 1;
&::after { &::after {
content: " "; content: " ";
position: absolute; position: absolute;
z-index: -1; z-index: -1;
width: 100%; width: 100%;
height: 100%; height: 100%;
left: 0; left: 0;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
opacity: 1; opacity: 1;
transform: scale(1, 1); transform: scale(1, 1);
background-size: 100% 100%; background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/6.png); background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/6.png);
} }
&__left { &__left {
&--icon { &--icon {
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
border-radius: 50%; border-radius: 50%;
font-size: 40rpx; font-size: 40rpx;
margin-right: 20rpx; margin-right: 20rpx;
position: relative; position: relative;
z-index: 1; z-index: 1;
&::after { &::after {
content: " "; content: " ";
position: absolute; position: absolute;
z-index: -1; z-index: -1;
width: 100%; width: 100%;
height: 100%; height: 100%;
left: 0; left: 0;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
opacity: 1; opacity: 1;
transform: scale(1, 1); transform: scale(1, 1);
background-size: 100% 100%; background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png); background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
} }
} }
&__content { &__content {
font-size: 30rpx; font-size: 30rpx;
&--data { &--data {
margin-top: 5rpx; margin-top: 5rpx;
font-weight: bold; font-weight: bold;
} }
} }
} }
&__right { &__right {
&--icon { &--icon {
font-size: 60rpx; font-size: 60rpx;
opacity: 0.15; opacity: 0.15;
} }
} }
} }
} }
/* 信息展示 end */ /* 信息展示 end */
/* 图标容器1 start */ /* 图标容器1 start */
.icon1 { .icon1 {
&__item { &__item {
// width: 30%; // width: 30%;
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 10rpx; border-radius: 10rpx;
padding: 30rpx; padding: 30rpx;
margin: 20rpx 10rpx; margin: 20rpx 10rpx;
transform: scale(1); transform: scale(1);
transition: transform 0.3s linear; transition: transform 0.3s linear;
transform-origin: center center; transform-origin: center center;
&--icon { &--icon {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
font-size: 28rpx; font-size: 28rpx;
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
z-index: 1; z-index: 1;
&::after { &::after {
content: " "; content: " ";
position: absolute; position: absolute;
z-index: -1; z-index: -1;
width: 100%; width: 100%;
height: 100%; height: 100%;
left: 0; left: 0;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
opacity: 1; opacity: 1;
transform: scale(1, 1); transform: scale(1, 1);
background-size: 100% 100%; background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png); background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
} }
} }
} }
} }
/* 图标容器1 end */ /* 图标容器1 end */
</style> </style>
static/css/components/demo_page_common.scss
+192 -192
View File
@@ -1,193 +1,193 @@
/* 顶部 start */ /* 顶部 start */
.header { .header {
padding: 80rpx 60rpx 40rpx 60rpx; padding: 80rpx 60rpx 40rpx 60rpx;
.title { .title {
font-size: 36rpx; font-size: 36rpx;
color: $tn-font-color; color: $tn-font-color;
font-weight: bold; font-weight: bold;
} }
.sub-title { .sub-title {
font-size: 28rpx; font-size: 28rpx;
color: $tn-content-color; color: $tn-content-color;
padding-top: 18rpx; padding-top: 18rpx;
} }
.tips-title { .tips-title {
font-size: 24rpx; font-size: 24rpx;
color: $tn-font-sub-color; color: $tn-font-sub-color;
padding-top: 5rpx; padding-top: 5rpx;
} }
} }
/* 顶部 end */ /* 顶部 end */
/* 展示内容容器 start */ /* 展示内容容器 start */
.show-content-container { .show-content-container {
/* 标题容器 start */ /* 标题容器 start */
.title-container { .title-container {
display: flex; display: flex;
position: relative; position: relative;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
min-height: 100rpx; min-height: 100rpx;
// 标题样式 // 标题样式
.title { .title {
height: 100%; height: 100%;
max-width: 100%; max-width: 100%;
margin: 0 20rpx; margin: 0 20rpx;
font-size: 30rpx; font-size: 30rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
// 标题前面小点 // 标题前面小点
&:before { &:before {
content: " "; content: " ";
background-color: $tn-main-color; background-color: $tn-main-color;
width: 15rpx; width: 15rpx;
height: 15rpx; height: 15rpx;
border-radius: 10rpx; border-radius: 10rpx;
margin-right: 18rpx; margin-right: 18rpx;
} }
} }
} }
/* 标题容器 end */ /* 标题容器 end */
/* 内容 start */ /* 内容 start */
.content { .content {
padding: 20rpx; padding: 20rpx;
} }
/* 内容 end */ /* 内容 end */
} }
/* 展示内容容器 end */ /* 展示内容容器 end */
/* 内容容器 start */ /* 内容容器 start */
.demo-content-container { .demo-content-container {
border: 1rpx dashed $tn-main-color; border: 1rpx dashed $tn-main-color;
margin: 20rpx; margin: 20rpx;
margin-top: 0rpx; margin-top: 0rpx;
position: fixed; position: fixed;
width: 95%; width: 95%;
z-index: 10; z-index: 10;
transition: all 0.15s ease-out; transition: all 0.15s ease-out;
&.top { &.top {
width: 100%; width: 100%;
margin: 0; margin: 0;
} }
&.no-fixed { &.no-fixed {
position: relative !important; position: relative !important;
} }
/* 标题容器 start */ /* 标题容器 start */
.title-container { .title-container {
display: flex; display: flex;
position: relative; position: relative;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 100rpx; min-height: 100rpx;
// 标题样式 // 标题样式
.title { .title {
height: 100%; height: 100%;
max-width: 100%; max-width: 100%;
margin: 0 30rpx; margin: 0 30rpx;
font-size: 30rpx; font-size: 30rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
} }
/* 标题容器 end */ /* 标题容器 end */
/* 内容 start */ /* 内容 start */
.content { .content {
padding: 30rpx; padding: 30rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
/* 内容 end */ /* 内容 end */
} }
/* 内容容器 end */ /* 内容容器 end */
/* 可选项内容容器 start */ /* 可选项内容容器 start */
.demo-section-container { .demo-section-container {
margin: 20rpx; margin: 20rpx;
height: 100%; height: 100%;
/* 标题容器 start */ /* 标题容器 start */
.title-container { .title-container {
display: flex; display: flex;
position: relative; position: relative;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 100rpx; min-height: 100rpx;
margin-bottom: 10rpx; margin-bottom: 10rpx;
// 标题样式 // 标题样式
.title { .title {
height: 100%; height: 100%;
max-width: 100%; max-width: 100%;
margin: 0 30rpx; margin: 0 30rpx;
font-size: 30rpx; font-size: 30rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
&::after { &::after {
content: " "; content: " ";
box-sizing: border-box; box-sizing: border-box;
width: 90%; width: 90%;
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
border-bottom: 1rpx solid $tn-border-solid-color; border-bottom: 1rpx solid $tn-border-solid-color;
} }
} }
/* 标题容器 end */ /* 标题容器 end */
/* 参数内容 start*/ /* 参数内容 start*/
.content { .content {
padding: 0 20rpx 10rpx 20rpx; padding: 0 20rpx 10rpx 20rpx;
// 标题样式 // 标题样式
.title { .title {
padding-left: 20rpx; padding-left: 20rpx;
height: 100%; height: 100%;
position: relative; position: relative;
&::before { &::before {
content: " "; content: " ";
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0; left: 0;
width: 4rpx; width: 4rpx;
height: 90%; height: 90%;
background-color: $tn-main-color; background-color: $tn-main-color;
border-radius: 6rpx; border-radius: 6rpx;
transform: translateY(-50%); transform: translateY(-50%);
} }
} }
// 参数样式 // 参数样式
.section { .section {
margin-top: 15rpx; margin-top: 15rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
} }
/* 参数内容 end*/ /* 参数内容 end*/
} }
/* 可选项内容容器 end */ /* 可选项内容容器 end */
static/css/templatePage/custom_nav_bar.scss
+37 -37
View File
@@ -1,38 +1,38 @@
.tn-custom-nav-bar__back { .tn-custom-nav-bar__back {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
border-radius: 1000rpx; border-radius: 1000rpx;
border: 1rpx solid rgba(255, 255, 255, 0.5); border: 1rpx solid rgba(255, 255, 255, 0.5);
color: #FFFFFF; color: #FFFFFF;
font-size: 18px; font-size: 18px;
.icon { .icon {
display: block; display: block;
flex: 1; flex: 1;
margin: auto; margin: auto;
text-align: center; text-align: center;
} }
&:before { &:before {
content: " "; content: " ";
width: 1rpx; width: 1rpx;
height: 110%; height: 110%;
position: absolute; position: absolute;
top: 22.5%; top: 22.5%;
left: 0; left: 0;
right: 0; right: 0;
margin: auto; margin: auto;
transform: scale(0.5); transform: scale(0.5);
transform-origin: 0 0; transform-origin: 0 0;
pointer-events: none; pointer-events: none;
box-sizing: border-box; box-sizing: border-box;
opacity: 0.7; opacity: 0.7;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
} }
store/$t.mixin.js
+27 -27
View File
@@ -1,28 +1,28 @@
import { mapState } from 'vuex' import { mapState } from 'vuex'
import store from '@/store' import store from '@/store'
// 尝试将用户在根目录中的store/index.js的vuex的state变量加载到全局变量中 // 尝试将用户在根目录中的store/index.js的vuex的state变量加载到全局变量中
let $tStoreKey = [] let $tStoreKey = []
try { try {
$tStoreKey = store.state ? Object.keys(store.state) : [] $tStoreKey = store.state ? Object.keys(store.state) : []
} catch(e) { } catch(e) {
} }
module.exports = { module.exports = {
beforeCreate() { beforeCreate() {
// 将vuex方法挂在在$t中 // 将vuex方法挂在在$t中
// 使用方法: // 使用方法:
// 修改vuex的state中的user.name变量为图鸟小菜 => this.$t.vuex('user.name', '图鸟小菜') // 修改vuex的state中的user.name变量为图鸟小菜 => this.$t.vuex('user.name', '图鸟小菜')
// 修改vuexde state中的version变量为1.0.1 => this.$t.vuex('version', 1.0.1) // 修改vuexde state中的version变量为1.0.1 => this.$t.vuex('version', 1.0.1)
this.$t.vuex = (name, value) => { this.$t.vuex = (name, value) => {
this.$store.commit('$tStore', { this.$store.commit('$tStore', {
name, value name, value
}) })
} }
}, },
computed: { computed: {
// 将vuex的state中的变量结构到全局混入mixin中 // 将vuex的state中的变量结构到全局混入mixin中
...mapState($tStoreKey) ...mapState($tStoreKey)
} }
} }
store/index.js
+74 -74
View File
@@ -1,75 +1,75 @@
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
Vue.use(Vuex) Vue.use(Vuex)
let lifeData = {} let lifeData = {}
// 尝试获取本地是否存在lifeData变量，第一次启动时不存在 // 尝试获取本地是否存在lifeData变量，第一次启动时不存在
try { try {
lifeData = uni.getStorageSync('lifeData') lifeData = uni.getStorageSync('lifeData')
} catch(e) { } catch(e) {
} }
// 标记需要永久存储的变量，在每次启动时取出，在state中的变量名 // 标记需要永久存储的变量，在每次启动时取出，在state中的变量名
let saveStateKeys = ['vuex_user'] let saveStateKeys = ['vuex_user']
// 保存变量到本地存储 // 保存变量到本地存储
const saveLifeData = function(key, value) { const saveLifeData = function(key, value) {
// 判断变量是否在存储数组中 // 判断变量是否在存储数组中
if (saveStateKeys.indexOf(key) != -1) { if (saveStateKeys.indexOf(key) != -1) {
// 获取本地存储的lifeData对象，将变量添加到对象中 // 获取本地存储的lifeData对象，将变量添加到对象中
let tmpLifeData = uni.getStorageSync('lifeData') let tmpLifeData = uni.getStorageSync('lifeData')
// 第一次启动时不存在，则放一个空对象 // 第一次启动时不存在，则放一个空对象
tmpLifeData = tmpLifeData ? tmpLifeData : {}, tmpLifeData = tmpLifeData ? tmpLifeData : {},
tmpLifeData[key] = value tmpLifeData[key] = value
// 将变量再次放回本地存储中 // 将变量再次放回本地存储中
uni.setStorageSync('lifeData', tmpLifeData) uni.setStorageSync('lifeData', tmpLifeData)
} }
} }
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { state: {
// 如果上面从本地获取的lifeData对象下有对应的属性，就赋值给state中对应的变量 // 如果上面从本地获取的lifeData对象下有对应的属性，就赋值给state中对应的变量
// 加上vuex_前缀，是防止变量名冲突，也让人一目了然 // 加上vuex_前缀，是防止变量名冲突，也让人一目了然
vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {name: '图鸟'}, vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {name: '图鸟'},
// 如果vuex_version无需保存到本地永久存储，无需lifeData.vuex_version方式 // 如果vuex_version无需保存到本地永久存储，无需lifeData.vuex_version方式
// app版本 // app版本
vuex_version: "1.0.0", vuex_version: "1.0.0",
// 是否使用自定义导航栏 // 是否使用自定义导航栏
vuex_custom_nav_bar: true, vuex_custom_nav_bar: true,
// 状态栏高度 // 状态栏高度
vuex_status_bar_height: 0, vuex_status_bar_height: 0,
// 自定义导航栏的高度 // 自定义导航栏的高度
vuex_custom_bar_height: 0 vuex_custom_bar_height: 0
}, },
mutations: { mutations: {
$tStore(state, payload) { $tStore(state, payload) {
// 判断是否多层调用，state中为对象存在的情况，例如user.info.score = 1 // 判断是否多层调用，state中为对象存在的情况，例如user.info.score = 1
let nameArr = payload.name.split('.') let nameArr = payload.name.split('.')
let saveKey = '' let saveKey = ''
let len = nameArr.length let len = nameArr.length
if (len >= 2) { if (len >= 2) {
let obj = state[nameArr[0]] let obj = state[nameArr[0]]
for (let i= 1; i < len - 1; i++) { for (let i= 1; i < len - 1; i++) {
obj = obj[nameArr[i]] obj = obj[nameArr[i]]
} }
obj[nameArr[len - 1]] = payload.value obj[nameArr[len - 1]] = payload.value
saveKey = nameArr[0] saveKey = nameArr[0]
} else { } else {
// 单层级变量 // 单层级变量
state[payload.name] = payload.value state[payload.name] = payload.value
saveKey = payload.name saveKey = payload.name
} }
// 保存变量到本地中 // 保存变量到本地中
saveLifeData(saveKey, state[saveKey]) saveLifeData(saveKey, state[saveKey])
} }
}, },
actions: { actions: {
} }
}) })
export default store export default store
template.h5.html
+37 -37
View File
@@ -1,38 +1,38 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico">
<meta name="viewport" <meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title> <title>
<%= htmlWebpackPlugin.options.title %> <%= htmlWebpackPlugin.options.title %>
</title> </title>
<style> <style>
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }
</style> </style>
<!-- 正式发布的时候使用，开发期间不启用。↑ --> <!-- 正式发布的时候使用，开发期间不启用。↑ -->
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px' document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
}) })
</script> </script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.css" /> <link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />
</head> </head>
<body> <body>
<!-- 该文件为 H5 平台的模板 HTML，并非应用入口。 --> <!-- 该文件为 H5 平台的模板 HTML，并非应用入口。 -->
<!-- 请勿在此文件编写页面代码或直接运行此文件。 --> <!-- 请勿在此文件编写页面代码或直接运行此文件。 -->
<!-- 详见文档：https://uniapp.dcloud.io/collocation/manifest?id=h5-template --> <!-- 详见文档：https://uniapp.dcloud.io/collocation/manifest?id=h5-template -->
<noscript> <noscript>
<strong>本站点必须要开启JavaScript才能运行</strong> <strong>本站点必须要开启JavaScript才能运行</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<script> <script>
/*BAIDU_STAT*/ /*BAIDU_STAT*/
</script> </script>
</body> </body>
</html> </html>
templatePage/animate/bubble/bubble.vue
+226
View File
@@ -0,0 +1,226 @@
<template>
<view class="template-bubble">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<canvas canvas-id="bubble" id="bubble" class="bubble" :style="{width: `${windowWidth}px`, height: `${windowHeight}px`}"></canvas>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateBubble',
mixins: [template_page_mixin],
data(){
return {
windowHeight: 0,
windowWidth: 0,
actionTimer: null,
animationTimer: null,
queue: {},
ctx: null
}
},
onLoad() {
this.getSystemInfo()
},
onReady() {
this.$nextTick(() => {
this.queue = {}
this.ctx = uni.createCanvasContext("bubble", this)
setTimeout(() => {
this.actionTimer = setInterval(() => {
this.generateBubble()
}, 500)
}, 1000)
})
},
onUnload() {
this.clearActionTimer()
this.clearAnimationTimer()
},
methods: {
// 获取系统信息
getSystemInfo() {
const systemInfo = uni.getSystemInfoSync()
if (!systemInfo) {
setTimeout(() => {
this.getSystemInfo()
}, 50)
return
}
this.windowHeight = systemInfo.safeArea.height
this.windowWidth = systemInfo.safeArea.width
},
// 生成泡泡
generateBubble() {
const image = "https://tnuiimage.tnkjapp.com/bubble/" + this.$t.number.randomInt(1, 33) + ".png"
uni.getImageInfo({
src: image,
success: (res) => {
if (res.errMsg === 'getImageInfo:ok') {
const anmationData = {
id: new Date().getTime(),
timer: 0,
opacity: 0,
pathData: this.generatePathData(),
image: res.path,
factor: {
speed: 0.0006, // 运动速度，值越小越慢
t: 0.1 // 贝塞尔函数系数，当为0，就是从无到有，这时候屏幕高度也要调一下
}
}
if (Object.keys(this.queue).length > 0) {
this.queue[anmationData.id] = anmationData
} else {
this.queue[anmationData.id] = anmationData
this.bubbleAnimate()
}
}
}
})
},
/* 动画相关 */
// 生成运动的路径数据
generatePathData() {
let width = this.windowWidth,
height = this.windowHeight;
const p0 = {
x: 0.72 * width,
y: height
}
const p1 = {
x: this.$t.number.random(0.22 * width, 0.33 * width),
y: this.$t.number.random(0.5 * height, 0.75 * height)
}
const p2 = {
x: this.$t.number.random(0, 0.88 * width),
y: this.$t.number.random(0.25 * height, 0.5 * height)
}
const p3 = {
x: this.$t.number.random(0, 0.88 * width),
y: this.$t.number.random(0, 0.125 * height)
}
return [p0, p1, p2, p3]
},
// 更新运动的路径
updatePath(data, factor) {
const p0 = data[0]
const p1 = data[1]
const p2 = data[2]
const p3 = data[3]
const t = factor.t
/*计算多项式系数 （下同）*/
const cx1 = 3 * (p1.x - p0.x)
const bx1 = 3 * (p2.x - p1.x) - cx1
const ax1 = p3.x - p0.x - cx1 - bx1
const cy1 = 3 * (p1.y - p0.y)
const by1 = 3 * (p2.y - p1.y) - cy1
const ay1 = p3.y - p0.y - cy1 - by1
const x = ax1 * (t * t * t) + bx1 * (t * t) + cx1 * t + p0.x
const y = ay1 * (t * t * t) + by1 * (t * t) + cy1 * t + p0.y
// console.log(p0.y, p1.y, p2.y, p3.y, y);
return {
x,
y
}
},
// 执行泡泡动画
bubbleAnimate() {
let width = this.windowWidth,
height = this.windowHeight;
Object.keys(this.queue).forEach(key => {
const anmationData = this.queue[+key];
const {
x,
y
} = this.updatePath(
anmationData.pathData,
anmationData.factor
)
const speed = anmationData.factor.speed
anmationData.factor.t += speed
var curWidth = 30
curWidth = (height - y) / 1.5
curWidth = Math.min(30, curWidth)
var curAlpha = anmationData.opacity
curAlpha = y / (0.3 * height) //消失的高度适当调一下
curAlpha = Math.min(1, curAlpha)
this.ctx.globalAlpha = curAlpha
this.ctx.drawImage(anmationData.image, x - curWidth / 2, y, curWidth, curWidth)
// this.ctx.setFillStyle('red')
// this.ctx.fillRect(x - curWidth / 2, y, 50, 50)
if (anmationData.factor.t > 1) {
delete this.queue[anmationData.id]
}
if (y > height) {
delete this.queue[anmationData.id]
}
})
this.ctx.draw()
if (Object.keys(this.queue).length > 0) {
this.animationTimer = setTimeout(() => {
this.bubbleAnimate()
}, 5)
} else {
this.clearAnimationTimer()()
this.ctx.draw() // 清空画面
}
},
// 清除定时器
clearActionTimer() {
if (this.actionTimer) {
clearInterval(this.actionTimer)
}
},
clearAnimationTimer() {
if (this.animationTimer) {
clearTimeout(this.animationTimer)
}
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-bubble {
position: relative;
background: linear-gradient(-120deg, #9A5CE5, #01BEFF, #00F5D4, #43e97b);
width: 100vw;
height: 100vh;
.bubble {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1024;
pointer-events: none;
}
}
</style>
templatePage/animate/hollow/hollow.vue
+147 -147
View File
@@ -1,147 +1,147 @@
<template> <template>
<view class="template-hollow"> <view class="template-hollow">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack> <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back' <view slot="back" class='tn-custom-nav-bar__back'
@click="goBack"> @click="goBack">
<text class='icon tn-icon-left'></text> <text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text> <text class='icon tn-icon-home-capsule-fill'></text>
</view> </view>
</tn-nav-bar> </tn-nav-bar>
<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px;margin-top:250rpx'}"> <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px;margin-top:250rpx'}">
<view class="tn-flex tn-flex-row-between tn-margin-xl"> <view class="tn-flex tn-flex-row-between tn-margin-xl">
<view class="justify-content-item" style="margin-top: 50rpx;"> <view class="justify-content-item" style="margin-top: 50rpx;">
<view class="tn-radius tn-margin-bottom-xl"> <view class="tn-radius tn-margin-bottom-xl">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg')"> <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg')">
<view class="image-hollow"> <view class="image-hollow">
</view> </view>
</view> </view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">Jaylen</view> <view class="tn-text-center tn-text-bold tn-padding-top-xs">Jaylen</view>
</view> </view>
<view class="tn-radius tn-margin-bottom"> <view class="tn-radius tn-margin-bottom">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')"> <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
<view class="image-hollow"> <view class="image-hollow">
</view> </view>
</view> </view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">浅浅遇</view> <view class="tn-text-center tn-text-bold tn-padding-top-xs">浅浅遇</view>
</view> </view>
</view> </view>
<view class="justify-content-item"> <view class="justify-content-item">
<view class="tn-radius tn-margin-bottom-xl"> <view class="tn-radius tn-margin-bottom-xl">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg')"> <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg')">
<view class="image-hollow"> <view class="image-hollow">
</view> </view>
</view> </view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">可我会像</view> <view class="tn-text-center tn-text-bold tn-padding-top-xs">可我会像</view>
</view> </view>
<view class="tn-radius tn-margin-bottom"> <view class="tn-radius tn-margin-bottom">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg')"> <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg')">
<view class="image-hollow"> <view class="image-hollow">
</view> </view>
</view> </view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">北北同学</view> <view class="tn-text-center tn-text-bold tn-padding-top-xs">北北同学</view>
</view> </view>
</view> </view>
<view class="justify-content-item" style="margin-top: 50rpx;"> <view class="justify-content-item" style="margin-top: 50rpx;">
<view class="tn-radius tn-margin-bottom-xl"> <view class="tn-radius tn-margin-bottom-xl">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg')"> <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg')">
<view class="image-hollow"> <view class="image-hollow">
</view> </view>
</view> </view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">福哥</view> <view class="tn-text-center tn-text-bold tn-padding-top-xs">福哥</view>
</view> </view>
<view class="tn-radius tn-margin-bottom"> <view class="tn-radius tn-margin-bottom">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/content_1.jpeg')"> <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/content_1.jpeg')">
<view class="image-hollow"> <view class="image-hollow">
</view> </view>
</view> </view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">锋哥</view> <view class="tn-text-center tn-text-bold tn-padding-top-xs">锋哥</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="bottom-backgroup"> <view class="bottom-backgroup">
<image src='https://tnuiimage.tnkjapp.com/animate/hollow.jpg' mode='widthFix' class='backgroud-image'></image> <image src='https://tnuiimage.tnkjapp.com/animate/hollow.jpg' mode='widthFix' class='backgroud-image'></image>
</view> </view>
<view class="hollow"> <view class="hollow">
<view class="tn-text-xxl"> <view class="tn-text-xxl">
<text class="">Hi，图鸟的小伙伴</text> <text class="">Hi，图鸟的小伙伴</text>
</view> </view>
<view class="tn-text-xl tn-padding-top"> <view class="tn-text-xl tn-padding-top">
技术的友情，有你真好 技术的友情，有你真好
</view> </view>
<view class="tn-text-xl tn-padding-top"> <view class="tn-text-xl tn-padding-top">
TnUI，感谢一路陪伴与支持 TnUI，感谢一路陪伴与支持
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js' import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default { export default {
name: 'TemplateHollow', name: 'TemplateHollow',
mixins: [template_page_mixin], mixins: [template_page_mixin],
data(){ data(){
return {} return {}
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss'; @import '@/static/css/templatePage/custom_nav_bar.scss';
/* 背景图 start */ /* 背景图 start */
.bottom-backgroup { .bottom-backgroup {
height: 700rpx; height: 700rpx;
z-index: -1; z-index: -1;
.backgroud-image { .backgroud-image {
border-radius: 60rpx 60rpx 0 0; border-radius: 60rpx 60rpx 0 0;
width: 100%; width: 100%;
height: 3373rpx; height: 3373rpx;
// z-index: -1; // z-index: -1;
} }
} }
/* 背景图 end */ /* 背景图 end */
/* 镂空 start*/ /* 镂空 start*/
.hollow { .hollow {
position: fixed; position: fixed;
text-align: center; text-align: center;
width: 87%; width: 87%;
padding: 30rpx; padding: 30rpx;
margin: 0 6.5%; margin: 0 6.5%;
top: 180rpx; top: 180rpx;
font-weight: bold; font-weight: bold;
z-index: 1000; z-index: 1000;
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
color: #000; color: #000;
border-radius: 20rpx; border-radius: 20rpx;
/* overlay; difference;lighten;hue;这些都是参数值，但东东觉得lighten好看点*/ /* overlay; difference;lighten;hue;这些都是参数值，但东东觉得lighten好看点*/
mix-blend-mode: lighten; mix-blend-mode: lighten;
} }
/* 效果布局 start*/ /* 效果布局 start*/
.image-hollow{ .image-hollow{
width: 200rpx; width: 200rpx;
height: 400rpx; height: 400rpx;
font-size: 40rpx; font-size: 40rpx;
font-weight: 300; font-weight: 300;
position: relative; position: relative;
} }
.image-pic{ .image-pic{
height: 100%; height: 100%;
background-size: cover; background-size: cover;
background-repeat:no-repeat; background-repeat:no-repeat;
// background-attachment:fixed; // background-attachment:fixed;
background-position:top; background-position:top;
border-radius: 10rpx; border-radius: 10rpx;
} }
</style> </style>
templatePage/animate/loading/loading.vue
+265 -265
View File
@@ -1,265 +1,265 @@
<template> <template>
<view class="template-loading"> <view class="template-loading">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack> <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back' <view slot="back" class='tn-custom-nav-bar__back'
@click="goBack"> @click="goBack">
<text class='icon tn-icon-left'></text> <text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text> <text class='icon tn-icon-home-capsule-fill'></text>
</view> </view>
</tn-nav-bar> </tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view class="bg-contaniner"> <view class="bg-contaniner">
</view> </view>
<view class="container-content hex-border"> <view class="container-content hex-border">
<view class="hexagons"> <view class="hexagons">
<view class="hexagon"></view> <view class="hexagon"></view>
<view class="hexagon"></view> <view class="hexagon"></view>
<view class="hexagon"></view> <view class="hexagon"></view>
<view class="hexagon"></view> <view class="hexagon"></view>
<view class="hexagon"></view> <view class="hexagon"></view>
<view class="hexagon"></view> <view class="hexagon"></view>
<view class="hexagon"></view> <view class="hexagon"></view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js' import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default { export default {
name: 'TemplateLoading', name: 'TemplateLoading',
mixins: [template_page_mixin], mixins: [template_page_mixin],
data(){ data(){
return {} return {}
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss'; @import '@/static/css/templatePage/custom_nav_bar.scss';
/* 移动背景部分 */ /* 移动背景部分 */
.bg-contaniner { .bg-contaniner {
position: fixed; position: fixed;
top: -0rpx; top: -0rpx;
left: -300rpx; left: -300rpx;
--text-color: hsl(0 95% 60%); --text-color: hsl(0 95% 60%);
--bg-color: hsl(0 0% 100%); --bg-color: hsl(0 0% 100%);
--bg-size: 200px; --bg-size: 200px;
height: 100%; height: 100%;
display: grid; display: grid;
place-items: center; place-items: center;
place-content: center; place-content: center;
/* grid-template-areas: "body"; */ /* grid-template-areas: "body"; */
overflow: hidden; overflow: hidden;
font-family: "Dela Gothic One", sans-serif; font-family: "Dela Gothic One", sans-serif;
background-color: var(--bg-color); background-color: var(--bg-color);
z-index: -1; z-index: -1;
} }
.bg-contaniner::before { .bg-contaniner::before {
--size: 150vmax; --size: 150vmax;
grid-area: body; grid-area: body;
content: ""; content: "";
inline-size: var(--size); inline-size: var(--size);
block-size: var(--size); block-size: var(--size);
background-image: url("https://tnuiimage.tnkjapp.com/animate/animate1.jpg"); background-image: url("https://tnuiimage.tnkjapp.com/animate/animate1.jpg");
background-size: var(--bg-size); background-size: var(--bg-size);
background-repeat: repeat; background-repeat: repeat;
transform: rotate(45deg); transform: rotate(45deg);
opacity: 0.25; opacity: 0.25;
animation: bg 6s linear infinite; animation: bg 6s linear infinite;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.bg-contaniner::before { .bg-contaniner::before {
animation-duration: 0s; animation-duration: 0s;
} }
} }
@keyframes bg { @keyframes bg {
to { to {
background-position: 0 calc(var(--bg-size) * -1); background-position: 0 calc(var(--bg-size) * -1);
} }
} }
/* 加载部分 */ /* 加载部分 */
.components-anloading { .components-anloading {
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
color: #fff; color: #fff;
/* background: linear-gradient(45deg, #0fd850, #f9f047); */ /* background: linear-gradient(45deg, #0fd850, #f9f047); */
} }
.hex-border { .hex-border {
position: absolute; position: absolute;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
left: 50%; left: 50%;
top: 50%; top: 50%;
width: 170px; width: 170px;
height: 170px; height: 170px;
border: 2px solid rgba(235, 237, 241, 0.8); border: 2px solid rgba(235, 237, 241, 0.8);
border-radius: 100%; border-radius: 100%;
} }
.hex-border::before { .hex-border::before {
content: ""; content: "";
position: absolute; position: absolute;
width: 174px; width: 174px;
height: 174px; height: 174px;
border: 2px solid #F4B4C4; border: 2px solid #F4B4C4;
border-radius: 100%; border-radius: 100%;
box-sizing: border-box; box-sizing: border-box;
clip-path: inset(0px 135px 135px 0px); clip-path: inset(0px 135px 135px 0px);
-webkit-clip-path: inset(0px 135px 135px 0px); -webkit-clip-path: inset(0px 135px 135px 0px);
top: -4px; top: -4px;
left: -4px; left: -4px;
animation: rotateSmall 2s linear infinite; animation: rotateSmall 2s linear infinite;
z-index: 2; z-index: 2;
} }
.hex-border::after { .hex-border::after {
content: ""; content: "";
position: absolute; position: absolute;
width: 174px; width: 174px;
height: 174px; height: 174px;
border: 2px solid #F4B4C4; border: 2px solid #F4B4C4;
border-radius: 100%; border-radius: 100%;
box-sizing: border-box; box-sizing: border-box;
top: -4px; top: -4px;
left: -4px; left: -4px;
clip-path: inset(0px 30px 30px 0px); clip-path: inset(0px 30px 30px 0px);
-webkit-clip-path: inset(0px 30px 30px 0px); -webkit-clip-path: inset(0px 30px 30px 0px);
animation: rotateLarge 1.6s linear infinite; animation: rotateLarge 1.6s linear infinite;
} }
.hexagons { .hexagons {
position: relative; position: relative;
border-radius: 100%; border-radius: 100%;
padding: 5%; padding: 5%;
top: 30px; top: 30px;
left: 35px; left: 35px;
} }
.hexagon { .hexagon {
position: absolute; position: absolute;
width: 40px; width: 40px;
height: 23px; height: 23px;
background-color: #F4B4C4; background-color: #F4B4C4;
transform: scale(1.02); transform: scale(1.02);
transform-origin: center; transform-origin: center;
} }
.hexagon::before { .hexagon::before {
content: ""; content: "";
position: absolute; position: absolute;
top: -11.5px; top: -11.5px;
left: 0; left: 0;
width: 0; width: 0;
height: 0; height: 0;
border-left: 20px solid transparent; border-left: 20px solid transparent;
border-right: 20px solid transparent; border-right: 20px solid transparent;
border-bottom: 11.5px solid #F4B4C4; border-bottom: 11.5px solid #F4B4C4;
} }
.hexagon::after { .hexagon::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 23px; top: 23px;
left: 0; left: 0;
width: 0; width: 0;
height: 0; height: 0;
border-left: 20px solid transparent; border-left: 20px solid transparent;
border-right: 20px solid transparent; border-right: 20px solid transparent;
border-top: 11.5px solid #F4B4C4; border-top: 11.5px solid #F4B4C4;
} }
.hexagon:nth-child(1) { .hexagon:nth-child(1) {
animation: animateHex 3s infinite; animation: animateHex 3s infinite;
} }
.hexagon:nth-child(2) { .hexagon:nth-child(2) {
left: 53px; left: 53px;
animation: animateHex 3s 0.2s infinite; animation: animateHex 3s 0.2s infinite;
} }
.hexagon:nth-child(3) { .hexagon:nth-child(3) {
left: -13px; left: -13px;
top: 46px; top: 46px;
animation: animateHex 3s 1s infinite; animation: animateHex 3s 1s infinite;
} }
.hexagon:nth-child(4) { .hexagon:nth-child(4) {
left: 31px; left: 31px;
top: 46px; top: 46px;
animation: animateHex 3s 1.2s infinite; animation: animateHex 3s 1.2s infinite;
} }
.hexagon:nth-child(5) { .hexagon:nth-child(5) {
left: 75px; left: 75px;
top: 46px; top: 46px;
animation: animateHex 3s 0.4s infinite; animation: animateHex 3s 0.4s infinite;
} }
.hexagon:nth-child(6) { .hexagon:nth-child(6) {
top: 84px; top: 84px;
animation: animateHex 3s 0.8s infinite; animation: animateHex 3s 0.8s infinite;
} }
.hexagon:nth-child(7) { .hexagon:nth-child(7) {
left: 53px; left: 53px;
top: 84px; top: 84px;
animation: animateHex 3s 0.6s infinite; animation: animateHex 3s 0.6s infinite;
} }
@keyframes rotateSmall { @keyframes rotateSmall {
100% { 100% {
transform: rotate(1turn); transform: rotate(1turn);
} }
} }
@keyframes rotateLarge { @keyframes rotateLarge {
0% { 0% {
clip-path: inset(0px 30px 30px 0px); clip-path: inset(0px 30px 30px 0px);
-webkit-clip-path: inset(0px 30px 30px 0px); -webkit-clip-path: inset(0px 30px 30px 0px);
} }
50% { 50% {
clip-path: inset(0px 150px 150px 0px); clip-path: inset(0px 150px 150px 0px);
-webkit-clip-path: inset(0px 150px 150px 0px); -webkit-clip-path: inset(0px 150px 150px 0px);
} }
100% { 100% {
transform: rotate(1turn); transform: rotate(1turn);
clip-path: inset(0px 30px 30px 0px); clip-path: inset(0px 30px 30px 0px);
-webkit-clip-path: inset(0px 30px 30px 0px); -webkit-clip-path: inset(0px 30px 30px 0px);
} }
} }
@keyframes animateHex { @keyframes animateHex {
0% { 0% {
transform: scale(1.02); transform: scale(1.02);
} }
20%, 20%,
50% { 50% {
transform: scale(0.6); transform: scale(0.6);
opacity: 0; opacity: 0;
} }
65% { 65% {
transform: scale(1.02); transform: scale(1.02);
opacity: 1; opacity: 1;
} }
} }
</style> </style>
templatePage/animate/particle/particle.vue
+149 -149
View File
@@ -1,149 +1,149 @@
<template> <template>
<view class="template-particle"> <view class="template-particle">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack> <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back' <view slot="back" class='tn-custom-nav-bar__back'
@click="goBack"> @click="goBack">
<text class='icon tn-icon-left'></text> <text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text> <text class='icon tn-icon-home-capsule-fill'></text>
</view> </view>
</tn-nav-bar> </tn-nav-bar>
<canvas canvas-id="star_canvas" class="mycanvas" :style="'width:' + screenWidth + 'px;height:' + screenHeight + 'px;'"></canvas> <canvas canvas-id="star_canvas" class="mycanvas" :style="'width:' + screenWidth + 'px;height:' + screenHeight + 'px;'"></canvas>
</view> </view>
</template> </template>
<script> <script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js' import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
const Point = class { const Point = class {
constructor(x, y) { constructor(x, y) {
this.x = x this.x = x
this.y = y this.y = y
this.r = 1 + Math.random() * 2 this.r = 1 + Math.random() * 2
this.sx = Math.random() * 2 - 1 this.sx = Math.random() * 2 - 1
this.sy = Math.random() * 2 - 1 this.sy = Math.random() * 2 - 1
} }
draw(ctx) { draw(ctx) {
ctx.beginPath() ctx.beginPath()
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI) ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
ctx.closePath() ctx.closePath()
ctx.fillStyle = '#fff' ctx.fillStyle = '#fff'
ctx.fill() ctx.fill()
} }
move(w, h) { move(w, h) {
this.x += this.sx this.x += this.sx
this.y += this.sy this.y += this.sy
if (this.x > w || this.x < 0) this.sx = -this.sx if (this.x > w || this.x < 0) this.sx = -this.sx
if (this.y > h || this.y < 0) this.sy = -this.sy if (this.y > h || this.y < 0) this.sy = -this.sy
} }
drawLine(ctx, p) { drawLine(ctx, p) {
const dx = this.x - p.x const dx = this.x - p.x
const dy = this.y - p.y const dy = this.y - p.y
const d = Math.sqrt(dx * dx + dy * dy) const d = Math.sqrt(dx * dx + dy * dy)
if (d < 100) { if (d < 100) {
var alpha = (100 - d) / 300 * 1 var alpha = (100 - d) / 300 * 1
ctx.beginPath() ctx.beginPath()
ctx.moveTo(this.x, this.y) ctx.moveTo(this.x, this.y)
ctx.lineTo(p.x, p.y) ctx.lineTo(p.x, p.y)
ctx.closePath() ctx.closePath()
ctx.strokeStyle = 'rgba(255, 255, 255, ' + alpha + ')' ctx.strokeStyle = 'rgba(255, 255, 255, ' + alpha + ')'
ctx.strokeWidth = 1 ctx.strokeWidth = 1
ctx.stroke() ctx.stroke()
} }
} }
} }
const sysinfo = uni.getSystemInfoSync() const sysinfo = uni.getSystemInfoSync()
const w = 400 const w = 400
const h = 1000 const h = 1000
export default { export default {
name: 'TemplateParticle', name: 'TemplateParticle',
mixins: [template_page_mixin], mixins: [template_page_mixin],
data(){ data(){
return { return {
ctx: null, ctx: null,
screenWidth: sysinfo.screenWidth, screenWidth: sysinfo.screenWidth,
screenHeight: sysinfo.screenHeight, screenHeight: sysinfo.screenHeight,
timer: null, timer: null,
points: [] points: []
} }
}, },
onLoad(options) { onLoad(options) {
this.from = options.from || '' this.from = options.from || ''
for (let i = 0; i < 80; i++) { for (let i = 0; i < 80; i++) {
this.points.push(new Point(Math.random() * w, Math.random() * h)) this.points.push(new Point(Math.random() * w, Math.random() * h))
} }
this.ctx = uni.createCanvasContext('star_canvas') this.ctx = uni.createCanvasContext('star_canvas')
// console.log(points) // console.log(points)
this.gameloop() //进行 this.gameloop() //进行
// this.ctx.setFillStyle('red') // this.ctx.setFillStyle('red')
// this.ctx.fillRect(200, 300, 50, 50) // this.ctx.fillRect(200, 300, 50, 50)
// this.ctx.draw() // this.ctx.draw()
}, },
onUnload() { onUnload() {
clearTimeout(this.timer) clearTimeout(this.timer)
}, },
methods: { methods: {
/**粒子进行*/ /**粒子进行*/
gameloop() { gameloop() {
this.timer = setTimeout(this.gameloop, 100); this.timer = setTimeout(this.gameloop, 100);
// console.log('gameloop') // console.log('gameloop')
this.paint(); this.paint();
}, },
/**清空画布*/ /**清空画布*/
paint() { paint() {
this.ctx.clearRect(0, 0, w, h) this.ctx.clearRect(0, 0, w, h)
for (var i = 0; i < this.points.length; i++) { for (var i = 0; i < this.points.length; i++) {
this.points[i].move(w, h) this.points[i].move(w, h)
this.points[i].draw(this.ctx) this.points[i].draw(this.ctx)
for (var j = i + 1; j < this.points.length; j++) { for (var j = i + 1; j < this.points.length; j++) {
this.points[i].drawLine(this.ctx, this.points[j]) this.points[i].drawLine(this.ctx, this.points[j])
} }
} }
this.ctx.draw(); this.ctx.draw();
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss'; @import '@/static/css/templatePage/custom_nav_bar.scss';
.template-particle { .template-particle {
background: -webkit-gradient(linear, left top, right top, from(#892FE8), to(#3D7EFF)); background: -webkit-gradient(linear, left top, right top, from(#892FE8), to(#3D7EFF));
background: linear-gradient(90deg, #892FE8, #3D7EFF); background: linear-gradient(90deg, #892FE8, #3D7EFF);
min-height: 100vh min-height: 100vh
} }
.template-particle:before { .template-particle:before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black)); -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
-webkit-mask-image: linear-gradient(to bottom, transparent, black); -webkit-mask-image: linear-gradient(to bottom, transparent, black);
mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black)); mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
mask-image: linear-gradient(to bottom, transparent, black); mask-image: linear-gradient(to bottom, transparent, black);
background: -webkit-gradient(linear, left top, right top, from(#E72F8C), to(#892FE8)); background: -webkit-gradient(linear, left top, right top, from(#E72F8C), to(#892FE8));
background: linear-gradient(90deg, #E72F8C, #892FE8); background: linear-gradient(90deg, #E72F8C, #892FE8);
} }
.mycanvas { .mycanvas {
background-size: cover; background-size: cover;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
color: #fff; color: #fff;
} }
</style> </style>
templatePage/animate/photo/photo.vue
+264 -264
View File
@@ -1,264 +1,264 @@
<template> <template>
<view class="template-photo"> <view class="template-photo">
<!-- 顶部自定义导航 --> <!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack> <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back' <view slot="back" class='tn-custom-nav-bar__back'
@click="goBack"> @click="goBack">
<text class='icon tn-icon-left'></text> <text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text> <text class='icon tn-icon-home-capsule-fill'></text>
</view> </view>
</tn-nav-bar> </tn-nav-bar>
<!-- 页面内容 --> <!-- 页面内容 -->
<view class="slideshow"> <view class="slideshow">
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/cup1.jpg')"></view> <view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/cup1.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg')"></view> <view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/card.jpg')"></view> <view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/card.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/watch1.jpg')"></view> <view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/watch1.jpg')"></view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js' import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default { export default {
name: 'TemplatePhoto', name: 'TemplatePhoto',
mixins: [template_page_mixin], mixins: [template_page_mixin],
data(){ data(){
return {} return {}
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss'; @import '@/static/css/templatePage/custom_nav_bar.scss';
.template-photo { .template-photo {
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
color: #fff; color: #fff;
overflow: hidden; overflow: hidden;
} }
/* 相册 start*/ /* 相册 start*/
.slideshow { .slideshow {
top: 0; top: 0;
position: absolute; position: absolute;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
} }
.slideshow-image { .slideshow-image {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: no-repeat 50% 50%; background: no-repeat 50% 50%;
background-size: cover; background-size: cover;
-webkit-animation-name: kenburns; -webkit-animation-name: kenburns;
animation-name: kenburns; animation-name: kenburns;
-webkit-animation-timing-function: linear; -webkit-animation-timing-function: linear;
animation-timing-function: linear; animation-timing-function: linear;
-webkit-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite; animation-iteration-count: infinite;
-webkit-animation-duration: 16s; -webkit-animation-duration: 16s;
animation-duration: 16s; animation-duration: 16s;
opacity: 1; opacity: 1;
transform: scale(1.2); transform: scale(1.2);
} }
.slideshow-image:nth-child(1) { .slideshow-image:nth-child(1) {
-webkit-animation-name: kenburns-1; -webkit-animation-name: kenburns-1;
animation-name: kenburns-1; animation-name: kenburns-1;
z-index: 3; z-index: 3;
} }
.slideshow-image:nth-child(2) { .slideshow-image:nth-child(2) {
-webkit-animation-name: kenburns-2; -webkit-animation-name: kenburns-2;
animation-name: kenburns-2; animation-name: kenburns-2;
z-index: 2; z-index: 2;
} }
.slideshow-image:nth-child(3) { .slideshow-image:nth-child(3) {
-webkit-animation-name: kenburns-3; -webkit-animation-name: kenburns-3;
animation-name: kenburns-3; animation-name: kenburns-3;
z-index: 1; z-index: 1;
} }
.slideshow-image:nth-child(4) { .slideshow-image:nth-child(4) {
-webkit-animation-name: kenburns-4; -webkit-animation-name: kenburns-4;
animation-name: kenburns-4; animation-name: kenburns-4;
z-index: 0; z-index: 0;
} }
@-webkit-keyframes kenburns-1 { @-webkit-keyframes kenburns-1 {
0% { 0% {
opacity: 1; opacity: 1;
transform: scale(1.2); transform: scale(1.2);
} }
1.5625% { 1.5625% {
opacity: 1; opacity: 1;
} }
23.4375% { 23.4375% {
opacity: 1; opacity: 1;
} }
26.5625% { 26.5625% {
opacity: 0; opacity: 0;
transform: scale(1); transform: scale(1);
} }
100% { 100% {
opacity: 0; opacity: 0;
transform: scale(1.2); transform: scale(1.2);
} }
98.4375% { 98.4375% {
opacity: 0; opacity: 0;
transform: scale(1.2117647059); transform: scale(1.2117647059);
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
} }
@keyframes kenburns-1 { @keyframes kenburns-1 {
0% { 0% {
opacity: 1; opacity: 1;
transform: scale(1.2); transform: scale(1.2);
} }
1.5625% { 1.5625% {
opacity: 1; opacity: 1;
} }
23.4375% { 23.4375% {
opacity: 1; opacity: 1;
} }
26.5625% { 26.5625% {
opacity: 0; opacity: 0;
transform: scale(1); transform: scale(1);
} }
100% { 100% {
opacity: 0; opacity: 0;
transform: scale(1.2); transform: scale(1.2);
} }
98.4375% { 98.4375% {
opacity: 0; opacity: 0;
transform: scale(1.2117647059); transform: scale(1.2117647059);
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes kenburns-2 { @-webkit-keyframes kenburns-2 {
23.4375% { 23.4375% {
opacity: 1; opacity: 1;
transform: scale(1.2); transform: scale(1.2);
} }
26.5625% { 26.5625% {
opacity: 1; opacity: 1;
} }
48.4375% { 48.4375% {
opacity: 1; opacity: 1;
} }
51.5625% { 51.5625% {
opacity: 0; opacity: 0;
transform: scale(1); transform: scale(1);
} }
100% { 100% {
opacity: 0; opacity: 0;
transform: scale(1.2); transform: scale(1.2);
} }
} }
@keyframes kenburns-2 { @keyframes kenburns-2 {
23.4375% { 23.4375% {
opacity: 1; opacity: 1;
transform: scale(1.2); transform: scale(1.2);
} }
26.5625% { 26.5625% {
opacity: 1; opacity: 1;
} }
48.4375% { 48.4375% {
opacity: 1; opacity: 1;
} }
51.5625% { 51.5625% {
opacity: 0; opacity: 0;
transform: scale(1); transform: scale(1);
} }
100% { 100% {
opacity: 0; opacity: 0;
transform: scale(1.2); transform: scale(1.2);
} }
} }
@-webkit-keyframes kenburns-3 { @-webkit-keyframes kenburns-3 {
48.4375% { 48.4375% {
opacity: 1; opacity: 1;
transform: scale(1.2); transform: scale(1.2);
} }
51.5625% { 51.5625% {
opacity: 1; opacity: 1;
} }
73.4375% { 73.4375% {
opacity: 1; opacity: 1;
} }
76.5625% { 76.5625% {
opacity: 0; opacity: 0;
transform: scale(1); transform: scale(1);
} }
100% { 100% {
opacity: 0; opacity: 0;
transform: scale(1.2); transform: scale(1.2);
} }
} }
@keyframes kenburns-3 { @keyframes kenburns-3 {
48.4375% { 48.4375% {
opacity: 1; opacity: 1;
transform: scale(1.2); transform: scale(1.2);
} }
51.5625% { 51.5625% {
opacity: 1; opacity: 1;
} }
73.4375% { 73.4375% {
opacity: 1; opacity: 1;
} }
76.5625% { 76.5625% {
opacity: 0; opacity: 0;
transform: scale(1); transform: scale(1);
} }
100% { 100% {
opacity: 0; opacity: 0;
transform: scale(1.2); transform: scale(1.2);
} }
} }
@-webkit-keyframes kenburns-4 { @-webkit-keyframes kenburns-4 {
73.4375% { 73.4375% {
opacity: 1; opacity: 1;
transform: scale(1.2); transform: scale(1.2);
} }
76.5625% { 76.5625% {
opacity: 1; opacity: 1;
} }
98.4375% { 98.4375% {
opacity: 1; opacity: 1;
} }
100% { 100% {
opacity: 0; opacity: 0;
transform: scale(1); transform: scale(1);
} }
} }
@keyframes kenburns-4 { @keyframes kenburns-4 {
73.4375% { 73.4375% {
opacity: 1; opacity: 1;
transform: scale(1.2); transform: scale(1.2);
} }
76.5625% { 76.5625% {
opacity: 1; opacity: 1;
} }
98.4375% { 98.4375% {
opacity: 1; opacity: 1;
} }
100% { 100% {
opacity: 0; opacity: 0;
transform: scale(1); transform: scale(1);
} }
} }
/* 相册 end*/ /* 相册 end*/
</style> </style>
templatePage/animate/suspended/suspended.vue
+214
View File
@@ -0,0 +1,214 @@
<template>
<view class="template-suspended">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="wechat tnxuanfu" @click="navTuniaoUI">
<view class="bg0 pa">
<view class="bg1">
<image src="https://tnuiimage.tnkjapp.com/my/my7.png" class="button-shop shadow"></image>
</view>
</view>
<view class="hx-box pa">
<view class="pr">
<view class="hx-k1 pa0">
<view class="span"></view>
</view>
<view class="hx-k2 pa0">
<view class="span"></view>
</view>
<view class="hx-k3 pa0">
<view class="span"></view>
</view>
<view class="hx-k4 pa0">
<view class="span"></view>
</view>
<view class="hx-k5 pa0">
<view class="span"></view>
</view>
<view class="hx-k6 pa0">
<view class="span"></view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'TemplateSuspended',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {}
},
methods: {
// 跳转到
navTuniaoUI(e) {
wx.vibrateShort();
uni.navigateTo({
url: '/pages/index/index'
})
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-suspended{
background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
width: 100vw;
height: 100vh;
}
/* 悬浮 */
.tnxuanfu{
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.8rem);
}
}
/* 悬浮按钮 */
.button-shop {
width: 90rpx;
height: 90rpx;
display: flex;
flex-direction: row;
position: fixed;
/* bottom:200rpx;
right: 20rpx; */
left: 5rpx;
top: 5rpx;
z-index: 1001;
border-radius: 100px;
opacity: 0.9;
}
/* 按钮 */
.wechat {
bottom: 300rpx;
right: 75rpx;
position: fixed;
z-index: 9999;
}
.pa,
.pa0 {
position: absolute
}
.pa0 {
left: 0;
top: 0
}
.bg0 {
width: 100rpx;
height: 100rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bg1 {
width: 100%;
height: 100%;
}
.hx-box {
top: 50%;
left: 50%;
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
}
.hx-box .pr {
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
animation: hxz 20s linear infinite;
}
@keyframes hxz {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-360deg);
}
}
.hx-box .pr .pa0 {
width: 100rpx;
height: 100rpx;
/* border: 4px solid #5ec0ff; */
border-radius: 1000px;
}
.hx-box .pr .pa0 .span {
display: block;
width: 100%;
height: 100%;
background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc4.png) no-repeat center center;
background-size: 100% 100%;
animation: hx 4s linear infinite;
}
@keyframes hx {
to {
transform: rotate(360deg);
}
}
.hx-k1 {
transform: rotateX(-60deg) rotateZ(-60deg)
}
.hx-k2 {
transform: rotateX(-30deg) rotateZ(-30deg)
}
.hx-k3 {
transform: rotateX(0deg) rotateZ(0deg)
}
.hx-k4 {
transform: rotateX(30deg) rotateZ(30deg)
}
.hx-k5 {
transform: rotateX(60deg) rotateZ(60deg)
}
.hx-k6 {
transform: rotateX(90deg) rotateZ(90deg)
}
</style>
templatePage/animate/wave/wave.vue
+122
View File
@@ -0,0 +1,122 @@
<template>
<view class="template-wave">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="">
</view>
<view class="tnwave waveAnimation">
<view class="waveWrapperInner bgTop">
<view class="wave waveTop" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgMiddle">
<view class="wave waveMiddle" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgBottom">
<view class="wave waveBottom" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-1.png')"></view>
</view>
</view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'TemplateWave',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-wave{
background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
width: 100vw;
height: 100vh;
}
@keyframes move_wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1)
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(1)
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1)
}
}
.tnwave {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.waveWrapperInner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
}
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.bgTop {
opacity: 0.4;
}
.waveTop {
background-size: 50% 45px;
}
.waveAnimation .waveTop {
animation: move_wave 4s linear infinite;
}
.bgMiddle {
opacity: 0.6;
}
.waveMiddle {
background-size: 50% 40px;
}
.waveAnimation .waveMiddle {
animation: move_wave 3.5s linear infinite;
}
.bgBottom {
opacity: 0.95;
}
.waveBottom {
background-size: 50% 35px;
}
.waveAnimation .waveBottom {
animation: move_wave 2s linear infinite;
}
</style>
templatePage/article/demo1/demo1.vue
+739
View File
@@ -0,0 +1,739 @@
<template>
<view class="tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar> -->
<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
<!-- 图标logo -->
<view class="custom-nav__back">
<view class="logo-pic tn-shadow-blur"
style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
<view class="logo-image">
<tn-badge backgroundColor="#E72F8C" :dot="true" :radius="16" :absolute="true" :translateCenter="false">
</tn-badge>
</view>
</view>
<!-- <view class="tn-icon-left"></view> -->
</view>
<!-- 搜索框 -->
<!-- <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
<view class="custom-nav__search__icon tn-icon-search"></view>
<view class="custom-nav__search__text tn-padding-left-xs">开启美好的一天</view>
</view>
</view> -->
<view class="tn-margin-top tn-margin-left">
<tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#000" bold="true"
:fontSize="36"></tn-tabs>
</view>
</view>
</tn-nav-bar>
<!-- 不建议写时间，因为写了时间，你就要经常更新文章了鸭-->
<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<block v-for="(item, index) in content" :key="index">
<view class="article-shadow tn-margin">
<view class="tn-flex">
<view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.userAvatar + ')'">
<view class="image-article">
</view>
</view>
<view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
<view class="tn-text-lg tn-text-bold clamp-text-1">
{{ item.title }}
</view>
<view class="tn-padding-top-xs" style="min-height: 100rpx;">
<text class=" tn-text-sm tn-color-gray clamp-text-2">
{{ item.desc }}
</text>
</view>
<view class="tn-flex tn-flex-row-between tn-flex-col-between">
<view v-for="(label_item,label_index) in item.label" :key="label_index"
class="justify-content-item tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
<text class="tn-tag-content__item--prefix">#</text> {{ label_item }}
</view>
<view class="justify-content-item tn-color-gray tn-text-center tn-color-gray--disabled" style="padding-top: 5rpx;">
<text class="tn-icon-footprint tn-padding-right-xs"></text>
<text class="tn-padding-right">{{ item.collectionCount }}</text>
<text class="tn-icon-like-lack tn-padding-right-xs"></text>
<text class="">{{ item.likeCount }}</text>
</view>
</view>
</view>
</view>
</view>
</block>
</view>
<!-- 底部tabbar start-->
<view class="tabbar footerfixed">
<view class="action" @click="">
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-home.png'></image> -->
</view>
<view class="tn-color-gray">首页</view>
</view>
<view class="action" @click="">
<view class="bar-icon">
<!-- <view class="tn-icon-discover tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tnnew.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-flower.png'></image> -->
</view>
<view class="tn-color-black">圈子</view>
</view>
<!-- <view class="action bar-center">
<view class="bar-circle tn-shadow-blur">
<view class="tn-icon-camera-fill tn-color-white">
</view>
</view>
<view class="tn-color-gray">发布</view>
</view> -->
<view class="action bar-center" @click="">
<view class="nav-index-button">
<view class="nav-index-button__content">
<view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center">
<!-- <view class="tn-icon-logo-tuniao"></view> -->
<view class="bar-circle tn-shadow-blur">
<view class="tn-icon-add tn-color-white"></view>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-tiger.png'></image> -->
</view>
</view>
</view>
<view class="nav-index-button__meteor">
<view class="nav-index-button__meteor__wrapper">
<view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item"
:style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
<view class="nav-index-button__meteor__item--pic"></view>
</view>
</view>
</view>
</view>
<!-- <view class="tn-color-gray">发布</view> -->
</view>
<view class="action" @click="">
<view class="bar-icon">
<!-- <view class="tn-icon-image-text tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-china.png'></image> -->
</view>
<view class="tn-color-gray">优选</view>
</view>
<view class="action" @click="">
<view class="bar-icon">
<!-- <view class="tn-icon-my tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-money.png'></image> -->
</view>
<view class="tn-color-gray">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'TemplateCourse',
mixins: [template_page_mixin],
components: {
NavIndexButton
},
data() {
return {
current: 0,
scrollList: [{
name: '资讯'
},
{
name: '博客'
},
{
name: '学习',
count: ''
}
],
content: [{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'red',
label: ['小程序'],
title: '全新出发，新版本已上线，欢迎三连',
desc: '小程序前端源码，免费开源，欢迎白嫖嗷嗷，可以的话，插件市场三连支持一下',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 567
},
collectionCount: 543,
commentCount: 543,
likeCount: 206
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'cyan',
label: ['模型'],
title: '3D模型了解一下？',
desc: '一个拥有大量3D模型的网站',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 987
},
collectionCount: 567,
commentCount: 69,
likeCount: 65
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'blue',
label: ['UI设计'],
title: '为什么资讯不显示时间',
desc: '你确定你经常更新文章吗？',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 321
},
collectionCount: 654,
commentCount: 232,
likeCount: 543
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'green',
label: ['创意'],
title: '创意一点点',
desc: '创意灵感从这里开始',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 230
},
collectionCount: 987,
commentCount: 236,
likeCount: 342
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'orange',
label: ['UI设计'],
title: '语雀素材地址资源',
desc: '图鸟UI素材免费可商用',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 106
},
collectionCount: 765,
commentCount: 32,
likeCount: 91
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'purplered',
label: ['神器'],
title: '最强的视频转GIF工具',
desc: '神器推荐',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 232
},
collectionCount: 776,
commentCount: 48,
likeCount: 86
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'purple',
label: ['粒子'],
title: '小程序粒子效果',
desc: '酷炫的小程序粒子效果一览',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 456
},
collectionCount: 342,
commentCount: 42,
likeCount: 76
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'brown',
label: ['工具'],
title: '小程序任意页面生成二维码',
desc: '二维码生成器',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 129
},
collectionCount: 265,
commentCount: 22,
likeCount: 62
}
],
}
},
methods: {
// tab选项卡切换
tabChange(index) {
this.current = index
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 自定义导航栏内容 start */
.custom-nav {
height: 100%;
&__back {
margin: auto 5rpx;
font-size: 40rpx;
margin-right: 10rpx;
margin-left: 30rpx;
flex-basis: 5%;
}
&__search {
flex-basis: 60%;
width: 100%;
height: 100%;
&__box {
width: 100%;
height: 70%;
padding: 10rpx 0;
margin: 0 30rpx;
border-radius: 60rpx 60rpx 0 60rpx;
font-size: 24rpx;
}
&__icon {
padding-right: 10rpx;
margin-left: 20rpx;
font-size: 30rpx;
}
&__text {
color: #AAAAAA;
}
}
}
.logo-image {
width: 60rpx;
height: 60rpx;
position: relative;
margin-top: -15rpx;
}
.logo-pic {
background-size: cover;
background-repeat: no-repeat;
// background-attachment:fixed;
background-position: top;
border-radius: 50%;
}
/* 自定义导航栏内容 end */
/* 资讯主图 start*/
.image-article {
border-radius: 8rpx;
border: 1rpx solid #F8F7F8;
width: 200rpx;
height: 200rpx;
position: relative;
}
.image-pic {
background-size: cover;
background-repeat: no-repeat;
// background-attachment:fixed;
background-position: top;
border-radius: 10rpx;
}
.article-shadow {
border-radius: 15rpx;
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}
/* 文字截取*/
.clamp-text-1 {
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
.clamp-text-2 {
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
/* 标签内容 start*/
.tn-tag-content {
&__item {
display: inline-block;
line-height: 35rpx;
padding: 5rpx 25rpx;
&--prefix {
padding-right: 10rpx;
}
}
}
/* 标签内容 end*/
/* 底部tabbar start*/
.footerfixed {
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
background-color: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
}
.tabbar {
display: flex;
align-items: center;
min-height: 110rpx;
justify-content: space-between;
padding: 0;
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.tabbar .action {
font-size: 22rpx;
position: relative;
flex: 1;
text-align: center;
padding: 0;
display: block;
height: auto;
line-height: 1;
margin: 0;
overflow: initial;
}
.bar-center {
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.8rem);
}
}
.tabbar .action .bar-icon {
width: 100rpx;
position: relative;
display: block;
height: auto;
margin: 0 auto 10rpx;
text-align: center;
font-size: 42rpx;
// line-height: 50rpx;
}
.tabbar .action .bar-icon image {
width: 50rpx;
height: 50rpx;
display: inline-block;
}
.tabbar .action .bar-circle {
position: relative;
display: block;
margin: 0rpx auto 0rpx;
text-align: center;
font-size: 60rpx;
line-height: 100rpx;
background-color: #FBBF18;
width: 100rpx !important;
height: 100rpx !important;
overflow: hidden;
border-radius: 50%;
box-shadow: 0px 10px 30px rgba(70, 23, 129, 0.12),
0px -8px 40px rgba(255, 255, 255, 1),
inset 0px -10px 10px rgba(70, 23, 129, 0.05),
inset 0px 10px 20px rgba(255, 255, 255, 1);
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(251, 191, 24, 0.5);
}
.tabbar .action .bar-circle image {
width: 100rpx;
height: 100rpx;
display: inline-block;
margin: 0rpx auto 0rpx;
}
/* 流星+悬浮 */
.nav-index-button {
animation: suspension 3s ease-in-out infinite;
z-index: 999999;
&__content {
position: absolute;
width: 100rpx;
height: 100rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&--icon {
width: 100rpx;
height: 100rpx;
font-size: 60rpx;
border-radius: 50%;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
transform: scale(0.85);
&::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);
}
}
}
&__meteor {
position: absolute;
top: 50%;
left: 50%;
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
&__wrapper {
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
animation: spin 20s linear infinite;
}
&__item {
position: absolute;
width: 100rpx;
height: 100rpx;
border-radius: 1000rpx;
left: 0;
top: 0;
&--pic {
display: block;
width: 100%;
height: 100%;
background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc1.png) no-repeat center center;
background-size: 100% 100%;
animation: arc 4s linear infinite;
}
}
}
}
@keyframes suspension {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.6rem);
}
}
@keyframes spin {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-360deg);
}
}
@keyframes arc {
to {
transform: rotate(360deg);
}
}
</style>
templatePage/article/demo2/demo2.vue
+739
View File
@@ -0,0 +1,739 @@
<template>
<view class="tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar> -->
<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
<!-- 图标logo -->
<view class="custom-nav__back">
<view class="logo-pic tn-shadow-blur"
style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
<view class="logo-image">
<tn-badge backgroundColor="#E72F8C" :dot="true" :radius="16" :absolute="true" :translateCenter="false">
</tn-badge>
</view>
</view>
<!-- <view class="tn-icon-left"></view> -->
</view>
<!-- 搜索框 -->
<!-- <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
<view class="custom-nav__search__icon tn-icon-search"></view>
<view class="custom-nav__search__text tn-padding-left-xs">开启美好的一天</view>
</view>
</view> -->
<view class="tn-margin-top tn-margin-left">
<tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#000" bold="true"
:fontSize="36"></tn-tabs>
</view>
</view>
</tn-nav-bar>
<!-- 不建议写时间，因为写了时间，你就要经常更新文章了鸭-->
<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<block v-for="(item, index) in content" :key="index">
<view class="article-shadow tn-margin">
<view class="tn-flex">
<view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
<view class="tn-text-lg tn-text-bold clamp-text-2 tn-text-justify" style="min-height: 95rpx;">
<view v-for="(label_item,label_index) in item.label" :key="label_index" style="transform: translate(0,-5rpx);"
class="justify-content-item tn-tag-content__item tn-margin-right-xs tn-round tn-text-sm tn-text-bold" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
<text class="tn-tag-content__item--prefix">#</text> {{ label_item }}
</view>
<text class="">{{ item.title }}</text>
</view>
<view class="tn-padding-top-xs">
<text class=" tn-text-sm tn-color-gray clamp-text-1">
{{ item.desc }}
</text>
</view>
<view class="tn-flex tn-flex-row-between tn-flex-col-between">
<view class="justify-content-item tn-color-gray tn-text-center tn-color-gray--disabled" style="padding-top: 15rpx;">
<text class="tn-icon-footprint tn-padding-right-xs"></text>
<text class="tn-padding-right">{{ item.collectionCount }}</text>
<text class="tn-icon-like-lack tn-padding-right-xs"></text>
<text class="">{{ item.likeCount }}</text>
</view>
</view>
</view>
<view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.userAvatar + ')'">
<view class="image-article">
</view>
</view>
</view>
</view>
</block>
</view>
<!-- 底部tabbar start-->
<view class="tabbar footerfixed">
<view class="action" @click="">
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-home.png'></image> -->
</view>
<view class="tn-color-gray">首页</view>
</view>
<view class="action" @click="">
<view class="bar-icon">
<!-- <view class="tn-icon-discover tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tnnew.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-flower.png'></image> -->
</view>
<view class="tn-color-black">圈子</view>
</view>
<!-- <view class="action bar-center">
<view class="bar-circle tn-shadow-blur">
<view class="tn-icon-camera-fill tn-color-white">
</view>
</view>
<view class="tn-color-gray">发布</view>
</view> -->
<view class="action bar-center" @click="">
<view class="nav-index-button">
<view class="nav-index-button__content">
<view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center">
<!-- <view class="tn-icon-logo-tuniao"></view> -->
<view class="bar-circle tn-shadow-blur">
<view class="tn-icon-add tn-color-white"></view>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-tiger.png'></image> -->
</view>
</view>
</view>
<view class="nav-index-button__meteor">
<view class="nav-index-button__meteor__wrapper">
<view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item"
:style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
<view class="nav-index-button__meteor__item--pic"></view>
</view>
</view>
</view>
</view>
<!-- <view class="tn-color-gray">发布</view> -->
</view>
<view class="action" @click="">
<view class="bar-icon">
<!-- <view class="tn-icon-image-text tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-china.png'></image> -->
</view>
<view class="tn-color-gray">优选</view>
</view>
<view class="action" @click="">
<view class="bar-icon">
<!-- <view class="tn-icon-my tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-money.png'></image> -->
</view>
<view class="tn-color-gray">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'TemplateCourse',
mixins: [template_page_mixin],
components: {
NavIndexButton
},
data() {
return {
current: 0,
scrollList: [{
name: '资讯'
},
{
name: '博客'
},
{
name: '学习',
count: ''
}
],
content: [{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'red',
label: ['小程序'],
title: '小程序官网源码，免费开源欢迎白嫖嗷嗷',
desc: '2.2.0版本已上线，欢迎三连',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 567
},
collectionCount: 543,
commentCount: 543,
likeCount: 206
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'cyan',
label: ['模型'],
title: '一个拥有大量3D模型的网站',
desc: '3D模型了解一下？',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 987
},
collectionCount: 567,
commentCount: 69,
likeCount: 65
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'blue',
label: ['UI设计'],
title: '为什么资讯不显示时间？',
desc: '你确定你经常更新文章吗？',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 321
},
collectionCount: 654,
commentCount: 232,
likeCount: 543
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'green',
label: ['创意'],
title: '创意一点点',
desc: '创意灵感从这里开始',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 230
},
collectionCount: 987,
commentCount: 236,
likeCount: 342
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'orange',
label: ['UI设计'],
title: '图鸟UI素材免费可商用',
desc: '语雀素材地址资源',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 106
},
collectionCount: 765,
commentCount: 32,
likeCount: 91
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'purplered',
label: ['神器'],
title: '最强的视频转GIF工具',
desc: '神器推荐',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 232
},
collectionCount: 776,
commentCount: 48,
likeCount: 86
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'purple',
label: ['粒子'],
title: '酷炫的小程序粒子效果一览',
desc: '小程序粒子效果',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 456
},
collectionCount: 342,
commentCount: 42,
likeCount: 76
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'brown',
label: ['工具'],
title: '小程序任意页面生成二维码',
desc: '二维码生成器',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 129
},
collectionCount: 265,
commentCount: 22,
likeCount: 62
}
],
}
},
methods: {
// tab选项卡切换
tabChange(index) {
this.current = index
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 自定义导航栏内容 start */
.custom-nav {
height: 100%;
&__back {
margin: auto 5rpx;
font-size: 40rpx;
margin-right: 10rpx;
margin-left: 30rpx;
flex-basis: 5%;
}
&__search {
flex-basis: 60%;
width: 100%;
height: 100%;
&__box {
width: 100%;
height: 70%;
padding: 10rpx 0;
margin: 0 30rpx;
border-radius: 60rpx 60rpx 0 60rpx;
font-size: 24rpx;
}
&__icon {
padding-right: 10rpx;
margin-left: 20rpx;
font-size: 30rpx;
}
&__text {
color: #AAAAAA;
}
}
}
.logo-image {
width: 60rpx;
height: 60rpx;
position: relative;
margin-top: -15rpx;
}
.logo-pic {
background-size: cover;
background-repeat: no-repeat;
// background-attachment:fixed;
background-position: top;
border-radius: 50%;
}
/* 自定义导航栏内容 end */
/* 资讯主图 start*/
.image-article {
border-radius: 8rpx;
border: 1rpx solid #F8F7F8;
width: 250rpx;
height: 200rpx;
position: relative;
}
.image-pic {
background-size: cover;
background-repeat: no-repeat;
// background-attachment:fixed;
background-position: top;
border-radius: 10rpx;
}
.article-shadow {
border-radius: 15rpx;
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}
/* 文字截取*/
.clamp-text-1 {
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
.clamp-text-2 {
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
/* 标签内容 start*/
.tn-tag-content {
&__item {
display: inline-block;
line-height: 35rpx;
padding: 5rpx 25rpx;
&--prefix {
padding-right: 10rpx;
}
}
}
/* 标签内容 end*/
/* 底部tabbar start*/
.footerfixed {
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
background-color: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
}
.tabbar {
display: flex;
align-items: center;
min-height: 110rpx;
justify-content: space-between;
padding: 0;
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.tabbar .action {
font-size: 22rpx;
position: relative;
flex: 1;
text-align: center;
padding: 0;
display: block;
height: auto;
line-height: 1;
margin: 0;
overflow: initial;
}
.bar-center {
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.8rem);
}
}
.tabbar .action .bar-icon {
width: 100rpx;
position: relative;
display: block;
height: auto;
margin: 0 auto 10rpx;
text-align: center;
font-size: 42rpx;
// line-height: 50rpx;
}
.tabbar .action .bar-icon image {
width: 50rpx;
height: 50rpx;
display: inline-block;
}
.tabbar .action .bar-circle {
position: relative;
display: block;
margin: 0rpx auto 0rpx;
text-align: center;
font-size: 60rpx;
line-height: 100rpx;
background-color: #FBBF18;
width: 100rpx !important;
height: 100rpx !important;
overflow: hidden;
border-radius: 50%;
box-shadow: 0px 10px 30px rgba(70, 23, 129, 0.12),
0px -8px 40px rgba(255, 255, 255, 1),
inset 0px -10px 10px rgba(70, 23, 129, 0.05),
inset 0px 10px 20px rgba(255, 255, 255, 1);
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(251, 191, 24, 0.5);
}
.tabbar .action .bar-circle image {
width: 100rpx;
height: 100rpx;
display: inline-block;
margin: 0rpx auto 0rpx;
}
/* 流星+悬浮 */
.nav-index-button {
animation: suspension 3s ease-in-out infinite;
z-index: 999999;
&__content {
position: absolute;
width: 100rpx;
height: 100rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&--icon {
width: 100rpx;
height: 100rpx;
font-size: 60rpx;
border-radius: 50%;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
transform: scale(0.85);
&::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);
}
}
}
&__meteor {
position: absolute;
top: 50%;
left: 50%;
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
&__wrapper {
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
animation: spin 20s linear infinite;
}
&__item {
position: absolute;
width: 100rpx;
height: 100rpx;
border-radius: 1000rpx;
left: 0;
top: 0;
&--pic {
display: block;
width: 100%;
height: 100%;
background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc1.png) no-repeat center center;
background-size: 100% 100%;
animation: arc 4s linear infinite;
}
}
}
}
@keyframes suspension {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.6rem);
}
}
@keyframes spin {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-360deg);
}
}
@keyframes arc {
to {
transform: rotate(360deg);
}
}
</style>

Some files were not shown because too many files have changed in this diff Show More