mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-06-08 12:33:17 +08:00
Compare commits
69 Commits
v2.0.0
...
a68662672a
| Author | SHA1 | Date | |
|---|---|---|---|
 kert
|
a68662672a | ||
|
kert
|
4855e6d771 | ||
|
kert
|
f62db1dbd3 | ||
|
kert
|
8403b595c8 | ||
|
kert
|
6abd3faa0c | ||
 aisen
|
d355989fcf | ||
|
aisen
|
5b1e863066 | ||
|
aisen
|
9c161727ff | ||
|
aisen
|
71e58907a9 | ||
|
aisen
|
8629754e50 | ||
 Mandy
|
d95276c469 | ||
|
aisen
|
5186a277e1 | ||
|
aisen
|
5ba0d32004 | ||
|
aisen
|
e87317d52e | ||
|
aisen
|
24f83965b5 | ||
|
aisen
|
c001636b3a | ||
|
aisen
|
b503f3610f | ||
|
aisen
|
f3471b2646 | ||
 Aisen
|
43c99c1fd9 | ||
|
Aisen
|
013f69a102 | ||
|
Aisen
|
b44bb802ed | ||
|
Aisen
|
9dd0ea76b5 | ||
 Aisen
|
125866d0e1 | ||
|
Aisen
|
0d09b34409 | ||
|
Aisen
|
6142c5c654 | ||
 wssam
|
c6bbf0a829 | ||
|
Mandy
|
d0f4356c9f | ||
|
Mandy
|
bc85894ca4 | ||
|
zhengliming
|
f1b95729ea | ||
|
wssam
|
ba4690b114 | ||
|
zhengliming
|
42f04770c4 | ||
|
zhengliming
|
59ad09b521 | ||
|
wssam
|
3fbf31e52f | ||
|
zhengliming
|
0d8ff2e98d | ||
|
zhengliming
|
00c4852afb | ||
|
zhengliming
|
5f94e80b73 | ||
|
zhengliming
|
ca5e8c9429 | ||
|
zhengliming
|
557dbb313f | ||
|
zhengliming
|
374a74ac90 | ||
|
zhengliming
|
025555e92b | ||
|
zhengliming
|
c67be5adf8 | ||
|
zhengliming
|
344f681181 | ||
|
zhengliming
|
60c496e6ff | ||
|
zhengliming
|
733e71862a | ||
 Star
|
0564dcd88a | ||
|
Star
|
f42849931e | ||
 7small7
|
7dd2b43420 | ||
 kert
|
0c6e535554 | ||
|
kert
|
1d36ea303f | ||
 qixv-0506
|
712d73d2b0 | ||
 海了个螺
|
9578de3358 | ||
 nroyliu
|
5f6f1476d8 | ||
 Star
|
96b0366738 | ||
|
kert
|
ee57981a16 | ||
|
Mandy
|
926f58c36c | ||
|
Mandy
|
f119274cee | ||
 李涛hm
