Compare commits

49 Commits

Author SHA1 Message Date
Aisen b44bb802ed Merge remote-tracking branch 'origin/master' 2024-06-21 19:01:16 +08:00
Aisen 9dd0ea76b5 [add] input 左边图标,新增2个prop:leftIcon 左边图标、showLeftIcon是否显示左边图标,新增一个事件,leftClick:点击左边的触发 2024-06-21 19:01:05 +08:00
Aisen 125866d0e1 !10 删除console调试信息
感谢
2024-06-21 10:33:24 +00:00
Aisen 0d09b34409 Merge remote-tracking branch 'origin/master' 2024-06-21 18:24:09 +08:00
Aisen 6142c5c654 [add] tabs 新增 inactiveItemStyle 未选中的item样式 2024-06-21 18:24:01 +08:00
wssam c6bbf0a829 删除console调试信息
Signed-off-by: wssam <573616439@qq.com>
2024-04-25 09:15:50 +00:00
Mandy d0f4356c9f !6 update tuniao-ui/components/tn-avatar/tn-avatar.vue.
Merge pull request !6 from wssam/N/A
2024-04-08 06:20:30 +00:00
Mandy bc85894ca4 !7 update tuniao-ui/components/tn-action-sheet/tn-action-sheet.vue.
Merge pull request !7 from wssam/N/A
2024-04-08 02:01:41 +00:00
zhengliming f1b95729ea [fix] 通知bar的动态修改无法显示的问题 2024-04-07 11:07:49 +08:00
wssam ba4690b114 update tuniao-ui/components/tn-action-sheet/tn-action-sheet.vue.
修复$tn变量错误问题

Signed-off-by: wssam <573616439@qq.com>
2024-03-29 14:50:05 +00:00
zhengliming 42f04770c4 [add] input右边图标点击事件回传,可以设置防抖节流功能。 2024-03-20 20:33:07 +08:00
zhengliming 59ad09b521 [fix] 修复input不能平铺100%的问题 2024-03-16 22:49:59 +08:00
wssam 3fbf31e52f update tuniao-ui/components/tn-avatar/tn-avatar.vue.
增加fontColor、fontSize、fontColorClass的控制,修复字体大小及颜色设置无效的问题

Signed-off-by: wssam <573616439@qq.com>
2024-03-11 11:14:08 +00:00
zhengliming 0d8ff2e98d [fix] 修复slider滑块 从v-show隐藏到显示后,出现计算定位错误到问题 2024-02-26 21:26:31 +08:00
zhengliming 00c4852afb [fix] 修复倒计时组件 showSeconds 不起效的问题 2024-02-24 20:53:01 +08:00
zhengliming 5f94e80b73 【fix】 去掉多余的日志 2024-02-21 01:14:22 +08:00
zhengliming ca5e8c9429 【fix】修复滑动选择器在嵌套弹出层计算的bug 2024-02-21 01:13:11 +08:00
zhengliming 557dbb313f 【add】滚动通知支持传入list obj对象列表,可以指定显示对应keyValue对应的列表,可以自定义key的名字通过:keyName='key'传入,默认是名字为‘key’,可以指定显示的value的名称,通过:valueName='value' 传入,默认值的名称是value 2024-01-21 23:56:54 +08:00
zhengliming 374a74ac90 [fix] 修复拖拽上传图片组件,删除第一个图片会与添加按钮重叠的bug 2024-01-10 09:51:08 +08:00
zhengliming 025555e92b [fix] 修复拖拽上传图片组件,删除第一个图片会与添加按钮重叠的bug 2024-01-10 01:23:42 +08:00
zhengliming c67be5adf8 [fix] 修复倒计时显示多余的【:】的问题 2024-01-03 00:08:19 +08:00
zhengliming 344f681181 [fix] 修复输入框为select的时候,点击事件失效问题 2023-12-19 14:07:42 +08:00
zhengliming 60c496e6ff [fix] 修复分段器组件css在app里面样式问题 2023-12-19 13:12:19 +08:00
zhengliming 733e71862a 【ADD】button新增防抖节流模式+附带案例 2023-12-10 12:46:45 +08:00
Star 0564dcd88a fix:修复tn-select自定义labelName模糊搜索bug. 2023-12-06 15:58:50 +08:00
Star f42849931e docs:更新README.md 2023-12-06 15:46:47 +08:00
7small7 7dd2b43420 update 2023-12-04 23:33:01 +08:00
kert 0c6e535554 新增记载动画,新增颜色选择组件 2023-09-23 01:33:10 +08:00
kert 1d36ea303f 新增icon、新增充值页面、修复已知bug 2023-08-20 14:49:09 +08:00
qixv-0506 712d73d2b0 修复分段器动态赋值不生效的bug 2023-08-08 21:40:14 +08:00
海了个螺 9578de3358 !5 format
Merge pull request !5 from 海了个螺/master
2023-08-08 09:16:09 +00:00
nroyliu 5f6f1476d8 format 2023-08-08 10:05:17 +08:00
Star 96b0366738 docs:README.md 2023-08-05 16:48:58 +08:00
kert ee57981a16 create demo.txt file 2023-08-05 16:36:16 +08:00
Mandy 926f58c36c update README.md.
Signed-off-by: Mandy <784454+bruce_qiq@user.noreply.gitee.com>
2023-08-03 02:46:47 +00:00
Mandy f119274cee !4 tn-load-more组件的点击事件完善
Merge pull request !4 from 李涛hm/master
2023-07-24 13:53:05 +00:00
李涛hm 5f322d50f8 update tuniao-ui/components/tn-load-more/tn-load-more.vue.
loadMore方法没有绑定事件,追加click事件

