mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-06-07 03:53:57 +08:00
Compare commits
14 Commits
9bd1329753
...
master
| 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 |
@@ -1,4 +1,4 @@
|
||||
[](https://resource.tuniaokj.com/images/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">
|
||||
@@ -22,19 +22,23 @@
|
||||
|
||||
- 包含基础常用的布局元素，flex、grid、浮动
|
||||
- 完整一体的配色体系，包含4种色深模式，同时包含4套渐变配色
|
||||
- 700+风格统一的图标icon，60+精选组件，让开发者可以快速进行开发
|
||||
- 800+风格统一的图标icon，60+精选组件，让开发者可以快速进行开发
|
||||
- 酷炫常用的页面模板，更有让你眼前一亮的界面效果
|
||||
- 图片素材语雀便捷下载，图鸟生态共同成长
|
||||
- 使用文档详尽说明，让你一文读懂图鸟UI
|
||||
|
||||
## 预览
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 官方链接
|
||||
|
||||
[图鸟UI 开源项目](https://ext.dcloud.net.cn/publisher?id=356088)
|
||||
|
||||
[使用文档 vue2](https://vue2.tuniaokj.com/)
|
||||
|
||||
[图鸟ICON演示](https://tnicon.tuniaokj.com/)
|
||||
|
||||
## 快速上手
|
||||
|
||||
#### 1.复制文件到项目的根目录
|
||||
@@ -81,7 +85,7 @@ const app = new Vue({
|
||||
|
||||
```js
|
||||
// 引入TuniaoUI提供的vuex简写方法
|
||||
let vuexStore = require('@/store/$tn.mixin.js')
|
||||
let vuexStore = require('@/store/$t.mixin.js')
|
||||
Vue.mixin(vuexStore)
|
||||
```
|
||||
|
||||
@@ -115,7 +119,7 @@ Vue.mixin(vuexStore)
|
||||
|
||||
#### 6.配置easycom组件模式
|
||||
|
||||
此配置需要在根目录的`pages.json`中进行。
|
||||
此配置需要在根目录的`page.json`中进行。
|
||||
|
||||
::: tip 温馨提示
|
||||
|
||||
@@ -140,27 +144,36 @@ Vue.mixin(vuexStore)
|
||||
|
||||
|
||||
|
||||
## 图鸟UI开源项目（图鸟UI、图鸟vue3、模板1234 已上传；模板5678、图表暂未上传）
|
||||
## 开源模板
|
||||
|
||||
[](https://resource.tuniaokj.com/images/uniapp_market/qr-code-all1.jpg "开源项目")
|
||||
[插件市场，可以直接下载使用](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)）
|
||||
## 图鸟UI-vue3开源项目
|
||||
|
||||
[](https://resource.tuniaokj.com/images/vue3/market/vue3-banner-min.jpg "开源项目")
|
||||
- [建议Github下载](https://github.com/tuniaoTech/tuniaoui-rc-vue3-uniapp)，
|
||||
|
||||
[](https://resource.tuniaokj.com/images/vue3/market/vue3-code-min.jpg)
|
||||
- [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 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-rc-vue3-uniapp)
|
||||
|
||||
[图鸟UI vue3 Github演示代码](https://github.com/tuniaoTech/tuniaoui-uniapp-v3-demo)
|
||||
- [图鸟UI vue3 Github演示代码](https://github.com/tuniaoTech/tuniaoui-uniapp-v3-demo)
|
||||
|
||||
- [图鸟vue3使用文档](https://vue3.tuniaokj.com/)
|
||||
|
||||
[图鸟vue3使用文档](https://vue3.tuniaokj.com/)
|
||||
|
||||
|
||||
|
||||
@@ -170,10 +183,10 @@ Vue.mixin(vuexStore)
|
||||
|
||||
微信群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼
|
||||
|
||||
[](https://resource.tuniaokj.com/images/uniapp_market/tn_author_qrcode.jpg)
|
||||
|
||||
|
||||
|
||||
|
||||
## 版权信息
|
||||
|
||||
`TuniaoUI开源版`遵循`Apache`协议，意味着您无需支付任何费用，也无需授权，即可将TuniaoUI开源版应用到您的产品中，但是需要保留TuniaoUI的信息。
|
||||
`TuniaoUI开源版`遵循`Apache`协议，意味着您无需支付任何费用，也无需授权，即可将TuniaoUI开源版应用到您的产品中，但是需要保留TuniaoUI的信息。
|
||||
@@ -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) {
|
||||
|
||||
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 |
@@ -5,6 +5,7 @@
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
"sassImplementationName" : "node-sass",
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
|
||||
+318
-300
@@ -1,301 +1,319 @@
|
||||
/**
|
||||
* 页面展示列表数据
|
||||
*/
|
||||
export default {
|
||||
data: [
|
||||
{
|
||||
title: '登录注册',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '火箭登录',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/login/demo1/demo1'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '粒子登录',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/login/demo2/demo2'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '背景登录',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/login/demo3/demo3'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '简约登录',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/login/demo4/demo4'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
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: '夏天个人',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/my/demo1/demo1'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '图鸟个人',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/my/demo2/demo2'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '外卖个人',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/my/demo3/demo3'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '高端个人',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/my/demo4/demo4'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '常用首页',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '音乐首页',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/home/music/music'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '课程首页',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/home/course/course'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '设计首页',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/home/design/design'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '招聘首页',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/home/job/job'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '投屏首页',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/home/screen/screen'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '壁纸首页',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/home/wallpaper/wallpaper'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '骚气页面',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '健康码',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/health/qrcode/qrcode'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '关于我们',
|
||||
author: 'Jaylen',
|
||||
url: '/templatePage/life/about/about'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '全新出发',
|
||||
author: '你的小可爱',
|
||||
url: '/templatePage/life/outset/outset'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '资讯左图',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/article/demo1/demo1'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '资讯右图',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/article/demo2/demo2'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '全屏轮播',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/life/fullpage/fullpage'
|
||||
},
|
||||
{
|
||||
icon: 'rocket',
|
||||
title: '浏览器',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/life/browser/browser'
|
||||
},
|
||||
{
|
||||
icon: 'rocket',
|
||||
title: '时钟',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/time/clock/clock'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '加载动画',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '加载动画1',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/loading/loading'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '加载动画2',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/loading/loading2'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '加载动画3',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/loading/loading3'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '加载动画4',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/loading/loading4'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '加载动画5',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/loading/loading5'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '动效元素',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '流星悬浮',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/suspended/suspended'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '随机粒子',
|
||||
author: 'Jaylen',
|
||||
url: '/templatePage/animate/particle/particle'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '相册图集',
|
||||
author: '你的小可爱',
|
||||
url: '/templatePage/animate/photo/photo'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '镂空效果',
|
||||
author: '你的小可爱',
|
||||
url: '/templatePage/animate/hollow/hollow'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '泡泡飘出',
|
||||
author: 'Jaylen',
|
||||
url: '/templatePage/animate/bubble/bubble'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: 'css波浪',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/wave/wave'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '群友力献',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '3D全景(第三方，有免费版付费版)',
|
||||
author: '图鸟北北 & 芊云全景',
|
||||
url: '/templatePage/life/pano/pano'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '3D模型(第三方，有免费版付费版)',
|
||||
author: '图鸟北北 & 芊云全景',
|
||||
url: '/templatePage/life/pano/model'
|
||||
},
|
||||
{
|
||||
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'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
/**
|
||||
* 页面展示列表数据
|
||||
*/
|
||||
export default {
|
||||
data: [
|
||||
{
|
||||
title: '登录注册',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '火箭登录',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/login/demo1/demo1'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '粒子登录',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/login/demo2/demo2'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '背景登录',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/login/demo3/demo3'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '简约登录',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/login/demo4/demo4'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
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',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '夏天个人',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/my/demo1/demo1'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '图鸟个人',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/my/demo2/demo2'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '外卖个人',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/my/demo3/demo3'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '高端个人',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/my/demo4/demo4'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '常用首页',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '音乐首页',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/home/music/music'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '课程首页',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/home/course/course'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '设计首页',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/home/design/design'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '招聘首页',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/home/job/job'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '投屏首页',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/home/screen/screen'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '壁纸首页',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/home/wallpaper/wallpaper'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '骚气页面',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '健康码',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/health/qrcode/qrcode'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '关于我们',
|
||||
author: 'Jaylen',
|
||||
url: '/templatePage/life/about/about'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '全新出发',
|
||||
author: '你的小可爱',
|
||||
url: '/templatePage/life/outset/outset'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '资讯左图',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/article/demo1/demo1'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '资讯右图',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/article/demo2/demo2'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '全屏轮播',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/life/fullpage/fullpage'
|
||||
},
|
||||
{
|
||||
icon: 'rocket',
|
||||
title: '浏览器',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/life/browser/browser'
|
||||
},
|
||||
{
|
||||
icon: 'rocket',
|
||||
title: '时钟',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/time/clock/clock'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '加载动画',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '加载动画1',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/loading/loading'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '加载动画2',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/loading/loading2'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '加载动画3',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/loading/loading3'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '加载动画4',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/loading/loading4'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '加载动画5',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/loading/loading5'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '动效元素',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '流星悬浮',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/suspended/suspended'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '随机粒子',
|
||||
author: 'Jaylen',
|
||||
url: '/templatePage/animate/particle/particle'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '相册图集',
|
||||
author: '你的小可爱',
|
||||
url: '/templatePage/animate/photo/photo'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '镂空效果',
|
||||
author: '你的小可爱',
|
||||
url: '/templatePage/animate/hollow/hollow'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '泡泡飘出',
|
||||
author: 'Jaylen',
|
||||
url: '/templatePage/animate/bubble/bubble'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: 'css波浪',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/wave/wave'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '群友力献',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '3D全景(第三方，有免费版付费版)',
|
||||
author: '图鸟北北 & 芊云全景',
|
||||
url: '/templatePage/life/pano/pano'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '3D模型(第三方，有免费版付费版)',
|
||||
author: '图鸟北北 & 芊云全景',
|
||||
url: '/templatePage/life/pano/model'
|
||||
},
|
||||
{
|
||||
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'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
+384
-305
@@ -1,305 +1,384 @@
|
||||
/**
|
||||
* 页面展示列表数据
|
||||
*/
|
||||
export default {
|
||||
data: [{
|
||||
title: '圈子博客',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [{
|
||||
icon: 'order',
|
||||
title: '操作指引',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/life/guide/guide'
|
||||
},{
|
||||
icon: 'order',
|
||||
title: '首次指引',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/life/start/start'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '圈子首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/blog/blog/blog'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '社交圈子',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/blog/socialize/socialize'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '简约圈子(旧)',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/blog/circle/circle'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '圈子个人',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/blog/myblog/myblog'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '消息通知',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/blog/message/message'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '商品优选',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/blog/prefer/prefer'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '优选详情',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/blog/product/product'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '博客博主',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/blog/blogger/blogger'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '酷炫功能',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/cool/cool'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '友情链接',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/link/link'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '祝福页面',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/life/bless/bless'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '酷炫首页',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [{
|
||||
icon: 'order',
|
||||
title: '图鸟首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/tuniao/tuniao'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '奶茶首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/tea/tea'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '阅读首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/read/read'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '月亮首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/moon/moon'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '计划首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/plan/plan'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '新年首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/year/year'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '电影首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/movie/movie'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '食物首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/food/food'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '拟态首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/mimicry/mimicry'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '充电首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/life/power/power'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '卡片首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/card/card'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '健康首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/health/health'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '全景首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/panoramic/panoramic'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: 'uCharts首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/ucharts/ucharts'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '商城店铺',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [{
|
||||
icon: 'order',
|
||||
title: '店铺商品',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/shop/store/store'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '商品订单',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/shop/order/order'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '商品分类',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/shop/classify/classify'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '积分活动',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/shop/money/money'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '会员需求',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [{
|
||||
icon: 'order',
|
||||
title: 'Drag长按拖拽随机固定',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/drag/basic-drag/basic-drag'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '图片上传长按拖拽',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/drag/upload-image-drag/upload-image-drag'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: 'Cropper图片裁剪',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/cropper/cropper'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: 'StackSwiper堆叠轮播',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/stack-swiper/stack-swiper'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '重力效果',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/gravity/page1/page1'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '下拉刷新',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/scroll-view/index'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '级联选择',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/cascade-selection/cascade-selection'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '瀑布流',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/waterfall/waterfall'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '树形菜单',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/tree-view/tree-view'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '表格',
|
||||
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'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '生态支持',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [{
|
||||
icon: 'order',
|
||||
title: '短视频',
|
||||
author: '图鸟 & 第三方',
|
||||
url: '/thirdPage/short-video/short-video'
|
||||
},{
|
||||
icon: 'order',
|
||||
title: '外卖模板',
|
||||
author: '图鸟 & 第三方',
|
||||
url: '/takeOutPage/walking-route/walking-route'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '期待你的加入',
|
||||
author: '图鸟 & 第三方',
|
||||
url: '/templatePage/life/candle/candle'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
/**
|
||||
* 页面展示列表数据
|
||||
*/
|
||||
export default {
|
||||
data: [{
|
||||
title: '圈子博客',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [{
|
||||
icon: 'order',
|
||||
title: '操作指引',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/life/guide/guide'
|
||||
},{
|
||||
icon: 'order',
|
||||
title: '首次指引',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/life/start/start'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '圈子首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/blog/blog/blog'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '社交圈子',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/blog/socialize/socialize'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '简约圈子(旧)',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/blog/circle/circle'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '圈子个人',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/blog/myblog/myblog'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '消息通知',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/blog/message/message'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '商品优选',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/blog/prefer/prefer'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '优选详情',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/blog/product/product'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '博客博主',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/blog/blogger/blogger'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '酷炫功能',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/cool/cool'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '友情链接',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/link/link'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '祝福页面',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/life/bless/bless'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '酷炫首页',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [{
|
||||
icon: 'order',
|
||||
title: '图鸟首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/tuniao/tuniao'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '奶茶首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/tea/tea'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '阅读首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/read/read'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '月亮首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/moon/moon'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '计划首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/plan/plan'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '新年首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/year/year'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '电影首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/movie/movie'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '食物首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/food/food'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '拟态首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/mimicry/mimicry'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '充电首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/life/power/power'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '卡片首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/card/card'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '健康首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/health/health'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '全景首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/panoramic/panoramic'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: 'uCharts首页',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/ucharts/ucharts'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '商城店铺',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [{
|
||||
icon: 'order',
|
||||
title: '店铺商品',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/shop/store/store'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '商品订单',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/shop/order/order'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '商品分类',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/shop/classify/classify'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '积分活动',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/shop/money/money'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '定制需求',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [{
|
||||
icon: 'order',
|
||||
title: 'Drag长按拖拽随机固定',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/drag/basic-drag/basic-drag'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '列表长按拖拽排序',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/drag/list-drag/list-drag'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '图片上传长按拖拽',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/drag/upload-image-drag/upload-image-drag'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: 'Cropper图片裁剪',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/cropper/cropper'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: 'StackSwiper堆叠轮播',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/stack-swiper/stack-swiper'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '重力效果',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/home/gravity/page1/page1'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '下拉刷新',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/scroll-view/index'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '级联选择',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/cascade-selection/cascade-selection'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '瀑布流',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/waterfall/waterfall'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '树形菜单',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/tree-view/tree-view'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '表格',
|
||||
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'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
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: '图鸟 & 第三方',
|
||||
url: '/takeOutPage/walking-route/walking-route'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '期待你的加入',
|
||||
author: '图鸟 & 第三方',
|
||||
url: '/templatePage/life/candle/candle'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
+349
@@ -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": [{
|
||||
|
||||
+194
-194
@@ -1,194 +1,194 @@
|
||||
<template>
|
||||
<view class="template tn-safe-area-inset-bottom">
|
||||
|
||||
<view class="top-backgroup">
|
||||
<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">
|
||||
<view class="nav_title--wrap tn-margin-bottom-sm">
|
||||
<view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view>
|
||||
</view>
|
||||
|
||||
<view class='nav-list'>
|
||||
<block v-for="(content_item, content_index) in item.list" :key="content_index">
|
||||
<navigator
|
||||
open-type="navigate"
|
||||
hover-class='none'
|
||||
:url="content_item.url"
|
||||
class="nav-list-item tn-shadow-blur tn-cool-bg-image"
|
||||
:class="[
|
||||
getRandomCoolBg(content_index)
|
||||
]"
|
||||
>
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
|
||||
<view class="nav-link">
|
||||
<view class='title'>{{ content_item.title }}</view>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<view :class="['tn-icon-' + content_item.icon]"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="author">
|
||||
<view class='name tn-text-sm tn-color-gray' style="margin-left: -10rpx;">
|
||||
<text class="tn-icon-code tn-padding-right-xs"></text>
|
||||
<text class=""> {{ content_item.author }} </text>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="tn-padding-bottom-xs"></view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import templateListData from '@/mock/template_page.js'
|
||||
|
||||
export default {
|
||||
name: 'TemplatePage',
|
||||
filters: {
|
||||
titleFilter(value) {
|
||||
if (value.length === 0) {
|
||||
return ''
|
||||
}
|
||||
let newString = ''
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
if (i !== 0) {
|
||||
newString += ' / '
|
||||
}
|
||||
newString += value[i]
|
||||
}
|
||||
return newString
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// nav菜单列表
|
||||
navList: templateListData.data
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getRandomCoolBg() {
|
||||
return this.$tn.color.getRandomCoolBgClass()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 顶部背景图 start */
|
||||
.top-backgroup {
|
||||
height: 450rpx;
|
||||
z-index: -1;
|
||||
|
||||
.backgroud-image {
|
||||
width: 100%;
|
||||
height: 667rpx;
|
||||
}
|
||||
}
|
||||
/* 顶部背景图 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 */
|
||||
|
||||
/* 组件导航列表 start*/
|
||||
.nav-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0rpx 12rpx 0rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
|
||||
/* 列表元素 start */
|
||||
.nav-list-item {
|
||||
padding: 50rpx 30rpx 36rpx 30rpx;
|
||||
border-radius: 12rpx;
|
||||
width: 100%;
|
||||
margin: 0 18rpx 90rpx;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
|
||||
/* 元素标题 start */
|
||||
.nav-link {
|
||||
flex: 1;
|
||||
font-size: 32rpx;
|
||||
text-transform: capitalize;
|
||||
padding: 10rpx 0 20rpx 0;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
/* 元素标题 end */
|
||||
|
||||
/* 元素图标 start */
|
||||
.icon {
|
||||
font-variant: small-caps;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
font-size: 45rpx;
|
||||
color: #FFFFFF;
|
||||
white-space: nowrap;
|
||||
opacity: 0.9;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
border-radius: 5000rpx;
|
||||
}
|
||||
/* 元素图标 end */
|
||||
|
||||
/* 作者信息 start*/
|
||||
.author {
|
||||
// background-color: red;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
|
||||
border-radius: 0 0 15rpx 15rpx;
|
||||
position: absolute;
|
||||
width: 85%;
|
||||
line-height: 50rpx;
|
||||
left: 50%;
|
||||
bottom: -50rpx;
|
||||
transform: translateX(-50%);
|
||||
z-index: -1;
|
||||
text-align: center;
|
||||
}
|
||||
/* 作者信息 end*/
|
||||
}
|
||||
/* 列表元素 end */
|
||||
}
|
||||
/* 组件导航列表 end*/
|
||||
</style>
|
||||
<template>
|
||||
<view class="template tn-safe-area-inset-bottom">
|
||||
|
||||
<view class="top-backgroup">
|
||||
<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">
|
||||
<view class="nav_title--wrap tn-margin-bottom-sm">
|
||||
<view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view>
|
||||
</view>
|
||||
|
||||
<view class='nav-list'>
|
||||
<block v-for="(content_item, content_index) in item.list" :key="content_index">
|
||||
<navigator
|
||||
open-type="navigate"
|
||||
hover-class='none'
|
||||
:url="content_item.url"
|
||||
class="nav-list-item tn-shadow-blur tn-cool-bg-image"
|
||||
:class="[
|
||||
getRandomCoolBg(content_index)
|
||||
]"
|
||||
>
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
|
||||
<view class="nav-link">
|
||||
<view class='title'>{{ content_item.title }}</view>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<view :class="['tn-icon-' + content_item.icon]"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="author">
|
||||
<view class='name tn-text-sm tn-color-gray' style="margin-left: -10rpx;">
|
||||
<text class="tn-icon-code tn-padding-right-xs"></text>
|
||||
<text class=""> {{ content_item.author }} </text>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="tn-padding-bottom-xs"></view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import templateListData from '@/mock/template_page.js'
|
||||
|
||||
export default {
|
||||
name: 'TemplatePage',
|
||||
filters: {
|
||||
titleFilter(value) {
|
||||
if (value.length === 0) {
|
||||
return ''
|
||||
}
|
||||
let newString = ''
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
if (i !== 0) {
|
||||
newString += ' / '
|
||||
}
|
||||
newString += value[i]
|
||||
}
|
||||
return newString
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// nav菜单列表
|
||||
navList: templateListData.data
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getRandomCoolBg() {
|
||||
return this.$tn.color.getRandomCoolBgClass()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 顶部背景图 start */
|
||||
.top-backgroup {
|
||||
height: 450rpx;
|
||||
z-index: -1;
|
||||
|
||||
.backgroud-image {
|
||||
width: 100%;
|
||||
height: 667rpx;
|
||||
}
|
||||
}
|
||||
/* 顶部背景图 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 */
|
||||
|
||||
/* 组件导航列表 start*/
|
||||
.nav-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0rpx 12rpx 0rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
|
||||
/* 列表元素 start */
|
||||
.nav-list-item {
|
||||
padding: 50rpx 30rpx 36rpx 30rpx;
|
||||
border-radius: 12rpx;
|
||||
width: 100%;
|
||||
margin: 0 18rpx 90rpx;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
|
||||
/* 元素标题 start */
|
||||
.nav-link {
|
||||
flex: 1;
|
||||
font-size: 32rpx;
|
||||
text-transform: capitalize;
|
||||
padding: 10rpx 0 20rpx 0;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
/* 元素标题 end */
|
||||
|
||||
/* 元素图标 start */
|
||||
.icon {
|
||||
font-variant: small-caps;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
font-size: 45rpx;
|
||||
color: #FFFFFF;
|
||||
white-space: nowrap;
|
||||
opacity: 0.9;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
border-radius: 5000rpx;
|
||||
}
|
||||
/* 元素图标 end */
|
||||
|
||||
/* 作者信息 start*/
|
||||
.author {
|
||||
// background-color: red;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
|
||||
border-radius: 0 0 15rpx 15rpx;
|
||||
position: absolute;
|
||||
width: 85%;
|
||||
line-height: 50rpx;
|
||||
left: 50%;
|
||||
bottom: -50rpx;
|
||||
transform: translateX(-50%);
|
||||
z-index: -1;
|
||||
text-align: center;
|
||||
}
|
||||
/* 作者信息 end*/
|
||||
}
|
||||
/* 列表元素 end */
|
||||
}
|
||||
/* 组件导航列表 end*/
|
||||
</style>
|
||||
|
||||
+523
-508
File diff suppressed because it is too large
Load Diff
@@ -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
|
||||
@@ -501,7 +503,7 @@
|
||||
bottomInfo = this.endText
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
day: item,
|
||||
color: color,
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
v-if="type === 'select'"
|
||||
class="tn-input__text"
|
||||
>
|
||||
{{defaultValue}}
|
||||
<text :class="defaultValue == undefined || defaultValue == '' ? 'tn-input__placeholder':''">{{defaultValue == undefined || defaultValue == '' ? placeholder : defaultValue }}</text>
|
||||
</view>
|
||||
|
||||
<input
|
||||
@@ -114,6 +114,9 @@
|
||||
|
||||
<script>
|
||||
import Emitter from '../../libs/utils/emitter.js'
|
||||
import {
|
||||
debounceFun
|
||||
} from '../../libs/function/applyEven.js'
|
||||
|
||||
export default {
|
||||
mixins: [Emitter],
|
||||
@@ -334,28 +337,7 @@
|
||||
/**
|
||||
* 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事件
|
||||
*/
|
||||
@@ -404,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>
|
||||
|
||||
@@ -414,7 +424,11 @@
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
||||
|
||||
&__placeholder{
|
||||
color: $tn-font-sub-color;
|
||||
}
|
||||
|
||||
&__input {
|
||||
font-size: 28rpx;
|
||||
color: $tn-font-color;
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<view class="vip-component-cascade-selection tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>级联选择</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="基础">
|
||||
<tn-cascade-selection :list="list" @complete="handleCompleteSelection"></tn-cascade-selection>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="设置默认值">
|
||||
<tn-cascade-selection :list="list" :defaultValue="defaultValue" @complete="handleCompleteSelection"></tn-cascade-selection>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="异步加载">
|
||||
<tn-cascade-selection :list="asyncList" request :receiveData="receiveData" @complete="handleCompleteSelection2" @change="handleChangeSelection"></tn-cascade-selection>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
import city from '../../static/mock/cascade-city.js'
|
||||
export default {
|
||||
name: 'VipComponentsCascadeSelection',
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
list: city,
|
||||
asyncList: [
|
||||
{
|
||||
text: '总经办',
|
||||
subText: '10人',
|
||||
src: '/static/favicon.ico',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
text: '财务',
|
||||
subText: '30人',
|
||||
src: '/static/favicon.ico',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
text: '采购',
|
||||
subText: '30人',
|
||||
src: '/static/favicon.ico',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
text: '销售',
|
||||
subText: '30人',
|
||||
src: '/static/favicon.ico',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
text: '售后',
|
||||
subText: '30人',
|
||||
src: '/static/favicon.ico',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
text: '研发',
|
||||
subText: '30人',
|
||||
src: '/static/favicon.ico',
|
||||
value: 6
|
||||
},
|
||||
{
|
||||
text: '质检',
|
||||
subText: '30人',
|
||||
src: '/static/favicon.ico',
|
||||
value: 7
|
||||
},
|
||||
{
|
||||
text: '生产',
|
||||
subText: '30人',
|
||||
src: '/static/favicon.ico',
|
||||
value: 8
|
||||
}
|
||||
],
|
||||
receiveData: [],
|
||||
defaultValue: ['440000','440100','440113']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理完成选中回调
|
||||
handleCompleteSelection(e) {
|
||||
this.$tn.message.toast(e.text)
|
||||
},
|
||||
// 处理异步请求完成选中回调
|
||||
handleCompleteSelection2(e) {
|
||||
this.$tn.message.toast(e.text)
|
||||
},
|
||||
// 处理异步请求列切换
|
||||
handleChangeSelection(e) {
|
||||
const {
|
||||
index,
|
||||
text,
|
||||
value
|
||||
} = e
|
||||
if (index === 7) {
|
||||
//实际中以请求数据为准，无下级数据则传空数组
|
||||
this.receiveData = []
|
||||
} else {
|
||||
uni.showLoading({
|
||||
title: '请求中...'
|
||||
})
|
||||
setTimeout(() => {
|
||||
//请求完成后将数据处理成以下格式，传入，最后一级没有则传空数组
|
||||
switch (index) {
|
||||
case 0:
|
||||
const data = []
|
||||
for (let i = 0; i < (value === 1 ? 10 : 30); i++) {
|
||||
data.push({
|
||||
text: text + '员工' + (i + 1),
|
||||
subText: i % 2 === 0 ? '男' : '女',
|
||||
value: Number(value + i + '')
|
||||
})
|
||||
}
|
||||
this.receiveData = data
|
||||
break
|
||||
case 1:
|
||||
this.receiveData = [
|
||||
{
|
||||
text: '他说',
|
||||
value: 0
|
||||
},{
|
||||
text: '她说',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
break
|
||||
case 2:
|
||||
this.receiveData = [
|
||||
{
|
||||
text: '我要加工资',
|
||||
value: 0
|
||||
},{
|
||||
text: '我要加班班',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
break
|
||||
case 3:
|
||||
this.receiveData = [
|
||||
{
|
||||
text: '老板回复',
|
||||
value: 0
|
||||
},{
|
||||
text: '直接辞退',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
break
|
||||
case 4:
|
||||
if (value === 0) {
|
||||
this.receiveData = [
|
||||
{
|
||||
text: '等明年吧',
|
||||
value: 0
|
||||
},{
|
||||
text: '批准',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
} else {
|
||||
this.receiveData = []
|
||||
}
|
||||
break
|
||||
case 5:
|
||||
this.receiveData = [
|
||||
{
|
||||
text: '巴拉巴拉',
|
||||
value: 0
|
||||
},{
|
||||
text: '沉默了啊',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
break
|
||||
case 6:
|
||||
this.receiveData = [
|
||||
{
|
||||
text: '结束了',
|
||||
value: 0
|
||||
}
|
||||
]
|
||||
break
|
||||
}
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-component-cascade-selection {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<view class="vip-component-cropper">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Cropper图片裁剪</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="cropper-options">
|
||||
<view class="cropper-options__item" @tap="chooseImage">选择图片</view>
|
||||
<view class="cropper-options__item" @tap="switchBorderRect">{{ switchText }}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<tn-cropper
|
||||
:imageUrl="imageUrl"
|
||||
:isRound="isRound"
|
||||
@cropper="cropperFinish"
|
||||
></tn-cropper>
|
||||
|
||||
<tn-popup
|
||||
v-model="showCropperImage"
|
||||
:marginTop="vuex_custom_bar_height"
|
||||
length="80%"
|
||||
mode="center"
|
||||
:closeBtn="true"
|
||||
>
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-center" style="margin: 40rpx 60rpx;">
|
||||
<image :src="cropperImageUrl" style="width: 80%;" mode="widthFix"></image>
|
||||
</view>
|
||||
</tn-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
|
||||
export default {
|
||||
name: 'vipComponentCropper',
|
||||
components: { multipleOptionsDemo },
|
||||
data() {
|
||||
return {
|
||||
imageUrl: '',
|
||||
isRound: false,
|
||||
switchText: '切换为圆形裁剪框',
|
||||
showCropperImage: false,
|
||||
cropperImageUrl: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 选择图片
|
||||
chooseImage() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album','camera'],
|
||||
success: (res) => {
|
||||
const tempFilePaths = res.tempFilePaths[0]
|
||||
this.imageUrl = tempFilePaths
|
||||
}
|
||||
})
|
||||
},
|
||||
// 切换裁剪框形状
|
||||
switchBorderRect() {
|
||||
this.isRound = !this.isRound
|
||||
if (this.isRound) {
|
||||
this.switchText = '切换为正方形裁剪框'
|
||||
} else {
|
||||
this.switchText = '切换为圆形裁剪框'
|
||||
}
|
||||
},
|
||||
// 裁剪完成
|
||||
cropperFinish(res) {
|
||||
// console.log(res);
|
||||
this.showCropperImage = true
|
||||
if (res.url) {
|
||||
this.cropperImageUrl = res.url
|
||||
}
|
||||
if (res.base64) {
|
||||
this.cropperImageUrl = `${res.base64}`
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cropper-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
margin-top: 80rpx;
|
||||
|
||||
&__item {
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
padding: 18rpx 36rpx;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
z-index: 1000;
|
||||
|
||||
&:nth-child(1) {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view class="vip-component-custom-swiper--horizontal tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>图鸟轮播(横向)</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<tn-custom-swiper
|
||||
class="swiper"
|
||||
:current="current"
|
||||
:intervel="3000"
|
||||
:autoplay="true"
|
||||
:circular="true"
|
||||
indicatorType="round"
|
||||
:indicator="true"
|
||||
indicatorPosition="topCenter"
|
||||
indicatorActiveColor="#838383"
|
||||
:customSwiperStyle="customSwiperStyle"
|
||||
:prevSwiperStyle="prevSwiperStyle"
|
||||
:nextSwiperStyle="nextSwiperStyle"
|
||||
>
|
||||
<block v-for="(item, index) in swiperList" :key="index">
|
||||
<tn-custom-swiper-item class="swiper__item">
|
||||
<image :src="item.image" style="width: 100%;" mode="widthFix"></image>
|
||||
<view class="text">{{ item.title }}</view>
|
||||
</tn-custom-swiper-item>
|
||||
</block>
|
||||
</tn-custom-swiper>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VipComponentCustomHorizontalSwiper',
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
swiperList: [
|
||||
{
|
||||
title: '图鸟UI 会员促销1',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
},
|
||||
{
|
||||
title: '图鸟UI 会员促销2',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
},
|
||||
{
|
||||
title: '图鸟UI 会员促销3',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
},
|
||||
{
|
||||
title: '图鸟UI 会员促销4',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
},
|
||||
{
|
||||
title: '图鸟UI 会员促销5',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
}
|
||||
],
|
||||
// 当前swiper的自定义样式
|
||||
customSwiperStyle: {
|
||||
transform: 'scale(0.7)',
|
||||
transformOrigin: 'center center',
|
||||
transition: 'all 0.5s ease-out',
|
||||
left: '0px'
|
||||
},
|
||||
// 前一个swiper的自定义样式
|
||||
prevSwiperStyle: {
|
||||
transform: 'scale(0.8) perspective(200rpx) rotateY(-10deg) translateZ(-280rpx)',
|
||||
left: '280rpx'
|
||||
},
|
||||
// 后一个swiper的自定义样式
|
||||
nextSwiperStyle: {
|
||||
transform: 'scale(0.8) perspective(200rpx) rotateY(10deg) translateZ(-280rpx)',
|
||||
left: '-280rpx'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-component-custom-swiper--horizontal {
|
||||
background-color: $tn-bg-gray-color;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 390rpx;
|
||||
display: block;
|
||||
|
||||
&__item {
|
||||
image {
|
||||
border-radius: 10rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.text {
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
bottom: 0;
|
||||
font-size: 46rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<view class="vip-component-custom-swiper">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>图鸟轮播(实验)</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<multiple-options-demo
|
||||
:list="optionsList"
|
||||
></multiple-options-demo>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
|
||||
|
||||
export default {
|
||||
name: 'VipComponentsCustomSwiper',
|
||||
components: { multipleOptionsDemo },
|
||||
data() {
|
||||
return {
|
||||
// 选项列表数据
|
||||
optionsList: [
|
||||
{ title: '横向滑动', desc: '横向滑动轮播', url: '/vipPage/components/custom-swiper/horizontal/custom-swiper' },
|
||||
{ title: '纵向滑动', desc: '纵向滑动轮播', url: '/vipPage/components/custom-swiper/vertical/custom-swiper' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<view class="vip-component-custom-swiper--horizontal 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="0"
|
||||
:duration="450"
|
||||
:autoplay="true"
|
||||
:circular="true"
|
||||
:vertical="true"
|
||||
:indicator="true"
|
||||
indicatorType="round"
|
||||
indicatorPosition="topCenter"
|
||||
indicatorActiveColor="#838383"
|
||||
>
|
||||
<block v-for="(item, index) in swiperList" :key="index">
|
||||
<tn-custom-swiper-item class="swiper__item">
|
||||
<image :src="item.image" mode="heightFix"></image>
|
||||
<view class="text">{{ item.title }}</view>
|
||||
</tn-custom-swiper-item>
|
||||
</block>
|
||||
</tn-custom-swiper>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VipComponentCustomVerticalSwiper',
|
||||
data() {
|
||||
return {
|
||||
containerHeight: 0,
|
||||
swiperList: [
|
||||
{
|
||||
title: '图鸟UI YYDS-1',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
},
|
||||
{
|
||||
title: '图鸟UI YYDS-2',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
},
|
||||
{
|
||||
title: '图鸟UI YYDS-3',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
},
|
||||
{
|
||||
title: '图鸟UI YYDS-4',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
},
|
||||
{
|
||||
title: '图鸟UI YYDS-5',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getContainerHeight()
|
||||
},
|
||||
methods: {
|
||||
// 获取可用区域的高度
|
||||
getContainerHeight() {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.containerHeight = systemInfo.safeArea.height - this.vuex_custom_bar_height + systemInfo.statusBarHeight
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-component-custom-swiper--horizontal {
|
||||
background-color: $tn-bg-gray-color;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
|
||||
&__item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
image {
|
||||
border-radius: 10rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.text {
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
bottom: 0;
|
||||
font-size: 46rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<view class="vip-component-basic-drag">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Drag拖拽</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<view class="operation">
|
||||
<view class="operation__item">
|
||||
<view class="operation__title">设置columns</view>
|
||||
<view class="operation__content">
|
||||
<view class="tn-margin-right">columns:</view>
|
||||
<tn-number-box v-model="columns" :min="3" :max="5" :disabledInput="true"></tn-number-box>
|
||||
</view>
|
||||
</view>
|
||||
<view class="operation__item">
|
||||
<view class="operation__title">设置固定项</view>
|
||||
<view class="operation__content">
|
||||
<view class="tn-margin-right">随机固定:</view>
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="setFixed">随机固定</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="drag__wrap tn-margin-top">
|
||||
<tn-drag :list="list" :columns="columns" :itemHeight="itemHeight" @change="onChange" @end="onEnd">
|
||||
<template slot-scope="{entity, height, fixed}">
|
||||
<view class="drag__item" :style="{height: `${height}rpx`}">
|
||||
<image :src="entity.url" :style="{height: `${height}rpx`}" mode="widthFix"></image>
|
||||
<view v-if="fixed" class="drag__item__fixed">Fixed</view>
|
||||
</view>
|
||||
</template>
|
||||
</tn-drag>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VipComponentBasicDrag',
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
scrollTop: 0,
|
||||
columns: 3,
|
||||
itemHeight: 210,
|
||||
sliderValue: 3,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const list = []
|
||||
for (let i = 0; i < 15; i++) {
|
||||
list.push({
|
||||
url: i % 2 == 0 ? 'https://resource.tuniaokj.com/images/shop/bag1.jpg' : 'https://resource.tuniaokj.com/images/shop/bag2.jpg',
|
||||
fixed: false
|
||||
})
|
||||
}
|
||||
this.list = list
|
||||
},
|
||||
watch: {
|
||||
columns(val) {
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 0
|
||||
})
|
||||
this.itemHeight = [210, 160, 120][val - 3]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(data) {
|
||||
// console.log(data.data);
|
||||
},
|
||||
onEnd(data) {
|
||||
console.log(data.data);
|
||||
},
|
||||
// 设置动态固定项
|
||||
setFixed() {
|
||||
const rand = Math.floor(Math.random() * (15 - 1))
|
||||
console.log(rand);
|
||||
this.list.forEach((item) => {
|
||||
item.fixed = false
|
||||
})
|
||||
this.list[rand].fixed = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 0 100rpx;
|
||||
margin-top: 100rpx;
|
||||
|
||||
&__item {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.drag {
|
||||
&__wrap {
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
|
||||
&__item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #FFFFFF;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
border: 1rpx solid #F6F6F6;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__fixed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>列表排序长按拖拽</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view class="tn-bg-gray--light" :style="{paddingTop: vuex_custom_bar_height + 10 + 'px'}">
|
||||
|
||||
<view class="drag__wrap tn-margin-top-sm tn-padding-bottom-xl">
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding" style="height: 100%;background-color: #FFFFFF;margin: 10rpx;border-radius: 10rpx;">
|
||||
<view class="justify-content-item tn-text-bold tn-text-lg">
|
||||
推荐
|
||||
</view>
|
||||
<view class="justify-content-item">
|
||||
<text class="tn-icon-expand tn-text-xl tn-color-gray--disabled"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<tn-drag :list="list" :columns="columns" :itemHeight="itemHeight" @change="onChange" @end="onEnd">
|
||||
<template slot-scope="{entity, height}">
|
||||
<view class="drag__item" :style="{height: `${height}rpx`}">
|
||||
<view class="drag__item__name">
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding" style="height: 100%;">
|
||||
<view class="justify-content-item tn-text-bold tn-text-lg">
|
||||
{{entity.name}}
|
||||
</view>
|
||||
<view class="justify-content-item">
|
||||
<text class="tn-icon-expand tn-text-xl"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</tn-drag>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateSet',
|
||||
mixins: [template_page_mixin],
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{name: '商城'},
|
||||
{name: '关注'},
|
||||
{name: '团购'},
|
||||
{name: '同城'},
|
||||
{name: '经验'},
|
||||
{name: '视频'},
|
||||
{name: '直播'},
|
||||
{name: '热点'},
|
||||
{name: '治愈'}
|
||||
],
|
||||
scrollTop: 0,
|
||||
columns: 1,
|
||||
itemHeight: 120,
|
||||
sliderValue: 1,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(data) {
|
||||
// console.log(data.data);
|
||||
},
|
||||
onEnd(data) {
|
||||
// console.log(data.data);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.drag {
|
||||
&__wrap {
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
&__item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// background-color: #FF5656;
|
||||
box-sizing: border-box;
|
||||
padding: 10rpx;
|
||||
// border: 1rpx solid #000000;
|
||||
position: relative;
|
||||
|
||||
&__fixed {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
&__name {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<view class="vip-component-upload-image-drag">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>可拖拽图片上传</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<view class="drag__wrap tn-margin-top">
|
||||
<tn-image-upload-drag ref="imageUpload" :action="action" :height="220" :width="220" :formData="formData"
|
||||
:fileList="fileList" :disabled="disabled" :autoUpload="autoUpload" :maxCount="maxCount"
|
||||
:showUploadList="showUploadList" :showProgress="showProgress" :deleteable="deleteable"
|
||||
:customBtn="customBtn" @sort-list="onSortList" />
|
||||
<view class="tn-flex tn-margin-top-xs tn-flex-row-center">
|
||||
<tn-button fontColor="tn-color-white" @tap="upload">上传</tn-button>
|
||||
<tn-button fontColor="tn-color-white" backgroundColor="tn-bg-red" margin="0rpx 0rpx 0rpx 20rpx"
|
||||
@tap="clear">清空列表</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VipComponentUploadImageDrag',
|
||||
data() {
|
||||
return {
|
||||
action: 'https://www.hualigs.cn/api/upload',
|
||||
// action: '',
|
||||
formData: {
|
||||
apiType: 'this,ali',
|
||||
token: 'dffc1e06e636cff0fdf7d877b6ae6a2e',
|
||||
image: null
|
||||
},
|
||||
fileList: [{
|
||||
url: 'https://resource.tuniaokj.com/images/shop/bag1.jpg'
|
||||
}],
|
||||
showUploadList: true,
|
||||
customBtn: false,
|
||||
autoUpload: true,
|
||||
showProgress: true,
|
||||
deleteable: true,
|
||||
customStyle: false,
|
||||
maxCount: 9,
|
||||
disabled: false,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.pushFileList().then(res=>{
|
||||
this.fileList=[...this.fileList,...res]
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
//模拟异步获取数据
|
||||
async pushFileList() {
|
||||
return [{
|
||||
url: 'https://resource.tuniaokj.com/images/shop/bag2.jpg'
|
||||
}, {
|
||||
url: 'https://resource.tuniaokj.com/images/shop/cup1.jpg'
|
||||
}, {
|
||||
url: 'https://resource.tuniaokj.com/images/shop/cup2.jpg'
|
||||
}]
|
||||
},
|
||||
// 手动上传文件
|
||||
upload() {
|
||||
this.$refs.imageUpload.upload()
|
||||
},
|
||||
// 手动清空列表
|
||||
clear() {
|
||||
this.$refs.imageUpload.clear()
|
||||
},
|
||||
// 图片拖拽重新排序
|
||||
onSortList(list) {
|
||||
console.log(list);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.drag {
|
||||
&__wrap {
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<view class="vip-component-basic-scroll-view">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>自定义下拉刷新</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<tn-scroll-view
|
||||
:customNavHeight="vuex_custom_bar_height"
|
||||
:refreshState="refreshState"
|
||||
@refresh="handleRefresh"
|
||||
>
|
||||
<view class="scroll-view__content">
|
||||
<block v-for="i in 10" :key="i">
|
||||
<view class="list__item tn-flex tn-flex-direction-row tn-flex-row-left tn-flex-col-center">
|
||||
<view class="list__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/prototype2.jpg"></image>
|
||||
</view>
|
||||
<view class="list__content tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-left">
|
||||
<view class="list__content__title">tuniaoUI</view>
|
||||
<view class="list__content__desc tn-text-ellipsis">图鸟UI助力开发者快速开发页面，提供丰富的页面模板</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</tn-scroll-view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VipComponentBasicScrollView',
|
||||
data() {
|
||||
return {
|
||||
refreshState: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理触发刷新事件
|
||||
handleRefresh() {
|
||||
this.refreshState = true
|
||||
setTimeout(() => {
|
||||
this.refreshState = false
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scroll-view {
|
||||
|
||||
&__content {
|
||||
|
||||
.list {
|
||||
&__item {
|
||||
height: 140rpx;
|
||||
margin: 0 10rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-left: 16rpx;
|
||||
height: 100%;
|
||||
width: 580rpx;
|
||||
|
||||
&__title {
|
||||
padding-bottom: 10rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
&__desc {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<view class="vip-component-basic-scroll-view">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>自定义下拉刷新</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<tn-scroll-view
|
||||
:customNavHeight="vuex_custom_bar_height"
|
||||
:refreshState="refreshState"
|
||||
@refresh="handleRefresh"
|
||||
@refreshReady="handleRefreshReady"
|
||||
@refreshStop="resetRefresh"
|
||||
>
|
||||
<template v-slot:pulldown>
|
||||
<view class="refresh">
|
||||
<view class="refresh__icon" :class="[`tn-icon-down-arrow`, {'refresh__icon--revolve': refreshIconRevolve}]"></view>
|
||||
<view class="refresh__text">{{ refreshText }}</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="scroll-view__content">
|
||||
<block v-for="i in 10" :key="i">
|
||||
<view class="list__item tn-flex tn-flex-direction-row tn-flex-row-left tn-flex-col-center">
|
||||
<view class="list__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/prototype2.jpg"></image>
|
||||
</view>
|
||||
<view class="list__content tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-left">
|
||||
<view class="list__content__title">tuniaoUI</view>
|
||||
<view class="list__content__desc tn-text-ellipsis">图鸟UI助力开发者快速开发页面，提供丰富的页面模板</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</tn-scroll-view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VipComponentBasicScrollView',
|
||||
data() {
|
||||
return {
|
||||
refreshState: false,
|
||||
refreshText: '下拉刷新',
|
||||
refreshIconRevolve: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理触发刷新事件
|
||||
handleRefresh() {
|
||||
this.refreshState = true
|
||||
this.refreshText = '正在刷新'
|
||||
setTimeout(() => {
|
||||
this.refreshState = false
|
||||
this.resetRefresh()
|
||||
}, 2000)
|
||||
},
|
||||
// 处理刷新准备事件
|
||||
handleRefreshReady() {
|
||||
this.refreshText = '松开刷新'
|
||||
this.refreshIconRevolve = true
|
||||
},
|
||||
// 重置刷新
|
||||
resetRefresh() {
|
||||
this.refreshText = '下拉刷新'
|
||||
this.refreshIconRevolve = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scroll-view {
|
||||
|
||||
&__content {
|
||||
|
||||
.list {
|
||||
&__item {
|
||||
height: 140rpx;
|
||||
margin: 0 10rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-left: 16rpx;
|
||||
height: 100%;
|
||||
width: 580rpx;
|
||||
|
||||
&__title {
|
||||
padding-bottom: 10rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
&__desc {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.refresh {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
|
||||
&__icon {
|
||||
transition: transform 0.25s ease-in-out;
|
||||
transform-origin: center center;
|
||||
&--revolve {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<view class="vip-component-scroll-view">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>自定义下拉刷新</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<multiple-options-demo
|
||||
:list="optionsList"
|
||||
></multiple-options-demo>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
|
||||
|
||||
export default {
|
||||
name: 'VipComponentsScrollView',
|
||||
components: { multipleOptionsDemo },
|
||||
data() {
|
||||
return {
|
||||
// 选项列表数据
|
||||
optionsList: [
|
||||
{ title: '普通下拉加载', desc: '使用默认的下拉样式', url: '/vipPage/components/scroll-view/basic/scroll-view' },
|
||||
{ title: '自定义下拉加载', desc: '通过传递的事件自定义下拉样式', url: '/vipPage/components/scroll-view/custom/scroll-view' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view class="vip-component-stack-swiper tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>StackSwiper堆叠轮播</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="基础使用">
|
||||
<tn-stack-swiper :list="list"></tn-stack-swiper>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自动轮播">
|
||||
<tn-stack-swiper :list="list" :autoplay="autoplay"></tn-stack-swiper>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="切换阈值">
|
||||
<tn-stack-swiper :list="list" :switchRate="50"></tn-stack-swiper>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="修改轮播图的宽高">
|
||||
<tn-stack-swiper :list="list" :height="300" width="80%"></tn-stack-swiper>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="垂直堆叠轮播">
|
||||
<view class="tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="navVerticalStackSwiper">演示(建议全屏使用)</tn-button>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentStackSwiper',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
autoplay: false,
|
||||
list: [
|
||||
{image: 'https://resource.tuniaokj.com/images/swiper/spring.jpg'},
|
||||
{image: 'https://resource.tuniaokj.com/images/swiper/summer.jpg'},
|
||||
{image: 'https://resource.tuniaokj.com/images/swiper/autumn.jpg'},
|
||||
{image: 'https://resource.tuniaokj.com/images/swiper/winter.jpg'}
|
||||
]
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// 一定要这样，否者会导致定时器不工作
|
||||
this.autoplay = true
|
||||
},
|
||||
onHide() {
|
||||
this.autoplay = false
|
||||
},
|
||||
methods: {
|
||||
navVerticalStackSwiper() {
|
||||
uni.navigateTo({
|
||||
url: '/vipPage/home/card/card'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-component-stack-swiper {
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<view class="vip-components-table__basic">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>基础表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="默认表格">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="调整宽度 方式1">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="index === 2 ? 16 : 8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="idx === 2 ? 16 : 8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="调整宽度 方式2">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :grow="index === 2" :width="['90px','160rpx','auto'][index]" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :grow="idx === 2" :width="['90px','160rpx','auto'][idx]" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="居中对齐">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" alignItems="center" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" alignItems="center" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="右对齐">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" alignItems="right" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" alignItems="right" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="居中对齐之文字右对齐">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" alignItems="center" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" alignItems="center" textAlign="right" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="去掉纵向边框">
|
||||
<tn-table :borderRight="true">
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :borderRight="false" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :borderRight="false" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="无边框">
|
||||
<tn-table borderWidth="0">
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义颜色">
|
||||
<tn-table borderColor="#FFFFFF">
|
||||
<tn-tr backgroundColor="transparent" borderColor="#FFFFFF" fontColor="#01BEFF" :fontSize="34">
|
||||
<tn-td v-for="(item, index) in header" :key="index" borderColor="#FFFFFF" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id" backgroundColor="transparent" borderColor="#FFFFFF">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" borderColor="#FFFFFF" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="文字超出隐藏">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :ellipsis="true" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsBasicTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
header: [
|
||||
{ title: '日期', key: 'date' },
|
||||
{ title: '金额', key: 'price' },
|
||||
{ title: '备注', key: 'note' }
|
||||
],
|
||||
listData: [
|
||||
{ id: 1, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 2, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 3, date: '20220303', price: '4000', note: '今天的销售额还行啦' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理点击事件
|
||||
handleClick(e, id) {
|
||||
this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__basic {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<view class="vip-components-table__basic">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>基础表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="默认表格">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td height="80rpx" :fontSize="30" :bold="true" fontColor="#01BEFF" alignItems="center">图鸟UI 2月开发进度</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr>
|
||||
<tn-td :span="8">页面模板</tn-td>
|
||||
<tn-td :span="16" :ellipsis="true" padding="0" :borderRight="false">
|
||||
<tn-tr>
|
||||
<tn-td :span="8">博客页面</tn-td>
|
||||
<tn-td :span="16" alignItems="right">2天</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr>
|
||||
<tn-td :span="8">炫酷首页</tn-td>
|
||||
<tn-td :span="16" alignItems="right">3天</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr borderWidth="0">
|
||||
<tn-td :span="8" borderWidth="1rpx">会员需求</tn-td>
|
||||
<tn-td :span="16" :ellipsis="true" padding="0" :borderRight="false">
|
||||
<tn-tr>
|
||||
<tn-td :span="12" borderWidth="1rpx">功能首页</tn-td>
|
||||
<tn-td :span="12" borderWidth="1rpx" alignItems="right">3天</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr borderWidth="0">
|
||||
<tn-td :span="12" borderWidth="1rpx">短视频页面</tn-td>
|
||||
<tn-td :span="12" borderWidth="1rpx" alignItems="right">3天</tn-td>
|
||||
</tn-tr>
|
||||
</tn-td>
|
||||
</tn-tr>
|
||||
</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr>
|
||||
<tn-td :span="8">组件开发</tn-td>
|
||||
<tn-td :span="16" :ellipsis="true" padding="0" :borderRight="false">
|
||||
<tn-tr>
|
||||
<tn-td :span="8">免费组件</tn-td>
|
||||
<tn-td :span="16" alignItems="right">2天</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr borderWidth="0">
|
||||
<tn-td :span="8" borderWidth="1rpx">会员组件</tn-td>
|
||||
<tn-td :span="16" alignItems="right" borderWidth="1rpx">3天</tn-td>
|
||||
</tn-tr>
|
||||
</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr>
|
||||
<tn-td :bold="true" :span="8">合计</tn-td>
|
||||
<tn-td alignItems="right" :span="16">16天</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsComplexTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__complex {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<view class="vip-components-table__fixed-column">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>固定列表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="表格叠加">
|
||||
<view style="position: relative;">
|
||||
<tn-table :borderLeft="false">
|
||||
<tn-tr>
|
||||
<tn-td
|
||||
v-for="(item, index) in header"
|
||||
:key="index"
|
||||
:bold="true"
|
||||
:span="8"
|
||||
:borderLeft="index === 0"
|
||||
:backgroundColor="index === 0 ? 'tn-bg-blue--light' : '#FFFFFF'"
|
||||
:hidden="index !== 0"
|
||||
:fixed="index === 0"
|
||||
:shrink="false"
|
||||
:keys="item.key"
|
||||
>{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td
|
||||
v-for="(data, idx) in header"
|
||||
:key="idx"
|
||||
:span="8"
|
||||
:borderLeft="idx === 0"
|
||||
:backgroundColor="idx === 0 ? 'tn-bg-blue--light' : '#FFFFFF'"
|
||||
:hidden="idx !== 0"
|
||||
:fixed="idx === 0"
|
||||
:shrink="false"
|
||||
:keys="data.key"
|
||||
@click="handleClick($event, item.id)"
|
||||
>{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
<scroll-view class="scroll-view" scroll-x>
|
||||
<tn-table :borderLeft="false">
|
||||
<tn-tr>
|
||||
<tn-td
|
||||
v-for="(item, index) in header"
|
||||
:key="index"
|
||||
:bold="true"
|
||||
:span="8"
|
||||
:hidden="index === 0"
|
||||
:shrink="false"
|
||||
:keys="item.key"
|
||||
>{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td
|
||||
v-for="(data, idx) in header"
|
||||
:key="idx"
|
||||
:span="8"
|
||||
:hidden="idx === 0"
|
||||
:shrink="false"
|
||||
:keys="data.key"
|
||||
@click="handleClick($event, item.id)"
|
||||
>{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="表格叠加-多列">
|
||||
<view style="position: relative;">
|
||||
<tn-table :borderLeft="false">
|
||||
<tn-tr>
|
||||
<tn-td
|
||||
v-for="(item, index) in header"
|
||||
:key="index"
|
||||
:bold="true"
|
||||
:span="[0,1].includes(index) ? 6 : 8"
|
||||
:borderLeft="index === 0"
|
||||
:backgroundColor="[0,1].includes(index) ? 'tn-bg-blue--light' : '#FFFFFF'"
|
||||
:hidden="![0,1].includes(index)"
|
||||
:fixed="[0,1].includes(index)"
|
||||
:shrink="false"
|
||||
:keys="item.key"
|
||||
>{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td
|
||||
v-for="(data, idx) in header"
|
||||
:key="idx"
|
||||
:span="[0,1].includes(idx) ? 6 : 8"
|
||||
:borderLeft="idx === 0"
|
||||
:backgroundColor="[0,1].includes(idx) ? 'tn-bg-blue--light' : '#FFFFFF'"
|
||||
:hidden="![0,1].includes(idx)"
|
||||
:fixed="[0,1].includes(idx)"
|
||||
:shrink="false"
|
||||
:keys="data.key"
|
||||
@click="handleClick($event, item.id)"
|
||||
>{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
<scroll-view class="scroll-view" scroll-x>
|
||||
<tn-table :borderLeft="false">
|
||||
<tn-tr>
|
||||
<tn-td
|
||||
v-for="(item, index) in header"
|
||||
:key="index"
|
||||
:bold="true"
|
||||
:span="[0,1].includes(index) ? 6 : 8"
|
||||
:hidden="[0,1].includes(index)"
|
||||
:shrink="false"
|
||||
:keys="item.key"
|
||||
>{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td
|
||||
v-for="(data, idx) in header"
|
||||
:key="idx"
|
||||
:span="[0,1].includes(idx) ? 6 : 8"
|
||||
:hidden="[0,1].includes(idx)"
|
||||
:shrink="false"
|
||||
:keys="data.key"
|
||||
@click="handleClick($event, item.id)"
|
||||
>{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsFixedColumnTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
header: [
|
||||
{ title: '日期', key: 'date' },
|
||||
{ title: '销售金额', key: 'salePrice' },
|
||||
{ title: '收益', key: 'income' },
|
||||
{ title: '顾客数量', key: 'customers' },
|
||||
{ title: '备注', key: 'note' }
|
||||
],
|
||||
listData: [
|
||||
{ id: 1, date: '20220301', salePrice: '1,000', income: '800', customers: '600', note: '今天的销售额一般般呀' },
|
||||
{ id: 2, date: '20220302', salePrice: '1,000,00', income: '8000', customers: '2000', note: '今天的销售额还不错嘛' },
|
||||
{ id: 3, date: '20220303', salePrice: '4000', income: '2000', customers: '1500', note: '今天的销售额还行啦' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理点击事件
|
||||
handleClick(e, id) {
|
||||
this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__fixed-column {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
max-width: 100vw;
|
||||
overflow: hidden;
|
||||
|
||||
.scroll-view {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<view class="vip-components-table__fixed-header">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>固定头部表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<view>
|
||||
<tn-table :borderTop="false" :borderLeft="false">
|
||||
<tn-tr :fixed="true" :borderTop="true" :top="vuex_custom_bar_height + 'px'">
|
||||
<tn-td v-for="(item, index) in header" :key="index" height="48rpx" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id" :margin="index === 0 ? '48rpx 0 0 0' : ''">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</view>
|
||||
|
||||
<demo-title title="配合scroll-view使用">
|
||||
<tn-table>
|
||||
<tn-tr left="32rpx" right="30rpx" width="auto">
|
||||
<tn-td v-for="(item, index) in header" :key="index" height="48rpx" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<scroll-view style="height: 400px" scroll-y>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</scroll-view>
|
||||
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsFixedHeaderTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
header: [
|
||||
{ title: '日期', key: 'date' },
|
||||
{ title: '金额', key: 'price' },
|
||||
{ title: '备注', key: 'note' }
|
||||
],
|
||||
listData: [
|
||||
{ id: 1, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 2, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 3, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 4, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 5, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 6, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 7, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 8, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 9, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 10, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 11, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 12, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 13, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 14, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 15, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 16, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 17, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 18, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 19, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 20, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 21, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 22, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 23, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 24, date: '20220303', price: '4000', note: '今天的销售额还行啦' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理点击事件
|
||||
handleClick(e, id) {
|
||||
this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__fixed-header {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<view class="vip-component-table tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>表格</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<multiple-options-demo
|
||||
:list="optionsList"
|
||||
></multiple-options-demo>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
|
||||
|
||||
export default {
|
||||
name: 'VipComponentsTable',
|
||||
components: { multipleOptionsDemo },
|
||||
data() {
|
||||
return {
|
||||
// 选项列表数据
|
||||
optionsList: [
|
||||
{ title: '普通表格', desc: '表格基本使用', url: '/vipPage/components/table/basic/index' },
|
||||
{ title: '斑马纹表格', desc: '带斑马纹的表格', url: '/vipPage/components/table/stripe/index' },
|
||||
{ title: '固定头部表格', desc: '固定头部表格', url: '/vipPage/components/table/fixed-header/index' },
|
||||
{ title: '固定列表格', desc: '固定列表格', url: '/vipPage/components/table/fixed-column/index' },
|
||||
{ title: '多表头表格', desc: '多表头表格', url: '/vipPage/components/table/multi-header/index' },
|
||||
{ title: '复杂表格', desc: '复杂表格', url: '/vipPage/components/table/complex/index' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<view class="vip-components-table__multi-header">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>多表头表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="多表头表格">
|
||||
<tn-table>
|
||||
<tn-tr backgroundColor="tn-bg-green--light">
|
||||
<tn-td :bold="true" :span="6">日期</tn-td>
|
||||
<tn-td :borderRight="true" :bold="true" :span="12" :ellipsis="true" padding="0">
|
||||
<tn-td :bold="true" :borderBottom="true" :borderRight="false" alignItems="center">金额</tn-td>
|
||||
<tn-tr borderWidth="0" backgroundColor="tn-bg-green--light">
|
||||
<tn-td :bold="true" alignItems="center" borderWidth="1rpx">金额</tn-td>
|
||||
<tn-td :bold="true" alignItems="center">收益</tn-td>
|
||||
</tn-tr>
|
||||
</tn-td>
|
||||
<tn-td :span="6">备注</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="6" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsMultiHeaderTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
header: [
|
||||
{ title: '日期', key: 'date' },
|
||||
{ title: '金额', key: 'salePrice' },
|
||||
{ title: '收益', key: 'income' },
|
||||
{ title: '备注', key: 'note' }
|
||||
],
|
||||
listData: [
|
||||
{ id: 1, date: '20220301', salePrice: '1,000', income: '800', note: '今天的销售额一般般呀' },
|
||||
{ id: 2, date: '20220302', salePrice: '1,000,00', income: '8000', note: '今天的销售额还不错嘛' },
|
||||
{ id: 3, date: '20220303', salePrice: '4000', income: '2000', note: '今天的销售额还行啦' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理点击事件
|
||||
handleClick(e, id) {
|
||||
this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__multi-header {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<view class="vip-components-table__stripe">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>斑马纹表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="表格样式-1">
|
||||
<tn-table borderWidth="0">
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id" :backgroundColor="index%2 ? '#FFFFFF' : '#E6E6E6'">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="表格样式-2">
|
||||
<tn-table borderWidth="0">
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id" :backgroundColor="index%2 ? 'tn-bg-green--light' : 'tn-bg-red--light'">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsStripeTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
header: [
|
||||
{ title: '日期', key: 'date' },
|
||||
{ title: '金额', key: 'price' },
|
||||
{ title: '备注', key: 'note' }
|
||||
],
|
||||
listData: [
|
||||
{ id: 1, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 2, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 3, date: '20220303', price: '4000', note: '今天的销售额还行啦' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理点击事件
|
||||
handleClick(e, id) {
|
||||
this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__stripe {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<view class="vip-component-tree-view tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>树形菜单</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="基础">
|
||||
<tn-tree-view :treeData="treeData" @click="onClick"></tn-tree-view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentTreeView',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
treeData: [{
|
||||
text: 'TuniaoUI',
|
||||
value: 1,
|
||||
image: '/vipPage/static/images/tree_view/folder.png',
|
||||
activeImage: '/vipPage/static/images/tree_view/folder_open.png',
|
||||
collapsed: false,
|
||||
children: [{
|
||||
text: 'tn-button',
|
||||
value: 10,
|
||||
image: '/vipPage/static/images/tree_view/folder.png',
|
||||
activeImage: '/vipPage/static/images/tree_view/folder_open.png',
|
||||
collapsed: false,
|
||||
children: [{
|
||||
text: 'tn-button.vue',
|
||||
value: 100,
|
||||
image: '/vipPage/static/images/tree_view/file_vue.png'
|
||||
},{
|
||||
text: 'tn-button.js',
|
||||
value: 101,
|
||||
image: '/vipPage/static/images/tree_view/file_js.png'
|
||||
},{
|
||||
text: 'tn-button.css',
|
||||
value: 102,
|
||||
image: '/vipPage/static/images/tree_view/file_css.png'
|
||||
}]
|
||||
},{
|
||||
text: 'tn-avatar',
|
||||
value: 11,
|
||||
image: '/vipPage/static/images/tree_view/folder.png',
|
||||
activeImage: '/vipPage/static/images/tree_view/folder_open.png',
|
||||
collapsed: true,
|
||||
children: [{
|
||||
text: 'tn-avatar.vue',
|
||||
value: 110,
|
||||
image: '/vipPage/static/images/tree_view/file_vue.png'
|
||||
},{
|
||||
text: 'tn-avatar.js',
|
||||
value: 111,
|
||||
image: '/vipPage/static/images/tree_view/file_js.png'
|
||||
},{
|
||||
text: 'tn-avatar.css',
|
||||
value: 112,
|
||||
image: '/vipPage/static/images/tree_view/file_css.png'
|
||||
}]
|
||||
},{
|
||||
text: 'tn-icon',
|
||||
value: 12,
|
||||
image: '/vipPage/static/images/tree_view/folder.png',
|
||||
activeImage: '/vipPage/static/images/tree_view/folder_open.png',
|
||||
collapsed: true,
|
||||
children: [{
|
||||
text: 'tn-icon.vue',
|
||||
value: 120,
|
||||
image: '/vipPage/static/images/tree_view/file_vue.png'
|
||||
},{
|
||||
text: 'tn-icon.js',
|
||||
value: 121,
|
||||
image: '/vipPage/static/images/tree_view/file_js.png'
|
||||
},{
|
||||
text: 'tn-icon.css',
|
||||
value: 122,
|
||||
image: '/vipPage/static/images/tree_view/file_css.png'
|
||||
}]
|
||||
},{
|
||||
text: 'tn-navbar',
|
||||
value: 13,
|
||||
image: '/vipPage/static/images/tree_view/folder.png',
|
||||
activeImage: '/vipPage/static/images/tree_view/folder_open.png',
|
||||
collapsed: true,
|
||||
children: [{
|
||||
text: 'tn-navbar.vue',
|
||||
value: 130,
|
||||
image: '/vipPage/static/images/tree_view/file_vue.png'
|
||||
},{
|
||||
text: 'tn-navbar.js',
|
||||
value: 131,
|
||||
image: '/vipPage/static/images/tree_view/file_js.png'
|
||||
},{
|
||||
text: 'tn-navbar.css',
|
||||
value: 132,
|
||||
image: '/vipPage/static/images/tree_view/file_css.png'
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
this.$tn.message.toast(`点击了${e.text}节点`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<view class="vip-component-waterfall">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>瀑布流</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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: {
|
||||
// 获取随机数据
|
||||
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']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-component-waterfall {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.product__item {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
margin: 0 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.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-left: 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 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<view class="template-card 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 fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<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/blogger_beibei.jpg')">
|
||||
<view class="logo-image">
|
||||
</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>
|
||||
</tn-nav-bar>
|
||||
|
||||
<!-- 内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<!-- 广告 -->
|
||||
<view class="swiper tn-padding" :style="{height: swiperContainerHeight + 'px'}">
|
||||
<tn-stack-swiper :list="list" direction="vertical" height="100%" :switchRate="10" :scaleRate="0.05" :translateRate="8"></tn-stack-swiper>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-home-smile">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-home.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">门店</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-watercup tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-buy.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">点餐</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-shop tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-shop.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">商城</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-ticket tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-list.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">订单</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-my tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-my.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'VipTemplateCard',
|
||||
components: {
|
||||
NavIndexButton
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// swiper容器高度
|
||||
swiperContainerHeight: 0,
|
||||
list: [{
|
||||
image: 'https://resource.tuniaokj.com/images/bless/bless-1.jpg'
|
||||
},
|
||||
{
|
||||
image: 'https://resource.tuniaokj.com/images/bless/bless-2.jpg'
|
||||
},
|
||||
{
|
||||
image: 'https://resource.tuniaokj.com/images/bless/bless-3.jpg'
|
||||
},
|
||||
{
|
||||
image: 'https://resource.tuniaokj.com/images/bless/bless-4.jpg'
|
||||
}
|
||||
],
|
||||
autoplay: false
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
this.initSwiperContainer()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
this.autoplay = true
|
||||
},
|
||||
onHide() {
|
||||
this.autoplay = false
|
||||
},
|
||||
methods: {
|
||||
// 初始化轮播图容器
|
||||
initSwiperContainer() {
|
||||
// 获取底部tabbar信息
|
||||
this._tGetRect('.tabbar').then((res) => {
|
||||
if (!res.height) {
|
||||
setTimeout(() => {
|
||||
this.initSwiperContainer()
|
||||
}, 10)
|
||||
return
|
||||
}
|
||||
// 获取系统信息
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.swiperContainerHeight = systemInfo.safeArea.height - res.height - 10
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 60%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 10rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx 60rpx 0 60rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
position: relative;
|
||||
margin-top: -15rpx;
|
||||
}
|
||||
|
||||
.logo-pic {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position: top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
/* 轮播图 start */
|
||||
.swiper {
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 轮播图 end */
|
||||
|
||||
/* 间隔线 start*/
|
||||
.tn-strip-bottom {
|
||||
width: 100%;
|
||||
border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
|
||||
}
|
||||
|
||||
/* 间隔线 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;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,786 @@
|
||||
<template>
|
||||
<view class="template-cool 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="top-backgroup">
|
||||
<image src='https://resource.tuniaokj.com/images/index_bg/tuniao2.jpg' mode='widthFix' class='backgroud-image'></image>
|
||||
</view>
|
||||
|
||||
<swiper class="card-swiper" :circular="true"
|
||||
:autoplay="true" duration="500" interval="18000" previous-margin="170rpx" next-margin="170rpx" @change="cardSwiper" style="margin-top: -280rpx;">
|
||||
<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="widthFix" v-if="item.type=='image'"></image>
|
||||
</view> -->
|
||||
<!-- <view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
|
||||
</view> -->
|
||||
|
||||
<view class="tnphone-white-min swiper-item wow fadeInLeft2">
|
||||
<view class="skin wow fadeInRight2">
|
||||
<view class="screen wow fadeInUp2">
|
||||
<!-- <view class="head">
|
||||
<text>{{item.name}}</text>
|
||||
</view> -->
|
||||
<view class="peak wow">
|
||||
<view class="sound"></view>
|
||||
<view class="lens"></view>
|
||||
</view>
|
||||
<!-- <view class="area-l">
|
||||
<view class="">
|
||||
<text class="tn-icon-all"></text>
|
||||
<text class="tn-icon-wifi tn-padding-left-xs"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="area-r">
|
||||
<view class="">
|
||||
<text class="tn-icon-light"></text>
|
||||
<text class="tn-icon-time tn-padding-left-xs"></text>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <view class="talk"></view> -->
|
||||
|
||||
<view class="image-banner">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- <swiper class="card-swiper" :circular="true"
|
||||
:autoplay="true" duration="500" interval="5000" @change="cardSwiper" style="margin-top: -80rpx;">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
|
||||
</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> -->
|
||||
|
||||
<!-- 方式4 start-->
|
||||
<view class="tn-flex">
|
||||
<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="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-discover-planet-fill tn-cool-color-icon4 tn-cool-bg-color-5"></view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark tn-text-center">
|
||||
<text class="tn-text-ellipsis">活动预约</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<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="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-image-text-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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<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="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-honor-fill tn-cool-color-icon4 tn-cool-bg-color-8"></view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark tn-text-center">
|
||||
<text class="tn-text-ellipsis">图鸟业务</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<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="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-team-fill 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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式4 end-->
|
||||
|
||||
<view class="tn-margin-top-lg">
|
||||
<view class="nav_title--wrap">
|
||||
<view class="nav_title tn-cool-bg-color-15">
|
||||
<text class="tn-icon-star tn-padding-right-sm"></text>
|
||||
群 / 友 / 作 / 品
|
||||
<text class="tn-icon-star tn-padding-left-sm"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='nav-list tn-margin-bottom tn-margin-top'>
|
||||
|
||||
<block v-for="(item, index) in navList" :key="index">
|
||||
<view class="nav-list-item tn-shadow-blur tn-cool-bg-image" :class="['tn-cool-bg-color-' + item.color]">
|
||||
<view class="nav-link">
|
||||
<view class='title'>{{ item.title }}</view>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<view :class="['tn-icon-' + item.icon]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<view class="nav_title--wrap">
|
||||
<view class="nav_title tn-cool-bg-color-15">
|
||||
<text class="tn-icon-star tn-padding-right-sm"></text>
|
||||
友 / 情 / 链 / 接
|
||||
<text class="tn-icon-star tn-padding-left-sm"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='nav-list tn-margin-bottom tn-margin-top'>
|
||||
|
||||
<block v-for="(item, index) in navList2" :key="index">
|
||||
<view class="nav-list-item tn-shadow-blur tn-cool-bg-image" :class="['tn-cool-bg-color-' + item.color]">
|
||||
<view class="nav-link">
|
||||
<view class='title'>{{ item.title }}</view>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<view :class="['tn-icon-' + item.icon]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
|
||||
|
||||
<view class="action">
|
||||
<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_tnnew.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<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> -->
|
||||
</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">
|
||||
<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 tn-cool-bg-color-7">
|
||||
<!-- <view class="tn-icon-logo-tuniao"></view> -->
|
||||
<view class="bar-circle">
|
||||
<image class="" src='https://resource.tuniaokj.com/images/logo/logo.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">
|
||||
<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> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">资讯</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<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> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-xl"></view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateCool',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro1.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro2.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro3.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro4.jpg',
|
||||
},{
|
||||
id: 4,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro5.jpg',
|
||||
},{
|
||||
id: 5,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro6.jpg',
|
||||
}],
|
||||
|
||||
navList: [
|
||||
{
|
||||
icon: 'menu-more',
|
||||
title: '税费计算器',
|
||||
color: '1'
|
||||
},
|
||||
{
|
||||
icon: 'menu-circle',
|
||||
title: '夜路行者',
|
||||
color: '5'
|
||||
},
|
||||
{
|
||||
icon: 'gloves',
|
||||
title: '全能时钟',
|
||||
color: '2'
|
||||
},
|
||||
{
|
||||
icon: 'topics',
|
||||
title: '轻小轻',
|
||||
color: '6'
|
||||
},
|
||||
{
|
||||
icon: 'circle-fill',
|
||||
title: '7he·kevin',
|
||||
color: '3'
|
||||
},
|
||||
{
|
||||
icon: 'tag',
|
||||
title: 'DataFuture',
|
||||
color: '7'
|
||||
},
|
||||
{
|
||||
icon: 'flower',
|
||||
title: '全能恋人',
|
||||
color: '4'
|
||||
},
|
||||
{
|
||||
icon: 'copy-fill',
|
||||
title: '全能圆周率',
|
||||
color: '8'
|
||||
}
|
||||
],
|
||||
navList2: [
|
||||
{
|
||||
icon: 'menu-circle',
|
||||
title: '西科小确幸',
|
||||
color: '5'
|
||||
},
|
||||
{
|
||||
icon: 'gloves',
|
||||
title: '峡谷飞机大战',
|
||||
color: '2'
|
||||
},
|
||||
{
|
||||
icon: 'topics',
|
||||
title: '签云全景',
|
||||
color: '6'
|
||||
},
|
||||
{
|
||||
icon: 'circle-fill',
|
||||
title: 'OA轻办公',
|
||||
color: '3'
|
||||
},
|
||||
{
|
||||
icon: 'tag',
|
||||
title: '啊叭叭叭',
|
||||
color: '7'
|
||||
},
|
||||
{
|
||||
icon: 'square',
|
||||
title: '博物馆',
|
||||
color: '4'
|
||||
},
|
||||
{
|
||||
icon: 'copy-fill',
|
||||
title: '全能文案',
|
||||
color: '8'
|
||||
},
|
||||
{
|
||||
icon: 'menu-more',
|
||||
title: '吱富宝',
|
||||
color: '1'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
/* .tnphone-white-min 细边框*/
|
||||
.tnphone-white-min {width: 380rpx; height: 800rpx; border-radius: 40rpx; background: #E9E5F3; padding: 7rpx; display: table; color: #333;
|
||||
box-sizing: border-box; box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0,0,0,0.15); margin: 70rpx auto; cursor: default; position: relative}
|
||||
.tnphone-white-min .skin {width: 100%; height: 100%; border-radius: 40rpx; background: #E9E5F3; padding: 10rpx;}
|
||||
.tnphone-white-min .screen {width: 100%; height: 100%; border-radius: 30rpx; background: #E9E5F3; position: relative; overflow: hidden}
|
||||
.tnphone-white-min .head {width: 100%; height: 90rpx; text-align: center; position: absolute; padding: 45rpx 15rpx 10rpx 15rpx;}
|
||||
.tnphone-white-min .peak {left: 22%;width: 56%; height: 27rpx; margin: -2rpx auto 0rpx; border-radius: 0 0 20rpx 20rpx; background: #E9E5F3; position: absolute}
|
||||
.tnphone-white-min .sound {width: 48rpx; height: 6rpx; border-radius: 15rpx; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24rpx; margin-top: -10rpx;
|
||||
box-shadow: 0rpx 4rpx 4rpx 0rpx #444 inset}
|
||||
.tnphone-white-min .lens {width: 6rpx; height: 6rpx; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34rpx; margin-top: -10rpx}
|
||||
.tnphone-white-min .talk {width: 50%; height: 6rpx; border-radius: 15rpx; background: rgba(0,0,0,.3); position: absolute; bottom: 8rpx; left: 50%; margin-left: -25%}
|
||||
.tnphone-white-min .area-l,.tnphone-white-min .area-r {width: 70rpx; height: 16rpx; position: absolute; top: 6rpx}
|
||||
.tnphone-white-min .area-l {left: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-left: 20rpx;}
|
||||
.tnphone-white-min .area-r {right: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-right: 20rpx;}
|
||||
.tnphone-white-min .fa-feed {float: left; font-size: 12rpx!important; transform:rotate(-45deg); margin-top: 4rpx; margin-right: 8rpx}
|
||||
.tnphone-white-min .fa-battery-full {float: left; font-size: 12rpx!important; margin-top: 6rpx}
|
||||
.tnphone-white-min .fa-chevron-left {float: left; margin-top: 4rpx}
|
||||
.tnphone-white-min .fa-cog {float: right; margin-top: 4rpx}
|
||||
.tnphone-white-min .btn01 {width: 3rpx; height: 28rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 105rpx; left: -3rpx}
|
||||
.tnphone-white-min .btn02 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 160rpx; left: -3rpx}
|
||||
.tnphone-white-min .btn03 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 230rpx; left: -3rpx}
|
||||
.tnphone-white-min .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
|
||||
|
||||
|
||||
/* 顶部背景图 start */
|
||||
.top-backgroup {
|
||||
height: 450rpx;
|
||||
z-index: -1;
|
||||
|
||||
.backgroud-image {
|
||||
width: 100%;
|
||||
height: 667rpx;
|
||||
// z-index: -1;
|
||||
}
|
||||
}
|
||||
/* 顶部背景图 end */
|
||||
|
||||
/* 轮播样机样式 start*/
|
||||
.card-swiper {
|
||||
height: 830rpx !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 260rpx !important;
|
||||
// left: 170rpx;
|
||||
// width: 380rpx !important;
|
||||
// left: 185rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 15rpx 90rpx 15rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
display: block;
|
||||
transform: scale(0.45);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: scale(0.65);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
height: 770rpx;
|
||||
// border: 1rpx solid red;
|
||||
}
|
||||
|
||||
/* 轮播指示点 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: #000;
|
||||
opacity: 0;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
top: -80rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 0;
|
||||
width: 30rpx;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/* 图标容器4 start */
|
||||
.tn-cool-color-icon4{
|
||||
// background-image: -webkit-linear-gradient(135deg, #ED1C24, #FECE12); 16
|
||||
// background-image: linear-gradient(135deg, #ED1C24, #FECE12);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-fill-color: transparent;
|
||||
}
|
||||
.icon4 {
|
||||
&__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: 110rpx;
|
||||
height: 110rpx;
|
||||
font-size: 55rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 标题 start */
|
||||
.nav_title {
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
&--wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 120rpx;
|
||||
font-size: 42rpx;
|
||||
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 */
|
||||
|
||||
/* 组件导航列表 start*/
|
||||
.nav-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0rpx 12rpx 0rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
/* 列表元素 start */
|
||||
.nav-list-item {
|
||||
padding: 95rpx 30rpx 5rpx 30rpx;
|
||||
border-radius: 12rpx;
|
||||
width: 45%;
|
||||
margin: 0 18rpx 40rpx;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
|
||||
/* 元素标题 start */
|
||||
.nav-link {
|
||||
font-size: 32rpx;
|
||||
text-transform: capitalize;
|
||||
padding: 0 0 10rpx 0;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
color: #FFFFFF;
|
||||
margin-top: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
/* 元素标题 end */
|
||||
|
||||
/* 元素图标 start */
|
||||
.icon {
|
||||
font-variant: small-caps;
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 50rpx;
|
||||
left: 37%;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
font-size: 50rpx;
|
||||
color: #FFFFFF;
|
||||
white-space: nowrap;
|
||||
opacity: 0.9;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
border-radius: 5000rpx;
|
||||
}
|
||||
/* 元素图标 end */
|
||||
}
|
||||
/* 列表元素 end */
|
||||
}
|
||||
/* 组件导航列表 end*/
|
||||
|
||||
/* 底部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/arc2.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,339 @@
|
||||
<template>
|
||||
<view class="template-food 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 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">
|
||||
<view class="tn-icon-search-list tn-text-bold" style="font-size: 50rpx;"></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">
|
||||
<text class="tn-text-bold tn-text-xxl">吃货北北</text>
|
||||
</view>
|
||||
</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">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
已打卡（5）
|
||||
</view>
|
||||
<view class="tn-margin" style="font-size: 50rpx;">
|
||||
<text class="tn-icon-write"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<swiper class="card-swiper tn-margin-top-sm" :circular="true"
|
||||
:autoplay="true" duration="500" interval="5000" previous-margin="75rpx" next-margin="75rpx" @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>
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-text-xxl tn-text-bold">{{item.name}}</view>
|
||||
<view class="tn-text-sm tn-text-bold tn-padding-top-xs">{{item.text}}</view>
|
||||
</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>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-home-smile">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/food-home.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">小吃</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-watercup tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/food-buy.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">奶茶</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-ticket tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/food-list.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">面包</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-my tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/food-my.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">雪糕</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplateFood',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '麻辣香锅',
|
||||
text: '广东人的微微辣',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/swiper3.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '太二酸菜鱼',
|
||||
text: '当然是酸菜鱼+酸菜罐子啦',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/swiper4.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '蛙小侠',
|
||||
text: '打卡蒜香牛蛙',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/swiper1.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '九毛九',
|
||||
text: '打卡大酱骨',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
name: '牛小灶',
|
||||
text: '冬天必打卡',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/swiper2.jpg',
|
||||
}],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 70%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 15rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
/* 轮播 start*/
|
||||
.card-swiper {
|
||||
height: 60vh !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 600rpx !important;
|
||||
// left: 75rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 20rpx 0rpx 20rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 45vh;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
transform: scale(1);
|
||||
transition: all 0.3s ease-in 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: scale(1);
|
||||
transition: all 0.3s ease-in 0s;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
padding: 20rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 140rpx;
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
transform: none;
|
||||
transition: all 0.4s ease 0s;
|
||||
overflow: hidden;
|
||||
color: #000000;
|
||||
background-color: rgba(255,255,255,1);
|
||||
box-shadow: 0rpx 30rpx 30rpx 0rpx rgba(0,0,245, 0.08);
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
transition: all 0.4s ease 0s;
|
||||
text-shadow: 0rpx 10rpx 20rpx rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.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{
|
||||
opacity: 0.8;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 50%;
|
||||
margin: 0 8rpx !important;
|
||||
position: relative;
|
||||
background-color: #3165CC;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
border: 2rpx solid #3165CC;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
/* 底部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;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<view class="vip-template-gyroscope-page">
|
||||
|
||||
<view style="color: #FFFFFF;position: absolute;top: 0;left: 0;" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view>x轴数据:{{acceleronmeterX}}</view>
|
||||
<view>y轴数据:{{acceleronmeterY}}</view>
|
||||
<view>z轴数据:{{acceleronmeterZ}}</view>
|
||||
</view>
|
||||
|
||||
<view class="background">
|
||||
<image src="https://resource.tuniaokj.com/images/gravity/1/5.png"></image>
|
||||
</view>
|
||||
|
||||
<view class="item__1 item__animation" :style="{transform: `translateX(${translateInfo[0].x}px)`}">
|
||||
<image src="https://resource.tuniaokj.com/images/gravity/1/1.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<view class="item__2 item__animation" :style="{transform: `translateX(${translateInfo[1].x}px)`}" @longtap.stop="toggleDirection">
|
||||
<image src="https://resource.tuniaokj.com/images/gravity/1/2.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<view class="item__3 item__animation" :style="{transform: `translateX(${translateInfo[2].x}px)`}">
|
||||
<image src="https://resource.tuniaokj.com/images/gravity/1/3.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<view class="item__4 item__animation" :style="{transform: `translateX(${translateInfo[3].x}px)`}">
|
||||
<image src="https://resource.tuniaokj.com/images/gravity/1/4.png" mode="widthFix"></image>
|
||||
</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: 'GravityPage1',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data() {
|
||||
return {
|
||||
acceleronmeterX: 0,
|
||||
acceleronmeterY: 0,
|
||||
acceleronmeterZ: 0,
|
||||
translateInfo: [
|
||||
{max: 60, min: -60, speed: 0.8, x: 0},
|
||||
{max: 45, min: -45, speed: 0.6, x: 0},
|
||||
{max: 33.75, min: -33.75, speed: 0.45, x: 0},
|
||||
{max: 25.31, min: -25.31, speed: 0.3375, x: 0}
|
||||
],
|
||||
positiveDirection: true
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.initAccelerometer()
|
||||
},
|
||||
onUnload() {
|
||||
this.stopAccelerometer()
|
||||
},
|
||||
methods: {
|
||||
// 初始化加速度并设置监听函数
|
||||
initAccelerometer() {
|
||||
uni.onAccelerometerChange(this.listenerAccelerometerData)
|
||||
},
|
||||
// 停止监听加速度数据
|
||||
stopAccelerometer() {
|
||||
uni.stopAccelerometer()
|
||||
},
|
||||
listenerAccelerometerData(res) {
|
||||
// console.log(res.x, res.y, res.z);
|
||||
this.acceleronmeterX = res.x.toFixed(2)
|
||||
this.acceleronmeterY = res.y.toFixed(2)
|
||||
this.acceleronmeterZ = res.z.toFixed(2)
|
||||
|
||||
// let acceleronmeterX = Math.abs(this.acceleronmeterX) > 0.05 ? this.acceleronmeterX < 0 ? -0.05 : 0.05 : this.acceleronmeterX
|
||||
|
||||
// if (acceleronmeterX < 0) {
|
||||
// for (let index in this.translateInfo) {
|
||||
// let item = this.translateInfo[index]
|
||||
// const x = item.speed * Math.abs(acceleronmeterX)
|
||||
// item.x = item.x + x > item.max ? item.max : item.x + x
|
||||
// this.$set(this.translateInfo, index, item)
|
||||
// }
|
||||
// } else if (acceleronmeterX > 0) {
|
||||
// for (let index in this.translateInfo) {
|
||||
// let item = this.translateInfo[index]
|
||||
// const x = item.speed * acceleronmeterX
|
||||
// item.x = item.x - x < item.min ? item.min : item.x - x
|
||||
// this.$set(this.translateInfo, index, item)
|
||||
// }
|
||||
// }
|
||||
|
||||
if (this.positiveDirection) {
|
||||
if (this.acceleronmeterX > 0) {
|
||||
// 手机向左倾斜，图像向右移动
|
||||
this.translateRightMove()
|
||||
} else if (this.acceleronmeterX < 0) {
|
||||
// 手机向右倾斜，图像向左移动
|
||||
this.translateLeftMove()
|
||||
}
|
||||
} else {
|
||||
if (this.acceleronmeterX < 0) {
|
||||
// 手机向左倾斜，图像向右移动
|
||||
this.translateRightMove()
|
||||
} else if (this.acceleronmeterX > 0) {
|
||||
// 手机向右倾斜，图像向左移动
|
||||
this.translateLeftMove()
|
||||
}
|
||||
}
|
||||
},
|
||||
// 长按切换移动方向
|
||||
toggleDirection() {
|
||||
this.positiveDirection = !this.positiveDirection
|
||||
},
|
||||
// 向左移动
|
||||
translateLeftMove() {
|
||||
for (let index in this.translateInfo) {
|
||||
let item = this.translateInfo[index]
|
||||
// 计算当前图片位置和允许移动的边距距离
|
||||
const distance = Math.abs(item.min - item.x)
|
||||
const x = item.speed * (distance / 2)
|
||||
item.x = item.x - x < item.min ? item.min : item.x - x
|
||||
this.$set(this.translateInfo, index, item)
|
||||
}
|
||||
},
|
||||
// 向右移动
|
||||
translateRightMove() {
|
||||
for (let index in this.translateInfo) {
|
||||
let item = this.translateInfo[index]
|
||||
// 计算当前图片位置和允许移动的边距距离
|
||||
const distance = Math.abs(item.max - item.x)
|
||||
const x = item.speed * (distance / 2)
|
||||
item.x = item.x + x > item.max ? item.max : item.x + x
|
||||
this.$set(this.translateInfo, index, item)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-template-gyroscope-page {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
&__1 {
|
||||
position: absolute;
|
||||
top: 210rpx;
|
||||
left: 84rpx;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
&__2 {
|
||||
position: absolute;
|
||||
top: 885rpx;
|
||||
left: 84rpx;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
&__3 {
|
||||
position: absolute;
|
||||
top: 138rpx;
|
||||
left: 88rpx;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&__4 {
|
||||
position: absolute;
|
||||
top: 390rpx;
|
||||
left: 84rpx;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__animation {
|
||||
transition: transform 1.6s ease;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,837 @@
|
||||
<template>
|
||||
<view class="template-link 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="top-backgroup">
|
||||
<image src='https://resource.tuniaokj.com/images/index_bg/mbe.png' mode='widthFix' class='backgroud-image'></image>
|
||||
</view>
|
||||
|
||||
<swiper class="card-swiper" :circular="true"
|
||||
:autoplay="true" duration="500" interval="18000" previous-margin="170rpx" next-margin="170rpx" @change="cardSwiper" style="margin-top: -280rpx;">
|
||||
<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="widthFix" v-if="item.type=='image'"></image>
|
||||
</view> -->
|
||||
<!-- <view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
|
||||
</view> -->
|
||||
|
||||
<view class="tnphone-white-min swiper-item wow fadeInLeft2">
|
||||
<view class="skin wow fadeInRight2">
|
||||
<view class="screen wow fadeInUp2">
|
||||
<!-- <view class="head">
|
||||
<text>{{item.name}}</text>
|
||||
</view> -->
|
||||
<view class="peak wow">
|
||||
<view class="sound"></view>
|
||||
<view class="lens"></view>
|
||||
</view>
|
||||
<!-- <view class="area-l">
|
||||
<view class="">
|
||||
<text class="tn-icon-all"></text>
|
||||
<text class="tn-icon-wifi tn-padding-left-xs"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="area-r">
|
||||
<view class="">
|
||||
<text class="tn-icon-light"></text>
|
||||
<text class="tn-icon-time tn-padding-left-xs"></text>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <view class="talk"></view> -->
|
||||
|
||||
<view class="image-banner">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- <swiper class="card-swiper" :circular="true"
|
||||
:autoplay="true" duration="500" interval="5000" @change="cardSwiper" style="margin-top: -80rpx;">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
|
||||
</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> -->
|
||||
|
||||
<!-- 方式4 start-->
|
||||
<view class="tn-flex">
|
||||
<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="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-discover-planet-fill tn-cool-color-icon4 tn-cool-bg-color-5"></view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark tn-text-center">
|
||||
<text class="tn-text-ellipsis">活动预约</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<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="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-image-text-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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<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="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-honor-fill tn-cool-color-icon4 tn-cool-bg-color-8"></view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark tn-text-center">
|
||||
<text class="tn-text-ellipsis">图鸟业务</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<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="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-team-fill 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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式4 end-->
|
||||
|
||||
<view class="tn-margin-top-lg">
|
||||
<view class="nav_title--wrap">
|
||||
<view class="nav_title tn-cool-bg-color-15">
|
||||
<text class="tn-icon-star tn-padding-right-sm"></text>
|
||||
群 / 友 / 作 / 品
|
||||
<text class="tn-icon-star tn-padding-left-sm"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex" style="padding: 12rpx;margin-top: 30rpx;">
|
||||
<view class="tn-flex-1">
|
||||
|
||||
<view class='nav-list'>
|
||||
<block v-for="(item, index) in linkList1" :key="index">
|
||||
<view class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-col-center tn-flex-row-between" :class="[getRandomCoolBg(index)]">
|
||||
<view class="nav-link">
|
||||
<view class='title tn-text-bold'>{{ item.nametools }}</view>
|
||||
<view class='title' style="opacity: 0;">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<view :class="['tn-icon-' + item.icon]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="tn-flex-1">
|
||||
|
||||
<view class='nav-list'>
|
||||
<block v-for="(item, index) in linkList2" :key="index">
|
||||
<view class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-col-center tn-flex-row-between" :class="[getRandomCoolBg(index)]">
|
||||
<view class="nav-link">
|
||||
<view class='title tn-text-bold'>{{ item.nametools }}</view>
|
||||
<view class='title' style="opacity: 0;">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<view :class="['tn-icon-' + item.icon]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
|
||||
|
||||
<view class="action">
|
||||
<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_tnnew.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<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> -->
|
||||
</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">
|
||||
<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 tn-cool-bg-color-7">
|
||||
<!-- <view class="tn-icon-logo-tuniao"></view> -->
|
||||
<view class="bar-circle">
|
||||
<image class="" src='https://resource.tuniaokj.com/images/logo/logo.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">
|
||||
<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> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">资讯</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<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> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-xl"></view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateLink',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro1.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro2.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro3.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro4.jpg',
|
||||
},{
|
||||
id: 4,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro5.jpg',
|
||||
},{
|
||||
id: 5,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro6.jpg',
|
||||
}],
|
||||
|
||||
linkList1: [{
|
||||
id: 0,
|
||||
icon: 'circle',
|
||||
appid: 'wxec92c15d9e9b6fbe',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '可以提供生日在圆周率的位数',
|
||||
nametools: '全能圆周率'
|
||||
}, {
|
||||
id: 1,
|
||||
icon: 'airplane',
|
||||
appid: 'wxaa8473e0378e72be',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '传承经典',
|
||||
nametools: '峡谷飞机大战'
|
||||
},{
|
||||
id: 2,
|
||||
icon: 'computer',
|
||||
appid: 'wxd76a25d4a4d04162',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '让工作更加井然有序',
|
||||
nametools: 'OA轻办公'
|
||||
}, {
|
||||
id: 3,
|
||||
icon: 'star',
|
||||
appid: 'wx46739fb0aae487e0',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '与可爱的文物一起互动吧',
|
||||
nametools: '博物馆'
|
||||
}, {
|
||||
id: 4,
|
||||
icon: 'money',
|
||||
appid: 'wxc9f4dd46f1c7c080',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '人多的地方谨慎使用',
|
||||
nametools: '吱富宝'
|
||||
} ,{
|
||||
id: 5,
|
||||
icon: 'moon',
|
||||
appid: 'wxf2bc749d99d35ea9',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '',
|
||||
nametools: '夜路使者'
|
||||
}, {
|
||||
id: 6,
|
||||
icon: 'flower',
|
||||
appid: 'wx916556bf29fb7c6a',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '烦心事情的终点',
|
||||
nametools: '轻小轻'
|
||||
}, {
|
||||
id: 7,
|
||||
icon: 'data',
|
||||
appid: 'wx12b3c68c969e9f25',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '你的私人健康管家数据看板',
|
||||
nametools: 'DataFuture'
|
||||
}
|
||||
],
|
||||
linkList2: [{
|
||||
id: 0,
|
||||
icon: 'count',
|
||||
appid: 'wxf030f3e0d92f7967',
|
||||
url: 'packages/root/index/index',
|
||||
hezuo: '可合作',
|
||||
name: '税费交多少',
|
||||
nametools: '税费计算器'
|
||||
}, {
|
||||
id: 1,
|
||||
icon: 'clock',
|
||||
appid: 'wxcf2fe6ac8f7e3970',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '',
|
||||
nametools: '全能时钟'
|
||||
}, {
|
||||
id: 2,
|
||||
icon: 'discover',
|
||||
appid: 'wx201efd3f86fa2ba7',
|
||||
url: 'pages/index/tabbar',
|
||||
hezuo: '可合作',
|
||||
name: '学习IT开发技能知识',
|
||||
nametools: '7he·Kevin'
|
||||
}, {
|
||||
id: 3,
|
||||
icon: 'light',
|
||||
appid: 'wx7170364858bba693',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '震动按摩身体',
|
||||
nametools: '全能恋人'
|
||||
}, {
|
||||
id: 4,
|
||||
icon: 'video',
|
||||
appid: 'wx7de7a77441d5266c',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可合作',
|
||||
name: '短视频去水印',
|
||||
nametools: '西科小确幸'
|
||||
}, {
|
||||
id: 5,
|
||||
icon: 'discover-planet',
|
||||
appid: 'wx9f77d65eb4eff65b',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可合作',
|
||||
name: '带上全景去旅行',
|
||||
nametools: '芊云全景'
|
||||
},{
|
||||
id: 6,
|
||||
icon: 'image',
|
||||
appid: 'wxa67567d479e76c0a',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '以图搜图',
|
||||
nametools: '啊叭叭叭'
|
||||
}, {
|
||||
id: 7,
|
||||
icon: 'edit-form',
|
||||
appid: 'wx46b5829489a33bb5',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '朋友圈文案大师',
|
||||
nametools: '全能文案'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
getRandomCoolBg() {
|
||||
return this.$tn.color.getRandomCoolBgClass()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
/* .tnphone-white-min 细边框*/
|
||||
.tnphone-white-min {width: 380rpx; height: 800rpx; border-radius: 40rpx; background: #E9E5F3; padding: 7rpx; display: table; color: #333;
|
||||
box-sizing: border-box; box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0,0,0,0.15); margin: 70rpx auto; cursor: default; position: relative}
|
||||
.tnphone-white-min .skin {width: 100%; height: 100%; border-radius: 40rpx; background: #E9E5F3; padding: 10rpx;}
|
||||
.tnphone-white-min .screen {width: 100%; height: 100%; border-radius: 30rpx; background: #E9E5F3; position: relative; overflow: hidden}
|
||||
.tnphone-white-min .head {width: 100%; height: 90rpx; text-align: center; position: absolute; padding: 45rpx 15rpx 10rpx 15rpx;}
|
||||
.tnphone-white-min .peak {left: 22%;width: 56%; height: 27rpx; margin: -2rpx auto 0rpx; border-radius: 0 0 20rpx 20rpx; background: #E9E5F3; position: absolute}
|
||||
.tnphone-white-min .sound {width: 48rpx; height: 6rpx; border-radius: 15rpx; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24rpx; margin-top: -10rpx;
|
||||
box-shadow: 0rpx 4rpx 4rpx 0rpx #444 inset}
|
||||
.tnphone-white-min .lens {width: 6rpx; height: 6rpx; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34rpx; margin-top: -10rpx}
|
||||
.tnphone-white-min .talk {width: 50%; height: 6rpx; border-radius: 15rpx; background: rgba(0,0,0,.3); position: absolute; bottom: 8rpx; left: 50%; margin-left: -25%}
|
||||
.tnphone-white-min .area-l,.tnphone-white-min .area-r {width: 70rpx; height: 16rpx; position: absolute; top: 6rpx}
|
||||
.tnphone-white-min .area-l {left: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-left: 20rpx;}
|
||||
.tnphone-white-min .area-r {right: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-right: 20rpx;}
|
||||
.tnphone-white-min .fa-feed {float: left; font-size: 12rpx!important; transform:rotate(-45deg); margin-top: 4rpx; margin-right: 8rpx}
|
||||
.tnphone-white-min .fa-battery-full {float: left; font-size: 12rpx!important; margin-top: 6rpx}
|
||||
.tnphone-white-min .fa-chevron-left {float: left; margin-top: 4rpx}
|
||||
.tnphone-white-min .fa-cog {float: right; margin-top: 4rpx}
|
||||
.tnphone-white-min .btn01 {width: 3rpx; height: 28rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 105rpx; left: -3rpx}
|
||||
.tnphone-white-min .btn02 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 160rpx; left: -3rpx}
|
||||
.tnphone-white-min .btn03 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 230rpx; left: -3rpx}
|
||||
.tnphone-white-min .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
|
||||
|
||||
|
||||
/* 顶部背景图 start */
|
||||
.top-backgroup {
|
||||
height: 450rpx;
|
||||
z-index: -1;
|
||||
|
||||
.backgroud-image {
|
||||
width: 100%;
|
||||
height: 667rpx;
|
||||
// z-index: -1;
|
||||
}
|
||||
}
|
||||
/* 顶部背景图 end */
|
||||
|
||||
/* 轮播样机样式 start*/
|
||||
.card-swiper {
|
||||
height: 830rpx !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 260rpx !important;
|
||||
// left: 170rpx;
|
||||
// width: 380rpx !important;
|
||||
// left: 185rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 15rpx 90rpx 15rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
display: block;
|
||||
transform: scale(0.45);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: scale(0.65);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
height: 770rpx;
|
||||
// border: 1rpx solid red;
|
||||
}
|
||||
|
||||
/* 轮播指示点 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: #000;
|
||||
opacity: 0;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
top: -80rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 0;
|
||||
width: 30rpx;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/* 图标容器4 start */
|
||||
.tn-cool-color-icon4{
|
||||
// background-image: -webkit-linear-gradient(135deg, #ED1C24, #FECE12); 16
|
||||
// background-image: linear-gradient(135deg, #ED1C24, #FECE12);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-fill-color: transparent;
|
||||
}
|
||||
.icon4 {
|
||||
&__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: 110rpx;
|
||||
height: 110rpx;
|
||||
font-size: 55rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 标题 start */
|
||||
.nav_title {
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
&--wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 120rpx;
|
||||
font-size: 42rpx;
|
||||
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 */
|
||||
|
||||
/* 组件导航列表 start*/
|
||||
.nav-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0rpx 18rpx 0rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
/* 列表元素 start */
|
||||
.nav-list-item {
|
||||
padding: 95rpx 30rpx 5rpx 30rpx;
|
||||
border-radius: 12rpx;
|
||||
width: 100%;
|
||||
margin: 0 0 40rpx;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
|
||||
/* 元素标题 start */
|
||||
.nav-link {
|
||||
margin: -80rpx 0 110rpx 0;
|
||||
font-size: 32rpx;
|
||||
text-transform: capitalize;
|
||||
padding: 0 0 10rpx 0;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
color: #FFFFFF;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
/* 元素标题 end */
|
||||
|
||||
/* 元素图标 start */
|
||||
.icon {
|
||||
font-variant: small-caps;
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
right: 50rpx;
|
||||
left: 5%;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
font-size: 50rpx;
|
||||
color: #FFFFFF;
|
||||
white-space: nowrap;
|
||||
opacity: 0.9;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
border-radius: 5000rpx;
|
||||
}
|
||||
/* 元素图标 end */
|
||||
}
|
||||
/* 列表元素 end */
|
||||
}
|
||||
/* 组件导航列表 end*/
|
||||
|
||||
/* 底部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/arc2.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,484 @@
|
||||
<template>
|
||||
<view class="template-mimicry">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<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>
|
||||
<view class="swiper-item2 image-banner">
|
||||
<image :src="item.pngurl" mode="heightFix" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-text-xxl tn-text-bold tn-color-white">{{item.name}}</view>
|
||||
<view class="tn-text-xl tn-text-bold tn-color-white tn-padding-top-xs">{{item.text}}</view>
|
||||
</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="keyboard-fixed">
|
||||
<view class="keyboard-box">
|
||||
<view class="keyboard">
|
||||
<view class="key s2 esc">??</view>
|
||||
<view class="key">1</view>
|
||||
<view class="key">2</view>
|
||||
<view class="key">3</view>
|
||||
<view class="key">4</view>
|
||||
<view class="key">5</view>
|
||||
<view class="key">6</view>
|
||||
<view class="key">7</view>
|
||||
<view class="key">8</view>
|
||||
<view class="key">9</view>
|
||||
<view class="key">0</view>
|
||||
<view class="key sub">-</view>
|
||||
<view class="key add">=</view>
|
||||
<view class="key s4 back">??</view>
|
||||
<view class="key s3 tab">??</view>
|
||||
<view class="key">Q</view>
|
||||
<view class="key">W</view>
|
||||
<view class="key">E</view>
|
||||
<view class="key">R</view>
|
||||
<view class="key">T</view>
|
||||
<view class="key">Y</view>
|
||||
<view class="key">U</view>
|
||||
<view class="key">I</view>
|
||||
<view class="key">O</view>
|
||||
<view class="key">P</view>
|
||||
<view class="key openbracket">[</view>
|
||||
<view class="key closebracket">]</view>
|
||||
<view class="key s3 pipe">\</view>
|
||||
<view class="key s4 cap">??</view>
|
||||
<view class="key">A</view>
|
||||
<view class="key">S</view>
|
||||
<view class="key">D</view>
|
||||
<view class="key dotted">F</view>
|
||||
<view class="key">G</view>
|
||||
<view class="key">H</view>
|
||||
<view class="key dotted">J</view>
|
||||
<view class="key">K</view>
|
||||
<view class="key">L</view>
|
||||
<view class="key semi">;</view>
|
||||
<view class="key comma">,</view>
|
||||
<view class="key s4 enter">??</view>
|
||||
<view class="key s5 shift">??</view>
|
||||
<view class="key">Z</view>
|
||||
<view class="key">X</view>
|
||||
<view class="key">C</view>
|
||||
<view class="key">V</view>
|
||||
<view class="key">B</view>
|
||||
<view class="key">N</view>
|
||||
<view class="key">M</view>
|
||||
<view class="key openangular">,</view>
|
||||
<view class="key closeangular">.</view>
|
||||
<view class="key slash">/</view>
|
||||
<view class="key s5 shift up">??</view>
|
||||
<view class="key s3 control">☕</view>
|
||||
<view class="key s3 win">??</view>
|
||||
<view class="key s3 alt">⭐️</view>
|
||||
<view class="key s12 space"></view>
|
||||
<view class="key s3 alt">⭐️</view>
|
||||
<view class="key s2 fn left">??</view>
|
||||
<view class="key s2 fn down">????</view>
|
||||
<view class="key s2 control right">☕</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateMimicry',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '总有你想不到的创意',
|
||||
text: '海量分享',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/fullbg4.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '寻找一起成长的小伙伴',
|
||||
text: '愉快玩耍',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/fullbg5.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d4.png'
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '更多彩蛋等你探索',
|
||||
text: '酷炫多彩',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/fullbg4.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d5.png'
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '商业合作请联系作者',
|
||||
text: '免费开源',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/fullbg5.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d6.png'
|
||||
}],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
.template-mimicry{
|
||||
background: #d8dee8;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.keyboard-fixed{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
.keyboard-box{
|
||||
margin: 0 auto;
|
||||
padding: 30rpx 0;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
// background: radial-gradient(circle at top left, #d8dee8 30%, #c2ccdb);
|
||||
}
|
||||
|
||||
.keyboard {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(30, 2.3vw);
|
||||
grid-template-rows: repeat(5, 3.25vh);
|
||||
grid-gap: 0.95vw;
|
||||
// background: #c2ccdb;
|
||||
padding: 1.73vh 1.73vw;
|
||||
// border-radius: 1.27vw;
|
||||
// box-shadow: -0.32vw -0.32vw 0.95vw #f3f5f8, 0.32vw 0.32vw 0.63vw #c2ccdb;
|
||||
}
|
||||
.keyboard .key {
|
||||
border-radius: 0.76vw;
|
||||
grid-column: auto/span 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.475vw;
|
||||
font-size: 1.9vw;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
background: #d8dee8;
|
||||
box-shadow: -0.32vw -0.32vw 0.95vw #f3f5f8, 0.32vw 0.32vw 0.63vw #c2ccdb;
|
||||
transition: all 100ms cubic-bezier(0.09, 0.32, 0.34, 2);
|
||||
user-select: none;
|
||||
}
|
||||
.keyboard .key:hover,
|
||||
.keyboard .key.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #f6f8fa, inset 0.32vw 0.32vw 0.63vw #c2ccdb;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #f7f9fa, 0 0 15px #f7f9fa, 0 0 20px #f7f9fa;
|
||||
}
|
||||
.keyboard .key.dotted {
|
||||
position: relative;
|
||||
}
|
||||
.keyboard .key.dotted::before {
|
||||
content: '_';
|
||||
font-weight: bold;
|
||||
color: #b5c0d2;
|
||||
position: absolute;
|
||||
top: 70%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.keyboard .key.esc {
|
||||
background: #ed4c67;
|
||||
color: #fbdbe1;
|
||||
}
|
||||
.keyboard .key.esc:hover,
|
||||
.keyboard .key.esc.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #f38e9f, inset 0.32vw 0.32vw 0.63vw #c71432;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #f59eac, 0 0 15px #f59eac, 0 0 20px #f59eac;
|
||||
}
|
||||
.keyboard .key.back {
|
||||
background: #d63031;
|
||||
color: #f7d6d6;
|
||||
}
|
||||
.keyboard .key.back:hover,
|
||||
.keyboard .key.back.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #e57c7d, inset 0.32vw 0.32vw 0.63vw #991e1f;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #e88f90, 0 0 15px #e88f90, 0 0 20px #e88f90;
|
||||
}
|
||||
.keyboard .key.shift {
|
||||
background: #1e90ff;
|
||||
color: #d2e9ff;
|
||||
}
|
||||
.keyboard .key.shift:hover,
|
||||
.keyboard .key.shift.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #71b9ff, inset 0.32vw 0.32vw 0.63vw #0065c8;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #85c3ff, 0 0 15px #85c3ff, 0 0 20px #85c3ff;
|
||||
}
|
||||
.keyboard .key.control {
|
||||
background: #be2edd;
|
||||
color: #f2d5f8;
|
||||
}
|
||||
.keyboard .key.control:hover,
|
||||
.keyboard .key.control.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #d57be9, inset 0.32vw 0.32vw 0.63vw #891aa1;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #db8eec, 0 0 15px #db8eec, 0 0 20px #db8eec;
|
||||
}
|
||||
.keyboard .key.win {
|
||||
background: #f7b731;
|
||||
color: #fdf1d6;
|
||||
}
|
||||
.keyboard .key.win:hover,
|
||||
.keyboard .key.win.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #fad17d, inset 0.32vw 0.32vw 0.63vw #c78908;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #fad890, 0 0 15px #fad890, 0 0 20px #fad890;
|
||||
}
|
||||
.keyboard .key.alt {
|
||||
background: #5352ed;
|
||||
color: #dddcfb;
|
||||
}
|
||||
.keyboard .key.alt:hover,
|
||||
.keyboard .key.alt.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #9291f3, inset 0.32vw 0.32vw 0.63vw #1615ca;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #a2a1f5, 0 0 15px #a2a1f5, 0 0 20px #a2a1f5;
|
||||
}
|
||||
.keyboard .key.fn {
|
||||
background: #26de81;
|
||||
color: #d4f8e6;
|
||||
}
|
||||
.keyboard .key.fn:hover,
|
||||
.keyboard .key.fn.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #76eaaf, inset 0.32vw 0.32vw 0.63vw #189e5a;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #8aedbb, 0 0 15px #8aedbb, 0 0 20px #8aedbb;
|
||||
}
|
||||
.keyboard .key.cap {
|
||||
background: #ee5a24;
|
||||
color: #fcded3;
|
||||
position: relative;
|
||||
}
|
||||
.keyboard .key.cap:hover,
|
||||
.keyboard .key.cap.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #f49675, inset 0.32vw 0.32vw 0.63vw #b23a0e;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #f6a588, 0 0 15px #f6a588, 0 0 20px #f6a588;
|
||||
}
|
||||
.keyboard .key.cap::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0.5vw;
|
||||
height: 0.5vw;
|
||||
background: #f6ac91;
|
||||
top: 1vw;
|
||||
right: 1vw;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.keyboard .key.cap.on::before {
|
||||
background: #fbded3;
|
||||
box-shadow: 0 0 0.5vw 0.2vw rgba(255,255,255,0.8);
|
||||
}
|
||||
.keyboard .key.tab {
|
||||
background: #12cbc4;
|
||||
color: #cafaf8;
|
||||
}
|
||||
.keyboard .key.tab:hover,
|
||||
.keyboard .key.tab.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #5aede7, inset 0.32vw 0.32vw 0.63vw #0d8e89;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #72f0eb, 0 0 15px #72f0eb, 0 0 20px #72f0eb;
|
||||
}
|
||||
.keyboard .key.enter {
|
||||
background: #fdcb6e;
|
||||
color: #fff5e2;
|
||||
}
|
||||
.keyboard .key.enter:hover,
|
||||
.keyboard .key.enter.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #fddea3, inset 0.32vw 0.32vw 0.63vw #fba403;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #fde2b0, 0 0 15px #fde2b0, 0 0 20px #fde2b0;
|
||||
}
|
||||
.keyboard .key.s2 {
|
||||
font-size: 1.73vw;
|
||||
grid-column: auto/span 2;
|
||||
}
|
||||
.keyboard .key.s3 {
|
||||
font-size: 1.73vw;
|
||||
grid-column: auto/span 3;
|
||||
}
|
||||
.keyboard .key.s4 {
|
||||
font-size: 1.73vw;
|
||||
grid-column: auto/span 4;
|
||||
}
|
||||
.keyboard .key.s5 {
|
||||
font-size: 1.73vw;
|
||||
grid-column: auto/span 5;
|
||||
}
|
||||
.keyboard .key.s6 {
|
||||
font-size: 1.73vw;
|
||||
grid-column: auto/span 6;
|
||||
}
|
||||
.keyboard .key.s12 {
|
||||
font-size: 1.73vw;
|
||||
grid-column: auto/span 12;
|
||||
}
|
||||
.keyboard .key[on-shift] {
|
||||
font-size: 1.461538461538461vw;
|
||||
justify-items: center;
|
||||
}
|
||||
.keyboard .key[on-shift]::before {
|
||||
content: attr(on-shift);
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 轮播视觉差 start */
|
||||
.card-swiper {
|
||||
height: 600rpx !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 750rpx !important;
|
||||
left: 0rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 0rpx 120rpx 0rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 0rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item2 {
|
||||
margin-top: -340rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 0rpx;
|
||||
transform: translate(340rpx, 20rpx) scale(0.5, 0.5);
|
||||
transition: all 0.6s ease 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item2 {
|
||||
margin-top: -340rpx;
|
||||
width: 100%;
|
||||
transform: translate(300rpx, 0rpx) scale(0.8, 0.8);
|
||||
transition: all 0.6s ease 0s;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -320rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(0rpx, -40rpx) scale(0.7, 0.7);
|
||||
transition: all 0.6s ease 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
margin-top: -380rpx;
|
||||
width: 100%;
|
||||
transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 0s;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 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: #FFF;
|
||||
opacity: 0.4;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
left: -270rpx;
|
||||
top: -180rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 30rpx;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<view class="template-moon 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 fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<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/logo/logo2.png')">
|
||||
<view class="logo-image">
|
||||
</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>
|
||||
</tn-nav-bar>
|
||||
|
||||
|
||||
|
||||
<view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
Hi，北北欢迎你吖
|
||||
</view>
|
||||
<view class="tn-margin" style="font-size: 50rpx;">
|
||||
<text class="tn-icon-menu-more"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<swiper class="card-swiper tn-margin-top-lg" :circular="true"
|
||||
:autoplay="true" duration="500" interval="5000" previous-margin="60rpx" next-margin="60rpx" @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>
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-text-xxl tn-text-bold tn-color-white">{{item.name}}</view>
|
||||
<view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-xs">{{item.text}}</view>
|
||||
</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>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-level">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-black">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-camera-fill tn-color-white">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
|
||||
</view>
|
||||
<!-- <view class="tn-color-gray">发布</view> -->
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-signpost tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">导向</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplateMoon',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '图鸟UI 她来了',
|
||||
text: '开启全新的探索之旅',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '欢迎加入东东们',
|
||||
text: '如果你也有不错的作品',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '一起玩转scss',
|
||||
text: '用最少的代码做最骚的效果',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '微信号 tnkewo',
|
||||
text: '商业合作请联系作者',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
name: '努力成为大佬',
|
||||
text: '一起加油吖',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 60%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 15rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
/* 轮播图片入口 start*/
|
||||
.card-swiper {
|
||||
height: 67vh !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 630rpx !important;
|
||||
// left: 60rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 0rpx 90rpx 0rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
transform: scale(0.9);
|
||||
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;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -180rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(0rpx, -40rpx) scale(0.7, 0.7);
|
||||
transition: all 0.6s ease 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
margin-top: -150rpx;
|
||||
width: 100%;
|
||||
transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 0s;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0rpx 30rpx 60rpx 0rpx rgba(116,10,250, 0.08);
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
display:flex;
|
||||
margin-top: -50rpx;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
background-color: #3165CC;
|
||||
opacity: 0.4;
|
||||
width: 15rpx;
|
||||
height: 15rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 35rpx;
|
||||
background-color: #3165CC;
|
||||
}
|
||||
|
||||
/* 底部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;
|
||||
}
|
||||
|
||||
.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: -30rpx auto 20rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #01BEFF;
|
||||
width: 90rpx !important;
|
||||
height: 90rpx !important;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: inline-block;
|
||||
margin: 15rpx auto 15rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,482 @@
|
||||
<template>
|
||||
<view class="template-movie 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 fixed :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/logo/logo2.png')">
|
||||
<view class="logo-image">
|
||||
</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">
|
||||
<view class="custom-nav__search__icon tn-icon-search"></view>
|
||||
<view class="custom-nav__search__text tn-padding-left-xs">搜索 镇魂街</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
|
||||
|
||||
<view class="top-backgroup">
|
||||
<image src='https://resource.tuniaokj.com/images/index_bg/tuniao3.jpg' mode='widthFix' class='backgroud-image'></image>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="" style="margin: -250rpx 0 120rpx 0;">
|
||||
<tn-notice-bar :show="closeNoticeShow" :list="list" :closeBtn="true" @close="closeNoticeShow = false"></tn-notice-bar>
|
||||
<view class="tn-margin-top-sm">
|
||||
<tn-sticky :offsetTop="10" :customNavHeight="vuex_custom_bar_height">
|
||||
<tn-tabs :list="fixedList" :current="current" activeColor="#000" bold="true" :fontSize="32" :badgeOffset="[20, 50]" @change="tabChange"></tn-tabs>
|
||||
</tn-sticky>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<swiper class="card-swiper" :circular="true"
|
||||
:autoplay="true" duration="500" interval="5000" previous-margin="200rpx" next-margin="200rpx" @change="cardSwiper" style="margin-top: -80rpx;">
|
||||
<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>
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-text-xxl tn-text-bold">{{item.name}}</view>
|
||||
<view class="tn-text-sm tn-text-bold tn-padding-top-xs">{{item.text}}</view>
|
||||
</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>
|
||||
|
||||
<!-- 方式16 start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-top-xl tn-padding-sm">
|
||||
<block v-for="(item, index) in swiperList" :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-movie">
|
||||
</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-->
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action bar-left">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-discover-fill tn-color-aquablue">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-black">首页</view>
|
||||
</view>
|
||||
<view class="action bar-center">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-vip-fill tn-color-white">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
|
||||
</view>
|
||||
<!-- <view class="tn-color-gray">发布</view> -->
|
||||
</view>
|
||||
<view class="action bar-right">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-eye-fill tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tn.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: 'TemplateMovie',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
list: [
|
||||
'电影资源仅提供介绍，请上拥有版权的APP观看',
|
||||
'排行仅为个人喜欢，不喜勿喷',
|
||||
'抓住那只猪科技有限公司出品',
|
||||
'今天想找个人一起去看电影'
|
||||
],
|
||||
closeNoticeShow: true,
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '铁甲钢拳',
|
||||
text: '342人想看',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '龙和雀斑公主',
|
||||
text: '342人想看',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '哈尔的移动城堡',
|
||||
text: '342人想看',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '机器人总动员',
|
||||
text: '342人想看',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
name: '功勋·于敏',
|
||||
text: '342人想看',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/content_1.jpeg',
|
||||
}, {
|
||||
id: 5,
|
||||
type: 'image',
|
||||
name: '心欲呐喊',
|
||||
text: '342人想看',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
|
||||
}, {
|
||||
id: 6,
|
||||
type: 'image',
|
||||
name: '白日梦想家',
|
||||
text: '332人想看',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
|
||||
}, {
|
||||
id: 7,
|
||||
type: 'image',
|
||||
name: '摔跤吧爸爸',
|
||||
text: '342人想看',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
|
||||
}],
|
||||
current: 0,
|
||||
fixedList: [
|
||||
{name: '推荐'},
|
||||
{name: '电影'},
|
||||
{name: '综艺'},
|
||||
{name: '动漫'},
|
||||
{name: '电视剧'},
|
||||
{name: '纪录片', count: ''},
|
||||
{name: '其他', count: ''},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
// tab选项卡切换
|
||||
tabChange(index) {
|
||||
this.current = index
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 60%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 10rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx 60rpx 0 60rpx;
|
||||
font-size: 24rpx;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #080808;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
/* 顶部背景图 start */
|
||||
.top-backgroup {
|
||||
height: 450rpx;
|
||||
z-index: -1;
|
||||
|
||||
.backgroud-image {
|
||||
width: 100%;
|
||||
height: 667rpx;
|
||||
// z-index: -1;
|
||||
}
|
||||
}
|
||||
/* 顶部背景图 end */
|
||||
/* 轮播样机样式 start*/
|
||||
.card-swiper {
|
||||
height: 560rpx !important;
|
||||
border-radius: 0 0 50% 50%/0 0 10% 10%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 350rpx !important;
|
||||
// left: 200rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 15rpx 20rpx 15rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 25rpx;
|
||||
transform: scale(0.9) translate(0rpx,60rpx);
|
||||
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;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -120rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(0rpx, 0rpx) scale(0.7, 0.7);
|
||||
transition: all 0.4s ease 0s;
|
||||
overflow: hidden;
|
||||
color: #000000;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
margin-top: -150rpx;
|
||||
padding-left: 30rpx;
|
||||
width: 100%;
|
||||
transform: translate(-20rpx, 20rpx) scale(0.9, 0.9);
|
||||
transition: all 0.4s ease 0s;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0rpx 10rpx 30rpx rgba(0,0,0,0.3);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// box-shadow: 0rpx 30rpx 60rpx 0rpx rgba(116,10,250, 0.06);
|
||||
}
|
||||
.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: #000;
|
||||
opacity: 0;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
top: -80rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 0;
|
||||
width: 30rpx;
|
||||
background-color: #000;
|
||||
}
|
||||
/* 效果布局 start*/
|
||||
.image-movie{
|
||||
width: 200rpx;
|
||||
height: 300rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-pic{
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
// 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;
|
||||
padding: 50rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.bar-left{
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 0rpx 95% 0rpx 0rpx / 0rpx 94% 0rpx 0rpx;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.bar-center{
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes suspension {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-0.8rem);
|
||||
}
|
||||
}
|
||||
|
||||
.bar-right{
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 95% 0rpx 0rpx 0rpx / 94% 0rpx 0rpx 0rpx;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.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: -30rpx auto 20rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #3646FF;
|
||||
width: 90rpx !important;
|
||||
height: 90rpx !important;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(54, 70, 255, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: inline-block;
|
||||
margin: 15rpx auto 15rpx;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,486 @@
|
||||
<template>
|
||||
<view class="template-plan 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 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">
|
||||
<view class="tn-icon-menu-more" style="font-size: 50rpx;"></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">
|
||||
<text class="tn-text-bold tn-text-xxl">北北小目标</text>
|
||||
</view>
|
||||
</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">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
未进行（5）
|
||||
</view>
|
||||
<view class="tn-margin" style="font-size: 50rpx;">
|
||||
<text class="tn-icon-send"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<swiper class="card-swiper tn-margin-top-sm" :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>
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-text-xxl tn-text-bold">{{item.name}}</view>
|
||||
<view class="tn-text-sm tn-text-bold tn-padding-top-xs">{{item.text}}</view>
|
||||
</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="" style="margin-top: -30rpx;">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
今日目标
|
||||
</view>
|
||||
<view class="tn-margin" style="font-size: 50rpx;">
|
||||
<text class="tn-icon-edit-form"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-margin-left tn-text-sm tn-color-gray" style="margin-top: -25rpx;">
|
||||
<text>这是今日目标，请干巴爹吖</text>
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<view class="tn-plan-content tn-margin tn-text-justify">
|
||||
<view v-for="(item,index) in planList" :key="index" class="tn-plan-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-plan-content__item--prefix">#</text> {{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-clear-float tn-padding-top-lg">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
历史记录
|
||||
</view>
|
||||
<!-- <view class="tn-margin" style="font-size: 50rpx;">
|
||||
<text class="tn-icon-right"></text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-margin-left tn-text-sm tn-color-gray" style="margin-top: -25rpx;">
|
||||
<text>完成的目标，当然要记录啦</text>
|
||||
</view>
|
||||
|
||||
<view class="tn-margin-top-lg" style="margin-bottom: 50rpx">
|
||||
<view class="tn-plan-content2 tn-margin tn-text-justify">
|
||||
<view v-for="(item,index) in planList2" :key="index" class="tn-plan-content2__item tn-margin-right tn-round tn-text-sm tn-text-bold tn-bg-gray--light tn-color-black">
|
||||
<text class="tn-plan-content2__item--prefix">#</text> {{item.name}}
|
||||
<text class="tn-float-right">{{item.time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" style="height: 10rpx;">
|
||||
</view>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-home-smile">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/a1.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-discover">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/k2.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">圈子</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-image-text">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/i2.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">案例</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-my">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/d2.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: 'TemplatePlan',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '看书20分钟',
|
||||
text: '静下心看《读者》',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '创新一个轮播',
|
||||
text: '在图鸟UI新增创意轮播',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '坚持早起',
|
||||
text: '早上9点前起床',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '和群友吹水',
|
||||
text: '技术的友情永不过时',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
name: '散步找创意',
|
||||
text: '每天散步30分钟',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}],
|
||||
planList: [{
|
||||
name: '看书',
|
||||
color: 'red',
|
||||
time: '2021-12-13 06:20',
|
||||
}, {
|
||||
name: '早起',
|
||||
color: 'cyan',
|
||||
time: '8:37',
|
||||
}, {
|
||||
name: '做30个深蹲',
|
||||
color: 'blue',
|
||||
}, {
|
||||
name: '散步',
|
||||
color: 'green',
|
||||
}, {
|
||||
name: '写新的轮播效果',
|
||||
color: 'orange',
|
||||
}, {
|
||||
name: '吃早餐',
|
||||
color: 'purplered',
|
||||
}, {
|
||||
name: '陪猫猫玩',
|
||||
color: 'purple',
|
||||
}, {
|
||||
name: '睡午觉',
|
||||
color: 'brown',
|
||||
}, {
|
||||
name: '干饭饭',
|
||||
color: 'yellowgreen',
|
||||
}, {
|
||||
name: '蔡猪北',
|
||||
color: 'grey',
|
||||
}],
|
||||
planList2: [{
|
||||
name: '陪猫猫玩',
|
||||
time: '2021-12-13 22:45',
|
||||
},{
|
||||
name: '写新的轮播效果',
|
||||
time: '2021-12-13 20:20',
|
||||
}, {
|
||||
name: '散步',
|
||||
time: '2021-12-13 18:11',
|
||||
}, {
|
||||
name: '睡午觉',
|
||||
time: '2021-12-13 13:42',
|
||||
}, {
|
||||
name: '干饭饭',
|
||||
time: '2021-12-13 12:14',
|
||||
}, {
|
||||
name: '看书',
|
||||
time: '2021-12-13 10:21',
|
||||
}, {
|
||||
name: '吃早餐',
|
||||
time: '2021-12-13 08:56',
|
||||
}, {
|
||||
name: '做30个深蹲',
|
||||
time: '2021-12-13 08:40',
|
||||
}, {
|
||||
name: '早起',
|
||||
time: '2021-12-13 08:22',
|
||||
}, {
|
||||
name: '蔡北北测试',
|
||||
time: '2021-12-12 22:06',
|
||||
}],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
.template-plan{
|
||||
}
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 70%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 15rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
/* 轮播 start*/
|
||||
.card-swiper {
|
||||
height: 570rpx !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 450rpx !important;
|
||||
left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 0rpx 80rpx 0rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
transform: scale(0.7) translate(0rpx,-104rpx);
|
||||
transition: all 0.3s ease-in 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: none;
|
||||
transition: all 0.3s ease-in 0s;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -120rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(20rpx, -30rpx) scale(0.7, 0.7);
|
||||
transition: all 0.4s ease 0s;
|
||||
overflow: hidden;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
margin-top: -150rpx;
|
||||
padding-left: 30rpx;
|
||||
width: 100%;
|
||||
transform: translate(-20rpx, 20rpx) scale(0.9, 0.9);
|
||||
transition: all 0.4s ease 0s;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0rpx 10rpx 20rpx rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0rpx 30rpx 60rpx 0rpx rgba(116,10,250, 0.15);
|
||||
// border: 1rpx solid red;
|
||||
}
|
||||
.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: #000;
|
||||
opacity: 0.4;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
right: -270rpx;
|
||||
top: -100rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 10rpx;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/* 计划内容 start*/
|
||||
.tn-plan-content {
|
||||
&__item {
|
||||
display: inline-block;
|
||||
line-height: 45rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
margin: 20rpx 20rpx 5rpx 0rpx;
|
||||
|
||||
&--prefix {
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tn-plan-content2 {
|
||||
&__item {
|
||||
line-height: 45rpx;
|
||||
padding: 15rpx 30rpx;
|
||||
margin: 30rpx 0rpx 10rpx 0rpx;
|
||||
|
||||
&--prefix {
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 计划内容 end*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,763 @@
|
||||
<template>
|
||||
<view class="template-read 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 fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<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/logo/logo2.png')">
|
||||
<view class="logo-image">
|
||||
</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>
|
||||
</tn-nav-bar>
|
||||
|
||||
|
||||
|
||||
<view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
Hi，北北欢迎你吖
|
||||
</view>
|
||||
<view class="tn-margin" style="font-size: 50rpx;">
|
||||
<text class="tn-icon-menu-more"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<swiper class="card-swiper tn-margin-top-sm" :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>
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-text-xxl tn-text-bold tn-color-white">{{item.title}}</view>
|
||||
<view class="tn-text-bold tn-color-white tn-padding-top-xs" style="font-size: 60rpx;">{{item.name}}</view>
|
||||
<view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">{{item.text}}</view>
|
||||
</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>
|
||||
|
||||
<!-- 方式7 start-->
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-1 tn-radius">
|
||||
<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://resource.tuniaokj.com/images/icon/a004.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">排行</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-radius">
|
||||
<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://resource.tuniaokj.com/images/icon/a002.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">签到</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-radius">
|
||||
<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://resource.tuniaokj.com/images/icon/a006.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">免费</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-radius">
|
||||
<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://resource.tuniaokj.com/images/icon/a007.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">会员</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式7 end-->
|
||||
|
||||
<!-- 换背景形式-->
|
||||
<!-- <view class="image-div tn-margin">
|
||||
<image src='https://resource.tuniaokj.com/images/swiper/capsule1.png' mode='widthFix' class='image'></image>
|
||||
</view> -->
|
||||
|
||||
<!-- banner start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm">
|
||||
<view class=" " style="width: 100%;">
|
||||
<view class="image-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/swiper/capsule1.png')">
|
||||
<view class="image-capsule">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- banner end-->
|
||||
|
||||
<view class="tn-margin-top">
|
||||
<view class="nav_title--wrap">
|
||||
<view class="nav_title tn-cool-bg-color-5">
|
||||
<text class="tn-icon-copy tn-padding-right-sm"></text>
|
||||
热 / 门 / 书 / 籍
|
||||
<text class="tn-icon-copy tn-padding-left-sm"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图文 -->
|
||||
<!-- 比例 start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm tn-padding-bottom">
|
||||
<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 tn-icon-flower"></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-->
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed" style="border-radius: 100rpx;">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-home-smile">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/a1.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-black">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-discover tn-color-gray">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/k2.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">圈子</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-image-text tn-color-gray">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/i2.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">案例</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-my tn-color-gray">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/d2.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: 'TemplateRead',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
title: '海量分享',
|
||||
name: '总有你想不到的创意',
|
||||
text: '用最少的代码做最骚的效果',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
title: '愉快玩耍',
|
||||
name: '寻找一起成长的小伙伴',
|
||||
text: '欢迎加入东东们',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
title: '酷炫多彩',
|
||||
name: '更多彩蛋等你探索',
|
||||
text: '开启全新的探索之旅',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
title: '免费开源',
|
||||
name: '商业合作请联系作者',
|
||||
text: '微信号 tnkewo',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}],
|
||||
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: 999,
|
||||
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
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 60%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 15rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
/* 轮播视觉差 start */
|
||||
.card-swiper {
|
||||
height: 500rpx !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%;
|
||||
border-radius: 30rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -220rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
margin-top: -280rpx;
|
||||
width: 100%;
|
||||
transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 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: -130rpx;
|
||||
margin: 0 8rpx !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* 图标容器7 start */
|
||||
.icon7 {
|
||||
&__item {
|
||||
width: 30%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 10rpx;
|
||||
margin: 20rpx 10rpx;
|
||||
transform: scale(1);
|
||||
transition: transform 0.3s linear;
|
||||
transform-origin: center center;
|
||||
|
||||
&--icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
font-size: 50rpx;
|
||||
border-radius: 0;
|
||||
margin-bottom: -10rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-capsule{
|
||||
padding:120rpx 0rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
}
|
||||
|
||||
/* 胶囊背景图 start */
|
||||
.image-div {
|
||||
height: 450rpx;
|
||||
z-index: -1;
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 667rpx;
|
||||
// z-index: -1;
|
||||
}
|
||||
}
|
||||
/* 胶囊背景图 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 */
|
||||
|
||||
/* 文章内容 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: #82B2FF;
|
||||
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*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
// margin: 20rpx;
|
||||
margin: 40rpx 5%;
|
||||
width: 90%;
|
||||
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;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,528 @@
|
||||
<template>
|
||||
<view class="template-course 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>
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-text-xxl tn-text-bold tn-color-white">{{item.title}}</view>
|
||||
<view class="tn-text-bold tn-color-white tn-padding-top-xs" style="font-size: 60rpx;">{{item.name}}</view>
|
||||
<view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">{{item.text}}</view>
|
||||
</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-flex tn-flex-row-between tn-margin tea-user__wrap">
|
||||
|
||||
<view class="tn-flex-3 tn-padding tea-radius tn-bg-white tea-shadow" style="margin-right: 30rpx;">
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<view class="user-avatar">
|
||||
<view class="tn-icon-logo-tuniao" style="font-size: 90rpx;color: #01BEFF;"></view>
|
||||
</view>
|
||||
<view class="tn-padding-right tn-text-ellipsis tn-text-left">
|
||||
<view class="tn-padding-right tn-padding-left-sm tn-color-black tn-text-bold">
|
||||
图鸟小伙伴
|
||||
</view>
|
||||
<view class="tn-padding-right tn-padding-left-sm tn-padding-top-xs tn-color-gray tn-text-sm">有 6 张优惠券未使用</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex-1 justify-content-item tn-padding tn-text-center tea-radius tn-bg-white tea-shadow">
|
||||
<view class="">
|
||||
<text class="tn-icon-qr-code tn-text-xl"></text>
|
||||
</view>
|
||||
<view class=" tn-padding-top-xs">
|
||||
会员码
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="">
|
||||
|
||||
<!-- 方式12 start-->
|
||||
<view class="tn-flex tn-margin" style="padding-top: 15rpx;">
|
||||
<view class="tn-flex-1 tea-shadow tea-radius tn-bg-white" style="margin-right: 15rpx;padding: 40rpx 0;">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-blue--light tn-color-blue">
|
||||
<view class="tn-icon-shop tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<view class="tn-text-ellipsis tn-text-xl tn-text-bold">门店自取</view>
|
||||
<view class="tn-text-ellipsis tn-color-gray--dark tn-padding-top-sm">下单免排队</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tea-shadow tea-radius tn-bg-white" style="margin-left: 15rpx;padding: 40rpx 0;">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-blue--light tn-color-blue">
|
||||
<view class="tn-icon-electromobile tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<view class="tn-text-ellipsis tn-text-xl tn-text-bold">外卖配送</view>
|
||||
<view class="tn-text-ellipsis tn-color-gray--dark tn-padding-top-sm">无接触配送</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin" style="padding-top: 15rpx;">
|
||||
<block v-for="(item, index) in tuniaoData" :key="index">
|
||||
<view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white tea-shadow">
|
||||
<view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
|
||||
<view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center" :class="[`tn-color-${item.color}--disabled`]">
|
||||
<view :class="[`tn-icon-${item.icon}`]"></view>
|
||||
</view>
|
||||
<view class="tn-info__item__left__content">
|
||||
<view class="tn-info__item__left__content--title tn-text-bold tn-text-xl tn-color-black">{{ item.title }}</view>
|
||||
<!-- <view class="tn-info__item__left__content--data tn-padding-top-xs">
|
||||
{{ item.value }}
|
||||
<text class="tn-icon-right tn-padding-left-xs"></text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="tn-info__item__right">
|
||||
<view class="tn-info__item__right--icon">
|
||||
<view :class="[`tn-icon-${item.icon}`]"></view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-home-smile">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-home.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">门店</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-watercup tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-buy.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">点餐</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-shop tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-shop.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">商城</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-ticket tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-list.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">订单</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-my tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-my.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-xl"></view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplateCourse',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
title: 'BUG再多',
|
||||
name: '也别忘了',
|
||||
text: '我无限续杯',
|
||||
url: 'https://resource.tuniaokj.com/images/shop/cup1.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
title: '图鸟南南',
|
||||
name: '欢迎加入东东们',
|
||||
text: '如果你也有不错的作品',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
title: '图鸟西西',
|
||||
name: '一起玩转scss',
|
||||
text: '用最少的代码做最骚的效果',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
title: '图鸟北北',
|
||||
name: '微信号 tnkewo',
|
||||
text: '商业合作请联系作者',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/swiper3.jpg',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
title: '图鸟猪猪',
|
||||
name: '努力成为大佬',
|
||||
text: '一起加油吖',
|
||||
url: 'https://resource.tuniaokj.com/images/shop/banner2.jpg',
|
||||
}],
|
||||
tuniaoData: [
|
||||
{
|
||||
title: '开通会员',
|
||||
icon: 'vip-fill',
|
||||
color: 'red',
|
||||
value: '我就看看'
|
||||
},
|
||||
{
|
||||
title: '来场约惠',
|
||||
icon: 'tag-fill',
|
||||
color: 'blue',
|
||||
value: '我就看看'
|
||||
},
|
||||
{
|
||||
title: '放肆开玩',
|
||||
icon: 'game-fill',
|
||||
color: 'orange',
|
||||
value: '我就看看'
|
||||
},
|
||||
{
|
||||
title: '加盟开店',
|
||||
icon: 'commissary-fill',
|
||||
color: 'green',
|
||||
value: '我就看看'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
/* 头像 start*/
|
||||
.user-avatar{
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 内容布局 start*/
|
||||
.tea-shadow{
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
.tea-user {
|
||||
|
||||
&__wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 20rpx 30rpx;
|
||||
margin-top: -80rpx;
|
||||
}
|
||||
}
|
||||
.tea-radius{
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
/* 轮播视觉差 start */
|
||||
.card-swiper {
|
||||
height: 800rpx !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;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -320rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
margin-top: -380rpx;
|
||||
width: 100%;
|
||||
transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 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: -130rpx;
|
||||
margin: 0 8rpx !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* 图标容器12 start */
|
||||
.tn-three{
|
||||
position: absolute;
|
||||
top: 48%;
|
||||
right: 50%;
|
||||
bottom: 50%;
|
||||
left: 52%;
|
||||
transform: translate(-38rpx, -16rpx) rotateX(0deg) rotateY(10deg) rotateZ(-20deg);
|
||||
text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.icon12 {
|
||||
&__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 */
|
||||
.tn-info {
|
||||
|
||||
&__container {
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: 48%;
|
||||
margin: 15rpx 0rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
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/6.png);
|
||||
}
|
||||
|
||||
&__left {
|
||||
|
||||
&--icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 70rpx;
|
||||
margin-right: 20rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__content {
|
||||
font-size: 30rpx;
|
||||
|
||||
&--data {
|
||||
margin-top: 5rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__right {
|
||||
&--icon {
|
||||
position: absolute;
|
||||
right: 0upx;
|
||||
top: 50upx;
|
||||
font-size: 100upx;
|
||||
width: 108upx;
|
||||
height: 108upx;
|
||||
text-align: center;
|
||||
line-height: 60upx;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 业务展示 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;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,639 @@
|
||||
<template>
|
||||
<view class="template-tuniao 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 fixed :isBack="false" :bottomShadow="false" :backgroundColor="navBarBackgroundColor">
|
||||
<view id="navbar" class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left" :style="[navBarStyle]">
|
||||
<!-- 图标logo -->
|
||||
<view class="custom-nav__back">
|
||||
<view class="logo-pic" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo.jpg')">
|
||||
<view class="logo-image">
|
||||
</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>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view id="page_tips" class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
Hi，早午晚都好吖
|
||||
</view>
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
<text class="tn-icon-share-triangle"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-margin-left tn-margin-right tn-margin-top-sm">
|
||||
<tn-swiper :list="banner" :height="320" :effect3d="false" mode="round"></tn-swiper>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-margin-top-xl">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
热门项目
|
||||
</view>
|
||||
<view class="justify-content-item tn-margin tn-text-lg tn-color-gray--disabled">
|
||||
<text class="tn-padding-xs">全部</text>
|
||||
<text class="tn-icon-topics"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-margin-left tn-margin-right tn-margin-top-sm">
|
||||
<view class="tn-flex-2">
|
||||
|
||||
<view class="image-pic tn-margin-right" style="background-image:url('https://resource.tuniaokj.com/images/shop/cup2.jpg')">
|
||||
<view class="image-tuniao1">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="tn-flex-1">
|
||||
<view class="image-pic" style="background-image:url('https://resource.tuniaokj.com/images/shop/phonecase1.jpg')">
|
||||
<view class="image-tuniao2">
|
||||
</view>
|
||||
</view>
|
||||
<view class="image-pic tn-margin-top" style="background-image:url('https://resource.tuniaokj.com/images/shop/banner1.jpg')">
|
||||
<view class="image-tuniao2">
|
||||
</view>
|
||||
</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-xxl">
|
||||
业务范围
|
||||
</view>
|
||||
<!-- <view class="justify-content-item tn-margin tn-text-xxl tn-color-gray--disabled">
|
||||
<text class="tn-padding-xs">全部</text>
|
||||
<text class="tn-icon-topics"></text>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin-left tn-margin-right">
|
||||
<block v-for="(item, index) in tuniaoData" :key="index">
|
||||
<view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white" :class="[`tn-bg-${item.color}`]">
|
||||
<view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
|
||||
<!-- <view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
|
||||
<view :class="[`tn-icon-${item.icon}`]"></view>
|
||||
</view> -->
|
||||
<view class="tn-info__item__left__content">
|
||||
<view class="tn-info__item__left__content--title tn-text-xxl">{{ item.title }}</view>
|
||||
<view class="tn-info__item__left__content--data tn-padding-top-xs">
|
||||
{{ item.value }}
|
||||
<text class="tn-icon-right tn-padding-left-xs"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-info__item__right">
|
||||
<view class="tn-info__item__right--icon">
|
||||
<view :class="[`tn-icon-${item.icon}`]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="bg-tabbar-shadow"></view>
|
||||
<view class="tabbar__placeholder"></view>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<view class="tabbar">
|
||||
<view class="tabbar__bg" :style="[wrapStyle]"></view>
|
||||
<view class="tabbar__list">
|
||||
<block v-for="(item, index) in tabbar" :key="index">
|
||||
<view :id="`tabbar_item_${index}`" class="tabbar__item" :class="[{'tabbar__item--active': index === currentTabbarIndex}]" @click="changeTabbar(index)">
|
||||
<view class="tabbar__item__icon" :class="[item.icon]"></view>
|
||||
<view class="tabbar__item__text">{{ item.name }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- <view class="tabbar__select-active-bg" :class="[showActiceBg ? 'tabbar__select-active-bg--show' : 'tabbar__select-active-bg--hide']" :style="[activeBgStyle]"></view> -->
|
||||
<view class="tabbar__select-active-bg" :animation="activeBgAnimation"></view>
|
||||
</view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplateCourse',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
banner: [{
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner1.jpg'
|
||||
}, {
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner2.jpg'
|
||||
}, {
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner3.jpg'
|
||||
}, {
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner4.jpg'
|
||||
}],
|
||||
tuniaoData: [
|
||||
{
|
||||
title: 'UI设计',
|
||||
icon: 'image-text-fill',
|
||||
color: 'red',
|
||||
value: '前往咨询'
|
||||
},
|
||||
{
|
||||
title: '小程序',
|
||||
icon: 'data-fill',
|
||||
color: 'orange',
|
||||
value: '前往咨询'
|
||||
},
|
||||
{
|
||||
title: '网站开发',
|
||||
icon: 'statistics-fill',
|
||||
color: 'purple',
|
||||
value: '前往咨询'
|
||||
},
|
||||
{
|
||||
title: '其他业务',
|
||||
icon: 'bankcard-fill',
|
||||
color: 'blue',
|
||||
value: '前往咨询'
|
||||
}
|
||||
],
|
||||
wrapMaskPositionLeft: 0,
|
||||
activeBgPositionLeft: 0,
|
||||
showActiceBg: false,
|
||||
prevTabbarIndex: 0,
|
||||
currentTabbarIndex: 0,
|
||||
tabbarRectInfo: [],
|
||||
tabbar: [
|
||||
{ name: '首页', icon: 'tn-icon-home' },
|
||||
{ name: '圈子', icon: 'tn-icon-discover' },
|
||||
{ name: '数据', icon: 'tn-icon-data' },
|
||||
{ name: '我的', icon: 'tn-icon-my' }
|
||||
],
|
||||
navBarRectInfo: {},
|
||||
navBarChangebaseLineHeight: 0,
|
||||
navBarStyle: {
|
||||
opacity: 1,
|
||||
display: 'flex'
|
||||
},
|
||||
navBarBackgroundColor: 'rgba(255, 255, 255, 1)',
|
||||
activeBgAnimation: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
wrapStyle() {
|
||||
return {
|
||||
'-webkit-mask-position': `${this.wrapMaskPositionLeft}px -1px, 100%`
|
||||
}
|
||||
},
|
||||
activeBgStyle() {
|
||||
return {
|
||||
'left': `${this.activeBgPositionLeft}px`
|
||||
}
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
this.getTabbarItemInfo()
|
||||
this.initNavBarRectInfo()
|
||||
})
|
||||
},
|
||||
onPageScroll() {
|
||||
this.updateNavBarRectInfo()
|
||||
},
|
||||
methods: {
|
||||
// 初始化导航栏信息
|
||||
async initNavBarRectInfo() {
|
||||
const navBarRectInfo = await this._tGetRect('#navbar')
|
||||
const pageTipsRectInfo = await this._tGetRect('#page_tips')
|
||||
// console.log(navBarRectInfo, pageTipsRectInfo);
|
||||
if (!(navBarRectInfo?.top) || !(pageTipsRectInfo?.top)) {
|
||||
setTimeout(() => {
|
||||
this.initNavBarRectInfo()
|
||||
}, 10)
|
||||
return
|
||||
}
|
||||
this.navBarRectInfo = {
|
||||
top: navBarRectInfo.top
|
||||
}
|
||||
this.navBarChangebaseLineHeight = pageTipsRectInfo.top - navBarRectInfo.top
|
||||
},
|
||||
// 更新导航栏信息
|
||||
updateNavBarRectInfo() {
|
||||
this._tGetRect('#page_tips').then((res) => {
|
||||
const top = res?.top || 0
|
||||
if (!top) {
|
||||
return
|
||||
}
|
||||
const differHeight = top - this.navBarRectInfo.top
|
||||
const opacity = differHeight / this.navBarChangebaseLineHeight
|
||||
if (opacity < 0) {
|
||||
this.navBarStyle.opacity = 0
|
||||
this.navBarStyle.display = 'none'
|
||||
this.navBarBackgroundColor = `rgba(255, 255, 255, 0)`
|
||||
} else {
|
||||
this.navBarStyle.opacity = opacity
|
||||
this.navBarStyle.display = 'flex'
|
||||
this.navBarBackgroundColor = `rgba(255, 255, 255, ${opacity})`
|
||||
}
|
||||
|
||||
// console.log(top, differHeight, opacity);
|
||||
})
|
||||
},
|
||||
// 获取底部元素的位置
|
||||
getTabbarItemInfo() {
|
||||
const view = uni.createSelectorQuery().in(this)
|
||||
for(let i = 0; i < this.tabbar.length; i++) {
|
||||
view.select('#tabbar_item_' + i).boundingClientRect()
|
||||
}
|
||||
view.exec(res => {
|
||||
if (!res.length) {
|
||||
setTimeout(() => {
|
||||
this.getTabbarItemInfo()
|
||||
}, 10)
|
||||
return
|
||||
}
|
||||
|
||||
// 将信息存入数组中
|
||||
res.map((item) => {
|
||||
this.tabbarRectInfo.push({
|
||||
left: item.left,
|
||||
width: item.width
|
||||
})
|
||||
})
|
||||
this.updateHollowsPosition()
|
||||
this.updateActiveBgPosition(true)
|
||||
// console.log(this.tabbarRectInfo)
|
||||
})
|
||||
},
|
||||
// 更新凹陷位置
|
||||
updateHollowsPosition() {
|
||||
const { width, left } = this.tabbarRectInfo[this.currentTabbarIndex]
|
||||
// 计算掩模图片的宽高比
|
||||
// const imageRatio = 200 / 92
|
||||
// 计算定高的宽比
|
||||
const imageFixedHeightWidthRatioValue = 300 * (uni.upx2px(64) / 92)
|
||||
this.wrapMaskPositionLeft = left - ((imageFixedHeightWidthRatioValue - width) / 2)
|
||||
// console.log(imageFixedHeightWidthRatioValue, this.wrapMaskPositionLeft);
|
||||
},
|
||||
// 更新激活时背景的位置
|
||||
updateActiveBgPosition(init = false) {
|
||||
const { width, left } = this.tabbarRectInfo[this.currentTabbarIndex]
|
||||
const oldActiveBgPositionLeft = this.activeBgPositionLeft
|
||||
this.activeBgPositionLeft = left + ((width - uni.upx2px(100)) / 2)
|
||||
// console.log(oldActiveBgPositionLeft, this.activeBgPositionLeft);
|
||||
// if (!init) {
|
||||
// this.showActiceBg = false
|
||||
// setTimeout(() => {
|
||||
// this.showActiceBg = true
|
||||
// }, 150)
|
||||
// } else {
|
||||
// this.showActiceBg = true
|
||||
// }
|
||||
if (!init) {
|
||||
const animation = uni.createAnimation({
|
||||
duration: 200,
|
||||
timingFunction: "ease-out"
|
||||
})
|
||||
animation.top(uni.upx2px(50)).left(oldActiveBgPositionLeft + ((this.activeBgPositionLeft - oldActiveBgPositionLeft) / 2)).scale(0.5).step()
|
||||
animation.left(this.activeBgPositionLeft).top(uni.upx2px(-54)).scale(1).step()
|
||||
this.activeBgAnimation = animation.export()
|
||||
} else {
|
||||
const animation = uni.createAnimation({
|
||||
duration: 100,
|
||||
timingFunction: "ease-out"
|
||||
})
|
||||
animation.left(this.activeBgPositionLeft).top(uni.upx2px(-54)).step()
|
||||
this.activeBgAnimation = animation.export()
|
||||
}
|
||||
|
||||
},
|
||||
// 修改当前选中的tabbar
|
||||
changeTabbar(index) {
|
||||
if (this.currentTabbarIndex === index) return
|
||||
this.prevTabbarIndex = this.currentTabbarIndex
|
||||
this.currentTabbarIndex = index
|
||||
this.$nextTick(() => {
|
||||
this.updateHollowsPosition()
|
||||
this.updateActiveBgPosition()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
.template-tuniao {
|
||||
// background-color: #FBFBFB;
|
||||
}
|
||||
/* 底部tabbar假阴影 start*/
|
||||
.bg-tabbar-shadow{
|
||||
background-image: repeating-linear-gradient(to top, rgba(0,0,0,0.1) 10rpx, #FFFFFF , #FFFFFF);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 450rpx;
|
||||
width: 100vw;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* 自定义导航栏内容 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: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
|
||||
/* 热门图片 start*/
|
||||
.image-tuniao1{
|
||||
padding: 164rpx 0rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-tuniao2{
|
||||
padding: 75rpx 0rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-tuniao3{
|
||||
padding: 90rpx 0rpx;
|
||||
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-info {
|
||||
|
||||
&__container {
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: 48%;
|
||||
margin: 15rpx 0rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
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/3.png);
|
||||
}
|
||||
|
||||
&__left {
|
||||
|
||||
&--icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
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_bg5.png);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
font-size: 30rpx;
|
||||
|
||||
&--data {
|
||||
margin-top: 5rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__right {
|
||||
&--icon {
|
||||
position: absolute;
|
||||
right: 0rpx;
|
||||
top: 50rpx;
|
||||
font-size: 100rpx;
|
||||
width: 108rpx;
|
||||
height: 108rpx;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 业务展示 end */
|
||||
|
||||
/* 底部导航 statr */
|
||||
.tabbar {
|
||||
width: 100%;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom));
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: transparent;
|
||||
z-index: 998;
|
||||
|
||||
&__bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #FFFFFF;
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 61.5'%3E%3Cpath d='M100 0H0c32.9 0 49.3 61.5 100 61.5S167.1 0 200 0H100z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
|
||||
-webkit-mask-size: auto 64rpx, cover;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-composite: xor; /*只显示不重合的地方， chorem 、safari 支持*/
|
||||
z-index: 998;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
&__list {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__item {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
position: relative;
|
||||
|
||||
&--active {
|
||||
.tabbar__item__icon {
|
||||
top: -30rpx;
|
||||
}
|
||||
|
||||
.tabbar__item__text {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 56rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 20rpx;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
&__text {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(10rpx + env(safe-area-inset-bottom));
|
||||
transition: 0.5s;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__select-active-bg {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #FFFFFF;
|
||||
// transition: 0.5s;
|
||||
z-index: -1;
|
||||
// box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||
// box-shadow: inset 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0rpx 10rpx 30rpx rgba(70,23,129, 0.07),
|
||||
0rpx -8rpx 40rpx rgba(255, 255, 255, 0.07),
|
||||
inset 0rpx -10rpx 10rpx rgba(70,23,129, 0.07),
|
||||
inset 0rpx 10rpx 20rpx rgba(255, 255, 255, 1);
|
||||
// transition: box-shadow .2s ease-out;
|
||||
|
||||
&--hide {
|
||||
top: calc(110rpx + 50rpx);
|
||||
}
|
||||
|
||||
&--show {
|
||||
top: -54rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__placeholder {
|
||||
height: calc(110rpx + env(safe-area-inset-bottom));
|
||||
// display: initial;
|
||||
}
|
||||
}
|
||||
/* 底部导航 end */
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,692 @@
|
||||
<template>
|
||||
<view class="template-year 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 fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<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/logo/logo2.png')">
|
||||
<view class="logo-image">
|
||||
</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>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
小脑虎，新年快乐
|
||||
</view>
|
||||
<view class="justify-content-item tn-margin" style="font-size: 50rpx;">
|
||||
<text class="tn-icon-zodiac-hu"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<swiper class="card-swiper tn-margin tn-shadow-purplered" :current="cardCur" :circular="true" vertical="true"
|
||||
:autoplay="true" duration="500" interval="5000" @change="cardSwiper" style="margin-top: 30rpx;">
|
||||
<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 tn-text-center tn-padding-top-sm tn-shadow-blur" :class="cardCur==index?'active':''" @tap.stop="handleSwiperClick(index)">
|
||||
<text class="tn-text-bold">{{item.text}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- banner start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-padding-xs tn-margin-top-xl">
|
||||
<view class=" " style="width: 100%;">
|
||||
<view class="image-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/capsule-banner/banner-cap.png')">
|
||||
<view class="image-capsule">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- banner end-->
|
||||
|
||||
|
||||
<view class="tn-margin-top">
|
||||
<view class="nav_title--wrap">
|
||||
<view class="nav_title tn-cool-bg-color-1">
|
||||
<text class="tn-icon-lucky-money tn-padding-right-sm"></text>
|
||||
新 / 年 / 快 / 乐
|
||||
<text class="tn-icon-lucky-money tn-padding-left-sm"></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-pic" :style="'background-image:url(' + item.mainImage + ')'">
|
||||
<view class="image-year">
|
||||
</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 tn-icon-flower"></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-->
|
||||
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-home-vertical-fill tn-color-purplered">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-black">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<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> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">发现</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-camera-fill tn-color-white">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">发布</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<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> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">灯谜</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<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> -->
|
||||
</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: 'TemplateYear',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '一起愉快的玩耍叭',
|
||||
text: '恭 · 跨年',
|
||||
url: 'https://resource.tuniaokj.com/images/shop/banner2.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '如果你也有不错的作品',
|
||||
text: '喜 · 祝福',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/ad1.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '用最少的代码做最骚的效果',
|
||||
text: '发 · 红包',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/ad2.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '商业合作请联系作者',
|
||||
text: '财 · 红庆',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/ad3.jpg',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
name: '我们都是好孩子',
|
||||
text: '虎 · 生威',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/ad4.jpg',
|
||||
}],
|
||||
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: 999,
|
||||
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
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
// swiper点击事件
|
||||
handleSwiperClick(index) {
|
||||
this.cardCur = index
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 60%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 10rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx 60rpx 0 60rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
/* 轮播文案在外 start*/
|
||||
.card-swiper {
|
||||
height: 650rpx !important;
|
||||
width: 500rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
height: 650rpx;
|
||||
width: 500rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 0rpx;
|
||||
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:inline-block;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
color: #E83A30;
|
||||
background-color: #FAD5E8;
|
||||
opacity: 1;
|
||||
width: 160rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 20rpx -30rpx !important;
|
||||
left: 590rpx;
|
||||
right: 0;
|
||||
top: -700rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
color: #FFFFFF;
|
||||
opacity: 1;
|
||||
background-color: #E83A30;
|
||||
}
|
||||
/* 标题 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 */
|
||||
|
||||
/* 文章内容 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: #82B2FF;
|
||||
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-year{
|
||||
padding: 150rpx 0rpx;
|
||||
font-size: 16rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-capsule{
|
||||
padding: 100rpx 0rpx;
|
||||
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: 20rpx 20rpx 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;
|
||||
}
|
||||
|
||||
.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: -60rpx auto 20rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #E72F8C;
|
||||
width: 90rpx !important;
|
||||
height: 90rpx !important;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(231, 47, 140, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: inline-block;
|
||||
margin: 15rpx auto 15rpx;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<view class="template-swiper">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<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 time" :current="cardCur" :circular="true" :vertical="false" :autoplay="false" duration="500" interval="5000" @change="cardSwiper" :style="{height: currentImageHeight + 'rpx'}">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index">
|
||||
<image :src="item.url" @load="onImageLoad(index, $event)" mode="widthFix"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- 为了做内容过渡动画，图鸟加了骚操作在这里 -->
|
||||
<view class="time" style="position: absolute;top:0;width: 100%;" :style="{marginTop: currentImageHeight + 20 + 'rpx'}">
|
||||
<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-padding tn-margin-top">
|
||||
图鸟swiper自适应高度+完美终稿 </br>
|
||||
高÷宽x750=换算后的高度（即宽限制为750，高为）: </br>
|
||||
{{ currentImageHeight }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'banner',
|
||||
mixins: [template_page_mixin],
|
||||
data() {
|
||||
return {
|
||||
swiperList: [
|
||||
{ url: 'https://resource.tuniaokj.com/images/avatar/xiong/x1.jpg' },
|
||||
{ url: 'https://resource.tuniaokj.com/images/avatar/xiong/x2.jpg' },
|
||||
{ url: 'https://resource.tuniaokj.com/images/avatar/xiong/x3.jpg' },
|
||||
{ url: 'https://resource.tuniaokj.com/images/avatar/xiong/x7.jpg' },
|
||||
{ url: 'https://resource.tuniaokj.com/images/avatar/xiong/x13.jpg' },
|
||||
],
|
||||
imageHeights: [], // 存储每张图片的高度
|
||||
imageWidths: [], // 存储每张图片的宽度
|
||||
cardCur: 0, // 当前显示的图片索引
|
||||
currentImageHeight: 750 ,// 当前显示的图片高度
|
||||
currentImageWidth: 0 // 当前显示的图片宽度
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onImageLoad(index, e) {
|
||||
// 获取图片的实际高度并存储
|
||||
const imageHeight = e.detail.height;
|
||||
const imageWidth = e.detail.width;
|
||||
this.$set(this.imageHeights, index, imageHeight);
|
||||
this.$set(this.imageWidths, index, imageWidth);
|
||||
|
||||
// 如果当前加载的图片是当前显示的图片，则更新 currentImageHeight
|
||||
if (index === this.cardCur) {
|
||||
this.currentImageHeight = imageHeight * 750 / imageWidth;
|
||||
}
|
||||
},
|
||||
cardSwiper(e) {
|
||||
// 获取当前显示的图片索引
|
||||
const newIndex = e.detail.current;
|
||||
this.cardCur = newIndex;
|
||||
|
||||
// 更新当前显示的图片高度
|
||||
this.currentImageHeight = this.imageHeights[newIndex] * 750 / this.imageWidths[newIndex] || 0;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 初始化 imageHeights/imageWidths 数组
|
||||
this.swiperList.forEach((_, index) => {
|
||||
this.$set(this.imageHeights, index, 0);
|
||||
this.$set(this.imageWidths, index, 0);
|
||||
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.template-swiper{
|
||||
}
|
||||
/* 胶囊*/
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.card-swiper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
image {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
heigh: 750rpx;
|
||||
}
|
||||
|
||||
/* 轮播指示点 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: #000000;
|
||||
opacity: 0.3;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 0.8;
|
||||
width: 20rpx;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.time{
|
||||
transition: all 0.6s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,664 @@
|
||||
<template>
|
||||
<view class="template-bless 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="login__bg login__bg--top">
|
||||
<image class="bg" src="https://resource.tuniaokj.com/images/bless/bless-top.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="login__bg login__bg--top">
|
||||
<image class="rocket rocket-sussuspension" src="https://resource.tuniaokj.com/images/bless/bless-fish.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
|
||||
<swiper class="card-swiper" :circular="true"
|
||||
:autoplay="true" duration="500" interval="18000" previous-margin="185rpx" next-margin="185rpx" @change="cardSwiper" style="padding-top: 15vh;">
|
||||
<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="widthFix" v-if="item.type=='image'"></image>
|
||||
</view> -->
|
||||
<!-- <view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
|
||||
</view> -->
|
||||
|
||||
<view class="tnphone-black-min swiper-item wow fadeInLeft2">
|
||||
<view class="skin wow fadeInRight2">
|
||||
<view class="screen wow fadeInUp2">
|
||||
<!-- <view class="head">
|
||||
<text>{{item.name}}</text>
|
||||
</view> -->
|
||||
<view class="peak wow">
|
||||
<view class="sound"></view>
|
||||
<view class="lens"></view>
|
||||
</view>
|
||||
<!-- <view class="area-l">
|
||||
<view class="">
|
||||
<text class="tn-icon-all"></text>
|
||||
<text class="tn-icon-wifi tn-padding-left-xs"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="area-r">
|
||||
<view class="">
|
||||
<text class="tn-icon-light"></text>
|
||||
<text class="tn-icon-time tn-padding-left-xs"></text>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <div class="talk"></div> -->
|
||||
|
||||
<view class="image-banner">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="swiper-item-text tn-text-center">
|
||||
<view class="tn-text-xl tn-text-bold tn-padding-top-xs">{{item.name}}</view>
|
||||
</view>
|
||||
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="tn-text-center year-text">
|
||||
<view class="tn-text-xxl tn-text-bold">
|
||||
<text class="">虎年好，</text>
|
||||
图鸟小伙伴
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 底部背景图片-->
|
||||
<view class="login__bg login__bg--bottom">
|
||||
<image src="https://resource.tuniaokj.com/images/bless/bless-bottom.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
|
||||
|
||||
<view class="action" @click="navTuniaoUI">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-home-smile tn-color-gray--dark">
|
||||
</view> -->
|
||||
<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="navTuniaoUI">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-discover tn-color-gray--dark">
|
||||
</view> -->
|
||||
<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="navTuniaoHome">
|
||||
<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/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="navTuniaoUI">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-image-text tn-color-gray--dark">
|
||||
</view> -->
|
||||
<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="navTuniaoUI">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-my tn-color-gray--dark">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/bless/bless-money.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateBless',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '新年快乐，恭喜发财',
|
||||
url: 'https://resource.tuniaokj.com/images/bless/bless-1.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '年年有福，开门大红',
|
||||
url: 'https://resource.tuniaokj.com/images/bless/bless-2.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d2.png'
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '眼疾手快，票子多多',
|
||||
url: 'https://resource.tuniaokj.com/images/bless/bless-3.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d3.png'
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '如虎添亿，其乐融融',
|
||||
url: 'https://resource.tuniaokj.com/images/bless/bless-4.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d4.png'
|
||||
}],
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.$tn.mpShare.title = '????????您有一条新年祝福待签收'
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
// 跳转到
|
||||
navTuniaoUI(e) {
|
||||
wx.vibrateShort();
|
||||
},
|
||||
// 跳转到
|
||||
navTuniaoHome(e) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
.template-browser{
|
||||
margin-bottom: calc(110rpx + env(safe-area-inset-bottom) / 2);;
|
||||
}
|
||||
|
||||
/* 祝福 start*/
|
||||
.year-text{
|
||||
position: fixed;
|
||||
bottom: 15vh;
|
||||
margin: 0 auto;
|
||||
right:0rpx;
|
||||
left:0rpx;
|
||||
}
|
||||
|
||||
/* .tnphone-black-min 细边框*/
|
||||
.tnphone-black-min {width: 380rpx; height: 760rpx; border-radius: 40rpx; background: #C6D1D8; padding: 7rpx; display: table; color: #333;
|
||||
box-sizing: border-box; box-shadow: 0rpx 0rpx 0rpx 5rpx rgba(80,80,80,.8) inset; margin: 70rpx auto; cursor: default; position: relative}
|
||||
.tnphone-black-min .skin {width: 100%; height: 100%; border-radius: 40rpx; background: #222; padding: 10rpx; box-shadow: 0rpx 0rpx 0rpx 7rpx rgba(68,68,68,.3)}
|
||||
.tnphone-black-min .screen {width: 100%; height: 100%; border-radius: 30rpx; background: #fff; position: relative; overflow: hidden}
|
||||
.tnphone-black-min .head {width: 100%; height: 90rpx; text-align: center; position: absolute; padding: 45rpx 15rpx 10rpx 15rpx;}
|
||||
.tnphone-black-min .peak {left: 22%;width: 56%; height: 27rpx; margin: -2rpx auto 0rpx; border-radius: 0 0 20rpx 20rpx; background: #222; position: absolute}
|
||||
.tnphone-black-min .sound {width: 48rpx; height: 6rpx; border-radius: 15rpx; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24rpx; margin-top: -10rpx;
|
||||
box-shadow: 0rpx 4rpx 4rpx 0rpx #444 inset}
|
||||
.tnphone-black-min .lens {width: 6rpx; height: 6rpx; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34rpx; margin-top: -10rpx}
|
||||
.tnphone-black-min .talk {width: 50%; height: 6rpx; border-radius: 15rpx; background: rgba(0,0,0,.3); position: absolute; bottom: 8rpx; left: 50%; margin-left: -25%}
|
||||
.tnphone-black-min .area-l,.tnphone-black-min .area-r {width: 70rpx; height: 16rpx; position: absolute; top: 6rpx}
|
||||
.tnphone-black-min .area-l {left: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-left: 20rpx;}
|
||||
.tnphone-black-min .area-r {right: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-right: 20rpx;}
|
||||
.tnphone-black-min .fa-feed {float: left; font-size: 12rpx!important; transform:rotate(-45deg); margin-top: 4rpx; margin-right: 8rpx}
|
||||
.tnphone-black-min .fa-battery-full {float: left; font-size: 12rpx!important; margin-top: 6rpx}
|
||||
.tnphone-black-min .fa-chevron-left {float: left; margin-top: 4rpx}
|
||||
.tnphone-black-min .fa-cog {float: right; margin-top: 4rpx}
|
||||
.tnphone-black-min .btn01 {width: 3rpx; height: 28rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 105rpx; left: -3rpx}
|
||||
.tnphone-black-min .btn02 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 160rpx; left: -3rpx}
|
||||
.tnphone-black-min .btn03 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 230rpx; left: -3rpx}
|
||||
.tnphone-black-min .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
|
||||
|
||||
/* 轮播样机样式 start*/
|
||||
.card-swiper {
|
||||
height: 90vh !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 380rpx !important;
|
||||
// left: 185rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 0rpx 90rpx 0rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
display: block;
|
||||
transform: scale(0.7);
|
||||
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;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: 8vh;
|
||||
width: 100%;
|
||||
display: block;
|
||||
transform: scale(0.7, 0.7);
|
||||
transition: all 0.4s ease 0s;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
transform: scale(1);
|
||||
transition: all 0.4s ease 0s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
height: 730rpx;
|
||||
// border: 1rpx solid red;
|
||||
}
|
||||
|
||||
/* 轮播指示点 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: #000;
|
||||
opacity: 0;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
top: -80rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 0;
|
||||
width: 30rpx;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/* 轮播堆叠差 start */
|
||||
// .card-swiper {
|
||||
// height: 500rpx !important;
|
||||
// }
|
||||
|
||||
// .card-swiper swiper-item {
|
||||
// width: 250rpx !important;
|
||||
// left: 250rpx;
|
||||
// box-sizing: border-box;
|
||||
// padding: 100rpx 0rpx 100rpx 0rpx;
|
||||
// overflow: initial;
|
||||
// }
|
||||
|
||||
// .card-swiper swiper-item .swiper-item {
|
||||
// width: 100%;
|
||||
// display: block;
|
||||
// height: 200rpx;
|
||||
// border-radius: 0rpx;
|
||||
// transform: translate(0rpx, 0rpx) scale(1.5);
|
||||
// transition: all 0.2s ease-in 0s;
|
||||
// overflow: hidden;
|
||||
// border: 5rpx solid red;
|
||||
// }
|
||||
|
||||
// .card-swiper swiper-item.cur .swiper-item {
|
||||
// transform: translate(0rpx, 0rpx) scale(2);
|
||||
// transition: all 0.2s ease-in 0s;
|
||||
// border: 5rpx solid pink;
|
||||
// }
|
||||
|
||||
// .image-banner{
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// }
|
||||
// .image-banner image{
|
||||
// width: 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: #FFF;
|
||||
// opacity: 0.4;
|
||||
// width: 10rpx;
|
||||
// height: 10rpx;
|
||||
// border-radius: 20rpx;
|
||||
// margin: 0 8rpx !important;
|
||||
// left: -270rpx;
|
||||
// top: -180rpx;
|
||||
// position: relative;
|
||||
// }
|
||||
|
||||
// .spot.active{
|
||||
// opacity: 1;
|
||||
// width: 30rpx;
|
||||
// background-color: #FFF;
|
||||
// }
|
||||
|
||||
// .swiper-item1 {
|
||||
// z-index: -1;
|
||||
|
||||
// &--active {
|
||||
// z-index: 10;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
/* 悬浮 */
|
||||
.rocket-sussuspension{
|
||||
animation: tiger 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes tiger {
|
||||
0%, 100% {
|
||||
transform: translate(0 , 0);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-0.8rem , 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
.login {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
|
||||
/* 背景图片 start */
|
||||
&__bg {
|
||||
z-index: -1;
|
||||
position: fixed;
|
||||
|
||||
&--top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
|
||||
.bg {
|
||||
width: 750rpx;
|
||||
will-change: transform;
|
||||
}
|
||||
.rocket {
|
||||
margin: 50rpx 30%;
|
||||
width: 300rpx;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
bottom: -10rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
// height: 144px;
|
||||
// margin-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
image {
|
||||
width: 750rpx;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 背景图片 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/arc2.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,160 @@
|
||||
<template>
|
||||
<view class="template-color 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>
|
||||
<!-- 图鸟_LEE，原创，勿喷，上线于2022年3月，开源于2023年9月，晚了1.5年才开源而已，此最新版本优化了界面 -->
|
||||
<view class="content" :style="{paddingTop: vuex_custom_bar_height + 30 + 'px'}">
|
||||
<view class="dialog">
|
||||
<view id="colorBg" class="colorBg" @touchstart="startTouch" @touchmove="moveIng"
|
||||
@touchend="endTouch">
|
||||
<view class="roundBuff" :catchtouchmove="true" @c.stop="()=>{}" :style="{transform: `rotate(${degrees}deg)`}"></view>
|
||||
<view class="colorPan">HSL：{{degrees.toFixed(0)}}</view>
|
||||
</view>
|
||||
<!-- 按钮 -->
|
||||
<view class="tn-flex tn-padding-top-xl">
|
||||
<view class="tn-flex-1 justify-content-item tn-margin-left tn-margin-right-xs tn-text-center tn-bg-white" style="border-radius: 100rpx;">
|
||||
<tn-button backgroundColor="#4B98FE " padding="39rpx 0" width="100%" :fontSize="28" :plain="true" fontColor="#4B98FE" shape="round">
|
||||
<text class="">取 消</text>
|
||||
</tn-button>
|
||||
</view>
|
||||
<view class="tn-flex-1 justify-content-item tn-margin-right tn-margin-left-xs tn-text-center">
|
||||
<tn-button backgroundColor="#4B98FE " padding="40rpx 0" width="100%" :fontSize="28" fontColor="#FFFFFF" shape="round">
|
||||
<text class="">确 认</text>
|
||||
</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateColor',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
pointerShow: true,
|
||||
colorPanWidth: 20,
|
||||
colorPanRadius: 0,
|
||||
pointerBox: {},
|
||||
degrees: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
uni.createSelectorQuery().select('#colorBg').boundingClientRect((rect) => {
|
||||
this.pointerBox = rect
|
||||
}).exec()
|
||||
this.colorPanRadius = res.screenWidth * 0.4
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
startTouch(e) {
|
||||
const {
|
||||
pageX,
|
||||
pageY
|
||||
} = e.touches[0]
|
||||
this.rotatePointer(pageX, pageY)
|
||||
},
|
||||
endTouch(e) {
|
||||
const {
|
||||
pageX,
|
||||
pageY
|
||||
} = e.changedTouches[0]
|
||||
this.rotatePointer(pageX, pageY)
|
||||
},
|
||||
moveIng(e) {
|
||||
const {
|
||||
pageX,
|
||||
pageY
|
||||
} = e.touches[0]
|
||||
this.rotatePointer(pageX, pageY)
|
||||
},
|
||||
rotatePointer(pageX = 0, pageY = 0) {
|
||||
const {
|
||||
pointerBox,
|
||||
colorPanWidth
|
||||
} = this
|
||||
const mouseX = pageX - colorPanWidth
|
||||
const mouseY = pageY - colorPanWidth
|
||||
var centerY = pointerBox.top + (pointerBox.height / 2) - 0,
|
||||
centerX = pointerBox.left + (pointerBox.height / 2) - 0,
|
||||
radians = Math.atan2(mouseX - centerX, mouseY - centerY)
|
||||
this.degrees = (radians * (180 / Math.PI) * -1) + 180;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
.dialog {
|
||||
display: block;
|
||||
border-radius: 30rpx;
|
||||
// background-color: #303030;
|
||||
margin: 20rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.colorBg {
|
||||
width: 80vw;
|
||||
height: 80vw;
|
||||
margin: 5vw;
|
||||
background: conic-gradient(red,
|
||||
yellow,
|
||||
lime,
|
||||
aqua,
|
||||
blue,
|
||||
fuchsia,
|
||||
red);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.roundBuff {
|
||||
width: 55vw;
|
||||
height: 55vw;
|
||||
-webkit-transform-origin: center 50%;
|
||||
transform-origin: center 50%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.roundBuff::before {
|
||||
content: "";
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: #FFFFFF;
|
||||
border: solid #FFFFFF;
|
||||
border-width: 10px 10px 0 0;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 2%;
|
||||
}
|
||||
|
||||
.colorPan {
|
||||
position: absolute;
|
||||
color: #080808;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<view class="template-guide">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<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="top-backgroup">
|
||||
<image src='https://resource.tuniaokj.com/images/swiper/fullbg3.jpg' mode='heightFix' class='backgroud-image'></image>
|
||||
</view>
|
||||
<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="heightFix" v-if="item.type=='image'" ></image>
|
||||
</view>
|
||||
<view class="swiper-item-text tn-text-center">
|
||||
<view class="tn-text-xxl tn-text-bold">{{item.text}}</view>
|
||||
<view class="tn-text-xl tn-text-bold tn-padding-top-xs">{{item.name}}</view>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateGuide',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '总有你想不到的创意',
|
||||
text: '海量分享',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/c4d1.png',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '寻找一起成长的小伙伴',
|
||||
text: '愉快玩耍',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/c4d2.png',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '更多彩蛋等你探索',
|
||||
text: '酷炫多彩',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/c4d3.png',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '商业合作请联系作者',
|
||||
text: '免费开源',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/c4d4.png',
|
||||
}],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 顶部背景图 start */
|
||||
.top-backgroup {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
z-index: -1;
|
||||
|
||||
.backgroud-image {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
// z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.card-swiper {
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 750rpx !important;
|
||||
left: 0rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
margin-top: 20vh;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100vh;
|
||||
border-radius: 0rpx;
|
||||
transform: translate(180rpx, 0rpx) scale(0.8);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: translate(180rpx, 0rpx) scale(1, 1);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -50vh;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
display: block;
|
||||
border-radius: 10rpx;
|
||||
transform: scale(0.7, 0.7);
|
||||
transition: all 0.4s ease 0s;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
padding-left: 30rpx;
|
||||
transform: scale(1);
|
||||
transition: all 0.4s ease 0s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: fixed;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
background-color: #E6E6E6;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
left: 0rpx;
|
||||
top: -180rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
width: 40rpx;
|
||||
background-color: #FFA726;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,878 @@
|
||||
<template>
|
||||
<view class="template-home">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<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-flex tn-flex-row-center dd-camera" @click="open">
|
||||
<camera device-position="front" flash="off" @error="error" style="width: 330rpx; height: 440rpx;border-radius: 1000px;overflow: hidden;background-color: #FFFFFF00;border: 20rpx solid #FFFFFF1A;">
|
||||
</camera>
|
||||
</view>
|
||||
|
||||
<!-- 套娃式轮播 -->
|
||||
<swiper class="card-swiper" :current="cardCur" :circular="false" :vertical="true" :autoplay="false" duration="500" interval="5000"
|
||||
@change="cardSwiper">
|
||||
|
||||
<!-- 纵向滚动的轮播-单色补光灯 -->
|
||||
<swiper-item>
|
||||
<view class="" style="height: 100vh;width: 100vw;">
|
||||
<!-- 横向滚动的轮播-套娃 -->
|
||||
<swiper class="img-swiper" :current="imgCur" :circular="true" :autoplay="false" duration="500" interval="12000" @change="imgSwiper">
|
||||
<swiper-item v-for="(item,index) in swiperList2" :key="index" :class="imgCur==index?'cur':''">
|
||||
<view class="swiper-item" :style="'background-color: '+ item.color +''">
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="" style="position: absolute;top: 380rpx;width:100vw;z-index: 9999 !important;opacity: 0.3;">
|
||||
<view class="tn-flex tn-flex-row-between tn-color-white tn-text-xl">
|
||||
<view class="tn-icon-left-double" @click="prevSlide" style="width: 120rpx;height: 60rpx;line-height: 60rpx;"></view>
|
||||
<view class="tn-icon-right-double" @click="nextSlide" style="width: 120rpx;height: 60rpx;line-height: 60rpx;"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
<!-- 纵向滚动的轮播-渐变补光灯 -->
|
||||
<swiper-item>
|
||||
<view class="" style="height: 100vh;width: 100vw;">
|
||||
<!-- 横向滚动的轮播-套娃 -->
|
||||
<swiper class="img-swiper" :current="linearCur" :circular="true" :autoplay="false" duration="500" interval="12000" @change="linearSwiper">
|
||||
<swiper-item v-for="(item,index) in swiperList3" :key="index" :class="linearCur==index?'cur':''">
|
||||
<view class="swiper-item" :style="'background:linear-gradient( 0deg,' + item.color + ',' + item.color2 + ')'">
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="" style="position: absolute;top: 380rpx;width:100vw;z-index: 9999 !important;opacity: 0.3;">
|
||||
<view class="tn-flex tn-flex-row-between tn-color-white tn-text-xl">
|
||||
<view class="tn-icon-left-double" @click="prevSlideLinear" style="width: 120rpx;height: 60rpx;line-height: 60rpx;"></view>
|
||||
<view class="tn-icon-right-double" @click="nextSlideLinear" style="width: 120rpx;height: 60rpx;line-height: 60rpx;"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
<!-- 纵向滚动的轮播-随机单色补光灯 -->
|
||||
<swiper-item>
|
||||
<view class="swiper-item random-color">
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
<!-- 纵向滚动的轮播-渐变补光灯 -->
|
||||
<swiper-item>
|
||||
<view class="swiper-item gradient-color">
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
<!-- 纵向滚动的轮播-循环输出 -->
|
||||
<!-- <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<view class="swiper-item gradient-color">
|
||||
</view>
|
||||
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-color-white tn-text-xxl tn-text-bold tn-text-center">
|
||||
<text class="tn-padding-right-xs" :class="['tn-icon-' + item.icon]"></text>
|
||||
<text class="">{{item.user}}</text>
|
||||
</view>
|
||||
<view class="tn-color-white tn-padding-top-xs tn-text-df clamp-text-2 tn-text-center tn-margin-top-sm"
|
||||
style="opacity: 0.8;">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item> -->
|
||||
|
||||
|
||||
|
||||
</swiper>
|
||||
|
||||
<!-- 功能按钮 -->
|
||||
<view class="" style="position: fixed;bottom: 0;z-index: 999 !important;width: 100vw;">
|
||||
<view class="tn-flex tn-flex-row-around tn-flex-col-center">
|
||||
|
||||
<!-- 权限-->
|
||||
<!-- <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<view class="tn-icon-camera-fill">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 最新图片，这里可以加一个预览最新图片-->
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="previewNewImage">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="light-pic" :style="'background-image:url(' + src + ')'">
|
||||
<view class="light-image">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="" v-if="showContentTips===true" style="border-radius: 1000rpx;padding: 6rpx;border: 6rpx solid #FFFFFF00;" @click="tn('/minePages/help')">
|
||||
<view class="" style="width: 120rpx;height: 120rpx;border-radius: 1000rpx;">
|
||||
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="margin: 10rpx">
|
||||
<view class="tn-icon-help-fill">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-else style="border-radius: 1000rpx;padding: 6rpx;border: 6rpx solid #FFFFFF40;" @click="takePhoto">
|
||||
<view class="tn-bg-white" style="width: 120rpx;height: 120rpx;border-radius: 1000rpx;">
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="" style="border-radius: 1000rpx;padding: 6rpx;border: 6rpx solid #FFFFFF40;" @click="takePhoto">
|
||||
<view class="tn-bg-white" style="width: 120rpx;height: 120rpx;border-radius: 1000rpx;">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tipsClick">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<view class="tn-icon-menu-circle-fill time" :class="[showContentTips ? 'dd-rotate' : '']">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="tn-tabbar-height"></view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 弹窗内容 -->
|
||||
<view class="dd-glass" style="position: absolute;bottom: 0;border-radius: 40rpx 40rpx 0 0;">
|
||||
<!-- :style="{'height': showContentTips ? `calc( 0 - 116px - ${vuex_custom_bar_height}px)`: `calc( 100vh - 340px - ${vuex_custom_bar_height}px)`}" -->
|
||||
<view class="time" :class="[showContentTips ? 'box-cur' : 'box']">
|
||||
<view class="" style="position: absolute;top: -40rpx;width: 100vw;">
|
||||
<view class="tn-flex tn-flex-row-center" @click="tipsClick" style="background-color: #FF565600;">
|
||||
<view class="tn-icon-down tn-color-white" style="padding-top: 60rpx;">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex" style="padding-top: 40rpx;">
|
||||
<block v-for="(item,index) in swiperList" :key="index">
|
||||
<view class="tn-text-center tn-margin tn-padding-sm"
|
||||
:class="cardCur==index?'active-bg':''" @tap.stop="handleSwiperClick(index)">
|
||||
<view class="tn-text-xxl tn-color-white" :class="'tn-icon-'+ item.icon + ';' "></view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 套娃式轮播-菜单 -->
|
||||
<swiper class="" :current="cardCur" :circular="false" :vertical="false" :autoplay="false" duration="500" interval="5000"
|
||||
@change="cardSwiper" style="height: 320rpx;width: 750rpx;">
|
||||
|
||||
<swiper-item>
|
||||
<view class="tn-flex tn-flex-wrap">
|
||||
<block v-for="(item,index) in swiperList2" :key="index">
|
||||
<view class="tn-text-center tn-padding" @tap.stop="handleSwiperClick2(index)">
|
||||
<view :class="imgCur==index?'active':''" :style="'background-color: '+ item.color +''" style="width: 90rpx;height: 56rpx;border-radius: 10rpx;"></view>
|
||||
<view class="tn-text-center tn-text-sm tn-padding-top-xs tn-color-white">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</block>
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
<swiper-item>
|
||||
<view class="tn-flex tn-flex-wrap">
|
||||
<block v-for="(item,index) in swiperList3" :key="index">
|
||||
<view class="tn-text-center tn-padding" @tap.stop="handleSwiperClick3(index)">
|
||||
<view :class="linearCur==index?'active':''" :style="'background:linear-gradient( 0deg,' + item.color + ',' + item.color2 + ')'" style="width: 90rpx;height: 56rpx;border-radius: 10rpx;"></view>
|
||||
<view class="tn-text-center tn-text-sm tn-padding-top-xs tn-color-white">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</block>
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
<swiper-item>
|
||||
<view class="tn-color-white tn-padding tn-text-center tn-margin-top">
|
||||
随机单色补光灯
|
||||
</view>
|
||||
<view class="tn-color-white tn-text-center">
|
||||
正在随机变化
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="tn-color-white tn-padding tn-text-center tn-margin-top">
|
||||
随机渐变补光灯
|
||||
</view>
|
||||
<view class="tn-color-white tn-text-center">
|
||||
正在随机变化
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
</swiper>
|
||||
|
||||
<!-- 安全 -->
|
||||
<view class="tn-tabbar-bottom"></view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 温馨提醒，这个需要放最外层，也就是放这里-->
|
||||
<tn-toast ref="toast"></tn-toast>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'Light',
|
||||
mixins: [template_page_mixin],
|
||||
data() {
|
||||
return {
|
||||
src:"https://resource.tuniaokj.com/images/flower/guye1.jpg",
|
||||
|
||||
// 显示组件相关提示信息
|
||||
showContentTips: false,
|
||||
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
icon: 'con-pisces',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
icon: 'con-cancer',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
icon: 'con-leo',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
icon: 'con-gemini',
|
||||
}],
|
||||
|
||||
|
||||
imgCur: 0,
|
||||
swiperList2: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: "罗兰紫",
|
||||
color: '#9736ff',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: "高冷蓝",
|
||||
color: '#b3f0f9',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: "可爱粉",
|
||||
color: '#fdb4bf',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: "茉莉黄",
|
||||
color: '#fff364',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
name: "清新蓝",
|
||||
color: '#598eff',
|
||||
}, {
|
||||
id: 5,
|
||||
type: 'image',
|
||||
name: "氛围紫",
|
||||
color: '#701bf9',
|
||||
}, {
|
||||
id: 6,
|
||||
type: 'image',
|
||||
name: "热情红",
|
||||
color: '#ff6e3a',
|
||||
}, {
|
||||
id: 7,
|
||||
type: 'image',
|
||||
name: "庄严蓝",
|
||||
color: '#785aff',
|
||||
}, {
|
||||
id: 8,
|
||||
type: 'image',
|
||||
name: "日照黄",
|
||||
color: '#FFAC00',
|
||||
}, {
|
||||
id: 9,
|
||||
type: 'image',
|
||||
name: "月影白",
|
||||
color: '#ecf0ef',
|
||||
}],
|
||||
|
||||
linearCur: 0,
|
||||
swiperList3: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: "渐变1",
|
||||
color: '#7300ff',
|
||||
color2: '#ff00fb',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: "渐变2",
|
||||
color: '#0037ff',
|
||||
color2: '#fe00a5',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: "渐变3",
|
||||
color: '#ff0004',
|
||||
color2: '#9500ff',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: "渐变4",
|
||||
color: '#00fef6',
|
||||
color2: '#ff0073',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
name: "渐变5",
|
||||
color: '#1500ff',
|
||||
color2: '#ff6a00',
|
||||
}, {
|
||||
id: 5,
|
||||
type: 'image',
|
||||
name: "渐变6",
|
||||
color: '#fe00dc',
|
||||
color2: '#00fbff',
|
||||
}, {
|
||||
id: 6,
|
||||
type: 'image',
|
||||
name: "渐变7",
|
||||
color: '#fb9b00',
|
||||
color2: '#ff0004',
|
||||
}, {
|
||||
id: 7,
|
||||
type: 'image',
|
||||
name: "渐变8",
|
||||
color: '#007bff',
|
||||
color2: '#00e5fe',
|
||||
}, {
|
||||
id: 8,
|
||||
type: 'image',
|
||||
name: "渐变9",
|
||||
color: '#00b3ff',
|
||||
color2: '#ff00c4',
|
||||
}, {
|
||||
id: 9,
|
||||
type: 'image',
|
||||
name: "渐变10",
|
||||
color: '#f00000',
|
||||
color2: '#ffcc00',
|
||||
}],
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
// 内页用法，亮度最大
|
||||
onLoad() {
|
||||
uni.setScreenBrightness({
|
||||
value: 1,
|
||||
success: function () {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 短震动跳转
|
||||
tn(e) {
|
||||
wx.vibrateShort();
|
||||
uni.navigateTo({
|
||||
url: e,
|
||||
});
|
||||
},
|
||||
|
||||
// 拍摄并预览最新图片
|
||||
takePhoto() {
|
||||
wx.vibrateShort();
|
||||
const ctx = uni.createCameraContext();
|
||||
ctx.takePhoto({
|
||||
quality: 'high',
|
||||
success: (res) => {
|
||||
|
||||
this.src = res.tempImagePath
|
||||
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempImagePath,
|
||||
success() {
|
||||
uni.showToast({
|
||||
position: "center",
|
||||
icon: "none",
|
||||
title: "图片保存成功吖。不会泄露你的任何隐私嗷嗷"
|
||||
})
|
||||
},
|
||||
fail(e) {
|
||||
uni.showModal({
|
||||
content: "嘤嘤嘤，保存相册失败。不会泄露你的任何隐私",
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
// 拍摄并预览最新图片
|
||||
previewNewImage() {
|
||||
wx.vibrateShort();
|
||||
const ctx = uni.createCameraContext();
|
||||
ctx.takePhoto({
|
||||
quality: 'high',
|
||||
success: (res) => {
|
||||
|
||||
this.src = res.tempImagePath
|
||||
|
||||
uni.previewImage({
|
||||
urls: [res.tempImagePath]
|
||||
})
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
|
||||
error(e) {
|
||||
console.log(e.detail);
|
||||
},
|
||||
|
||||
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
// cardSwiper点击事件
|
||||
handleSwiperClick(index) {
|
||||
this.cardCur = index
|
||||
},
|
||||
|
||||
|
||||
// imgSwiper
|
||||
imgSwiper(e) {
|
||||
this.imgCur = e.detail.current
|
||||
},
|
||||
// imgSwiper点击事件
|
||||
handleSwiperClick2(index) {
|
||||
this.imgCur = index
|
||||
},
|
||||
|
||||
// linearSwiper
|
||||
linearSwiper(e) {
|
||||
this.linearCur = e.detail.current
|
||||
},
|
||||
// linearSwiper点击事件
|
||||
handleSwiperClick3(index) {
|
||||
this.linearCur = index
|
||||
},
|
||||
|
||||
prevSlide() {
|
||||
// 点击按钮切换到上一个
|
||||
this.imgCur = (this.imgCur - 1 + 10) % 10; // 有10个
|
||||
},
|
||||
nextSlide() {
|
||||
// 点击按钮切换到下一个
|
||||
this.imgCur = (this.imgCur + 1) % 10; // 有10个
|
||||
},
|
||||
|
||||
prevSlideLinear() {
|
||||
// 点击按钮切换到上一个
|
||||
this.linearCur = (this.linearCur - 1 + 10) % 10; // 有10个
|
||||
},
|
||||
nextSlideLinear() {
|
||||
// 点击按钮切换到下一个
|
||||
this.linearCur = (this.linearCur + 1) % 10; // 有10个
|
||||
},
|
||||
|
||||
|
||||
// 提示
|
||||
open() {
|
||||
wx.vibrateShort();
|
||||
this.$refs.toast.show({
|
||||
title: '',
|
||||
content: '图鸟补光灯为纯前端模板，没有后台功能，不会泄露你的任何隐私',
|
||||
icon: '',
|
||||
image: '',
|
||||
duration: 1200
|
||||
})
|
||||
},
|
||||
|
||||
// 点击内容提示信息
|
||||
tipsClick() {
|
||||
wx.vibrateShort();
|
||||
this.showContentTips = !this.showContentTips
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.template-home {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
/* 胶囊*/
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
// css不写多一些，页面的玩法就很难炫起来，所以别吐槽css多了，下方分类的很清晰了的，且尽量不用那种看不懂的scss写法了的
|
||||
|
||||
.dd-camera{
|
||||
position: fixed;
|
||||
top: 160rpx;
|
||||
left: calc(50vw - 175rpx);
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
.dd-rotate{
|
||||
-webkit-transform: rotate(135deg);
|
||||
-ms-transform: rotate(135deg);
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
.time{
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* 全屏轮播 start*/
|
||||
.card-swiper {
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 750rpx !important;
|
||||
left: 0rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100vh;
|
||||
border-radius: 0rpx;
|
||||
transform: scale(1);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
will-change: transform;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: none;
|
||||
transition: all 0.2s ease-in 0s;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -68vh;
|
||||
// margin-top: calc(-380rpx + env(safe-area-inset-bottom) / 2);
|
||||
// margin-top: calc(-380rpx + constant(safe-area-inset-bottom));
|
||||
background: none;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 80vh;
|
||||
// border-radius: 10rpx;
|
||||
transform: translate(0rpx, 0rpx) scale(1);
|
||||
transition: all 0.6s ease 0s;
|
||||
will-change: transform;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
|
||||
margin-top: -68vh;
|
||||
// margin-top: calc(-380rpx - env(safe-area-inset-bottom) / 2);
|
||||
// margin-top: calc(-380rpx - constant(safe-area-inset-bottom));
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
padding: 30rpx 10rpx 180rpx 30rpx;
|
||||
transform: translate(0rpx, 0rpx) scale(1);
|
||||
transition: all 0.6s ease 0s;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 2rpx solid #FFFFFF;
|
||||
}
|
||||
|
||||
.active-bg {
|
||||
background-color: #FFFFFF33;
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
|
||||
/* 轮播图片入口 start*/
|
||||
.img-swiper {
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
||||
.img-swiper swiper-item {
|
||||
width: 750rpx !important;
|
||||
left: 0rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.img-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100vh;
|
||||
border-radius: 0rpx;
|
||||
transform: scale(0.9);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
will-change: transform;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.img-swiper swiper-item.cur .swiper-item {
|
||||
transform: scale(1);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.random-color {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
animation: color-loop 18s infinite;
|
||||
}
|
||||
|
||||
@keyframes color-loop {
|
||||
0% {
|
||||
background: #ff00a6;
|
||||
}
|
||||
|
||||
20% {
|
||||
background: #aa00ff;
|
||||
}
|
||||
|
||||
40% {
|
||||
background: #0099ff;
|
||||
}
|
||||
|
||||
60% {
|
||||
background: #00ffe2;
|
||||
}
|
||||
|
||||
80% {
|
||||
background: #f1b500;
|
||||
}
|
||||
|
||||
100% {
|
||||
background: #f10000;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.gradient-color {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
// background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
|
||||
// background: linear-gradient(-120deg, #9A5CE5, #01BEFF, #00F5D4, #43e97b);
|
||||
// background: linear-gradient(-120deg,#c471f5, #ec008c, #ff4e50,#f9d423);
|
||||
background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a, #c471f5, #ec008c, #ff4e50);
|
||||
background-size: 500% 500%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientBG {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 图标容器1 start */
|
||||
.icon1 {
|
||||
&__item {
|
||||
width: 30%;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
margin: 20rpx 10rpx;
|
||||
transform: scale(1);
|
||||
transition: transform 0.3s linear;
|
||||
transform-origin: center center;
|
||||
|
||||
&--icon {
|
||||
background-color: #FFFFFF33;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 50rpx;
|
||||
color: #FFFFFF;
|
||||
border-radius: 1000rpx;
|
||||
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_bg5.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 补光照片 start */
|
||||
.light-image {
|
||||
border-radius: 1000rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.light-pic {
|
||||
background-color: #FFFFFF33;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position: center;
|
||||
// border: 1rpx solid rgba(255,255,255,0.05);
|
||||
// box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
|
||||
border-radius: 1000rpx;
|
||||
overflow: hidden;
|
||||
// background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.time{
|
||||
transition: all 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.box-cur {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.box {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* 毛玻璃*/
|
||||
.dd-glass {
|
||||
width: 100%;
|
||||
backdrop-filter: blur(8rpx);
|
||||
-webkit-backdrop-filter: blur(8rpx);
|
||||
background-color: #000000CC;
|
||||
// background: linear-gradient(0deg, #000000CC, #0000005C);
|
||||
}
|
||||
|
||||
|
||||
/* 文字截取*/
|
||||
.clamp-text-1 {
|
||||
-webkit-line-clamp: 1;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.clamp-text-2 {
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 底部悬浮按钮 start*/
|
||||
.tn-tabbar-height {
|
||||
min-height: 60rpx;
|
||||
height: calc(80rpx + env(safe-area-inset-bottom) / 2);
|
||||
height: calc(80rpx + constant(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* 安全 start*/
|
||||
.tn-tabbar-bottom {
|
||||
min-height: 100rpx;
|
||||
height: calc(120rpx + env(safe-area-inset-bottom));
|
||||
height: calc(120rpx + constant(safe-area-inset-bottom) * 2);
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,424 @@
|
||||
<template>
|
||||
<view class="template-power 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="18000" @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>
|
||||
<view class="swiper-item2 image-banner">
|
||||
<image class="png-sussuspension" :src="item.pngurl" mode="heightFix" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
<view class="swiper-item-text">
|
||||
<view class="text-sussuspension">
|
||||
<view class="tn-text-xxl tn-text-bold tn-color-white">{{item.title}}</view>
|
||||
<view class="tn-text-bold tn-color-white tn-padding-top-xs" style="font-size: 60rpx;">{{item.name}}</view>
|
||||
<view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">{{item.text}}</view>
|
||||
</view>
|
||||
</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="power-round tn-bg-white">
|
||||
</view>
|
||||
|
||||
|
||||
<view class="power-radius" >
|
||||
|
||||
<!-- 方式17 start-->
|
||||
<view class="tn-flex tn-margin" style="padding: 15rpx 0 170rpx 0;">
|
||||
<view class="tn-flex-1 power-shadow power-radius tn-bg-white" style="margin-right: 15rpx;padding: 40rpx 0;">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon17__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-cyan tn-color-white tn-shadow-blur">
|
||||
<!-- <view class="tn-icon-shop"></view> -->
|
||||
<view class="tn-text-bold">
|
||||
借
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<view class="tn-text-ellipsis tn-text-xl tn-text-bold tn-padding-top-sm tn-color-cyan">免押金借</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 power-shadow power-radius tn-bg-white" style="margin-left: 15rpx;padding: 40rpx 0;">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon17__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orangeyellow tn-color-white tn-shadow-blur">
|
||||
<!-- <view class="tn-icon-electromobile"></view> -->
|
||||
<view class="tn-text-bold">
|
||||
还
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<view class="tn-text-ellipsis tn-text-xl tn-text-bold tn-padding-top-sm tn-color-orangeyellow">快速归还</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-company">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-black">附近门店</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-scan tn-color-white">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">扫码租借</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<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> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">个人中心</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplatePower',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
title: '一飞充天',
|
||||
name: '图鸟充电电',
|
||||
text: '充电就是快',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/banner-animate3.png',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/login/1/login_top3.png'
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
title: '图鸟南南',
|
||||
name: '欢迎加入东东们',
|
||||
text: '如果你也有不错的作品',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/banner-animate2.png',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
title: '图鸟西西',
|
||||
name: '一起玩转scss',
|
||||
text: '用最少的代码做最骚的效果',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
title: '图鸟北北',
|
||||
name: '微信号 tnkewo',
|
||||
text: '商业合作请联系作者',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/banner-animate.png',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
title: '图鸟猪猪',
|
||||
name: '努力成为大佬',
|
||||
text: '一起加油吖',
|
||||
url: 'https://resource.tuniaokj.com/images/shop/banner2.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 内容布局 start*/
|
||||
.power-shadow{
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
.power-radius{
|
||||
border-radius: 15%;
|
||||
}
|
||||
|
||||
/* 圆角 start*/
|
||||
.power-round {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: -40rpx;
|
||||
height: 42rpx;
|
||||
border-radius: 80rpx 80rpx 0 0;
|
||||
}
|
||||
|
||||
/* 悬浮 */
|
||||
.png-sussuspension{
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes suspension {
|
||||
0%, 100% {
|
||||
transform: translate(0 , 0);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-0.8rem , 1rem);
|
||||
}
|
||||
}
|
||||
.text-sussuspension{
|
||||
animation: suspension2 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes suspension2 {
|
||||
0%, 100% {
|
||||
transform: translate(0 , 0);
|
||||
}
|
||||
50% {
|
||||
transform: translate(0rem , 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 轮播视觉差 start */
|
||||
.card-swiper {
|
||||
height: 800rpx !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;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item2 {
|
||||
margin-top: -540rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 0rpx;
|
||||
transform: translate(140rpx, 20rpx) scale(0.3, 0.3);
|
||||
transition: all 0.6s ease 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item2 {
|
||||
margin-top: -620rpx;
|
||||
width: 100%;
|
||||
transform: translate(180rpx, 0rpx) scale(0.5, 0.5);
|
||||
transition: all 0.6s ease 0s;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -520rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
margin-top: -580rpx;
|
||||
width: 100%;
|
||||
transform: translate(0rpx, 60rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 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: -130rpx;
|
||||
margin: 0 8rpx !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* 图标容器17 start */
|
||||
.icon17 {
|
||||
&__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: 200rpx;
|
||||
height: 200rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 30%;
|
||||
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_bg5.png);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部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;
|
||||
}
|
||||
|
||||
.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: -60rpx auto 20rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #01BEFF;
|
||||
width: 90rpx !important;
|
||||
height: 90rpx !important;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: inline-block;
|
||||
margin: 15rpx auto 15rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<view class="template-start">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<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="false" 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" :style="'background-color: '+ item.color +''">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'" style="height: 100vh;width: 100vw;"></image>
|
||||
</view>
|
||||
<view class="swiper-item-png image-banner">
|
||||
<image :src="item.pngurl" mode="widthFix" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-text-xxl tn-text-bold tn-color-white">{{item.name}}</view>
|
||||
<view class="tn-text-xl tn-text-bold tn-color-white tn-padding-top-xs">{{item.text}}</view>
|
||||
</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="go">
|
||||
<tn-button :plain="true" shape="round" backgroundColor="#FFFFFF" fontColor="#FFFFFF" width="40vw" height="70rpx">立即体验</tn-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateStart',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '总有你想不到的创意',
|
||||
text: '海量分享',
|
||||
color: '#00C3E3',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/guide-bg1.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d7.png'
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '寻找一起成长的小伙伴',
|
||||
text: '愉快玩耍',
|
||||
color: '#FE5141',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/guide-bg2.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d8.png'
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '更多彩蛋等你探索',
|
||||
text: '酷炫多彩',
|
||||
color: '#EF9A01',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/guide-bg3.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d9.png'
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '商业合作请联系作者',
|
||||
text: '免费开源',
|
||||
color: '#D960C7',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/guide-bg4.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d10.png'
|
||||
}],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 轮播视觉差 start */
|
||||
.card-swiper {
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 750rpx !important;
|
||||
left: 0rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 0rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-png {
|
||||
margin-top: -85vh;
|
||||
display: block;
|
||||
border-radius: 0rpx;
|
||||
transform: translate(40rpx, 20rpx) scale(0.8, 0.8);
|
||||
transition: all 0.6s ease 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-png {
|
||||
margin-top: -85vh;
|
||||
transform: translate(0rpx, 0rpx) scale(1, 1);
|
||||
transition: all 0.6s ease 0s;
|
||||
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: 0rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(30rpx, -40rpx) scale(0.7, 0.7);
|
||||
transition: all 0.6s ease 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
margin-top: -60rpx;
|
||||
width: 100%;
|
||||
transform: translate(30rpx, 0rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 0s;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: fixed;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
background-color: #FFF;
|
||||
opacity: 0.4;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
right: -270rpx;
|
||||
top: -180rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 30rpx;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
/* 立即体验 start*/
|
||||
.go{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
bottom: 10vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,414 @@
|
||||
<template>
|
||||
<view class="template-classify">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed :bottomShadow="false">商品分类</tn-nav-bar>
|
||||
|
||||
<view class="tn-classify__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<view class="tn-classify__search--wrap tn-flex tn-flex-col-center tn-flex-row-center tn-border-solids-bottom">
|
||||
<view class="tn-classify__search__box tn-flex tn-flex-col-center tn-flex-row-center tn-bg-gray--light tn-color-gray--dark">
|
||||
<view class="tn-classify__search__icon tn-icon-search"></view>
|
||||
<view class="tn-classify__search__text">请输入商品名称</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分类列表和内容 -->
|
||||
<view class="tn-classify__container tn-bg-gray--light">
|
||||
<view class="tn-classify__container__wrap tn-flex tn-flex-nowrap tn-flex-row-around tn-bg-white">
|
||||
<!-- 左边容器 -->
|
||||
<scroll-view class="tn-classify__left-box tn-flex-basic-sm" :scroll-top="leftScrollViewTop" scroll-y scroll-with-animation :style="{height: scrollViewHeight + 'px'}">
|
||||
<view
|
||||
v-for="(item, index) in tabbar"
|
||||
:key="index"
|
||||
:id="`tabbar_item_${index}`"
|
||||
class="tn-classify__tabbar__item tn-flex tn-flex-col-center tn-flex-row-center"
|
||||
:class="[tabbarItemClass(index)]"
|
||||
@tap.stop="clickClassifyNav(index)">
|
||||
<view class="tn-classify__tabbar__item__title">{{ item }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 右边容器 -->
|
||||
<scroll-view class="tn-classify__right-box" scroll-y :scroll-top="rightScrollViewTop" :style="{height: scrollViewHeight + 'px'}">
|
||||
<block v-if="classifyContent.subClassify && classifyContent.subClassify.length > 0">
|
||||
<view class="tn-classify__content">
|
||||
<!-- 推荐商品轮播图 -->
|
||||
<view class="tn-classify__content__recomm">
|
||||
<tn-swiper v-if="classifyContent.recommendProduct.length > 0" class="tn-classify__content__recomm__swiper" :list="classifyContent.recommendProduct" :height="200" :effect3d="true"></tn-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 分类内容子栏目 -->
|
||||
<view v-for="(item,index) in classifyContent.subClassify" :key="index" class="tn-classify__content__sub-classify">
|
||||
<view class="tn-classify__content__sub-classify--title tn-text-lg tn-padding-top-sm">{{ item.title }}</view>
|
||||
|
||||
<view class="tn-classify__content__sub-classify__content tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-left">
|
||||
<view
|
||||
v-for="(sub_item,sub_index) in item.classify"
|
||||
:key="sub_index"
|
||||
class="tn-classify__content__sub-classify__content__item tn-flex tn-flex-wrap tn-flex-row-center"
|
||||
>
|
||||
<view class="tn-classify__content__sub-classify__content__image tn-flex tn-flex-col-center tn-flex-row-center">
|
||||
<image :src="sub_item.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="tn-classify__content__sub-classify__content__title tn-margin-bottom-sm">{{ sub_item.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-padding-bottom"></view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'templateShopClassify',
|
||||
data() {
|
||||
return {
|
||||
// 侧边栏分类数据
|
||||
tabbar: [
|
||||
'推荐分类',
|
||||
'医疗保健',
|
||||
'运动户外',
|
||||
'电脑办公',
|
||||
'家电',
|
||||
'宠物鲜花',
|
||||
'食品酒饮',
|
||||
'个护清洁',
|
||||
'手机',
|
||||
'数码',
|
||||
'母婴童装',
|
||||
'京东国际',
|
||||
'汽摩生活',
|
||||
'美妆护肤',
|
||||
'箱包',
|
||||
'鞋靴',
|
||||
'钟表珠宝',
|
||||
'玩具乐器',
|
||||
'内衣配饰',
|
||||
'生鲜',
|
||||
'家居厨具',
|
||||
'男装',
|
||||
'二手商品',
|
||||
'女装',
|
||||
'家具家装',
|
||||
'奢侈品',
|
||||
'计生情趣',
|
||||
'医药',
|
||||
'生活旅行',
|
||||
'图鸟服务',
|
||||
],
|
||||
// 分类里面的内容信息
|
||||
classifyContent: {
|
||||
// 推荐商品
|
||||
recommendProduct: [
|
||||
{image: 'https://resource.tuniaokj.com/images/shop/banner1.jpg', title: '推荐商品1'},
|
||||
{image: 'https://resource.tuniaokj.com/images/shop/banner2.jpg', title: '推荐商品2'},
|
||||
{image: 'https://resource.tuniaokj.com/images/shop/banner3.jpg', title: '推荐商品3'}
|
||||
],
|
||||
// 子栏目
|
||||
subClassifyTabbar: [],
|
||||
// 显示子栏目分类选项
|
||||
showSubClassifyTabbar: false,
|
||||
// 每个子栏目下的内容
|
||||
subClassify: [
|
||||
{
|
||||
title: '推荐分类',
|
||||
classify: [
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg', title: '海报设计'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg', title: '精美页面'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/computer1.jpg', title: '设计师电脑'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/computer2.jpg', title: '轻薄本'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg', title: '5G手机'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg', title: '游戏手机'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/watch1.jpg', title: '智能手表'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/watch2.jpg', title: '运动手表'},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '专场推荐',
|
||||
classify: [
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg', title: '5G手机'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg', title: '游戏手机'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/watch1.jpg', title: '智能手表'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/watch2.jpg', title: '运动手表'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/card.jpg', title: '图鸟服务'}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '专场推荐',
|
||||
classify: [
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/bag1.jpg', title: '环保袋'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/bag2.jpg', title: '手提袋'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/cup1.jpg', title: '奶茶杯'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/cup2.jpg', title: '纸杯'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/pillow.jpg', title: '抱枕'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/sticker.jpg', title: '贴纸'}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '专场推荐',
|
||||
classify: [
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/bag1.jpg', title: '环保袋'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/bag2.jpg', title: '手提袋'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/cup1.jpg', title: '奶茶杯'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/cup2.jpg', title: '纸杯'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/pillow.jpg', title: '抱枕'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/pillow2.jpg', title: '蓝色抱枕'}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// 分类菜单item的信息
|
||||
tabbarItemInfo: [],
|
||||
// scrollView的top值
|
||||
scrollViewBasicTop: 0,
|
||||
// scrollView的高度
|
||||
scrollViewHeight: 0,
|
||||
// 左边scrollView的滚动高度
|
||||
leftScrollViewTop: 0,
|
||||
// 右边scrollView的滚动高度
|
||||
rightScrollViewTop: 0,
|
||||
// 当前选中的tabbar序号
|
||||
currentTabbarIndex: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabbarItemClass() {
|
||||
return index => {
|
||||
if (index === this.currentTabbarIndex) {
|
||||
return 'tn-classify__tabbar__item--active tn-bg-white'
|
||||
} else {
|
||||
let clazz = 'tn-bg-gray--light'
|
||||
if (this.currentTabbarIndex > 0 && index === this.currentTabbarIndex - 1) {
|
||||
clazz += ' tn-classify__tabbar__item--active--prev'
|
||||
}
|
||||
if (this.currentTabbarIndex < this.tabbar.length && index === this.currentTabbarIndex + 1) {
|
||||
clazz += ' tn-classify__tabbar__item--active--next'
|
||||
}
|
||||
return clazz
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
this.getScrollViewInfo()
|
||||
this.getTabbarItemRect()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 获取scrollView的高度信息
|
||||
getScrollViewInfo() {
|
||||
// 获取搜索栏的bottom信息，然后用整个屏幕的可用高度减去bottom的值即可获取scrollView的高度(防止双重滚动)
|
||||
this._tGetRect('.tn-classify__search--wrap').then((rect) => {
|
||||
// 如果获取失败重新获取
|
||||
if (!rect) {
|
||||
setTimeout(() => {
|
||||
this.getScrollViewInfo()
|
||||
}, 10)
|
||||
return
|
||||
}
|
||||
// 获取当前屏幕的可用高度
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.scrollViewBasicTop = systemInfo.statusBarHeight + rect.bottom + uni.upx2px(10)
|
||||
this.scrollViewHeight = systemInfo.safeArea.height + systemInfo.statusBarHeight - rect.bottom - uni.upx2px(10)
|
||||
})
|
||||
},
|
||||
// 获取分类菜单每个item的信息
|
||||
getTabbarItemRect() {
|
||||
let view = uni.createSelectorQuery().in(this)
|
||||
for (let i = 0; i < this.tabbar.length; i++) {
|
||||
view.select('#tabbar_item_' + i).boundingClientRect()
|
||||
}
|
||||
view.exec(res => {
|
||||
if (!res.length) {
|
||||
setTimeout(() => {
|
||||
this.getTabbarItemRect()
|
||||
}, 10)
|
||||
return
|
||||
}
|
||||
|
||||
// 将每个分类item的相关信息
|
||||
res.map((item) => {
|
||||
this.tabbarItemInfo.push({
|
||||
top: item.top,
|
||||
height: item.height
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
// 点击了分类导航
|
||||
clickClassifyNav(index) {
|
||||
if (this.currentTabbarIndex === index) {
|
||||
return
|
||||
}
|
||||
this.currentTabbarIndex = index
|
||||
|
||||
this.handleLeftScrollView(index)
|
||||
this.switchClassifyContent()
|
||||
},
|
||||
// 点击分类后，处理scrollView滚动到居中位置
|
||||
handleLeftScrollView(index) {
|
||||
const tabbarItemTop = this.tabbarItemInfo[index].top - this.scrollViewBasicTop
|
||||
if (tabbarItemTop > this.scrollViewHeight / 2) {
|
||||
this.leftScrollViewTop = tabbarItemTop - (this.scrollViewHeight / 2) + this.tabbarItemInfo[index].height
|
||||
} else {
|
||||
this.leftScrollViewTop = 0
|
||||
}
|
||||
},
|
||||
// 切换对应分类的数据
|
||||
switchClassifyContent() {
|
||||
this.rightScrollViewTop = 1
|
||||
this.$nextTick(() => {
|
||||
this.rightScrollViewTop = 0
|
||||
})
|
||||
this.classifyContent.subClassify[0].title = this.tabbar[this.currentTabbarIndex]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tn-classify {
|
||||
|
||||
/* 搜索栏 start */
|
||||
&__search {
|
||||
&--wrap {
|
||||
height: 126rpx;
|
||||
}
|
||||
|
||||
&__box {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 20rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
/* 搜索栏 end */
|
||||
|
||||
/* 分类列表和内容 strat */
|
||||
&__container {
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
&__left-box {
|
||||
|
||||
}
|
||||
|
||||
&__right-box {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
/* 分类列表和内容 end */
|
||||
|
||||
/* 侧边导航 start */
|
||||
&__tabbar {
|
||||
&__item {
|
||||
height: 90rpx;
|
||||
|
||||
&:first-child {
|
||||
border-top-right-radius: 0rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: 0rpx;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background-color: #FFFFFF;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 12rpx;
|
||||
height: 40rpx;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
background-color: $tn-main-color;
|
||||
border-radius: 12rpx;
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
}
|
||||
|
||||
&--prev {
|
||||
border-bottom-right-radius: 26rpx;
|
||||
}
|
||||
|
||||
&--next {
|
||||
border-top-right-radius: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 侧边导航 end */
|
||||
|
||||
/* 分类内容 start */
|
||||
&__content {
|
||||
margin: 18rpx;
|
||||
|
||||
/* 推荐商品 start */
|
||||
&__recomm {
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
&__swiper {
|
||||
|
||||
}
|
||||
}
|
||||
/* 推荐商品 end */
|
||||
|
||||
/* 子栏目 start */
|
||||
&__sub-classify {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&--title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
&__content {
|
||||
|
||||
&__item {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
&__image {
|
||||
background-color: rgba(188, 188, 188, 0.1);
|
||||
border-radius: 12rpx;
|
||||
margin: 10rpx;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
overflow: hidden;
|
||||
border: 1rpx solid rgba(0,0,0,0.02);
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 子栏目 end */
|
||||
}
|
||||
/* 分类内容 end */
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,805 @@
|
||||
<template>
|
||||
<view class="template-money 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="top-backgroup">
|
||||
<image src='https://resource.tuniaokj.com/images/money/money-bg.jpg' mode='heightFix' class='backgroud-image'></image>
|
||||
</view>
|
||||
<swiper class="card-swiper" :current="cardCur" :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="heightFix" v-if="item.type=='image'" ></image>
|
||||
</view>
|
||||
<view class="swiper-item-text tn-text-center">
|
||||
<view class="tn-text-bold tn-padding-top-xs tn-color-brown">
|
||||
<text class="tn-icon-copy tn-padding-right-xs"></text>
|
||||
{{item.name}}
|
||||
<text class="tn-icon-copy tn-padding-left-xs"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="indication">
|
||||
<block v-for="(item,index) in swiperList" :key="index">
|
||||
<view class="spot tn-text-center tn-padding-top-sm tn-shadow-blur tn-color-red" :class="cardCur==index?'active':''" @tap.stop="handleSwiperClick(index)">
|
||||
<view class="tn-icon-lucky-money-fill tn-text-xxl icon-text"></view>
|
||||
<view class="">{{item.text}}</view>
|
||||
<view class="tn-text-sm">{{item.get}}</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="" style="background-image:url('https://resource.tuniaokj.com/images/money/bgpng.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
top: -58vh;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width:100%;
|
||||
height:270rpx">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- banner start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-padding-xs tn-margin-top-xl">
|
||||
<view class=" " style="width: 100%;">
|
||||
<view class="image-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/capsule-banner/banner-coinbag.png')">
|
||||
<view class="image-capsule">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- banner end-->
|
||||
|
||||
<view class="tn-margin-top">
|
||||
<view class="nav_title--wrap">
|
||||
<view class="nav_title tn-cool-bg-color-15">
|
||||
<text class="tn-icon-gift tn-padding-right-sm"></text>
|
||||
礼 / 品 / 兑 / 换
|
||||
<text class="tn-icon-gift tn-padding-left-sm"></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" style="background-color: rgba(255,255,255,0.6);">
|
||||
<view class="image-pic" :style="'background-image:url(' + item.mainImage + ')'">
|
||||
<view class="image-year">
|
||||
</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 tn-icon-flower"></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-->
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
|
||||
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-home tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<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> -->
|
||||
</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">
|
||||
<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/tabbar/money-share.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">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-video tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">视频</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<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> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-xl"></view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateMoney',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '春节期间累计获得64839金币',
|
||||
text: '0.56元',
|
||||
get: '已领取',
|
||||
url: 'https://resource.tuniaokj.com/images/money/money-test.png',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '春节期间累计获得231345金币',
|
||||
text: '1.29元',
|
||||
get: '已领取',
|
||||
url: 'https://resource.tuniaokj.com/images/money/money-test2.png',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '春节期间累计获得342432金币',
|
||||
text: '5.??元',
|
||||
get: '未领取',
|
||||
url: 'https://resource.tuniaokj.com/images/money/money-test.png',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '春节期间累计获得643498金币',
|
||||
text: '8.??元',
|
||||
get: '未领取',
|
||||
url: 'https://resource.tuniaokj.com/images/money/money-test2.png',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '春节期间累计获得975521金币',
|
||||
text: '99元',
|
||||
get: '未领取',
|
||||
url: 'https://resource.tuniaokj.com/images/money/money-test.png',
|
||||
}],
|
||||
content: [
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['99金币'],
|
||||
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: 999,
|
||||
commentCount: 999,
|
||||
likeCount: 999
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['66金币'],
|
||||
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: ['1266金币'],
|
||||
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: ['9999金币'],
|
||||
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: ['6666金币'],
|
||||
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: ['888金币'],
|
||||
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: ['299金币'],
|
||||
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: ['899金币'],
|
||||
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
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
// swiper点击事件
|
||||
handleSwiperClick(index) {
|
||||
this.cardCur = index
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 顶部背景图 start */
|
||||
.top-backgroup {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
z-index: -1;
|
||||
|
||||
.backgroud-image {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
// z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.card-swiper {
|
||||
height: 70vh !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 750rpx !important;
|
||||
left: 0rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
margin-top: 30vh;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100vh;
|
||||
border-radius: 0rpx;
|
||||
transform: translate(30rpx, 0rpx) scale(0.8);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: translate(30rpx, 0rpx) scale(1, 1);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -65vh;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
display: block;
|
||||
border-radius: 10rpx;
|
||||
transform: scale(0.7, 0.7);
|
||||
transition: all 0.4s ease 0s;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
padding-left: 30rpx;
|
||||
transform: scale(1);
|
||||
transition: all 0.4s ease 0s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
opacity: 1;
|
||||
width: 100rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 20rpx 15rpx !important;
|
||||
left: 0rpx;
|
||||
right: 0;
|
||||
top: -53vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active .icon-text{
|
||||
transform: scale(1.6);
|
||||
margin-bottom: 20rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 标题 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 */
|
||||
|
||||
/* 文章内容 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: #82B2FF;
|
||||
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-year{
|
||||
padding: 150rpx 0rpx;
|
||||
font-size: 16rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-capsule{
|
||||
padding: 100rpx 0rpx;
|
||||
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: 20rpx 20rpx 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: 130rpx !important;
|
||||
height: 130rpx !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: 130rpx;
|
||||
height: 130rpx;
|
||||
display: inline-block;
|
||||
margin: 0rpx auto 0rpx;
|
||||
}
|
||||
|
||||
/* 流星+悬浮 */
|
||||
.nav-index-button {
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
z-index: 999999;
|
||||
|
||||
|
||||
&__content {
|
||||
position: absolute;
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
&--icon {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
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/arc2.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,533 @@
|
||||
<template>
|
||||
<view class="template-order">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#F7F7F7CC">
|
||||
<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-left tn-color-gray--dark">
|
||||
<view class="custom-nav__search__icon tn-icon-search"></view>
|
||||
<view class="custom-nav__search__text">搜索我的订单</view>
|
||||
</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" @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">完成</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="order__item__operaation__left--text">更多</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="order__item__operaation__left--text">更多</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="order__item__operaation__left--text">更多</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="order__item__operaation__left--text">更多</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/pillow.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/bag1.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">5000</text>
|
||||
<text class="order__item__content__info__price__value--decimal">.00</text>
|
||||
</view>
|
||||
<view class="order__item__content__info__count">
|
||||
<text>共5件</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="order__item__operaation__left--text">更多</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: 'TemplateOrder',
|
||||
mixins: [templatePageMixin],
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{name: '全部'},
|
||||
{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>
|
||||
|
||||
.template-order {
|
||||
background-color: #F7F7F7CC;
|
||||
}
|
||||
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 65%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
padding: 28rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx;
|
||||
font-size: 24rpx;
|
||||
background-color: #FFFFFF;
|
||||
border: 1rpx solid #E6E6E6;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 自定义导航栏内容 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;
|
||||
|
||||
&: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: 22rpx;
|
||||
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>
|
||||
@@ -0,0 +1,796 @@
|
||||
<template>
|
||||
<view class="template-store 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 fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<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/logo/logo2.png')">
|
||||
<view class="logo-image">
|
||||
</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>
|
||||
</tn-nav-bar>
|
||||
|
||||
|
||||
|
||||
<view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
新年庆典，狂欢来袭
|
||||
</view>
|
||||
<view class="tn-margin" style="font-size: 50rpx;">
|
||||
<text class="tn-icon-menu-more"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<swiper class="card-swiper tn-margin-top-sm" :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>
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-text-xxl tn-text-bold tn-color-white">{{item.title}}</view>
|
||||
<view class="tn-text-bold tn-color-white tn-padding-top-xs" style="font-size: 40rpx;">{{item.name}}</view>
|
||||
<view class=" tn-text-bold tn-color-red tn-padding-top-sm tn-padding-bottom-sm">
|
||||
<text class="tn-text-lg">￥</text>
|
||||
<text class="tn-text-sm">{{item.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-item-text2">
|
||||
<view class="tn-text-xxl tn-text-bold">
|
||||
<text class="tn-color-white tn-float-right tn-bg-red" style="border-radius: 10rpx;padding: 10rpx 20rpx;">马上抢</text>
|
||||
</view>
|
||||
</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>
|
||||
|
||||
<!-- 方式7 start-->
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-1 tn-radius">
|
||||
<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://resource.tuniaokj.com/images/icon/a004.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">排行</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-radius">
|
||||
<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://resource.tuniaokj.com/images/icon/a002.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">签到</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-radius">
|
||||
<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://resource.tuniaokj.com/images/icon/a006.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">免费</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-radius">
|
||||
<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://resource.tuniaokj.com/images/icon/a007.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">会员</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式7 end-->
|
||||
|
||||
<!-- 换背景形式-->
|
||||
<!-- <view class="image-div tn-margin">
|
||||
<image src='https://resource.tuniaokj.com/images/swiper/capsule1.png' mode='widthFix' class='image'></image>
|
||||
</view> -->
|
||||
|
||||
<!-- banner start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm">
|
||||
<view class=" " style="width: 100%;">
|
||||
<view class="image-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/swiper/capsule1.png')">
|
||||
<view class="image-store">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- banner end-->
|
||||
|
||||
<view class="tn-margin-top">
|
||||
<view class="nav_title--wrap">
|
||||
<view class="nav_title tn-cool-bg-color-16">
|
||||
<text class="tn-icon-star tn-padding-right-sm"></text>
|
||||
热 / 门 / 美 / 食
|
||||
<text class="tn-icon-star tn-padding-left-sm"></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 tn-icon-flower"></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-->
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed" style="border-radius: 60rpx 60rpx 0 0;">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-home-smile">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/a1.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-black">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-menu-list tn-color-gray">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/k2.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">分类</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-cart tn-color-gray">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/i2.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">购物车</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-my tn-color-gray">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/d2.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: 'TemplateStore',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
title: '巴西烤肉-午餐券12元',
|
||||
name: '祈福新村2号街',
|
||||
text: '59.00',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
title: '巴西烤肉-午餐券12元',
|
||||
name: '祈福新村2号街',
|
||||
text: '59.00',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
title: '巴西烤肉-午餐券12元',
|
||||
name: '祈福新村2号街',
|
||||
text: '59.00',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
title: '巴西烤肉-午餐券12元',
|
||||
name: '祈福新村2号街',
|
||||
text: '59.00',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
title: '巴西烤肉-午餐券12元',
|
||||
name: '祈福新村2号街',
|
||||
text: '59.00',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}],
|
||||
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: 999,
|
||||
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
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 60%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 15rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx 0 60rpx 60rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
/* 轮播视觉差 start */
|
||||
.card-swiper {
|
||||
height: 400rpx !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 620rpx !important;
|
||||
left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 0rpx 90rpx 0rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 30rpx;
|
||||
transform: scale(0.9);
|
||||
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;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -140rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 70%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
margin-top: -200rpx;
|
||||
width: 100%;
|
||||
transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 0s;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text2 {
|
||||
margin-top: -160rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
|
||||
transition: all 0.3s ease 0s;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text2 {
|
||||
margin-top: -120rpx;
|
||||
width: 100%;
|
||||
transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
|
||||
transition: all 0.3s ease 0s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.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: #000000;
|
||||
opacity: 0.2;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 40rpx;
|
||||
top: -60rpx;
|
||||
margin: 0 8rpx !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 30rpx;
|
||||
background-color: #E83A30;
|
||||
}
|
||||
|
||||
/* 图标容器7 start */
|
||||
.icon7 {
|
||||
&__item {
|
||||
width: 30%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 10rpx;
|
||||
margin: 20rpx 10rpx;
|
||||
transform: scale(1);
|
||||
transition: transform 0.3s linear;
|
||||
transform-origin: center center;
|
||||
|
||||
&--icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
font-size: 50rpx;
|
||||
border-radius: 0;
|
||||
margin-bottom: -10rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-store{
|
||||
padding:120rpx 0rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
}
|
||||
|
||||
/* 胶囊背景图 start */
|
||||
.image-div {
|
||||
height: 450rpx;
|
||||
z-index: -1;
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 667rpx;
|
||||
// z-index: -1;
|
||||
}
|
||||
}
|
||||
/* 胶囊背景图 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 */
|
||||
|
||||
/* 文章内容 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*/
|
||||
|
||||
/* 底部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;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,68 @@
|
||||
export default [
|
||||
{
|
||||
text: '广东省',
|
||||
value: '440000',
|
||||
children: [
|
||||
{
|
||||
text:'广州市',
|
||||
value:'440100',
|
||||
children: [
|
||||
{text:'荔湾区',value:'440103'},
|
||||
{text:'越秀区',value:'440104'},
|
||||
{text:'海珠区',value:'440105'},
|
||||
{text:'天河区',value:'440106'},
|
||||
{text:'白云区',value:'440111'},
|
||||
{text:'黄埔区',value:'440112'},
|
||||
{text:'番禺区',value:'440113'},
|
||||
{text:'花都区',value:'440114'},
|
||||
{text:'南沙区',value:'440115'},
|
||||
{text:'从化区',value:'440117'},
|
||||
{text:'增城区',value:'440118'}
|
||||
]
|
||||
},
|
||||
{text:'韶关市',value:'440200'},
|
||||
{
|
||||
text:'深圳市',
|
||||
value:'440300',
|
||||
children: [
|
||||
{text:'罗湖区',value:'440303'},
|
||||
{text:'福田区',value:'440304'},
|
||||
{text:'南山区',value:'440305'},
|
||||
{text:'宝安区',value:'440306'},
|
||||
{text:'龙岗区',value:'440307'},
|
||||
{text:'盐田区',value:'440308'},
|
||||
{text:'龙华区',value:'440309'},
|
||||
{text:'坪山区',value:'440310'}
|
||||
]
|
||||
},
|
||||
{text:'珠海市',value:'440400'},
|
||||
{text:'汕头市',value:'440500'},
|
||||
{
|
||||
text:'佛山市',
|
||||
value:'440600',
|
||||
children: [
|
||||
{text:'禅城区',value:'440604'},
|
||||
{text:'南海区',value:'440605'},
|
||||
{text:'顺德区',value:'440606'},
|
||||
{text:'三水区',value:'440607'},
|
||||
{text:'高明区',value:'440608'}
|
||||
]
|
||||
},
|
||||
{text:'江门市',value:'440700'},
|
||||
{text:'湛江市',value:'440800'},
|
||||
{text:'茂名市',value:'440900'},
|
||||
{text:'肇庆市',value:'441200'},
|
||||
{text:'惠州市',value:'441300'},
|
||||
{text:'梅州市',value:'441400'},
|
||||
{text:'汕尾市',value:'441500'},
|
||||
{text:'河源市',value:'441600'},
|
||||
{text:'阳江市',value:'441700'},
|
||||
{text:'清远市',value:'441800'},
|
||||
{text:'东莞市',value:'441900'},
|
||||
{text:'中山市',value:'442000'},
|
||||
{text:'潮州市',value:'445100'},
|
||||
{text:'揭阳市',value:'445200'},
|
||||
{text:'云浮市',value:'445300'},
|
||||
]
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user