mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-06-08 04:23:17 +08:00
Compare commits
49 Commits
v2.0.0
...
b44bb802ed
| Author | SHA1 | Date | |
|---|---|---|---|
 Aisen
|
b44bb802ed | ||
|
Aisen
|
9dd0ea76b5 | ||
 Aisen
|
125866d0e1 | ||
|
Aisen
|
0d09b34409 | ||
|
Aisen
|
6142c5c654 | ||
 wssam
|
c6bbf0a829 | ||
 Mandy
|
d0f4356c9f | ||
|
Mandy
|
bc85894ca4 | ||
|
zhengliming
|
f1b95729ea | ||
|
wssam
|
ba4690b114 | ||
|
zhengliming
|
42f04770c4 | ||
|
zhengliming
|
59ad09b521 | ||
|
wssam
|
3fbf31e52f | ||
|
zhengliming
|
0d8ff2e98d | ||
|
zhengliming
|
00c4852afb | ||
|
zhengliming
|
5f94e80b73 | ||
|
zhengliming
|
ca5e8c9429 | ||
|
zhengliming
|
557dbb313f | ||
|
zhengliming
|
374a74ac90 | ||
|
zhengliming
|
025555e92b | ||
|
zhengliming
|
c67be5adf8 | ||
|
zhengliming
|
344f681181 | ||
|
zhengliming
|
60c496e6ff | ||
|
zhengliming
|
733e71862a | ||
 Star
|
0564dcd88a | ||
|
Star
|
f42849931e | ||
 7small7
|
7dd2b43420 | ||
 kert
|
0c6e535554 | ||
|
kert
|
1d36ea303f | ||
 qixv-0506
|
712d73d2b0 | ||
 海了个螺
|
9578de3358 | ||
 nroyliu
|
5f6f1476d8 | ||
 Star
|
96b0366738 | ||
|
kert
|
ee57981a16 | ||
|
Mandy
|
926f58c36c | ||
|
Mandy
|
f119274cee | ||
 李涛hm