|
5f322d50f8 | ||
|
7small7
|
98258962b0 | ||
|
7small7
|
3341720936 | ||
|
7small7
|
705053f1ae | ||
|
7small7
|
0d9611721d | ||
|
7small7
|
10da0aa38b | ||
|
7small7
|
398b49621c | ||
|
7small7
|
8388fca392 | ||
|
7small7
|
7f4ae15600 | ||
|
7small7
|
b77cc16bec | ||
|
Mandy
|
0039266705 | ||
|
7small7
|
f710c14879 | ||
|
7small7
|
f5718ab30b |
@@ -1,3 +1,4 @@
|
||||
/unpackage/dist/*
|
||||
/node_modules/*
|
||||
/.idea/*
|
||||
.hbuilderx
|
||||
@@ -1,4 +1,4 @@
|
||||
[](https://tnuiimage.tnkjapp.com/uniapp_market/8.jpg "图鸟UI")
|
||||
# <font align="center">Tuniao UI V2开源仓库</font>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://gitee.com/TSpecific/tuniao-ui/stargazers" target="_blank">
|
||||
@@ -13,25 +13,31 @@
|
||||
|
||||
## **说明**
|
||||
|
||||
**`图鸟UI`**，是基于uni-app进行开发的UI框架，提供丰富的组件进行快速开发，支持`微信小程序`、`APP`和`H5`，包含常用表单组件、信息展示组件等，并提供丰富的酷炫页面模板。
|
||||
**`图鸟UI vue2`**，是基于uni-app进行开发的UI框架，提供丰富的组件进行快速开发，支持`微信小程序`、`APP`和`H5`，包含常用表单组件、信息展示组件等，并提供丰富的酷炫页面模板。
|
||||
|
||||
开源版本中所使用到的图片均做了`防盗链`，只能在调试中使用，不保证在生产环境中可以使用。
|
||||
图片资源已上传到 [图鸟社区](https://www.yuque.com/tuniao/)。
|
||||
|
||||
## 特点
|
||||
## 图鸟UI特点
|
||||
|
||||
- 包含基础常用的布局元素，flex、grid、浮动
|
||||
- 完整一体的配色体系，包含4种色深模式，同时包含4套渐变配色
|
||||
- 700+风格统一的图标icon，60+精选组件，让开发者可以快速进行开发
|
||||
- 800+风格统一的图标icon，60+精选组件，让开发者可以快速进行开发
|
||||
- 酷炫常用的页面模板，更有让你眼前一亮的界面效果
|
||||
- 图片素材语雀便捷下载，图鸟生态共同成长
|
||||
- 使用文档详尽说明，让你一文读懂图鸟UI
|
||||
|
||||
## 链接
|
||||
## 预览
|
||||
|
||||
[图鸟UI](https://ext.dcloud.net.cn/publisher?id=356088)
|
||||
|
||||
|
||||
|
||||
|
||||
[使用文档](https://vue2.tuniaokj.com/)
|
||||
## 官方链接
|
||||
|
||||
[图鸟UI 开源项目](https://ext.dcloud.net.cn/publisher?id=356088)
|
||||
|
||||
[使用文档 vue2](https://vue2.tuniaokj.com/)
|
||||
|
||||
## 快速上手
|
||||
|
||||
@@ -138,17 +144,48 @@ Vue.mixin(vuexStore)
|
||||
|
||||
|
||||
|
||||
## 开源项目
|
||||
## 开源模板
|
||||
|
||||
[插件市场，可以直接下载使用](https://ext.dcloud.net.cn/publisher?id=356088)
|
||||
|
||||
图鸟UI开源项目（图鸟UI、图鸟vue3、图鸟模板1 2 3 4 5 、图鸟图表 已上传；图鸟模板6 7 8 9 10 11 12 13 14 15 16 17 18 19 20暂未上传）
|
||||
|
||||
<!-- [](https://resource.tuniaokj.com/images/uniapp_market/qr-code-all3.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-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 "开源项目")
|
||||
|
||||
## 联系作者
|
||||
|
||||
微信 tnkewo
|
||||
|
||||
群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼
|
||||
微信群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼
|
||||
|
||||
|
||||
|
||||
|
||||
[](https://tnuiimage.tnkjapp.com/uniapp_market/tn_author_qrcode.jpg)
|
||||
|
||||
## 版权信息
|
||||
|
||||
|
||||
@@ -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'},
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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'
|
||||
},{
|
||||
|
||||
@@ -200,7 +200,7 @@
|
||||
return
|
||||
}
|
||||
// this.licensePlateValue[this.currentLicensePlateIndex] = e
|
||||
this.$set(this.licensePlateValue, this.currentLicensePlateIndex, e)
|
||||
this.$set(this.licensePlateValue, this.currentLicensePlateIndex, e+"")
|
||||
this.currentLicensePlateIndex++
|
||||
// 判断车牌是否已经选择完成
|
||||
if (this.currentLicensePlateIndex === 8) {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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' }
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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'},
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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日'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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: '冬天'},
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
@@ -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;
|
||||
}
|
||||
|
||||
+2
-1
@@ -1,10 +1,11 @@
|
||||
{
|
||||
"name" : "TuniaoUI_UniApp",
|
||||
"name" : "TuniaoUI_V2",
|
||||
"appid" : "__UNI__C82400B",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
"sassImplementationName" : "node-sass",
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
|
||||
+92
-20
@@ -33,6 +33,48 @@ 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',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '优惠卡券1',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/coupon/demo1/demo1'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '优惠卡券2',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/coupon/demo2/demo2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '个人中心',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
@@ -160,15 +202,45 @@ export default {
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '动效元素',
|
||||
title: '加载动画',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '加载动画',
|
||||
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: '流星悬浮',
|
||||
@@ -213,33 +285,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'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
+87
-2
@@ -203,7 +203,7 @@ export default {
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '会员需求',
|
||||
title: '定制需求',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [{
|
||||
icon: 'order',
|
||||
@@ -211,6 +211,12 @@ export default {
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/drag/basic-drag/basic-drag'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '列表长按拖拽排序',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/drag/list-drag/list-drag'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '图片上传长按拖拽',
|
||||
@@ -265,11 +271,29 @@ export default {
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/table/index'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '取色器',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/life/color/color'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '图鸟轮播(实验)',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/custom-swiper/index'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '补光灯',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/life/light/light'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '自适应轮播',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/life/active/active'
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -277,11 +301,72 @@ export default {
|
||||
title: '生态支持',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [{
|
||||
icon: 'order',
|
||||
title: '过渡轮播',
|
||||
author: '图鸟科技',
|
||||
url: '/thirdPage/change/change'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '双重轮播',
|
||||
author: '图鸟科技',
|
||||
url: '/thirdPage/double/double'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '斜侧轮播',
|
||||
author: '图鸟科技',
|
||||
url: '/thirdPage/slope/slope'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '简约登录',
|
||||
author: '图鸟科技',
|
||||
url: '/thirdPage/simple-login/simple-login'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '背景登录',
|
||||
author: '图鸟科技',
|
||||
url: '/thirdPage/bg-login/bg-login'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '授权登录',
|
||||
author: '图鸟科技',
|
||||
url: '/thirdPage/warrant-login/warrant-login'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '表格餐饮',
|
||||
author: '图鸟科技',
|
||||
url: '/thirdPage/food-table/food-table'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '智能开门',
|
||||
author: '图鸟科技',
|
||||
url: '/thirdPage/open-door/open-door'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '暗黑切换',
|
||||
author: '图鸟科技',
|
||||
url: '/thirdPage/theme/theme'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '视频上传',
|
||||
author: '图鸟科技',
|
||||
url: '/thirdPage/video-upload/video-upload'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '短视频',
|
||||
author: '图鸟 & 第三方',
|
||||
url: '/thirdPage/short-video/short-video'
|
||||
},{
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '外卖模板',
|
||||
author: '图鸟 & 第三方',
|
||||
|
||||
+403
@@ -416,6 +416,355 @@
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}]
|
||||
},{
|
||||
"root": "vipPage",
|
||||
"pages": [{
|
||||
"path": "blog/circle/circle",
|
||||
"style": {
|
||||
"navigationBarTitleText": "精选圈子",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "blog/blogger/blogger",
|
||||
"style": {
|
||||
"navigationBarTitleText": "博客博主",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "home/tuniao/tuniao",
|
||||
"style": {
|
||||
"navigationBarTitleText": "图鸟首页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "shop/store/store",
|
||||
"style": {
|
||||
"navigationBarTitleText": "店铺商品",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "shop/order/order",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品订单",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "shop/classify/classify",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品分类",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "shop/money/money",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分活动",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "life/guide/guide",
|
||||
"style": {
|
||||
"navigationBarTitleText": "操作指引",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "home/cool/cool",
|
||||
"style": {
|
||||
"navigationBarTitleText": "酷炫功能",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "home/link/link",
|
||||
"style": {
|
||||
"navigationBarTitleText": "友情链接",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "home/movie/movie",
|
||||
"style": {
|
||||
"navigationBarTitleText": "电影首页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "home/mimicry/mimicry",
|
||||
"style": {
|
||||
"navigationBarTitleText": "拟态首页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "home/food/food",
|
||||
"style": {
|
||||
"navigationBarTitleText": "食物首页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "home/tea/tea",
|
||||
"style": {
|
||||
"navigationBarTitleText": "奶茶首页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "home/read/read",
|
||||
"style": {
|
||||
"navigationBarTitleText": "阅读首页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "home/moon/moon",
|
||||
"style": {
|
||||
"navigationBarTitleText": "月亮首页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "home/plan/plan",
|
||||
"style": {
|
||||
"navigationBarTitleText": "计划首页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "home/year/year",
|
||||
"style": {
|
||||
"navigationBarTitleText": "新年首页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "life/bless/bless",
|
||||
"style": {
|
||||
"navigationBarTitleText": "祝福页面",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "home/card/card",
|
||||
"style": {
|
||||
"navigationBarTitleText": "卡片首页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "components/drag/basic-drag/basic-drag",
|
||||
"style": {
|
||||
"navigationBarTitleText": "Drag长按拖拽",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "components/drag/list-drag/list-drag",
|
||||
"style": {
|
||||
"navigationBarTitleText": "列表长按拖拽排序",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "components/drag/upload-image-drag/upload-image-drag",
|
||||
"style": {
|
||||
"navigationBarTitleText": "图片上传长按拖拽",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "home/gravity/page1/page1",
|
||||
"style": {
|
||||
"navigationBarTitleText": "重力首页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "components/cropper/cropper",
|
||||
"style": {
|
||||
"navigationBarTitleText": "Cropper图片裁剪",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "components/stack-swiper/stack-swiper",
|
||||
"style": {
|
||||
"navigationBarTitleText": "StackSwiper堆叠轮播",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "life/power/power",
|
||||
"style": {
|
||||
"navigationBarTitleText": "充电首页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "components/scroll-view/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "自定义下拉刷新",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "components/scroll-view/basic/scroll-view",
|
||||
"style": {
|
||||
"navigationBarTitleText": "自定义下拉刷新",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "components/scroll-view/custom/scroll-view",
|
||||
"style": {
|
||||
"navigationBarTitleText": "自定义下拉刷新",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "components/cascade-selection/cascade-selection",
|
||||
"style": {
|
||||
"navigationBarTitleText": "级联选择",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "components/waterfall/waterfall",
|
||||
"style": {
|
||||
"navigationBarTitleText": "瀑布流",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "components/custom-swiper/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "图鸟轮播(实验)",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "components/custom-swiper/horizontal/custom-swiper",
|
||||
"style": {
|
||||
"navigationBarTitleText": "图鸟轮播-横向",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "components/custom-swiper/vertical/custom-swiper",
|
||||
"style": {
|
||||
"navigationBarTitleText": "图鸟轮播-纵向",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "blog/blog/blog",
|
||||
"style": {
|
||||
"navigationBarTitleText": "圈子首页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "blog/prefer/prefer",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品优选",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "blog/socialize/socialize",
|
||||
"style": {
|
||||
"navigationBarTitleText": "社交圈子",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "blog/myblog/myblog",
|
||||
"style": {
|
||||
"navigationBarTitleText": "圈子中心",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "blog/message/message",
|
||||
"style": {
|
||||
"navigationBarTitleText": "社交圈子",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "blog/product/product",
|
||||
"style": {
|
||||
"navigationBarTitleText": "优选详情",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "home/health/health",
|
||||
"style": {
|
||||
"navigationBarTitleText": "健康首页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "components/tree-view/tree-view",
|
||||
"style": {
|
||||
"navigationBarTitleText": "树形菜单",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "home/panoramic/panoramic",
|
||||
"style": {
|
||||
"navigationBarTitleText": "全景首页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "components/table/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "表格",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "components/table/basic/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "基础表格",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "components/table/stripe/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "斑马纹表格",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "components/table/fixed-header/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "固定头部表格",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "components/table/fixed-column/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "固定列表格",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "components/table/multi-header/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "多表头表格",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "components/table/complex/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "复杂表格",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},{
|
||||
"path": "life/start/start",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首次指引",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "home/ucharts/ucharts",
|
||||
"style": {
|
||||
"navigationBarTitleText": "uCharts首页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "life/color/color",
|
||||
"style": {
|
||||
"navigationBarTitleText": "取色器",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "life/light/light",
|
||||
"style": {
|
||||
"navigationBarTitleText": "补光灯",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "life/active/active",
|
||||
"style": {
|
||||
"navigationBarTitleText": "自适应轮播",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}
|
||||
]
|
||||
}, {
|
||||
"root": "templatePage",
|
||||
"pages": [{
|
||||
@@ -442,6 +791,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 +863,12 @@
|
||||
"navigationBarTitleText": "3D全景",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},{
|
||||
"path": "life/pano/model",
|
||||
"style": {
|
||||
"navigationBarTitleText": "3D模型",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "life/plus/plus",
|
||||
"style": {
|
||||
@@ -527,6 +900,12 @@
|
||||
"navigationBarTitleText": "红包封面",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},{
|
||||
"path": "life/cube/cube",
|
||||
"style": {
|
||||
"navigationBarTitleText": "魔方游戏",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "time/clock/clock",
|
||||
"style": {
|
||||
@@ -539,6 +918,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,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,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,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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+33
-18
@@ -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"
|
||||
@@ -69,23 +69,23 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-radius" @click="navBusiness">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-radius" @click="navTnCharts">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-identity-fill tn-cool-color-icon4 tn-cool-bg-color-15"></view>
|
||||
<view class="tn-icon-data-fill tn-cool-color-icon4 tn-cool-bg-color-15"></view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark tn-text-center">
|
||||
<text class="tn-text-ellipsis">简约商圈</text>
|
||||
<text class="tn-text-ellipsis">图鸟图表</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-radius" @click="navXiongJie">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-radius" @click="navTuniaoMoban7">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-image-fill tn-cool-color-icon4 tn-cool-bg-color-3"></view>
|
||||
<view class="tn-icon-oa tn-cool-color-icon4 tn-cool-bg-color-3"></view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark tn-text-center">
|
||||
<text class="tn-text-ellipsis">凶姐壁纸</text>
|
||||
<text class="tn-text-ellipsis">图鸟OA</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -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>
|
||||
@@ -135,7 +135,7 @@
|
||||
|
||||
<view class="tn-padding-xl tn-text-center tn-color-gray">
|
||||
<view class="tn-padding-bottom-sm" @click="navPlus">
|
||||
关于图鸟会员
|
||||
关于图鸟
|
||||
<text class="tn-icon-rocket tn-padding-left-xs"></text>
|
||||
</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菜单列表
|
||||
@@ -244,13 +244,28 @@
|
||||
appId: 'wx76bb942a2810e8e5'
|
||||
})
|
||||
},
|
||||
// 跳转到图鸟图表
|
||||
navTnCharts(e) {
|
||||
wx.vibrateLong();
|
||||
uni.navigateToMiniProgram({
|
||||
appId: 'wxc540d74e56af2d8c'
|
||||
})
|
||||
},
|
||||
// 跳转到图鸟OA
|
||||
navTuniaoMoban7(e) {
|
||||
wx.vibrateLong();
|
||||
uni.navigateToMiniProgram({
|
||||
appId: 'wx76f9ce42d534b087'
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转到会员协议
|
||||
// 跳转到开源协议
|
||||
navPlus() {
|
||||
uni.navigateTo({
|
||||
url: '/templatePage/life/plus/plus'
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -410,7 +425,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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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>
|
||||
@@ -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'
|
||||
}],
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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}`
|
||||
}
|
||||
|
||||
@@ -1,29 +1,22 @@
|
||||
<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"
|
||||
>
|
||||
]" :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'
|
||||
import {
|
||||
debounceFun,
|
||||
throttleFun
|
||||
} from '../../libs/function/applyEven.js'
|
||||
let spanTime = 200;
|
||||
export default {
|
||||
mixins: [componentsColorMixin],
|
||||
name: "tn-button",
|
||||
@@ -113,6 +106,16 @@
|
||||
blockRepeatClick: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//场景：（如果开启blockRepeatClick，这里无效）none ： 不开启防抖节流模式，debounce ：防抖模式 throttle：节流模式
|
||||
scene:{
|
||||
type: String,
|
||||
default: 'none'
|
||||
},
|
||||
// 防抖节流间隔时间（毫秒）
|
||||
blockTime:{
|
||||
type: Number,
|
||||
default: 200
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -212,7 +215,8 @@
|
||||
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) {
|
||||
} 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)')}`
|
||||
}
|
||||
|
||||
@@ -223,28 +227,43 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 上次点击的时间
|
||||
clickTime: 0,
|
||||
// 两次点击防抖的间隔时间
|
||||
clickIntervalTime: 200
|
||||
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
//支持动态修改时间，但是这里是没有做撤销上一次的方法，毕竟这种场景非常少
|
||||
//这里只是防止用户使用时复用了组件，有场景时长要求二次变动，而做的优化
|
||||
blockTime:{
|
||||
handler(newVal,oldVal){
|
||||
this.initScene();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initScene()
|
||||
},
|
||||
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)
|
||||
}
|
||||
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)
|
||||
})
|
||||
@@ -253,16 +272,45 @@
|
||||
index: Number(this.index)
|
||||
})
|
||||
},
|
||||
handleGetUserInfo({ detail = {} } = {}) {
|
||||
// 按钮点击事件
|
||||
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 = {} } = {}) {
|
||||
handleContact({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('contact', detail);
|
||||
},
|
||||
handleGetPhoneNumber({ detail = {} } = {}) {
|
||||
handleGetPhoneNumber({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('getphonenumber', detail);
|
||||
},
|
||||
handleError({ detail = {} } = {}) {
|
||||
handleError({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('error', detail);
|
||||
},
|
||||
|
||||
@@ -272,7 +320,6 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.tn-btn {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
@@ -298,5 +345,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -248,6 +248,7 @@
|
||||
return (index, type) => {
|
||||
let color = type === 'bg' ? '' : this.color
|
||||
let day = index + 1
|
||||
|
||||
let date = `${this.year}-${this.month}-${day}`
|
||||
let timestamp = new Date(date.replace(/\-/g,'/')).getTime()
|
||||
let start = this.startDate.replace(/\-/g,'/')
|
||||
@@ -487,8 +488,9 @@
|
||||
let daysArr = days.map((item) => {
|
||||
let bottomInfo = this.showLunar ? Calendar.solar2lunar(this.year, this.month, item).IDayCn : ''
|
||||
let color = this.showLunar ? this.lunarColor : this.activeColor
|
||||
let date = `${this.year}-${this.month}-${item}`
|
||||
if (
|
||||
(this.mode === 'date' && this.day == item) ||
|
||||
(this.mode === 'date' && date == this.activeDate) ||
|
||||
(this.mode === 'range' && (this.startDay == item || this.endDay == item))
|
||||
) {
|
||||
color = this.activeColor
|
||||
@@ -534,7 +536,9 @@
|
||||
},
|
||||
// 关闭窗口
|
||||
close() {
|
||||
this.$emit('input', false)
|
||||
this.$emit('input', false);
|
||||
//传递事件
|
||||
this.$emit('close');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,9 +9,7 @@
|
||||
<view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
|
||||
{{ d }}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="showHours && (hideZeroDay || (!hideZeroDay && d != '00'))"
|
||||
class="tn-countdown__separator"
|
||||
:style="{
|
||||
fontSize: separatorSize + 'rpx',
|
||||
@@ -19,8 +17,10 @@
|
||||
paddingBottom: separator === 'en' ? '4rpx' : 0
|
||||
}"
|
||||
>
|
||||
{{ separator === 'en' ? ':' : '天'}}
|
||||
{{ separator === 'en' ? (showHours || showMinutes || showSeconds ? ':' : '') : '天'}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view
|
||||
v-if="showHours"
|
||||
@@ -31,7 +31,6 @@
|
||||
<view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
|
||||
{{ h }}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="showMinutes"
|
||||
class="tn-countdown__separator"
|
||||
@@ -43,6 +42,8 @@
|
||||
>
|
||||
{{ separator === 'en' ? ':' : '时'}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view
|
||||
v-if="showMinutes"
|
||||
@@ -53,7 +54,6 @@
|
||||
<view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
|
||||
{{ m }}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="showSeconds"
|
||||
class="tn-countdown__separator"
|
||||
@@ -65,19 +65,19 @@
|
||||
>
|
||||
{{ separator === 'en' ? ':' : '分'}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view
|
||||
v-if="showSeconds"
|
||||
class="tn-countdown__item"
|
||||
:class="[backgroundColorClass]"
|
||||
:style="[itemStyle]"
|
||||
v-if="showSeconds"
|
||||
>
|
||||
<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',
|
||||
@@ -85,9 +85,13 @@
|
||||
paddingBottom: separator === 'en' ? '4rpx' : 0
|
||||
}"
|
||||
>
|
||||
秒
|
||||
{{ separator === 'en' ? '' : '秒'}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -46,8 +46,8 @@ function propChange(prop, oldProp, ownerInstance, instance) {
|
||||
cropper.canvasHeight = +dataset.height
|
||||
cropper.imgTop = +dataset.windowheight / 2
|
||||
cropper.imgLeft = +dataset.windowwidth / 2
|
||||
cropper.imgWidth = +dataset.imgwidth
|
||||
cropper.imgHeight = +dataset.imgheight
|
||||
cropper.imgWidth = +dataset.width
|
||||
cropper.imgHeight = +dataset.height
|
||||
cropper.windowHeight = +dataset.windowheight
|
||||
cropper.windowWidth = +dataset.windowwidth
|
||||
cropper.init = false
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
}"
|
||||
@mouseenter="mouseEnterArea"
|
||||
@mouseleave="mouseLeaveArea"
|
||||
v-if="show"
|
||||
>
|
||||
<block
|
||||
v-for="(item, index) in lists"
|
||||
@@ -298,7 +299,10 @@
|
||||
y: 0
|
||||
},
|
||||
timer: null,
|
||||
dragging: false
|
||||
dragging: false,
|
||||
show:true,
|
||||
h5LongPress:false,
|
||||
h5StarDragging:false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -327,7 +331,11 @@
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.updateDragInfo()
|
||||
})
|
||||
});
|
||||
// #ifdef H5
|
||||
const userAgent = navigator.userAgent.toLowerCase();
|
||||
this.h5LongPress = /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent);
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
// 清除列表
|
||||
@@ -551,6 +559,9 @@
|
||||
if (index >= 0 && index < this.lists.length) {
|
||||
let currentItemIndex = this.lists[index].index
|
||||
this.lists.splice(index, 1)
|
||||
this.show = false;
|
||||
setTimeout(()=>{
|
||||
this.show = true;
|
||||
// 重新排列列表信息
|
||||
for (let item of this.lists) {
|
||||
if (item.index > currentItemIndex) {
|
||||
@@ -565,8 +576,8 @@
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
this.updateAddBtnPositioin()
|
||||
},50)
|
||||
}
|
||||
},
|
||||
// 预览图片
|
||||
@@ -684,8 +695,10 @@
|
||||
updateAddBtnPositioin() {
|
||||
if (this.lists.length >= this.maxCount) return
|
||||
|
||||
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() {
|
||||
@@ -731,6 +744,11 @@
|
||||
// #endif
|
||||
},
|
||||
movableLongPress(item) {
|
||||
// #ifdef H5
|
||||
//h5必须长按后才允许拖拽
|
||||
this.h5StarDragging = true;
|
||||
this.movableStart(item);
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
uni.vibrateShort()
|
||||
// console.log("LongPress--------------------------------------------------------------");
|
||||
@@ -797,6 +815,9 @@
|
||||
}
|
||||
},
|
||||
movableStart (item) {
|
||||
if (this.h5LongPress && !this.h5StarDragging){
|
||||
return
|
||||
}
|
||||
//console.log("movableStart");
|
||||
this.lists.forEach(item => {
|
||||
item.zIndex = 1
|
||||
@@ -818,6 +839,7 @@
|
||||
// #endif
|
||||
},
|
||||
movableEnd (item) {
|
||||
this.h5StarDragging = false;
|
||||
if (!this.dragging) return
|
||||
//console.log("movableEnd");
|
||||
const index = this.lists.findIndex(obj => {
|
||||
@@ -885,6 +907,9 @@
|
||||
|
||||
.tn-image-upload {
|
||||
position: relative;
|
||||
/* #ifdef H5 */
|
||||
-webkit-touch-callout:none;
|
||||
/* #endif */
|
||||
|
||||
&__movable-area {
|
||||
width: 100%;
|
||||
|
||||
@@ -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,6 +39,15 @@
|
||||
@focus="onFocus"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
<view v-else style="width:100%">
|
||||
|
||||
<view
|
||||
v-if="type === 'select'"
|
||||
class="tn-input__text"
|
||||
>
|
||||
<text :class="defaultValue == undefined || defaultValue == '' ? 'tn-input__placeholder':''">{{defaultValue == undefined || defaultValue == '' ? placeholder : defaultValue }}</text>
|
||||
</view>
|
||||
|
||||
<input
|
||||
v-else
|
||||
class="tn-input__input"
|
||||
@@ -55,6 +70,8 @@
|
||||
@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
|
||||
@@ -97,6 +114,9 @@
|
||||
|
||||
<script>
|
||||
import Emitter from '../../libs/utils/emitter.js'
|
||||
import {
|
||||
debounceFun
|
||||
} from '../../libs/function/applyEven.js'
|
||||
|
||||
export default {
|
||||
mixins: [Emitter],
|
||||
@@ -106,6 +126,7 @@
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
|
||||
// 输入框的类型
|
||||
type: {
|
||||
type: String,
|
||||
@@ -227,6 +248,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,31 +328,16 @@
|
||||
this.$on("on-form-item-error", this.onFormItemError)
|
||||
},
|
||||
methods: {
|
||||
leftIconClick(){
|
||||
this.$emit('leftClick', this.defaultValue)
|
||||
},
|
||||
rightIconClick(){
|
||||
this.$emit('rightClick', this.defaultValue)
|
||||
},
|
||||
/**
|
||||
* input事件
|
||||
*/
|
||||
handleInput(event) {
|
||||
let value = event.detail.value
|
||||
// 是否需要去掉空格
|
||||
if (this.trim) value = this.$tn.string.trim(value)
|
||||
// 原生事件
|
||||
this.$emit('input', value)
|
||||
// model赋值
|
||||
this.defaultValue = value
|
||||
// 过一个生命周期再发送事件给tn-form-item，否则this.$emit('input')更新了父组件的值，但是微信小程序上
|
||||
// 尚未更新到tn-form-item，导致获取的值为空，从而校验混论
|
||||
// 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
|
||||
setTimeout(() => {
|
||||
// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
|
||||
// #ifdef MP-TOUTIAO
|
||||
if (this.$tn.string.trim(value) === this.lastValue) return
|
||||
this.lastValue = value
|
||||
// #endif
|
||||
|
||||
// 发送当前的值到form-item进行校验
|
||||
this.dispatch('tn-form-item','on-form-change', value)
|
||||
}, 40)
|
||||
},
|
||||
handleInput:()=>{},
|
||||
/**
|
||||
* blur事件
|
||||
*/
|
||||
@@ -360,7 +386,35 @@
|
||||
inputClick() {
|
||||
this.$emit('click')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
that.handleInput = debounceFun(function(event){
|
||||
let value = event.detail.value
|
||||
// 是否需要去掉空格
|
||||
try {
|
||||
if (that.trim) value = that.$tn.string.trim(value)
|
||||
}catch (e){
|
||||
}
|
||||
// 原生事件
|
||||
that.$emit('input', value)
|
||||
// model赋值
|
||||
that.defaultValue = value
|
||||
// 过一个生命周期再发送事件给tn-form-item，否则this.$emit('input')更新了父组件的值，但是微信小程序上
|
||||
// 尚未更新到tn-form-item，导致获取的值为空，从而校验混论
|
||||
// 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
|
||||
setTimeout(() => {
|
||||
// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
|
||||
// #ifdef MP-TOUTIAO
|
||||
if (that.$tn.string.trim(value) === that.lastValue) return
|
||||
that.lastValue = value
|
||||
// #endif
|
||||
|
||||
// 发送当前的值到form-item进行校验
|
||||
that.dispatch('tn-form-item','on-form-change', value)
|
||||
}, 40)
|
||||
},that.blockTime);
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -371,12 +425,25 @@
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
||||
&__placeholder{
|
||||
color: $tn-font-sub-color;
|
||||
}
|
||||
|
||||
&__input {
|
||||
font-size: 28rpx;
|
||||
color: $tn-font-color;
|
||||
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 +462,7 @@
|
||||
border-color: $tn-color-red !important;
|
||||
}
|
||||
|
||||
|
||||
&__right-icon {
|
||||
line-height: 1;
|
||||
.icon {
|
||||
@@ -423,5 +491,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) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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 */
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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
|
||||
);
|
||||
@@ -317,6 +317,7 @@
|
||||
// 在历遍的过程中，可能由于上一步修改this.columnData，导致产生连锁反应，程序触发columnChange，会有多次调用
|
||||
// 只有在最后一次数据稳定后的结果是正确的，此前的历遍中，可能会产生undefined，故需要判断
|
||||
columnIndex.map((item, index) => {
|
||||
if (this.columnData[index]){
|
||||
let data = this.columnData[index][columnIndex[index]]
|
||||
let tmp = {
|
||||
value: data ? data[this.valueName] : null,
|
||||
@@ -324,6 +325,7 @@
|
||||
}
|
||||
if (data && data.extra !== undefined) tmp.extra = data.extra
|
||||
this.selectValue.push(tmp)
|
||||
}
|
||||
})
|
||||
this.lastSelectIndex = columnIndex
|
||||
} else if (this.mode === 'single') {
|
||||
@@ -396,7 +398,11 @@
|
||||
}
|
||||
|
||||
&--confirm {
|
||||
color: $tn-main-color;
|
||||
// color: $tn-main-color;
|
||||
background-color: #07C160;
|
||||
color: #FFFFFF;
|
||||
padding: 10rpx 25rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -12,7 +12,8 @@
|
||||
top: stickyTop + 'px',
|
||||
left: left + 'px',
|
||||
width: width === 'auto' ? 'auto' : width + 'px',
|
||||
zIndex: elZIndex
|
||||
zIndex: elZIndex,
|
||||
backgroundColor: backgroundColorStyle
|
||||
}"
|
||||
>
|
||||
<slot></slot>
|
||||
@@ -83,9 +84,6 @@
|
||||
stickyStyle() {
|
||||
let style = {}
|
||||
style.height = this.fixed ? this.height + 'px' : 'auto'
|
||||
if (this.backgroundColorStyle) {
|
||||
style.color = this.backgroundColorStyle
|
||||
}
|
||||
if (this.elZIndex) {
|
||||
style.zIndex = this.elZIndex
|
||||
}
|
||||
|
||||
@@ -1,31 +1,19 @@
|
||||
<template>
|
||||
<view
|
||||
class="tn-subsection-class tn-subsection"
|
||||
:class="[subsectionBackgroundColorClass]"
|
||||
:style="[subsectionStyle]"
|
||||
>
|
||||
<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__item tn-text-ellipsis" :class="[
|
||||
'section-item-' + index,
|
||||
noBorderRight(index)
|
||||
]"
|
||||
:style="[itemStyle(index)]"
|
||||
@tap="click(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 class="tn-subsection__bg" :class="[itemBarClass]" :style="[itemBarStyle]"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -123,6 +111,24 @@
|
||||
}
|
||||
},
|
||||
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
|
||||
@@ -337,21 +343,16 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.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;
|
||||
@@ -365,10 +366,8 @@
|
||||
&--text {
|
||||
transition: all 0.3s;
|
||||
color: #FFFFFF;
|
||||
/* #ifndef APP-PLUS */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
@@ -406,5 +405,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -2,7 +2,7 @@
|
||||
<view
|
||||
class="tn-switch-class tn-switch"
|
||||
:class="[
|
||||
value ? 'tn-switch--on' : '',
|
||||
switchState ? 'tn-switch--on' : '',
|
||||
disabled ? 'tn-switch--disabled' : '',
|
||||
`tn-switch--${shape}`
|
||||
]"
|
||||
@@ -22,7 +22,7 @@
|
||||
class="tn-switch__icon tn-switch__icon--left"
|
||||
:class="[
|
||||
`tn-icon-${leftIcon}`,
|
||||
value ? 'tn-switch__icon--show' : ''
|
||||
switchState ? 'tn-switch__icon--show' : ''
|
||||
]"
|
||||
:style="[iconStyle]"></view>
|
||||
<!-- 右图标 -->
|
||||
@@ -31,7 +31,7 @@
|
||||
class="tn-switch__icon tn-switch__icon--right"
|
||||
:class="[
|
||||
`tn-icon-${rightIcon}`,
|
||||
!value ? 'tn-switch__icon--show' : ''
|
||||
!switchState ? 'tn-switch__icon--show' : ''
|
||||
]"
|
||||
:style="[iconStyle]"></view>
|
||||
</view>
|
||||
@@ -42,7 +42,7 @@
|
||||
name: 'tn-switch',
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
type: [Number, String, Boolean],
|
||||
default: false
|
||||
},
|
||||
// 按钮的样式
|
||||
@@ -106,7 +106,7 @@
|
||||
switchStyle() {
|
||||
let style = {}
|
||||
style.fontSize = this.$tn.string.getLengthUnitValue(this.size)
|
||||
style.backgroundColor = this.value ?
|
||||
style.backgroundColor = this.switchState ?
|
||||
this.activeColor ? this.activeColor : '#01BEFF' :
|
||||
this.inactiveColor ? this.inactiveColor : '#AAAAAA'
|
||||
return style
|
||||
@@ -124,22 +124,33 @@
|
||||
return style
|
||||
},
|
||||
loadingColor() {
|
||||
return this.value ? this.activeColor : ''
|
||||
return this.switchState ? this.activeColor : ''
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
value:{
|
||||
handler(newVal,oldVal){
|
||||
this.switchState = (this.value == this.activeValue);
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
switchState:false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.switchState = (this.value == this.activeValue);
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
this.switchState = !this.switchState;
|
||||
if (!this.disabled && !this.loading) {
|
||||
if (this.vibrateShort) uni.vibrateShort()
|
||||
this.$emit('input', !this.value)
|
||||
this.$emit('input', this.switchState ? this.activeValue : this.inactiveValue)
|
||||
// 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change', this.value ? this.activeValue : this.inactiveValue);
|
||||
this.$emit('change', this.switchState ? this.activeValue : this.inactiveValue);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
File diff suppressed because one or more lines are too long
@@ -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 */
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
};
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,814 @@
|
||||
<template>
|
||||
<view class="template-circle tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<!-- <tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar> -->
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<!-- 图标logo -->
|
||||
<view class="custom-nav__back">
|
||||
<view class="logo-pic tn-shadow-blur" style="background-image:url('https://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>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="tn-icon-left"></view> -->
|
||||
</view>
|
||||
<!-- 搜索框 -->
|
||||
<!-- <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
|
||||
<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
|
||||
<view class="custom-nav__search__icon tn-icon-search"></view>
|
||||
<view class="custom-nav__search__text tn-padding-left-xs">开启美好的一天</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="tn-margin-top tn-margin-left">
|
||||
<tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#000" bold="true" :fontSize="36"></tn-tabs>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="tn-flex tn-flex-row-between tn-bg-yellow tn-round tn-padding-xs tn-margin">
|
||||
<view class="justify-content-item tn-text-center tn-flex" style="padding: 25rpx 30rpx">
|
||||
<tn-avatar-group :lists="latestUserAvatar" size="sm"></tn-avatar-group>
|
||||
<text class="tn-padding-xs">629人</text>
|
||||
</view>
|
||||
<view class="justify-content-item tn-text-right tn-padding-top-xs">
|
||||
<view class="tn-text-bold">
|
||||
北北·图鸟小圈子
|
||||
</view>
|
||||
<view class="tn-text-xs tn-color-gray--dark tn-padding-top-xs">
|
||||
北北们的作品集，一起干巴爹叭
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item tn-text-right tn-margin-right tn-padding-top-lg">
|
||||
<text class="tn-icon-right tn-color-gray--dark"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-margin-top">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xl">
|
||||
精选博主
|
||||
</view>
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xl">
|
||||
<text class="tn-padding-right-xs">更多</text>
|
||||
<text class="tn-icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-strip-bottom">
|
||||
<!-- 方式16 start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-bottom">
|
||||
<block v-for="(item, index) in bloggerList" :key="index">
|
||||
<view class="" style="width: 33.3%;">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center ">
|
||||
<view class="tn-radius tn-padding-sm">
|
||||
<view class="image-pic" :style="'background-image:url('+ item.url +')'">
|
||||
<view class="image-circle">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-text-center tn-text-bold tn-padding-top-xs">{{item.name}}</view>
|
||||
<view class="tn-text-center tn-text-xs tn-color-gray--dark tn-padding-top-xs">{{item.text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 方式16 end-->
|
||||
</view>
|
||||
|
||||
<!-- 图文 -->
|
||||
<view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom-xs">
|
||||
|
||||
<block v-for="(item,index) in content" :key="index">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
<view class="tn-blogger-content__info tn-flex tn-flex-row-between tn-flex-col-center">
|
||||
<view class="justify-content-item">
|
||||
<view class="tn-flex tn-flex-row-center">
|
||||
<view class="tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<view class="">
|
||||
<tn-avatar
|
||||
class=""
|
||||
shape="circle"
|
||||
:src="item.userAvatar"
|
||||
size="lg">
|
||||
</tn-avatar>
|
||||
</view>
|
||||
<view class="tn-padding-right tn-text-ellipsis">
|
||||
<view class="tn-padding-right tn-padding-left-sm tn-text-bold tn-text-lg">{{ item.userName }}</view>
|
||||
<view class="tn-padding-right tn-padding-left-sm tn-padding-top-xs tn-color-gray">{{ item.date }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-blogger-content__info__btn justify-content-item tn-flex-col-center tn-flex-row-center">
|
||||
<text class="tn-icon-more-vertical tn-color-gray tn-text-bold tn-text-xxl"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-blogger-content__label tn-margin-top-sm tn-text-justify">
|
||||
<view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
|
||||
<text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
|
||||
</view>
|
||||
<text class="tn-blogger-content__label__desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="[1,2,4].indexOf(item.mainImage.length) != -1" class="tn-padding-top-xs">
|
||||
<image v-for="(image_item,image_index) in item.mainImage" :key="image_index"
|
||||
class="tn-blogger-content__main-image"
|
||||
:class="{
|
||||
'tn-blogger-content__main-image--1 tn-margin-bottom-sm': item.mainImage.length === 1,
|
||||
'tn-blogger-content__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': item.mainImage.length === 2 || item.mainImage.length === 4
|
||||
}"
|
||||
:src="image_item"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<view v-else class="tn-padding-top-xs">
|
||||
<tn-grid hoverClass="none" :col="3">
|
||||
<block v-for="(image_item,image_index) in item.mainImage" :key="image_index">
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<tn-grid-item style="width: 30%;margin: 10rpx;">
|
||||
<image
|
||||
class="tn-blogger-content__main-image tn-blogger-content__main-image--3"
|
||||
:src="image_item"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</tn-grid-item>
|
||||
<!-- #endif-->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<tn-grid-item style="width: 30%;margin: 10rpx;">
|
||||
<image
|
||||
class="tn-blogger-content__main-image tn-blogger-content__main-image--3"
|
||||
:src="image_item"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</tn-grid-item>
|
||||
<!-- #endif-->
|
||||
</block>
|
||||
</tn-grid>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
|
||||
<view class="justify-content-item tn-color-gray tn-text-center">
|
||||
<view class="">
|
||||
<text class="tn-blogger-content__count-icon tn-icon-flower"></text>
|
||||
<text class="tn-padding-right">{{ item.collectionCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-message"></text>
|
||||
<text class="tn-padding-right">{{ item.commentCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-like"></text>
|
||||
<text class="">{{ item.likeCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item tn-flex tn-flex-col-center">
|
||||
<view style="margin-right: 10rpx;margin-left: 20rpx;">
|
||||
<tn-avatar-group :lists="item.viewUser.latestUserAvatar" size="sm"></tn-avatar-group>
|
||||
</view>
|
||||
<text class="tn-color-gray">{{ item.viewUser.viewUserCount }}人</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 边距间隔 -->
|
||||
<view class="tn-strip-bottom tn-margin-top-sm tn-margin-bottom-sm" v-if="index != content.length - 1"></view>
|
||||
</block>
|
||||
<!-- 1个图 -->
|
||||
|
||||
<!-- 3个、5个、6个、7个、8个、9个图 -->
|
||||
|
||||
<!-- 2个、4个图 -->
|
||||
</view>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
|
||||
|
||||
<view class="action" @click="">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-home-smile tn-color-gray--dark">
|
||||
</view> -->
|
||||
<image class="" src='https://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>
|
||||
<view class="action" @click="">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-discover tn-color-gray--dark">
|
||||
</view> -->
|
||||
<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-gray">圈子</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="action bar-center">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-camera-fill tn-color-white">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-color-gray">发布</view>
|
||||
</view> -->
|
||||
|
||||
<view class="action bar-center" @click="">
|
||||
<view class="nav-index-button">
|
||||
<view class="nav-index-button__content">
|
||||
<view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<!-- <view class="tn-icon-logo-tuniao"></view> -->
|
||||
<view class="bar-circle">
|
||||
<!-- <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>
|
||||
|
||||
<view class="nav-index-button__meteor">
|
||||
<view class="nav-index-button__meteor__wrapper">
|
||||
<view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item" :style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
|
||||
<view class="nav-index-button__meteor__item--pic"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="tn-color-gray">发布</view> -->
|
||||
</view>
|
||||
|
||||
<view class="action" @click="">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-image-text tn-color-gray--dark">
|
||||
</view> -->
|
||||
<image class="" src='https://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>
|
||||
<view class="action" @click="">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-my tn-color-gray--dark">
|
||||
</view> -->
|
||||
<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>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="tn-padding-xl"></view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplateCircle',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
current: 0,
|
||||
scrollList: [
|
||||
{name: '社交'},
|
||||
{name: '视频'},
|
||||
{name: '关注', count: ''}
|
||||
],
|
||||
latestUserAvatar: [
|
||||
{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'},
|
||||
],
|
||||
bloggerList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '北北博主',
|
||||
text: '629人关注',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '摄影博主',
|
||||
text: '688人关注',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '校园博主',
|
||||
text: '552人关注',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '户外博主',
|
||||
text: '105人关注',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
name: '电影博主',
|
||||
text: '387人关注',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
|
||||
}, {
|
||||
id: 5,
|
||||
type: 'image',
|
||||
name: '动漫博主',
|
||||
text: '643人关注',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/content_1.jpeg',
|
||||
}],
|
||||
content: [
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage:[
|
||||
'https://resource.tuniaokj.com/images/blogger/content_1.jpeg'
|
||||
],
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{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: 12
|
||||
},
|
||||
collectionCount: 902,
|
||||
commentCount: 64,
|
||||
likeCount: 83
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage:[
|
||||
'https://resource.tuniaokj.com/images/shop/computer2.jpg',
|
||||
'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
|
||||
],
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 56
|
||||
},
|
||||
collectionCount: 431,
|
||||
commentCount: 26,
|
||||
likeCount: 84
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage:[
|
||||
'https://resource.tuniaokj.com/images/swiper/swiper2.jpg',
|
||||
'https://resource.tuniaokj.com/images/swiper/swiper3.jpg',
|
||||
'https://resource.tuniaokj.com/images/swiper/swiper4.jpg',
|
||||
],
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.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_1.jpeg'},
|
||||
],
|
||||
viewUserCount: 231
|
||||
},
|
||||
collectionCount: 780,
|
||||
commentCount: 89,
|
||||
likeCount: 82
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['站点','链接'],
|
||||
desc: '基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫免费的前端页面，吖，编不下去了',
|
||||
mainImage:[
|
||||
'https://resource.tuniaokj.com/images/shop/watch1.jpg',
|
||||
'https://resource.tuniaokj.com/images/shop/watch2.jpg',
|
||||
'https://resource.tuniaokj.com/images/shop/pillow2.jpg',
|
||||
'https://resource.tuniaokj.com/images/shop/pillow.jpg',
|
||||
],
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.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_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 28
|
||||
},
|
||||
collectionCount: 432,
|
||||
commentCount: 33,
|
||||
likeCount: 12
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage:[
|
||||
'https://resource.tuniaokj.com/images/blogger/y11.jpg',
|
||||
'https://resource.tuniaokj.com/images/blogger/y33.jpg',
|
||||
'https://resource.tuniaokj.com/images/blogger/y22.jpg',
|
||||
'https://resource.tuniaokj.com/images/blogger/y44.jpg',
|
||||
'https://resource.tuniaokj.com/images/blogger/y55.jpg',
|
||||
],
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{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
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// tab选项卡切换
|
||||
tabChange(index) {
|
||||
this.current = index
|
||||
},
|
||||
// 跳转到
|
||||
navTuniaoUI(e) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
.template-circle{
|
||||
}
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 60%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 10rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx 60rpx 0 60rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-image{
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
position: relative;
|
||||
margin-top: -15rpx;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
/* 博主头像 start*/
|
||||
.image-circle{
|
||||
// padding: 95rpx;
|
||||
width: 190rpx;
|
||||
height: 190rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
|
||||
/* 文章内容 start*/
|
||||
.tn-blogger-content {
|
||||
&__wrap {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
&__info {
|
||||
&__btn {
|
||||
margin-right: -12rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
&__item {
|
||||
line-height: 45rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 5rpx 18rpx 0 0;
|
||||
|
||||
&--prefix {
|
||||
color: #00FFC8;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
line-height: 55rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
border-radius: 16rpx;
|
||||
|
||||
&--1 {
|
||||
max-width: 80%;
|
||||
max-height: 300rpx;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
max-width: 260rpx;
|
||||
max-height: 260rpx;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
height: 212rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__count-icon {
|
||||
font-size: 40rpx;
|
||||
padding-right: 5rpx;
|
||||
}
|
||||
}
|
||||
/* 文章内容 end*/
|
||||
|
||||
/* 间隔线 start*/
|
||||
.tn-strip-bottom {
|
||||
width: 100%;
|
||||
border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
|
||||
}
|
||||
/* 间隔线 end*/
|
||||
/* 底部悬浮按钮 start*/
|
||||
.tn-tabbar-height {
|
||||
min-height: 100rpx;
|
||||
height: calc(120rpx + env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
.tn-footerfixed {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: calc(30rpx + env(safe-area-inset-bottom));
|
||||
z-index: 1024;
|
||||
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
|
||||
|
||||
}
|
||||
/* 底部悬浮按钮 end*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.bar-center{
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes suspension {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-0.8rem);
|
||||
}
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
// line-height: 50rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0rpx auto 0rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
// background-color: #01BEFF;
|
||||
width: 100rpx !important;
|
||||
height: 100rpx !important;
|
||||
overflow: hidden;
|
||||
// border-radius: 50%;
|
||||
// box-shadow: 0px 10px 30px rgba(70,23,129, 0.12),
|
||||
// 0px -8px 40px rgba(255, 255, 255, 1),
|
||||
// inset 0px -10px 10px rgba(70,23,129, 0.05),
|
||||
// inset 0px 10px 20px rgba(255, 255, 255, 1);
|
||||
// box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
display: inline-block;
|
||||
margin: 0rpx auto 0rpx;
|
||||
}
|
||||
|
||||
/* 流星+悬浮 */
|
||||
.nav-index-button {
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
z-index: 999999;
|
||||
|
||||
|
||||
&__content {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
&--icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transform: scale(0.85);
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
background-size: 100% 100%;
|
||||
// background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__meteor {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
transform-style: preserve-3d;
|
||||
transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
|
||||
|
||||
&__wrapper {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
transform-style: preserve-3d;
|
||||
animation: spin 20s linear infinite;
|
||||
}
|
||||
|
||||
&__item {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 1000rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
&--pic {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc1.png) no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
animation: arc 4s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes suspension {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-0.6rem);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateX(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes arc {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,479 @@
|
||||
<template>
|
||||
<view class="template-message">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view class="custom-nav__back" @tap.stop="goBack">
|
||||
<view class="tn-icon-left"></view>
|
||||
</view>
|
||||
<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
|
||||
<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-center tn-color-black">
|
||||
<text class="tn-text-lg tn-padding-left">消息</text>
|
||||
<text class="tn-text-xl tn-padding-left-sm tn-icon-group-circle"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
|
||||
<view class="order--wrap" :style="{top: vuex_custom_bar_height + 'px'}">
|
||||
<!-- 顶部标签 -->
|
||||
<tn-tabs-swiper class="order__tabs" ref="tabs" :list="list" :current="tabsIndex" :isScroll="false" :bold="true" activeColor="#080808" inactiveColor="#AAAAAA" @change="tabsChange"></tn-tabs-swiper>
|
||||
|
||||
<!-- 标签内容 -->
|
||||
<swiper class="order__swiper" :style="{top: `${swiperTop}px`, height: `${swiperHeight}px`}" :current="swiperIndex" @transition="swiperTransition" @animationfinish="swiperAnimationFinish">
|
||||
|
||||
<swiper-item class="order__swiper__item">
|
||||
<scroll-view :style="{height: `${swiperHeight}px`}" scroll-y>
|
||||
<view v-for="(item,index) in 6" :key="index" class="order__item">
|
||||
<view class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__head__title">
|
||||
图鸟官方小店<text class="order__item__head__title--right-icon tn-icon-right"></text></view>
|
||||
<view class="order__item__head__status tn-icon-group-square"></view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="order__item__content__title">
|
||||
图鸟官方设计 酷炫效果展示 让用户眼前一亮的赶脚
|
||||
</view>
|
||||
<view class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
||||
<view class="order__item__content__info__price">
|
||||
<text class="order__item__content__info__price--unit">￥</text>
|
||||
<text class="order__item__content__info__price__value--integer">1000</text>
|
||||
<text class="order__item__content__info__price__value--decimal">.00</text>
|
||||
</view>
|
||||
<view class="order__item__content__info__count">
|
||||
<text>共1件</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__operaation__left">
|
||||
<text class="tn-color-gray--disabled">02-22</text>
|
||||
</view>
|
||||
<view class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
|
||||
<view class="order__item__operaation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">查看发票</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">退换/售后</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="tn-color-red" backgroundColor="tn-bg-red" :fontSize="24" height="auto" padding="10rpx 18rpx">再次购买</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-bottom"></view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
|
||||
<swiper-item class="order__swiper__item">
|
||||
<scroll-view :style="{height: `${swiperHeight}px`}" scroll-y>
|
||||
<view v-for="(item,index) in 6" :key="index" class="order__item">
|
||||
<view class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__head__title">图鸟官方小店<text class="order__item__head__title--right-icon tn-icon-right"></text></view>
|
||||
<view class="order__item__head__status">完成</view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
|
||||
<view class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/bag2.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
||||
<view class="order__item__content__info__price">
|
||||
<text class="order__item__content__info__price--unit">￥</text>
|
||||
<text class="order__item__content__info__price__value--integer">2000</text>
|
||||
<text class="order__item__content__info__price__value--decimal">.00</text>
|
||||
</view>
|
||||
<view class="order__item__content__info__count">
|
||||
<text>共2件</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__operaation__left">
|
||||
<text class="tn-color-gray--disabled">2022-01-12</text>
|
||||
</view>
|
||||
<view class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
|
||||
<view class="order__item__operaation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">查看发票</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">退换/售后</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="tn-color-red" backgroundColor="tn-bg-red" :fontSize="24" height="auto" padding="10rpx 18rpx">再次购买</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-bottom"></view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
|
||||
<swiper-item class="order__swiper__item">
|
||||
<scroll-view :style="{height: `${swiperHeight}px`}" scroll-y>
|
||||
<view v-for="(item,index) in 6" :key="index" class="order__item">
|
||||
<view class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__head__title">图鸟官方小店<text class="order__item__head__title--right-icon tn-icon-right"></text></view>
|
||||
<view class="order__item__head__status">完成</view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
|
||||
<view class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/cup1.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/computer2.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
||||
<view class="order__item__content__info__price">
|
||||
<text class="order__item__content__info__price--unit">￥</text>
|
||||
<text class="order__item__content__info__price__value--integer">3000</text>
|
||||
<text class="order__item__content__info__price__value--decimal">.00</text>
|
||||
</view>
|
||||
<view class="order__item__content__info__count">
|
||||
<text>共3件</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__operaation__left">
|
||||
<text class="tn-color-gray--disabled">2022-01-12</text>
|
||||
</view>
|
||||
<view class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
|
||||
<view class="order__item__operaation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">查看发票</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">退换/售后</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="tn-color-red" backgroundColor="tn-bg-red" :fontSize="24" height="auto" padding="10rpx 18rpx">再次购买</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-bottom"></view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
|
||||
<swiper-item class="order__swiper__item">
|
||||
<scroll-view :style="{height: `${swiperHeight}px`}" scroll-y>
|
||||
<view v-for="(item,index) in 6" :key="index" class="order__item">
|
||||
<view class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__head__title">图鸟官方小店<text class="order__item__head__title--right-icon tn-icon-right"></text></view>
|
||||
<view class="order__item__head__status">完成</view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
|
||||
<view class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/computer1.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/watch1.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
||||
<view class="order__item__content__info__price">
|
||||
<text class="order__item__content__info__price--unit">￥</text>
|
||||
<text class="order__item__content__info__price__value--integer">4000</text>
|
||||
<text class="order__item__content__info__price__value--decimal">.00</text>
|
||||
</view>
|
||||
<view class="order__item__content__info__count">
|
||||
<text>共4件</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__operaation__left">
|
||||
<text class="tn-color-gray--disabled">2022-01-12</text>
|
||||
</view>
|
||||
<view class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
|
||||
<view class="order__item__operaation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">查看发票</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">退换/售后</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="tn-color-red" backgroundColor="tn-bg-red" :fontSize="24" height="auto" padding="10rpx 18rpx">再次购买</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-bottom"></view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import templatePageMixin from '@/libs/mixin/template_page_mixin.js'
|
||||
|
||||
export default {
|
||||
name: 'TemplateMessage',
|
||||
mixins: [templatePageMixin],
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{name: '圈子互动'},
|
||||
{name: '好友私信', count: 10},
|
||||
{name: '商品动态'},
|
||||
{name: '系统通知', count: 5}
|
||||
],
|
||||
tabsIndex: 0,
|
||||
swiperIndex: 0,
|
||||
swiperTop: 0,
|
||||
swiperHeight: 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
this.updateSwiperInfo()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 计算可滑动区域的高度信息
|
||||
updateSwiperInfo() {
|
||||
// 获取可滑动菜单的信息
|
||||
this._tGetRect('.order__tabs').then(res => {
|
||||
if (!res) {
|
||||
setTimeout(() => {
|
||||
this.updateSwiperInfo()
|
||||
}, 10)
|
||||
return
|
||||
}
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.swiperTop = res.bottom - this.vuex_custom_bar_height
|
||||
this.swiperHeight = systemInfo.safeArea.height - res.bottom + systemInfo.statusBarHeight
|
||||
})
|
||||
},
|
||||
// 标签栏值发生改变
|
||||
tabsChange(index) {
|
||||
this.swiperIndex = index
|
||||
},
|
||||
// swiper-item位置发生改变
|
||||
swiperTransition(event) {
|
||||
this.$refs.tabs.setDx(event.detail.dx)
|
||||
},
|
||||
// swiper动画结束
|
||||
swiperAnimationFinish(event) {
|
||||
const current = event.detail.current
|
||||
this.$refs.tabs.setFinishCurrent(current)
|
||||
this.swiperIndex = current
|
||||
this.tabsIndex = current
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
.template-message {
|
||||
}
|
||||
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 71%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 10rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx 60rpx 60rpx 0;
|
||||
font-size: 24rpx;
|
||||
// background-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
.order {
|
||||
&--wrap {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
/* 导航栏 start */
|
||||
&__tabs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: inherit;
|
||||
}
|
||||
/* 导航栏 end */
|
||||
|
||||
/* swiper start */
|
||||
&__swiper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
background-color: inherit;
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
/* swiper end */
|
||||
|
||||
/* 订单内容 start */
|
||||
&__item {
|
||||
margin: 20rpx;
|
||||
padding: 36rpx 26rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
|
||||
&:first-child {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 头部 start */
|
||||
&__head {
|
||||
|
||||
&__title {
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
|
||||
&--right-icon {
|
||||
font-size: 24rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__status {
|
||||
font-size: 28rpx;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
/* 头部 end */
|
||||
|
||||
/* 内容 start */
|
||||
&__content {
|
||||
|
||||
margin-top: 20rpx;
|
||||
|
||||
&__image {
|
||||
margin-right: 20rpx;
|
||||
|
||||
image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
padding-right: 40rpx;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
white-space: normal !important;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
&__info {
|
||||
|
||||
&__price {
|
||||
&--unit {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
&__value--integer, &__value--decimal {
|
||||
font-weight: bold;
|
||||
}
|
||||
&__value--decimal {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__count {
|
||||
color: #AAAAAA;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 内容 end */
|
||||
|
||||
/* 操作按钮 start */
|
||||
&__operation {
|
||||
margin-top: 30rpx;
|
||||
|
||||
&__right {
|
||||
&__button {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 操作按钮 end */
|
||||
}
|
||||
/* 订单内容 end */
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,722 @@
|
||||
<template>
|
||||
<view class="template-prefer tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<view class=""style="width: 72vw;overflow: hidden;">
|
||||
<tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#000" bold="true" :fontSize="36"></tn-tabs>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<!-- 更多信息-->
|
||||
<view class="tn-padding-top-sm tn-padding-bottom-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<tn-scroll-list :indicatorWidth="100" :indicatorBarWidth="30" indicatorColor="#FFE2D9" indicatorActiveColor="#FF7043">
|
||||
<view class="tn-flex tn-margin-left-sm tn-margin-right-sm tn-margin-top">
|
||||
<block v-for="(item, index) in historyData" :key="index">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon11__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
|
||||
<view :class="[`tn-icon-${item.icon}`]"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-sm tn-text-center tn-margin-top-sm">
|
||||
<text class="tn-text-ellipsis" >{{ item.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</tn-scroll-list>
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<view class="nav_title--wrap">
|
||||
<view class="nav_title tn-cool-bg-color-15">
|
||||
<text class="tn-icon-relation tn-padding-right-sm tn-text-xxl"></text>
|
||||
<text class="tn-text-xl">好物推荐 · 商品优选</text>
|
||||
<text class="tn-icon-relation tn-padding-left-sm tn-text-xxl"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view>
|
||||
<view class="tn-padding">
|
||||
<tn-waterfall ref="waterfall" v-model="list" @finish="handleWaterFallFinish">
|
||||
<template v-slot:left="{ leftList }">
|
||||
<view v-for="(item, index) in leftList" :key="item.id" class="product__item">
|
||||
<view class="item__image">
|
||||
<tn-lazy-load :threshold="-450" height="100%" :image="item.mainImage" :index="item.id" imgMode="widthFix"></tn-lazy-load>
|
||||
</view>
|
||||
<view class="item__data">
|
||||
<view class="item__title-container">
|
||||
<view v-if="item.newProduct" class="item__store-type tn-cool-bg-color-8">图鸟社区</view>
|
||||
<view v-else-if="item.storeType === 1" class="item__store-type tn-cool-bg-color-1">自营</view>
|
||||
<text class="item__title">{{ item.title }}</text>
|
||||
</view>
|
||||
<view v-if="item.tags && item.tags.length > 0" class="item__tags-container">
|
||||
<view v-for="(tagItem, tagIndex) in item.tags" :key="tagIndex" class="item__tag">{{ tagItem }}</view>
|
||||
</view>
|
||||
<view class="item__price-container">
|
||||
<text class="item__price--unit">￥</text>
|
||||
<text class="item__price--integer">{{ item.priceInteger }}</text>
|
||||
<text class="item__price--dot">.</text>
|
||||
<text class="item__price--decimal">{{ item.priceDecimal }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:right="{ rightList }">
|
||||
<view v-for="(item, index) in rightList" :key="item.id" class="product__item">
|
||||
<view class="item__image">
|
||||
<tn-lazy-load :threshold="-450" height="100%" :image="item.mainImage" :index="item.id" imgMode="widthFix"></tn-lazy-load>
|
||||
</view>
|
||||
<view class="item__data">
|
||||
<view class="item__title-container">
|
||||
<view v-if="item.storeType === 1" class="item__store-type tn-cool-bg-color-1">自营</view>
|
||||
<text class="item__title">{{ item.title }}</text>
|
||||
</view>
|
||||
<view class="item__tags-container">
|
||||
<view v-for="(tagItem, tagIndex) in item.tags" :key="tagIndex" class="item__tag">{{ tagItem }}</view>
|
||||
</view>
|
||||
<view class="item__price-container">
|
||||
<text class="item__price--unit">￥</text>
|
||||
<text class="item__price--integer">{{ item.priceInteger }}</text>
|
||||
<text class="item__price--dot">.</text>
|
||||
<text class="item__price--decimal">{{ item.priceDecimal }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</tn-waterfall>
|
||||
</view>
|
||||
|
||||
<tn-load-more :status="loadStatus"></tn-load-more>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
|
||||
|
||||
<view class="action" @click="">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-home-smile tn-color-gray--dark">
|
||||
</view> -->
|
||||
<image class="" src='https://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>
|
||||
<view class="action" @click="">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-discover tn-color-gray--dark">
|
||||
</view> -->
|
||||
<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>
|
||||
|
||||
<!-- <view class="action bar-center">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-camera-fill tn-color-white">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-color-gray">发布</view>
|
||||
</view> -->
|
||||
|
||||
<view class="action bar-center" @click="">
|
||||
<view class="nav-index-button">
|
||||
<view class="nav-index-button__content">
|
||||
<view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<!-- <view class="tn-icon-logo-tuniao"></view> -->
|
||||
<view class="bar-circle">
|
||||
<!-- <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>
|
||||
|
||||
<view class="nav-index-button__meteor">
|
||||
<view class="nav-index-button__meteor__wrapper">
|
||||
<view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item" :style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
|
||||
<view class="nav-index-button__meteor__item--pic"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="tn-color-gray">发布</view> -->
|
||||
</view>
|
||||
|
||||
<view class="action" @click="">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-image-text tn-color-gray--dark">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tnnew.png'></image>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/bless/bless-china.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">优选</view>
|
||||
</view>
|
||||
<view class="action" @click="">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-my tn-color-gray--dark">
|
||||
</view> -->
|
||||
<image class="" src='https://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>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="tn-padding-xl tn-margin-bottom"></view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplateMyblog',
|
||||
mixins: [template_page_mixin],
|
||||
components: {
|
||||
NavIndexButton
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
historyData: [
|
||||
{
|
||||
title: '分销中心',
|
||||
icon: 'organizatio',
|
||||
color: 'orange',
|
||||
},
|
||||
{
|
||||
title: '积分商城',
|
||||
icon: 'level',
|
||||
color: 'purple',
|
||||
},
|
||||
{
|
||||
title: '限时秒杀',
|
||||
icon: 'clock',
|
||||
color: 'blue',
|
||||
},
|
||||
{
|
||||
title: '社区团购',
|
||||
icon: 'team',
|
||||
color: 'purplered',
|
||||
},
|
||||
{
|
||||
title: '大转盘',
|
||||
icon: 'group-circle',
|
||||
color: 'teal',
|
||||
},
|
||||
{
|
||||
title: '商品核销',
|
||||
icon: 'scan',
|
||||
color: 'orangered',
|
||||
},
|
||||
{
|
||||
title: '满减优惠',
|
||||
icon: 'coupon',
|
||||
color: 'indigo',
|
||||
},
|
||||
{
|
||||
title: '视频直播',
|
||||
icon: 'video',
|
||||
color: 'green',
|
||||
}
|
||||
],
|
||||
current: 0,
|
||||
scrollList: [
|
||||
{name: '推荐', count: '10'},
|
||||
{name: '周边'},
|
||||
{name: '科技'},
|
||||
{name: '音乐'},
|
||||
{name: '电影'},
|
||||
{name: '游戏'}
|
||||
],
|
||||
loadStatus: 'loadmore',
|
||||
list: [],
|
||||
data: [
|
||||
{
|
||||
title: '图鸟科技 设计师专属笔记本 告别卡慢热',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/computer1.jpg',
|
||||
storeType: 1, // 1 自营 2 第三方店铺
|
||||
newProduct: true, // 是否为新品
|
||||
tags: ['满1000减80','免息'],
|
||||
price: 6999
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 开发便携笔记本 告别笨重外出',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
|
||||
storeType: 1, // 1 自营 2 第三方店铺
|
||||
newProduct: false, // 是否为新品
|
||||
tags: ['免息'],
|
||||
price: 7999
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 T10 宇宙9000 10G全网通',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
|
||||
storeType: 1, // 1 自营 2 第三方店铺
|
||||
newProduct: true, // 是否为新品
|
||||
tags: [],
|
||||
price: 4999
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 T10Pro 宇宙9010 10G全网通',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
|
||||
storeType: 1, // 1 自营 2 第三方店铺
|
||||
newProduct: true, // 是否为新品
|
||||
tags: [],
|
||||
price: 6999
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 运动手表 不用插卡即可通话',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
|
||||
storeType: 1, // 1 自营 2 第三方店铺
|
||||
newProduct: false, // 是否为新品
|
||||
tags: [],
|
||||
price: 2999
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 页面设计 专为第三方提供精美酷炫页面',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
|
||||
storeType: 2, // 1 自营 2 第三方店铺
|
||||
newProduct: false, // 是否为新品
|
||||
tags: ['酷炫'],
|
||||
price: 10999
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 海报设计 想不到就过来聊聊吧',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
|
||||
storeType: 2, // 1 自营 2 第三方店铺
|
||||
newProduct: false, // 是否为新品
|
||||
tags: ['哎呀'],
|
||||
price: 399
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 环保袋',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/bag1.jpg',
|
||||
storeType: 1, // 1 自营 2 第三方店铺
|
||||
newProduct: false, // 是否为新品
|
||||
tags: ['合作免费送'],
|
||||
price: 0
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 纸杯',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/cup2.jpg',
|
||||
storeType: 1, // 1 自营 2 第三方店铺
|
||||
newProduct: false, // 是否为新品
|
||||
tags: ['合作免费送'],
|
||||
price: 0
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 抱枕',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/pillow.jpg',
|
||||
storeType: 1, // 1 自营 2 第三方店铺
|
||||
newProduct: false, // 是否为新品
|
||||
tags: [],
|
||||
price: 99
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getRandomData()
|
||||
},
|
||||
onReachBottom() {
|
||||
this.getRandomData()
|
||||
},
|
||||
methods: {
|
||||
// tab选项卡切换
|
||||
tabChange(index) {
|
||||
this.current = index
|
||||
},
|
||||
// 获取随机数据
|
||||
getRandomData() {
|
||||
this.loadStatus = 'loading'
|
||||
for (let i = 0; i < 10; i++) {
|
||||
let index = this.$tn.number.randomInt(0, this.data.length - 1)
|
||||
let item = JSON.parse(JSON.stringify(this.data[index]))
|
||||
let price = this.getPrice(item.price)
|
||||
item.id = this.$tn.uuid()
|
||||
item.priceInteger = price[0]
|
||||
item.priceDecimal = price[1]
|
||||
this.list.push(item)
|
||||
}
|
||||
},
|
||||
// 瀑布流加载完毕事件
|
||||
handleWaterFallFinish() {
|
||||
this.loadStatus = 'loadmore'
|
||||
},
|
||||
// 获取价格整数和小数部分
|
||||
getPrice(price) {
|
||||
const priceStr = String(price)
|
||||
if (priceStr.indexOf('.') !== -1) {
|
||||
return priceStr.split('.')
|
||||
} else {
|
||||
return [priceStr, '00']
|
||||
}
|
||||
},
|
||||
// 跳转到
|
||||
navTuniaoUI(e) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.template-prefer {
|
||||
// background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 图标容器11 start */
|
||||
.icon11 {
|
||||
&__item {
|
||||
width: 30%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
margin: 20rpx 10rpx;
|
||||
transform: scale(1);
|
||||
transition: transform 0.3s linear;
|
||||
transform-origin: center center;
|
||||
|
||||
&--icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
background-size: 100% 100%;
|
||||
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 标题 start */
|
||||
.nav_title {
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
&--wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 120rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
/* 标题 end */
|
||||
|
||||
.product__item {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
margin: 0 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
|
||||
.item {
|
||||
/* 图片 start */
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
/* 图片 end */
|
||||
|
||||
/* 内容 start */
|
||||
&__data {
|
||||
padding: 8rpx 14rpx;
|
||||
}
|
||||
|
||||
/* 标题 start */
|
||||
&__title-container {
|
||||
text-align: justify;
|
||||
line-height: 38rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
&__store-type {
|
||||
height: 28rpx;
|
||||
font-size: 20rpx;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 4rpx;
|
||||
border-radius: 6rpx;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
top: -2rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
&__title {
|
||||
|
||||
}
|
||||
/* 标题 end */
|
||||
|
||||
/* 标签 start */
|
||||
&__tags-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&__tag {
|
||||
margin: 10rpx;
|
||||
color: #E83A30;
|
||||
border: 2rpx solid #E83A30;
|
||||
padding: 0 6rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 20rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0rpx !important;
|
||||
}
|
||||
}
|
||||
/* 标签 end */
|
||||
|
||||
/* 价格 start */
|
||||
&__price-container {
|
||||
font-size: 24rpx;
|
||||
color: #E83A30;
|
||||
font-weight: bold;
|
||||
}
|
||||
&__price {
|
||||
&--unit {
|
||||
|
||||
}
|
||||
&--integer {
|
||||
font-size: 38rpx;
|
||||
}
|
||||
&--decimal {
|
||||
|
||||
}
|
||||
}
|
||||
/* 价格 end */
|
||||
/* 内容 end */
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.bar-center{
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes suspension {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-0.8rem);
|
||||
}
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
// line-height: 50rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0rpx auto 0rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
// background-color: #01BEFF;
|
||||
width: 100rpx !important;
|
||||
height: 100rpx !important;
|
||||
overflow: hidden;
|
||||
// border-radius: 50%;
|
||||
// box-shadow: 0px 10px 30px rgba(70,23,129, 0.12),
|
||||
// 0px -8px 40px rgba(255, 255, 255, 1),
|
||||
// inset 0px -10px 10px rgba(70,23,129, 0.05),
|
||||
// inset 0px 10px 20px rgba(255, 255, 255, 1);
|
||||
// box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
display: inline-block;
|
||||
margin: 0rpx auto 0rpx;
|
||||
}
|
||||
|
||||
/* 流星+悬浮 */
|
||||
.nav-index-button {
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
z-index: 999999;
|
||||
|
||||
|
||||
&__content {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
&--icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transform: scale(0.85);
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
background-size: 100% 100%;
|
||||
// background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__meteor {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
transform-style: preserve-3d;
|
||||
transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
|
||||
|
||||
&__wrapper {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
transform-style: preserve-3d;
|
||||
animation: spin 20s linear infinite;
|
||||
}
|
||||
|
||||
&__item {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 1000rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
&--pic {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc1.png) no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
animation: arc 4s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes suspension {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-0.6rem);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateX(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes arc {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,684 @@
|
||||
<template>
|
||||
<view class="template-product 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>
|
||||
|
||||
|
||||
|
||||
|
||||
<swiper class="card-swiper" :circular="true"
|
||||
:autoplay="true" duration="500" interval="5000" @change="cardSwiper">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<view class="swiper-item image-banner">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="indication">
|
||||
<block v-for="(item,index) in swiperList" :key="index">
|
||||
<view class="spot" :class="cardCur==index?'active':''"></view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view class="tn-margin">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-text-bold tn-text-xxl">
|
||||
北北带你学设计 & 尽早放弃
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-row-between tn-margin-top">
|
||||
<view class="justify-content-item tn-text-bold tn-color-purplered">
|
||||
<text class="" style="font-size: 50rpx;">118</text>
|
||||
<text class="tn-text-sm">￥</text>
|
||||
</view>
|
||||
<view class="justify-content-item tn-color-gray tn-padding-top-xs">
|
||||
<view class="">已售 729</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 边距间隔 -->
|
||||
<view class="tn-strip-bottom"></view>
|
||||
|
||||
|
||||
<!-- 更多信息-->
|
||||
<view class="tn-padding-top-sm tn-padding-bottom-sm">
|
||||
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
|
||||
<view class="tn-flex tn-flex-col-center">
|
||||
<view class="tn-flex-1">费用</view>
|
||||
<view class="tn-margin-left-sm" style="font-size: 28rpx;">0.01元</view>
|
||||
</view>
|
||||
</tn-list-cell>
|
||||
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
|
||||
<view class="tn-flex tn-flex-col-center">
|
||||
<view class="tn-flex-1">活动人数</view>
|
||||
<view class="tn-margin-left-sm" style="font-size: 28rpx;">129人</view>
|
||||
</view>
|
||||
</tn-list-cell>
|
||||
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
|
||||
<view class="tn-flex tn-flex-col-center">
|
||||
<view class="tn-flex-1">活动时长</view>
|
||||
<view class="tn-margin-left-sm" style="font-size: 28rpx;">90天</view>
|
||||
</view>
|
||||
</tn-list-cell>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 边距间隔 -->
|
||||
<view class="tn-strip-bottom"></view>
|
||||
|
||||
<view class="tn-margin">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-text-bold tn-text-xl">
|
||||
活动标签
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<view class="tn-tag-content tn-margin tn-text-justify">
|
||||
<view v-for="(item, index) in tagList" :key="index" class="tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
|
||||
<text class="tn-tag-content__item--prefix">#</text> {{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="">
|
||||
<view class="tn-tag-content tn-margin tn-text-justify">
|
||||
<view v-for="(item, index) in tagList" :key="index" class="tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" :class="[getRandomCoolBg(index)]">
|
||||
<text class="tn-tag-content__item--prefix">#</text> {{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 边距间隔 -->
|
||||
<view class="tn-strip-bottom"></view>
|
||||
|
||||
|
||||
<view class="tn-margin">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-text-bold tn-text-xl">
|
||||
内容详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content-backgroup tn-margin">
|
||||
<image src='https://resource.tuniaokj.com/images/content/rodion.jpg' mode='widthFix' class='backgroud-image'></image>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 边距间隔 -->
|
||||
<view class="tn-strip-bottom"></view>
|
||||
|
||||
<view class="tn-margin-top-sm">
|
||||
<tn-sticky :offsetTop="10" :customNavHeight="vuex_custom_bar_height">
|
||||
<tn-tabs :list="fixedList" :current="current" :isScroll="false" activeColor="#000" bold="true" :fontSize="32" :badgeOffset="[20, 50]" @change="tabChange"></tn-tabs>
|
||||
</tn-sticky>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="">
|
||||
<view class="nav_title--wrap">
|
||||
<view class="nav_title tn-cool-bg-color-15">
|
||||
<text class="tn-icon-relation tn-padding-right-sm tn-text-xxl"></text>
|
||||
<text class="tn-text-xl">好物推荐 · 商品优选</text>
|
||||
<text class="tn-icon-relation tn-padding-left-sm tn-text-xxl"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图文 -->
|
||||
<!-- 比例 start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm">
|
||||
<block v-for="(item, index) in content" :key="index">
|
||||
<view class="" style="width: 50%;">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
<view class="image-picbook" :style="'background-image:url(' + item.mainImage + ')'">
|
||||
<view class="image-book">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
|
||||
<text class="tn-blogger-content__label__desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
|
||||
<view class="justify-content-item tn-flex tn-flex-col-center">
|
||||
<view>
|
||||
<view class="tn-color-gray">
|
||||
<text class="tn-blogger-content__count-icon">￥</text>
|
||||
<text class="tn-padding-right-sm">{{ item.collectionCount }}</text>
|
||||
<!-- <text class="tn-blogger-content__count-icon tn-icon-message"></text>
|
||||
<text class="tn-padding-right-sm">{{ item.commentCount }}</text> -->
|
||||
<text class="tn-blogger-content__count-icon tn-icon-like"></text>
|
||||
<text class="">{{ item.likeCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="justify-content-item tn-text-center">
|
||||
<view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
|
||||
<text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 比例 end-->
|
||||
<view class="footerfixed tn-padding-left-sm tn-padding-right tn-padding-top-xs tn-padding-bottom-sm">
|
||||
<tn-goods-nav :options="countOptions" :buttonGroups="customButtonGroups" buttonType="round" :safeAreaInsetBottom="true" @optionClick="onOptionClick" @buttonClick="onButtonClick"></tn-goods-nav>
|
||||
</view>
|
||||
|
||||
<view class="tn-padding-xl tn-margin"></view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplateProduct',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
title: '免费开源',
|
||||
name: '商业合作请联系作者',
|
||||
text: '微信：tnkewo',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/ad1.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
title: '图鸟南南',
|
||||
name: '欢迎加入东东们',
|
||||
text: '如果你也有不错的作品',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/ad2.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
title: '图鸟西西',
|
||||
name: '一起玩转scss',
|
||||
text: '用最少的代码做最骚的效果',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/ad3.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
title: '图鸟北北',
|
||||
name: '微信号 tnkewo',
|
||||
text: '商业合作请联系作者',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/ad4.jpg',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
title: '图鸟猪猪',
|
||||
name: '努力成为大佬',
|
||||
text: '一起加油吖',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/ad5.jpg',
|
||||
}],
|
||||
current: 0,
|
||||
fixedList: [
|
||||
{name: '推荐'},
|
||||
{name: '同款'},
|
||||
{name: '热卖', count: '99+'},
|
||||
{name: '直播'}
|
||||
],
|
||||
content: [
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{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
|
||||
},
|
||||
collectionCount: 129,
|
||||
commentCount: 999,
|
||||
likeCount: 999
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['炸串','火锅'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{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
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{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
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{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
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{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
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
desc: '我们都是好孩子',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{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
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{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
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{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
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
}
|
||||
],
|
||||
countOptions: [{
|
||||
icon: 'star',
|
||||
text: '收藏'
|
||||
},{
|
||||
icon: 'share-circle',
|
||||
text: '分享',
|
||||
}],
|
||||
customButtonGroups: [{
|
||||
text: '咨询客服',
|
||||
backgroundColor: 'tn-cool-bg-color-5',
|
||||
color: '#FFFFFF'
|
||||
},{
|
||||
text: '立即预约',
|
||||
backgroundColor: 'tn-cool-bg-color-15--reverse',
|
||||
color: '#FFFFFF'
|
||||
}],
|
||||
tagList: [
|
||||
{
|
||||
color: 'red',
|
||||
title: "酷炫",
|
||||
},
|
||||
{
|
||||
color: 'cyan',
|
||||
title: "设计",
|
||||
},
|
||||
{
|
||||
color: 'blue',
|
||||
title: "图鸟",
|
||||
},
|
||||
{
|
||||
color: 'green',
|
||||
title: "互联网",
|
||||
},
|
||||
{
|
||||
color: 'orange',
|
||||
title: "免费",
|
||||
},
|
||||
{
|
||||
color: 'purplered',
|
||||
title: "配色",
|
||||
},
|
||||
{
|
||||
color: 'purple',
|
||||
title: "软件开发",
|
||||
},
|
||||
{
|
||||
color: 'brown',
|
||||
title: "插画",
|
||||
},
|
||||
{
|
||||
color: 'yellowgreen',
|
||||
title: "C4D",
|
||||
},
|
||||
{
|
||||
color: 'grey',
|
||||
title: "海报",
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
// tab选项卡切换
|
||||
tabChange(index) {
|
||||
this.current = index
|
||||
},
|
||||
getRandomCoolBg() {
|
||||
return this.$tn.colorUtils.getRandomCoolBgClass()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 轮播视觉差 start */
|
||||
.card-swiper {
|
||||
height: 750rpx !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 750rpx !important;
|
||||
left: 0rpx;
|
||||
box-sizing: border-box;
|
||||
// padding: 0rpx 30rpx 90rpx 30rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
transform: scale(1);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: none;
|
||||
transition: all 0.2s ease-in 0s;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
background-color: #FFFFFF;
|
||||
opacity: 0.6;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
top: -60rpx;
|
||||
margin: 0 8rpx !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* 间隔线 start*/
|
||||
.tn-strip-bottom {
|
||||
width: 100%;
|
||||
border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
|
||||
}
|
||||
/* 间隔线 end*/
|
||||
/* 标题 start */
|
||||
.nav_title {
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
&--wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 120rpx;
|
||||
font-size: 46rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
/* 标题 end */
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
/* 标签内容 start*/
|
||||
.tn-tag-content {
|
||||
&__item {
|
||||
display: inline-block;
|
||||
line-height: 45rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
margin: 20rpx 20rpx 5rpx 0rpx;
|
||||
|
||||
&--prefix {
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 标签内容 end*/
|
||||
|
||||
/* 内容图 start */
|
||||
.content-backgroup {
|
||||
z-index: -1;
|
||||
|
||||
.backgroud-image {
|
||||
border-radius: 15rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
/* 内容图 end */
|
||||
|
||||
/* 文章内容 start*/
|
||||
.tn-blogger-content {
|
||||
&__wrap {
|
||||
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.12);
|
||||
border-radius: 20rpx;
|
||||
margin: 15rpx;
|
||||
}
|
||||
|
||||
&__info {
|
||||
&__btn {
|
||||
margin-right: -12rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
&__item {
|
||||
line-height: 45rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 5rpx 18rpx 0 0;
|
||||
|
||||
&--prefix {
|
||||
color: #E83A30;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
line-height: 35rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
|
||||
&--1 {
|
||||
max-width: 690rpx;
|
||||
min-width: 690rpx;
|
||||
max-height: 400rpx;
|
||||
min-height: 400rpx;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
max-width: 260rpx;
|
||||
max-height: 260rpx;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
height: 212rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__count-icon {
|
||||
font-size: 30rpx;
|
||||
padding-right: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-book{
|
||||
padding: 150rpx 0rpx;
|
||||
font-size: 16rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-picbook{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
/* 文章内容 end*/
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user