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

新增10+页面模板

Browse Source 
新增form表单部分组件的演示代码

新增图标

添加第三方开发插件演示（所属权归属第三方）

新增tn-scroll-view下拉组件开发（会员）

新增tn-stack-swiper堆叠轮播添加垂直滚动属性（会员）

新增tn-waterfall瀑布流组件（会员）

新增tn-tree-view树形菜单组件（会员）

新增tn-cascade-selection级联选择组件（会员）

新增tn-custom-swiper组件（会员【实验室】）

新增tn-lazy-load懒加载组件

新增tn-load-more加载更多组件

新增tn-sekeleton骨架屏组件

新增tn-empty空白页组件

新增tn-landscape压屏窗组件

新增tn-verification-code-input验证码输入组件

新增tn-goods-nav商品导航组件

修复tn-slider在tn-form-item下在H5端无法滑动的bug

修复tn-swipe-action-item点击回调事件中无法读取name属性的bug

修复群友已反馈的bug

优化部分页面在iphone上底部确实的问题
This commit is contained in:
JaylenTech
2022-03-16 09:13:58 +08:00
parent 4883c3ff4c
commit 81579ccee5
56 changed files with 6297 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
templatePage/animate/hollow/hollow.vue
View File

@@ -67,8 +67,7 @@
</view>
<view class="hollow">
<view class="tn-text-xxl">
<text class="">Hi，</text>
<open-data type="userNickName"></open-data>
<text class="">Hi，图鸟的小伙伴</text>
</view>
<view class="tn-text-xl tn-padding-top">
技术的友情，有你真好

4
templatePage/health/qrcode/qrcode.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="template-screen">
<view class="template-screen tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@@ -131,7 +131,7 @@
<!-- 图文 -->
<view class="tn-bg-white tn-flex tn-flex-direction-column" style="padding-bottom: 170rpx;">
<view class="tn-bg-white tn-flex tn-flex-direction-column" style="padding-bottom: 110rpx;">
<block v-for="(item,index) in content" :key="index">
<view class="tn-blogger-content__wrap">

5
templatePage/home/course/course.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="template-course">
<view class="template-course tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@@ -129,7 +129,7 @@
</view>
<!-- 比例 start-->
<view class="tn-flex tn-flex-wrap tn-margin-sm tn-padding-bottom-xl" style="padding-bottom: 170rpx;">
<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">
@@ -195,6 +195,7 @@
<view class="tn-color-gray">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>

6
templatePage/home/design/design.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="template-design">
<view class="template-design tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@@ -71,7 +71,7 @@
<!-- 图文 -->
<view class="tn-flex tn-flex-direction-column tn-margin-bottom">
<view class="tn-flex tn-flex-direction-column">
<block v-for="(item,index) in content" :key="index">
<view class="tn-blogger-content__wrap">
@@ -154,6 +154,7 @@
<view class="tn-color-gray">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
@@ -353,7 +354,6 @@
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-design{
margin-bottom: calc(110rpx + env(safe-area-inset-bottom) / 2);;
}
/* 图标容器10 start */
.icon10 {

123
templatePage/home/job/job.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="template-job">
<view class="template-job tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@@ -58,7 +58,7 @@
</view>
<!-- 方式16 start-->
<view class="tn-flex tn-flex-wrap tn-margin job-shadow tn-margin-bottom-xl">
<view class="tn-flex tn-flex-wrap tn-margin job-shadow">
<block v-for="(item, index) in icons" :key="index">
<view class=" " style="width: 25%;">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-padding-xl">
@@ -74,6 +74,51 @@
</view>
<!-- 方式16 end-->
<!-- 底部tabbar start-->
<view class="tabbar footerfixed">
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-level">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-home.png'></image>
</view>
<view class="tn-color-black">职位</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-level">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-honor.png'></image>
</view>
<view class="tn-color-black">简历</view>
</view>
<view class="action">
<view class="bar-circle tn-shadow-blur">
<view class="tn-icon-message-fill tn-color-white">
</view>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image> -->
</view>
<!-- <view class="tn-color-gray">发布</view> -->
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-level">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-up.png'></image>
</view>
<view class="tn-color-black">提升</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-signpost tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-my.png'></image>
</view>
<view class="tn-color-gray">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
@@ -286,6 +331,8 @@
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-job{
}
/* 自定义导航栏内容 start */
.custom-nav {
height: 100%;
@@ -436,4 +483,76 @@
}
}
/* 图标容器16 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: -30rpx 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>

6
templatePage/home/music/music.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="template-music">
<view class="template-music tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@@ -120,7 +120,7 @@
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom tn-margin-sm">
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom tn-margin-sm">
<block v-for="(item,index) in content" :key="index">
<view class="tn-blogger-content__wrap">
@@ -205,6 +205,7 @@
</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
@@ -403,7 +404,6 @@
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-music{
margin-bottom: calc(110rpx + env(safe-area-inset-bottom) / 2);;
}
/* 自定义导航栏内容 start */