|
5f322d50f8 | ||
|
7small7
|
98258962b0 | ||
|
7small7
|
3341720936 | ||
|
7small7
|
705053f1ae | ||
|
7small7
|
0d9611721d | ||
|
7small7
|
10da0aa38b | ||
|
7small7
|
398b49621c | ||
|
7small7
|
8388fca392 | ||
|
7small7
|
7f4ae15600 | ||
|
7small7
|
b77cc16bec | ||
|
Mandy
|
0039266705 | ||
|
7small7
|
f710c14879 | ||
|
7small7
|
f5718ab30b |
+2
-1
@@ -1,3 +1,4 @@
|
|||||||
/unpackage/dist/*
|
/unpackage/dist/*
|
||||||
/node_modules/*
|
/node_modules/*
|
||||||
/.idea/*
|
/.idea/*
|
||||||
|
.hbuilderx
|
||||||
@@ -1,91 +1,91 @@
|
|||||||
<script>
|
<script>
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import store from './store/index.js'
|
import store from './store/index.js'
|
||||||
import updateCustomBarInfo from './tuniao-ui/libs/function/updateCustomBarInfo.js'
|
import updateCustomBarInfo from './tuniao-ui/libs/function/updateCustomBarInfo.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
onLaunch: function() {
|
onLaunch: function() {
|
||||||
uni.getSystemInfo({
|
uni.getSystemInfo({
|
||||||
success: function(e) {
|
success: function(e) {
|
||||||
// #ifndef H5
|
// #ifndef H5
|
||||||
// 获取手机系统版本
|
// 获取手机系统版本
|
||||||
const system = e.system.toLowerCase()
|
const system = e.system.toLowerCase()
|
||||||
const platform = e.platform.toLowerCase()
|
const platform = e.platform.toLowerCase()
|
||||||
// 判断是否为ios设备
|
// 判断是否为ios设备
|
||||||
if (platform.indexOf('ios') != -1 && (system.indexOf('ios') != -1 || system.indexOf('macos') != -1)) {
|
if (platform.indexOf('ios') != -1 && (system.indexOf('ios') != -1 || system.indexOf('macos') != -1)) {
|
||||||
Vue.prototype.SystemPlatform = 'apple'
|
Vue.prototype.SystemPlatform = 'apple'
|
||||||
} else if (platform.indexOf('android') != -1 && (system.indexOf('android') != -1)) {
|
} else if (platform.indexOf('android') != -1 && (system.indexOf('android') != -1)) {
|
||||||
Vue.prototype.SystemPlatform = 'android'
|
Vue.prototype.SystemPlatform = 'android'
|
||||||
} else {
|
} else {
|
||||||
Vue.prototype.SystemPlatform = 'devtools'
|
Vue.prototype.SystemPlatform = 'devtools'
|
||||||
}
|
}
|
||||||
// #endif
|
// #endif
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// 获取设备的状态栏信息和自定义顶栏信息
|
// 获取设备的状态栏信息和自定义顶栏信息
|
||||||
// store.dispatch('updateCustomBarInfo')
|
// store.dispatch('updateCustomBarInfo')
|
||||||
updateCustomBarInfo().then((res) => {
|
updateCustomBarInfo().then((res) => {
|
||||||
store.commit('$tStore', {
|
store.commit('$tStore', {
|
||||||
name: 'vuex_status_bar_height',
|
name: 'vuex_status_bar_height',
|
||||||
value: res.statusBarHeight
|
value: res.statusBarHeight
|
||||||
})
|
})
|
||||||
store.commit('$tStore', {
|
store.commit('$tStore', {
|
||||||
name: 'vuex_custom_bar_height',
|
name: 'vuex_custom_bar_height',
|
||||||
value: res.customBarHeight
|
value: res.customBarHeight
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
//更新检测
|
//更新检测
|
||||||
if (wx.canIUse('getUpdateManager')) {
|
if (wx.canIUse('getUpdateManager')) {
|
||||||
const updateManager = wx.getUpdateManager();
|
const updateManager = wx.getUpdateManager();
|
||||||
updateManager && updateManager.onCheckForUpdate((res) => {
|
updateManager && updateManager.onCheckForUpdate((res) => {
|
||||||
if (res.hasUpdate) {
|
if (res.hasUpdate) {
|
||||||
updateManager.onUpdateReady(() => {
|
updateManager.onUpdateReady(() => {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '更新提示',
|
title: '更新提示',
|
||||||
content: '新版本已经准备就绪，是否需要重新启动应用？',
|
content: '新版本已经准备就绪，是否需要重新启动应用？',
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.confirm) {
|
if (res.confirm) {
|
||||||
uni.clearStorageSync() // 更新完成后刷新storage的数据
|
uni.clearStorageSync() // 更新完成后刷新storage的数据
|
||||||
updateManager.applyUpdate()
|
updateManager.applyUpdate()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
updateManager.onUpdateFailed(() => {
|
updateManager.onUpdateFailed(() => {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '已有新版本上线',
|
title: '已有新版本上线',
|
||||||
content: '小程序自动更新失败，请删除该小程序后重新搜索打开哟~~~',
|
content: '小程序自动更新失败，请删除该小程序后重新搜索打开哟~~~',
|
||||||
showCancel: false
|
showCancel: false
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
//没有更新
|
//没有更新
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '提示',
|
title: '提示',
|
||||||
content: '当前微信版本过低，无法使用该功能，请更新到最新的微信后再重试。',
|
content: '当前微信版本过低，无法使用该功能，请更新到最新的微信后再重试。',
|
||||||
showCancel: false
|
showCancel: false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// #endif
|
// #endif
|
||||||
},
|
},
|
||||||
onShow: function() {
|
onShow: function() {
|
||||||
// console.log('App Show')
|
// console.log('App Show')
|
||||||
},
|
},
|
||||||
onHide: function() {
|
onHide: function() {
|
||||||
// console.log('App Hide')
|
// console.log('App Hide')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<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>
|
||||||
|
|||||||
@@ -1,155 +1,179 @@
|
|||||||
[](https://tnuiimage.tnkjapp.com/uniapp_market/8.jpg "图鸟UI")
|
[](https://resource.tuniaokj.com/images/uniapp_market/8.jpg "图鸟UI")
|
||||||
|
|
||||||
<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框架，提供丰富的组件进行快速开发，支持`微信小程序`、`APP`和`H5`，包含常用表单组件、信息展示组件等，并提供丰富的酷炫页面模板。
|
**`图鸟UI vue2`**，是基于uni-app进行开发的UI框架，提供丰富的组件进行快速开发，支持`微信小程序`、`APP`和`H5`，包含常用表单组件、信息展示组件等，并提供丰富的酷炫页面模板。
|
||||||
|
|
||||||
开源版本中所使用到的图片均做了`防盗链`，只能在调试中使用，不保证在生产环境中可以使用。
|
开源版本中所使用到的图片均做了`防盗链`，只能在调试中使用，不保证在生产环境中可以使用。
|
||||||
图片资源已上传到 [图鸟社区](https://www.yuque.com/tuniao/)。
|
图片资源已上传到 [图鸟社区](https://www.yuque.com/tuniao/)。
|
||||||
|
|
||||||
## 特点
|
## 图鸟UI特点
|
||||||
|
|
||||||
- 包含基础常用的布局元素，flex、grid、浮动
|
- 包含基础常用的布局元素，flex、grid、浮动
|
||||||
- 完整一体的配色体系，包含4种色深模式，同时包含4套渐变配色
|
- 完整一体的配色体系，包含4种色深模式，同时包含4套渐变配色
|
||||||
- 700+风格统一的图标icon，60+精选组件，让开发者可以快速进行开发
|
- 700+风格统一的图标icon，60+精选组件，让开发者可以快速进行开发
|
||||||
- 酷炫常用的页面模板，更有让你眼前一亮的界面效果
|
- 酷炫常用的页面模板，更有让你眼前一亮的界面效果
|
||||||
- 图片素材语雀便捷下载，图鸟生态共同成长
|
- 图片素材语雀便捷下载，图鸟生态共同成长
|
||||||
- 使用文档详尽说明，让你一文读懂图鸟UI
|
- 使用文档详尽说明，让你一文读懂图鸟UI
|
||||||
|
|
||||||
## 链接
|
## 官方链接
|
||||||
|
|
||||||
[图鸟UI](https://ext.dcloud.net.cn/publisher?id=356088)
|
[图鸟UI 开源项目](https://ext.dcloud.net.cn/publisher?id=356088)
|
||||||
|
|
||||||
[使用文档](https://vue2.tuniaokj.com/)
|
[使用文档 vue2](https://vue2.tuniaokj.com/)
|
||||||
|
|
||||||
## 快速上手
|
[图鸟ICON演示](https://tnicon.tuniaokj.com/)
|
||||||
|
|
||||||
#### 1.复制文件到项目的根目录
|
## 快速上手
|
||||||
|
|
||||||
- ##### 必要文件夹
|
#### 1.复制文件到项目的根目录
|
||||||
|
|
||||||
- 复制tuniao-ui文件夹
|
- ##### 必要文件夹
|
||||||
- 复制store文件夹
|
|
||||||
|
- 复制tuniao-ui文件夹
|
||||||
- ##### 如果使用了模板页面则需要复制以下文件夹
|
- 复制store文件夹
|
||||||
|
|
||||||
- 复制libs文件夹
|
- ##### 如果使用了模板页面则需要复制以下文件夹
|
||||||
- 复制static文件夹
|
|
||||||
|
- 复制libs文件夹
|
||||||
|
- 复制static文件夹
|
||||||
|
|
||||||
#### 2.引入TuniaoUI主JS库
|
|
||||||
|
|
||||||
在项目根目录中的`main.js`中，引入并使用TuniaoUI的JS库，注意这两行配置代码要放在import Vue之后。
|
#### 2.引入TuniaoUI主JS库
|
||||||
|
|
||||||
```javascript
|
在项目根目录中的`main.js`中，引入并使用TuniaoUI的JS库，注意这两行配置代码要放在import Vue之后。
|
||||||
// 引入全局TuniaoUI
|
|
||||||
import TuniaoUI from 'tuniao-ui'
|
```javascript
|
||||||
Vue.use(TuniaoUI)
|
// 引入全局TuniaoUI
|
||||||
```
|
import TuniaoUI from 'tuniao-ui'
|
||||||
|
Vue.use(TuniaoUI)
|
||||||
|
```
|
||||||
|
|
||||||
#### 3.引入TuniaoUI提供的vuex
|
|
||||||
|
|
||||||
在项目根目录的`main.js`中引入store
|
#### 3.引入TuniaoUI提供的vuex
|
||||||
|
|
||||||
```js
|
在项目根目录的`main.js`中引入store
|
||||||
// 引入store
|
|
||||||
import store from './store'
|
```js
|
||||||
...
|
// 引入store
|
||||||
const app = new Vue({
|
import store from './store'
|
||||||
store,
|
...
|
||||||
...App
|
const app = new Vue({
|
||||||
})
|
store,
|
||||||
```
|
...App
|
||||||
|
})
|
||||||
在项目根目录中的`main.js`中，引入并使用TuniaoUI的vuex，注意这两行配置代码要放在import Vue之后。
|
```
|
||||||
|
|
||||||
```js
|
在项目根目录中的`main.js`中，引入并使用TuniaoUI的vuex，注意这两行配置代码要放在import Vue之后。
|
||||||
// 引入TuniaoUI提供的vuex简写方法
|
|
||||||
let vuexStore = require('@/store/$t.mixin.js')
|
```js
|
||||||
Vue.mixin(vuexStore)
|
// 引入TuniaoUI提供的vuex简写方法
|
||||||
```
|
let vuexStore = require('@/store/$tn.mixin.js')
|
||||||
|
Vue.mixin(vuexStore)
|
||||||
|
```
|
||||||
|
|
||||||
#### 4.引入TuniaoUI的全局SCSS主题文件
|
|
||||||
|
|
||||||
在项目根目录的`uni.scss`中引入此文件。
|
#### 4.引入TuniaoUI的全局SCSS主题文件
|
||||||
|
|
||||||
```scss
|
在项目根目录的`uni.scss`中引入此文件。
|
||||||
@import 'tuniao-ui/theme.scss';
|
|
||||||
```
|
```scss
|
||||||
|
@import 'tuniao-ui/theme.scss';
|
||||||
|
```
|
||||||
|
|
||||||
#### 5.引入TuniaoUI基础样式和图标文件
|
|
||||||
|
|
||||||
::: danger 注意
|
#### 5.引入TuniaoUI基础样式和图标文件
|
||||||
在`App.vue`中`style标签`首行的位置引入，注意给style标签加入lang="scss"属性
|
|
||||||
:::
|
::: danger 注意
|
||||||
|
在`App.vue`中`style标签`首行的位置引入，注意给style标签加入lang="scss"属性
|
||||||
```scss
|
:::
|
||||||
<style lang="scss">
|
|
||||||
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
|
```scss
|
||||||
@import './tuniao-ui/index.scss';
|
<style lang="scss">
|
||||||
@import './tuniao-ui/iconfont.css';
|
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
|
||||||
</style>
|
@import './tuniao-ui/index.scss';
|
||||||
```
|
@import './tuniao-ui/iconfont.css';
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
#### 6.配置easycom组件模式
|
|
||||||
|
|
||||||
此配置需要在根目录的`page.json`中进行。
|
#### 6.配置easycom组件模式
|
||||||
|
|
||||||
::: tip 温馨提示
|
此配置需要在根目录的`pages.json`中进行。
|
||||||
|
|
||||||
1. uni-app为了调试性能的原因，修改`easycom`规则不会实时生效，配置完后，您需要重启HBuilderX或者重新编译项目才能正常使用TuniaoUI的功能。
|
::: tip 温馨提示
|
||||||
2. 请确保您的`pages.json`中只有一个`easycom`字段，否则请自行合并多个引入规则。
|
|
||||||
:::
|
1. uni-app为了调试性能的原因，修改`easycom`规则不会实时生效，配置完后，您需要重启HBuilderX或者重新编译项目才能正常使用TuniaoUI的功能。
|
||||||
|
2. 请确保您的`pages.json`中只有一个`easycom`字段，否则请自行合并多个引入规则。
|
||||||
```
|
:::
|
||||||
// pages.json
|
|
||||||
{
|
```
|
||||||
"easycom": {
|
// pages.json
|
||||||
"^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue"
|
{
|
||||||
},
|
"easycom": {
|
||||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
"^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue"
|
||||||
{
|
},
|
||||||
// ......
|
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||||
}
|
{
|
||||||
]
|
// ......
|
||||||
// ......
|
}
|
||||||
}
|
]
|
||||||
```
|
// ......
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
## 开源项目
|
|
||||||
|
|
||||||
[](https://tnuiimage.tnkjapp.com/uniapp_market/qr-code-new2.jpg "开源项目")
|
## 图鸟UI开源项目（图鸟UI、图鸟vue3、模板1234 已上传；模板5678、图表暂未上传）
|
||||||
|
|
||||||
## 联系作者
|
[](https://resource.tuniaokj.com/images/uniapp_market/qr-code-all1.jpg "开源项目")
|
||||||
|
|
||||||
微信 tnkewo
|
|
||||||
|
|
||||||
群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼
|
## 图鸟UI-vue3开源项目（[Github下载](https://github.com/tuniaoTech/tuniaoui-rc-vue3-uniapp)，[Dcloud插件市场下载](https://ext.dcloud.net.cn/plugin?id=13530)）
|
||||||
|
|
||||||
[](https://tnuiimage.tnkjapp.com/uniapp_market/tn_author_qrcode.jpg)
|
[](https://resource.tuniaokj.com/images/vue3/market/vue3-banner-min.jpg "开源项目")
|
||||||
|
|
||||||
## 版权信息
|
[](https://resource.tuniaokj.com/images/vue3/market/vue3-code-min.jpg)
|
||||||
|
|
||||||
`TuniaoUI开源版`遵循`Apache`协议，意味着您无需支付任何费用，也无需授权，即可将TuniaoUI开源版应用到您的产品中，但是需要保留TuniaoUI的信息。
|
#### **(2023年7月1日上线，图鸟UI vue3正式版，下载链接请看下方)**
|
||||||
|
|
||||||
|
[图鸟UI vue3 Dcloud下载地址-uni_modules](https://ext.dcloud.net.cn/plugin?id=13530)
|
||||||
|
|
||||||
|
[图鸟UI vue3 Github下载地址](https://github.com/tuniaoTech/tuniaoui-rc-vue3-uniapp)
|
||||||
|
|
||||||
|
[图鸟UI vue3 Github演示代码](https://github.com/tuniaoTech/tuniaoui-uniapp-v3-demo)
|
||||||
|
|
||||||
|
[图鸟vue3使用文档](https://vue3.tuniaokj.com/)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 联系作者
|
||||||
|
|
||||||
|
微信 tnkewo
|
||||||
|
|
||||||
|
微信群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼
|
||||||
|
|
||||||
|
[](https://resource.tuniaokj.com/images/uniapp_market/tn_author_qrcode.jpg)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 版权信息
|
||||||
|
|
||||||
|
`TuniaoUI开源版`遵循`Apache`协议，意味着您无需支付任何费用，也无需授权，即可将TuniaoUI开源版应用到您的产品中，但是需要保留TuniaoUI的信息。
|
||||||
|
|||||||
+145
-145
@@ -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://resource.tuniaokj.com/images/avatar/xiaomai4.jpg',
|
||||||
groupList: [
|
groupList: [
|
||||||
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
|
{src: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'},
|
||||||
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
|
{src: 'https://resource.tuniaokj.com/images/avatar/xiaomai2.jpg'},
|
||||||
{text: 'TN'},
|
{text: 'TN'},
|
||||||
{icon: 'logo-tuniao'},
|
{icon: 'logo-tuniao'},
|
||||||
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
|
{src: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'},
|
||||||
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
|
{src: 'https://resource.tuniaokj.com/images/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>
|
||||||
|
|||||||
+104
-104
@@ -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>
|
||||||
|
|||||||
+140
-140
@@ -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>
|
||||||
|
|||||||
+110
-101
@@ -1,109 +1,118 @@
|
|||||||
<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>
|
<demo-title title="防抖节流(默认间隔200ms,这里用1s)">
|
||||||
|
<tn-button width="100%" height="100rpx" margin="10rpx 0" @click="say('点击了防抖')" :blockTime="1000" scene="debounce">防抖模式</tn-button>
|
||||||
</view>
|
<tn-button width="100%" height="100rpx" margin="10rpx 0" @click="say('点击了节流')" :blockTime="1000" scene="throttle">节流模式</tn-button>
|
||||||
|
</demo-title>
|
||||||
</view>
|
|
||||||
|
<view class="tn-padding-bottom-lg"></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: {
|
||||||
}
|
say(msg){
|
||||||
|
this.$tn.message.toast(msg)
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</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>
|
||||||
|
|||||||
+759
-759
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||||
|
|||||||
@@ -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="[$tn.color.getRandomCoolBgClass(index)]">
|
<view class="icon__item--icon tn-cool-color-icon" :class="[$tn.color.getRandomCoolBgClass(index)]">
|
||||||
<view class="tn-margin-top-sm" :class="['tn-icon-' + item]"></view>
|
<view 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://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+230
-230
@@ -1,231 +1,231 @@
|
|||||||
<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'}">
|
||||||
|
|
||||||
<view class="search-fixed">
|
<view class="search-fixed">
|
||||||
<view class="search-content">
|
<view class="search-content">
|
||||||
<input class="search-content__input" placeholder-class="search-content__input-placeholder tn-color-blue"
|
<input class="search-content__input" placeholder-class="search-content__input-placeholder tn-color-blue"
|
||||||
placeholder="搜索 中文名/英文名" @input="saerchInput" />
|
placeholder="搜索 中文名/英文名" @input="saerchInput" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
<view class="" :style="{marginTop: vuex_custom_bar_height + 'px'}">
|
<view class="" :style="{marginTop: vuex_custom_bar_height + 'px'}">
|
||||||
|
|
||||||
<block v-for="(item, index) in resultIconList" :key="index">
|
<block v-for="(item, index) in resultIconList" :key="index">
|
||||||
|
|
||||||
<!-- 分类标题-->
|
<!-- 分类标题-->
|
||||||
<view class="tn-text-center tn-text-xl tn-text-bold tn-margin-lg">
|
<view class="tn-text-center tn-text-xl tn-text-bold tn-margin-lg">
|
||||||
<text class="tn-icon-font"></text>
|
<text class="tn-icon-font"></text>
|
||||||
<text class="tn-padding-left-sm tn-padding-right-sm">{{ item.title }}</text>
|
<text class="tn-padding-left-sm tn-padding-right-sm">{{ item.title }}</text>
|
||||||
<text class="tn-icon-font"></text>
|
<text class="tn-icon-font"></text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<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">
|
||||||
<view v-for="(icons_item, icons_index) in item.icons" :key="icons_index"
|
<view v-for="(icons_item, icons_index) in item.icons" :key="icons_index"
|
||||||
class="icon__item tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center icon-shadow"
|
class="icon__item tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center icon-shadow"
|
||||||
:class="[{'icon__item--active': icons_index === currentIconIndex}]"
|
:class="[{'icon__item--active': icons_index === currentIconIndex}]"
|
||||||
@click="clickIcon(icons_index, icons_item.name, icons_item.icon)">
|
@click="clickIcon(icons_index, icons_item.name, icons_item.icon)">
|
||||||
<view class="icon__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
<view class="icon__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||||
<view :class="[`tn-icon-${icons_item.icon}`]"></view>
|
<view :class="[`tn-icon-${icons_item.icon}`]"></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="icon__item--title tn-text-ellipsis tn-text-df tn-color-grey">{{ icons_item.icon }}</view>
|
<view class="icon__item--title tn-text-ellipsis tn-text-df tn-color-grey">{{ icons_item.icon }}</view>
|
||||||
<!-- <view class="icon__item--title tn-text-ellipsis tn-text-xs tn-color-grey">{{ icons_item.name }}</view> -->
|
<!-- <view class="icon__item--title tn-text-ellipsis tn-text-xs tn-color-grey">{{ icons_item.name }}</view> -->
|
||||||
</view>
|
</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>
|
<view>
|
||||||
icon目前700+，支持
|
icon目前700+，支持
|
||||||
<text class="tn-color-orange tn-text-lg tn-padding-xs">中文、英文</text>
|
<text class="tn-color-orange tn-text-lg tn-padding-xs">中文、英文</text>
|
||||||
搜索
|
搜索
|
||||||
</view>
|
</view>
|
||||||
<button class=" tn-button--clear-style" open-type="feedback">
|
<button class=" tn-button--clear-style" open-type="feedback">
|
||||||
<view class="tn-margin tn-text-center">
|
<view class="tn-margin tn-text-center">
|
||||||
<text>里面缺少你想要的吗？UI期待你的需求</text>
|
<text>里面缺少你想要的吗？UI期待你的需求</text>
|
||||||
<text class="tn-color-blue">留言</text>
|
<text class="tn-color-blue">留言</text>
|
||||||
</view>
|
</view>
|
||||||
</button>
|
</button>
|
||||||
</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() {
|
||||||
//filter会改变原数组，故使用深拷贝
|
//filter会改变原数组，故使用深拷贝
|
||||||
var newArr = JSON.parse(JSON.stringify(iconData.data))
|
var newArr = JSON.parse(JSON.stringify(iconData.data))
|
||||||
if (!this.searchValue) return iconData.data
|
if (!this.searchValue) return iconData.data
|
||||||
return newArr.filter((item1) => {
|
return newArr.filter((item1) => {
|
||||||
item1.icons = item1.icons.filter((item2) => {
|
item1.icons = item1.icons.filter((item2) => {
|
||||||
if (item2.name.includes(this.searchValue) || item2.icon.includes(this.searchValue)) {
|
if (item2.name.includes(this.searchValue) || item2.icon.includes(this.searchValue)) {
|
||||||
return item2
|
return item2
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
if (item1.icons.length > 0) {
|
if (item1.icons.length > 0) {
|
||||||
return item1
|
return item1
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// input输入的内容
|
// input输入的内容
|
||||||
saerchInput(e) {
|
saerchInput(e) {
|
||||||
//重新设置为-1，避免选中之前选中的图标
|
//重新设置为-1，避免选中之前选中的图标
|
||||||
this.currentIconIndex=-1;
|
this.currentIconIndex=-1;
|
||||||
this.searchValue = e.target.value;
|
this.searchValue = e.target.value;
|
||||||
this.resultIconList
|
this.resultIconList
|
||||||
},
|
},
|
||||||
// 点击图标
|
// 点击图标
|
||||||
clickIcon(index, name ,icon) {
|
clickIcon(index, name ,icon) {
|
||||||
this.currentIconIndex = index
|
this.currentIconIndex = index
|
||||||
// this.$tn.message.toast(name, false, null, 'none', 5000)
|
// this.$tn.message.toast(name, false, null, 'none', 5000)
|
||||||
//这里点击后直接复制图标名称。
|
//这里点击后直接复制图标名称。
|
||||||
uni.setClipboardData({
|
uni.setClipboardData({
|
||||||
data: icon,
|
data: icon,
|
||||||
showToast: false,
|
showToast: false,
|
||||||
success: () => {
|
success: () => {
|
||||||
console.log('success'); //复制成功
|
console.log('success'); //复制成功
|
||||||
this.$tn.message.toast('已复制：' + icon, false, null, 'none', 5000)
|
this.$tn.message.toast('已复制：' + icon, false, null, 'none', 5000)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// const save = function (e) {
|
// const save = function (e) {
|
||||||
// e.clipboardData.setData('text/plain', name)
|
// e.clipboardData.setData('text/plain', name)
|
||||||
// e.preventDefault() // 阻止默认行为
|
// e.preventDefault() // 阻止默认行为
|
||||||
// }
|
// }
|
||||||
// const once = {
|
// const once = {
|
||||||
// once: true
|
// once: true
|
||||||
// }
|
// }
|
||||||
// document.addEventListener('copy', save, once) // 添加一个copy事件,当触发时执行一次,执行完删除
|
// document.addEventListener('copy', save, once) // 添加一个copy事件,当触发时执行一次,执行完删除
|
||||||
// document.execCommand('copy') // 执行copy方法
|
// document.execCommand('copy') // 执行copy方法
|
||||||
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.search-fixed {
|
.search-fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transition: all 0.25s ease-out;
|
transition: all 0.25s ease-out;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 搜索框 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://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&--title {
|
&--title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 图标容器 end */
|
/* 图标容器 end */
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
+78
-78
@@ -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>
|
||||||
|
|||||||
+140
-140
@@ -1,141 +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">
|
||||||
<view class="origin-demo__tag">
|
<view class="origin-demo__tag">
|
||||||
<tn-tag backgroundColor="#01BEFF" fontColor="#FFFFFF" width="auto" height="30rpx" shape="circle">99+</tn-tag>
|
<tn-tag backgroundColor="#01BEFF" fontColor="#FFFFFF" width="auto" height="30rpx" shape="circle">99+</tn-tag>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- #ifdef H5 -->
|
<!-- #ifdef H5 -->
|
||||||
<view class="capsule">
|
<view class="capsule">
|
||||||
<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="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false">
|
||||||
<text class="tn-icon-add"></text>
|
<text class="tn-icon-add"></text>
|
||||||
</tn-tag>
|
</tn-tag>
|
||||||
<tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
|
<tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
|
||||||
2
|
2
|
||||||
</tn-tag>
|
</tn-tag>
|
||||||
</view>
|
</view>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
<!-- #ifdef MP-WEIXIN -->
|
<!-- #ifdef MP-WEIXIN -->
|
||||||
<view class="capsule">
|
<view class="capsule">
|
||||||
<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="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false">
|
||||||
<text class="tn-icon-add"></text>
|
<text class="tn-icon-add"></text>
|
||||||
</tn-tag>
|
</tn-tag>
|
||||||
<tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
|
<tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
|
||||||
2
|
2
|
||||||
</tn-tag>
|
</tn-tag>
|
||||||
</view>
|
</view>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
|
|
||||||
<tn-tag :plain="true" backgroundColor="#01BEFF" width="auto" margin="0px 30rpx">
|
<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 class="tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-center">
|
||||||
<view>带关闭按钮</view>
|
<view>带关闭按钮</view>
|
||||||
<view class="tn-icon-close tn-margin-left-xs"></view>
|
<view class="tn-icon-close tn-margin-left-xs"></view>
|
||||||
</view>
|
</view>
|
||||||
</tn-tag>
|
</tn-tag>
|
||||||
</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: 'basicTag',
|
name: 'basicTag',
|
||||||
components: {demoTitle},
|
components: {demoTitle},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.basic-tag {
|
.basic-tag {
|
||||||
background-color: $tn-bg-gray-color;
|
background-color: $tn-bg-gray-color;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
.origin-demo {
|
.origin-demo {
|
||||||
width: 180rpx;
|
width: 180rpx;
|
||||||
height: 180rpx;
|
height: 180rpx;
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
margin: 20rpx;
|
margin: 20rpx;
|
||||||
margin-right: 70rpx;
|
margin-right: 70rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&__tag {
|
&__tag {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
transform: translate(50%, -50%);
|
transform: translate(50%, -50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+253
-253
@@ -1,261 +1,261 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="basic-test">
|
<view class="basic-test">
|
||||||
<swiper class="swiper" :circular="true" :current="currentSwiperIndex" previous-margin="260rpx" next-margin="260rpx" @change="swiperChange">
|
<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)]">
|
<swiper-item v-for="(item, index) in swiperList" :key="index" class="swiper__item" :class="[swiperItemClass(index)]">
|
||||||
<view class="swiper__item__content" :class="[swiperContentClass(index)]">
|
<view class="swiper__item__content" :class="[swiperContentClass(index)]">
|
||||||
<image :src="item" mode="scaleToFill"></image>
|
<image :src="item" mode="scaleToFill"></image>
|
||||||
</view>
|
</view>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
|
|
||||||
<swiper class="phone-swiper" :circular="true"
|
<swiper class="phone-swiper" :circular="true"
|
||||||
:current="phoneCurrentSwiperIndex" previous-margin="190rpx" next-margin="190rpx" @change="phoneSwiperChange">
|
:current="phoneCurrentSwiperIndex" previous-margin="190rpx" next-margin="190rpx" @change="phoneSwiperChange">
|
||||||
<swiper-item v-for="(item,index) in phoneSwiperList" :key="index" class="phone-swiper__item">
|
<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="tnphone-black-min phone-swiper__item__content wow fadeInLeft2" :class="[phoneSwiperContentClass(index)]">
|
||||||
<view class="skin wow fadeInRight2">
|
<view class="skin wow fadeInRight2">
|
||||||
<view class="screen wow fadeInUp2">
|
<view class="screen wow fadeInUp2">
|
||||||
<view class="peak wow">
|
<view class="peak wow">
|
||||||
<view class="sound"></view>
|
<view class="sound"></view>
|
||||||
<view class="lens"></view>
|
<view class="lens"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="demo-image">
|
<view class="demo-image">
|
||||||
<image :src="item.url" mode="aspectFill"></image>
|
<image :src="item.url" mode="aspectFill"></image>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'TestPage',
|
name: 'TestPage',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
swiperList: [
|
swiperList: [
|
||||||
'https://tnuiimage.tnkjapp.com/swiper/spring.jpg',
|
'https://resource.tuniaokj.com/images/swiper/spring.jpg',
|
||||||
'https://tnuiimage.tnkjapp.com/swiper/summer.jpg',
|
'https://resource.tuniaokj.com/images/swiper/summer.jpg',
|
||||||
'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg',
|
'https://resource.tuniaokj.com/images/swiper/autumn.jpg',
|
||||||
'https://tnuiimage.tnkjapp.com/swiper/winter.jpg',
|
'https://resource.tuniaokj.com/images/swiper/winter.jpg',
|
||||||
'https://tnuiimage.tnkjapp.com/swiper/winter.jpg'
|
'https://resource.tuniaokj.com/images/swiper/winter.jpg'
|
||||||
],
|
],
|
||||||
phoneSwiperList: [{
|
phoneSwiperList: [{
|
||||||
id: 0,
|
id: 0,
|
||||||
type: 'image',
|
type: 'image',
|
||||||
name: '总有你想不到的创意',
|
name: '总有你想不到的创意',
|
||||||
text: '海量分享',
|
text: '海量分享',
|
||||||
url: 'https://tnuiimage.tnkjapp.com/swiper/test.jpg',
|
url: 'https://resource.tuniaokj.com/images/swiper/test.jpg',
|
||||||
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d1.png'
|
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
|
||||||
}, {
|
}, {
|
||||||
id: 1,
|
id: 1,
|
||||||
type: 'image',
|
type: 'image',
|
||||||
name: '寻找一起成长的小伙伴',
|
name: '寻找一起成长的小伙伴',
|
||||||
text: '愉快玩耍',
|
text: '愉快玩耍',
|
||||||
url: 'https://tnuiimage.tnkjapp.com/swiper/banner-animate.png',
|
url: 'https://resource.tuniaokj.com/images/swiper/banner-animate.png',
|
||||||
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d4.png'
|
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d4.png'
|
||||||
}, {
|
}, {
|
||||||
id: 2,
|
id: 2,
|
||||||
type: 'image',
|
type: 'image',
|
||||||
name: '更多彩蛋等你探索',
|
name: '更多彩蛋等你探索',
|
||||||
text: '酷炫多彩',
|
text: '酷炫多彩',
|
||||||
url: 'https://tnuiimage.tnkjapp.com/swiper/test.jpg',
|
url: 'https://resource.tuniaokj.com/images/swiper/test.jpg',
|
||||||
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d5.png'
|
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d5.png'
|
||||||
}, {
|
}, {
|
||||||
id: 3,
|
id: 3,
|
||||||
type: 'image',
|
type: 'image',
|
||||||
name: '更多彩蛋等你探索',
|
name: '更多彩蛋等你探索',
|
||||||
text: '酷炫多彩',
|
text: '酷炫多彩',
|
||||||
url: 'https://tnuiimage.tnkjapp.com/swiper/banner-animate.png',
|
url: 'https://resource.tuniaokj.com/images/swiper/banner-animate.png',
|
||||||
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d5.png'
|
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d5.png'
|
||||||
}],
|
}],
|
||||||
currentSwiperIndex: 0,
|
currentSwiperIndex: 0,
|
||||||
phoneCurrentSwiperIndex: 0
|
phoneCurrentSwiperIndex: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
// 计算当前对应轮播前后的item对应的类
|
// 计算当前对应轮播前后的item对应的类
|
||||||
swiperItemClass() {
|
swiperItemClass() {
|
||||||
return (index) => {
|
return (index) => {
|
||||||
if ((this.currentSwiperIndex === 0 && index === this.swiperList.length - 1) || (this.currentSwiperIndex - 1 === index)) {
|
if ((this.currentSwiperIndex === 0 && index === this.swiperList.length - 1) || (this.currentSwiperIndex - 1 === index)) {
|
||||||
return 'swiper__item--prev'
|
return 'swiper__item--prev'
|
||||||
}
|
}
|
||||||
if ((this.currentSwiperIndex === this.swiperList.length - 1 && index === 0) || (this.currentSwiperIndex + 1 === index)) {
|
if ((this.currentSwiperIndex === this.swiperList.length - 1 && index === 0) || (this.currentSwiperIndex + 1 === index)) {
|
||||||
return 'swiper__item--next'
|
return 'swiper__item--next'
|
||||||
}
|
}
|
||||||
if (this.currentSwiperIndex === index) {
|
if (this.currentSwiperIndex === index) {
|
||||||
return 'swiper__item--current'
|
return 'swiper__item--current'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 计算轮播内容对应的类
|
// 计算轮播内容对应的类
|
||||||
swiperContentClass() {
|
swiperContentClass() {
|
||||||
return (index) => {
|
return (index) => {
|
||||||
if (this.currentSwiperIndex === index) {
|
if (this.currentSwiperIndex === index) {
|
||||||
return 'swiper__item__content--current'
|
return 'swiper__item__content--current'
|
||||||
}
|
}
|
||||||
if ((this.currentSwiperIndex === 0 && index === this.swiperList.length - 1) || (this.currentSwiperIndex - 1 === index)) {
|
if ((this.currentSwiperIndex === 0 && index === this.swiperList.length - 1) || (this.currentSwiperIndex - 1 === index)) {
|
||||||
return 'swiper__item__content--prev'
|
return 'swiper__item__content--prev'
|
||||||
}
|
}
|
||||||
if ((this.currentSwiperIndex === this.swiperList.length - 1 && index === 0) || (this.currentSwiperIndex + 1 === index)) {
|
if ((this.currentSwiperIndex === this.swiperList.length - 1 && index === 0) || (this.currentSwiperIndex + 1 === index)) {
|
||||||
return 'swiper__item__content--next'
|
return 'swiper__item__content--next'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 计算轮播内容对应的类
|
// 计算轮播内容对应的类
|
||||||
phoneSwiperContentClass() {
|
phoneSwiperContentClass() {
|
||||||
return (index) => {
|
return (index) => {
|
||||||
if (this.phoneCurrentSwiperIndex === index) {
|
if (this.phoneCurrentSwiperIndex === index) {
|
||||||
return 'phone-swiper__item__content--current'
|
return 'phone-swiper__item__content--current'
|
||||||
}
|
}
|
||||||
if ((this.phoneCurrentSwiperIndex === 0 && index === this.phoneSwiperList.length - 1) || (this.phoneCurrentSwiperIndex - 1 === index)) {
|
if ((this.phoneCurrentSwiperIndex === 0 && index === this.phoneSwiperList.length - 1) || (this.phoneCurrentSwiperIndex - 1 === index)) {
|
||||||
return 'phone-swiper__item__content--prev'
|
return 'phone-swiper__item__content--prev'
|
||||||
}
|
}
|
||||||
if ((this.phoneCurrentSwiperIndex === this.phoneSwiperList.length - 1 && index === 0) || (this.phoneCurrentSwiperIndex + 1 === index)) {
|
if ((this.phoneCurrentSwiperIndex === this.phoneSwiperList.length - 1 && index === 0) || (this.phoneCurrentSwiperIndex + 1 === index)) {
|
||||||
return 'phone-swiper__item__content--next'
|
return 'phone-swiper__item__content--next'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onReady() {
|
onReady() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 轮播图切换
|
// 轮播图切换
|
||||||
swiperChange(e) {
|
swiperChange(e) {
|
||||||
// console.log(e.detail.current);
|
// console.log(e.detail.current);
|
||||||
this.currentSwiperIndex = e.detail.current
|
this.currentSwiperIndex = e.detail.current
|
||||||
},
|
},
|
||||||
phoneSwiperChange(e) {
|
phoneSwiperChange(e) {
|
||||||
this.phoneCurrentSwiperIndex = e.detail.current
|
this.phoneCurrentSwiperIndex = e.detail.current
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.basic-test {
|
.basic-test {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper {
|
.swiper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 400rpx;
|
height: 400rpx;
|
||||||
|
|
||||||
/deep/ .uni-swiper-slides {
|
/deep/ .uni-swiper-slides {
|
||||||
inset: 0 260rpx;
|
inset: 0 260rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
|
|
||||||
&--prev {
|
&--prev {
|
||||||
left: -10rpx;
|
left: -10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--next {
|
&--next {
|
||||||
left: 10rpx;
|
left: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--current {
|
&--current {
|
||||||
left: 0px;
|
left: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
border-radius: 30rpx;
|
border-radius: 30rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: transform 0.25s ease;
|
transition: transform 0.25s ease;
|
||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
|
|
||||||
&--prev {
|
&--prev {
|
||||||
transform: scale(0.8) perspective(200rpx) rotateY(10deg);
|
transform: scale(0.8) perspective(200rpx) rotateY(10deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&--next {
|
&--next {
|
||||||
transform: scale(0.8) perspective(200rpx) rotateY(-10deg);
|
transform: scale(0.8) perspective(200rpx) rotateY(-10deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&--current {
|
&--current {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
image {
|
image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.phone-swiper {
|
.phone-swiper {
|
||||||
margin-top: 180rpx;
|
margin-top: 180rpx;
|
||||||
height: 900rpx;
|
height: 900rpx;
|
||||||
|
|
||||||
/deep/ .uni-swiper-slides {
|
/deep/ .uni-swiper-slides {
|
||||||
inset: 0 190rpx;
|
inset: 0 190rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
transition: transform 0.25s ease;
|
transition: transform 0.25s ease;
|
||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
|
|
||||||
&--prev {
|
&--prev {
|
||||||
transform: scale(0.8) perspective(200rpx) rotateY(10deg);
|
transform: scale(0.8) perspective(200rpx) rotateY(10deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&--next {
|
&--next {
|
||||||
transform: scale(0.8) perspective(200rpx) rotateY(-10deg);
|
transform: scale(0.8) perspective(200rpx) rotateY(-10deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&--current {
|
&--current {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.demo-image {
|
.demo-image {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
image {
|
image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 730rpx;
|
height: 730rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* tnphone-black-min 细边框 start */
|
/* tnphone-black-min 细边框 start */
|
||||||
.tnphone-black-min {width: 380rpx; height: 760rpx; border-radius: 40rpx; background: #C6D1D8; padding: 7rpx; display: table; color: #333;
|
.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}
|
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 .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 .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 .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 .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;
|
.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}
|
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 .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 .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,.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-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 .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-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-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-chevron-left {float: left; margin-top: 4rpx}
|
||||||
.tnphone-black-min .fa-cog {float: right; 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 .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 .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 .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 .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
|
||||||
/* tnphone-black-min 细边框 end */
|
/* tnphone-black-min 细边框 end */
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+105
-105
@@ -1,105 +1,105 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="basic-utils__color tn-safe-area-inset-bottom">
|
<view class="basic-utils__color tn-safe-area-inset-bottom">
|
||||||
|
|
||||||
<!-- 顶部自定义导航 -->
|
<!-- 顶部自定义导航 -->
|
||||||
<tn-nav-bar fixed>Color工具</tn-nav-bar>
|
<tn-nav-bar fixed>Color工具</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-list-view backgroundColor="tn-bg-white">
|
<tn-list-view backgroundColor="tn-bg-white">
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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="bg-color-item" :class="randomBgColorClass">背景颜色</view>
|
<view class="bg-color-item" :class="randomBgColorClass">背景颜色</view>
|
||||||
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomBgColor">获取</tn-button></view>
|
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomBgColor">获取</tn-button></view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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="bg-color-item" :class="randomColorClass">文字颜色</view>
|
<view class="bg-color-item" :class="randomColorClass">文字颜色</view>
|
||||||
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomColor">获取</tn-button></view>
|
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomColor">获取</tn-button></view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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="bg-color-item" :class="randomCoolBgColorClass">酷炫背景颜色</view>
|
<view class="bg-color-item" :class="randomCoolBgColorClass">酷炫背景颜色</view>
|
||||||
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomCoolColor">获取</tn-button></view>
|
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomCoolColor">获取</tn-button></view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
</tn-list-view>
|
</tn-list-view>
|
||||||
</demo-title>
|
</demo-title>
|
||||||
|
|
||||||
<demo-title title="hex与rgb互转">
|
<demo-title title="hex与rgb互转">
|
||||||
<view class="tn-bg-white">
|
<view class="tn-bg-white">
|
||||||
<tn-form-item>
|
<tn-form-item>
|
||||||
<view class="tn-margin-left">
|
<view class="tn-margin-left">
|
||||||
<tn-input v-model="hexRGBValue"></tn-input>
|
<tn-input v-model="hexRGBValue"></tn-input>
|
||||||
</view>
|
</view>
|
||||||
<template slot="right">
|
<template slot="right">
|
||||||
<view class="tn-margin-right-sm">
|
<view class="tn-margin-right-sm">
|
||||||
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="convertToRGBOrHex">{{ rgbFlag ? '转换为hex' : '转换为rgb' }}</tn-button>
|
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="convertToRGBOrHex">{{ rgbFlag ? '转换为hex' : '转换为rgb' }}</tn-button>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</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>
|
||||||
|
|
||||||
</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: 'basicUtilsColor',
|
name: 'basicUtilsColor',
|
||||||
components: {demoTitle},
|
components: {demoTitle},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
randomBgColorClass: '',
|
randomBgColorClass: '',
|
||||||
randomColorClass: '',
|
randomColorClass: '',
|
||||||
randomCoolBgColorClass: '',
|
randomCoolBgColorClass: '',
|
||||||
hexRGBValue: '#01BEFF',
|
hexRGBValue: '#01BEFF',
|
||||||
rgbFlag: false
|
rgbFlag: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 获取随机背景颜色
|
// 获取随机背景颜色
|
||||||
getRandomBgColor() {
|
getRandomBgColor() {
|
||||||
this.randomBgColorClass = this.$tn.color.getRandomColorClass()
|
this.randomBgColorClass = this.$tn.color.getRandomColorClass()
|
||||||
},
|
},
|
||||||
// 获取随机颜色
|
// 获取随机颜色
|
||||||
getRandomColor() {
|
getRandomColor() {
|
||||||
this.randomColorClass = this.$tn.color.getRandomColorClass('color')
|
this.randomColorClass = this.$tn.color.getRandomColorClass('color')
|
||||||
},
|
},
|
||||||
// 获取随机酷炫背景颜色
|
// 获取随机酷炫背景颜色
|
||||||
getRandomCoolColor() {
|
getRandomCoolColor() {
|
||||||
this.randomCoolBgColorClass = this.$tn.color.getRandomCoolBgClass()
|
this.randomCoolBgColorClass = this.$tn.color.getRandomCoolBgClass()
|
||||||
},
|
},
|
||||||
// 将hex与rgb互转
|
// 将hex与rgb互转
|
||||||
convertToRGBOrHex() {
|
convertToRGBOrHex() {
|
||||||
if (this.rgbFlag) {
|
if (this.rgbFlag) {
|
||||||
this.hexRGBValue = this.$tn.color.rgbToHex(this.hexRGBValue)
|
this.hexRGBValue = this.$tn.color.rgbToHex(this.hexRGBValue)
|
||||||
} else {
|
} else {
|
||||||
this.hexRGBValue = this.$tn.color.hexToRGB(this.hexRGBValue)
|
this.hexRGBValue = this.$tn.color.hexToRGB(this.hexRGBValue)
|
||||||
}
|
}
|
||||||
this.rgbFlag = !this.rgbFlag
|
this.rgbFlag = !this.rgbFlag
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.basic-utils__color {
|
.basic-utils__color {
|
||||||
background-color: $tn-bg-gray-color;
|
background-color: $tn-bg-gray-color;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
||||||
.bg-color-item {
|
.bg-color-item {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: auto;
|
width: auto;
|
||||||
padding: 10rpx 20rpx;
|
padding: 10rpx 20rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+176
-176
@@ -1,176 +1,176 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="basic-utils__message tn-safe-area-inset-bottom">
|
<view class="basic-utils__message tn-safe-area-inset-bottom">
|
||||||
|
|
||||||
<!-- 顶部自定义导航 -->
|
<!-- 顶部自定义导航 -->
|
||||||
<tn-nav-bar fixed>Message工具</tn-nav-bar>
|
<tn-nav-bar fixed>Message工具</tn-nav-bar>
|
||||||
|
|
||||||
<!-- 页面内容 -->
|
<!-- 页面内容 -->
|
||||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||||
|
|
||||||
<demo-title title="uni内置toast框">
|
<demo-title title="uni内置toast框">
|
||||||
<tn-list-view backgroundColor="tn-bg-white">
|
<tn-list-view backgroundColor="tn-bg-white">
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>默认toast框</view>
|
<view>默认toast框</view>
|
||||||
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_1">弹出</tn-button></view>
|
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_1">弹出</tn-button></view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>带图标 toast框</view>
|
<view>带图标 toast框</view>
|
||||||
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_2">弹出</tn-button></view>
|
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_2">弹出</tn-button></view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>带透明mask toast框</view>
|
<view>带透明mask toast框</view>
|
||||||
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_3">弹出</tn-button></view>
|
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_3">弹出</tn-button></view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>设置时间 toast框</view>
|
<view>设置时间 toast框</view>
|
||||||
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_4">弹出</tn-button></view>
|
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_4">弹出</tn-button></view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>设置回调 toast框</view>
|
<view>设置回调 toast框</view>
|
||||||
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_5">弹出</tn-button></view>
|
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_5">弹出</tn-button></view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>关闭 toast框</view>
|
<view>关闭 toast框</view>
|
||||||
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="closeToast">关闭</tn-button></view>
|
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="closeToast">关闭</tn-button></view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
</tn-list-view>
|
</tn-list-view>
|
||||||
</demo-title>
|
</demo-title>
|
||||||
|
|
||||||
<demo-title title="uni内置loading框">
|
<demo-title title="uni内置loading框">
|
||||||
<tn-list-view backgroundColor="tn-bg-white">
|
<tn-list-view backgroundColor="tn-bg-white">
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>弹出loading框</view>
|
<view>弹出loading框</view>
|
||||||
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openLoading">弹出</tn-button></view>
|
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openLoading">弹出</tn-button></view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>关闭loading框</view>
|
<view>关闭loading框</view>
|
||||||
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="closeLoading">关闭</tn-button></view>
|
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="closeLoading">关闭</tn-button></view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
</tn-list-view>
|
</tn-list-view>
|
||||||
</demo-title>
|
</demo-title>
|
||||||
|
|
||||||
<demo-title title="uni内置modal框">
|
<demo-title title="uni内置modal框">
|
||||||
<tn-list-view backgroundColor="tn-bg-white">
|
<tn-list-view backgroundColor="tn-bg-white">
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>默认modal框</view>
|
<view>默认modal框</view>
|
||||||
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_1">弹出</tn-button></view>
|
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_1">弹出</tn-button></view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>隐藏取消按钮 modal框</view>
|
<view>隐藏取消按钮 modal框</view>
|
||||||
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_2">弹出</tn-button></view>
|
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_2">弹出</tn-button></view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>修改文字 modal框</view>
|
<view>修改文字 modal框</view>
|
||||||
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_3">弹出</tn-button></view>
|
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_3">弹出</tn-button></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>
|
||||||
</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: 'basicUtilsMessage',
|
name: 'basicUtilsMessage',
|
||||||
components: {demoTitle},
|
components: {demoTitle},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 弹出toast
|
// 弹出toast
|
||||||
openToast_1() {
|
openToast_1() {
|
||||||
this.$tn.message.toast('弹出toast')
|
this.$tn.message.toast('弹出toast')
|
||||||
},
|
},
|
||||||
openToast_2() {
|
openToast_2() {
|
||||||
this.$tn.message.toast('弹出toast icon', false, null, 'success')
|
this.$tn.message.toast('弹出toast icon', false, null, 'success')
|
||||||
},
|
},
|
||||||
openToast_3() {
|
openToast_3() {
|
||||||
this.$tn.message.toast('弹出toast mask', true)
|
this.$tn.message.toast('弹出toast mask', true)
|
||||||
},
|
},
|
||||||
openToast_4() {
|
openToast_4() {
|
||||||
this.$tn.message.toast('弹出toast duration', false, null, 'none', 3000)
|
this.$tn.message.toast('弹出toast duration', false, null, 'none', 3000)
|
||||||
},
|
},
|
||||||
openToast_5() {
|
openToast_5() {
|
||||||
this.$tn.message.toast('弹出toast cb', true, () => {
|
this.$tn.message.toast('弹出toast cb', true, () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.$tn.message.toast('执行完毕后弹出', true, null, 'success')
|
this.$tn.message.toast('执行完毕后弹出', true, null, 'success')
|
||||||
}, 500)
|
}, 500)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 关闭Toast
|
// 关闭Toast
|
||||||
closeToast() {
|
closeToast() {
|
||||||
this.$tn.message.closeToast()
|
this.$tn.message.closeToast()
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// 弹出loading
|
// 弹出loading
|
||||||
openLoading() {
|
openLoading() {
|
||||||
this.$tn.message.loading('弹出loading')
|
this.$tn.message.loading('弹出loading')
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.closeLoading()
|
this.closeLoading()
|
||||||
}, 3000)
|
}, 3000)
|
||||||
},
|
},
|
||||||
// 关闭loading
|
// 关闭loading
|
||||||
closeLoading() {
|
closeLoading() {
|
||||||
this.$tn.message.closeLoading()
|
this.$tn.message.closeLoading()
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// 弹出modal
|
// 弹出modal
|
||||||
openModal_1() {
|
openModal_1() {
|
||||||
this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
|
this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
|
||||||
this.$tn.message.toast('点击了确认按钮')
|
this.$tn.message.toast('点击了确认按钮')
|
||||||
}, true, () => {
|
}, true, () => {
|
||||||
this.$tn.message.toast('点击了取消按钮')
|
this.$tn.message.toast('点击了取消按钮')
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
openModal_2() {
|
openModal_2() {
|
||||||
this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
|
this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
|
||||||
this.$tn.message.toast('点击了确认按钮')
|
this.$tn.message.toast('点击了确认按钮')
|
||||||
}, false, null)
|
}, false, null)
|
||||||
},
|
},
|
||||||
openModal_3() {
|
openModal_3() {
|
||||||
this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
|
this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
|
||||||
this.$tn.message.toast('点击了跳转按钮')
|
this.$tn.message.toast('点击了跳转按钮')
|
||||||
}, true, () => {
|
}, true, () => {
|
||||||
this.$tn.message.toast('点击了拒绝按钮')
|
this.$tn.message.toast('点击了拒绝按钮')
|
||||||
}, "跳转登录", "拒绝登录")
|
}, "跳转登录", "拒绝登录")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.basic-utils__message {
|
.basic-utils__message {
|
||||||
background-color: $tn-bg-gray-color;
|
background-color: $tn-bg-gray-color;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+159
-159
@@ -1,159 +1,159 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="basic-utils__number tn-safe-area-inset-bottom">
|
<view class="basic-utils__number tn-safe-area-inset-bottom">
|
||||||
|
|
||||||
<!-- 顶部自定义导航 -->
|
<!-- 顶部自定义导航 -->
|
||||||
<tn-nav-bar fixed>Number工具</tn-nav-bar>
|
<tn-nav-bar fixed>Number工具</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-list-view backgroundColor="tn-bg-white">
|
<tn-list-view backgroundColor="tn-bg-white">
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>超过2位自动添加'+'号</view>
|
<view>超过2位自动添加'+'号</view>
|
||||||
<view>{{ $tn.number.formatNumberString(56) }}</view>
|
<view>{{ $tn.number.formatNumberString(56) }}</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>超过2位自动添加'+'号</view>
|
<view>超过2位自动添加'+'号</view>
|
||||||
<view>{{ $tn.number.formatNumberString(100) }}</view>
|
<view>{{ $tn.number.formatNumberString(100) }}</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>超过3位自动添加'+'号</view>
|
<view>超过3位自动添加'+'号</view>
|
||||||
<view>{{ $tn.number.formatNumberString(899, 3) }}</view>
|
<view>{{ $tn.number.formatNumberString(899, 3) }}</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>超过3位自动添加'+'号</view>
|
<view>超过3位自动添加'+'号</view>
|
||||||
<view>{{ $tn.number.formatNumberString(1000, 3) }}</view>
|
<view>{{ $tn.number.formatNumberString(1000, 3) }}</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
</tn-list-view>
|
</tn-list-view>
|
||||||
</demo-title>
|
</demo-title>
|
||||||
|
|
||||||
<demo-title title="往数字前添加'0'">
|
<demo-title title="往数字前添加'0'">
|
||||||
<tn-list-view backgroundColor="tn-bg-white">
|
<tn-list-view backgroundColor="tn-bg-white">
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>只有一位时会往前面添加'0'</view>
|
<view>只有一位时会往前面添加'0'</view>
|
||||||
<view>{{ $tn.number.formatNumberAddZero(6) }}</view>
|
<view>{{ $tn.number.formatNumberAddZero(6) }}</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>超过两位时不会往前面添加'0'</view>
|
<view>超过两位时不会往前面添加'0'</view>
|
||||||
<view>{{ $tn.number.formatNumberAddZero(16) }}</view>
|
<view>{{ $tn.number.formatNumberAddZero(16) }}</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>超过两位时不会往前面添加'0'</view>
|
<view>超过两位时不会往前面添加'0'</view>
|
||||||
<view>{{ $tn.number.formatNumberAddZero(106) }}</view>
|
<view>{{ $tn.number.formatNumberAddZero(106) }}</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
</tn-list-view>
|
</tn-list-view>
|
||||||
</demo-title>
|
</demo-title>
|
||||||
|
|
||||||
<demo-title title="数值转换为带单位金额">
|
<demo-title title="数值转换为带单位金额">
|
||||||
<tn-list-view backgroundColor="tn-bg-white">
|
<tn-list-view backgroundColor="tn-bg-white">
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>不带单位</view>
|
<view>不带单位</view>
|
||||||
<view>{{ $tn.number.formatNumberAddPriceUnit(100) }}</view>
|
<view>{{ $tn.number.formatNumberAddPriceUnit(100) }}</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>不带单位</view>
|
<view>不带单位</view>
|
||||||
<view>{{ $tn.number.formatNumberAddPriceUnit(100.88) }}</view>
|
<view>{{ $tn.number.formatNumberAddPriceUnit(100.88) }}</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>带K单位</view>
|
<view>带K单位</view>
|
||||||
<view>{{ $tn.number.formatNumberAddPriceUnit(1000) }}</view>
|
<view>{{ $tn.number.formatNumberAddPriceUnit(1000) }}</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>带K单位</view>
|
<view>带K单位</view>
|
||||||
<view>{{ $tn.number.formatNumberAddPriceUnit(1032.89) }}</view>
|
<view>{{ $tn.number.formatNumberAddPriceUnit(1032.89) }}</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>带W单位</view>
|
<view>带W单位</view>
|
||||||
<view>{{ $tn.number.formatNumberAddPriceUnit(10000) }}</view>
|
<view>{{ $tn.number.formatNumberAddPriceUnit(10000) }}</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
<tn-list-cell>
|
<tn-list-cell>
|
||||||
<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>带W单位</view>
|
<view>带W单位</view>
|
||||||
<view>{{ $tn.number.formatNumberAddPriceUnit(10875.90) }}</view>
|
<view>{{ $tn.number.formatNumberAddPriceUnit(10875.90) }}</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-list-cell>
|
</tn-list-cell>
|
||||||
</tn-list-view>
|
</tn-list-view>
|
||||||
</demo-title>
|
</demo-title>
|
||||||
|
|
||||||
<demo-title title="获取随机值">
|
<demo-title title="获取随机值">
|
||||||
<view class="tn-bg-white">
|
<view class="tn-bg-white">
|
||||||
<tn-form-item>
|
<tn-form-item>
|
||||||
<view class="tn-margin-left"><tn-input v-model="randomValue" :disabled="true"></tn-input></view>
|
<view class="tn-margin-left"><tn-input v-model="randomValue" :disabled="true"></tn-input></view>
|
||||||
<template slot="right">
|
<template slot="right">
|
||||||
<view class="tn-margin-right-sm">
|
<view class="tn-margin-right-sm">
|
||||||
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="getRandomValue">获取随机值</tn-button>
|
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="getRandomValue">获取随机值</tn-button>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</tn-form-item>
|
</tn-form-item>
|
||||||
<tn-form-item>
|
<tn-form-item>
|
||||||
<view class="tn-margin-left"><tn-input v-model="intRandomValue" :disabled="true"></tn-input></view>
|
<view class="tn-margin-left"><tn-input v-model="intRandomValue" :disabled="true"></tn-input></view>
|
||||||
<template slot="right">
|
<template slot="right">
|
||||||
<view class="tn-margin-right-sm">
|
<view class="tn-margin-right-sm">
|
||||||
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="getIntRandomValue">获取整数随机值</tn-button>
|
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="getIntRandomValue">获取整数随机值</tn-button>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</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>
|
||||||
|
|
||||||
</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: 'basicUtilsNumber',
|
name: 'basicUtilsNumber',
|
||||||
components: {demoTitle},
|
components: {demoTitle},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
randomValue: '',
|
randomValue: '',
|
||||||
intRandomValue: '',
|
intRandomValue: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 获取随机值
|
// 获取随机值
|
||||||
getRandomValue() {
|
getRandomValue() {
|
||||||
this.randomValue = this.$tn.number.random(0, 100.99)
|
this.randomValue = this.$tn.number.random(0, 100.99)
|
||||||
},
|
},
|
||||||
// 获取整数随机值
|
// 获取整数随机值
|
||||||
getIntRandomValue() {
|
getIntRandomValue() {
|
||||||
this.intRandomValue = this.$tn.number.randomInt(0, 100)
|
this.intRandomValue = this.$tn.number.randomInt(0, 100)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.basic-utils__number {
|
.basic-utils__number {
|
||||||
background-color: $tn-bg-gray-color;
|
background-color: $tn-bg-gray-color;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,89 +1,89 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="basic-utils__string tn-safe-area-inset-bottom">
|
<view class="basic-utils__string tn-safe-area-inset-bottom">
|
||||||
|
|
||||||
<!-- 顶部自定义导航 -->
|
<!-- 顶部自定义导航 -->
|
||||||
<tn-nav-bar fixed>String工具</tn-nav-bar>
|
<tn-nav-bar fixed>String工具</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-form-item>
|
<tn-form-item>
|
||||||
<tn-input v-model="trimValue" :trim="false"></tn-input>
|
<tn-input v-model="trimValue" :trim="false"></tn-input>
|
||||||
<template slot="right">
|
<template slot="right">
|
||||||
<view class="tn-margin-right-sm">
|
<view class="tn-margin-right-sm">
|
||||||
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerTrim">清除空格</tn-button>
|
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerTrim">清除空格</tn-button>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</tn-form-item>
|
</tn-form-item>
|
||||||
</view>
|
</view>
|
||||||
</demo-title>
|
</demo-title>
|
||||||
|
|
||||||
<demo-title title="大写转指定连接符">
|
<demo-title title="大写转指定连接符">
|
||||||
<view class="tn-bg-white">
|
<view class="tn-bg-white">
|
||||||
<tn-form-item>
|
<tn-form-item>
|
||||||
<tn-input v-model="humpCharValue"></tn-input>
|
<tn-input v-model="humpCharValue"></tn-input>
|
||||||
<template slot="right">
|
<template slot="right">
|
||||||
<view class="tn-margin-right-sm">
|
<view class="tn-margin-right-sm">
|
||||||
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerHumpChar">转换</tn-button>
|
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerHumpChar">转换</tn-button>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</tn-form-item>
|
</tn-form-item>
|
||||||
</view>
|
</view>
|
||||||
</demo-title>
|
</demo-title>
|
||||||
|
|
||||||
<demo-title title="将自定的连接符转为大写">
|
<demo-title title="将自定的连接符转为大写">
|
||||||
<view class="tn-bg-white">
|
<view class="tn-bg-white">
|
||||||
<tn-form-item>
|
<tn-form-item>
|
||||||
<tn-input v-model="charHumpValue"></tn-input>
|
<tn-input v-model="charHumpValue"></tn-input>
|
||||||
<template slot="right">
|
<template slot="right">
|
||||||
<view class="tn-margin-right-sm">
|
<view class="tn-margin-right-sm">
|
||||||
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerCharHump">转换</tn-button>
|
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerCharHump">转换</tn-button>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</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>
|
||||||
|
|
||||||
</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: 'basicUtilsString',
|
name: 'basicUtilsString',
|
||||||
components: {demoTitle},
|
components: {demoTitle},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
trimValue: ' 前后都有空格啊 ',
|
trimValue: ' 前后都有空格啊 ',
|
||||||
humpCharValue: 'TuniaoUI',
|
humpCharValue: 'TuniaoUI',
|
||||||
charHumpValue: 'Tuniao_u_i'
|
charHumpValue: 'Tuniao_u_i'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 处理去除空格
|
// 处理去除空格
|
||||||
handlerTrim() {
|
handlerTrim() {
|
||||||
this.trimValue = this.$tn.string.trim(this.trimValue)
|
this.trimValue = this.$tn.string.trim(this.trimValue)
|
||||||
},
|
},
|
||||||
// 处理将大写字符串转换为指定的连接符连接的字符串
|
// 处理将大写字符串转换为指定的连接符连接的字符串
|
||||||
handlerHumpChar() {
|
handlerHumpChar() {
|
||||||
this.humpCharValue = this.$tn.string.humpConvertChar(this.humpCharValue, '_')
|
this.humpCharValue = this.$tn.string.humpConvertChar(this.humpCharValue, '_')
|
||||||
},
|
},
|
||||||
// 处理将指定的连接字符连接的字符串转换为大写的字符串
|
// 处理将指定的连接字符连接的字符串转换为大写的字符串
|
||||||
handlerCharHump() {
|
handlerCharHump() {
|
||||||
this.charHumpValue = this.$tn.string.charConvertHump(this.charHumpValue, '_')
|
this.charHumpValue = this.$tn.string.charConvertHump(this.charHumpValue, '_')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.basic-utils__string {
|
.basic-utils__string {
|
||||||
background-color: $tn-bg-gray-color;
|
background-color: $tn-bg-gray-color;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+2
-2
@@ -1,3 +1,3 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
baseUrl: 'http://api.youzixy.com'
|
baseUrl: 'http://api.youzixy.com'
|
||||||
}
|
}
|
||||||
@@ -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.$tn.message.toast('选择正确')
|
this.$tn.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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/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>
|
||||||
|
|||||||
+196
-196
@@ -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.$tn.message.toast(`点击了第 ${e.index} 个选项`)
|
this.$tn.message.toast(`点击了第 ${e.index} 个选项`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+523
-523
File diff suppressed because it is too large
Load Diff
@@ -59,7 +59,7 @@
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
avatarOptions: [{
|
avatarOptions: [{
|
||||||
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'
|
avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'
|
||||||
},{
|
},{
|
||||||
icon: 'service',
|
icon: 'service',
|
||||||
text: '客服'
|
text: '客服'
|
||||||
@@ -68,7 +68,7 @@
|
|||||||
text: '收藏'
|
text: '收藏'
|
||||||
}],
|
}],
|
||||||
countOptions: [{
|
countOptions: [{
|
||||||
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
|
||||||
count: 10
|
count: 10
|
||||||
},{
|
},{
|
||||||
icon: 'service',
|
icon: 'service',
|
||||||
@@ -79,7 +79,7 @@
|
|||||||
text: '收藏'
|
text: '收藏'
|
||||||
}],
|
}],
|
||||||
customOptions: [{
|
customOptions: [{
|
||||||
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
|
||||||
count: 10,
|
count: 10,
|
||||||
countBackgroundColor: '#E83A30'
|
countBackgroundColor: '#E83A30'
|
||||||
},{
|
},{
|
||||||
|
|||||||
@@ -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.$tn.deepClone(lists)
|
this.lists = this.$tn.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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
+212
-212
@@ -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>
|
||||||
|
|||||||
@@ -1,317 +1,317 @@
|
|||||||
<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"
|
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true"
|
||||||
@click="click">
|
@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="键盘输入的内容"
|
<tn-input v-model="inputValue" type="text" :disabled="true" :border="true" placeholder="键盘输入的内容"
|
||||||
@click="showKeyboard"></tn-input>
|
@click="showKeyboard"></tn-input>
|
||||||
<tn-button class="clear-btn" backgroundColor="tn-bg-gray" fontColor="white" width="120rpx"
|
<tn-button class="clear-btn" backgroundColor="tn-bg-gray" fontColor="white" width="120rpx"
|
||||||
height="70rpx" @click="clearInputValue">清空</tn-button>
|
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 class="car-input" :class="{'new-energy': index === 7 && !licensePlateValue[index]}"
|
<view class="car-input" :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>
|
||||||
<block v-if="licensePlateValue[index]===''">
|
<block v-if="licensePlateValue[index]===''">
|
||||||
|
|
||||||
</block>
|
</block>
|
||||||
<block v-else>
|
<block v-else>
|
||||||
{{ licensePlateValue[index]}}
|
{{ licensePlateValue[index]}}
|
||||||
</block>
|
</block>
|
||||||
</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 v-model="value" :mode="mode" :dotEnabled="dotEnabled" :randomEnabled="randomEnabled"
|
<tn-keyboard v-model="value" :mode="mode" :dotEnabled="dotEnabled" :randomEnabled="randomEnabled"
|
||||||
:switchEnMode="switchEnMode" :tooltip="tooltip" :mask="mask" @change="onChange" @cancel="onCancel"
|
:switchEnMode="switchEnMode" :tooltip="tooltip" :mask="mask" @change="onChange" @cancel="onCancel"
|
||||||
@confirm="onConfirm" @backspace="onBackspace"></tn-keyboard>
|
@confirm="onConfirm" @backspace="onBackspace"></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: {
|
components: {
|
||||||
dynamicDemoTemplate
|
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.$tn.test.chinese(e)) {
|
if (this.currentLicensePlateIndex === 0 && !this.$tn.test.chinese(e)) {
|
||||||
this.$tn.message.toast('车牌归属地选择错误')
|
this.$tn.message.toast('车牌归属地选择错误')
|
||||||
return
|
return
|
||||||
} else if (this.currentLicensePlateIndex === 1 && !this.$tn.test.letter(e)) {
|
} else if (this.currentLicensePlateIndex === 1 && !this.$tn.test.letter(e)) {
|
||||||
this.$tn.message.toast('车牌归属地字母选择错误')
|
this.$tn.message.toast('车牌归属地字母选择错误')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (this.currentLicensePlateIndex !== 0 && !this.$tn.test.enOrNum(e)) {
|
if (this.currentLicensePlateIndex !== 0 && !this.$tn.test.enOrNum(e)) {
|
||||||
this.$tn.message.toast('车牌号码选择错误')
|
this.$tn.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.$tn.message.toast('点击了取消按钮')
|
this.$tn.message.toast('点击了取消按钮')
|
||||||
},
|
},
|
||||||
// 点击了确认按钮
|
// 点击了确认按钮
|
||||||
onConfirm() {
|
onConfirm() {
|
||||||
this.$tn.message.toast('点击了确认按钮')
|
this.$tn.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>
|
||||||
@@ -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://resource.tuniaokj.com/images/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>
|
||||||
|
|||||||
@@ -32,29 +32,29 @@
|
|||||||
status: 'loadmore',
|
status: 'loadmore',
|
||||||
list: [],
|
list: [],
|
||||||
data: [
|
data: [
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/bag1.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/bag1.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/bag2.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/bag2.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/banner1.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/banner2.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/banner3.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/banner3.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/card.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/card.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/computer1.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/computer1.jpg' },
|
||||||
{ src: 'error.jpg' },
|
{ src: 'error.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/computer2.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/content.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/content.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/cup1.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/cup1.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/cup2.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/cup2.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/office.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/office.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/pillow.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/pillow.jpg' },
|
||||||
{ src: 'error.jpg' },
|
{ src: 'error.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/pillow2.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/pillow2.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/sticker.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/watch1.jpg' },
|
||||||
{ src: 'https://tnuiimage.tnkjapp.com/shop/watch2.jpg' },
|
{ src: 'https://resource.tuniaokj.com/images/shop/watch2.jpg' },
|
||||||
{ src: 'error.jpg' }
|
{ src: 'error.jpg' }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
+365
-365
@@ -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://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'},
|
||||||
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
|
{src: 'https://resource.tuniaokj.com/images/avatar/xiaomai2.jpg'},
|
||||||
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
|
{src: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'},
|
||||||
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
|
{src: 'https://resource.tuniaokj.com/images/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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
+277
-277
@@ -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.$tn.message.toast('点击了第'+(event.index + 1)+'个按钮')
|
this.$tn.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>
|
||||||
|
|||||||
+187
-187
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
+303
-303
@@ -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.$tn.message.toast('点击了取消按钮')
|
this.$tn.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>
|
||||||
|
|||||||
+239
-239
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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="[$tn.color.getRandomCoolBgClass(index)]">
|
<view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$tn.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="[$tn.color.getRandomCoolBgClass(index)]">
|
<view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$tn.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="[$tn.color.getRandomCoolBgClass(index)]">
|
<view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$tn.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://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+381
-381
@@ -1,381 +1,381 @@
|
|||||||
<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: '胖虎'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 6,
|
value: 6,
|
||||||
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.$tn.message.toast('点击了取消按钮')
|
this.$tn.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>
|
||||||
|
|||||||
@@ -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.$tn.message.modal('操作提示','当前已经打开了签名板，是否确认需要关闭', () => {
|
this.$tn.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>
|
||||||
|
|||||||
@@ -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://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/shop/sticker.jpg',
|
||||||
releaseDate: '2020年12月30日'
|
releaseDate: '2020年12月30日'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
userInfo: {
|
userInfo: {
|
||||||
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
avatar: 'https://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/shop/sticker.jpg',
|
||||||
releaseDate: '2020年12月30日'
|
releaseDate: '2020年12月30日'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
userInfo: {
|
userInfo: {
|
||||||
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
avatar: 'https://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/shop/sticker.jpg',
|
||||||
releaseDate: '2020年12月30日'
|
releaseDate: '2020年12月30日'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
userInfo: {
|
userInfo: {
|
||||||
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
avatar: 'https://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/shop/sticker.jpg',
|
||||||
releaseDate: '2020年12月30日'
|
releaseDate: '2020年12月30日'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
userInfo: {
|
userInfo: {
|
||||||
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
avatar: 'https://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/shop/sticker.jpg',
|
||||||
releaseDate: '2020年12月30日'
|
releaseDate: '2020年12月30日'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
userInfo: {
|
userInfo: {
|
||||||
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
avatar: 'https://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/shop/sticker.jpg',
|
||||||
releaseDate: '2020年12月30日'
|
releaseDate: '2020年12月30日'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
userInfo: {
|
userInfo: {
|
||||||
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
avatar: 'https://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/shop/sticker.jpg',
|
||||||
releaseDate: '2020年12月30日'
|
releaseDate: '2020年12月30日'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
userInfo: {
|
userInfo: {
|
||||||
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
avatar: 'https://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news {
|
.components-skeleton {
|
||||||
position: relative;
|
// background-color: $tn-bg-gray-color;
|
||||||
|
}
|
||||||
&__item {
|
|
||||||
margin: 0 30rpx;
|
.news {
|
||||||
padding: 10rpx;
|
position: relative;
|
||||||
background-color: #FFFFFF;
|
|
||||||
border-radius: 10rpx;
|
&__item {
|
||||||
box-shadow: 4rpx 6rpx 28rpx 0px rgba(0, 0, 0, 0.1);
|
margin: 0 30rpx;
|
||||||
margin-bottom: 30rpx;
|
padding: 10rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
&__info {
|
border-radius: 10rpx;
|
||||||
height: 80rpx;
|
box-shadow: 4rpx 6rpx 28rpx 0px rgba(0, 0, 0, 0.1);
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 30rpx;
|
||||||
}
|
|
||||||
&__avatar {
|
&__info {
|
||||||
width: 80rpx;
|
height: 80rpx;
|
||||||
height: 100%;
|
margin-bottom: 20rpx;
|
||||||
border-radius: 100%;
|
}
|
||||||
overflow: hidden;
|
&__avatar {
|
||||||
image {
|
width: 80rpx;
|
||||||
width: 100%;
|
height: 100%;
|
||||||
height: 100%;
|
border-radius: 100%;
|
||||||
}
|
overflow: hidden;
|
||||||
}
|
image {
|
||||||
&__outline {
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin-left: 20rpx;
|
}
|
||||||
}
|
}
|
||||||
&__nick-name {
|
&__outline {
|
||||||
font-size: 30rpx;
|
height: 100%;
|
||||||
margin-bottom: 6rpx;
|
margin-left: 20rpx;
|
||||||
}
|
}
|
||||||
&__release-date {
|
&__nick-name {
|
||||||
font-size: 22rpx;
|
font-size: 30rpx;
|
||||||
color: $tn-font-sub-color;
|
margin-bottom: 6rpx;
|
||||||
}
|
}
|
||||||
|
&__release-date {
|
||||||
&__content {
|
font-size: 22rpx;
|
||||||
height: 140rpx;
|
color: $tn-font-sub-color;
|
||||||
&__data {
|
}
|
||||||
width: 60%;
|
|
||||||
margin-right: 10rpx;
|
&__content {
|
||||||
}
|
height: 140rpx;
|
||||||
}
|
&__data {
|
||||||
&__title {
|
width: 60%;
|
||||||
width: 100%;
|
margin-right: 10rpx;
|
||||||
font-size: 30rpx;
|
}
|
||||||
font-weight: bold;
|
}
|
||||||
margin-bottom: 10rpx;
|
&__title {
|
||||||
}
|
width: 100%;
|
||||||
&__desc {
|
font-size: 30rpx;
|
||||||
width: 100%;
|
font-weight: bold;
|
||||||
word-break: break-all;
|
margin-bottom: 10rpx;
|
||||||
font-size: 24rpx;
|
}
|
||||||
}
|
&__desc {
|
||||||
&__main-image {
|
width: 100%;
|
||||||
width: 40%;
|
word-break: break-all;
|
||||||
height: 100%;
|
font-size: 24rpx;
|
||||||
border-radius: 5rpx;
|
}
|
||||||
overflow: hidden;
|
&__main-image {
|
||||||
image {
|
width: 40%;
|
||||||
width: 100%;
|
height: 100%;
|
||||||
height: 100%;
|
border-radius: 5rpx;
|
||||||
}
|
overflow: hidden;
|
||||||
}
|
image {
|
||||||
}
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
+104
-104
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -1,244 +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> -->
|
</tn-swipe-action> -->
|
||||||
<tn-swipe-action-item :options="options1" name="0" @click="onSwiperItemClick">
|
<tn-swipe-action-item :options="options1" name="0" @click="onSwiperItemClick">
|
||||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||||
<view class="swipe-action__item__image">
|
<view class="swipe-action__item__image">
|
||||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
<image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
|
||||||
</view>
|
</view>
|
||||||
<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 tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||||
<view class="swipe-action__item__info__title">
|
<view class="swipe-action__item__info__title">
|
||||||
基本使用
|
基本使用
|
||||||
</view>
|
</view>
|
||||||
<view class="swipe-action__item__info__desc">
|
<view class="swipe-action__item__info__desc">
|
||||||
向左滑动即可看到
|
向左滑动即可看到
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-swipe-action-item>
|
</tn-swipe-action-item>
|
||||||
</demo-title>
|
</demo-title>
|
||||||
|
|
||||||
<demo-title title="多菜单">
|
<demo-title title="多菜单">
|
||||||
<tn-swipe-action>
|
<tn-swipe-action>
|
||||||
<tn-swipe-action-item :options="options2">
|
<tn-swipe-action-item :options="options2">
|
||||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||||
<view class="swipe-action__item__image">
|
<view class="swipe-action__item__image">
|
||||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
<image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
|
||||||
</view>
|
</view>
|
||||||
<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 tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||||
<view class="swipe-action__item__info__title">
|
<view class="swipe-action__item__info__title">
|
||||||
多菜单
|
多菜单
|
||||||
</view>
|
</view>
|
||||||
<view class="swipe-action__item__info__desc">
|
<view class="swipe-action__item__info__desc">
|
||||||
向左滑动即可看到
|
向左滑动即可看到
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-swipe-action-item>
|
</tn-swipe-action-item>
|
||||||
</tn-swipe-action>
|
</tn-swipe-action>
|
||||||
</demo-title>
|
</demo-title>
|
||||||
|
|
||||||
<demo-title title="带图标菜单">
|
<demo-title title="带图标菜单">
|
||||||
<tn-swipe-action>
|
<tn-swipe-action>
|
||||||
<tn-swipe-action-item :options="options3">
|
<tn-swipe-action-item :options="options3">
|
||||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||||
<view class="swipe-action__item__image">
|
<view class="swipe-action__item__image">
|
||||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
<image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
|
||||||
</view>
|
</view>
|
||||||
<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 tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||||
<view class="swipe-action__item__info__title">
|
<view class="swipe-action__item__info__title">
|
||||||
带图标菜单
|
带图标菜单
|
||||||
</view>
|
</view>
|
||||||
<view class="swipe-action__item__info__desc">
|
<view class="swipe-action__item__info__desc">
|
||||||
向左滑动即可看到
|
向左滑动即可看到
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-swipe-action-item>
|
</tn-swipe-action-item>
|
||||||
</tn-swipe-action>
|
</tn-swipe-action>
|
||||||
</demo-title>
|
</demo-title>
|
||||||
|
|
||||||
<demo-title title="单图标菜单">
|
<demo-title title="单图标菜单">
|
||||||
<tn-swipe-action>
|
<tn-swipe-action>
|
||||||
<tn-swipe-action-item :options="options4">
|
<tn-swipe-action-item :options="options4">
|
||||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||||
<view class="swipe-action__item__image">
|
<view class="swipe-action__item__image">
|
||||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
<image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
|
||||||
</view>
|
</view>
|
||||||
<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 tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||||
<view class="swipe-action__item__info__title">
|
<view class="swipe-action__item__info__title">
|
||||||
单图标菜单
|
单图标菜单
|
||||||
</view>
|
</view>
|
||||||
<view class="swipe-action__item__info__desc">
|
<view class="swipe-action__item__info__desc">
|
||||||
向左滑动即可看到
|
向左滑动即可看到
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-swipe-action-item>
|
</tn-swipe-action-item>
|
||||||
</tn-swipe-action>
|
</tn-swipe-action>
|
||||||
</demo-title>
|
</demo-title>
|
||||||
|
|
||||||
<demo-title title="关联打开滑动菜单">
|
<demo-title title="关联打开滑动菜单">
|
||||||
<tn-swipe-action>
|
<tn-swipe-action>
|
||||||
<tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
|
<tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
|
||||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||||
<view class="swipe-action__item__image">
|
<view class="swipe-action__item__image">
|
||||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
<image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
|
||||||
</view>
|
</view>
|
||||||
<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 tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||||
<view class="swipe-action__item__info__title">
|
<view class="swipe-action__item__info__title">
|
||||||
关联打开滑动菜单
|
关联打开滑动菜单
|
||||||
</view>
|
</view>
|
||||||
<view class="swipe-action__item__info__desc">
|
<view class="swipe-action__item__info__desc">
|
||||||
向左滑动即可看到，同时只能打开一个菜单
|
向左滑动即可看到，同时只能打开一个菜单
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-swipe-action-item>
|
</tn-swipe-action-item>
|
||||||
</tn-swipe-action>
|
</tn-swipe-action>
|
||||||
</demo-title>
|
</demo-title>
|
||||||
|
|
||||||
<demo-title title="非关联打开滑动菜单">
|
<demo-title title="非关联打开滑动菜单">
|
||||||
<tn-swipe-action :autoClose="false">
|
<tn-swipe-action :autoClose="false">
|
||||||
<tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
|
<tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
|
||||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||||
<view class="swipe-action__item__image">
|
<view class="swipe-action__item__image">
|
||||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
<image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
|
||||||
</view>
|
</view>
|
||||||
<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 tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||||
<view class="swipe-action__item__info__title">
|
<view class="swipe-action__item__info__title">
|
||||||
非关联打开滑动菜单
|
非关联打开滑动菜单
|
||||||
</view>
|
</view>
|
||||||
<view class="swipe-action__item__info__desc">
|
<view class="swipe-action__item__info__desc">
|
||||||
向左滑动即可看到，允许同时打开多个菜单
|
向左滑动即可看到，允许同时打开多个菜单
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-swipe-action-item>
|
</tn-swipe-action-item>
|
||||||
</tn-swipe-action>
|
</tn-swipe-action>
|
||||||
</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: 'componentsSwipeAction',
|
name: 'componentsSwipeAction',
|
||||||
components: { demoTitle },
|
components: { demoTitle },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 滑动菜单
|
// 滑动菜单
|
||||||
options1: [{
|
options1: [{
|
||||||
text: '置顶',
|
text: '置顶',
|
||||||
style: {
|
style: {
|
||||||
backgroundColor: '#FFA726'
|
backgroundColor: '#FFA726'
|
||||||
}
|
}
|
||||||
}],
|
}],
|
||||||
options2: [{
|
options2: [{
|
||||||
text: '置顶',
|
text: '置顶',
|
||||||
style: {
|
style: {
|
||||||
backgroundColor: '#FFA726'
|
backgroundColor: '#FFA726'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '删除',
|
text: '删除',
|
||||||
style: {
|
style: {
|
||||||
backgroundColor: '#E83A30'
|
backgroundColor: '#E83A30'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
options3: [{
|
options3: [{
|
||||||
text: '置顶',
|
text: '置顶',
|
||||||
icon: 'star',
|
icon: 'star',
|
||||||
style: {
|
style: {
|
||||||
backgroundColor: '#FFA726'
|
backgroundColor: '#FFA726'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '删除',
|
text: '删除',
|
||||||
icon: 'delete',
|
icon: 'delete',
|
||||||
style: {
|
style: {
|
||||||
backgroundColor: '#E83A30'
|
backgroundColor: '#E83A30'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
options4: [{
|
options4: [{
|
||||||
icon: 'star',
|
icon: 'star',
|
||||||
style: {
|
style: {
|
||||||
backgroundColor: '#FFA726',
|
backgroundColor: '#FFA726',
|
||||||
width: '80rpx',
|
width: '80rpx',
|
||||||
height: '80rpx',
|
height: '80rpx',
|
||||||
margin: '0 12rpx',
|
margin: '0 12rpx',
|
||||||
borderRadius: '100rpx'
|
borderRadius: '100rpx'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'delete',
|
icon: 'delete',
|
||||||
style: {
|
style: {
|
||||||
backgroundColor: '#E83A30',
|
backgroundColor: '#E83A30',
|
||||||
width: '80rpx',
|
width: '80rpx',
|
||||||
height: '80rpx',
|
height: '80rpx',
|
||||||
margin: '0 12rpx',
|
margin: '0 12rpx',
|
||||||
borderRadius: '100rpx'
|
borderRadius: '100rpx'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 处理swiperActionItem点击事件
|
// 处理swiperActionItem点击事件
|
||||||
onSwiperItemClick(e) {
|
onSwiperItemClick(e) {
|
||||||
if (e.type === 'button') {
|
if (e.type === 'button') {
|
||||||
this.$tn.message.toast(`点击了第${e.index}个按钮`)
|
this.$tn.message.toast(`点击了第${e.index}个按钮`)
|
||||||
} else if (e.type === 'item') {
|
} else if (e.type === 'item') {
|
||||||
this.$tn.message.toast(`点击了item标签,name为${e.name}`)
|
this.$tn.message.toast(`点击了item标签,name为${e.name}`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.swipe-action__item {
|
.swipe-action__item {
|
||||||
padding: 10rpx 20rpx;
|
padding: 10rpx 20rpx;
|
||||||
|
|
||||||
&__image {
|
&__image {
|
||||||
image {
|
image {
|
||||||
width: 80rpx;
|
width: 80rpx;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__info {
|
&__info {
|
||||||
margin-left: 20rpx;
|
margin-left: 20rpx;
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__desc {
|
&__desc {
|
||||||
margin-top: 5rpx;
|
margin-top: 5rpx;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
color: $tn-font-sub-color;
|
color: $tn-font-sub-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -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://resource.tuniaokj.com/images/swiper/spring.jpg', title: '春天'},
|
||||||
{image: 'https://tnuiimage.tnkjapp.com/swiper/summer.jpg', title: '夏天'},
|
{image: 'https://resource.tuniaokj.com/images/swiper/summer.jpg', title: '夏天'},
|
||||||
{image: 'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg', title: '秋天'},
|
{image: 'https://resource.tuniaokj.com/images/swiper/autumn.jpg', title: '秋天'},
|
||||||
{image: 'https://tnuiimage.tnkjapp.com/swiper/winter.jpg', title: '冬天'},
|
{image: 'https://resource.tuniaokj.com/images/swiper/winter.jpg', title: '冬天'},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
+133
-133
@@ -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.$tn.message.toast('tips提示框关闭了')
|
this.$tn.message.toast('tips提示框关闭了')
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+139
-139
@@ -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.$tn.message.toast('Toast关闭')
|
this.$tn.message.toast('Toast关闭')
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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.$tn.message.loading('正在获取验证码')
|
this.$tn.message.loading('正在获取验证码')
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.$tn.message.closeLoading()
|
this.$tn.message.closeLoading()
|
||||||
this.$tn.message.toast('验证码已经发送')
|
this.$tn.message.toast('验证码已经发送')
|
||||||
// 通知组件开始计时
|
// 通知组件开始计时
|
||||||
this.$refs.code.start()
|
this.$refs.code.start()
|
||||||
}, 2000)
|
}, 2000)
|
||||||
} else {
|
} else {
|
||||||
this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
|
this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// 重置验证码
|
// 重置验证码
|
||||||
reset() {
|
reset() {
|
||||||
this.$refs.code.reset()
|
this.$refs.code.reset()
|
||||||
},
|
},
|
||||||
|
|
||||||
// 开始倒计时
|
// 开始倒计时
|
||||||
codeStart() {
|
codeStart() {
|
||||||
this.$tn.message.toast('倒计时开始')
|
this.$tn.message.toast('倒计时开始')
|
||||||
},
|
},
|
||||||
// 结束倒计时
|
// 结束倒计时
|
||||||
codeEnd() {
|
codeEnd() {
|
||||||
this.$tn.message.toast('倒计时结束')
|
this.$tn.message.toast('倒计时结束')
|
||||||
},
|
},
|
||||||
// 正在倒计时
|
// 正在倒计时
|
||||||
codeChange(event) {
|
codeChange(event) {
|
||||||
this.tips = event
|
this.tips = event
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,94 +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',
|
||||||
options: {
|
options: {
|
||||||
// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
|
// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
|
||||||
virtualHost: true
|
virtualHost: true
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
// 标题类型
|
// 标题类型
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'first'
|
default: 'first'
|
||||||
},
|
},
|
||||||
// 标题
|
// 标题
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
// 左图标
|
// 左图标
|
||||||
leftIcon: {
|
leftIcon: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'star'
|
default: 'star'
|
||||||
},
|
},
|
||||||
// 右图标
|
// 右图标
|
||||||
rightIcon: {
|
rightIcon: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'star'
|
default: 'star'
|
||||||
},
|
},
|
||||||
// 内容容器是否有两边边距
|
// 内容容器是否有两边边距
|
||||||
contentPadding: {
|
contentPadding: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
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>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||||
|
|||||||
@@ -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://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/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>
|
||||||
|
|||||||
@@ -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()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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.$tn.updateCustomBar()
|
const navBarInfo = await this.$tn.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.$tn.vuex('vuex_status_bar_height', statusBarHeight)
|
this.$tn.vuex('vuex_status_bar_height', statusBarHeight)
|
||||||
this.$tn.vuex('vuex_custom_bar_height', customBarHeight)
|
this.$tn.vuex('vuex_custom_bar_height', customBarHeight)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,28 +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/$tn.mixin.js')
|
let vuexStore = require('@/store/$tn.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)
|
require('./util/request/index')(app)
|
||||||
|
|
||||||
app.$mount()
|
app.$mount()
|
||||||
+1
-1
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name" : "TuniaoUI_UniApp",
|
"name" : "TuniaoUI_V2",
|
||||||
"appid" : "__UNI__C82400B",
|
"appid" : "__UNI__C82400B",
|
||||||
"description" : "",
|
"description" : "",
|
||||||
"versionName" : "1.0.0",
|
"versionName" : "1.0.0",
|
||||||
|
|||||||
+87
-87
@@ -1,88 +1,88 @@
|
|||||||
/**
|
/**
|
||||||
* 页面展示列表数据
|
* 页面展示列表数据
|
||||||
*/
|
*/
|
||||||
export default {
|
export default {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
title: '基础元素',
|
title: '基础元素',
|
||||||
backgroundColor: 'tn-cool-bg-color-1',
|
backgroundColor: 'tn-cool-bg-color-1',
|
||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
icon: 'menu-more',
|
icon: 'menu-more',
|
||||||
title: 'Flex布局',
|
title: 'Flex布局',
|
||||||
url: '/basicPage/flex-layout/flex-layout'
|
url: '/basicPage/flex-layout/flex-layout'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'menu-circle',
|
icon: 'menu-circle',
|
||||||
title: 'Grid布局',
|
title: 'Grid布局',
|
||||||
url: '/basicPage/grid-layout/grid-layout'
|
url: '/basicPage/grid-layout/grid-layout'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'gloves',
|
icon: 'gloves',
|
||||||
title: '配色',
|
title: '配色',
|
||||||
url: '/basicPage/color/color'
|
url: '/basicPage/color/color'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'font',
|
icon: 'font',
|
||||||
title: '图标',
|
title: '图标',
|
||||||
url: '/basicPage/icon/icon'
|
url: '/basicPage/icon/icon'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'circle-fill',
|
icon: 'circle-fill',
|
||||||
title: '按钮',
|
title: '按钮',
|
||||||
url: '/basicPage/button/button'
|
url: '/basicPage/button/button'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'tag',
|
icon: 'tag',
|
||||||
title: '标签',
|
title: '标签',
|
||||||
url: '/basicPage/tag/tag'
|
url: '/basicPage/tag/tag'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'square',
|
icon: 'square',
|
||||||
title: '边框',
|
title: '边框',
|
||||||
url: '/basicPage/border/border'
|
url: '/basicPage/border/border'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'copy-fill',
|
icon: 'copy-fill',
|
||||||
title: '阴影',
|
title: '阴影',
|
||||||
url: '/basicPage/shadow/shadow'
|
url: '/basicPage/shadow/shadow'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'moon',
|
icon: 'moon',
|
||||||
title: '微标',
|
title: '微标',
|
||||||
url: '/basicPage/badge/badge'
|
url: '/basicPage/badge/badge'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'emoji-good',
|
icon: 'emoji-good',
|
||||||
title: '头像',
|
title: '头像',
|
||||||
url: '/basicPage/avatar/avatar'
|
url: '/basicPage/avatar/avatar'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
title: '常用工具',
|
title: '常用工具',
|
||||||
backgroundColor: 'tn-cool-bg-color-2',
|
backgroundColor: 'tn-cool-bg-color-2',
|
||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
icon: 'code',
|
icon: 'code',
|
||||||
title: 'String工具',
|
title: 'String工具',
|
||||||
url: '/basicPage/utils/string/index'
|
url: '/basicPage/utils/string/index'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'code',
|
icon: 'code',
|
||||||
title: 'Number工具',
|
title: 'Number工具',
|
||||||
url: '/basicPage/utils/number/index'
|
url: '/basicPage/utils/number/index'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'code',
|
icon: 'code',
|
||||||
title: 'Message工具',
|
title: 'Message工具',
|
||||||
url: '/basicPage/utils/message/index'
|
url: '/basicPage/utils/message/index'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'code',
|
icon: 'code',
|
||||||
title: 'Color工具',
|
title: 'Color工具',
|
||||||
url: '/basicPage/utils/color/index'
|
url: '/basicPage/utils/color/index'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
+265
-265
@@ -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: 'tag',
|
icon: 'tag',
|
||||||
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: 'brand',
|
icon: 'brand',
|
||||||
title: 'swipeAction滑动菜单',
|
title: 'swipeAction滑动菜单',
|
||||||
url: '/componentsPage/swipe-action/swipe-action'
|
url: '/componentsPage/swipe-action/swipe-action'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'pharmacy',
|
icon: 'pharmacy',
|
||||||
title: 'fab悬浮按钮',
|
title: 'fab悬浮按钮',
|
||||||
url: '/componentsPage/fab/fab'
|
url: '/componentsPage/fab/fab'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'cardbag',
|
icon: 'cardbag',
|
||||||
title: '懒加载',
|
title: '懒加载',
|
||||||
url: '/componentsPage/lazy-load/lazy-load'
|
url: '/componentsPage/lazy-load/lazy-load'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'down-double',
|
icon: 'down-double',
|
||||||
title: '加载更多',
|
title: '加载更多',
|
||||||
url: '/componentsPage/load-more/load-more'
|
url: '/componentsPage/load-more/load-more'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'menu-more',
|
icon: 'menu-more',
|
||||||
title: '骨架屏',
|
title: '骨架屏',
|
||||||
url: '/componentsPage/skeleton/skeleton'
|
url: '/componentsPage/skeleton/skeleton'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'empty-search',
|
icon: 'empty-search',
|
||||||
title: '空页面',
|
title: '空页面',
|
||||||
url: '/componentsPage/empty/empty'
|
url: '/componentsPage/empty/empty'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'share',
|
icon: 'share',
|
||||||
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: 'reply',
|
icon: 'reply',
|
||||||
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: 'square',
|
icon: 'square',
|
||||||
title: 'Input输入框',
|
title: 'Input输入框',
|
||||||
url: '/componentsPage/input/input'
|
url: '/componentsPage/input/input'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'circle-fill',
|
icon: 'circle-fill',
|
||||||
title: 'Radio单选框',
|
title: 'Radio单选框',
|
||||||
url: '/componentsPage/radio/radio'
|
url: '/componentsPage/radio/radio'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'copy',
|
icon: 'copy',
|
||||||
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: 'safe',
|
icon: 'safe',
|
||||||
title: '验证码输入',
|
title: '验证码输入',
|
||||||
url: '/componentsPage/verification-code-input/verification-code-input'
|
url: '/componentsPage/verification-code-input/verification-code-input'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'expand',
|
icon: 'expand',
|
||||||
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'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
+78
-24
@@ -33,6 +33,30 @@ export default {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: '充值提现',
|
||||||
|
backgroundColor: 'tn-cool-bg-color-1',
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
icon: 'send',
|
||||||
|
title: '蓝色充值',
|
||||||
|
author: '图鸟北北',
|
||||||
|
url: '/templatePage/money/demo1/demo1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'send',
|
||||||
|
title: '绿色充值',
|
||||||
|
author: '图鸟北北',
|
||||||
|
url: '/templatePage/money/demo2/demo2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'send',
|
||||||
|
title: '暗黑充值',
|
||||||
|
author: '图鸟北北',
|
||||||
|
url: '/templatePage/money/demo3/demo3'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: '个人中心',
|
title: '个人中心',
|
||||||
backgroundColor: 'tn-cool-bg-color-1',
|
backgroundColor: 'tn-cool-bg-color-1',
|
||||||
@@ -159,16 +183,46 @@ export default {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: '加载动画',
|
||||||
|
backgroundColor: 'tn-cool-bg-color-1',
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
icon: 'send',
|
||||||
|
title: '加载动画1',
|
||||||
|
author: '图鸟北北',
|
||||||
|
url: '/templatePage/animate/loading/loading'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'send',
|
||||||
|
title: '加载动画2',
|
||||||
|
author: '图鸟北北',
|
||||||
|
url: '/templatePage/animate/loading/loading2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'send',
|
||||||
|
title: '加载动画3',
|
||||||
|
author: '图鸟北北',
|
||||||
|
url: '/templatePage/animate/loading/loading3'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'send',
|
||||||
|
title: '加载动画4',
|
||||||
|
author: '图鸟北北',
|
||||||
|
url: '/templatePage/animate/loading/loading4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'send',
|
||||||
|
title: '加载动画5',
|
||||||
|
author: '图鸟北北',
|
||||||
|
url: '/templatePage/animate/loading/loading5'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: '动效元素',
|
title: '动效元素',
|
||||||
backgroundColor: 'tn-cool-bg-color-1',
|
backgroundColor: 'tn-cool-bg-color-1',
|
||||||
list: [
|
list: [
|
||||||
{
|
|
||||||
icon: 'send',
|
|
||||||
title: '加载动画',
|
|
||||||
author: '图鸟北北',
|
|
||||||
url: '/templatePage/animate/loading/loading'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: 'send',
|
icon: 'send',
|
||||||
title: '流星悬浮',
|
title: '流星悬浮',
|
||||||
@@ -213,33 +267,33 @@ export default {
|
|||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
icon: 'send',
|
icon: 'send',
|
||||||
title: '3D全景(第三方，约120￥一年)',
|
title: '3D全景(第三方，有免费版付费版)',
|
||||||
author: '图鸟北北 & 芊云全景',
|
author: '图鸟北北 & 芊云全景',
|
||||||
url: '/templatePage/life/pano/pano'
|
url: '/templatePage/life/pano/pano'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'rocket',
|
icon: 'send',
|
||||||
title: 'Ucharts图表(第三方，免费开源)',
|
title: '3D模型(第三方，有免费版付费版)',
|
||||||
author: '图鸟北北 & Ucharts秋云',
|
author: '图鸟北北 & 芊云全景',
|
||||||
url: '/templatePage/life/candle/candle'
|
url: '/templatePage/life/pano/model'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'rocket',
|
icon: 'send',
|
||||||
title: '隔壁的小生(第三方，赞赏6￥可商用)',
|
|
||||||
author: '隔壁的小生',
|
|
||||||
url: '/templatePage/life/candle/candle'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'rocket',
|
|
||||||
title: '阿凡提·污克西西(第三方，免费开源)',
|
|
||||||
author: '阿凡提·污克西西',
|
|
||||||
url: '/templatePage/life/candle/candle'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'rocket',
|
|
||||||
title: '微信红包封面',
|
title: '微信红包封面',
|
||||||
author: '微信红包封面',
|
author: '微信红包封面',
|
||||||
url: '/templatePage/life/cover/cover'
|
url: '/templatePage/life/cover/cover'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'send',
|
||||||
|
title: '营销小游戏-魔方',
|
||||||
|
author: '最帅的你',
|
||||||
|
url: '/templatePage/life/cube/cube'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'rocket',
|
||||||
|
title: '图鸟生态，期待你的加入',
|
||||||
|
author: '合作微信 tnkewo',
|
||||||
|
url: '/templatePage/life/candle/candle'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
+305
-299
@@ -1,299 +1,305 @@
|
|||||||
/**
|
/**
|
||||||
* 页面展示列表数据
|
* 页面展示列表数据
|
||||||
*/
|
*/
|
||||||
export default {
|
export default {
|
||||||
data: [{
|
data: [{
|
||||||
title: '圈子博客',
|
title: '圈子博客',
|
||||||
backgroundColor: 'tn-cool-bg-color-1',
|
backgroundColor: 'tn-cool-bg-color-1',
|
||||||
list: [{
|
list: [{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '操作指引',
|
title: '操作指引',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/life/guide/guide'
|
url: '/vipPage/life/guide/guide'
|
||||||
},{
|
},{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '首次指引',
|
title: '首次指引',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/life/start/start'
|
url: '/vipPage/life/start/start'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '圈子首页',
|
title: '圈子首页',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/blog/blog/blog'
|
url: '/vipPage/blog/blog/blog'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '社交圈子',
|
title: '社交圈子',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/blog/socialize/socialize'
|
url: '/vipPage/blog/socialize/socialize'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '简约圈子(旧)',
|
title: '简约圈子(旧)',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/blog/circle/circle'
|
url: '/vipPage/blog/circle/circle'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '圈子个人',
|
title: '圈子个人',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/blog/myblog/myblog'
|
url: '/vipPage/blog/myblog/myblog'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '消息通知',
|
title: '消息通知',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/blog/message/message'
|
url: '/vipPage/blog/message/message'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '商品优选',
|
title: '商品优选',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/blog/prefer/prefer'
|
url: '/vipPage/blog/prefer/prefer'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '优选详情',
|
title: '优选详情',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/blog/product/product'
|
url: '/vipPage/blog/product/product'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '博客博主',
|
title: '博客博主',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/blog/blogger/blogger'
|
url: '/vipPage/blog/blogger/blogger'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '酷炫功能',
|
title: '酷炫功能',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/home/cool/cool'
|
url: '/vipPage/home/cool/cool'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '友情链接',
|
title: '友情链接',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/home/link/link'
|
url: '/vipPage/home/link/link'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '祝福页面',
|
title: '祝福页面',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/life/bless/bless'
|
url: '/vipPage/life/bless/bless'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '酷炫首页',
|
title: '酷炫首页',
|
||||||
backgroundColor: 'tn-cool-bg-color-1',
|
backgroundColor: 'tn-cool-bg-color-1',
|
||||||
list: [{
|
list: [{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '图鸟首页',
|
title: '图鸟首页',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/home/tuniao/tuniao'
|
url: '/vipPage/home/tuniao/tuniao'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '奶茶首页',
|
title: '奶茶首页',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/home/tea/tea'
|
url: '/vipPage/home/tea/tea'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '阅读首页',
|
title: '阅读首页',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/home/read/read'
|
url: '/vipPage/home/read/read'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '月亮首页',
|
title: '月亮首页',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/home/moon/moon'
|
url: '/vipPage/home/moon/moon'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '计划首页',
|
title: '计划首页',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/home/plan/plan'
|
url: '/vipPage/home/plan/plan'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '新年首页',
|
title: '新年首页',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/home/year/year'
|
url: '/vipPage/home/year/year'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '电影首页',
|
title: '电影首页',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/home/movie/movie'
|
url: '/vipPage/home/movie/movie'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '食物首页',
|
title: '食物首页',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/home/food/food'
|
url: '/vipPage/home/food/food'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '拟态首页',
|
title: '拟态首页',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/home/mimicry/mimicry'
|
url: '/vipPage/home/mimicry/mimicry'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '充电首页',
|
title: '充电首页',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/life/power/power'
|
url: '/vipPage/life/power/power'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '卡片首页',
|
title: '卡片首页',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/home/card/card'
|
url: '/vipPage/home/card/card'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '健康首页',
|
title: '健康首页',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/home/health/health'
|
url: '/vipPage/home/health/health'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '全景首页',
|
title: '全景首页',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/home/panoramic/panoramic'
|
url: '/vipPage/home/panoramic/panoramic'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: 'uCharts首页',
|
title: 'uCharts首页',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/home/ucharts/ucharts'
|
url: '/vipPage/home/ucharts/ucharts'
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '商城店铺',
|
title: '商城店铺',
|
||||||
backgroundColor: 'tn-cool-bg-color-1',
|
backgroundColor: 'tn-cool-bg-color-1',
|
||||||
list: [{
|
list: [{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '店铺商品',
|
title: '店铺商品',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/shop/store/store'
|
url: '/vipPage/shop/store/store'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '商品订单',
|
title: '商品订单',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/shop/order/order'
|
url: '/vipPage/shop/order/order'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '商品分类',
|
title: '商品分类',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/shop/classify/classify'
|
url: '/vipPage/shop/classify/classify'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '积分活动',
|
title: '积分活动',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/shop/money/money'
|
url: '/vipPage/shop/money/money'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '会员需求',
|
title: '会员需求',
|
||||||
backgroundColor: 'tn-cool-bg-color-1',
|
backgroundColor: 'tn-cool-bg-color-1',
|
||||||
list: [{
|
list: [{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: 'Drag长按拖拽随机固定',
|
title: 'Drag长按拖拽随机固定',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/components/drag/basic-drag/basic-drag'
|
url: '/vipPage/components/drag/basic-drag/basic-drag'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '图片上传长按拖拽',
|
title: '图片上传长按拖拽',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/components/drag/upload-image-drag/upload-image-drag'
|
url: '/vipPage/components/drag/upload-image-drag/upload-image-drag'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: 'Cropper图片裁剪',
|
title: 'Cropper图片裁剪',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/components/cropper/cropper'
|
url: '/vipPage/components/cropper/cropper'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: 'StackSwiper堆叠轮播',
|
title: 'StackSwiper堆叠轮播',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/components/stack-swiper/stack-swiper'
|
url: '/vipPage/components/stack-swiper/stack-swiper'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '重力效果',
|
title: '重力效果',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/home/gravity/page1/page1'
|
url: '/vipPage/home/gravity/page1/page1'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '下拉刷新',
|
title: '下拉刷新',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/components/scroll-view/index'
|
url: '/vipPage/components/scroll-view/index'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '级联选择',
|
title: '级联选择',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/components/cascade-selection/cascade-selection'
|
url: '/vipPage/components/cascade-selection/cascade-selection'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '瀑布流',
|
title: '瀑布流',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/components/waterfall/waterfall'
|
url: '/vipPage/components/waterfall/waterfall'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '树形菜单',
|
title: '树形菜单',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/components/tree-view/tree-view'
|
url: '/vipPage/components/tree-view/tree-view'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '表格',
|
title: '表格',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/components/table/index'
|
url: '/vipPage/components/table/index'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '图鸟轮播(实验)',
|
title: '取色器',
|
||||||
author: '图鸟科技',
|
author: '图鸟科技',
|
||||||
url: '/vipPage/components/custom-swiper/index'
|
url: '/vipPage/life/color/color'
|
||||||
}
|
},
|
||||||
]
|
{
|
||||||
},
|
icon: 'order',
|
||||||
{
|
title: '图鸟轮播(实验)',
|
||||||
title: '生态支持',
|
author: '图鸟科技',
|
||||||
backgroundColor: 'tn-cool-bg-color-1',
|
url: '/vipPage/components/custom-swiper/index'
|
||||||
list: [{
|
}
|
||||||
icon: 'order',
|
]
|
||||||
title: '短视频',
|
},
|
||||||
author: '图鸟 & 第三方',
|
{
|
||||||
url: '/thirdPage/short-video/short-video'
|
title: '生态支持',
|
||||||
},{
|
backgroundColor: 'tn-cool-bg-color-1',
|
||||||
icon: 'order',
|
list: [{
|
||||||
title: '外卖模板',
|
icon: 'order',
|
||||||
author: '图鸟 & 第三方',
|
title: '短视频',
|
||||||
url: '/takeOutPage/walking-route/walking-route'
|
author: '图鸟 & 第三方',
|
||||||
},
|
url: '/thirdPage/short-video/short-video'
|
||||||
{
|
},{
|
||||||
icon: 'order',
|
icon: 'order',
|
||||||
title: '期待你的加入',
|
title: '外卖模板',
|
||||||
author: '图鸟 & 第三方',
|
author: '图鸟 & 第三方',
|
||||||
url: '/templatePage/life/candle/candle'
|
url: '/takeOutPage/walking-route/walking-route'
|
||||||
}
|
},
|
||||||
]
|
{
|
||||||
}
|
icon: 'order',
|
||||||
]
|
title: '期待你的加入',
|
||||||
}
|
author: '图鸟 & 第三方',
|
||||||
|
url: '/templatePage/life/candle/candle'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|||||||
+54
@@ -442,6 +442,24 @@
|
|||||||
"navigationBarTitleText": "简约登录",
|
"navigationBarTitleText": "简约登录",
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
|
},{
|
||||||
|
"path": "money/demo1/demo1",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "蓝色充值",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
"path": "money/demo2/demo2",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "绿色充值",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
"path": "money/demo3/demo3",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "暗黑充值",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
}, {
|
}, {
|
||||||
"path": "health/qrcode/qrcode",
|
"path": "health/qrcode/qrcode",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -496,6 +514,12 @@
|
|||||||
"navigationBarTitleText": "3D全景",
|
"navigationBarTitleText": "3D全景",
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
|
},{
|
||||||
|
"path": "life/pano/model",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "3D模型",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
}, {
|
}, {
|
||||||
"path": "life/plus/plus",
|
"path": "life/plus/plus",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -527,6 +551,12 @@
|
|||||||
"navigationBarTitleText": "红包封面",
|
"navigationBarTitleText": "红包封面",
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
|
},{
|
||||||
|
"path": "life/cube/cube",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "魔方游戏",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
}, {
|
}, {
|
||||||
"path": "time/clock/clock",
|
"path": "time/clock/clock",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -539,6 +569,30 @@
|
|||||||
"navigationBarTitleText": "加载动画",
|
"navigationBarTitleText": "加载动画",
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
|
},{
|
||||||
|
"path": "animate/loading/loading2",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "加载动画",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
"path": "animate/loading/loading3",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "加载动画",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
"path": "animate/loading/loading4",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "加载动画",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
"path": "animate/loading/loading5",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "加载动画",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
}, {
|
}, {
|
||||||
"path": "animate/particle/particle",
|
"path": "animate/particle/particle",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
+170
-170
@@ -1,170 +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://resource.tuniaokj.com/images/index_bg/basic_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-direction-column tn-flex-col-center tn-flex-row-between"
|
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"
|
||||||
:class="[
|
:class="[
|
||||||
getRandomCoolBg(content_index)
|
getRandomCoolBg(content_index)
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<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 class="nav-link">
|
<view class="nav-link">
|
||||||
<view class='title'>{{ content_item.title }}</view>
|
<view class='title'>{{ content_item.title }}</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 basicListData from '@/mock/basic_page.js'
|
import basicListData from '@/mock/basic_page.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Basic',
|
name: 'Basic',
|
||||||
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: basicListData.data
|
navList: basicListData.data
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getRandomCoolBg() {
|
getRandomCoolBg() {
|
||||||
return this.$tn.color.getRandomCoolBgClass()
|
return this.$tn.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://resource.tuniaokj.com/images/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: 20rpx 30rpx;
|
padding: 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: center;
|
background-position: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 元素标题 start */
|
/* 元素标题 start */
|
||||||
.nav-link {
|
.nav-link {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
padding: 0 0 10rpx 0;
|
padding: 0 0 10rpx 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* 元素标题 end */
|
/* 元素标题 end */
|
||||||
|
|
||||||
/* 元素图标 start */
|
/* 元素图标 start */
|
||||||
.icon {
|
.icon {
|
||||||
font-variant: small-caps;
|
font-variant: small-caps;
|
||||||
width: 90rpx;
|
width: 90rpx;
|
||||||
height: 90rpx;
|
height: 90rpx;
|
||||||
line-height: 90rpx;
|
line-height: 90rpx;
|
||||||
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: 50rpx;
|
font-size: 50rpx;
|
||||||
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>
|
||||||
|
|||||||
+167
-167
@@ -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://resource.tuniaokj.com/images/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.$tn.color.getRandomCoolBgClass()
|
return this.$tn.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://resource.tuniaokj.com/images/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>
|
||||||
|
|||||||
+146
-146
@@ -1,146 +1,146 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="index">
|
<view class="index">
|
||||||
|
|
||||||
<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
|
<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
|
||||||
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
||||||
<Basic ref="basic"></Basic>
|
<Basic ref="basic"></Basic>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
|
<view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
|
||||||
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
||||||
<components ref="components"></components>
|
<components ref="components"></components>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
|
<view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
|
||||||
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
||||||
<vip ref="vip"></vip>
|
<vip ref="vip"></vip>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
|
<view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
|
||||||
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
||||||
<templatePage ref="template"></templatePage>
|
<templatePage ref="template"></templatePage>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
|
<view v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
|
||||||
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
||||||
<tuniao ref="about"></tuniao>
|
<tuniao ref="about"></tuniao>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<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 Vip from '../vip/vip.vue'
|
import Vip from '../vip/vip.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,
|
||||||
Vip,
|
Vip,
|
||||||
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: 'vip-fill',
|
activeIcon: 'vip-fill',
|
||||||
inactiveIcon: 'vip',
|
inactiveIcon: 'vip',
|
||||||
activeIconColor: '#FFFFFF',
|
activeIconColor: '#FFFFFF',
|
||||||
inactiveIconColor: '#FFFFFF',
|
inactiveIconColor: '#FFFFFF',
|
||||||
iconSize: 50,
|
iconSize: 50,
|
||||||
out: true
|
out: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '发现',
|
title: '发现',
|
||||||
activeIcon: 'discover-fill',
|
activeIcon: 'discover-fill',
|
||||||
inactiveIcon: 'discover',
|
inactiveIcon: 'discover',
|
||||||
count: 100
|
count: 100
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
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)
|
||||||
},
|
},
|
||||||
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>
|
||||||
|
|||||||
+194
-194
@@ -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://resource.tuniaokj.com/images/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.$tn.color.getRandomCoolBgClass()
|
return this.$tn.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://resource.tuniaokj.com/images/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>
|
||||||
|
|||||||
@@ -2,14 +2,14 @@
|
|||||||
<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://resource.tuniaokj.com/images/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-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/tuniao.jpg');width: 180rpx;height: 180rpx;background-size: cover;">
|
<view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/tuniao.jpg');width: 180rpx;height: 180rpx;background-size: cover;">
|
||||||
</view>
|
</view>
|
||||||
<!-- <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>
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
<!-- banner start-->
|
<!-- banner start-->
|
||||||
<!-- <view class="tn-flex tn-flex-wrap tn-padding-xs" @click="navTuniaoVue3">
|
<!-- <view class="tn-flex tn-flex-wrap tn-padding-xs" @click="navTuniaoVue3">
|
||||||
<view class="" style="width: 100%;">
|
<view class="" style="width: 100%;">
|
||||||
<view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/capsule-banner/banner-Vue3.png');">
|
<view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/capsule-banner/banner-Vue3.png');">
|
||||||
<view class="image-capsule">
|
<view class="image-capsule">
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -396,7 +396,7 @@
|
|||||||
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://resource.tuniaokj.com/images/cool_bg_image/6.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__left {
|
&__left {
|
||||||
@@ -422,7 +422,7 @@
|
|||||||
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://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -501,7 +501,7 @@
|
|||||||
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://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -539,7 +539,7 @@
|
|||||||
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://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+10
-10
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="vip tn-safe-area-inset-bottom">
|
<view class="vip tn-safe-area-inset-bottom">
|
||||||
<view class="top-backgroup">
|
<view class="top-backgroup">
|
||||||
<image src='https://tnuiimage.tnkjapp.com/index_bg/tools_new.jpg' mode='widthFix' class='backgroud-image'></image>
|
<image src='https://resource.tuniaokj.com/images/index_bg/tools_new.jpg' mode='widthFix' class='backgroud-image'></image>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<swiper class="card-swiper" :circular="true"
|
<swiper class="card-swiper" :circular="true"
|
||||||
@@ -96,7 +96,7 @@
|
|||||||
<!-- banner start-->
|
<!-- banner start-->
|
||||||
<view class="tn-flex tn-flex-wrap tn-padding-xs" @click="navTuniaoMoban">
|
<view class="tn-flex tn-flex-wrap tn-padding-xs" @click="navTuniaoMoban">
|
||||||
<view class="" style="width: 100%;">
|
<view class="" style="width: 100%;">
|
||||||
<view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/capsule-banner/banner-circle2.png');">
|
<view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/capsule-banner/banner-circle2.png');">
|
||||||
<view class="image-capsule">
|
<view class="image-capsule">
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -170,31 +170,31 @@
|
|||||||
swiperList: [{
|
swiperList: [{
|
||||||
id: 0,
|
id: 0,
|
||||||
type: 'image',
|
type: 'image',
|
||||||
url: 'https://tnuiimage.tnkjapp.com/index_bg/circle1.jpg',
|
url: 'https://resource.tuniaokj.com/images/index_bg/circle1.jpg',
|
||||||
}, {
|
}, {
|
||||||
id: 1,
|
id: 1,
|
||||||
type: 'image',
|
type: 'image',
|
||||||
url: 'https://tnuiimage.tnkjapp.com/index_bg/circle2.jpg',
|
url: 'https://resource.tuniaokj.com/images/index_bg/circle2.jpg',
|
||||||
}, {
|
}, {
|
||||||
id: 2,
|
id: 2,
|
||||||
type: 'image',
|
type: 'image',
|
||||||
url: 'https://tnuiimage.tnkjapp.com/index_bg/circle3.jpg',
|
url: 'https://resource.tuniaokj.com/images/index_bg/circle3.jpg',
|
||||||
}, {
|
}, {
|
||||||
id: 3,
|
id: 3,
|
||||||
type: 'image',
|
type: 'image',
|
||||||
url: 'https://tnuiimage.tnkjapp.com/index_bg/circle4.jpg',
|
url: 'https://resource.tuniaokj.com/images/index_bg/circle4.jpg',
|
||||||
},{
|
},{
|
||||||
id: 4,
|
id: 4,
|
||||||
type: 'image',
|
type: 'image',
|
||||||
url: 'https://tnuiimage.tnkjapp.com/index_bg/circle5.jpg',
|
url: 'https://resource.tuniaokj.com/images/index_bg/circle5.jpg',
|
||||||
},{
|
},{
|
||||||
id: 5,
|
id: 5,
|
||||||
type: 'image',
|
type: 'image',
|
||||||
url: 'https://tnuiimage.tnkjapp.com/index_bg/circle6.jpg',
|
url: 'https://resource.tuniaokj.com/images/index_bg/circle6.jpg',
|
||||||
},{
|
},{
|
||||||
id: 6,
|
id: 6,
|
||||||
type: 'image',
|
type: 'image',
|
||||||
url: 'https://tnuiimage.tnkjapp.com/index_bg/circle7.jpg',
|
url: 'https://resource.tuniaokj.com/images/index_bg/circle7.jpg',
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
// nav菜单列表
|
// nav菜单列表
|
||||||
@@ -410,7 +410,7 @@
|
|||||||
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://resource.tuniaokj.com/images/title_bg/title44.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 */
|
||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+27
-27
@@ -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.$tn.vuex('user.name', '图鸟小菜')
|
// 修改vuex的state中的user.name变量为图鸟小菜 => this.$tn.vuex('user.name', '图鸟小菜')
|
||||||
// 修改vuexde state中的version变量为1.0.1 => this.$tn.vuex('version', 1.0.1)
|
// 修改vuexde state中的version变量为1.0.1 => this.$tn.vuex('version', 1.0.1)
|
||||||
this.$tn.vuex = (name, value) => {
|
this.$tn.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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+74
-74
@@ -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
|
||||||
@@ -1,226 +1,226 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="take-out__walking-route">
|
<view class="take-out__walking-route">
|
||||||
|
|
||||||
<!-- 顶部自定义导航 -->
|
<!-- 顶部自定义导航 -->
|
||||||
<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'}">
|
||||||
<map
|
<map
|
||||||
class="take-out__map"
|
class="take-out__map"
|
||||||
:longitude="location.longitude"
|
:longitude="location.longitude"
|
||||||
:latitude="location.latitude"
|
:latitude="location.latitude"
|
||||||
:scale="18"
|
:scale="18"
|
||||||
:polyline="mapPolyline"
|
:polyline="mapPolyline"
|
||||||
:markers="mapMarkers"
|
:markers="mapMarkers"
|
||||||
></map>
|
></map>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<tn-modal
|
<tn-modal
|
||||||
v-model="openSettingFlag"
|
v-model="openSettingFlag"
|
||||||
:custom="true"
|
:custom="true"
|
||||||
:showCloseBtn="true"
|
:showCloseBtn="true"
|
||||||
width="auto"
|
width="auto"
|
||||||
padding="40rpx 80rpx"
|
padding="40rpx 80rpx"
|
||||||
>
|
>
|
||||||
<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="tn-text-bold tn-text-lg">授权使用位置信息</view>
|
<view class="tn-text-bold tn-text-lg">授权使用位置信息</view>
|
||||||
<view class="tn-margin-top-xs tn-color-gray">获取定位失败, 请进行设置</view>
|
<view class="tn-margin-top-xs tn-color-gray">获取定位失败, 请进行设置</view>
|
||||||
<view class="tn-margin-top">
|
<view class="tn-margin-top">
|
||||||
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="openSetting">打开设置</tn-button>
|
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="openSetting">打开设置</tn-button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-modal>
|
</tn-modal>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'takeOutWalkingRoute',
|
name: 'takeOutWalkingRoute',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
openSettingFlag: false,
|
openSettingFlag: false,
|
||||||
location: {
|
location: {
|
||||||
latitude: 22.970675,
|
latitude: 22.970675,
|
||||||
longitude: 113.334259
|
longitude: 113.334259
|
||||||
},
|
},
|
||||||
mapPolyline: [{
|
mapPolyline: [{
|
||||||
points: [
|
points: [
|
||||||
{latitude: 22.969238, longitude: 113.333890},
|
{latitude: 22.969238, longitude: 113.333890},
|
||||||
{latitude: 22.969309, longitude: 113.333878},
|
{latitude: 22.969309, longitude: 113.333878},
|
||||||
{latitude: 22.969334, longitude: 113.334132},
|
{latitude: 22.969334, longitude: 113.334132},
|
||||||
{latitude: 22.969649, longitude: 113.334130},
|
{latitude: 22.969649, longitude: 113.334130},
|
||||||
{latitude: 22.970044, longitude: 113.334130},
|
{latitude: 22.970044, longitude: 113.334130},
|
||||||
{latitude: 22.970578, longitude: 113.334130},
|
{latitude: 22.970578, longitude: 113.334130},
|
||||||
{latitude: 22.970606, longitude: 113.334255},
|
{latitude: 22.970606, longitude: 113.334255},
|
||||||
{latitude: 22.970667, longitude: 113.334345},
|
{latitude: 22.970667, longitude: 113.334345},
|
||||||
{latitude: 22.970673, longitude: 113.334458},
|
{latitude: 22.970673, longitude: 113.334458},
|
||||||
{latitude: 22.970798, longitude: 113.334452},
|
{latitude: 22.970798, longitude: 113.334452},
|
||||||
{latitude: 22.970962, longitude: 113.334530},
|
{latitude: 22.970962, longitude: 113.334530},
|
||||||
{latitude: 22.971108, longitude: 113.334564},
|
{latitude: 22.971108, longitude: 113.334564},
|
||||||
{latitude: 22.971111, longitude: 113.334631}
|
{latitude: 22.971111, longitude: 113.334631}
|
||||||
],
|
],
|
||||||
color: '#01BEFFFF',
|
color: '#01BEFFFF',
|
||||||
width: 3,
|
width: 3,
|
||||||
arrowLine: true
|
arrowLine: true
|
||||||
}],
|
}],
|
||||||
mapMarkers: [{
|
mapMarkers: [{
|
||||||
id: 0,
|
id: 0,
|
||||||
latitude: 22.971093,
|
latitude: 22.971093,
|
||||||
longitude: 113.334740,
|
longitude: 113.334740,
|
||||||
iconPath: '/takeOutPage/static/images/location.png',
|
iconPath: '/takeOutPage/static/images/location.png',
|
||||||
width: 20,
|
width: 20,
|
||||||
height: 30,
|
height: 30,
|
||||||
callout: {
|
callout: {
|
||||||
content: '您所在位置',
|
content: '您所在位置',
|
||||||
color: '#080808',
|
color: '#080808',
|
||||||
bgColor: 'transparent',
|
bgColor: 'transparent',
|
||||||
display: 'ALWAYS'
|
display: 'ALWAYS'
|
||||||
}
|
}
|
||||||
},{
|
},{
|
||||||
id: 1,
|
id: 1,
|
||||||
latitude: 22.969238,
|
latitude: 22.969238,
|
||||||
longitude: 113.333890,
|
longitude: 113.333890,
|
||||||
iconPath: '/takeOutPage/static/images/take_out_car.png',
|
iconPath: '/takeOutPage/static/images/take_out_car.png',
|
||||||
width: 30,
|
width: 30,
|
||||||
height: 30,
|
height: 30,
|
||||||
rotate: 270
|
rotate: 270
|
||||||
}],
|
}],
|
||||||
// 当前外卖小车的坐标位置Index
|
// 当前外卖小车的坐标位置Index
|
||||||
takeOutCarIndex: 0
|
takeOutCarIndex: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-KUAISHOU || MP-LARK
|
// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-KUAISHOU || MP-LARK
|
||||||
// this.getUserAuthorize()
|
// this.getUserAuthorize()
|
||||||
// #endif
|
// #endif
|
||||||
// #ifdef APP-VUE || H5
|
// #ifdef APP-VUE || H5
|
||||||
// this.getUserLocation()
|
// this.getUserLocation()
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
this.runIntervalTimer = setInterval(() => {
|
this.runIntervalTimer = setInterval(() => {
|
||||||
let rotate = 0
|
let rotate = 0
|
||||||
const pointsLength = this.mapPolyline[0].points.length
|
const pointsLength = this.mapPolyline[0].points.length
|
||||||
if (this.takeOutCarIndex >= pointsLength) {
|
if (this.takeOutCarIndex >= pointsLength) {
|
||||||
this.takeOutCarIndex = 0
|
this.takeOutCarIndex = 0
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.takeOutCarIndex < pointsLength - 2) {
|
if (this.takeOutCarIndex < pointsLength - 2) {
|
||||||
const currentPoint = this.mapPolyline[0].points[this.takeOutCarIndex]
|
const currentPoint = this.mapPolyline[0].points[this.takeOutCarIndex]
|
||||||
const nextPoint = this.mapPolyline[0].points[this.takeOutCarIndex+1]
|
const nextPoint = this.mapPolyline[0].points[this.takeOutCarIndex+1]
|
||||||
rotate = this.getAngle(currentPoint, nextPoint)
|
rotate = this.getAngle(currentPoint, nextPoint)
|
||||||
}
|
}
|
||||||
|
|
||||||
this.mapMarkers[1].latitude = this.mapPolyline[0].points[this.takeOutCarIndex].latitude
|
this.mapMarkers[1].latitude = this.mapPolyline[0].points[this.takeOutCarIndex].latitude
|
||||||
this.mapMarkers[1].longitude = this.mapPolyline[0].points[this.takeOutCarIndex].longitude
|
this.mapMarkers[1].longitude = this.mapPolyline[0].points[this.takeOutCarIndex].longitude
|
||||||
this.mapMarkers[1].rotate = rotate === 0 ? 0 : rotate - 90
|
this.mapMarkers[1].rotate = rotate === 0 ? 0 : rotate - 90
|
||||||
this.takeOutCarIndex++
|
this.takeOutCarIndex++
|
||||||
}, 500)
|
}, 500)
|
||||||
},
|
},
|
||||||
onUnload() {
|
onUnload() {
|
||||||
if (this.runIntervalTimer) {
|
if (this.runIntervalTimer) {
|
||||||
clearInterval(this.runIntervalTimer)
|
clearInterval(this.runIntervalTimer)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 获取用户是否已经授权获取位置信息
|
// 获取用户是否已经授权获取位置信息
|
||||||
getUserAuthorize() {
|
getUserAuthorize() {
|
||||||
uni.authorize({
|
uni.authorize({
|
||||||
scope: 'scope.userLocation',
|
scope: 'scope.userLocation',
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
this.getUserLocation()
|
this.getUserLocation()
|
||||||
},
|
},
|
||||||
fail: (err) => {
|
fail: (err) => {
|
||||||
// 获取权限失败，判断用户是否禁止了获取用户信息
|
// 获取权限失败，判断用户是否禁止了获取用户信息
|
||||||
// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-KUAISHOU || MP-LARK
|
// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-KUAISHOU || MP-LARK
|
||||||
uni.getSetting({
|
uni.getSetting({
|
||||||
success: (settingRes) => {
|
success: (settingRes) => {
|
||||||
if (!settingRes.authSetting.hasOwnProperty('scope.userLocation') || !settingRes.authSetting['scope.userLocation']) {
|
if (!settingRes.authSetting.hasOwnProperty('scope.userLocation') || !settingRes.authSetting['scope.userLocation']) {
|
||||||
this.openSettingFlag = true
|
this.openSettingFlag = true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
fail: (settingErr) => {}
|
fail: (settingErr) => {}
|
||||||
})
|
})
|
||||||
// #endif
|
// #endif
|
||||||
// #ifdef APP-VUE || H5
|
// #ifdef APP-VUE || H5
|
||||||
this.$tn.message.toast('获取定位失败, 请重试')
|
this.$tn.message.toast('获取定位失败, 请重试')
|
||||||
// #endif
|
// #endif
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 获取用户的当前位置信息
|
// 获取用户的当前位置信息
|
||||||
getUserLocation() {
|
getUserLocation() {
|
||||||
uni.getLocation({
|
uni.getLocation({
|
||||||
type: 'gcj02',
|
type: 'gcj02',
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
this.location.latitude = res.latitude
|
this.location.latitude = res.latitude
|
||||||
this.location.longitude = res.longitude
|
this.location.longitude = res.longitude
|
||||||
},
|
},
|
||||||
fail: (err) => {
|
fail: (err) => {
|
||||||
this.$tn.message.toast('获取定位失败, 请重试')
|
this.$tn.message.toast('获取定位失败, 请重试')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 打开设置页面
|
// 打开设置页面
|
||||||
openSetting() {
|
openSetting() {
|
||||||
uni.openSetting({
|
uni.openSetting({
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.authSetting.hasOwnProperty('scope.userLocation') && res.authSetting['scope.userLocation'] === true) {
|
if (res.authSetting.hasOwnProperty('scope.userLocation') && res.authSetting['scope.userLocation'] === true) {
|
||||||
this.openSettingFlag = false
|
this.openSettingFlag = false
|
||||||
this.getUserLocation()
|
this.getUserLocation()
|
||||||
} else {
|
} else {
|
||||||
this.$tn.message.toast('设置获取位置信息失败')
|
this.$tn.message.toast('设置获取位置信息失败')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
fail: (err) => {}
|
fail: (err) => {}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 获取两点之间的角度
|
// 获取两点之间的角度
|
||||||
getAngle(current, next) {
|
getAngle(current, next) {
|
||||||
let ret = 0
|
let ret = 0
|
||||||
let w1 = current.latitude/180 * Math.PI
|
let w1 = current.latitude/180 * Math.PI
|
||||||
let j1 = current.longitude/180 * Math.PI
|
let j1 = current.longitude/180 * Math.PI
|
||||||
|
|
||||||
let w2 = next.latitude/180 * Math.PI
|
let w2 = next.latitude/180 * Math.PI
|
||||||
let j2 = next.longitude/180 * Math.PI
|
let j2 = next.longitude/180 * Math.PI
|
||||||
|
|
||||||
ret = 4 * Math.pow(Math.sin((w1 - w2) / 2), 2) - Math.pow(Math.sin((j1 - j2) / 2) * (Math.cos(w1) - Math.cos(w2)), 2)
|
ret = 4 * Math.pow(Math.sin((w1 - w2) / 2), 2) - Math.pow(Math.sin((j1 - j2) / 2) * (Math.cos(w1) - Math.cos(w2)), 2)
|
||||||
ret = Math.sqrt(ret)
|
ret = Math.sqrt(ret)
|
||||||
|
|
||||||
// var temp = Math.sin(Math.abs(j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
|
// var temp = Math.sin(Math.abs(j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
|
||||||
let temp = Math.sin((j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2))
|
let temp = Math.sin((j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2))
|
||||||
ret = ret/temp
|
ret = ret/temp
|
||||||
|
|
||||||
ret = Math.atan(ret) / Math.PI * 180
|
ret = Math.atan(ret) / Math.PI * 180
|
||||||
ret += 90
|
ret += 90
|
||||||
|
|
||||||
// 这里用如此臃肿的if..else是为了判定追踪单个点的具体情况,从而调整ret的值
|
// 这里用如此臃肿的if..else是为了判定追踪单个点的具体情况,从而调整ret的值
|
||||||
if(j1-j2 < 0){
|
if(j1-j2 < 0){
|
||||||
if(w1-w2 < 0){
|
if(w1-w2 < 0){
|
||||||
ret = ret
|
ret = ret
|
||||||
}else{
|
}else{
|
||||||
ret = -ret+180
|
ret = -ret+180
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
if(w1-w2 < 0){
|
if(w1-w2 < 0){
|
||||||
ret = 180+ret
|
ret = 180+ret
|
||||||
}else{
|
}else{
|
||||||
ret = -ret
|
ret = -ret
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return ret
|
return ret
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.take-out {
|
.take-out {
|
||||||
|
|
||||||
|
|
||||||
&__map {
|
&__map {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - 300px);
|
height: calc(100vh - 300px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+37
-37
@@ -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>
|
||||||
|
|||||||
@@ -1,226 +1,226 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="template-bubble">
|
<view class="template-bubble">
|
||||||
|
|
||||||
<!-- 顶部自定义导航 -->
|
<!-- 顶部自定义导航 -->
|
||||||
<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="bubble" id="bubble" class="bubble" :style="{width: `${windowWidth}px`, height: `${windowHeight}px`}"></canvas>
|
<canvas canvas-id="bubble" id="bubble" class="bubble" :style="{width: `${windowWidth}px`, height: `${windowHeight}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'
|
||||||
export default {
|
export default {
|
||||||
name: 'TemplateBubble',
|
name: 'TemplateBubble',
|
||||||
mixins: [template_page_mixin],
|
mixins: [template_page_mixin],
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
windowHeight: 0,
|
windowHeight: 0,
|
||||||
windowWidth: 0,
|
windowWidth: 0,
|
||||||
actionTimer: null,
|
actionTimer: null,
|
||||||
animationTimer: null,
|
animationTimer: null,
|
||||||
queue: {},
|
queue: {},
|
||||||
ctx: null
|
ctx: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
this.getSystemInfo()
|
this.getSystemInfo()
|
||||||
},
|
},
|
||||||
onReady() {
|
onReady() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.queue = {}
|
this.queue = {}
|
||||||
this.ctx = uni.createCanvasContext("bubble", this)
|
this.ctx = uni.createCanvasContext("bubble", this)
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.actionTimer = setInterval(() => {
|
this.actionTimer = setInterval(() => {
|
||||||
this.generateBubble()
|
this.generateBubble()
|
||||||
}, 500)
|
}, 500)
|
||||||
}, 1000)
|
}, 1000)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
onUnload() {
|
onUnload() {
|
||||||
this.clearActionTimer()
|
this.clearActionTimer()
|
||||||
this.clearAnimationTimer()
|
this.clearAnimationTimer()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 获取系统信息
|
// 获取系统信息
|
||||||
getSystemInfo() {
|
getSystemInfo() {
|
||||||
const systemInfo = uni.getSystemInfoSync()
|
const systemInfo = uni.getSystemInfoSync()
|
||||||
if (!systemInfo) {
|
if (!systemInfo) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.getSystemInfo()
|
this.getSystemInfo()
|
||||||
}, 50)
|
}, 50)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
this.windowHeight = systemInfo.safeArea.height
|
this.windowHeight = systemInfo.safeArea.height
|
||||||
this.windowWidth = systemInfo.safeArea.width
|
this.windowWidth = systemInfo.safeArea.width
|
||||||
},
|
},
|
||||||
|
|
||||||
// 生成泡泡
|
// 生成泡泡
|
||||||
generateBubble() {
|
generateBubble() {
|
||||||
const image = "https://tnuiimage.tnkjapp.com/bubble/" + this.$tn.number.randomInt(1, 33) + ".png"
|
const image = "https://resource.tuniaokj.com/images/bubble/" + this.$tn.number.randomInt(1, 33) + ".png"
|
||||||
uni.getImageInfo({
|
uni.getImageInfo({
|
||||||
src: image,
|
src: image,
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.errMsg === 'getImageInfo:ok') {
|
if (res.errMsg === 'getImageInfo:ok') {
|
||||||
const anmationData = {
|
const anmationData = {
|
||||||
id: new Date().getTime(),
|
id: new Date().getTime(),
|
||||||
timer: 0,
|
timer: 0,
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
pathData: this.generatePathData(),
|
pathData: this.generatePathData(),
|
||||||
image: res.path,
|
image: res.path,
|
||||||
factor: {
|
factor: {
|
||||||
speed: 0.0006, // 运动速度，值越小越慢
|
speed: 0.0006, // 运动速度，值越小越慢
|
||||||
t: 0.1 // 贝塞尔函数系数，当为0，就是从无到有，这时候屏幕高度也要调一下
|
t: 0.1 // 贝塞尔函数系数，当为0，就是从无到有，这时候屏幕高度也要调一下
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (Object.keys(this.queue).length > 0) {
|
if (Object.keys(this.queue).length > 0) {
|
||||||
this.queue[anmationData.id] = anmationData
|
this.queue[anmationData.id] = anmationData
|
||||||
} else {
|
} else {
|
||||||
this.queue[anmationData.id] = anmationData
|
this.queue[anmationData.id] = anmationData
|
||||||
this.bubbleAnimate()
|
this.bubbleAnimate()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 动画相关 */
|
/* 动画相关 */
|
||||||
// 生成运动的路径数据
|
// 生成运动的路径数据
|
||||||
generatePathData() {
|
generatePathData() {
|
||||||
let width = this.windowWidth,
|
let width = this.windowWidth,
|
||||||
height = this.windowHeight;
|
height = this.windowHeight;
|
||||||
const p0 = {
|
const p0 = {
|
||||||
x: 0.72 * width,
|
x: 0.72 * width,
|
||||||
y: height
|
y: height
|
||||||
}
|
}
|
||||||
const p1 = {
|
const p1 = {
|
||||||
x: this.$tn.number.random(0.22 * width, 0.33 * width),
|
x: this.$tn.number.random(0.22 * width, 0.33 * width),
|
||||||
y: this.$tn.number.random(0.5 * height, 0.75 * height)
|
y: this.$tn.number.random(0.5 * height, 0.75 * height)
|
||||||
}
|
}
|
||||||
const p2 = {
|
const p2 = {
|
||||||
x: this.$tn.number.random(0, 0.88 * width),
|
x: this.$tn.number.random(0, 0.88 * width),
|
||||||
y: this.$tn.number.random(0.25 * height, 0.5 * height)
|
y: this.$tn.number.random(0.25 * height, 0.5 * height)
|
||||||
}
|
}
|
||||||
const p3 = {
|
const p3 = {
|
||||||
x: this.$tn.number.random(0, 0.88 * width),
|
x: this.$tn.number.random(0, 0.88 * width),
|
||||||
y: this.$tn.number.random(0, 0.125 * height)
|
y: this.$tn.number.random(0, 0.125 * height)
|
||||||
}
|
}
|
||||||
return [p0, p1, p2, p3]
|
return [p0, p1, p2, p3]
|
||||||
},
|
},
|
||||||
// 更新运动的路径
|
// 更新运动的路径
|
||||||
updatePath(data, factor) {
|
updatePath(data, factor) {
|
||||||
const p0 = data[0]
|
const p0 = data[0]
|
||||||
const p1 = data[1]
|
const p1 = data[1]
|
||||||
const p2 = data[2]
|
const p2 = data[2]
|
||||||
const p3 = data[3]
|
const p3 = data[3]
|
||||||
|
|
||||||
const t = factor.t
|
const t = factor.t
|
||||||
|
|
||||||
/*计算多项式系数 （下同）*/
|
/*计算多项式系数 （下同）*/
|
||||||
const cx1 = 3 * (p1.x - p0.x)
|
const cx1 = 3 * (p1.x - p0.x)
|
||||||
const bx1 = 3 * (p2.x - p1.x) - cx1
|
const bx1 = 3 * (p2.x - p1.x) - cx1
|
||||||
const ax1 = p3.x - p0.x - cx1 - bx1
|
const ax1 = p3.x - p0.x - cx1 - bx1
|
||||||
|
|
||||||
const cy1 = 3 * (p1.y - p0.y)
|
const cy1 = 3 * (p1.y - p0.y)
|
||||||
const by1 = 3 * (p2.y - p1.y) - cy1
|
const by1 = 3 * (p2.y - p1.y) - cy1
|
||||||
const ay1 = p3.y - p0.y - cy1 - by1
|
const ay1 = p3.y - p0.y - cy1 - by1
|
||||||
|
|
||||||
const x = ax1 * (t * t * t) + bx1 * (t * t) + cx1 * t + p0.x
|
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
|
const y = ay1 * (t * t * t) + by1 * (t * t) + cy1 * t + p0.y
|
||||||
// console.log(p0.y, p1.y, p2.y, p3.y, y);
|
// console.log(p0.y, p1.y, p2.y, p3.y, y);
|
||||||
return {
|
return {
|
||||||
x,
|
x,
|
||||||
y
|
y
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 执行泡泡动画
|
// 执行泡泡动画
|
||||||
bubbleAnimate() {
|
bubbleAnimate() {
|
||||||
let width = this.windowWidth,
|
let width = this.windowWidth,
|
||||||
height = this.windowHeight;
|
height = this.windowHeight;
|
||||||
Object.keys(this.queue).forEach(key => {
|
Object.keys(this.queue).forEach(key => {
|
||||||
const anmationData = this.queue[+key];
|
const anmationData = this.queue[+key];
|
||||||
const {
|
const {
|
||||||
x,
|
x,
|
||||||
y
|
y
|
||||||
} = this.updatePath(
|
} = this.updatePath(
|
||||||
anmationData.pathData,
|
anmationData.pathData,
|
||||||
anmationData.factor
|
anmationData.factor
|
||||||
)
|
)
|
||||||
const speed = anmationData.factor.speed
|
const speed = anmationData.factor.speed
|
||||||
anmationData.factor.t += speed
|
anmationData.factor.t += speed
|
||||||
|
|
||||||
var curWidth = 30
|
var curWidth = 30
|
||||||
curWidth = (height - y) / 1.5
|
curWidth = (height - y) / 1.5
|
||||||
curWidth = Math.min(30, curWidth)
|
curWidth = Math.min(30, curWidth)
|
||||||
|
|
||||||
var curAlpha = anmationData.opacity
|
var curAlpha = anmationData.opacity
|
||||||
curAlpha = y / (0.3 * height) //消失的高度适当调一下
|
curAlpha = y / (0.3 * height) //消失的高度适当调一下
|
||||||
curAlpha = Math.min(1, curAlpha)
|
curAlpha = Math.min(1, curAlpha)
|
||||||
this.ctx.globalAlpha = curAlpha
|
this.ctx.globalAlpha = curAlpha
|
||||||
this.ctx.drawImage(anmationData.image, x - curWidth / 2, y, curWidth, curWidth)
|
this.ctx.drawImage(anmationData.image, x - curWidth / 2, y, curWidth, curWidth)
|
||||||
// this.ctx.setFillStyle('red')
|
// this.ctx.setFillStyle('red')
|
||||||
// this.ctx.fillRect(x - curWidth / 2, y, 50, 50)
|
// this.ctx.fillRect(x - curWidth / 2, y, 50, 50)
|
||||||
if (anmationData.factor.t > 1) {
|
if (anmationData.factor.t > 1) {
|
||||||
delete this.queue[anmationData.id]
|
delete this.queue[anmationData.id]
|
||||||
}
|
}
|
||||||
if (y > height) {
|
if (y > height) {
|
||||||
delete this.queue[anmationData.id]
|
delete this.queue[anmationData.id]
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.ctx.draw()
|
this.ctx.draw()
|
||||||
if (Object.keys(this.queue).length > 0) {
|
if (Object.keys(this.queue).length > 0) {
|
||||||
this.animationTimer = setTimeout(() => {
|
this.animationTimer = setTimeout(() => {
|
||||||
this.bubbleAnimate()
|
this.bubbleAnimate()
|
||||||
}, 5)
|
}, 5)
|
||||||
} else {
|
} else {
|
||||||
this.clearAnimationTimer()()
|
this.clearAnimationTimer()()
|
||||||
this.ctx.draw() // 清空画面
|
this.ctx.draw() // 清空画面
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// 清除定时器
|
// 清除定时器
|
||||||
clearActionTimer() {
|
clearActionTimer() {
|
||||||
if (this.actionTimer) {
|
if (this.actionTimer) {
|
||||||
clearInterval(this.actionTimer)
|
clearInterval(this.actionTimer)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
clearAnimationTimer() {
|
clearAnimationTimer() {
|
||||||
if (this.animationTimer) {
|
if (this.animationTimer) {
|
||||||
clearTimeout(this.animationTimer)
|
clearTimeout(this.animationTimer)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</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-bubble {
|
.template-bubble {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: linear-gradient(-120deg, #9A5CE5, #01BEFF, #00F5D4, #43e97b);
|
background: linear-gradient(-120deg, #9A5CE5, #01BEFF, #00F5D4, #43e97b);
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
||||||
.bubble {
|
.bubble {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 1024;
|
z-index: 1024;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -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://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/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://resource.tuniaokj.com/images/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>
|
||||||
|
|||||||
@@ -70,7 +70,7 @@
|
|||||||
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://resource.tuniaokj.com/images/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);
|
||||||
@@ -90,8 +90,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 加载部分 */
|
/* 加载部分 */
|
||||||
.components-anloading {
|
.components-anloading {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
@@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<view class="template-content">
|
||||||
|
<!-- 顶部自定义导航 -->
|
||||||
|
<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="tn-margin tn-text-center" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||||
|
|
||||||
|
<view class="load">
|
||||||
|
<text></text>
|
||||||
|
<text></text>
|
||||||
|
<text></text>
|
||||||
|
<text></text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||||
|
export default {
|
||||||
|
name: 'TemplateContent',
|
||||||
|
mixins: [template_page_mixin],
|
||||||
|
data(){
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||||
|
|
||||||
|
/* 加载 */
|
||||||
|
.load{position:absolute;top:50%;left:42%;transform:translate(-50%, -50%);
|
||||||
|
width:60px;
|
||||||
|
height:60px;
|
||||||
|
}
|
||||||
|
.load text{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}
|
||||||
|
|
||||||
|
.load :first-child{background:#4B98FE;animation-delay:-1.5s}
|
||||||
|
.load :nth-child(2){background:#00D05E;animation-delay:-1s}
|
||||||
|
.load :nth-child(3){background:#FFAC00;animation-delay:-0.5s}
|
||||||
|
.load :last-child{background:#FB6A67}
|
||||||
|
|
||||||
|
@keyframes spin{
|
||||||
|
0%,100%{transform:translate(0)}
|
||||||
|
25%{transform:translate(160%)}
|
||||||
|
50%{transform:translate(160%, 160%)}
|
||||||
|
75%{transform:translate(0, 160%)}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user