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

更新众多VIP页面模板

Browse Source
This commit is contained in:
kert
2026-03-19 10:47:37 +08:00
parent d355989fcf
commit 6abd3faa0c
69 changed files with 27601 additions and 1307 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vipPage/blog/blog/blog.vue
+1153
View File
File diff suppressed because it is too large Load Diff
vipPage/blog/blogger/blogger.vue
+1018
View File
File diff suppressed because it is too large Load Diff
vipPage/blog/circle/circle.vue
+814
View File
@@ -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>
vipPage/blog/message/message.vue
+479
View File
@@ -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>
vipPage/blog/myblog/myblog.vue
+1199
View File
File diff suppressed because it is too large Load Diff
vipPage/blog/prefer/prefer.vue
+722
View File
@@ -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>
vipPage/blog/product/product.vue
+684
View File
@@ -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>
vipPage/blog/socialize/socialize.vue
+1166
View File
File diff suppressed because it is too large Load Diff
vipPage/components/cascade-selection/cascade-selection.vue
+209
View File
@@ -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>
vipPage/components/cropper/cropper.vue
+106
View File
@@ -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>
vipPage/components/custom-swiper/horizontal/custom-swiper.vue
+110
View File
@@ -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>
vipPage/components/custom-swiper/index.vue
+37
View File
@@ -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>
vipPage/components/custom-swiper/vertical/custom-swiper.vue
+106
View File
@@ -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>
vipPage/components/drag/basic-drag/basic-drag.vue
+159
View File
@@ -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>
vipPage/components/drag/list-drag/list-drag.vue
+111
View File
@@ -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>
vipPage/components/drag/upload-image-drag/upload-image-drag.vue
+91
View File
@@ -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>
vipPage/components/scroll-view/basic/scroll-view.vue
+89
View File
@@ -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>
vipPage/components/scroll-view/custom/scroll-view.vue
+131
View File
@@ -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>
vipPage/components/scroll-view/index.vue
+37
View File
@@ -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>
vipPage/components/stack-swiper/stack-swiper.vue
+73
View File
@@ -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>
vipPage/components/table/basic/index.vue
+158
View File
@@ -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>
vipPage/components/table/complex/index.vue
+82
View File
@@ -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>
vipPage/components/table/fixed-column/index.vue
+182
View File
@@ -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>
vipPage/components/table/fixed-header/index.vue
+94
View File
@@ -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>
vipPage/components/table/index.vue
+43
View File
@@ -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>
vipPage/components/table/multi-header/index.vue
+68
View File
@@ -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>
vipPage/components/table/stripe/index.vue
+70
View File
@@ -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>
vipPage/components/tree-view/tree-view.vue
+123
View File
@@ -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>
vipPage/components/waterfall/waterfall.vue
+286
View File
@@ -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>
vipPage/home/card/card.vue
+275
View File
@@ -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>
vipPage/home/cool/cool.vue
+786
View File
@@ -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>
vipPage/home/food/food.vue
+339
View File
@@ -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>
vipPage/home/gravity/page1/page1.vue
+208
View File
@@ -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>
vipPage/home/health/health.vue
+1264
View File
File diff suppressed because it is too large Load Diff
vipPage/home/link/link.vue
+837
View File
@@ -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>
vipPage/home/mimicry/mimicry.vue
+484
View File
@@ -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>
vipPage/home/moon/moon.vue
+363
View File
@@ -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>
vipPage/home/movie/movie.vue
+482
View File
@@ -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>
vipPage/home/panoramic/panoramic.vue
+1446
View File
File diff suppressed because it is too large Load Diff
vipPage/home/plan/plan.vue
+486
View File
@@ -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>
vipPage/home/read/read.vue
+763
View File
@@ -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>
vipPage/home/tea/tea.vue
+528
View File
@@ -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>
vipPage/home/tuniao/tuniao.vue
+639
View File
@@ -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>
vipPage/home/ucharts/ucharts.vue
+1335
View File
File diff suppressed because it is too large Load Diff
vipPage/home/year/year.vue
+692
View File
@@ -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>
vipPage/life/active/active.vue
+175
View File
@@ -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>
vipPage/life/bless/bless.vue
+664
View File
@@ -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>
vipPage/life/color/color.vue
+160
View File
@@ -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>
vipPage/life/guide/guide.vue
+180
View File
@@ -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>
vipPage/life/light/light.vue
+878
View File
@@ -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>
vipPage/life/power/power.vue
+424
View File
@@ -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>
vipPage/life/start/start.vue
+208
View File
@@ -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>
vipPage/shop/classify/classify.vue
+414
View File
@@ -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>
vipPage/shop/money/money.vue
+805
View File
@@ -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>
vipPage/shop/order/order.vue
+533
View File
@@ -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>
vipPage/shop/store/store.vue
+796
View File
@@ -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>
vipPage/static/images/tree_view/file_css.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

vipPage/static/images/tree_view/file_html.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

vipPage/static/images/tree_view/file_js.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

vipPage/static/images/tree_view/file_vue.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

vipPage/static/images/tree_view/folder.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

vipPage/static/images/tree_view/folder_open.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

vipPage/static/mock/cascade-city.js
+68
View File
@@ -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'},
]
}
]