4
templatePage/home/screen/screen.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="template-screen">
<view class="template-screen tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@@ -134,7 +134,7 @@
<!-- 方式7 end-->
<!-- 图文 -->
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom" style="padding-bottom: 170rpx;">
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom" style="padding-bottom: 110rpx;">
<block v-for="(item,index) in content" :key="index">
<view class="tn-blogger-content__wrap">

84
templatePage/home/wallpaper/wallpaper.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="template-wallpaper" style="background-color: #343434;">
<view class="template-wallpaper tn-safe-area-inset-bottom" style="background-color: #343434;">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@@ -106,7 +106,7 @@
<!-- 比例 end-->
<!-- 图文 -->
<view class="tn-flex tn-flex-direction-column tn-padding-bottom">
<view class="tn-flex tn-flex-direction-column">
<block v-for="(item,index) in content" :key="index">
<view class="tn-blogger-content__wrap">
@@ -148,6 +148,35 @@
</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://tnuiimage.tnkjapp.com/tabbar/wallpaper-home.png'></image>
</view>
<view class="tn-color-white">首页</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-watercup tn-color-gray">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-more.png'></image>
</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://tnuiimage.tnkjapp.com/tabbar/wallpaper-my.png'></image>
</view>
<view class="tn-color-gray">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
@@ -358,6 +387,8 @@
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-wallpaper{
}
/* 自定义导航栏内容 start */
.custom-nav {
height: 100%;
@@ -530,5 +561,54 @@
border-radius: 10rpx;
}
/* 文章内容 end*/
/* 底部tabbar start*/
.footerfixed{
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
background-color: #080808;
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>

10
templatePage/life/plus/plus.vue
View File

@@ -25,7 +25,7 @@
<text class="tn-text-xl-xxl"> / </text>
<text class="tn-text-xxl tn-padding-left-sm">终身</text>
</view>
<view class="tn-margin-bottom-xl">（大约等于1个前端页面价格）</view>
<view class="tn-margin-bottom-xl">（大约等于1个前端页面价格💕）</view>
</view>
<view class="plus-text">
@@ -61,7 +61,7 @@
</view>
<view class="plus-text">
<view class="tn-text-bold">期待你的5星好评</view>
<view class="tn-text-bold">期待你的5星(⭐⭐⭐⭐⭐)好评</view>
<view class="tn-margin-bottom-xl">（尽管图鸟UI不是我最完美的作品）</view>
</view>
@@ -71,7 +71,7 @@
</view>
<view class="plus-text">
<view class="tn-text-bold">项目正式开始于2021年10月，于12月30上线</view>
<view class="tn-text-bold">项目正式开始于2021年10月，12月30开源公测，2022年1月30上线正式版</view>
<view class="tn-margin-bottom-xl">（期间断断续续的在接单恰饭）</view>
</view>
@@ -81,7 +81,7 @@
</view>
<view class="plus-text">
<view class="tn-text-bold">会员特权</view>
<view class="tn-text-bold tn-text-xxl"> <text class="tn-icon-vip-fill tn-padding-right-xs"></text> 会员特权 <text class="tn-icon-vip-fill tn-padding-left-xs"></text></view>
<view class="">①会员尊享更多酷炫模板，模板持续更新</view>
<view class="">②优先响应会员页面模板需求，icon需求</view>
<view class="">③会员版本更新，在会员群进行代码发送</view>
@@ -89,7 +89,7 @@
</view>
<view class="plus-text">
<view class="tn-text-bold">关于作者</view>
<view class="tn-text-bold tn-text-xxl"> <text class="tn-icon-moon-fill tn-padding-right-xs"></text> 关于作者 <text class="tn-icon-moon-fill tn-padding-left-xs"></text></view>
<view class="">蔡北北，95年，广州</view>
<view class="">浮夸UI设计</view>
<view class="">菜鸡软件开发</view>

343
templatePage/my/demo1/demo1.vue Normal file
View File

@@ -0,0 +1,343 @@
<template>
<view class="template-about 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://tnuiimage.tnkjapp.com/swiper/summer.jpg' mode='widthFix' class='backgroud-image'></image>
</view>
<view class="about__wrap">
<!-- 头像用户信息 -->
<view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<view class="user-info__avatar tn-bg-grey--light tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view>
</view>
<view class="user-info__nick-name">图鸟科技</view>
</view>
<!-- 消息&数据 -->
<view class="tn-shadow-warp" style="margin-top: 100rpx;border-radius: 12rpx;background-color: rgba(255,255,255,1);">
<view class="tn-flex">
<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="">
<view class="tn-text-xxl tn-color-orange">1.29W</view>
</view>
<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
<text class="tn-icon-fire"></text>
<text class="tn-padding-left-xs">人气</text>
</view>
</view>
</view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="">
<view class="tn-text-xxl tn-color-blue">216</view>
</view>
<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
<text class="tn-icon-share-circle"></text>
<text class="tn-padding-left-xs">分享</text>
</view>
</view>
</view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="">
<view class="tn-text-xxl tn-color-red">962</view>
</view>
<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
<text class="tn-icon-like"></text>
<text class="tn-padding-left-xs">爱心</text>
</view>
</view>
</view>
</view>
</view>
<!-- 更多信息-->
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" >
<view class="tn-icon-logo-tuniao"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">关于图鸟</view>
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white">
<view class="tn-icon-like-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">赞赏北北</view>
<!-- <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view> -->
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white">
<view class="tn-icon-set-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">更新日志</view>
<!-- <view class="tn-margin-left-sm tn-color-gray">懒</view> -->
</view>
</tn-list-cell>
</view>
<!-- 更多信息-->
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white" >
<view class="tn-icon-wechat-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">合作勾搭</view>
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white">
<view class="tn-icon-message-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">问题反馈</view>
<view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
<view class="tn-icon-phone-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">技术支持</view>
<view class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">136****0470</view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
<view class="tn-icon-safe-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">会员协议</view>
<view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
</view>
</tn-list-cell>
</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://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
</view>
<view class="tn-color-gray">首页</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-discover">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/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">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/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">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
</view>
<view class="tn-color-black">我的</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: 'about-demo-1',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-about{
}
/* 顶部背景图 start */
.top-backgroup {
height: 450rpx;
z-index: -1;
.backgroud-image {
width: 100%;
height: 667rpx;
// z-index: -1;
}
}
/* 顶部背景图 end */
/* 页面 start*/
.about-shadow{
border-radius: 15rpx;
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}
.about {
&__wrap {
position: relative;
z-index: 1;
margin: 20rpx 30rpx;
margin-top: -330rpx;
}
}
/* 页面 end*/
/* 用户信息 start */
.user-info {
&__container {
}
&__avatar {
width: 170rpx;
height: 170rpx;
border: 8rpx solid rgba(255,255,255,0.05);
border-radius: 50%;
overflow: hidden;
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
}
&__nick-name {
margin-top: 26rpx;
font-size: 36rpx;
font-weight: 600;
text-align: center;
}
}
/* 用户信息 end */
/* 图标容器1 start */
.icon1 {
&__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: 40rpx;
height: 40rpx;
font-size: 28rpx;
border-radius: 50%;
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://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
}
}
}
}
/* 图标容器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>

801
templatePage/my/demo2/demo2.vue Normal file
View File

@@ -0,0 +1,801 @@
<template>
<view class="template-about 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://tnuiimage.tnkjapp.com/my/my-bg2.png' mode='widthFix' class='backgroud-image'></image>
</view>
<button @click="navTuniaoHome">
<view class="dong">
<view class="monster">
<view class="monster__face">
<view class="monster__eye avatar-eye avatar-eye--green eye--left">
<view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
</view>
<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
<view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
</view>
<view class="monster__noses">
<view class="monster__nose"></view>
<view class="monster__nose"></view>
</view>
<view class="monster__mouth">
<view class="monster__top"></view>
<view class="monster__bottom"></view>
</view>
</view>
</view>
</view>
</button>
<view class="about__wrap">
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
<view class="justify-content-item">
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
<!-- 图标logo -->
<view class="logo-pic tn-shadow" >
<view class="logo-image">
<view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view>
</view>
</view>
<view class="tn-padding-right tn-color-white">
<view class="tn-padding-right tn-padding-left-sm tn-text-xxl">
图鸟小伙伴
</view>
<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">欢迎访问图鸟UI</view>
</view>
</view>
</view>
</view>
<!-- 方式7 start-->
<view class="tn-flex tn-padding-top-xl" style="margin-top: -20rpx;">
<view class="tn-flex-1 my-shadow tn-margin-right-sm tn-bg-white" style="padding: 30rpx 0;">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<image class="" src='https://tnuiimage.tnkjapp.com/my/my17.png' mode='aspectFit'></image>
</view>
<view class="tn-text-center">
<view class="tn-text-ellipsis tn-color-gray--dark">插件市场地址</view>
</view>
</view>
</view>
<view class="tn-flex-1 my-shadow tn-margin-left-sm tn-bg-white" style="padding: 30rpx 0;">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<image class="" src='https://tnuiimage.tnkjapp.com/my/my14.png' mode='aspectFit'></image>
</view>
<view class="tn-text-center">
<view class="tn-text-ellipsis tn-color-gray--dark">Gitee地址</view>
</view>
</view>
</view>
</view>
<!-- 方式7 end-->
<!-- 更多信息-->
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" >
<view class="tn-icon-logo-tuniao"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">关于图鸟</view>
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white">
<view class="tn-icon-like-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">赞赏北北</view>
<!-- <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view> -->
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white">
<view class="tn-icon-set-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">更新日志</view>
<!-- <view class="tn-margin-left-sm tn-color-gray">懒</view> -->
</view>
</tn-list-cell>
</view>
<!-- 更多信息-->
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white" >
<view class="tn-icon-wechat-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">合作勾搭</view>
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white">
<view class="tn-icon-message-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">问题反馈</view>
<view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
<view class="tn-icon-phone-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">技术支持</view>
<view class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">136****0470</view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
<view class="tn-icon-safe-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">会员协议</view>
<view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
</view>
</tn-list-cell>
</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://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
</view>
<view class="tn-color-gray">首页</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-discover">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/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">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/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">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
</view>
<view class="tn-color-black">我的</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: 'about-demo-2',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {
}
},
methods: {
// 跳转到
navTuniaoHome(e) {
wx.vibrateLong();
uni.navigateTo({
url: '/pages/index/index'
})
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-about{
}
/* 顶部背景图 start */
.top-backgroup {
height: 450rpx;
z-index: -1;
.backgroud-image {
width: 100%;
height: 667rpx;
// z-index: -1;
}
}
/* 顶部背景图 end */
/* 用户头像 start */
.logo-image{
width: 120rpx;
height: 120rpx;
position: relative;
background-color: #FFFFFF;
}
.logo-pic{
background-size: cover;
background-repeat:no-repeat;
// background-attachment:fixed;
background-position:top;
border-radius: 50%;
overflow: hidden;
}
/* 页面 start*/
.about-shadow{
border-radius: 15rpx;
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}
.about {
&__wrap {
position: relative;
z-index: 1;
margin: 20rpx 30rpx;
margin-top: -230rpx;
}
}
/* 页面 end*/
.my-shadow{
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
border-radius: 20rpx;
}
/* 图标容器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: 100rpx;
height: 100rpx;
font-size: 60rpx;
border-radius: 0;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
}
}
}
/* 图标容器1 start */
.icon1 {
&__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: 40rpx;
height: 40rpx;
font-size: 28rpx;
border-radius: 50%;
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://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
}
}
}
}
/* 图标容器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;
}
/* 大嘴鸟*/
.dong {
z-index: 9999;
position: fixed;
top: -40px;
right: -80px;
transform: scale(0.24);
-webkit-transform: scale(0.24);
-moz-transform: scale(0.24);
}
.monster {
transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
/* IE 9 */
-moz-transform: rotate(-50deg);
/* Firefox */
-webkit-transform: rotate(-50deg);
/* Safari 和 Chrome */
-o-transform: rotate(-50deg);
/* Opera */
display: flex;
justify-content: center;
position: relative;
width: 170px;
height: 400px;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
background-color: #3C47D7;
box-shadow: 20px 20px 60px #4650E5;
}
.monster__face {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
top: 14%;
width: 75%;
height: 160px;
}
.monster__noses {
top: 50%;
display: flex;
justify-content: space-between;
width: 28%;
height: auto;
margin-bottom: 10px;
}
.monster__nose {
width: 8px;
height: 12px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.5);
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
}
.monster__mouth {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 0%;
overflow: hidden;
border: 25px solid #FFC333;
border-radius: 100px;
background-color: #810332;
animation: mouth 1.75s infinite;
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
}
.monster__mouth::before {
content: '';
position: absolute;
width: 150px;
height: 80px;
border-radius: 100px;
background-color: #400018;
}
.monster__mouth::after {
content: '';
position: absolute;
bottom: -80px;
width: 160px;
height: 80px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
background-color: #DC1B50;
animation: tongue 1.75s infinite;
}
.monster__top {
position: absolute;
top: -30px;
width: 170px;
height: 30px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #ffffff;
z-index: 100;
animation: t 1.75s infinite;
}
.monster__bottom {
position: absolute;
bottom: 0;
width: 100px;
height: 30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #ffffff;
z-index: 100;
animation: b 1.75s infinite;
}
.avatar-eye {
position: absolute;
top: -10%;
width: 65px;
height: 65px;
background: linear-gradient(105deg, white, #cb87f4);
border-radius: 100%;
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
margin: 3px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.avatar-eye--green {
background: linear-gradient(to bottom, #fdfdfd, #c3efea);
}
.avatar-eye--violet {
background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
}
.eye--left {
left: 10%;
}
.eye--right {
left: 85%;
}
.eye--center {
left: 45%;
top: 10%;
}
.avatar-eye-pupil {
position: absolute;
width: 55%;
height: 55%;
left: 50%;
top: 25%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
z-index: 100;
border-radius: 100%;
}
.pupil--green {
background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
}
.pupil--pink {
background: linear-gradient(135deg, #f1a183, #8535cd);
}
.avatar-eye-pupil-blackThing {
position: absolute;
width: 55%;
height: 55%;
left: 50%;
top: 25%;
background: #2c2f32;
-webkit-transform: translate(-50%);
transform: translate(-50%);
border-radius: 100%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.avatar-eye-pupil-lightReflection {
position: absolute;
width: 7px;
height: 7px;
left: 25%;
top: 10%;
background: #ebebeb;
-webkit-transform: translate(-50%);
transform: translate(-50%);
border-radius: 100%;
box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
}
/**/
@keyframes t {
0%,
10%,
80%,
100% {
top: -30px;
}
20% {
top: 0px;
}
30% {
top: -20px;
}
40% {
top: -0px;
}
50% {
top: -25px;
}
70% {
top: 0px;
}
}
@keyframes b {
0%,
10%,
80%,
100% {
bottom: -30px;
}
20% {
bottom: 0px;
}
30% {
bottom: -20px;
}
40% {
bottom: -0px;
}
50% {
bottom: -25px;
}
70% {
bottom: 0px;
}
}
@keyframes mouth {
0%,
10%,
100% {
width: 100%;
height: 0%;
}
15% {
width: 90%;
height: 30%;
}
20% {
width: 50%;
height: 70%;
}
25% {
width: 70%;
height: 70%;
}
30% {
width: 80%;
height: 60%;
}
35% {
width: 60%;
height: 70%;
}
40% {
width: 55%;
height: 75%;
}
45% {
width: 50%;
height: 90%;
}
50% {
width: 40%;
height: 70%;
}
55% {
width: 70%;
height: 95%;
}
60% {
width: 40%;
height: 50%;
}
65% {
width: 100%;
height: 60%;
}
70% {
width: 100%;
height: 70%;
}
75% {
width: 90%;
height: 70%;
}
80% {
width: 50%;
height: 70%;
}
85% {
width: 90%;
height: 50%;
}
85% {
width: 40%;
height: 70%;
}
90% {
width: 90%;
height: 30%;
}
95% {
width: 100%;
height: 10%;
}
}
@keyframes tongue {
0%,
20%,
100% {
bottom: -80px;
}
30%,
90% {
bottom: -40px;
}
40% {
bottom: -45px;
}
50% {
bottom: -50px;
}
70% {
bottom: -80px;
}
90% {
bottom: -40px;
}
}
</style>

955
templatePage/my/demo3/demo3.vue Normal file
View File

@@ -0,0 +1,955 @@
<template>
<view class="template-about 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://tnuiimage.tnkjapp.com/my/my-bg2.png' mode='widthFix' class='backgroud-image'></image>
</view>
<button @click="navTuniaoHome">
<view class="dong">
<view class="monster">
<view class="monster__face">
<view class="monster__eye avatar-eye avatar-eye--green eye--left">
<view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
</view>
<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
<view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
</view>
<view class="monster__noses">
<view class="monster__nose"></view>
<view class="monster__nose"></view>
</view>
<view class="monster__mouth">
<view class="monster__top"></view>
<view class="monster__bottom"></view>
</view>
</view>
</view>
</view>
</button>
<view class="about__wrap">
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
<view class="justify-content-item">
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
<!-- 图标logo -->
<view class="logo-pic tn-shadow" >
<view class="logo-image">
<view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view>
</view>
</view>
<view class="tn-padding-right tn-color-white">
<view class="tn-padding-right tn-padding-left-sm tn-text-xxl">
图鸟小伙伴
</view>
<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">亲爱的会员你好吖</view>
</view>
</view>
</view>
</view>
<!-- 更多信息-->
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm tn-color-black tn-bg-white">
<!-- 方式12 start-->
<view class="tn-flex tn-flex-row-center tn-radius">
<view class="tn-padding-sm tn-margin-xs tn-radius">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<view class="tn-icon-vip"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">我的订单</text>
</view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs tn-radius">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<view class="tn-icon-money"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">余额充值</text>
</view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs tn-radius">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<view class="tn-icon-ticket"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">消费明细</text>
</view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs tn-radius">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<view class="tn-icon-lucky-money"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">红包卡券</text>
</view>
</view>
</view>
</view>
<view class="tn-flex tn-flex-row-center tn-radius">
<view class="tn-padding-sm tn-margin-xs tn-radius">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<view class="tn-icon-shop"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">积分商城</text>
</view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs tn-radius">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<view class="tn-icon-order"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">积分订单</text>
</view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs tn-radius">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<view class="tn-icon-star"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">店铺收藏</text>
</view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs tn-radius">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<view class="tn-icon-map"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">收货地址</text>
</view>
</view>
</view>
</view>
<!-- 方式12 end-->
</view>
<view class="tn-flex tn-flex-row-between tn-padding-top-xl">
<view class="justify-content-item tn-text-bold tn-text-lg">
<text class="">更多功能</text>
</view>
<view class="justify-content-item tn-text-df">
<text class="tn-padding-xs">全部</text>
<text class="tn-icon-right"></text>
</view>
</view>
<!-- 更多信息-->
<view class="about-shadow tn-margin-top tn-padding-top-sm tn-padding-bottom-sm">
<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-df 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="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white" >
<view class="tn-icon-wechat-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">合作勾搭</view>
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white">
<view class="tn-icon-message-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">问题反馈</view>
<view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
<view class="tn-icon-phone-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">技术支持</view>
<view class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">136****0470</view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
<view class="tn-icon-safe-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">会员协议</view>
<view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
</view>
</tn-list-cell>
</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://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
</view>
<view class="tn-color-gray">首页</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-discover">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/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">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/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">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
</view>
<view class="tn-color-black">我的</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: 'about-demo-3',
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',
}
]
}
},
methods: {
// 跳转到
navTuniaoHome(e) {
wx.vibrateLong();
uni.navigateTo({
url: '/pages/index/index'
})
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-about{
}
/* 顶部背景图 start */
.top-backgroup {
height: 450rpx;
z-index: -1;
.backgroud-image {
width: 100%;
height: 667rpx;
// z-index: -1;
}
}
/* 顶部背景图 end */
/* 用户头像 start */
.logo-image{
width: 120rpx;
height: 120rpx;
position: relative;
}
.logo-pic{
background-size: cover;
background-repeat:no-repeat;
// background-attachment:fixed;
background-position:top;
border-radius: 50%;
overflow: hidden;
background-color: #FFFFFF;
}
/* 页面 start*/
.about-shadow{
border-radius: 15rpx;
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}
.about {
&__wrap {
position: relative;
z-index: 1;
margin: 20rpx 30rpx;
margin-top: -230rpx;
}
}
/* 页面 end*/
/* 图标容器1 start */
.icon1 {
&__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: 40rpx;
height: 40rpx;
font-size: 28rpx;
border-radius: 50%;
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://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
}
}
}
}
/* 图标容器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;
}
/* 图标容器12 start */
.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: 0rpx;
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://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
}
}
}
}
/* 图标容器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://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
}
}
}
}
/* 大嘴鸟*/
.dong {
z-index: 9999;
position: fixed;
top: -40px;
right: -80px;
transform: scale(0.24);
-webkit-transform: scale(0.24);
-moz-transform: scale(0.24);
}
.monster {
transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
/* IE 9 */
-moz-transform: rotate(-50deg);
/* Firefox */
-webkit-transform: rotate(-50deg);
/* Safari 和 Chrome */
-o-transform: rotate(-50deg);
/* Opera */
display: flex;
justify-content: center;
position: relative;
width: 170px;
height: 400px;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
background-color: #3C47D7;
box-shadow: 20px 20px 60px #4650E5;
}
.monster__face {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
top: 14%;
width: 75%;
height: 160px;
}
.monster__noses {
top: 50%;
display: flex;
justify-content: space-between;
width: 28%;
height: auto;
margin-bottom: 10px;
}
.monster__nose {
width: 8px;
height: 12px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.5);
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
}
.monster__mouth {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 0%;
overflow: hidden;
border: 25px solid #FFC333;
border-radius: 100px;
background-color: #810332;
animation: mouth 1.75s infinite;
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
}
.monster__mouth::before {
content: '';
position: absolute;
width: 150px;
height: 80px;
border-radius: 100px;
background-color: #400018;
}
.monster__mouth::after {
content: '';
position: absolute;
bottom: -80px;
width: 160px;
height: 80px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
background-color: #DC1B50;
animation: tongue 1.75s infinite;
}
.monster__top {
position: absolute;
top: -30px;
width: 170px;
height: 30px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #ffffff;
z-index: 100;
animation: t 1.75s infinite;
}
.monster__bottom {
position: absolute;
bottom: 0;
width: 100px;
height: 30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #ffffff;
z-index: 100;
animation: b 1.75s infinite;
}
.avatar-eye {
position: absolute;
top: -10%;
width: 65px;
height: 65px;
background: linear-gradient(105deg, white, #cb87f4);
border-radius: 100%;
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
margin: 3px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.avatar-eye--green {
background: linear-gradient(to bottom, #fdfdfd, #c3efea);
}
.avatar-eye--violet {
background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
}
.eye--left {
left: 10%;
}
.eye--right {
left: 85%;
}
.eye--center {
left: 45%;
top: 10%;
}
.avatar-eye-pupil {
position: absolute;
width: 55%;
height: 55%;
left: 50%;
top: 25%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
z-index: 100;
border-radius: 100%;
}
.pupil--green {
background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
}
.pupil--pink {
background: linear-gradient(135deg, #f1a183, #8535cd);
}
.avatar-eye-pupil-blackThing {
position: absolute;
width: 55%;
height: 55%;
left: 50%;
top: 25%;
background: #2c2f32;
-webkit-transform: translate(-50%);
transform: translate(-50%);
border-radius: 100%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.avatar-eye-pupil-lightReflection {
position: absolute;
width: 7px;
height: 7px;
left: 25%;
top: 10%;
background: #ebebeb;
-webkit-transform: translate(-50%);
transform: translate(-50%);
border-radius: 100%;
box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
}
/**/
@keyframes t {
0%,
10%,
80%,
100% {
top: -30px;
}
20% {
top: 0px;
}
30% {
top: -20px;
}
40% {
top: -0px;
}
50% {
top: -25px;
}
70% {
top: 0px;
}
}
@keyframes b {
0%,
10%,
80%,
100% {
bottom: -30px;
}
20% {
bottom: 0px;
}
30% {
bottom: -20px;
}
40% {
bottom: -0px;
}
50% {
bottom: -25px;
}
70% {
bottom: 0px;
}
}
@keyframes mouth {
0%,
10%,
100% {
width: 100%;
height: 0%;
}
15% {
width: 90%;
height: 30%;
}
20% {
width: 50%;
height: 70%;
}
25% {
width: 70%;
height: 70%;
}
30% {
width: 80%;
height: 60%;
}
35% {
width: 60%;
height: 70%;
}
40% {
width: 55%;
height: 75%;
}
45% {
width: 50%;
height: 90%;
}
50% {
width: 40%;
height: 70%;
}
55% {
width: 70%;
height: 95%;
}
60% {
width: 40%;
height: 50%;
}
65% {
width: 100%;
height: 60%;
}
70% {
width: 100%;
height: 70%;
}
75% {
width: 90%;
height: 70%;
}
80% {
width: 50%;
height: 70%;
}
85% {
width: 90%;
height: 50%;
}
85% {
width: 40%;
height: 70%;
}
90% {
width: 90%;
height: 30%;
}
95% {
width: 100%;
height: 10%;
}
}
@keyframes tongue {
0%,
20%,
100% {
bottom: -80px;
}
30%,
90% {
bottom: -40px;
}
40% {
bottom: -45px;
}
50% {
bottom: -50px;
}
70% {
bottom: -80px;
}
90% {
bottom: -40px;
}
}
</style>