Signed-off-by: 李涛hm <litaohm@live.com>
2023-07-24 09:35:13 +00:00
7small7 98258962b0 update README.md file 2023-07-10 03:44:35 +08:00
7small7 3341720936 update .gitignore file 2023-07-08 20:51:04 +08:00
7small7 705053f1ae update README.md 2023-07-08 20:50:23 +08:00
7small7 0d9611721d update README.md 2023-07-08 20:49:41 +08:00
7small7 10da0aa38b update README.md 2023-07-08 20:48:37 +08:00
7small7 398b49621c update README.md 2023-07-08 20:48:33 +08:00
7small7 8388fca392 update README.md 2023-07-08 20:48:20 +08:00
7small7 7f4ae15600 Merge branch 'master' of gitee.com:bruce_qiq/tuniao-ui 2023-07-08 20:46:02 +08:00
7small7 b77cc16bec update README.md 2023-07-08 20:45:39 +08:00
Mandy 0039266705 add LICENSE.
Signed-off-by: Mandy <784454+bruce_qiq@user.noreply.gitee.com>
2023-07-08 12:44:51 +00:00
7small7 f710c14879 update 2023-07-08 20:44:19 +08:00
7small7 f5718ab30b update 2023-07-08 20:43:12 +08:00
258 changed files with 59558 additions and 57224 deletions
Vendored
BIN
View File
Binary file not shown.
+1
View File
@@ -1,3 +1,4 @@
/unpackage/dist/*
/node_modules/*
/.idea/*
.hbuilderx
+36 -12
View File
@@ -1,4 +1,4 @@
[![图鸟UI](https://tnuiimage.tnkjapp.com/uniapp_market/8.jpg "图鸟UI")](https://tnuiimage.tnkjapp.com/uniapp_market/8.jpg "图鸟UI")
[![图鸟UI](https://resource.tuniaokj.com/images/uniapp_market/8.jpg "图鸟UI")](https://resource.tuniaokj.com/images/uniapp_market/8.jpg "图鸟UI")
<p align="center">
<a href="https://gitee.com/TSpecific/tuniao-ui/stargazers" target="_blank">
@@ -13,12 +13,12 @@
## **说明**
**`图鸟UI`**,是基于uni-app进行开发的UI框架,提供丰富的组件进行快速开发,支持`微信小程序``APP``H5`,包含常用表单组件、信息展示组件等,并提供丰富的酷炫页面模板。
**`图鸟UI vue2`**,是基于uni-app进行开发的UI框架,提供丰富的组件进行快速开发,支持`微信小程序``APP``H5`,包含常用表单组件、信息展示组件等,并提供丰富的酷炫页面模板。
开源版本中所使用到的图片均做了`防盗链`,只能在调试中使用,不保证在生产环境中可以使用。
图片资源已上传到 [图鸟社区](https://www.yuque.com/tuniao/)。
## 特点
## 图鸟UI特点
- 包含基础常用的布局元素,flex、grid、浮动
- 完整一体的配色体系,包含4种色深模式,同时包含4套渐变配色
@@ -27,11 +27,13 @@
- 图片素材语雀便捷下载,图鸟生态共同成长
- 使用文档详尽说明,让你一文读懂图鸟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/)
## 快速上手
@@ -79,7 +81,7 @@ const app = new Vue({
```js
// 引入TuniaoUI提供的vuex简写方法
let vuexStore = require('@/store/$t.mixin.js')
let vuexStore = require('@/store/$tn.mixin.js')
Vue.mixin(vuexStore)
```
@@ -113,7 +115,7 @@ Vue.mixin(vuexStore)
#### 6.配置easycom组件模式
此配置需要在根目录的`page.json`中进行。
此配置需要在根目录的`pages.json`中进行。
::: tip 温馨提示
@@ -138,17 +140,39 @@ Vue.mixin(vuexStore)
## 开源项目
## 图鸟UI开源项目(图鸟UI、图鸟vue3、模板1234 已上传;模板5678、图表暂未上传)
[![开源项目](https://resource.tuniaokj.com/images/uniapp_market/qr-code-all1.jpg "开源项目")](https://resource.tuniaokj.com/images/uniapp_market/qr-code-all1.jpg "开源项目")
## 图鸟UI-vue3开源项目([Github下载](https://github.com/tuniaoTech/tuniaoui-rc-vue3-uniapp)[Dcloud插件市场下载](https://ext.dcloud.net.cn/plugin?id=13530)
[![开源项目](https://resource.tuniaokj.com/images/vue3/market/vue3-banner-min.jpg "开源项目")](https://resource.tuniaokj.com/images/vue3/market/vue3-banner-min.jpg "开源项目")
[![图鸟vue3](https://resource.tuniaokj.com/images/vue3/market/vue3-code-min.jpg)](https://resource.tuniaokj.com/images/vue3/market/vue3-code-min.jpg)
#### **(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/)
[![开源项目](https://tnuiimage.tnkjapp.com/uniapp_market/qr-code-new2.jpg "开源项目")](https://tnuiimage.tnkjapp.com/uniapp_market/qr-code-new2.jpg "开源项目")
## 联系作者
微信 tnkewo
群内气氛挺不错的,应该或许可能大概,算是为数不多的,专搞技术的前端群,偶尔聊天摸鱼
微信群内气氛挺不错的,应该或许可能大概,算是为数不多的,专搞技术的前端群,偶尔聊天摸鱼
[![作者微信 tnkewo](https://resource.tuniaokj.com/images/uniapp_market/tn_author_qrcode.jpg)](https://resource.tuniaokj.com/images/uniapp_market/tn_author_qrcode.jpg)
[![作者微信 tnkewo](https://tnuiimage.tnkjapp.com/uniapp_market/tn_author_qrcode.jpg)](https://tnuiimage.tnkjapp.com/uniapp_market/tn_author_qrcode.jpg)
## 版权信息
+5 -5
View File
@@ -120,14 +120,14 @@
components: {demoTitle},
data() {
return {
src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai4.jpg',
src: 'https://resource.tuniaokj.com/images/avatar/xiaomai4.jpg',
groupList: [
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
{src: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'},
{src: 'https://resource.tuniaokj.com/images/avatar/xiaomai2.jpg'},
{text: 'TN'},
{icon: 'logo-tuniao'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
{src: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'},
{src: 'https://resource.tuniaokj.com/images/avatar/xiaomai2.jpg'},
]
}
},
+10 -1
View File
@@ -14,7 +14,7 @@
<demo-title title="大小">
<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 size="lg" margin="10rpx 10rpx">按钮</tn-button>
<tn-button width="150rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">按钮</tn-button>
@@ -78,6 +78,11 @@
<tn-button :disabled="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
</demo-title>
<demo-title title="防抖节流(默认间隔200ms,这里用1s)">
<tn-button width="100%" height="100rpx" margin="10rpx 0" @click="say('点击了防抖')" :blockTime="1000" scene="debounce">防抖模式</tn-button>
<tn-button width="100%" height="100rpx" margin="10rpx 0" @click="say('点击了节流')" :blockTime="1000" scene="throttle">节流模式</tn-button>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
@@ -97,6 +102,10 @@
}
},
methods: {
say(msg){
this.$tn.message.toast(msg)
},
}
}
</script>
+1 -1
View File
@@ -161,7 +161,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
}
+1 -1
View File
@@ -216,7 +216,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
File diff suppressed because one or more lines are too long
+13 -13
View File
@@ -39,40 +39,40 @@
data() {
return {
swiperList: [
'https://tnuiimage.tnkjapp.com/swiper/spring.jpg',
'https://tnuiimage.tnkjapp.com/swiper/summer.jpg',
'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg',
'https://tnuiimage.tnkjapp.com/swiper/winter.jpg',
'https://tnuiimage.tnkjapp.com/swiper/winter.jpg'
'https://resource.tuniaokj.com/images/swiper/spring.jpg',
'https://resource.tuniaokj.com/images/swiper/summer.jpg',
'https://resource.tuniaokj.com/images/swiper/autumn.jpg',
'https://resource.tuniaokj.com/images/swiper/winter.jpg',
'https://resource.tuniaokj.com/images/swiper/winter.jpg'
],
phoneSwiperList: [{
id: 0,
type: 'image',
name: '总有你想不到的创意',
text: '海量分享',
url: 'https://tnuiimage.tnkjapp.com/swiper/test.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d1.png'
url: 'https://resource.tuniaokj.com/images/swiper/test.jpg',
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
}, {
id: 1,
type: 'image',
name: '寻找一起成长的小伙伴',
text: '愉快玩耍',
url: 'https://tnuiimage.tnkjapp.com/swiper/banner-animate.png',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d4.png'
url: 'https://resource.tuniaokj.com/images/swiper/banner-animate.png',
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d4.png'
}, {
id: 2,
type: 'image',
name: '更多彩蛋等你探索',
text: '酷炫多彩',
url: 'https://tnuiimage.tnkjapp.com/swiper/test.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d5.png'
url: 'https://resource.tuniaokj.com/images/swiper/test.jpg',
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d5.png'
}, {
id: 3,
type: 'image',
name: '更多彩蛋等你探索',
text: '酷炫多彩',
url: 'https://tnuiimage.tnkjapp.com/swiper/banner-animate.png',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d5.png'
url: 'https://resource.tuniaokj.com/images/swiper/banner-animate.png',
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d5.png'
}],
currentSwiperIndex: 0,
phoneCurrentSwiperIndex: 0
+3 -3
View File
@@ -23,7 +23,7 @@
<demo-title title="自定义图片">
<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>
<block v-for="(value, key, index) in imgEmpty" :key="index">
<view class="empty__item">
@@ -34,7 +34,7 @@
<demo-title title="隐藏文字">
<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 class="empty__item tn-margin-top">
<tn-empty icon="help" mode=""></tn-empty>
@@ -54,7 +54,7 @@
<tn-empty icon="moon-fill" text="夜深人静" :iconSize="120" :textSize="34" iconColor="#E6E6E6" textColor="#C6D1D8"></tn-empty>
</view>
<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>
</demo-title>
+3 -3
View File
@@ -59,7 +59,7 @@
data() {
return {
avatarOptions: [{
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'
avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'
},{
icon: 'service',
text: '客服'
@@ -68,7 +68,7 @@
text: '收藏'
}],
countOptions: [{
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
count: 10
},{
icon: 'service',
@@ -79,7 +79,7 @@
text: '收藏'
}],
customOptions: [{
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
count: 10,
countBackgroundColor: '#E83A30'
},{
+1 -1
View File
@@ -29,7 +29,7 @@
:maskCloseable="maskCloseable"
@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>
</view>
+21 -21
View File
@@ -32,29 +32,29 @@
status: 'loadmore',
list: [],
data: [
{ src: 'https://tnuiimage.tnkjapp.com/shop/bag1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/bag2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/banner3.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/card.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/computer1.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/bag1.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/bag2.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/banner1.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/banner2.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/banner3.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/card.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/computer1.jpg' },
{ src: 'error.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/content.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/cup1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/cup2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/office.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/pillow.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/computer2.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/content.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/cup1.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/cup2.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/office.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/pillow.jpg' },
{ src: 'error.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/pillow2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/watch2.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/pillow2.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/sticker.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/watch1.jpg' },
{ src: 'https://resource.tuniaokj.com/images/shop/watch2.jpg' },
{ src: 'error.jpg' }
]
}
+6 -6
View File
@@ -131,7 +131,7 @@
<tn-list-cell :unlined="true">
<view class="message">
<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 class="message__middle">
<view class="message__name">小图鸟</view>
@@ -148,7 +148,7 @@
<tn-list-cell :unlined="true">
<view class="message">
<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 class="message__middle">
<view class="message__name">小图鸟</view>
@@ -225,10 +225,10 @@
cellLineRight: true,
avatarGroupList: [
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
{src: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'},
{src: 'https://resource.tuniaokj.com/images/avatar/xiaomai2.jpg'},
{src: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg'},
{src: 'https://resource.tuniaokj.com/images/avatar/xiaomai2.jpg'},
]
}
},
+1 -1
View File
@@ -127,7 +127,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
}
+16 -16
View File
@@ -53,97 +53,97 @@
list: [
{
userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北'
},
content: {
title: '全新UI框架,tuniaoUI正式发布',
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日'
}
},
{
userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北'
},
content: {
title: '全新UI框架,tuniaoUI正式发布',
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日'
}
},
{
userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北'
},
content: {
title: '全新UI框架,tuniaoUI正式发布',
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日'
}
},
{
userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北'
},
content: {
title: '全新UI框架,tuniaoUI正式发布',
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日'
}
},
{
userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北'
},
content: {
title: '全新UI框架,tuniaoUI正式发布',
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日'
}
},
{
userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北'
},
content: {
title: '全新UI框架,tuniaoUI正式发布',
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日'
}
},
{
userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北'
},
content: {
title: '全新UI框架,tuniaoUI正式发布',
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日'
}
},
{
userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北'
},
content: {
title: '全新UI框架,tuniaoUI正式发布',
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日'
}
}
+6 -6
View File
@@ -15,7 +15,7 @@
<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__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 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">
@@ -34,7 +34,7 @@
<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__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 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">
@@ -54,7 +54,7 @@
<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__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 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">
@@ -74,7 +74,7 @@
<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__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 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">
@@ -94,7 +94,7 @@
<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__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 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">
@@ -114,7 +114,7 @@
<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__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 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">
+4 -4
View File
@@ -56,10 +56,10 @@
data() {
return {
list: [
{image: 'https://tnuiimage.tnkjapp.com/swiper/spring.jpg', title: '春天'},
{image: 'https://tnuiimage.tnkjapp.com/swiper/summer.jpg', title: '夏天'},
{image: 'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg', title: '秋天'},
{image: 'https://tnuiimage.tnkjapp.com/swiper/winter.jpg', title: '冬天'},
{image: 'https://resource.tuniaokj.com/images/swiper/spring.jpg', title: '春天'},
{image: 'https://resource.tuniaokj.com/images/swiper/summer.jpg', title: '夏天'},
{image: 'https://resource.tuniaokj.com/images/swiper/autumn.jpg', title: '秋天'},
{image: 'https://resource.tuniaokj.com/images/swiper/winter.jpg', title: '冬天'},
]
}
},
+1
View File
@@ -0,0 +1 @@
sdfsdfsdf
+2 -2
View File
@@ -100,7 +100,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
}
@@ -133,7 +133,7 @@
display: block;
width: 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%;
animation: arc 4s linear infinite;
}
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name" : "TuniaoUI_UniApp",
"name" : "TuniaoUI_V2",
"appid" : "__UNI__C82400B",
"description" : "",
"versionName" : "1.0.0",
+78 -24
View File
@@ -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: '个人中心',
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: '动效元素',
backgroundColor: 'tn-cool-bg-color-1',
list: [
{
icon: 'send',
title: '加载动画',
author: '图鸟北北',
url: '/templatePage/animate/loading/loading'
},
{
icon: 'send',
title: '流星悬浮',
@@ -213,33 +267,33 @@ export default {
list: [
{
icon: 'send',
title: '3D全景(第三方,约120¥一年)',
title: '3D全景(第三方,有免费版付费版)',
author: '图鸟北北 & 芊云全景',
url: '/templatePage/life/pano/pano'
},
{
icon: 'rocket',
title: 'Ucharts图表(第三方,免费开源)',
author: '图鸟北北 & Ucharts秋云',
url: '/templatePage/life/candle/candle'
icon: 'send',
title: '3D模型(第三方,免费版付费版)',
author: '图鸟北北 & 芊云全景',
url: '/templatePage/life/pano/model'
},
{
icon: 'rocket',
title: '隔壁的小生(第三方,赞赏6¥可商用)',
author: '隔壁的小生',
url: '/templatePage/life/candle/candle'
},
{
icon: 'rocket',
title: '阿凡提·污克西西(第三方,免费开源)',
author: '阿凡提·污克西西',
url: '/templatePage/life/candle/candle'
},
{
icon: 'rocket',
icon: 'send',
title: '微信红包封面',
author: '微信红包封面',
url: '/templatePage/life/cover/cover'
},
{
icon: 'send',
title: '营销小游戏-魔方',
author: '最帅的你',
url: '/templatePage/life/cube/cube'
},
{
icon: 'rocket',
title: '图鸟生态,期待你的加入',
author: '合作微信 tnkewo',
url: '/templatePage/life/candle/candle'
}
]
}
+6
View File
@@ -265,6 +265,12 @@ export default {
author: '图鸟科技',
url: '/vipPage/components/table/index'
},
{
icon: 'order',
title: '取色器',
author: '图鸟科技',
url: '/vipPage/life/color/color'
},
{
icon: 'order',
title: '图鸟轮播(实验)',
+54
View File
@@ -442,6 +442,24 @@
"navigationBarTitleText": "简约登录",
"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",
"style": {
@@ -496,6 +514,12 @@
"navigationBarTitleText": "3D全景",
"enablePullDownRefresh": false
}
},{
"path": "life/pano/model",
"style": {
"navigationBarTitleText": "3D模型",
"enablePullDownRefresh": false
}
}, {
"path": "life/plus/plus",
"style": {
@@ -527,6 +551,12 @@
"navigationBarTitleText": "红包封面",
"enablePullDownRefresh": false
}
},{
"path": "life/cube/cube",
"style": {
"navigationBarTitleText": "魔方游戏",
"enablePullDownRefresh": false
}
}, {
"path": "time/clock/clock",
"style": {
@@ -539,6 +569,30 @@
"navigationBarTitleText": "加载动画",
"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",
"style": {
+2 -2
View File
@@ -2,7 +2,7 @@
<view class="basic tn-safe-area-inset-bottom">
<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>
<block v-for="(item, index) in navList" :key="index">
@@ -100,7 +100,7 @@
align-items: center;
justify-content: center;
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;
}
}
+2 -2
View File
@@ -2,7 +2,7 @@
<view class="components tn-safe-area-inset-bottom">
<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>
<block v-for="(item, index) in navList" :key="index">
@@ -99,7 +99,7 @@
align-items: center;
justify-content: center;
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;
}
}
+2 -2
View File
@@ -2,7 +2,7 @@
<view class="template tn-safe-area-inset-bottom">
<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>
<block v-for="(item, index) in navList" :key="index">
@@ -105,7 +105,7 @@
align-items: center;
justify-content: center;
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;
}
}
+7 -7
View File
@@ -2,14 +2,14 @@
<view class="about tn-safe-area-inset-bottom">
<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 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__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 class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view> -->
</view>
@@ -19,7 +19,7 @@
<!-- banner start-->
<!-- <view class="tn-flex tn-flex-wrap tn-padding-xs" @click="navTuniaoVue3">
<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>
</view>
@@ -396,7 +396,7 @@
opacity: 1;
transform: scale(1, 1);
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 {
@@ -422,7 +422,7 @@
opacity: 1;
transform: scale(1, 1);
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;
transform: scale(1, 1);
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;
transform: scale(1, 1);
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
View File
@@ -1,7 +1,7 @@
<template>
<view class="vip tn-safe-area-inset-bottom">
<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>
<swiper class="card-swiper" :circular="true"
@@ -96,7 +96,7 @@
<!-- banner start-->
<view class="tn-flex tn-flex-wrap tn-padding-xs" @click="navTuniaoMoban">
<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>
</view>
@@ -170,31 +170,31 @@
swiperList: [{
id: 0,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/index_bg/circle1.jpg',
url: 'https://resource.tuniaokj.com/images/index_bg/circle1.jpg',
}, {
id: 1,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/index_bg/circle2.jpg',
url: 'https://resource.tuniaokj.com/images/index_bg/circle2.jpg',
}, {
id: 2,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/index_bg/circle3.jpg',
url: 'https://resource.tuniaokj.com/images/index_bg/circle3.jpg',
}, {
id: 3,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/index_bg/circle4.jpg',
url: 'https://resource.tuniaokj.com/images/index_bg/circle4.jpg',
},{
id: 4,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/index_bg/circle5.jpg',
url: 'https://resource.tuniaokj.com/images/index_bg/circle5.jpg',
},{
id: 5,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/index_bg/circle6.jpg',
url: 'https://resource.tuniaokj.com/images/index_bg/circle6.jpg',
},{
id: 6,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/index_bg/circle7.jpg',
url: 'https://resource.tuniaokj.com/images/index_bg/circle7.jpg',
}
],
// nav菜单列表
@@ -410,7 +410,7 @@
align-items: center;
justify-content: center;
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;
}
}
+1 -1
View File
@@ -66,7 +66,7 @@
// 生成泡泡
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({
src: image,
success: (res) => {
+7 -7
View File
@@ -13,14 +13,14 @@
<view class="tn-flex tn-flex-row-between tn-margin-xl">
<view class="justify-content-item" style="margin-top: 50rpx;">
<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>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">Jaylen</view>
</view>
<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>
</view>
@@ -29,14 +29,14 @@
</view>
<view class="justify-content-item">
<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>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">可我会像</view>
</view>
<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>
</view>
@@ -45,14 +45,14 @@
</view>
<view class="justify-content-item" style="margin-top: 50rpx;">
<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>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">福哥</view>
</view>
<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>
</view>
@@ -63,7 +63,7 @@
</view>
<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 class="hollow">
<view class="tn-text-xxl">
+1 -3
View File
@@ -70,7 +70,7 @@
content: "";
inline-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-repeat: repeat;
transform: rotate(45deg);
@@ -90,8 +90,6 @@
}
}
/* 加载部分 */
.components-anloading {
margin: 0;
+61
View File
@@ -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>
+153
View File
@@ -0,0 +1,153 @@
<template>
<view class="template-loading">
<!-- 顶部自定义导航 -->
<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="loader-wrapper">
<view class="loader">
<view class="logo-loading tn-icon-logo-tuniao tn-text-shadow-aquablue">
</view>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateLoading',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
@-webkit-keyframes img {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
@keyframes img {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin-reverse {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
@keyframes spin-reverse {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
.loader-wrapper {
// background-color: #00C3FF;
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
overflow: hidden;
}
.loader {
display: flex;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #4B98FE;
animation: spin 1.7s linear infinite;
z-index: 11;
}
.loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFAC00;
animation: spin-reverse 5.6s linear infinite;
}
.loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #00D05E;
animation: spin 2.3s linear infinite;
}
.logo-loading {
font-size: 120rpx;
color: #01BEFF;
margin: auto;
align-items: center;
display: table-cell;
vertical-align: middle;
text-align: center;
animation: img 1.7s linear infinite;
}
</style>
+102
View File
@@ -0,0 +1,102 @@
<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="">
<view class="loading loading1 tn-icon-airplane tn-text-shadow-purplered"></view>
<view class="loading loading2 tn-icon-flower tn-text-shadow-blue"></view>
<view class="loading loading3 tn-icon-gift tn-text-shadow-orangered"></view>
<view class="loading loading4 tn-icon-shop tn-text-shadow-indigo"></view>
<view class="loading loading5 tn-icon-light tn-text-shadow-orangeyellow"></view>
<view class="loading loading6 tn-icon-fire tn-text-shadow-cyan"></view>
</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';
.loading {
font-size: 60rpx;
width: 160rpx;
height: 160rpx;
animation: move 3s linear infinite;
backface-visibility: hidden;
position: absolute;
top: calc(50% - 160rpx);
left: 50%;
transform-origin: -4vmin center;
will-change: transform;
}
.loading1 {
color: #4B98FE;
animation-delay: -0.5s;
opacity: 0;
}
.loading2 {
color: #00D05E;
animation-delay: -1s;
opacity: 0;
}
.loading3 {
color: #FFAC00;
animation-delay: -1.5s;
opacity: 0;
}
.loading4 {
color: #FB6A67;
animation-delay: -2s;
opacity: 0;
}
.loading5 {
color: #957BFE;
animation-delay: -2.5s;
opacity: 0;
}
.loading6 {
color: #00B9FE;
animation-delay: -3s;
opacity: 0;
}
@keyframes move {
0% {
transform: scale(1) rotate(0deg) translate3d(0, 0, 1px);
will-change: transform;
}
30% {
opacity: 1;
}
100% {
z-index: 10;
transform: scale(0) rotate(360deg) translate3d(0, 0, 1px);
will-change: transform;
}
}
</style>
+224
View File
@@ -0,0 +1,224 @@
<template>
<view class="template-loading">
<!-- 顶部自定义导航 -->
<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="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<!-- 图鸟加载-->
<view class="loader">
<view class="circle loading1"></view>
<view class="circle loading2"></view>
<view class="circle loading3"></view>
<view class="circle loading4"></view>
<view class="circle loading5"></view>
<view class="circle loading6"></view>
<view class="circle loading7"></view>
<view class="circle loading8"></view>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateLoading',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 加载动画*/
.loader {
position:absolute;
width:120rpx;
height:120rpx;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.circle{
color: #01BEFF;
position: absolute;
border-radius: 100%;
width: 30rpx;
height: 30rpx;
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
-webkit-animation: spin 1s infinite ease-in-out;
-moz-animation: spin 1s infinite ease-in-out;
-o-animation: spin 1s infinite ease-in-out;
animation: spin 1s infinite ease-in-out
}
.loader :nth-child(1) {
top: 5%;
left: 50%;
-webkit-animation-delay: -.875s;
-moz-animation-delay: -.875s;
-o-animation-delay: -.875s;
animation-delay: -.875s
}
.loader :nth-child(2) {
top: 18.1801948466%;
left: 81.8198051534%;
-webkit-animation-delay: -.75s;
-moz-animation-delay: -.75s;
-o-animation-delay: -.75s;
animation-delay: -.75s
}
.loader :nth-child(3) {
top: 50%;
left: 95%;
-webkit-animation-delay: -.625s;
-moz-animation-delay: -.625s;
-o-animation-delay: -.625s;
animation-delay: -.625s
}
.loader :nth-child(4) {
top: 81.8198051534%;
left: 81.8198051534%;
-webkit-animation-delay: -.5s;
-moz-animation-delay: -.5s;
-o-animation-delay: -.5s;
animation-delay: -.5s
}
.loader :nth-child(5) {
top: 94.9999999966%;
left: 50.0000000005%;
-webkit-animation-delay: -.375s;
-moz-animation-delay: -.375s;
-o-animation-delay: -.375s;
animation-delay: -.375s
}
.loader :nth-child(6) {
top: 81.8198046966%;
left: 18.1801949248%;
-webkit-animation-delay: -.25s;
-moz-animation-delay: -.25s;
-o-animation-delay: -.25s;
animation-delay: -.25s
}
.loader :nth-child(7) {
top: 49.9999750815%;
left: 5.0000051215%;
-webkit-animation-delay: -.125s;
-moz-animation-delay: -.125s;
-o-animation-delay: -.125s;
animation-delay: -.125s
}
.loader :nth-child(8) {
top: 18.179464974%;
left: 18.1803700518%;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s
}
@-webkit-keyframes spin {
0%,
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
20% {
opacity: 1
}
80% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0)
}
}
@-moz-keyframes spin {
0%,
100% {
opacity: 1;
-moz-transform: scale(1);
transform: scale(1)
}
20% {
opacity: 1
}
80% {
opacity: 0;
-moz-transform: scale(0);
transform: scale(0)
}
}
@-o-keyframes spin {
0%,
100% {
opacity: 1;
-o-transform: scale(1);
transform: scale(1)
}
20% {
opacity: 1
}
80% {
opacity: 0;
-o-transform: scale(0);
transform: scale(0)
}
}
@keyframes spin {
0%,
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
20% {
opacity: 1
}
80% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0)
}
}
</style>
+4 -4
View File
@@ -11,10 +11,10 @@
<!-- 页面内容 -->
<view class="slideshow">
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/cup1.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/card.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/watch1.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://resource.tuniaokj.com/images/shop/cup1.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://resource.tuniaokj.com/images/shop/phonecase1.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://resource.tuniaokj.com/images/shop/card.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://resource.tuniaokj.com/images/shop/watch1.jpg')"></view>
</view>
</view>
+2 -2
View File
@@ -12,7 +12,7 @@
<view class="wechat tnxuanfu" @click="navTuniaoUI">
<view class="bg0 pa">
<view class="bg1">
<image src="https://tnuiimage.tnkjapp.com/my/my7.png" class="button-shop shadow"></image>
<image src="https://resource.tuniaokj.com/images/my/my7.png" class="button-shop shadow"></image>
</view>
</view>
<view class="hx-box pa">
@@ -177,7 +177,7 @@
display: block;
width: 100%;
height: 100%;
background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc4.png) no-repeat center center;
background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc4.png) no-repeat center center;
background-size: 100% 100%;
animation: hx 4s linear infinite;
}
+3 -3
View File
@@ -15,13 +15,13 @@
<view class="tnwave waveAnimation">
<view class="waveWrapperInner bgTop">
<view class="wave waveTop" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
<view class="wave waveTop" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgMiddle">
<view class="wave waveMiddle" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
<view class="wave waveMiddle" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgBottom">
<view class="wave waveBottom" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-1.png')"></view>
<view class="wave waveBottom" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-1.png')"></view>
</view>
</view>
+60 -60
View File
@@ -14,7 +14,7 @@
<!-- 图标logo -->
<view class="custom-nav__back">
<view class="logo-pic tn-shadow-blur"
style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg')">
<view class="logo-image">
<tn-badge backgroundColor="#E72F8C" :dot="true" :radius="16" :absolute="true" :translateCenter="false">
</tn-badge>
@@ -83,8 +83,8 @@
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-home.png'></image> -->
<image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tn.png'></image>
<!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-home.png'></image> -->
</view>
<view class="tn-color-gray">首页</view>
</view>
@@ -92,8 +92,8 @@
<view class="bar-icon">
<!-- <view class="tn-icon-discover tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tnnew.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-flower.png'></image> -->
<image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tnnew.png'></image>
<!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-flower.png'></image> -->
</view>
<view class="tn-color-black">圈子</view>
</view>
@@ -113,7 +113,7 @@
<!-- <view class="tn-icon-logo-tuniao"></view> -->
<view class="bar-circle tn-shadow-blur">
<view class="tn-icon-add tn-color-white"></view>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-tiger.png'></image> -->
<!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-tiger.png'></image> -->
</view>
</view>
</view>
@@ -134,8 +134,8 @@
<view class="bar-icon">
<!-- <view class="tn-icon-image-text tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-china.png'></image> -->
<image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image>
<!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-china.png'></image> -->
</view>
<view class="tn-color-gray">优选</view>
</view>
@@ -143,8 +143,8 @@
<view class="bar-icon">
<!-- <view class="tn-icon-my tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-money.png'></image> -->
<image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tn.png'></image>
<!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-money.png'></image> -->
</view>
<view class="tn-color-gray">我的</view>
</view>
@@ -184,26 +184,26 @@
}
],
content: [{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'red',
label: ['小程序'],
title: '全新出发,新版本已上线,欢迎三连',
desc: '小程序前端源码,免费开源,欢迎白嫖嗷嗷,可以的话,插件市场三连支持一下',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
},
],
viewUserCount: 567
@@ -213,26 +213,26 @@
likeCount: 206
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'cyan',
label: ['模型'],
title: '3D模型了解一下?',
desc: '一个拥有大量3D模型的网站',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
},
],
viewUserCount: 987
@@ -242,26 +242,26 @@
likeCount: 65
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'blue',
label: ['UI设计'],
title: '为什么资讯不显示时间',
desc: '你确定你经常更新文章吗?',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
},
],
viewUserCount: 321
@@ -271,26 +271,26 @@
likeCount: 543
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'green',
label: ['创意'],
title: '创意一点点',
desc: '创意灵感从这里开始',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
},
],
viewUserCount: 230
@@ -300,26 +300,26 @@
likeCount: 342
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
userAvatar: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'orange',
label: ['UI设计'],
title: '语雀素材地址资源',
desc: '图鸟UI素材免费可商用',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
},
],
viewUserCount: 106
@@ -329,26 +329,26 @@
likeCount: 91
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
userAvatar: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'purplered',
label: ['神器'],
title: '最强的视频转GIF工具',
desc: '神器推荐',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
},
],
viewUserCount: 232
@@ -358,26 +358,26 @@
likeCount: 86
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
userAvatar: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'purple',
label: ['粒子'],
title: '小程序粒子效果',
desc: '酷炫的小程序粒子效果一览',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
},
],
viewUserCount: 456
@@ -387,26 +387,26 @@
likeCount: 76
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'brown',
label: ['工具'],
title: '小程序任意页面生成二维码',
desc: '二维码生成器',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
},
],
viewUserCount: 129
@@ -667,7 +667,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
}
@@ -700,7 +700,7 @@
display: block;
width: 100%;
height: 100%;
background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc1.png) no-repeat center center;
background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc1.png) no-repeat center center;
background-size: 100% 100%;
animation: arc 4s linear infinite;
}
+60 -60
View File
@@ -14,7 +14,7 @@
<!-- 图标logo -->
<view class="custom-nav__back">
<view class="logo-pic tn-shadow-blur"
style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg')">
<view class="logo-image">
<tn-badge backgroundColor="#E72F8C" :dot="true" :radius="16" :absolute="true" :translateCenter="false">
</tn-badge>
@@ -83,8 +83,8 @@
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-home.png'></image> -->
<image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tn.png'></image>
<!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-home.png'></image> -->
</view>
<view class="tn-color-gray">首页</view>
</view>
@@ -92,8 +92,8 @@
<view class="bar-icon">
<!-- <view class="tn-icon-discover tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tnnew.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-flower.png'></image> -->
<image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tnnew.png'></image>
<!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-flower.png'></image> -->
</view>
<view class="tn-color-black">圈子</view>
</view>
@@ -113,7 +113,7 @@
<!-- <view class="tn-icon-logo-tuniao"></view> -->
<view class="bar-circle tn-shadow-blur">
<view class="tn-icon-add tn-color-white"></view>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-tiger.png'></image> -->
<!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-tiger.png'></image> -->
</view>
</view>
</view>
@@ -134,8 +134,8 @@
<view class="bar-icon">
<!-- <view class="tn-icon-image-text tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-china.png'></image> -->
<image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image>
<!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-china.png'></image> -->
</view>
<view class="tn-color-gray">优选</view>
</view>
@@ -143,8 +143,8 @@
<view class="bar-icon">
<!-- <view class="tn-icon-my tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-money.png'></image> -->
<image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tn.png'></image>
<!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-money.png'></image> -->
</view>
<view class="tn-color-gray">我的</view>
</view>
@@ -184,26 +184,26 @@
}
],
content: [{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'red',
label: ['小程序'],
title: '小程序官网源码,免费开源欢迎白嫖嗷嗷',
desc: '2.2.0版本已上线,欢迎三连',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
},
],
viewUserCount: 567
@@ -213,26 +213,26 @@
likeCount: 206
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'cyan',
label: ['模型'],
title: '一个拥有大量3D模型的网站',
desc: '3D模型了解一下?',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
},
],
viewUserCount: 987
@@ -242,26 +242,26 @@
likeCount: 65
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'blue',
label: ['UI设计'],
title: '为什么资讯不显示时间?',
desc: '你确定你经常更新文章吗?',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
},
],
viewUserCount: 321
@@ -271,26 +271,26 @@
likeCount: 543
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'green',
label: ['创意'],
title: '创意一点点',
desc: '创意灵感从这里开始',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
},
],
viewUserCount: 230
@@ -300,26 +300,26 @@
likeCount: 342
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
userAvatar: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'orange',
label: ['UI设计'],
title: '图鸟UI素材免费可商用',
desc: '语雀素材地址资源',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
},
],
viewUserCount: 106
@@ -329,26 +329,26 @@
likeCount: 91
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
userAvatar: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'purplered',
label: ['神器'],
title: '最强的视频转GIF工具',
desc: '神器推荐',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
},
],
viewUserCount: 232
@@ -358,26 +358,26 @@
likeCount: 86
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
userAvatar: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'purple',
label: ['粒子'],
title: '酷炫的小程序粒子效果一览',
desc: '小程序粒子效果',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
},
],
viewUserCount: 456
@@ -387,26 +387,26 @@
likeCount: 76
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'brown',
label: ['工具'],
title: '小程序任意页面生成二维码',
desc: '二维码生成器',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
},
],
viewUserCount: 129
@@ -667,7 +667,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
}
@@ -700,7 +700,7 @@
display: block;
width: 100%;
height: 100%;
background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc1.png) no-repeat center center;
background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc1.png) no-repeat center center;
background-size: 100% 100%;
animation: arc 4s linear infinite;
}
+35 -35
View File
@@ -187,7 +187,7 @@
<view class="bar-icon">
<view class="tn-icon-home-smile tn-color-gray--dark">
</view>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tnnew.png'></image> -->
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
</view>
<view class="tn-color-gray">首页</view>
</view>
@@ -195,7 +195,7 @@
<view class="bar-circle tn-shadow-blur">
<view class="tn-icon-qr-code tn-color-white">
</view>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image> -->
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
</view>
<view class="tn-color-gray">粤码通城</view>
</view>
@@ -203,7 +203,7 @@
<view class="bar-icon">
<view class="tn-icon-emoji-good tn-color-gray--dark">
</view>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image> -->
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tn.png'></image> -->
</view>
<view class="tn-color-gray">我的</view>
</view>
@@ -221,20 +221,20 @@
return {
content: [
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage:[
'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
],
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 65
},
@@ -243,20 +243,20 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage:[
'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
],
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 65
},
@@ -265,20 +265,20 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage:[
'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
'https://resource.tuniaokj.com/images/shop/computer2.jpg',
],
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 65
},
@@ -287,20 +287,20 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['站点','链接'],
desc: 'https://www.yuque.com/tuniao',
mainImage:[
'https://tnuiimage.tnkjapp.com/shop/pillow2.jpg',
'https://resource.tuniaokj.com/images/shop/pillow2.jpg',
],
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 65
},
@@ -309,20 +309,20 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage:[
'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
],
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 65
},
@@ -418,7 +418,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
@@ -526,7 +526,7 @@
content: "";
inline-size: var(--size);
block-size: var(--size);
background-image: url("https://tnuiimage.tnkjapp.com/animate/health.png");
background-image: url("https://resource.tuniaokj.com/images/animate/health.png");
background-size: var(--bg-size);
background-repeat: repeat;
transform: rotate(0deg);
+59 -59
View File
@@ -14,7 +14,7 @@
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
<!-- 图标logo -->
<view class="custom-nav__back">
<view class="logo-pic tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/logo2.png')">
<view class="logo-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png')">
<view class="logo-image">
</view>
</view>
@@ -166,7 +166,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-course.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/course-course.png'></image>
</view>
<view class="tn-color-black">课程</view>
</view>
@@ -174,7 +174,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-watercup tn-color-gray">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-fire-no.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/course-fire-no.png'></image>
</view>
<view class="tn-color-gray">精选</view>
</view>
@@ -182,7 +182,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-ticket tn-color-gray">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-play-no.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/course-play-no.png'></image>
</view>
<view class="tn-color-gray">播放</view>
</view>
@@ -190,7 +190,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-my tn-color-gray">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-my-no.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/course-my-no.png'></image>
</view>
<view class="tn-color-gray">我的</view>
</view>
@@ -213,13 +213,13 @@
data(){
return {
banner: [{
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner1.jpg'
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner1.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner2.jpg'
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner2.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner3.jpg'
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner3.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner4.jpg'
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner4.jpg'
}],
tuniaoData: [
{
@@ -249,18 +249,18 @@
],
content: [
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['烤肉','烤肉'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -269,18 +269,18 @@
likeCount: 999
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['炸串','火锅'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -289,18 +289,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['烤肉','烤肉'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -309,18 +309,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['烤肉','烤肉'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -329,18 +329,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['烤肉','烤肉'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -349,18 +349,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['烤肉','烤肉'],
desc: '我们都是好孩子',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -369,18 +369,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['烤肉','烤肉'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -389,18 +389,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['烤肉','烤肉'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -550,7 +550,7 @@
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/3.png);
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/3.png);
}
&__left {
@@ -576,7 +576,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
+57 -57
View File
@@ -125,7 +125,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tnnew.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image>
</view>
<view class="tn-color-black">首页</view>
</view>
@@ -133,7 +133,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-discover">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image>
</view>
<view class="tn-color-gray">圈子</view>
</view>
@@ -141,7 +141,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-image-text">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image>
</view>
<view class="tn-color-gray">案例</view>
</view>
@@ -149,7 +149,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-my">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tn.png'></image>
</view>
<view class="tn-color-gray">我的</view>
</view>
@@ -173,28 +173,28 @@
data(){
return {
banner: [{
image: 'https://tnuiimage.tnkjapp.com/swiper/swiper1.jpg'
image: 'https://resource.tuniaokj.com/images/swiper/swiper1.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/swiper/swiper2.jpg'
image: 'https://resource.tuniaokj.com/images/swiper/swiper2.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/swiper/swiper3.jpg'
image: 'https://resource.tuniaokj.com/images/swiper/swiper3.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/swiper/swiper4.jpg'
image: 'https://resource.tuniaokj.com/images/swiper/swiper4.jpg'
}],
content: [
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -203,18 +203,18 @@
likeCount: 999
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -223,18 +223,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -243,18 +243,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -263,18 +263,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -283,18 +283,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '我们都是好孩子',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -303,18 +303,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -323,18 +323,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -388,7 +388,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
}
+11 -11
View File
@@ -14,7 +14,7 @@
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
<!-- 返回按钮 -->
<view class="custom-nav__back">
<view class="logo-pic tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/logo2.png')">
<view class="logo-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png')">
<view class="logo-image">
</view>
</view>
@@ -80,7 +80,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-level">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-home.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/job-home.png'></image>
</view>
<view class="tn-color-black">职位</view>
</view>
@@ -88,7 +88,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-level">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-honor.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/job-honor.png'></image>
</view>
<view class="tn-color-black">简历</view>
</view>
@@ -96,7 +96,7 @@
<view class="bar-circle tn-shadow-blur">
<view class="tn-icon-message-fill tn-color-white">
</view>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image> -->
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
</view>
<!-- <view class="tn-color-gray">发布</view> -->
</view>
@@ -104,7 +104,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-level">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-up.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/job-up.png'></image>
</view>
<view class="tn-color-black">提升</view>
</view>
@@ -112,7 +112,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-signpost tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-my.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/job-my.png'></image>
</view>
<view class="tn-color-gray">我的</view>
</view>
@@ -135,13 +135,13 @@
data(){
return {
banner: [{
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner1.jpg'
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner1.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner2.jpg'
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner2.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner3.jpg'
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner3.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner4.jpg'
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner4.jpg'
}],
tuniaoData: [
{
@@ -423,7 +423,7 @@
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg3.png);
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg3.png);
}
}
+53 -53
View File
@@ -223,28 +223,28 @@
data(){
return {
banner: [{
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner1.jpg'
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner1.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner2.jpg'
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner2.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner3.jpg'
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner3.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner4.jpg'
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner4.jpg'
}],
content: [
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -253,18 +253,18 @@
likeCount: 999
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -273,18 +273,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -293,18 +293,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -313,18 +313,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -333,18 +333,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '我们都是好孩子',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -353,18 +353,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -373,18 +373,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -487,7 +487,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
+60 -60
View File
@@ -86,7 +86,7 @@
<view class="tn-flex-1 screen-shadow" style="margin: 30rpx 20rpx;padding: 60rpx 0;">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<image class="" src='https://tnuiimage.tnkjapp.com/icon/5.jpg' mode='aspectFit'></image>
<image class="" src='https://resource.tuniaokj.com/images/icon/5.jpg' mode='aspectFit'></image>
</view>
<view class="tn-text-center">
<view class="tn-text-ellipsis tn-color-black tn-text-lg ">资料投屏</view>
@@ -97,7 +97,7 @@
<view class="tn-flex-1 screen-shadow" style="margin: 30rpx 20rpx;padding: 60rpx 0;">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<image class="" src='https://tnuiimage.tnkjapp.com/icon/6.jpg' mode='aspectFit'></image>
<image class="" src='https://resource.tuniaokj.com/images/icon/6.jpg' mode='aspectFit'></image>
</view>
<view class="tn-text-center">
<view class="tn-text-ellipsis tn-color-black tn-text-lg ">文件投屏</view>
@@ -111,7 +111,7 @@
<view class="tn-flex-1 screen-shadow" style="margin: 10rpx 20rpx;padding: 60rpx 0;">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<image class="" src='https://tnuiimage.tnkjapp.com/icon/7.jpg' mode='aspectFit'></image>
<image class="" src='https://resource.tuniaokj.com/images/icon/7.jpg' mode='aspectFit'></image>
</view>
<view class="tn-text-center">
<view class="tn-text-ellipsis tn-color-black tn-text-lg ">电脑投屏</view>
@@ -122,7 +122,7 @@
<view class="tn-flex-1 screen-shadow" style="margin: 10rpx 20rpx;padding: 60rpx 0;">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<image class="" src='https://tnuiimage.tnkjapp.com/icon/8.jpg' mode='aspectFit'></image>
<image class="" src='https://resource.tuniaokj.com/images/icon/8.jpg' mode='aspectFit'></image>
</view>
<view class="tn-text-center">
<view class="tn-text-ellipsis tn-color-black tn-text-lg ">文档投屏</view>
@@ -188,7 +188,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-level">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/yellow/home_cur.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/yellow/home_cur.png'></image>
</view>
<view class="tn-color-black">首页</view>
</view>
@@ -196,7 +196,7 @@
<view class="bar-circle tn-shadow-blur">
<view class="tn-icon-discover-planet tn-color-white">
</view>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image> -->
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
</view>
<!-- <view class="tn-color-gray">发布</view> -->
</view>
@@ -204,7 +204,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-signpost tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/yellow/me.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/yellow/me.png'></image>
</view>
<view class="tn-color-gray">我的</view>
</view>
@@ -226,28 +226,28 @@
data(){
return {
banner: [{
image: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg'
image: 'https://resource.tuniaokj.com/images/shop/banner1.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg'
image: 'https://resource.tuniaokj.com/images/shop/banner2.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg'
image: 'https://resource.tuniaokj.com/images/shop/banner1.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg'
image: 'https://resource.tuniaokj.com/images/shop/banner2.jpg'
}],
content: [
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -256,18 +256,18 @@
likeCount: 999
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -276,18 +276,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -296,18 +296,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -316,18 +316,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -336,18 +336,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '我们都是好孩子',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -356,18 +356,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -376,18 +376,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -609,7 +609,7 @@
content: "";
inline-size: var(--size);
block-size: var(--size);
background-image: url("https://tnuiimage.tnkjapp.com/animate/animate3.png");
background-image: url("https://resource.tuniaokj.com/images/animate/animate3.png");
background-size: var(--bg-size);
background-repeat: repeat;
transform: rotate(45deg);
+64 -64
View File
@@ -14,7 +14,7 @@
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
<!-- 返回按钮 -->
<view class="custom-nav__back">
<view class="logo-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/logo2.png')">
<view class="logo-pic" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png')">
<view class="logo-image">
</view>
</view>
@@ -84,7 +84,7 @@
<!-- banner start-->
<view class="tn-flex tn-flex-wrap tn-margin-xs">
<view class=" " style="width: 100%;">
<view class="image-pic tn-margin-sm" style="background-image:url('https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg')">
<view class="image-pic tn-margin-sm" style="background-image:url('https://resource.tuniaokj.com/images/shop/phonecase1.jpg')">
<view class="image-wallpaper">
</view>
</view>
@@ -154,7 +154,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-home.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/wallpaper-home.png'></image>
</view>
<view class="tn-color-white">首页</view>
</view>
@@ -162,7 +162,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-watercup tn-color-gray">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-more.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/wallpaper-more.png'></image>
</view>
<view class="tn-color-gray">投稿</view>
</view>
@@ -170,7 +170,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-ticket tn-color-gray">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-my.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/wallpaper-my.png'></image>
</view>
<view class="tn-color-gray">我的</view>
</view>
@@ -194,41 +194,41 @@
return {
banner: [{
image: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg'
image: 'https://resource.tuniaokj.com/images/shop/banner2.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg'
image: 'https://resource.tuniaokj.com/images/shop/banner1.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg'
image: 'https://resource.tuniaokj.com/images/shop/banner2.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg'
image: 'https://resource.tuniaokj.com/images/shop/banner1.jpg'
}],
pic: [{
image: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg'
image: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg'
image: 'https://resource.tuniaokj.com/images/shop/computer2.jpg'
},{
image: 'https://tnuiimage.tnkjapp.com/shop/pillow.jpg'
image: 'https://resource.tuniaokj.com/images/shop/pillow.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/shop/pillow2.jpg'
image: 'https://resource.tuniaokj.com/images/shop/pillow2.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/shop/cup1.jpg'
image: 'https://resource.tuniaokj.com/images/shop/cup1.jpg'
}, {
image: 'https://tnuiimage.tnkjapp.com/shop/bag2.jpg'
image: 'https://resource.tuniaokj.com/images/shop/bag2.jpg'
}],
content: [
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -237,18 +237,18 @@
likeCount: 999
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -257,18 +257,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -277,18 +277,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -297,18 +297,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -317,18 +317,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '我们都是好孩子',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -337,18 +337,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -357,18 +357,18 @@
likeCount: 62
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
label: ['开源','创意'],
desc: '免费开源可商用组件',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
viewUser: {
latestUserAvatar: [
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
{src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
],
viewUserCount: 129
},
@@ -482,7 +482,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
+2 -2
View File
@@ -12,7 +12,7 @@
<canvas canvas-id="bubble" id="bubble" class="bubble" :style="{width: `${windowWidth}px`, height: `${windowHeight}px`}"></canvas>
<view class="container about-bg" style="background-image:url('https://tnuiimage.tnkjapp.com/about/about.png')">
<view class="container about-bg" style="background-image:url('https://resource.tuniaokj.com/images/about/about.png')">
</view>
</view>
</template>
@@ -68,7 +68,7 @@
// 生成泡泡
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({
src: image,
success: (res) => {
+22
View File
@@ -0,0 +1,22 @@
<template>
<view class="">
<web-view src="https://www.tuniaokj.com/cube/index.html"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped>
</style>
+8 -8
View File
@@ -40,23 +40,23 @@
swiperList: [{
id: 0,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg1.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full1.png'
url: 'https://resource.tuniaokj.com/images/swiper/fullbg1.jpg',
pngurl: 'https://resource.tuniaokj.com/images/swiper/full1.png'
}, {
id: 1,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg2.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full2.png'
url: 'https://resource.tuniaokj.com/images/swiper/fullbg2.jpg',
pngurl: 'https://resource.tuniaokj.com/images/swiper/full2.png'
}, {
id: 2,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg1.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full3.png'
url: 'https://resource.tuniaokj.com/images/swiper/fullbg1.jpg',
pngurl: 'https://resource.tuniaokj.com/images/swiper/full3.png'
}, {
id: 3,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg2.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full4.png'
url: 'https://resource.tuniaokj.com/images/swiper/fullbg2.jpg',
pngurl: 'https://resource.tuniaokj.com/images/swiper/full4.png'
}],
}
},
+4 -4
View File
@@ -54,7 +54,7 @@
<!-- 头像用户信息 -->
<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-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/tuniao.png');width: 170rpx;height: 170rpx;background-size: cover;">
<view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/tuniao.png');width: 170rpx;height: 170rpx;background-size: cover;">
</view>
</view>
<!-- <view class="user-info__nick-name">图鸟UI</view> -->
@@ -75,13 +75,13 @@
<view class="tnwave waveAnimation">
<view class="waveWrapperInner bgTop">
<view class="wave waveTop" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
<view class="wave waveTop" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgMiddle">
<view class="wave waveMiddle" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
<view class="wave waveMiddle" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgBottom">
<view class="wave waveBottom" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-1.png')"></view>
<view class="wave waveBottom" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-1.png')"></view>
</view>
</view>
+24
View File
@@ -0,0 +1,24 @@
<template>
<view class="components-pano">
<!-- <web-view src="https://sketchfab.com/models/1e9cb6b98a5b4bc39f0e48ec0261000d/embed?autostart=1&internal=1&ui_infos=0&ui_snapshots=1&ui_stop=0&ui_watermark=0"></web-view> -->
<web-view src="https://vr.he29.com/tour/mf926a02a03966a.html"></web-view>
<!-- <web-view src="https://vr.he29.com/v3/tour/index?id=7026"></web-view> -->
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped>
</style>
+1 -1
View File
@@ -15,7 +15,7 @@
</tn-nav-bar>
<view class="bottom-backgroup">
<image src='https://tnuiimage.tnkjapp.com/animate/activity.jpg' mode='widthFix' class='backgroud-image'></image>
<image src='https://resource.tuniaokj.com/images/animate/activity.jpg' mode='widthFix' class='backgroud-image'></image>
</view>
<nav-index-button></nav-index-button>
+4 -4
View File
@@ -12,10 +12,10 @@
<view class="login">
<!-- 顶部背景图片-->
<view class="login__bg login__bg--top">
<image class="bg" src="https://tnuiimage.tnkjapp.com/login/1/login_top2.jpg" mode="widthFix"></image>
<image class="bg" src="https://resource.tuniaokj.com/images/login/1/login_top2.jpg" mode="widthFix"></image>
</view>
<view class="login__bg login__bg--top">
<image class="rocket rocket-sussuspension" src="https://tnuiimage.tnkjapp.com/login/1/login_top3.png" mode="widthFix"></image>
<image class="rocket rocket-sussuspension" src="https://resource.tuniaokj.com/images/login/1/login_top3.png" mode="widthFix"></image>
</view>
<view class="login__wrapper">
@@ -121,7 +121,7 @@
<!-- 底部背景图片-->
<view class="login__bg login__bg--bottom">
<image src="https://tnuiimage.tnkjapp.com/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
<image src="https://resource.tuniaokj.com/images/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
</view>
</view>
@@ -396,7 +396,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
}
+4 -4
View File
@@ -15,10 +15,10 @@
<view class="login">
<!-- 顶部背景图片-->
<!-- <view class="login__bg login__bg--top">
<image class="bg" src="https://tnuiimage.tnkjapp.com/login/1/login_top2.jpg" mode="widthFix"></image>
<image class="bg" src="https://resource.tuniaokj.com/images/login/1/login_top2.jpg" mode="widthFix"></image>
</view>
<view class="login__bg login__bg--top">
<image class="rocket rocket-sussuspension" src="https://tnuiimage.tnkjapp.com/login/1/login_top3.png" mode="widthFix"></image>
<image class="rocket rocket-sussuspension" src="https://resource.tuniaokj.com/images/login/1/login_top3.png" mode="widthFix"></image>
</view> -->
<view class="login__wrapper">
@@ -124,7 +124,7 @@
<!-- 底部背景图片-->
<!-- <view class="login__bg login__bg--bottom">
<image src="https://tnuiimage.tnkjapp.com/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
<image src="https://resource.tuniaokj.com/images/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
</view> -->
</view>
@@ -477,7 +477,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
}
+2 -2
View File
@@ -12,7 +12,7 @@
<view class="login">
<!-- 顶部背景图片-->
<view class="login__bg login__bg--top">
<image class="bg" src="https://tnuiimage.tnkjapp.com/swiper/banner-animate2.png" mode="aspectFill"></image>
<image class="bg" src="https://resource.tuniaokj.com/images/swiper/banner-animate2.png" mode="aspectFill"></image>
</view>
<view class="login__wrapper">
@@ -383,7 +383,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
}
+3 -3
View File
@@ -12,7 +12,7 @@
<view class="login">
<!-- 顶部背景图片-->
<view class="login__bg login__bg--top">
<image class="bg" src="https://tnuiimage.tnkjapp.com/login/2/login-top2.png" mode="widthFix"></image>
<image class="bg" src="https://resource.tuniaokj.com/images/login/2/login-top2.png" mode="widthFix"></image>
</view>
<view class="login__wrapper">
@@ -134,7 +134,7 @@
<!-- 底部背景图片-->
<view class="login__bg login__bg--bottom">
<image src="https://tnuiimage.tnkjapp.com/login/2/login-bottom2.png" mode="widthFix"></image>
<image src="https://resource.tuniaokj.com/images/login/2/login-bottom2.png" mode="widthFix"></image>
</view>
</view>
@@ -402,7 +402,7 @@
// opacity: 1;
// transform: scale(1, 1);
// 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);
// }
}
}
+219
View File
@@ -0,0 +1,219 @@
<template>
<view class="template-pay tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}" style="background: linear-gradient(180deg, #D8E5FF, #F9FFF9);">
<view class="tn-margin">
<view class="button-vip tn-flex tn-flex-row-between tn-shadow-blur tn-main-gradient-blue">
<view class="tn-margin-left tn-margin-top-lg">
<view class="tn-color-white">
我的余额
</view>
<view class="tn-color-white tn-padding-top-sm">
<text class="" style="margin-left: -6rpx;"></text>
<text class="tn-text-bold" style="font-size: 80rpx;">129.29</text>
</view>
<view class="tn-color-white" style="padding-top: 45rpx;opacity: 0.6;">6122 **** **** 60606</view>
</view>
<view class="tn-margin-right tn-margin-top-xl tn-color-white">
<view class="tn-padding-bottom-xs">
<text class="tn-padding-right-xs" style="opacity: 0.3;">可用本金</text>
129.00
</view>
<view class="tn-padding-bottom-xs">
<text class="tn-padding-right-xs" style="opacity: 0.3;">赠送金额</text>
0.29
</view>
<view class="tn-padding-bottom-xs">
<text class="tn-padding-right-xs" style="opacity: 0.3;">冻结金额</text>
0.00
</view>
</view>
</view>
</view>
</view>
<view class="tn-margin tn-padding-top-xl">
<view class="tn-bg-gray--light tn-flex" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
<text class="tn-flex tn-text-lg tn-padding-right-xs tn-color-gray--dark"></text>
<input placeholder="请输入充值金额" name="input" placeholder-style="color:#AAAAAA" style="width: 100%;"></input>
</view>
</view>
<view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
<view class="justify-content-item">
<view class="tn-text-xxl">
<text class="tn-icon-payment-alipay tn-color-blue--dark"></text>
<text class="tn-padding-left-sm tn-text-lg">支付宝</text>
</view>
</view>
<view class="justify-content-item tn-text-xl tn-color-green--dark">
<view class="tn-icon-success-circle"></view>
</view>
</view>
<view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
<view class="justify-content-item">
<view class="tn-text-xxl">
<text class="tn-icon-payment-wechat tn-color-green--dark"></text>
<text class="tn-padding-left-sm tn-text-lg">微信支付</text>
</view>
</view>
<view class="justify-content-item tn-text-xl tn-color-grey--disabled">
<view class="tn-icon-circle"></view>
</view>
</view>
<view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
<view class="justify-content-item">
<view class="tn-text-xxl">
<text class="tn-icon-pay-fill tn-color-aquablue--dark"></text>
<text class="tn-padding-left-sm tn-text-lg">银行卡支付</text>
</view>
</view>
<view class="justify-content-item tn-text-xl tn-color-grey--disabled">
<view class="tn-icon-circle"></view>
</view>
</view>
<!-- 悬浮按钮-->
<view class="tn-flex tn-footerfixed">
<view class="tn-flex-1 justify-content-item tn-margin tn-text-center">
<view class="tn-padding-xl">
<text class="tn-icon-tip tn-padding-right-xs tn-color-gray"></text>
<text class="tn-color-gray">点击充值即表示你已同意</text>
<text class="tn-color-blue--disabled">充值协议</text>
</view>
<tn-button backgroundColor="tn-main-gradient-aquablue" padding="40rpx 0" width="100%" shadow>
<text class="tn-color-white"> </text>
</tn-button>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplatePay',
mixins: [template_page_mixin],
data(){
return {
}
},
methods: {
// 跳转
tn(e) {
uni.navigateTo({
url: e,
});
},
}
}
</script>
<style lang="scss" scoped>
/* 胶囊*/
.tn-custom-nav-bar__back {
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: space-evenly;
align-items: center;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 1000rpx;
border: 1rpx solid rgba(255, 255, 255, 0.5);
color: #FFFFFF;
font-size: 18px;
.icon {
display: block;
flex: 1;
margin: auto;
text-align: center;
}
&:before {
content: " ";
width: 1rpx;
height: 110%;
position: absolute;
top: 22.5%;
left: 0;
right: 0;
margin: auto;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
opacity: 0.7;
background-color: #FFFFFF;
}
}
/* 底部悬浮按钮 start*/
.tn-tabbar-height {
min-height: 100rpx;
height: calc(120rpx + env(safe-area-inset-bottom) / 2);
}
.tn-footerfixed {
position: fixed;
width: 100%;
bottom: calc(60rpx + env(safe-area-inset-bottom));
z-index: 1024;
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
}
/* 底部悬浮按钮 end*/
/* 卡 */
.button-vip {
width: 100%;
height: 300rpx;
border-radius: 15rpx;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg4.png);
}
}
/* 间隔线 start*/
.tn-strip-bottom-min {
width: 100%;
border-bottom: 1rpx solid #F8F9FB;
}
.tn-strip-bottom {
width: 100%;
border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}
/* 间隔线 end*/
</style>
+263
View File
@@ -0,0 +1,263 @@
<template>
<view class="template-pay tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="tn-margin">
<view class="button-vip tn-flex tn-flex-row-between tn-shadow-blur" style="background-color: #56BD48;">
<view class="tn-margin-left tn-margin-top-lg">
<view class="tn-color-white">
余额
</view>
<view class="tn-color-white tn-padding-top">
<text class="" style="margin-left: -6rpx;"></text>
<text class="tn-text-bold" style="font-size: 80rpx;">129.29</text>
</view>
</view>
<view class="tn-margin-right tn-margin-top-xl tn-color-white">
<view class="tn-padding-bottom-xs">
<text class="tn-padding-right-xs" style="opacity: 0.3;">可用本金</text>
129.00
</view>
<view class="tn-padding-bottom-xs">
<text class="tn-padding-right-xs" style="opacity: 0.3;">赠送金额</text>
0.29
</view>
<view class="tn-padding-bottom-xs">
<text class="tn-padding-right-xs" style="opacity: 0.3;">冻结金额</text>
0.00
</view>
</view>
</view>
</view>
</view>
<view class="tn-tag-content tn-text-justify tn-margin">
<view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select">
<text class="">30</text>
</view>
<view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
<text class="">50</text>
</view>
<view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
<text class="">80</text>
</view>
<view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
<text class="">100</text>
</view>
<view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
<text class="">300</text>
</view>
<view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
<text class="">1000</text>
</view>
<view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
<text class="">6000</text>
</view>
</view>
<view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
<view class="justify-content-item">
<view class="tn-text-xxl">
<text class="tn-icon-payment-alipay tn-color-blue--dark"></text>
<text class="tn-padding-left-sm tn-text-lg">支付宝</text>
</view>
</view>
<view class="justify-content-item tn-text-xl tn-color-green--dark">
<view class="tn-icon-success-circle"></view>
</view>
</view>
<view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
<view class="justify-content-item">
<view class="tn-text-xxl">
<text class="tn-icon-payment-wechat tn-color-green--dark"></text>
<text class="tn-padding-left-sm tn-text-lg">微信支付</text>
</view>
</view>
<view class="justify-content-item tn-text-xl tn-color-grey--disabled">
<view class="tn-icon-circle"></view>
</view>
</view>
<view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
<view class="justify-content-item">
<view class="tn-text-xxl">
<text class="tn-icon-pay-fill tn-color-aquablue--dark"></text>
<text class="tn-padding-left-sm tn-text-lg">银行卡支付</text>
</view>
</view>
<view class="justify-content-item tn-text-xl tn-color-grey--disabled">
<view class="tn-icon-circle"></view>
</view>
</view>
<!-- 悬浮按钮-->
<view class="tn-flex tn-footerfixed">
<view class="tn-flex-1 justify-content-item tn-margin tn-text-center">
<view class="tn-padding-xl">
<text class="tn-icon-tip tn-padding-right-xs tn-color-gray"></text>
<text class="tn-color-gray">点击充值即表示你已同意</text>
<text class="tn-color-blue--disabled">充值协议</text>
</view>
<tn-button backgroundColor="#56BD48" padding="40rpx 0" width="100%" shadow>
<text class="tn-color-white"> </text>
</tn-button>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplatePay',
mixins: [template_page_mixin],
data(){
return {
}
},
methods: {
// 跳转
tn(e) {
uni.navigateTo({
url: e,
});
},
}
}
</script>
<style lang="scss" scoped>
/* 胶囊*/
.tn-custom-nav-bar__back {
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: space-evenly;
align-items: center;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 1000rpx;
border: 1rpx solid rgba(255, 255, 255, 0.5);
color: #FFFFFF;
font-size: 18px;
.icon {
display: block;
flex: 1;
margin: auto;
text-align: center;
}
&:before {
content: " ";
width: 1rpx;
height: 110%;
position: absolute;
top: 22.5%;
left: 0;
right: 0;
margin: auto;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
opacity: 0.7;
background-color: #FFFFFF;
}
}
/* 底部悬浮按钮 start*/
.tn-tabbar-height {
min-height: 100rpx;
height: calc(120rpx + env(safe-area-inset-bottom) / 2);
}
.tn-footerfixed {
position: fixed;
width: 100%;
bottom: calc(60rpx + env(safe-area-inset-bottom));
z-index: 1024;
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
}
/* 底部悬浮按钮 end*/
/* 卡 */
.button-vip {
width: 100%;
height: 240rpx;
border-radius: 15rpx;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
}
}
/* 间隔线 start*/
.tn-strip-bottom-min {
width: 100%;
border-bottom: 1rpx solid #F8F9FB;
}
.tn-strip-bottom {
width: 100%;
border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}
/* 间隔线 end*/
/* 选择*/
.tag-select{
color: #07C160;
border: 1rpx solid #07C160;
background-color: #07C16010;
border-radius: 16rpx;
}
.tag-select-no{
color: #080808;
border: 1rpx solid #E6E6E6;
background-color: #F9F9F9;
border-radius: 16rpx;
}
/* 标签内容 start*/
.tn-tag-content {
&__item {
display: inline-block;
line-height: 45rpx;
padding: 20rpx 42rpx;
margin: 20rpx 20rpx 5rpx 0rpx;
&--prefix {
padding-right: 10rpx;
}
}
}
/* 标签内容 end*/
</style>
+231
View File
@@ -0,0 +1,231 @@
<template>
<view class="template-pay tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="tn-margin">
<view class="button-vip tn-flex tn-flex-row-between tn-shadow-blur tn-main-gradient-aquablue">
<view class="tn-margin-left tn-margin-top-lg">
<view class="tn-color-white tn-padding-top tn-text-center">
<text class="tn-icon-rabbit tn-padding-right-sm" style="font-size: 80rpx;margin-left: -10rpx;"></text>
<text class="tn-text-bold" style="font-size: 80rpx;">12,929</text>
</view>
<view class="tn-color-white tn-text-sm" style="padding-top: 65rpx;opacity: 0.6;">充值金额可用于购买礼物与特权</view>
</view>
</view>
</view>
</view>
<view class="tn-margin tn-padding-top tn-color-white tn-text-lg tn-text-bold">
选择充值金额
</view>
<view class="tn-flex tn-flex-col-center tn-flex-wrap tn-color-white tn-margin-sm">
<view class="tn-padding-sm tn-text-center tag-select-no">
<view class="tn-text-xl tn-padding-top-sm">
<text class="tn-icon-rabbit tn-padding-right-sm" style="margin-left: -10rpx;"></text>
<text class="tn-text-bold">56</text>
</view>
<view class="tn-padding-top-xs" style="color: #888CA0;">
8.00
</view>
</view>
<view class="tn-padding-sm tn-text-center tag-select">
<view class="tn-text-xl tn-padding-top-sm">
<text class="tn-icon-rabbit tn-padding-right-sm" style="margin-left: -10rpx;"></text>
<text class="tn-text-bold">118</text>
</view>
<view class="tn-padding-top-xs" style="color: #888CA0;">
16.00
</view>
</view>
<view class="tn-padding-sm tn-text-center tag-select-no">
<view class="tn-text-xl tn-padding-top-sm">
<text class="tn-icon-rabbit tn-padding-right-sm" style="margin-left: -10rpx;"></text>
<text class="tn-text-bold">228</text>
</view>
<view class="tn-padding-top-xs" style="color: #888CA0;">
30.00
</view>
</view>
<view class="tn-padding-sm tn-text-center tag-select-no">
<view class="tn-text-xl tn-padding-top-sm">
<text class="tn-icon-rabbit tn-padding-right-sm" style="margin-left: -10rpx;"></text>
<text class="tn-text-bold">428</text>
</view>
<view class="tn-padding-top-xs" style="color: #888CA0;">
50.00
</view>
</view>
<view class="tn-padding-sm tn-text-center tag-select-no">
<view class="tn-text-xl tn-padding-top-sm">
<text class="tn-icon-rabbit tn-padding-right-sm" style="margin-left: -10rpx;"></text>
<text class="tn-text-bold">1488</text>
</view>
<view class="tn-padding-top-xs" style="color: #888CA0;">
168.00
</view>
</view>
</view>
<view class="tn-margin tn-padding-top tn-color-white tn-text-lg tn-text-bold">
或输入充值金额
</view>
<view class="tn-margin tn-padding-top-xs">
<view class="tn-flex" style="border-radius: 10rpx;padding: 20rpx 30rpx;background-color: #FFFFFF30;">
<text class="tn-flex tn-text-lg tn-padding-right-xs tn-color-white"></text>
<input placeholder="请输入充值金额" name="input" placeholder-style="color:#AAAAAA" style="width: 100%;color: #FFFFFF;"></input>
</view>
</view>
<!-- 悬浮按钮-->
<view class="tn-flex tn-footerfixed">
<view class="tn-flex-1 justify-content-item tn-margin tn-text-center">
<view class="tn-padding-xl">
<text class="tn-icon-tip tn-padding-right-xs tn-color-gray"></text>
<text class="tn-color-gray">点击充值即表示你已同意</text>
<text class="tn-color-blue--disabled">充值协议</text>
</view>
<tn-button backgroundColor="#4327DF" padding="40rpx 0" shape="round" width="80%">
<text class="tn-color-white"> </text>
</tn-button>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplatePay',
mixins: [template_page_mixin],
data(){
return {
}
},
methods: {
// 跳转
tn(e) {
uni.navigateTo({
url: e,
});
},
}
}
</script>
<style lang="scss" scoped>
/* 胶囊*/
.tn-custom-nav-bar__back {
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: space-evenly;
align-items: center;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 1000rpx;
border: 1rpx solid rgba(255, 255, 255, 0.5);
color: #FFFFFF;
font-size: 18px;
.icon {
display: block;
flex: 1;
margin: auto;
text-align: center;
}
&:before {
content: " ";
width: 1rpx;
height: 110%;
position: absolute;
top: 22.5%;
left: 0;
right: 0;
margin: auto;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
opacity: 0.7;
background-color: #FFFFFF;
}
}
.template-pay{
height: 100vh;
background-color: #161324;
}
/* 底部悬浮按钮 start*/
.tn-tabbar-height {
min-height: 100rpx;
height: calc(120rpx + env(safe-area-inset-bottom) / 2);
}
.tn-footerfixed {
position: fixed;
width: 100%;
bottom: calc(60rpx + env(safe-area-inset-bottom));
z-index: 1024;
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
}
/* 底部悬浮按钮 end*/
/* 卡 */
.button-vip {
width: 100%;
height: 300rpx;
border-radius: 15rpx;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg4.png);
}
}
.tag-select{
width: 31%;
border: 4rpx solid #4327DF;
margin: 8rpx 1%;
border-radius: 20rpx;
background-color: #211E2F50;
}
.tag-select-no{
width: 31%;
border: 4rpx solid #211E2F;
margin: 8rpx 1%;
border-radius: 20rpx;
background-color: #211E2F;
}
</style>
+10 -10
View File
@@ -13,18 +13,18 @@
<view class="top-backgroup">
<image src='https://tnuiimage.tnkjapp.com/swiper/summer.jpg' mode='widthFix' class='backgroud-image'></image>
<image src='https://resource.tuniaokj.com/images/swiper/summer.jpg' mode='widthFix' class='backgroud-image'></image>
</view>
<view class="tnwave waveAnimation">
<view class="waveWrapperInner bgTop">
<view class="wave waveTop" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
<view class="wave waveTop" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgMiddle">
<view class="wave waveMiddle" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
<view class="wave waveMiddle" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgBottom">
<view class="wave waveBottom" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-1.png')"></view>
<view class="wave waveBottom" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-1.png')"></view>
</view>
</view>
@@ -32,7 +32,7 @@
<!-- 头像用户信息 -->
<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="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg');width: 170rpx;height: 170rpx;background-size: cover;">
<view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg');width: 170rpx;height: 170rpx;background-size: cover;">
</view>
<!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view> -->
</view>
@@ -160,7 +160,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tn.png'></image>
</view>
<view class="tn-color-gray">首页</view>
</view>
@@ -168,7 +168,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-discover">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image>
</view>
<view class="tn-color-gray">圈子</view>
</view>
@@ -176,7 +176,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-image-text">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image>
</view>
<view class="tn-color-gray">案例</view>
</view>
@@ -184,7 +184,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-my">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tnnew.png'></image>
</view>
<view class="tn-color-black">我的</view>
</view>
@@ -372,7 +372,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
}
+9 -9
View File
@@ -11,7 +11,7 @@
<view class="top-backgroup">
<image src='https://tnuiimage.tnkjapp.com/my/my-bg2.png' mode='widthFix' class='backgroud-image'></image>
<image src='https://resource.tuniaokj.com/images/my/my-bg2.png' mode='widthFix' class='backgroud-image'></image>
</view>
@@ -48,7 +48,7 @@
<!-- 图标logo -->
<view class="logo-pic tn-shadow" >
<view class="logo-image">
<view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg');width: 120rpx;height: 120rpx;background-size: cover;">
<view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg');width: 120rpx;height: 120rpx;background-size: cover;">
</view>
<!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view> -->
</view>
@@ -69,7 +69,7 @@
<view class="tn-flex-1 my-shadow tn-margin-right-sm tn-bg-white" style="padding: 30rpx 0;">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<image class="" src='https://tnuiimage.tnkjapp.com/my/my17.png' mode='aspectFit'></image>
<image class="" src='https://resource.tuniaokj.com/images/my/my17.png' mode='aspectFit'></image>
</view>
<view class="tn-text-center">
<view class="tn-text-ellipsis tn-color-gray--dark">插件市场地址</view>
@@ -79,7 +79,7 @@
<view class="tn-flex-1 my-shadow tn-margin-left-sm tn-bg-white" style="padding: 30rpx 0;">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<image class="" src='https://tnuiimage.tnkjapp.com/my/my14.png' mode='aspectFit'></image>
<image class="" src='https://resource.tuniaokj.com/images/my/my14.png' mode='aspectFit'></image>
</view>
<view class="tn-text-center">
<view class="tn-text-ellipsis tn-color-gray--dark">Gitee地址</view>
@@ -169,7 +169,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tn.png'></image>
</view>
<view class="tn-color-gray">首页</view>
</view>
@@ -177,7 +177,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-discover">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image>
</view>
<view class="tn-color-gray">圈子</view>
</view>
@@ -185,7 +185,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-image-text">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image>
</view>
<view class="tn-color-gray">案例</view>
</view>
@@ -193,7 +193,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-my">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tnnew.png'></image>
</view>
<view class="tn-color-black">我的</view>
</view>
@@ -341,7 +341,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
}
+9 -9
View File
@@ -11,7 +11,7 @@
<view class="top-backgroup">
<image src='https://tnuiimage.tnkjapp.com/my/my-bg3.png' mode='widthFix' class='backgroud-image'></image>
<image src='https://resource.tuniaokj.com/images/my/my-bg3.png' mode='widthFix' class='backgroud-image'></image>
</view>
@@ -48,7 +48,7 @@
<!-- 图标logo -->
<view class="logo-pic tn-shadow" >
<view class="logo-image">
<view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg');width: 120rpx;height: 120rpx;background-size: cover;">
<view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg');width: 120rpx;height: 120rpx;background-size: cover;">
</view>
<!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view> -->
</view>
@@ -231,7 +231,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tn.png'></image>
</view>
<view class="tn-color-gray">首页</view>
</view>
@@ -239,7 +239,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-discover">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image>
</view>
<view class="tn-color-gray">圈子</view>
</view>
@@ -247,7 +247,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-image-text">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image>
</view>
<view class="tn-color-gray">福利</view>
</view>
@@ -255,7 +255,7 @@
<view class="bar-icon">
<!-- <view class="tn-icon-my">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
<image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tnnew.png'></image>
</view>
<view class="tn-color-black">我的</view>
</view>
@@ -416,7 +416,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
}
@@ -505,7 +505,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
@@ -546,7 +546,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
}
+19 -19
View File
@@ -25,7 +25,7 @@
<view class="top-backgroup">
<image src='https://tnuiimage.tnkjapp.com/my/my-vip.jpg' mode='widthFix' class='backgroud-image'></image>
<image src='https://resource.tuniaokj.com/images/my/my-vip.jpg' mode='widthFix' class='backgroud-image'></image>
</view>
@@ -36,7 +36,7 @@
<!-- 图标logo -->
<view class="logo-pic tn-shadow">
<view class="logo-image">
<view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg');width: 100rpx;height: 100rpx;background-size: cover;">
<view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg');width: 100rpx;height: 100rpx;background-size: cover;">
</view>
<!-- <view class="tn-icon-logo-tuniao" style="font-size: 100rpx;color: #01BEFF;padding: 16rpx 0;"></view> -->
</view>
@@ -307,8 +307,8 @@
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-home.png'></image> -->
<image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tn.png'></image>
<!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-home.png'></image> -->
</view>
<view class="tn-color-gray">首页</view>
</view>
@@ -316,8 +316,8 @@
<view class="bar-icon">
<!-- <view class="tn-icon-discover tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-flower.png'></image> -->
<image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image>
<!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-flower.png'></image> -->
</view>
<view class="tn-color-gray">圈子</view>
</view>
@@ -336,8 +336,8 @@
<view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center">
<!-- <view class="tn-icon-logo-tuniao"></view> -->
<view class="bar-circle">
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/login/1/login_top3.png'></image> -->
<image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-tiger.png'></image>
<!-- <image class="" src='https://resource.tuniaokj.com/images/login/1/login_top3.png'></image> -->
<image class="" src='https://resource.tuniaokj.com/images/bless/bless-tiger.png'></image>
</view>
</view>
</view>
@@ -358,8 +358,8 @@
<view class="bar-icon">
<!-- <view class="tn-icon-image-text tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-china.png'></image> -->
<image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image>
<!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-china.png'></image> -->
</view>
<view class="tn-color-gray">优选</view>
</view>
@@ -367,8 +367,8 @@
<view class="bar-icon">
<!-- <view class="tn-icon-my tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-money.png'></image> -->
<image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tnnew.png'></image>
<!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-money.png'></image> -->
</view>
<view class="tn-color-gray">我的</view>
</view>
@@ -495,7 +495,7 @@
align-items: center;
justify-content: center;
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;
}
}
@@ -570,7 +570,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
@@ -609,7 +609,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
}
@@ -745,7 +745,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
}
@@ -778,7 +778,7 @@
display: block;
width: 100%;
height: 100%;
background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc1.png) no-repeat center center;
background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc1.png) no-repeat center center;
background-size: 100% 100%;
animation: arc 4s linear infinite;
}
@@ -849,7 +849,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
@@ -890,7 +890,7 @@
opacity: 1;
transform: scale(1, 1);
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);
}
}
}
+456
View File
@@ -0,0 +1,456 @@
<template>
<view class="third-page-short-video tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>短视频</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="container" :style="{height: containerHeight + 'px'}">
<tn-custom-swiper
class="swiper"
:current="current"
:duration="250"
:circular="!loadingFirst"
:vertical="true"
@change="handleSwiperChange"
>
<block v-for="(item, index) in swiperList" :key="index">
<tn-custom-swiper-item class="swiper__item">
<view class="item__container">
<video
v-if="item.loading"
class="item__video"
:id="`video-${index}`"
:src="item.src"
objectFit="cover"
:autoplay="false"
:loop="true"
:controls="false"
:show-progress="false"
:show-fullscreen-btn="false"
:show-center-play-btn="true"
:show-loading="false"
@error="handleVideoError($event, index)"
@loadedmetadata="handleVideoLoadedmetadata($event, index)"
></video>
<block v-if="current === index">
<view class="item__content">
<view class="author-name">@{{item.author.name}}</view>
<view class="desc">{{item.desc}}</view>
</view>
<view class="item__operation">
<view class="avatar">
<image class="image" :src="item.author.avatar"></image>
</view>
<view class="options like" @tap="clickLike(index)">
<view class="icon" :class="[item.like.flag ? 'icon__select tn-icon-like-fill' : 'tn-icon-like']"></view>
<view class="text">{{item.like.count}}</view>
</view>
<view class="options message">
<view class="icon tn-icon-comment"></view>
<view class="text">{{item.message}}</view>
</view>
<view class="options star" @tap="clickStar(index)">
<view class="icon" :class="[item.star.flag ? 'icon__select tn-icon-star-fill' : 'tn-icon-star']"></view>
<view class="text">{{item.star.count}}</view>
</view>
<view class="options share">
<view class="icon tn-icon-share-triangle"></view>
<view class="text">{{item.share}}</view>
</view>
</view>
</block>
</view>
</tn-custom-swiper-item>
</block>
</tn-custom-swiper>
<!-- <video
src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
></video>
<video
src="http://vjs.zencdn.net/v/oceans.mp4"
></video> -->
</view>
</view>
</view>
</template>
<script>
export default {
name: 'ThirdPageShortVideo',
data() {
return {
containerHeight: 0,
current: 0,
videoSrc: ['http://vjs.zencdn.net/v/oceans.mp4','http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'],
h5FirstPlay: true,
loadingFirst: true,
swiperList: [
{
author: {
name: '小泡泡',
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'
},
desc: '基于图鸟UI开发的第三方插件,图鸟加油,可以的。基于图鸟UI开发的第三方插件,图鸟加油,可以的。基于图鸟UI开发的第三方插件,图鸟加油,可以的。',
like: {
flag: true,
count: 100
},
message: 800,
star: {
flag: false,
count: 200
},
share: 300,
loading: false,
src: ''
},
{
author: {
name: '小泡泡',
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'
},
desc: '基于图鸟UI开发的第三方插件,图鸟加油,可以的。',
like: {
flag: true,
count: 100
},
message: 800,
star: {
flag: false,
count: 200
},
share: 300,
loading: false,
src: ''
},
{
author: {
name: '小泡泡',
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'
},
desc: '基于图鸟UI开发的第三方插件,图鸟加油,可以的。',
like: {
flag: true,
count: 100
},
message: 800,
star: {
flag: false,
count: 200
},
share: 300,
loading: false,
src: ''
},
{
author: {
name: '小泡泡',
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'
},
desc: '基于图鸟UI开发的第三方插件,图鸟加油,可以的。',
like: {
flag: true,
count: 100
},
message: 800,
star: {
flag: false,
count: 200
},
share: 300,
loading: false,
src: ''
},
{
author: {
name: '小泡泡',
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'
},
desc: '基于图鸟UI开发的第三方插件,图鸟加油,可以的。',
like: {
flag: true,
count: 100
},
message: 800,
star: {
flag: false,
count: 200
},
share: 300,
loading: false,
src: ''
}
],
// 存放当前缓冲视频是否加载成功
loadingVideoFlag: []
}
},
computed: {
listLength() {
return this.swiperList.length
}
},
onLoad() {
this.getContainerHeight()
this.initData()
},
onReady() {
this.$nextTick(() => {
this.loadVideo()
})
},
methods: {
// 点击喜欢按钮
clickLike(index) {
let item = this.swiperList[index]
item.like.flag = !item.like.flag
this.$set(this.swiperList, index, item)
},
// 点击收藏按钮
clickStar(index) {
let item = this.swiperList[index]
item.star.flag = !item.star.flag
this.$set(this.swiperList, index, item)
},
// 获取可用区域的高度
getContainerHeight() {
const systemInfo = uni.getSystemInfoSync()
this.containerHeight = systemInfo.safeArea.height - this.vuex_custom_bar_height + systemInfo.statusBarHeight
},
// 初始化数据
initData() {
this.loadingVideoFlag = Array(this.listLength).fill(false)
},
// 加载以当前current为基准的的前后各一个视频
loadVideo() {
// 获取当前轮播的index
const index = this.current
let prevIndex = index - 1 < 0 ? this.listLength - 1 : index - 1
let nextIndex = index + 1 > this.listLength - 1 ? 0 : index + 1
let currentItem = this.swiperList[index]
let prevItem = this.swiperList[prevIndex]
let nextItem = this.swiperList[nextIndex]
if (!currentItem.loading) {
currentItem.src = this.videoSrc[this.$tn.number.randomInt(0, 1)]
currentItem.loading = true
this.$set(this.swiperList, index, currentItem)
}
if (!prevItem.loading) {
prevItem.src = this.videoSrc[this.$tn.number.randomInt(0, 1)]
prevItem.loading = true
this.$set(this.swiperList, prevIndex, prevItem)
}
if (!nextItem.loading) {
nextItem.src = this.videoSrc[this.$tn.number.randomInt(0, 1)]
nextItem.loading = true
this.$set(this.swiperList, nextIndex, nextItem)
}
// 如果为非当前和前后的item,则进行重置
for (let i = 0; i < this.listLength; i++) {
if (![index, prevIndex, nextIndex].includes(i)) {
let tempItem = this.swiperList[i]
tempItem.loading = false
tempItem.src = ''
this.$set(this.swiperList, i, tempItem)
// 重置视频加载标记位
this.loadingVideoFlag[i] = false
}
}
// 开始播放当前视频
this.playCurrentVideo()
},
// 开始播放当前视频
playCurrentVideo() {
// 获取当前轮播的index
const index = this.current
// 开始播放当前的视频,并且停止其他视频
setTimeout(() => {
if (!this.loadingVideoFlag[index]) {
this.$tn.message.toast('播放失败,请看其他视频')
return
}
}, 800)
for (let i = 0; i < this.listLength; i++) {
const videoContext = uni.createVideoContext(`video-${i}`, this)
if (i === index) {
// #ifdef H5
if (!this.h5FirstPlay) {
videoContext.play()
}
// #endif
// #ifndef H5
videoContext.play()
// #endif
} else {
// #ifdef MP-WEIXIN
videoContext.stop()
// #endif
// #ifndef MP-WEIXIN
videoContext.pause()
// #endif
}
}
},
// 处理轮播的切换
handleSwiperChange(e) {
// console.log(e);
this.current = e.current
this.loadVideo()
// #ifdef H5
if (this.h5FirstPlay) {
this.h5FirstPlay = false
}
// #endif
// 当滑动到第3个并且是第一次滑动到该位置
if (this.loadingFirst && e.current === 2) {
this.loadingFirst = false
}
},
// 视频出现元数据时触发
handleVideoLoadedmetadata(e, index) {
// console.log(index, e);
if (!this.loadingVideoFlag[index] && this.current === index) {
console.log('loadmetadata');
// #ifdef H5
if (!this.h5FirstPlay) {
const videoContext = uni.createVideoContext(`video-${index}`, this)
videoContext.play()
}
// #endif
// #ifndef H5
const videoContext = uni.createVideoContext(`video-${index}`, this)
videoContext.play()
// #endif
}
this.loadingVideoFlag[index] = true
},
// 视频加载失败时触发
handleVideoError(e, index) {
// console.log(index, e);
this.loadingVideoFlag[index] = false
if (index === this.current) {
this.$tn.message.toast('播放失败,请看其他视频')
}
}
}
}
</script>
<style lang="scss" scoped>
.swiper {
width: 100%;
height: 100%;
display: block;
&__item {
background-color: #000000;
.item {
&__container {
position: absolute;
width: 100%;
height: 100%;
}
&__video {
width: 100%;
height: 100%;
}
&__content {
width: 70%;
color: #FFFFFF;
position: absolute;
bottom: 30rpx;
left: 30rpx;
z-index: 1;
transition-duration: 0s;
.author-name {
font-size: 38rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.desc {
width: 100%;
line-height: 1.3em;
white-space: normal !important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 5;
}
}
&__operation {
color: #FFFFFF;
position: absolute;
right: 30rpx;
bottom: 120rpx;
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
transition-duration: 0s;
.avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
overflow: hidden;
border: 6rpx solid #FFFFFF;
margin-bottom: 20rpx;
.image {
width: 100%;
height: 100%;
}
}
.icon {
font-size: 60rpx;
&__select {
color: #FFCA28;
animation: select-keyframes 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
}
.options {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10rpx;
.text {
font-size: 24rpx;
}
}
}
}
}
}
@keyframes select-keyframes {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
</style>
@@ -14,7 +14,7 @@
<!-- 提示信息 -->
<view
v-if="tips.text"
class="tn-action-sheet__tips tn-border-solid-bottom"
class="tn-action-sheet__tips border-solid-bottom"
:style="[tipsStyle]"
>
{{tips.text}}
@@ -23,7 +23,7 @@
<block v-for="(item, index) in list" :key="index">
<view
class="tn-action-sheet__item tn-text-ellipsis"
:class="[ index < list.length - 1 ? 'tn-border-solid-bottom' : '']"
:class="[ index < list.length - 1 ? 'border-solid-bottom' : '']"
:style="[itemStyle(index)]"
hover-class="tn-hover-class"
:hover-stay-time="150"
@@ -166,6 +166,10 @@
<style lang="scss" scoped>
.border-solid-bottom{
border-bottom: 1rpx solid #F8F7F8;
}
.tn-action-sheet {
&__tips {
font-size: 26rpx;
@@ -195,7 +199,7 @@
&--gab {
height: 12rpx;
background-color: #eaeaec;
background-color: #F8F7F8;
}
}
}
+9 -1
View File
@@ -1,7 +1,7 @@
<template>
<view
class="tn-avatar-class tn-avatar"
:class="[backgroundColorClass,avatarClass]"
:class="[backgroundColorClass,fontColorClass,avatarClass]"
:style="[avatarStyle]"
@tap="click"
>
@@ -177,6 +177,14 @@
style.backgroundImage = `url(${this.src})`
}
if(this.fontColorStyle) {
style.color = this.fontColorStyle
}
if(this.fontSizeStyle) {
style.fontSize = this.fontSizeStyle
}
if (this.border) {
style.border = `${this.borderSize}rpx solid ${this.borderColor}`
}
+321 -275
View File
@@ -1,302 +1,348 @@
<template>
<button
class="tn-btn-class tn-btn"
:class="[
<button class="tn-btn-class tn-btn" :class="[
buttonClass,
backgroundColorClass,
fontColorClass
]"
:style="[buttonStyle]"
hover-class="tn-hover"
:loading="loading"
:disabled="disabled"
:form-type="formType"
:open-type="openType"
@getuserinfo="handleGetUserInfo"
@getphonenumber="handleGetPhoneNumber"
@contact="handleContact"
@error="handleError"
@tap="handleClick"
>
<slot></slot>
</button>
]" :style="[buttonStyle]" hover-class="tn-hover" :loading="loading" :disabled="disabled" :form-type="formType"
:open-type="openType" @getuserinfo="handleGetUserInfo" @getphonenumber="handleGetPhoneNumber"
@contact="handleContact" @error="handleError" @tap="handleClick">
<slot></slot>
</button>
</template>
<script>
import componentsColorMixin from '../../libs/mixin/components_color.js'
export default {
mixins: [componentsColorMixin],
name: "tn-button",
// 解决再微信小程序种,自定义按钮无法触发bindsubmit
behaviors: ['wx://form-field-button'],
props: {
// 按钮索引,用于区分多个按钮
index: {
type: [Number, String],
default: 0
},
// 按钮形状 default 默认 round 圆角 icon 图标按钮
shape: {
type: String,
default: 'default'
},
// 是否加阴影
shadow: {
type: Boolean,
default: false
},
// 宽度 rpx或%
width: {
type: String,
default: 'auto'
},
// 度 rpx或%
height: {
type: String,
default: ''
},
// 按钮的尺寸 sm lg
size: {
type: String,
default: ''
},
// 字体是否加粗
fontBold: {
type: Boolean,
default: false
},
padding: {
type: String,
default: '0 30rpx'
},
// 外边距 与css的margin参数用法相同
margin: {
type: String,
default: ''
},
// 是否镂空
plain: {
type: Boolean,
default: false
},
// 当plain=true时,是否显示边框
border: {
type: Boolean,
default: true
},
// 当plain=true时,是否加粗显示边框
borderBold: {
type: Boolean,
default: false
},
// 是否禁用
disabled: {
type: Boolean,
default: false
},
// 是否显示加载图标
loading: {
type: Boolean,
default: false
},
// 触发form表单的事件类型
formType: {
type: String,
default: ''
},
// 开放能力
openType: {
type: String,
default: ''
},
// 是否阻止重复点击(默认间隔是200ms)
blockRepeatClick: {
type: Boolean,
default: false
}
},
computed: {
// 根据不同的参数动态生成class
buttonClass() {
let clazz = ''
// 按钮形状
switch (this.shape) {
case 'icon':
case 'round':
clazz += ' tn-round'
break
}
import componentsColorMixin from '../../libs/mixin/components_color.js'
import {
debounceFun,
throttleFun
} from '../../libs/function/applyEven.js'
let spanTime = 200;
export default {
mixins: [componentsColorMixin],
name: "tn-button",
// 解决再微信小程序种,自定义按钮无法触发bindsubmit
behaviors: ['wx://form-field-button'],
props: {
// 按钮索引,用于区分多个按钮
index: {
type: [Number, String],
default: 0
},
// 按钮形状 default 默认 round 圆角 icon 图标按钮
shape: {
type: String,
default: 'default'
},
// 是否加阴影
shadow: {
type: Boolean,
default: false
},
// 度 rpx或%
width: {
type: String,
default: 'auto'
},
// 高度 rpx或%
height: {
type: String,
default: ''
},
// 按钮的尺寸 sm lg
size: {
type: String,
default: ''
},
// 字体是否加粗
fontBold: {
type: Boolean,
default: false
},
padding: {
type: String,
default: '0 30rpx'
},
// 外边距 与css的margin参数用法相同
margin: {
type: String,
default: ''
},
// 是否镂空
plain: {
type: Boolean,
default: false
},
// 当plain=true时,是否显示边框
border: {
type: Boolean,
default: true
},
// 当plain=true时,是否加粗显示边框
borderBold: {
type: Boolean,
default: false
},
// 是否禁用
disabled: {
type: Boolean,
default: false
},
// 是否显示加载图标
loading: {
type: Boolean,
default: false
},
// 触发form表单的事件类型
formType: {
type: String,
default: ''
},
// 开放能力
openType: {
type: String,
default: ''
},
// 是否阻止重复点击(默认间隔是200ms)
blockRepeatClick: {
type: Boolean,
default: false
},
//场景:(如果开启blockRepeatClick,这里无效)none 不开启防抖节流模式,debounce :防抖模式 throttle:节流模式
scene:{
type: String,
default: 'none'
},
// 防抖节流间隔时间(毫秒)
blockTime:{
type: Number,
default: 200
}
},
computed: {
// 根据不同的参数动态生成class
buttonClass() {
let clazz = ''
// 按钮形状
switch (this.shape) {
case 'icon':
case 'round':
clazz += ' tn-round'
break
}
// 阴影
if (this.shadow) {
if (this.backgroundColorClass !== '' && this.backgroundColorClass.indexOf('tn-bg') != -1) {
const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
clazz += ` tn-shadow-${color}`
} else {
clazz += ' tn-shadow-blur'
}
}
// 阴影
if (this.shadow) {
if (this.backgroundColorClass !== '' && this.backgroundColorClass.indexOf('tn-bg') != -1) {
const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
clazz += ` tn-shadow-${color}`
} else {
clazz += ' tn-shadow-blur'
}
}
// 字体加粗
if (this.fontBold) {
clazz += ' tn-text-bold'
}
// 字体加粗
if (this.fontBold) {
clazz += ' tn-text-bold'
}
// 设置为镂空并且设置镂空便可才进行设置
if (this.plain) {
clazz += ' tn-btn--plain'
if (this.border) {
clazz += ' tn-border-solid'
if (this.borderBold) {
clazz += ' tn-bold-border'
}
if (this.backgroundColor !== '' && this.backgroundColor.includes('tn-bg')) {
const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
clazz += ` tn-border-${color}`
}
}
}
// 设置为镂空并且设置镂空便可才进行设置
if (this.plain) {
clazz += ' tn-btn--plain'
if (this.border) {
clazz += ' tn-border-solid'
if (this.borderBold) {
clazz += ' tn-bold-border'
}
if (this.backgroundColor !== '' && this.backgroundColor.includes('tn-bg')) {
const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
clazz += ` tn-border-${color}`
}
}
}
return clazz
},
// 按钮的样式
buttonStyle() {
let style = {}
switch(this.size) {
case 'sm':
style.padding = '0 20rpx'
style.fontSize = '22rpx'
style.height = this.height || '48rpx'
break
case 'lg':
style.padding = '0 40rpx'
style.fontSize = '32rpx'
style.height = this.height || '80rpx'
break
default :
style.padding = '0 30rpx'
style.fontSize = '28rpx'
style.height = this.height || '64rpx'
}
return clazz
},
// 按钮的样式
buttonStyle() {
let style = {}
switch (this.size) {
case 'sm':
style.padding = '0 20rpx'
style.fontSize = '22rpx'
style.height = this.height || '48rpx'
break
case 'lg':
style.padding = '0 40rpx'
style.fontSize = '32rpx'
style.height = this.height || '80rpx'
break
default:
style.padding = '0 30rpx'
style.fontSize = '28rpx'
style.height = this.height || '64rpx'
}
// 是否手动设置了内边距
if (this.padding) {
style.padding = this.padding
}
// 是否手动设置了内边距
if (this.padding) {
style.padding = this.padding
}
// 是否手动设置外边距
if (this.margin) {
style.margin = this.margin
}
// 是否手动设置外边距
if (this.margin) {
style.margin = this.margin
}
// 是否手动设置了字体大小
if (this.fontSize) {
style.fontSize = this.fontSize + this.fontUnit
}
style.width = this.shape === 'icon' ? style.height : this.width
style.padding = this.shape === 'icon' ? '0' : style.padding
// 是否手动设置了字体大小
if (this.fontSize) {
style.fontSize = this.fontSize + this.fontUnit
}
style.width = this.shape === 'icon' ? style.height : this.width
style.padding = this.shape === 'icon' ? '0' : style.padding
if (this.fontColorStyle) {
style.color = this.fontColorStyle
}
if (this.fontColorStyle) {
style.color = this.fontColorStyle
}
if (!this.backgroundColorClass) {
if (this.plain) {
style.borderColor = this.backgroundColorStyle || '#080808'
} else {
style.backgroundColor = this.backgroundColorStyle || '#FFFFFF'
}
}
if (!this.backgroundColorClass) {
if (this.plain) {
style.borderColor = this.backgroundColorStyle || '#080808'
} else {
style.backgroundColor = this.backgroundColorStyle || '#FFFFFF'
}
}
// 设置阴影
if (this.shadow && !this.backgroundColorClass) {
if (this.backgroundColorStyle.indexOf('#') != -1) {
style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || '#000000')}10`
} else if (this.backgroundColorStyle.indexOf('rgb') != -1 || this.backgroundColorStyle.indexOf('rgba') != -1 || !this.backgroundColorStyle) {
style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || 'rgba(0, 0, 0, 0.1)')}`
}
// 设置阴影
if (this.shadow && !this.backgroundColorClass) {
if (this.backgroundColorStyle.indexOf('#') != -1) {
style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || '#000000')}10`
} else if (this.backgroundColorStyle.indexOf('rgb') != -1 || this.backgroundColorStyle.indexOf(
'rgba') != -1 || !this.backgroundColorStyle) {
style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || 'rgba(0, 0, 0, 0.1)')}`
}
}
}
return style
},
},
data() {
return {
// 上次点击的时间
clickTime: 0,
// 两次点击防抖的间隔时间
clickIntervalTime: 200
}
},
methods: {
// 按钮点击事件
handleClick() {
if (this.disabled) {
return
}
if (this.blockRepeatClick) {
const nowTime = new Date().getTime()
if (nowTime - this.clickTime <= this.clickIntervalTime) {
return
}
this.clickTime = nowTime
setTimeout(() => {
this.clickTime = 0
}, this.clickIntervalTime)
}
this.$emit('click', {
index: Number(this.index)
})
// 兼容tap事件
this.$emit('tap', {
index: Number(this.index)
})
},
handleGetUserInfo({ detail = {} } = {}) {
this.$emit('getuserinfo', detail);
},
handleContact({ detail = {} } = {}) {
this.$emit('contact', detail);
},
handleGetPhoneNumber({ detail = {} } = {}) {
this.$emit('getphonenumber', detail);
},
handleError({ detail = {} } = {}) {
this.$emit('error', detail);
},
return style
},
},
data() {
return {
}
},
watch:{
//支持动态修改时间,但是这里是没有做撤销上一次的方法,毕竟这种场景非常少
//这里只是防止用户使用时复用了组件,有场景时长要求二次变动,而做的优化
blockTime:{
handler(newVal,oldVal){
this.initScene();
}
},
},
mounted() {
this.initScene()
},
methods: {
initScene(){
// 动态传入blockTime,需要重新初始化,参数
//防抖模式
this.debounceClick=debounceFun(function() {
this.emitClick();
}, this.blockTime);
//节流模式
this.throttleClick=throttleFun(function() {
this.emitClick();
}, this.blockTime);
},
//防抖模式
debounceClick:debounceFun(function() {
this.emitClick();
}, spanTime),
//节流模式
throttleClick:throttleFun(function() {
this.emitClick();
}, spanTime),
emitClick() {
//触发事件
this.$emit('click', {
index: Number(this.index)
})
// 兼容tap事件
this.$emit('tap', {
index: Number(this.index)
})
},
// 按钮点击事件
handleClick() {
if (this.disabled) {
return
}
//兼容旧的
if (this.blockRepeatClick) {
this.throttleClick();
return;
}
//普通模式,触发多少次就回调多少次
if(this.scene === 'none'){
this.emitClick();
}else if(this.scene == 'debounce'){
//防抖模式
this.debounceClick();
}else{
//节流模式
this.throttleClick();
}
},
handleGetUserInfo({
detail = {}
} = {}) {
this.$emit('getuserinfo', detail);
},
handleContact({
detail = {}
} = {}) {
this.$emit('contact', detail);
},
handleGetPhoneNumber({
detail = {}
} = {}) {
this.$emit('getphonenumber', detail);
},
handleError({
detail = {}
} = {}) {
this.$emit('error', detail);
},
}
}
}
}
</script>
<style lang="scss" scoped>
.tn-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
line-height: 1;
text-align: center;
text-decoration: none;
overflow: visible;
transform: translate(0rpx, 0rpx);
// background-color: $tn-mai
border-radius: 12rpx;
// color: $tn-font-color;
margin: 0;
.tn-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
line-height: 1;
text-align: center;
text-decoration: none;
overflow: visible;
transform: translate(0rpx, 0rpx);
// background-color: $tn-mai
border-radius: 12rpx;
// color: $tn-font-color;
margin: 0;
&--plain {
background-color: transparent !important;
background-image: none;
&.tn-round {
border-radius: 1000rpx !important;
}
}
}
&--plain {
background-color: transparent !important;
background-image: none;
&.tn-round {
border-radius: 1000rpx !important;
}
}
}
</style>
@@ -9,18 +9,18 @@
<view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
{{ d }}
</view>
<view
class="tn-countdown__separator"
:style="{
fontSize: separatorSize + 'rpx',
color: separatorColor,
paddingBottom: separator === 'en' ? '4rpx' : 0
}"
>
{{ separator === 'en' ? (showHours || showMinutes || showSeconds ? ':' : '') : '天'}}
</view>
</view>
<view
v-if="showHours && (hideZeroDay || (!hideZeroDay && d != '00'))"
class="tn-countdown__separator"
:style="{
fontSize: separatorSize + 'rpx',
color: separatorColor,
paddingBottom: separator === 'en' ? '4rpx' : 0
}"
>
{{ separator === 'en' ? ':' : '天'}}
</view>
<view
v-if="showHours"
@@ -31,18 +31,19 @@
<view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
{{ h }}
</view>
<view
v-if="showMinutes"
class="tn-countdown__separator"
:style="{
fontSize: separatorSize + 'rpx',
color: separatorColor,
paddingBottom: separator === 'en' ? '4rpx' : 0
}"
>
{{ separator === 'en' ? ':' : '时'}}
</view>
</view>
<view
v-if="showMinutes"
class="tn-countdown__separator"
:style="{
fontSize: separatorSize + 'rpx',
color: separatorColor,
paddingBottom: separator === 'en' ? '4rpx' : 0
}"
>
{{ separator === 'en' ? ':' : '时'}}
</view>
<view
v-if="showMinutes"
@@ -53,40 +54,43 @@
<view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
{{ m }}
</view>
</view>
<view
v-if="showSeconds"
class="tn-countdown__separator"
:style="{
fontSize: separatorSize + 'rpx',
color: separatorColor,
paddingBottom: separator === 'en' ? '4rpx' : 0
}"
>
{{ separator === 'en' ? ':' : '分'}}
<view
v-if="showSeconds"
class="tn-countdown__separator"
:style="{
fontSize: separatorSize + 'rpx',
color: separatorColor,
paddingBottom: separator === 'en' ? '4rpx' : 0
}"
>
{{ separator === 'en' ? ':' : '分'}}
</view>
</view>
<view
<view
class="tn-countdown__item"
:class="[backgroundColorClass]"
:style="[itemStyle]"
v-if="showSeconds"
class="tn-countdown__item"
:class="[backgroundColorClass]"
:style="[itemStyle]"
>
<view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
{{ s }}
</view>
</view>
<view
v-if="showSeconds && separator === 'cn'"
class="tn-countdown__separator"
:style="{
fontSize: separatorSize + 'rpx',
color: separatorColor,
paddingBottom: separator === 'en' ? '4rpx' : 0
}"
>
>
<view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
{{ s }}
</view>
<view
class="tn-countdown__separator"
:style="{
fontSize: separatorSize + 'rpx',
color: separatorColor,
paddingBottom: separator === 'en' ? '4rpx' : 0
}"
>
{{ separator === 'en' ? '' : '秒'}}
</view>
</view>
</view>
</template>
@@ -7,6 +7,7 @@
}"
@mouseenter="mouseEnterArea"
@mouseleave="mouseLeaveArea"
v-if="show"
>
<block
v-for="(item, index) in lists"
@@ -298,7 +299,8 @@
y: 0
},
timer: null,
dragging: false
dragging: false,
show:true
}
},
watch: {
@@ -551,22 +553,25 @@
if (index >= 0 && index < this.lists.length) {
let currentItemIndex = this.lists[index].index
this.lists.splice(index, 1)
// 重新排列列表信息
for (let item of this.lists) {
if (item.index > currentItemIndex) {
item.index -= 1
item.x = item.positionX * this.baseData.widthPx
item.y = item.positionY * this.baseData.heightPx
item.positionX = item.index % this.baseData.columns
item.positionY = Math.floor(item.index / this.baseData.columns)
this.$nextTick(() => {
this.show = false;
setTimeout(()=>{
this.show = true;
// 重新排列列表信息
for (let item of this.lists) {
if (item.index > currentItemIndex) {
item.index -= 1
item.x = item.positionX * this.baseData.widthPx
item.y = item.positionY * this.baseData.heightPx
})
item.positionX = item.index % this.baseData.columns
item.positionY = Math.floor(item.index / this.baseData.columns)
this.$nextTick(() => {
item.x = item.positionX * this.baseData.widthPx
item.y = item.positionY * this.baseData.heightPx
})
}
}
}
this.updateAddBtnPositioin()
this.updateAddBtnPositioin()
},50)
}
},
// 预览图片
@@ -684,8 +689,10 @@
updateAddBtnPositioin() {
if (this.lists.length >= this.maxCount) return
this.addBtn.x = (this.lists.length % this.baseData.columns) * this.baseData.widthPx
this.addBtn.y = Math.floor(this.lists.length / this.baseData.columns) * this.baseData.heightPx
setTimeout(()=>{
this.addBtn.x = (this.lists.length % this.baseData.columns) * this.baseData.widthPx
this.addBtn.y = Math.floor(this.lists.length / this.baseData.columns) * this.baseData.heightPx
},50);
},
// 获取排序后数据
sortList() {
+104 -23
View File
@@ -12,6 +12,12 @@
}"
@tap.stop="inputClick"
>
<view
v-if="showLeftIcon"
class="tn-input__left-icon__item tn-input__left-icon__clear"
>
<tn-button shape="icon" :scene="scene" :block-time="blockTime" @click="leftIconClick"><view class="icon" :class="[`tn-icon-${leftIcon}`]"></view></tn-button>
</view>
<textarea
v-if="type === 'textarea'"
class="tn-input__input tn-input__textarea"
@@ -33,28 +39,39 @@
@focus="onFocus"
@confirm="onConfirm"
/>
<input
v-else
class="tn-input__input"
:type="type === 'password' ? 'text' : type"
:style="[inputStyle]"
:value="defaultValue"
:password="type === 'password' && !showPassword"
:placeholder="placeholder"
:placeholderStyle="placeholderStyle"
:disabled="disabled || type === 'select'"
:maxlength="maxLength"
:focus="focus"
:confirmType="confirmType"
:selectionStart="elSelectionStart"
:selectionEnd="elSelectionEnd"
:cursorSpacing="cursorSpacing"
:showConfirmBar="showConfirmBar"
@input="handleInput"
@blur="handleBlur"
@focus="onFocus"
@confirm="onConfirm"
/>
<view v-else style="width:100%">
<view
v-if="type === 'select'"
class="tn-input__text"
>
{{defaultValue}}
</view>
<input
v-else
class="tn-input__input"
:type="type === 'password' ? 'text' : type"
:style="[inputStyle]"
:value="defaultValue"
:password="type === 'password' && !showPassword"
:placeholder="placeholder"
:placeholderStyle="placeholderStyle"
:disabled="disabled || type === 'select'"
:maxlength="maxLength"
:focus="focus"
:confirmType="confirmType"
:selectionStart="elSelectionStart"
:selectionEnd="elSelectionEnd"
:cursorSpacing="cursorSpacing"
:showConfirmBar="showConfirmBar"
@input="handleInput"
@blur="handleBlur"
@focus="onFocus"
@confirm="onConfirm"
/>
</view>
<!-- 右边的icon -->
<view class="tn-input__right-icon tn-flex tn-flex-col-center">
@@ -70,7 +87,7 @@
v-else-if="type === 'text' && !focused && showRightIcon && rightIcon !== ''"
class="tn-input__right-icon__item tn-input__right-icon__clear"
>
<view class="icon" :class="[`tn-icon-${rightIcon}`]"></view>
<tn-button shape="icon" :scene="scene" :block-time="blockTime" @click="rightIconClick"><view class="icon" :class="[`tn-icon-${rightIcon}`]"></view></tn-button>
</view>
<!-- 显示密码按钮 -->
<view
@@ -106,6 +123,7 @@
type: [String, Number],
default: ''
},
// 输入框的类型
type: {
type: String,
@@ -227,6 +245,26 @@
rightIcon: {
type: String,
default: ''
},
// 是否在输入框内最左边显示图标
showLeftIcon: {
type: Boolean,
default: false
},
// 最左边图标的名称
leftIcon: {
type: String,
default: ''
},
//场景:debounce :防抖模式 throttle:节流模式
scene:{
type: String,
default: 'debounce'
},
// 防抖节流间隔时间(毫秒)
blockTime:{
type: Number,
default: 500
}
},
computed: {
@@ -287,6 +325,12 @@
this.$on("on-form-item-error", this.onFormItemError)
},
methods: {
leftIconClick(){
this.$emit('leftClick', this.defaultValue)
},
rightIconClick(){
this.$emit('rightClick', this.defaultValue)
},
/**
* input事件
*/
@@ -377,6 +421,15 @@
flex: 1;
}
&__text {
font-size: 28rpx;
color: $tn-font-color;
flex: 1;
min-width: 296rpx;
max-width: 100%;
text-overflow:clip;
}
&__textarea {
width: auto;
font-size: 28rpx;
@@ -395,6 +448,7 @@
border-color: $tn-color-red !important;
}
&__right-icon {
line-height: 1;
.icon {
@@ -423,5 +477,32 @@
}
}
}
&__left-icon {
line-height: 1;
&__item {
margin-left: 0rpx;
margin-top: 4rpx;
}
&__clear {
.icon {
font-size: 32rpx;
color: $tn-font-sub-color;
}
}
&__select {
transition: transform .4s;
.icon {
font-size: 26rpx;
}
&--reverse {
transform: rotate(-180deg);
}
}
}
}
</style>
@@ -12,7 +12,7 @@
:fontColor="fontColor"
:fontSize="fontSize"
:fontUnit="fontUnit"
:list="list"
:list="valueList"
:show="show"
:playStatus="playStatus"
:leftIcon="leftIcon"
@@ -38,7 +38,7 @@
:fontColor="fontColor"
:fontSize="fontSize"
:fontUnit="fontUnit"
:list="list"
:list="valueList"
:show="show"
:mode="mode"
:playStatus="playStatus"
@@ -76,6 +76,18 @@
return []
}
},
keyName:{
type:String,
default: 'key'
},
valueName:{
type:String,
default: 'value'
},
keyValue:{
type:String,
default: undefined
},
// 是否显示
show: {
type: Boolean,
@@ -167,24 +179,67 @@
computed: {
// 当设置了show为false,或者autoHidden为true且list为空时,不显示通知
showNotice() {
if (this.show === false || (this.autoHidden && this.list.length === 0)) return false
else return true
return !(this.show === false || (this.autoHidden && this.list.length === 0))
}
},
watch:{
keyValue:{
handler(value) {
this.loadList();
},
deep: true
},
list:{
handler(value) {
this.loadList();
},
deep: true
},
},
data() {
return {
//显示的值
valueList:[],
}
},
mounted() {
this.loadList();
},
methods: {
// 点击了通知栏
click(index) {
this.$emit('click', index)
let value = this.findValue(index);
//如果是对象,返回传入的对象
if (this.isObj(value)){
this.$emit('click', value)
}else {
this.$emit('click', index)
}
},
findValue(findIndex){
let objList = []
for (let index in this.list){
let v = this.list[index];
if (this.isObj(v)){
//判断是否指定key显示,如果是则显示指定的列表,否则就返回所有列表
if (this.keyValue == undefined || v[this.keyName] == this.keyValue){
objList.push(v);
}
}else{
//兼容旧的,旧的直接返回下表
return findIndex;
}
}
return findIndex >= objList.length ? undefined : objList[findIndex];
},
// 点击了关闭按钮
close() {
this.$emit('close')
},
//判断元素是否是对象
isObj(value){
return typeof(value) === 'object';
},
// 点击了左边图标
clickLeftIcon() {
this.$emit('clickLeft')
@@ -196,6 +251,21 @@
// 一个周期滚动结束
end() {
this.$emit('end')
},
loadList() {
let tmpList = [];
for (let index in this.list) {
let v = this.list[index];
if (this.isObj(v)) {
//判断是否指定key显示,如果是则显示指定的列表,否则就返回所有列表
if (this.keyValue == undefined || v[this.keyName] == this.keyValue) {
tmpList.push(v[this.valueName]);
}
} else {
tmpList.push(v);
}
}
this.valueList = tmpList;
}
}
}
+9 -5
View File
@@ -12,7 +12,7 @@
>
<view class="tn-picker__content" :style="{ zIndex: elZIndex }">
<!-- 顶部 -->
<view class="tn-picker__content__header tn-border-solid-bottom" @touchmove.stop.prevent>
<view class="tn-picker__content__header" @touchmove.stop.prevent>
<!-- 取消按钮 -->
<view
class="tn-picker__content__header__btn tn-picker__content__header--cancel"
@@ -242,7 +242,7 @@
// 取消按钮的文字
cancelText: {
type: String,
default: '取消'
default: '取 消'
},
// 取消按钮的颜色
cancelColor: {
@@ -252,7 +252,7 @@
// 确认按钮的文字
confirmText: {
type: String,
default: '确认'
default: '确 认'
},
// 确认按钮的演示
confirmColor: {
@@ -665,7 +665,8 @@
flex-direction: row;
width: 100%;
height: 90rpx;
padding: 0 40rpx;
margin-top: 10rpx;
padding: 0 30rpx;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
@@ -688,7 +689,10 @@
}
&--confirm {
color: $tn-main-color;
background-color: #07C160;
color: #FFFFFF;
padding: 10rpx 25rpx;
border-radius: 10rpx;
}
}
+3 -2
View File
@@ -46,13 +46,13 @@
:style="[closeBtnStyle, {zIndex: elZIndex}]"
@tap="close"
></view>
<scroll-view class="tn-popup__content__scroll-view">
<scroll-view scroll-y class="tn-popup__content__scroll-view">
<slot></slot>
</scroll-view>
</view>
<!-- 除居中外的其他情况 -->
<scroll-view v-else class="tn-popup__content__scroll-view">
<scroll-view scroll-y v-else class="tn-popup__content__scroll-view">
<slot></slot>
</scroll-view>
<!-- 关闭按钮 -->
@@ -365,6 +365,7 @@
right: 0;
bottom: 0;
overflow: hidden;
z-index: 29091 !important;
&__content {
/* #ifndef APP-NVUE */
+13 -2
View File
@@ -12,7 +12,8 @@
<view
class="tn-radio__label"
:style="{
fontSize: labelSize ? labelSize + 'rpx' : ''
fontSize: labelSize ? labelSize + 'rpx' : '',
color: labelColor ? labelColor : '#080808'
}"
@tap="onClickLabel"
>
@@ -64,6 +65,16 @@
labelSize: {
type: Number,
default: 0
},
//labelColor 字体颜色
labelColor: {
type: String,
default: '#080808'
},
//边框颜色
borderColor: {
type: String,
default: '#080808'
}
},
computed: {
@@ -111,7 +122,7 @@
style.height = style.width
style.fontSize = (this.iconSize ? this.iconSize : (this.parentData.iconSize ? this.parentData.iconSize : 20)) + 'rpx'
style.borderColor = this.borderColor
return style
},
radioStyle() {
+6 -2
View File
@@ -200,7 +200,7 @@
searchResult(value) {
let result = [];
// console.log(this.list)
let data = this.list.filter(item => item.label.indexOf(value) > -1);
let data = this.list.filter(item => item[this.labelName].indexOf(value) > -1);
if (data.length > 0) {
result.push(data
);
@@ -396,7 +396,11 @@
}
&--confirm {
color: $tn-main-color;
// color: $tn-main-color;
background-color: #07C160;
color: #FFFFFF;
padding: 10rpx 25rpx;
border-radius: 10rpx;
}
}
+9 -1
View File
@@ -149,6 +149,9 @@
},
// 滑动移动中
touchMove(event) {
this._tGetRect('.tn-slider').then(res => {
this.sliderRect = res
});
if (this.disabled) return
if (!event.changedTouches[0]) return
@@ -157,7 +160,9 @@
if (this.status === 'start') this.$emit('start')
let movePageX = event.changedTouches[0].pageX
// 滑块的左边不一定跟屏幕左边接壤,所以需要减去最外层父元素的左边值
this.distanceX = movePageX - this.sliderRect.left
let marginLeft = this.sliderRect.left;
marginLeft = marginLeft < 0 ? 0 : marginLeft;
this.distanceX = movePageX - marginLeft;
// 获得移动距离对整个滑块的百分比值,此为带有多位小数的值,不能用此更新视图
// 否则造成通信阻塞,需要每改变一个step值时修改一次视图
this.newValue = ((this.distanceX / this.sliderRect.width) * (this.max - this.min)) + this.min
@@ -200,6 +205,9 @@
},
// 点击事件
click(event) {
this._tGetRect('.tn-slider').then(res => {
this.sliderRect = res
})
if (this.disabled) return
// 直接点击的情况,计算方式和touchMove方法一致
const value = (((event.detail.x - this.sliderRect.left) / this.sliderRect.width) * (this.max - this.min)) + this.min
@@ -25,7 +25,7 @@
:catch:touchmove="touching?wxs.touchMove:''"
:catch:touchend="touching?wxs.touchEnd:''"
>
<image class="tn-stack-swiper__image" :src="item.image"></image>
<image class="tn-stack-swiper__image" mode="aspectFill" :src="item.image"></image>
</view>
<!-- #endif -->
@@ -39,7 +39,7 @@
@touchmove="wxs.touchMove"
@touchend="wxs.touchEnd"
>
<image class="tn-stack-swiper__image" :src="item.image"></image>
<image class="tn-stack-swiper__image" mode="aspectFill" :src="item.image"></image>
</view>
<!-- #endif -->
</block>
@@ -1,410 +1,408 @@
<template>
<view
class="tn-subsection-class tn-subsection"
:class="[subsectionBackgroundColorClass]"
:style="[subsectionStyle]"
>
<!-- 滑块 -->
<block v-for="(item, index) in listInfo" :key="index">
<view
class="tn-subsection__item tn-text-ellipsis"
:class="[
<view class="tn-subsection-class tn-subsection" :class="[subsectionBackgroundColorClass]"
:style="[subsectionStyle]">
<!-- 滑块 -->
<block v-for="(item, index) in listInfo" :key="index">
<view class="tn-subsection__item tn-text-ellipsis" :class="[
'section-item-' + index,
noBorderRight(index)
]"
:style="[itemStyle(index)]"
@tap="click(index)"
>
<view class="tn-subsection__item--text tn-text-ellipsis" :style="[textStyle(index)]">
{{ item.name }}
</view>
</view>
</block>
<!-- 背景 -->
<view
class="tn-subsection__bg"
:class="[itemBarClass]"
:style="[itemBarStyle]"
></view>
</view>
]" :style="[itemStyle(index)]" @tap="click(index)">
<view class="tn-subsection__item--text tn-text-ellipsis" :style="[textStyle(index)]">
{{ item.name }}
</view>
</view>
</block>
<!-- 背景 -->
<view class="tn-subsection__bg" :class="[itemBarClass]" :style="[itemBarStyle]"></view>
</view>
</template>
<script>
import componentsColorMixin from '../../libs/mixin/components_color.js'
export default {
mixins: [componentsColorMixin],
name: 'tn-subsection',
props: {
// 模式选择
// button 按钮模式 subsection 分段模式
mode: {
type: String,
default: 'subsection'
},
// 组件高度
height: {
type: Number,
default: 60
},
// tab的数据
list: {
type: Array,
default() {
return []
}
},
// 当前活动tab的index
current: {
type: [Number, String],
default: 0
},
// 激活时的字体颜色
activeColor: {
type: String,
default: '#FFFFFF'
},
// 未激活时的字体颜色
inactiveColor: {
type: String,
default: '#AAAAAA'
},
// 激活tab的字体是否加粗
bold: {
type: Boolean,
default: false
},
backgroundColor: {
type: String,
default: '#F4F4F4'
},
// 滑块的颜色
buttonColor: {
type: String,
default: '#01BEFF'
},
// 当mode为button时生效,圆角的值,单位rpx
borderRadius: {
type: Number,
default: 10
},
// 是否开启动画
animation: {
type: Boolean,
default: true
},
// 动画类型
// cubic-bezier -> 贝塞尔曲线
animationType: {
type: String,
default: ''
},
// 滑动滑块的是否,是否触发震动
vibrateShort: {
type: Boolean,
default: false
}
},
data() {
return {
// 列表数据
listInfo: [],
// 子元素的背景样式
itemBgStyle: {
width: 0,
left: 0,
backgroundColor: '#ffffff',
height: '100%'
},
// 当前选中的滑块
currentIndex: this.current,
buttonPadding: 3,
// 组件初始化的是否current变换不应该震动
firstVibrateShort: true
}
},
watch: {
current: {
handler(val) {
this.currentIndex = val
this.changeSectionStatus(val)
},
immediate: true
}
},
created() {
// 将list的数据,传入listInfo数组
// 接受直接数组形式,或者数组元素为对象的形式,如:['开启', '关闭'],或者[{name: '开启'}, {name: '关闭'}]
this.listInfo = this.list.map((item, index) => {
if (typeof item !== 'object') {
let obj = {
width: 0,
name: item
}
return obj
} else {
item.width = 0
return obj
}
})
},
computed: {
// 设置mode=subsection时,滑块没有样式
noBorderRight() {
return index => {
if (this.mode !== 'subsection') return
let clazz = ''
// 不显示右边的边距
if (index < this.list.length - 1) clazz += ' tn-subsection__item--none-border-right'
// 显示整个组件的左右边圆角
if (index === 0) clazz += ' tn-subsection__item--first'
if (index === this.list.length - 1) clazz += ' tn-subsection__item--last'
return clazz
}
},
// 文字的样式
textStyle() {
return index => {
let style = {}
// 设置字体颜色
if (index === this.currentIndex) {
style.color = this.activeColor
} else {
style.color = this.inactiveColor
}
// 字体加粗
if (index === this.currentIndex && this.bold) style.fontWeight = 'bold'
// 文字大小
style.fontSize = (this.fontSize || 26) + this.fontUnit
return style
}
},
// 每个分段器item的样式
itemStyle() {
return index => {
let style = {}
if (this.fontSizeStyle) {
style.fontSize = this.fontSizeStyle
}
if (this.mode === 'subsection') {
// 设置border的样式
style.borderColor = this.buttonColor
style.borderWidth = '1rpx'
style.borderStyle = 'solid'
}
return style
}
},
// mode = button时,设置外层view的样式
subsectionStyle() {
let style = {}
style.height = this.height + 'rpx'
if (this.mode === 'button') {
style.backgroundColor = this.backgroundColorStyle
style.padding = `${this.buttonPadding}px`
style.borderRadius = `${this.borderRadius}rpx`
}
return style
},
// mode = button时,设置外层view的背景class
subsectionBackgroundColorClass() {
let clazz = ''
if (this.mode === 'button' && this.backgroundColorClass) {
clazz = this.backgroundColorClass
}
return clazz
},
itemBarClass() {
let clazz = ''
const buttonBgClass = this.$tn.color.getBackgroundColorInternalClass(this.buttonColor)
if (this.animation) {
clazz += ' tn-subsection__bg__animation'
if (this.animationType) {
clazz += ` tn-subsection__bg__animation--${this.animationType}`
}
}
if (buttonBgClass) {
clazz += ` ${buttonBgClass}`
}
return clazz
},
// 滑块样式
itemBarStyle() {
let style = {}
const buttonBgStyle = this.$tn.color.getBackgroundColorStyle(this.buttonColor)
if (buttonBgStyle) {
style.backgroundColor = this.buttonColor
}
style.zIndex = 1
if (this.mode === 'button') {
style.borderRadius = `${this.borderRadius}rpx`
style.bottom = `${this.buttonPadding}px`
style.height = (this.height - (this.buttonPadding * 4)) + 'rpx'
style.zIndex = 0
}
return Object.assign(this.itemBgStyle, style)
}
},
mounted() {
// 等待加载组件完成
setTimeout(() => {
this.getTabsInfo()
}, 10)
},
methods: {
// 改变滑块样式
changeSectionStatus(val) {
if (this.mode === 'subsection') {
// 根据滑块在最左和最右时,显示对应的圆角
if (val === this.list.length - 1) {
this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`
}
if (val === 0) {
this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`
}
if (val > 0 && val < this.list.length - 1) {
this.itemBgStyle.borderRadius = '0'
}
}
// 更新滑块的位置
setTimeout(() => {
this.itemBgLeft()
}, 10)
if (this.vibrateShort && !this.firstVibrateShort) {
// 使手机产生短促震动,微信小程序有效,APP(HX 2.6.8)和H5无效
// #ifndef H5
uni.vibrateShort();
// #endif
}
this.firstVibrateShort = false
},
// 获取各个tab的节点信息
getTabsInfo() {
let view = uni.createSelectorQuery().in(this)
for (let i = 0; i < this.list.length; i++) {
view.select('.section-item-' + i).boundingClientRect()
}
view.exec(res => {
// 如果没有获取到,则重新获取
if (!res.length) {
setTimeout(() => {
this.getTabsInfo()
return
}, 10)
}
// 将每个分段器的宽度放入listInfo中
res.map((item, index) => {
this.listInfo[index].width = item.width
})
// 初始化滑块的宽度
if (this.mode === 'subsection') {
this.itemBgStyle.width = this.listInfo[0].width + 'px'
} else if (this.mode === 'button') {
this.itemBgStyle.width = this.listInfo[0].width + 'px'
}
import componentsColorMixin from '../../libs/mixin/components_color.js'
export default {
mixins: [componentsColorMixin],
name: 'tn-subsection',
props: {
// 模式选择
// button 按钮模式 subsection 分段模式
mode: {
type: String,
default: 'subsection'
},
// 组件高度
height: {
type: Number,
default: 60
},
// tab的数据
list: {
type: Array,
default () {
return []
}
},
// 当前活动tab的index
current: {
type: [Number, String],
default: 0
},
// 激活时的字体颜色
activeColor: {
type: String,
default: '#FFFFFF'
},
// 未激活时的字体颜色
inactiveColor: {
type: String,
default: '#AAAAAA'
},
// 激活tab的字体是否加粗
bold: {
type: Boolean,
default: false
},
backgroundColor: {
type: String,
default: '#F4F4F4'
},
// 滑块的颜色
buttonColor: {
type: String,
default: '#01BEFF'
},
// 当mode为button时生效,圆角的值,单位rpx
borderRadius: {
type: Number,
default: 10
},
// 是否开启动画
animation: {
type: Boolean,
default: true
},
// 动画类型
// cubic-bezier -> 贝塞尔曲线
animationType: {
type: String,
default: ''
},
// 滑动滑块的是否,是否触发震动
vibrateShort: {
type: Boolean,
default: false
}
},
data() {
return {
// 列表数据
listInfo: [],
// 子元素的背景样式
itemBgStyle: {
width: 0,
left: 0,
backgroundColor: '#ffffff',
height: '100%'
},
// 当前选中的滑块
currentIndex: this.current,
buttonPadding: 3,
// 组件初始化的是否current变换不应该震动
firstVibrateShort: true
}
},
watch: {
list: {
handler(val) {
this.listInfo = val.map((item, index) => {
if (typeof item !== 'object') {
let obj = {
width: 0,
name: item
}
return obj
} else {
item.width = 0
return obj
}
})
},
immediate: true,
deep: true
},
current: {
handler(val) {
this.currentIndex = val
this.changeSectionStatus(val)
},
immediate: true
}
},
created() {
// 将list的数据,传入listInfo数组
// 接受直接数组形式,或者数组元素为对象的形式,如:['开启', '关闭'],或者[{name: '开启'}, {name: '关闭'}]
this.listInfo = this.list.map((item, index) => {
if (typeof item !== 'object') {
let obj = {
width: 0,
name: item
}
return obj
} else {
item.width = 0
return obj
}
})
},
computed: {
// 设置mode=subsection时,滑块没有样式
noBorderRight() {
return index => {
if (this.mode !== 'subsection') return
let clazz = ''
// 不显示右边的边距
if (index < this.list.length - 1) clazz += ' tn-subsection__item--none-border-right'
// 显示整个组件的左右边圆角
if (index === 0) clazz += ' tn-subsection__item--first'
if (index === this.list.length - 1) clazz += ' tn-subsection__item--last'
return clazz
}
},
// 文字的样式
textStyle() {
return index => {
let style = {}
// 设置字体颜色
if (index === this.currentIndex) {
style.color = this.activeColor
} else {
style.color = this.inactiveColor
}
// 字体加粗
if (index === this.currentIndex && this.bold) style.fontWeight = 'bold'
// 文字大小
style.fontSize = (this.fontSize || 26) + this.fontUnit
return style
}
},
// 每个分段器item的样式
itemStyle() {
return index => {
let style = {}
if (this.fontSizeStyle) {
style.fontSize = this.fontSizeStyle
}
if (this.mode === 'subsection') {
// 设置border的样式
style.borderColor = this.buttonColor
style.borderWidth = '1rpx'
style.borderStyle = 'solid'
}
return style
}
},
// mode = button时,设置外层view的样式
subsectionStyle() {
let style = {}
style.height = this.height + 'rpx'
if (this.mode === 'button') {
style.backgroundColor = this.backgroundColorStyle
style.padding = `${this.buttonPadding}px`
style.borderRadius = `${this.borderRadius}rpx`
}
return style
},
// mode = button时,设置外层view的背景class
subsectionBackgroundColorClass() {
let clazz = ''
if (this.mode === 'button' && this.backgroundColorClass) {
clazz = this.backgroundColorClass
}
return clazz
},
itemBarClass() {
let clazz = ''
const buttonBgClass = this.$tn.color.getBackgroundColorInternalClass(this.buttonColor)
if (this.animation) {
clazz += ' tn-subsection__bg__animation'
if (this.animationType) {
clazz += ` tn-subsection__bg__animation--${this.animationType}`
}
}
if (buttonBgClass) {
clazz += ` ${buttonBgClass}`
}
return clazz
},
// 滑块样式
itemBarStyle() {
let style = {}
const buttonBgStyle = this.$tn.color.getBackgroundColorStyle(this.buttonColor)
if (buttonBgStyle) {
style.backgroundColor = this.buttonColor
}
style.zIndex = 1
if (this.mode === 'button') {
style.borderRadius = `${this.borderRadius}rpx`
style.bottom = `${this.buttonPadding}px`
style.height = (this.height - (this.buttonPadding * 4)) + 'rpx'
style.zIndex = 0
}
return Object.assign(this.itemBgStyle, style)
}
},
mounted() {
// 等待加载组件完成
setTimeout(() => {
this.getTabsInfo()
}, 10)
},
methods: {
// 改变滑块样式
changeSectionStatus(val) {
if (this.mode === 'subsection') {
// 根据滑块在最左和最右时,显示对应的圆角
if (val === this.list.length - 1) {
this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`
}
if (val === 0) {
this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`
}
if (val > 0 && val < this.list.length - 1) {
this.itemBgStyle.borderRadius = '0'
}
}
// 更新滑块的位置
setTimeout(() => {
this.itemBgLeft()
}, 10)
if (this.vibrateShort && !this.firstVibrateShort) {
// 使手机产生短促震动,微信小程序有效,APP(HX 2.6.8)和H5无效
// #ifndef H5
uni.vibrateShort();
// #endif
}
this.firstVibrateShort = false
},
// 获取各个tab的节点信息
getTabsInfo() {
let view = uni.createSelectorQuery().in(this)
for (let i = 0; i < this.list.length; i++) {
view.select('.section-item-' + i).boundingClientRect()
}
view.exec(res => {
// 如果没有获取到,则重新获取
if (!res.length) {
setTimeout(() => {
this.getTabsInfo()
return
}, 10)
}
// 将每个分段器的宽度放入listInfo中
res.map((item, index) => {
this.listInfo[index].width = item.width
})
// 初始化滑块的宽度
if (this.mode === 'subsection') {
this.itemBgStyle.width = this.listInfo[0].width + 'px'
} else if (this.mode === 'button') {
this.itemBgStyle.width = this.listInfo[0].width + 'px'
}
// 初始化滑块的位置
this.itemBgLeft()
})
},
// 设置滑块的位置
itemBgLeft() {
let left = 0
// 计算当前活跃item到组件左边的距离
this.listInfo.map((item, index) => {
if (index < this.currentIndex) left += item.width
})
// 根据不同的模式,计算滑块的位置
if (this.mode === 'subsection') {
this.itemBgStyle.left = left + 'px'
} else if (this.mode === 'button') {
this.itemBgStyle.left = left + this.buttonPadding + 'px'
}
},
// 初始化滑块的位置
this.itemBgLeft()
})
},
// 设置滑块的位置
itemBgLeft() {
let left = 0
// 计算当前活跃item到组件左边的距离
this.listInfo.map((item, index) => {
if (index < this.currentIndex) left += item.width
})
// 根据不同的模式,计算滑块的位置
if (this.mode === 'subsection') {
this.itemBgStyle.left = left + 'px'
} else if (this.mode === 'button') {
this.itemBgStyle.left = left + this.buttonPadding + 'px'
}
},
// 点击事件
click(index) {
// 不允许点击当前激活的选项
if (index === this.currentIndex) return
this.currentIndex = index
this.changeSectionStatus(index)
this.$emit('change', {
index: Number(index),
name: this.listInfo[index]['name']
})
}
}
}
// 点击事件
click(index) {
// 不允许点击当前激活的选项
if (index === this.currentIndex) return
this.currentIndex = index
this.changeSectionStatus(index)
this.$emit('change', {
index: Number(index),
name: this.listInfo[index]['name']
})
}
}
}
</script>
<style lang="scss" scoped>
.tn-subsection {
display: flex;
flex-direction: row;
align-items: center;
overflow: hidden;
position: relative;
.tn-subsection {
/* #ifndef APP-PLUS */
display: flex;
flex-direction: row;
/* #endif */
align-items: center;
overflow: hidden;
position: relative;
&__item {
/* #ifndef APP-PLUS */
display: flex;
flex-direction: row;
/* #endif */
flex: 1;
text-align: center;
font-size: 26rpx;
height: 100%;
align-items: center;
justify-content: center;
color: #FFFFFF;
padding: 0 6rpx;
&__item {
display: flex;
flex-direction: row;
flex: 1;
text-align: center;
font-size: 26rpx;
height: 100%;
align-items: center;
justify-content: center;
color: #FFFFFF;
padding: 0 6rpx;
&--text {
transition: all 0.3s;
color: #FFFFFF;
/* #ifndef APP-PLUS */
display: flex;
flex-direction: row;
/* #endif */
align-items: center;
position: relative;
z-index: 3;
}
&--text {
transition: all 0.3s;
color: #FFFFFF;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
z-index: 3;
}
&--first {
border-top-left-radius: 8rpx;
border-bottom-left-radius: 8rpx;
}
&--first {
border-top-left-radius: 8rpx;
border-bottom-left-radius: 8rpx;
}
&--last {
border-top-right-radius: 8rpx;
border-bottom-right-radius: 8rpx;
}
&--last {
border-top-right-radius: 8rpx;
border-bottom-right-radius: 8rpx;
}
&--none-border-right {
border-right: none !important;
}
}
&--none-border-right {
border-right: none !important;
}
}
&__bg {
background-color: $tn-main-color;
position: absolute;
z-index: -1;
transition-property: all;
transition-duration: 0s;
transition-timing-function: linear;
&__bg {
background-color: $tn-main-color;
position: absolute;
z-index: -1;
transition-property: all;
transition-duration: 0s;
transition-timing-function: linear;
&__animation {
transition-duration: 0.25s !important;
&--cubic-bezier {
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}
}
}
}
&__animation {
transition-duration: 0.25s !important;
&--cubic-bezier {
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}
}
}
}
</style>
+8
View File
@@ -89,6 +89,13 @@
type: String,
default: '#080808'
},
// 未选中的item样式
inactiveItemStyle: {
type: Object,
default() {
return {}
}
},
// 选中的item样式
activeItemStyle: {
type: Object,
@@ -171,6 +178,7 @@
Object.assign(style, this.activeItemStyle)
} else {
style.color = this.inactiveColor
Object.assign(style, this.inactiveItemStyle)
}
return style
}
+170 -19
View File
File diff suppressed because one or more lines are too long
+6 -6
View File
@@ -537,27 +537,27 @@
}
.tn-cool-bg-image:nth-of-type(1n)::after {
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/1.png);
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/1.png);
}
.tn-cool-bg-image:nth-of-type(2n)::after {
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/2.png);
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/2.png);
}
.tn-cool-bg-image:nth-of-type(3n)::after {
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/3.png);
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/3.png);
}
.tn-cool-bg-image:nth-of-type(4n)::after {
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/4.png);
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/4.png);
}
.tn-cool-bg-image:nth-of-type(5n)::after {
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/5.png);
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/5.png);
}
.tn-cool-bg-image:nth-of-type(6n)::after {
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);
}
/* 酷炫背景颜色图片 end */
+27
View File
@@ -0,0 +1,27 @@
//防抖
export function debounceFun(func, delay=500) {
//定时器
let timer;
return function(...args) {
// 清除之前设置的定时器
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
//节流
export function throttleFun(func, delay=500) {
//定时器
let timer = null;
return function(...args) {
if(!timer){
timer = setTimeout(() => {
//执行前清空
timer = null;
func.apply(this, args);
}, delay);
}
};
}