mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-06-08 04:23:17 +08:00
更新众多VIP页面模板
This commit is contained in:
kert
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<view class="template-card tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<!-- <tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar> -->
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<!-- 图标logo -->
|
||||
<view class="custom-nav__back">
|
||||
<view class="logo-pic tn-shadow-blur"
|
||||
style="background-image:url('https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg')">
|
||||
<view class="logo-image">
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="tn-icon-left"></view> -->
|
||||
</view>
|
||||
<!-- 搜索框 -->
|
||||
<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
|
||||
<view
|
||||
class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
|
||||
<view class="custom-nav__search__icon tn-icon-search"></view>
|
||||
<view class="custom-nav__search__text tn-padding-left-xs">开启美好的一天</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<!-- 内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<!-- 广告 -->
|
||||
<view class="swiper tn-padding" :style="{height: swiperContainerHeight + 'px'}">
|
||||
<tn-stack-swiper :list="list" direction="vertical" height="100%" :switchRate="10" :scaleRate="0.05" :translateRate="8"></tn-stack-swiper>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-home-smile">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-home.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">门店</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-watercup tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-buy.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">点餐</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-shop tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-shop.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">商城</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-ticket tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-list.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">订单</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-my tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-my.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'VipTemplateCard',
|
||||
components: {
|
||||
NavIndexButton
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// swiper容器高度
|
||||
swiperContainerHeight: 0,
|
||||
list: [{
|
||||
image: 'https://resource.tuniaokj.com/images/bless/bless-1.jpg'
|
||||
},
|
||||
{
|
||||
image: 'https://resource.tuniaokj.com/images/bless/bless-2.jpg'
|
||||
},
|
||||
{
|
||||
image: 'https://resource.tuniaokj.com/images/bless/bless-3.jpg'
|
||||
},
|
||||
{
|
||||
image: 'https://resource.tuniaokj.com/images/bless/bless-4.jpg'
|
||||
}
|
||||
],
|
||||
autoplay: false
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
this.initSwiperContainer()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
this.autoplay = true
|
||||
},
|
||||
onHide() {
|
||||
this.autoplay = false
|
||||
},
|
||||
methods: {
|
||||
// 初始化轮播图容器
|
||||
initSwiperContainer() {
|
||||
// 获取底部tabbar信息
|
||||
this._tGetRect('.tabbar').then((res) => {
|
||||
if (!res.height) {
|
||||
setTimeout(() => {
|
||||
this.initSwiperContainer()
|
||||
}, 10)
|
||||
return
|
||||
}
|
||||
// 获取系统信息
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.swiperContainerHeight = systemInfo.safeArea.height - res.height - 10
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 60%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 10rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx 60rpx 0 60rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
position: relative;
|
||||
margin-top: -15rpx;
|
||||
}
|
||||
|
||||
.logo-pic {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position: top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
/* 轮播图 start */
|
||||
.swiper {
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 轮播图 end */
|
||||
|
||||
/* 间隔线 start*/
|
||||
.tn-strip-bottom {
|
||||
width: 100%;
|
||||
border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
|
||||
}
|
||||
|
||||
/* 间隔线 end*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,786 @@
|
||||
<template>
|
||||
<view class="template-cool tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="top-backgroup">
|
||||
<image src='https://resource.tuniaokj.com/images/index_bg/tuniao2.jpg' mode='widthFix' class='backgroud-image'></image>
|
||||
</view>
|
||||
|
||||
<swiper class="card-swiper" :circular="true"
|
||||
:autoplay="true" duration="500" interval="18000" previous-margin="170rpx" next-margin="170rpx" @change="cardSwiper" style="margin-top: -280rpx;">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<!-- <view class="swiper-item image-banner">
|
||||
<image :src="item.url" mode="widthFix" v-if="item.type=='image'"></image>
|
||||
</view> -->
|
||||
<!-- <view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
|
||||
</view> -->
|
||||
|
||||
<view class="tnphone-white-min swiper-item wow fadeInLeft2">
|
||||
<view class="skin wow fadeInRight2">
|
||||
<view class="screen wow fadeInUp2">
|
||||
<!-- <view class="head">
|
||||
<text>{{item.name}}</text>
|
||||
</view> -->
|
||||
<view class="peak wow">
|
||||
<view class="sound"></view>
|
||||
<view class="lens"></view>
|
||||
</view>
|
||||
<!-- <view class="area-l">
|
||||
<view class="">
|
||||
<text class="tn-icon-all"></text>
|
||||
<text class="tn-icon-wifi tn-padding-left-xs"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="area-r">
|
||||
<view class="">
|
||||
<text class="tn-icon-light"></text>
|
||||
<text class="tn-icon-time tn-padding-left-xs"></text>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <view class="talk"></view> -->
|
||||
|
||||
<view class="image-banner">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- <swiper class="card-swiper" :circular="true"
|
||||
:autoplay="true" duration="500" interval="5000" @change="cardSwiper" style="margin-top: -80rpx;">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="indication">
|
||||
<block v-for="(item,index) in swiperList" :key="index">
|
||||
<view class="spot" :class="cardCur==index?'active':''"></view>
|
||||
</block>
|
||||
</view> -->
|
||||
|
||||
<!-- 方式4 start-->
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-discover-planet-fill tn-cool-color-icon4 tn-cool-bg-color-5"></view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark tn-text-center">
|
||||
<text class="tn-text-ellipsis">活动预约</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-image-text-fill tn-cool-color-icon4 tn-cool-bg-color-15"></view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark tn-text-center">
|
||||
<text class="tn-text-ellipsis">博主主页</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-honor-fill tn-cool-color-icon4 tn-cool-bg-color-8"></view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark tn-text-center">
|
||||
<text class="tn-text-ellipsis">图鸟业务</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-team-fill tn-cool-color-icon4 tn-cool-bg-color-3"></view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark tn-text-center">
|
||||
<text class="tn-text-ellipsis">简历王者</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式4 end-->
|
||||
|
||||
<view class="tn-margin-top-lg">
|
||||
<view class="nav_title--wrap">
|
||||
<view class="nav_title tn-cool-bg-color-15">
|
||||
<text class="tn-icon-star tn-padding-right-sm"></text>
|
||||
群 / 友 / 作 / 品
|
||||
<text class="tn-icon-star tn-padding-left-sm"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='nav-list tn-margin-bottom tn-margin-top'>
|
||||
|
||||
<block v-for="(item, index) in navList" :key="index">
|
||||
<view class="nav-list-item tn-shadow-blur tn-cool-bg-image" :class="['tn-cool-bg-color-' + item.color]">
|
||||
<view class="nav-link">
|
||||
<view class='title'>{{ item.title }}</view>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<view :class="['tn-icon-' + item.icon]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<view class="nav_title--wrap">
|
||||
<view class="nav_title tn-cool-bg-color-15">
|
||||
<text class="tn-icon-star tn-padding-right-sm"></text>
|
||||
友 / 情 / 链 / 接
|
||||
<text class="tn-icon-star tn-padding-left-sm"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='nav-list tn-margin-bottom tn-margin-top'>
|
||||
|
||||
<block v-for="(item, index) in navList2" :key="index">
|
||||
<view class="nav-list-item tn-shadow-blur tn-cool-bg-image" :class="['tn-cool-bg-color-' + item.color]">
|
||||
<view class="nav-link">
|
||||
<view class='title'>{{ item.title }}</view>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<view :class="['tn-icon-' + item.icon]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
|
||||
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-home-smile tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-discover tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">发现</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="action bar-center">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-camera-fill tn-color-white">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-color-gray">发布</view>
|
||||
</view> -->
|
||||
|
||||
<view class="action bar-center">
|
||||
<view class="nav-index-button">
|
||||
<view class="nav-index-button__content">
|
||||
<view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-7">
|
||||
<!-- <view class="tn-icon-logo-tuniao"></view> -->
|
||||
<view class="bar-circle">
|
||||
<image class="" src='https://resource.tuniaokj.com/images/logo/logo.png'></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="nav-index-button__meteor">
|
||||
<view class="nav-index-button__meteor__wrapper">
|
||||
<view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item" :style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
|
||||
<view class="nav-index-button__meteor__item--pic"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-color-gray">发布</view>
|
||||
</view>
|
||||
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-image-text tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">资讯</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-my tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-xl"></view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateCool',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro1.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro2.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro3.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro4.jpg',
|
||||
},{
|
||||
id: 4,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro5.jpg',
|
||||
},{
|
||||
id: 5,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro6.jpg',
|
||||
}],
|
||||
|
||||
navList: [
|
||||
{
|
||||
icon: 'menu-more',
|
||||
title: '税费计算器',
|
||||
color: '1'
|
||||
},
|
||||
{
|
||||
icon: 'menu-circle',
|
||||
title: '夜路行者',
|
||||
color: '5'
|
||||
},
|
||||
{
|
||||
icon: 'gloves',
|
||||
title: '全能时钟',
|
||||
color: '2'
|
||||
},
|
||||
{
|
||||
icon: 'topics',
|
||||
title: '轻小轻',
|
||||
color: '6'
|
||||
},
|
||||
{
|
||||
icon: 'circle-fill',
|
||||
title: '7he·kevin',
|
||||
color: '3'
|
||||
},
|
||||
{
|
||||
icon: 'tag',
|
||||
title: 'DataFuture',
|
||||
color: '7'
|
||||
},
|
||||
{
|
||||
icon: 'flower',
|
||||
title: '全能恋人',
|
||||
color: '4'
|
||||
},
|
||||
{
|
||||
icon: 'copy-fill',
|
||||
title: '全能圆周率',
|
||||
color: '8'
|
||||
}
|
||||
],
|
||||
navList2: [
|
||||
{
|
||||
icon: 'menu-circle',
|
||||
title: '西科小确幸',
|
||||
color: '5'
|
||||
},
|
||||
{
|
||||
icon: 'gloves',
|
||||
title: '峡谷飞机大战',
|
||||
color: '2'
|
||||
},
|
||||
{
|
||||
icon: 'topics',
|
||||
title: '签云全景',
|
||||
color: '6'
|
||||
},
|
||||
{
|
||||
icon: 'circle-fill',
|
||||
title: 'OA轻办公',
|
||||
color: '3'
|
||||
},
|
||||
{
|
||||
icon: 'tag',
|
||||
title: '啊叭叭叭',
|
||||
color: '7'
|
||||
},
|
||||
{
|
||||
icon: 'square',
|
||||
title: '博物馆',
|
||||
color: '4'
|
||||
},
|
||||
{
|
||||
icon: 'copy-fill',
|
||||
title: '全能文案',
|
||||
color: '8'
|
||||
},
|
||||
{
|
||||
icon: 'menu-more',
|
||||
title: '吱富宝',
|
||||
color: '1'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
/* .tnphone-white-min 细边框*/
|
||||
.tnphone-white-min {width: 380rpx; height: 800rpx; border-radius: 40rpx; background: #E9E5F3; padding: 7rpx; display: table; color: #333;
|
||||
box-sizing: border-box; box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0,0,0,0.15); margin: 70rpx auto; cursor: default; position: relative}
|
||||
.tnphone-white-min .skin {width: 100%; height: 100%; border-radius: 40rpx; background: #E9E5F3; padding: 10rpx;}
|
||||
.tnphone-white-min .screen {width: 100%; height: 100%; border-radius: 30rpx; background: #E9E5F3; position: relative; overflow: hidden}
|
||||
.tnphone-white-min .head {width: 100%; height: 90rpx; text-align: center; position: absolute; padding: 45rpx 15rpx 10rpx 15rpx;}
|
||||
.tnphone-white-min .peak {left: 22%;width: 56%; height: 27rpx; margin: -2rpx auto 0rpx; border-radius: 0 0 20rpx 20rpx; background: #E9E5F3; position: absolute}
|
||||
.tnphone-white-min .sound {width: 48rpx; height: 6rpx; border-radius: 15rpx; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24rpx; margin-top: -10rpx;
|
||||
box-shadow: 0rpx 4rpx 4rpx 0rpx #444 inset}
|
||||
.tnphone-white-min .lens {width: 6rpx; height: 6rpx; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34rpx; margin-top: -10rpx}
|
||||
.tnphone-white-min .talk {width: 50%; height: 6rpx; border-radius: 15rpx; background: rgba(0,0,0,.3); position: absolute; bottom: 8rpx; left: 50%; margin-left: -25%}
|
||||
.tnphone-white-min .area-l,.tnphone-white-min .area-r {width: 70rpx; height: 16rpx; position: absolute; top: 6rpx}
|
||||
.tnphone-white-min .area-l {left: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-left: 20rpx;}
|
||||
.tnphone-white-min .area-r {right: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-right: 20rpx;}
|
||||
.tnphone-white-min .fa-feed {float: left; font-size: 12rpx!important; transform:rotate(-45deg); margin-top: 4rpx; margin-right: 8rpx}
|
||||
.tnphone-white-min .fa-battery-full {float: left; font-size: 12rpx!important; margin-top: 6rpx}
|
||||
.tnphone-white-min .fa-chevron-left {float: left; margin-top: 4rpx}
|
||||
.tnphone-white-min .fa-cog {float: right; margin-top: 4rpx}
|
||||
.tnphone-white-min .btn01 {width: 3rpx; height: 28rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 105rpx; left: -3rpx}
|
||||
.tnphone-white-min .btn02 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 160rpx; left: -3rpx}
|
||||
.tnphone-white-min .btn03 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 230rpx; left: -3rpx}
|
||||
.tnphone-white-min .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
|
||||
|
||||
|
||||
/* 顶部背景图 start */
|
||||
.top-backgroup {
|
||||
height: 450rpx;
|
||||
z-index: -1;
|
||||
|
||||
.backgroud-image {
|
||||
width: 100%;
|
||||
height: 667rpx;
|
||||
// z-index: -1;
|
||||
}
|
||||
}
|
||||
/* 顶部背景图 end */
|
||||
|
||||
/* 轮播样机样式 start*/
|
||||
.card-swiper {
|
||||
height: 830rpx !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 260rpx !important;
|
||||
// left: 170rpx;
|
||||
// width: 380rpx !important;
|
||||
// left: 185rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 15rpx 90rpx 15rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
display: block;
|
||||
transform: scale(0.45);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: scale(0.65);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
height: 770rpx;
|
||||
// border: 1rpx solid red;
|
||||
}
|
||||
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
background-color: #000;
|
||||
opacity: 0;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
top: -80rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 0;
|
||||
width: 30rpx;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/* 图标容器4 start */
|
||||
.tn-cool-color-icon4{
|
||||
// background-image: -webkit-linear-gradient(135deg, #ED1C24, #FECE12); 16
|
||||
// background-image: linear-gradient(135deg, #ED1C24, #FECE12);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-fill-color: transparent;
|
||||
}
|
||||
.icon4 {
|
||||
&__item {
|
||||
width: 30%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
margin: 20rpx 10rpx;
|
||||
transform: scale(1);
|
||||
transition: transform 0.3s linear;
|
||||
transform-origin: center center;
|
||||
|
||||
&--icon {
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
font-size: 55rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0px 10px 30px rgba(70,23,129, 0.12),
|
||||
0px -8px 40px rgba(255, 255, 255, 1),
|
||||
inset 0px -10px 10px rgba(70,23,129, 0.05),
|
||||
inset 0px 10px 20px rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 标题 start */
|
||||
.nav_title {
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
&--wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 120rpx;
|
||||
font-size: 42rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
/* 标题 end */
|
||||
|
||||
/* 组件导航列表 start*/
|
||||
.nav-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0rpx 12rpx 0rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
/* 列表元素 start */
|
||||
.nav-list-item {
|
||||
padding: 95rpx 30rpx 5rpx 30rpx;
|
||||
border-radius: 12rpx;
|
||||
width: 45%;
|
||||
margin: 0 18rpx 40rpx;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
|
||||
/* 元素标题 start */
|
||||
.nav-link {
|
||||
font-size: 32rpx;
|
||||
text-transform: capitalize;
|
||||
padding: 0 0 10rpx 0;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
color: #FFFFFF;
|
||||
margin-top: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
/* 元素标题 end */
|
||||
|
||||
/* 元素图标 start */
|
||||
.icon {
|
||||
font-variant: small-caps;
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 50rpx;
|
||||
left: 37%;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
font-size: 50rpx;
|
||||
color: #FFFFFF;
|
||||
white-space: nowrap;
|
||||
opacity: 0.9;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
border-radius: 5000rpx;
|
||||
}
|
||||
/* 元素图标 end */
|
||||
}
|
||||
/* 列表元素 end */
|
||||
}
|
||||
/* 组件导航列表 end*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.bar-center{
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes suspension {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-0.8rem);
|
||||
}
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
// line-height: 50rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0rpx auto 0rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
// background-color: #01BEFF;
|
||||
width: 100rpx !important;
|
||||
height: 100rpx !important;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 10px 30px rgba(70,23,129, 0.12),
|
||||
0px -8px 40px rgba(255, 255, 255, 1),
|
||||
inset 0px -10px 10px rgba(70,23,129, 0.05),
|
||||
inset 0px 10px 20px rgba(255, 255, 255, 1);
|
||||
// box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
display: inline-block;
|
||||
margin: 0rpx auto 0rpx;
|
||||
}
|
||||
|
||||
/* 流星+悬浮 */
|
||||
.nav-index-button {
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
z-index: 999999;
|
||||
|
||||
|
||||
&__content {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
&--icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transform: scale(0.85);
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
background-size: 100% 100%;
|
||||
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__meteor {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
transform-style: preserve-3d;
|
||||
transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
|
||||
|
||||
&__wrapper {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
transform-style: preserve-3d;
|
||||
animation: spin 20s linear infinite;
|
||||
}
|
||||
|
||||
&__item {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 1000rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
&--pic {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc2.png) no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
animation: arc 4s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes suspension {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-0.6rem);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateX(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes arc {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<view class="template-food tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<!-- <tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar> -->
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<!-- 按钮 -->
|
||||
<view class="custom-nav__back">
|
||||
<view class="tn-icon-search-list tn-text-bold" style="font-size: 50rpx;"></view>
|
||||
</view>
|
||||
<!-- 字 -->
|
||||
<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
|
||||
<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-center">
|
||||
<text class="tn-text-bold tn-text-xxl">吃货北北</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
|
||||
<view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
已打卡（5）
|
||||
</view>
|
||||
<view class="tn-margin" style="font-size: 50rpx;">
|
||||
<text class="tn-icon-write"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<swiper class="card-swiper tn-margin-top-sm" :circular="true"
|
||||
:autoplay="true" duration="500" interval="5000" previous-margin="75rpx" next-margin="75rpx" @change="cardSwiper">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<view class="swiper-item image-banner">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-text-xxl tn-text-bold">{{item.name}}</view>
|
||||
<view class="tn-text-sm tn-text-bold tn-padding-top-xs">{{item.text}}</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="indication">
|
||||
<block v-for="(item,index) in swiperList" :key="index">
|
||||
<view class="spot" :class="cardCur==index?'active':''"></view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-home-smile">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/food-home.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">小吃</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-watercup tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/food-buy.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">奶茶</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-ticket tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/food-list.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">面包</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-my tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/food-my.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">雪糕</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplateFood',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '麻辣香锅',
|
||||
text: '广东人的微微辣',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/swiper3.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '太二酸菜鱼',
|
||||
text: '当然是酸菜鱼+酸菜罐子啦',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/swiper4.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '蛙小侠',
|
||||
text: '打卡蒜香牛蛙',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/swiper1.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '九毛九',
|
||||
text: '打卡大酱骨',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
name: '牛小灶',
|
||||
text: '冬天必打卡',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/swiper2.jpg',
|
||||
}],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 70%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 15rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
/* 轮播 start*/
|
||||
.card-swiper {
|
||||
height: 60vh !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 600rpx !important;
|
||||
// left: 75rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 20rpx 0rpx 20rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 45vh;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
transform: scale(1);
|
||||
transition: all 0.3s ease-in 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: scale(1);
|
||||
transition: all 0.3s ease-in 0s;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
padding: 20rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 140rpx;
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
transform: none;
|
||||
transition: all 0.4s ease 0s;
|
||||
overflow: hidden;
|
||||
color: #000000;
|
||||
background-color: rgba(255,255,255,1);
|
||||
box-shadow: 0rpx 30rpx 30rpx 0rpx rgba(0,0,245, 0.08);
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
transition: all 0.4s ease 0s;
|
||||
text-shadow: 0rpx 10rpx 20rpx rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
opacity: 0.8;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 50%;
|
||||
margin: 0 8rpx !important;
|
||||
position: relative;
|
||||
background-color: #3165CC;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
border: 2rpx solid #3165CC;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<view class="vip-template-gyroscope-page">
|
||||
|
||||
<view style="color: #FFFFFF;position: absolute;top: 0;left: 0;" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view>x轴数据:{{acceleronmeterX}}</view>
|
||||
<view>y轴数据:{{acceleronmeterY}}</view>
|
||||
<view>z轴数据:{{acceleronmeterZ}}</view>
|
||||
</view>
|
||||
|
||||
<view class="background">
|
||||
<image src="https://resource.tuniaokj.com/images/gravity/1/5.png"></image>
|
||||
</view>
|
||||
|
||||
<view class="item__1 item__animation" :style="{transform: `translateX(${translateInfo[0].x}px)`}">
|
||||
<image src="https://resource.tuniaokj.com/images/gravity/1/1.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<view class="item__2 item__animation" :style="{transform: `translateX(${translateInfo[1].x}px)`}" @longtap.stop="toggleDirection">
|
||||
<image src="https://resource.tuniaokj.com/images/gravity/1/2.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<view class="item__3 item__animation" :style="{transform: `translateX(${translateInfo[2].x}px)`}">
|
||||
<image src="https://resource.tuniaokj.com/images/gravity/1/3.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<view class="item__4 item__animation" :style="{transform: `translateX(${translateInfo[3].x}px)`}">
|
||||
<image src="https://resource.tuniaokj.com/images/gravity/1/4.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
|
||||
export default {
|
||||
name: 'GravityPage1',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data() {
|
||||
return {
|
||||
acceleronmeterX: 0,
|
||||
acceleronmeterY: 0,
|
||||
acceleronmeterZ: 0,
|
||||
translateInfo: [
|
||||
{max: 60, min: -60, speed: 0.8, x: 0},
|
||||
{max: 45, min: -45, speed: 0.6, x: 0},
|
||||
{max: 33.75, min: -33.75, speed: 0.45, x: 0},
|
||||
{max: 25.31, min: -25.31, speed: 0.3375, x: 0}
|
||||
],
|
||||
positiveDirection: true
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.initAccelerometer()
|
||||
},
|
||||
onUnload() {
|
||||
this.stopAccelerometer()
|
||||
},
|
||||
methods: {
|
||||
// 初始化加速度并设置监听函数
|
||||
initAccelerometer() {
|
||||
uni.onAccelerometerChange(this.listenerAccelerometerData)
|
||||
},
|
||||
// 停止监听加速度数据
|
||||
stopAccelerometer() {
|
||||
uni.stopAccelerometer()
|
||||
},
|
||||
listenerAccelerometerData(res) {
|
||||
// console.log(res.x, res.y, res.z);
|
||||
this.acceleronmeterX = res.x.toFixed(2)
|
||||
this.acceleronmeterY = res.y.toFixed(2)
|
||||
this.acceleronmeterZ = res.z.toFixed(2)
|
||||
|
||||
// let acceleronmeterX = Math.abs(this.acceleronmeterX) > 0.05 ? this.acceleronmeterX < 0 ? -0.05 : 0.05 : this.acceleronmeterX
|
||||
|
||||
// if (acceleronmeterX < 0) {
|
||||
// for (let index in this.translateInfo) {
|
||||
// let item = this.translateInfo[index]
|
||||
// const x = item.speed * Math.abs(acceleronmeterX)
|
||||
// item.x = item.x + x > item.max ? item.max : item.x + x
|
||||
// this.$set(this.translateInfo, index, item)
|
||||
// }
|
||||
// } else if (acceleronmeterX > 0) {
|
||||
// for (let index in this.translateInfo) {
|
||||
// let item = this.translateInfo[index]
|
||||
// const x = item.speed * acceleronmeterX
|
||||
// item.x = item.x - x < item.min ? item.min : item.x - x
|
||||
// this.$set(this.translateInfo, index, item)
|
||||
// }
|
||||
// }
|
||||
|
||||
if (this.positiveDirection) {
|
||||
if (this.acceleronmeterX > 0) {
|
||||
// 手机向左倾斜，图像向右移动
|
||||
this.translateRightMove()
|
||||
} else if (this.acceleronmeterX < 0) {
|
||||
// 手机向右倾斜，图像向左移动
|
||||
this.translateLeftMove()
|
||||
}
|
||||
} else {
|
||||
if (this.acceleronmeterX < 0) {
|
||||
// 手机向左倾斜，图像向右移动
|
||||
this.translateRightMove()
|
||||
} else if (this.acceleronmeterX > 0) {
|
||||
// 手机向右倾斜，图像向左移动
|
||||
this.translateLeftMove()
|
||||
}
|
||||
}
|
||||
},
|
||||
// 长按切换移动方向
|
||||
toggleDirection() {
|
||||
this.positiveDirection = !this.positiveDirection
|
||||
},
|
||||
// 向左移动
|
||||
translateLeftMove() {
|
||||
for (let index in this.translateInfo) {
|
||||
let item = this.translateInfo[index]
|
||||
// 计算当前图片位置和允许移动的边距距离
|
||||
const distance = Math.abs(item.min - item.x)
|
||||
const x = item.speed * (distance / 2)
|
||||
item.x = item.x - x < item.min ? item.min : item.x - x
|
||||
this.$set(this.translateInfo, index, item)
|
||||
}
|
||||
},
|
||||
// 向右移动
|
||||
translateRightMove() {
|
||||
for (let index in this.translateInfo) {
|
||||
let item = this.translateInfo[index]
|
||||
// 计算当前图片位置和允许移动的边距距离
|
||||
const distance = Math.abs(item.max - item.x)
|
||||
const x = item.speed * (distance / 2)
|
||||
item.x = item.x + x > item.max ? item.max : item.x + x
|
||||
this.$set(this.translateInfo, index, item)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-template-gyroscope-page {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
&__1 {
|
||||
position: absolute;
|
||||
top: 210rpx;
|
||||
left: 84rpx;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
&__2 {
|
||||
position: absolute;
|
||||
top: 885rpx;
|
||||
left: 84rpx;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
&__3 {
|
||||
position: absolute;
|
||||
top: 138rpx;
|
||||
left: 88rpx;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&__4 {
|
||||
position: absolute;
|
||||
top: 390rpx;
|
||||
left: 84rpx;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__animation {
|
||||
transition: transform 1.6s ease;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,837 @@
|
||||
<template>
|
||||
<view class="template-link tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="top-backgroup">
|
||||
<image src='https://resource.tuniaokj.com/images/index_bg/mbe.png' mode='widthFix' class='backgroud-image'></image>
|
||||
</view>
|
||||
|
||||
<swiper class="card-swiper" :circular="true"
|
||||
:autoplay="true" duration="500" interval="18000" previous-margin="170rpx" next-margin="170rpx" @change="cardSwiper" style="margin-top: -280rpx;">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<!-- <view class="swiper-item image-banner">
|
||||
<image :src="item.url" mode="widthFix" v-if="item.type=='image'"></image>
|
||||
</view> -->
|
||||
<!-- <view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
|
||||
</view> -->
|
||||
|
||||
<view class="tnphone-white-min swiper-item wow fadeInLeft2">
|
||||
<view class="skin wow fadeInRight2">
|
||||
<view class="screen wow fadeInUp2">
|
||||
<!-- <view class="head">
|
||||
<text>{{item.name}}</text>
|
||||
</view> -->
|
||||
<view class="peak wow">
|
||||
<view class="sound"></view>
|
||||
<view class="lens"></view>
|
||||
</view>
|
||||
<!-- <view class="area-l">
|
||||
<view class="">
|
||||
<text class="tn-icon-all"></text>
|
||||
<text class="tn-icon-wifi tn-padding-left-xs"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="area-r">
|
||||
<view class="">
|
||||
<text class="tn-icon-light"></text>
|
||||
<text class="tn-icon-time tn-padding-left-xs"></text>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <view class="talk"></view> -->
|
||||
|
||||
<view class="image-banner">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- <swiper class="card-swiper" :circular="true"
|
||||
:autoplay="true" duration="500" interval="5000" @change="cardSwiper" style="margin-top: -80rpx;">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="indication">
|
||||
<block v-for="(item,index) in swiperList" :key="index">
|
||||
<view class="spot" :class="cardCur==index?'active':''"></view>
|
||||
</block>
|
||||
</view> -->
|
||||
|
||||
<!-- 方式4 start-->
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-discover-planet-fill tn-cool-color-icon4 tn-cool-bg-color-5"></view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark tn-text-center">
|
||||
<text class="tn-text-ellipsis">活动预约</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-image-text-fill tn-cool-color-icon4 tn-cool-bg-color-15"></view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark tn-text-center">
|
||||
<text class="tn-text-ellipsis">博主主页</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-honor-fill tn-cool-color-icon4 tn-cool-bg-color-8"></view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark tn-text-center">
|
||||
<text class="tn-text-ellipsis">图鸟业务</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view class="tn-icon-team-fill tn-cool-color-icon4 tn-cool-bg-color-3"></view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark tn-text-center">
|
||||
<text class="tn-text-ellipsis">简历王者</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式4 end-->
|
||||
|
||||
<view class="tn-margin-top-lg">
|
||||
<view class="nav_title--wrap">
|
||||
<view class="nav_title tn-cool-bg-color-15">
|
||||
<text class="tn-icon-star tn-padding-right-sm"></text>
|
||||
群 / 友 / 作 / 品
|
||||
<text class="tn-icon-star tn-padding-left-sm"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex" style="padding: 12rpx;margin-top: 30rpx;">
|
||||
<view class="tn-flex-1">
|
||||
|
||||
<view class='nav-list'>
|
||||
<block v-for="(item, index) in linkList1" :key="index">
|
||||
<view class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-col-center tn-flex-row-between" :class="[getRandomCoolBg(index)]">
|
||||
<view class="nav-link">
|
||||
<view class='title tn-text-bold'>{{ item.nametools }}</view>
|
||||
<view class='title' style="opacity: 0;">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<view :class="['tn-icon-' + item.icon]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="tn-flex-1">
|
||||
|
||||
<view class='nav-list'>
|
||||
<block v-for="(item, index) in linkList2" :key="index">
|
||||
<view class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-col-center tn-flex-row-between" :class="[getRandomCoolBg(index)]">
|
||||
<view class="nav-link">
|
||||
<view class='title tn-text-bold'>{{ item.nametools }}</view>
|
||||
<view class='title' style="opacity: 0;">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<view :class="['tn-icon-' + item.icon]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
|
||||
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-home-smile tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-discover tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">发现</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="action bar-center">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-camera-fill tn-color-white">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-color-gray">发布</view>
|
||||
</view> -->
|
||||
|
||||
<view class="action bar-center">
|
||||
<view class="nav-index-button">
|
||||
<view class="nav-index-button__content">
|
||||
<view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-7">
|
||||
<!-- <view class="tn-icon-logo-tuniao"></view> -->
|
||||
<view class="bar-circle">
|
||||
<image class="" src='https://resource.tuniaokj.com/images/logo/logo.png'></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="nav-index-button__meteor">
|
||||
<view class="nav-index-button__meteor__wrapper">
|
||||
<view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item" :style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
|
||||
<view class="nav-index-button__meteor__item--pic"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-color-gray">发布</view>
|
||||
</view>
|
||||
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-image-text tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">资讯</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-my tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-xl"></view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateLink',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro1.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro2.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro3.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro4.jpg',
|
||||
},{
|
||||
id: 4,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro5.jpg',
|
||||
},{
|
||||
id: 5,
|
||||
type: 'image',
|
||||
url: 'https://resource.tuniaokj.com/images/index_bg/pro6.jpg',
|
||||
}],
|
||||
|
||||
linkList1: [{
|
||||
id: 0,
|
||||
icon: 'circle',
|
||||
appid: 'wxec92c15d9e9b6fbe',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '可以提供生日在圆周率的位数',
|
||||
nametools: '全能圆周率'
|
||||
}, {
|
||||
id: 1,
|
||||
icon: 'airplane',
|
||||
appid: 'wxaa8473e0378e72be',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '传承经典',
|
||||
nametools: '峡谷飞机大战'
|
||||
},{
|
||||
id: 2,
|
||||
icon: 'computer',
|
||||
appid: 'wxd76a25d4a4d04162',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '让工作更加井然有序',
|
||||
nametools: 'OA轻办公'
|
||||
}, {
|
||||
id: 3,
|
||||
icon: 'star',
|
||||
appid: 'wx46739fb0aae487e0',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '与可爱的文物一起互动吧',
|
||||
nametools: '博物馆'
|
||||
}, {
|
||||
id: 4,
|
||||
icon: 'money',
|
||||
appid: 'wxc9f4dd46f1c7c080',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '人多的地方谨慎使用',
|
||||
nametools: '吱富宝'
|
||||
} ,{
|
||||
id: 5,
|
||||
icon: 'moon',
|
||||
appid: 'wxf2bc749d99d35ea9',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '',
|
||||
nametools: '夜路使者'
|
||||
}, {
|
||||
id: 6,
|
||||
icon: 'flower',
|
||||
appid: 'wx916556bf29fb7c6a',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '烦心事情的终点',
|
||||
nametools: '轻小轻'
|
||||
}, {
|
||||
id: 7,
|
||||
icon: 'data',
|
||||
appid: 'wx12b3c68c969e9f25',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '你的私人健康管家数据看板',
|
||||
nametools: 'DataFuture'
|
||||
}
|
||||
],
|
||||
linkList2: [{
|
||||
id: 0,
|
||||
icon: 'count',
|
||||
appid: 'wxf030f3e0d92f7967',
|
||||
url: 'packages/root/index/index',
|
||||
hezuo: '可合作',
|
||||
name: '税费交多少',
|
||||
nametools: '税费计算器'
|
||||
}, {
|
||||
id: 1,
|
||||
icon: 'clock',
|
||||
appid: 'wxcf2fe6ac8f7e3970',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '',
|
||||
nametools: '全能时钟'
|
||||
}, {
|
||||
id: 2,
|
||||
icon: 'discover',
|
||||
appid: 'wx201efd3f86fa2ba7',
|
||||
url: 'pages/index/tabbar',
|
||||
hezuo: '可合作',
|
||||
name: '学习IT开发技能知识',
|
||||
nametools: '7he·Kevin'
|
||||
}, {
|
||||
id: 3,
|
||||
icon: 'light',
|
||||
appid: 'wx7170364858bba693',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '震动按摩身体',
|
||||
nametools: '全能恋人'
|
||||
}, {
|
||||
id: 4,
|
||||
icon: 'video',
|
||||
appid: 'wx7de7a77441d5266c',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可合作',
|
||||
name: '短视频去水印',
|
||||
nametools: '西科小确幸'
|
||||
}, {
|
||||
id: 5,
|
||||
icon: 'discover-planet',
|
||||
appid: 'wx9f77d65eb4eff65b',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可合作',
|
||||
name: '带上全景去旅行',
|
||||
nametools: '芊云全景'
|
||||
},{
|
||||
id: 6,
|
||||
icon: 'image',
|
||||
appid: 'wxa67567d479e76c0a',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '以图搜图',
|
||||
nametools: '啊叭叭叭'
|
||||
}, {
|
||||
id: 7,
|
||||
icon: 'edit-form',
|
||||
appid: 'wx46b5829489a33bb5',
|
||||
url: 'pages/index/index',
|
||||
hezuo: '可售卖',
|
||||
name: '朋友圈文案大师',
|
||||
nametools: '全能文案'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
getRandomCoolBg() {
|
||||
return this.$tn.color.getRandomCoolBgClass()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
/* .tnphone-white-min 细边框*/
|
||||
.tnphone-white-min {width: 380rpx; height: 800rpx; border-radius: 40rpx; background: #E9E5F3; padding: 7rpx; display: table; color: #333;
|
||||
box-sizing: border-box; box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0,0,0,0.15); margin: 70rpx auto; cursor: default; position: relative}
|
||||
.tnphone-white-min .skin {width: 100%; height: 100%; border-radius: 40rpx; background: #E9E5F3; padding: 10rpx;}
|
||||
.tnphone-white-min .screen {width: 100%; height: 100%; border-radius: 30rpx; background: #E9E5F3; position: relative; overflow: hidden}
|
||||
.tnphone-white-min .head {width: 100%; height: 90rpx; text-align: center; position: absolute; padding: 45rpx 15rpx 10rpx 15rpx;}
|
||||
.tnphone-white-min .peak {left: 22%;width: 56%; height: 27rpx; margin: -2rpx auto 0rpx; border-radius: 0 0 20rpx 20rpx; background: #E9E5F3; position: absolute}
|
||||
.tnphone-white-min .sound {width: 48rpx; height: 6rpx; border-radius: 15rpx; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24rpx; margin-top: -10rpx;
|
||||
box-shadow: 0rpx 4rpx 4rpx 0rpx #444 inset}
|
||||
.tnphone-white-min .lens {width: 6rpx; height: 6rpx; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34rpx; margin-top: -10rpx}
|
||||
.tnphone-white-min .talk {width: 50%; height: 6rpx; border-radius: 15rpx; background: rgba(0,0,0,.3); position: absolute; bottom: 8rpx; left: 50%; margin-left: -25%}
|
||||
.tnphone-white-min .area-l,.tnphone-white-min .area-r {width: 70rpx; height: 16rpx; position: absolute; top: 6rpx}
|
||||
.tnphone-white-min .area-l {left: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-left: 20rpx;}
|
||||
.tnphone-white-min .area-r {right: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-right: 20rpx;}
|
||||
.tnphone-white-min .fa-feed {float: left; font-size: 12rpx!important; transform:rotate(-45deg); margin-top: 4rpx; margin-right: 8rpx}
|
||||
.tnphone-white-min .fa-battery-full {float: left; font-size: 12rpx!important; margin-top: 6rpx}
|
||||
.tnphone-white-min .fa-chevron-left {float: left; margin-top: 4rpx}
|
||||
.tnphone-white-min .fa-cog {float: right; margin-top: 4rpx}
|
||||
.tnphone-white-min .btn01 {width: 3rpx; height: 28rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 105rpx; left: -3rpx}
|
||||
.tnphone-white-min .btn02 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 160rpx; left: -3rpx}
|
||||
.tnphone-white-min .btn03 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 230rpx; left: -3rpx}
|
||||
.tnphone-white-min .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
|
||||
|
||||
|
||||
/* 顶部背景图 start */
|
||||
.top-backgroup {
|
||||
height: 450rpx;
|
||||
z-index: -1;
|
||||
|
||||
.backgroud-image {
|
||||
width: 100%;
|
||||
height: 667rpx;
|
||||
// z-index: -1;
|
||||
}
|
||||
}
|
||||
/* 顶部背景图 end */
|
||||
|
||||
/* 轮播样机样式 start*/
|
||||
.card-swiper {
|
||||
height: 830rpx !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 260rpx !important;
|
||||
// left: 170rpx;
|
||||
// width: 380rpx !important;
|
||||
// left: 185rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 15rpx 90rpx 15rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
display: block;
|
||||
transform: scale(0.45);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: scale(0.65);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
height: 770rpx;
|
||||
// border: 1rpx solid red;
|
||||
}
|
||||
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
background-color: #000;
|
||||
opacity: 0;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
top: -80rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 0;
|
||||
width: 30rpx;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/* 图标容器4 start */
|
||||
.tn-cool-color-icon4{
|
||||
// background-image: -webkit-linear-gradient(135deg, #ED1C24, #FECE12); 16
|
||||
// background-image: linear-gradient(135deg, #ED1C24, #FECE12);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-fill-color: transparent;
|
||||
}
|
||||
.icon4 {
|
||||
&__item {
|
||||
width: 30%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
margin: 20rpx 10rpx;
|
||||
transform: scale(1);
|
||||
transition: transform 0.3s linear;
|
||||
transform-origin: center center;
|
||||
|
||||
&--icon {
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
font-size: 55rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0px 10px 30px rgba(70,23,129, 0.12),
|
||||
0px -8px 40px rgba(255, 255, 255, 1),
|
||||
inset 0px -10px 10px rgba(70,23,129, 0.05),
|
||||
inset 0px 10px 20px rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 标题 start */
|
||||
.nav_title {
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
&--wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 120rpx;
|
||||
font-size: 42rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
/* 标题 end */
|
||||
|
||||
/* 组件导航列表 start*/
|
||||
.nav-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0rpx 18rpx 0rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
/* 列表元素 start */
|
||||
.nav-list-item {
|
||||
padding: 95rpx 30rpx 5rpx 30rpx;
|
||||
border-radius: 12rpx;
|
||||
width: 100%;
|
||||
margin: 0 0 40rpx;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
|
||||
/* 元素标题 start */
|
||||
.nav-link {
|
||||
margin: -80rpx 0 110rpx 0;
|
||||
font-size: 32rpx;
|
||||
text-transform: capitalize;
|
||||
padding: 0 0 10rpx 0;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
color: #FFFFFF;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
/* 元素标题 end */
|
||||
|
||||
/* 元素图标 start */
|
||||
.icon {
|
||||
font-variant: small-caps;
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
right: 50rpx;
|
||||
left: 5%;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
font-size: 50rpx;
|
||||
color: #FFFFFF;
|
||||
white-space: nowrap;
|
||||
opacity: 0.9;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
border-radius: 5000rpx;
|
||||
}
|
||||
/* 元素图标 end */
|
||||
}
|
||||
/* 列表元素 end */
|
||||
}
|
||||
/* 组件导航列表 end*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.bar-center{
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes suspension {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-0.8rem);
|
||||
}
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
// line-height: 50rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0rpx auto 0rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
// background-color: #01BEFF;
|
||||
width: 100rpx !important;
|
||||
height: 100rpx !important;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 10px 30px rgba(70,23,129, 0.12),
|
||||
0px -8px 40px rgba(255, 255, 255, 1),
|
||||
inset 0px -10px 10px rgba(70,23,129, 0.05),
|
||||
inset 0px 10px 20px rgba(255, 255, 255, 1);
|
||||
// box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
display: inline-block;
|
||||
margin: 0rpx auto 0rpx;
|
||||
}
|
||||
|
||||
/* 流星+悬浮 */
|
||||
.nav-index-button {
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
z-index: 999999;
|
||||
|
||||
|
||||
&__content {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
&--icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transform: scale(0.85);
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
background-size: 100% 100%;
|
||||
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__meteor {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
transform-style: preserve-3d;
|
||||
transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
|
||||
|
||||
&__wrapper {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
transform-style: preserve-3d;
|
||||
animation: spin 20s linear infinite;
|
||||
}
|
||||
|
||||
&__item {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 1000rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
&--pic {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc2.png) no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
animation: arc 4s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes suspension {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-0.6rem);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateX(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes arc {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,484 @@
|
||||
<template>
|
||||
<view class="template-mimicry">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<swiper class="card-swiper" :circular="true"
|
||||
:autoplay="true" duration="500" interval="5000" @change="cardSwiper">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<view class="swiper-item image-banner">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
<view class="swiper-item2 image-banner">
|
||||
<image :src="item.pngurl" mode="heightFix" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-text-xxl tn-text-bold tn-color-white">{{item.name}}</view>
|
||||
<view class="tn-text-xl tn-text-bold tn-color-white tn-padding-top-xs">{{item.text}}</view>
|
||||
</view>
|
||||
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="indication">
|
||||
<block v-for="(item,index) in swiperList" :key="index">
|
||||
<view class="spot" :class="cardCur==index?'active':''"></view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view class="keyboard-fixed">
|
||||
<view class="keyboard-box">
|
||||
<view class="keyboard">
|
||||
<view class="key s2 esc">??</view>
|
||||
<view class="key">1</view>
|
||||
<view class="key">2</view>
|
||||
<view class="key">3</view>
|
||||
<view class="key">4</view>
|
||||
<view class="key">5</view>
|
||||
<view class="key">6</view>
|
||||
<view class="key">7</view>
|
||||
<view class="key">8</view>
|
||||
<view class="key">9</view>
|
||||
<view class="key">0</view>
|
||||
<view class="key sub">-</view>
|
||||
<view class="key add">=</view>
|
||||
<view class="key s4 back">??</view>
|
||||
<view class="key s3 tab">??</view>
|
||||
<view class="key">Q</view>
|
||||
<view class="key">W</view>
|
||||
<view class="key">E</view>
|
||||
<view class="key">R</view>
|
||||
<view class="key">T</view>
|
||||
<view class="key">Y</view>
|
||||
<view class="key">U</view>
|
||||
<view class="key">I</view>
|
||||
<view class="key">O</view>
|
||||
<view class="key">P</view>
|
||||
<view class="key openbracket">[</view>
|
||||
<view class="key closebracket">]</view>
|
||||
<view class="key s3 pipe">\</view>
|
||||
<view class="key s4 cap">??</view>
|
||||
<view class="key">A</view>
|
||||
<view class="key">S</view>
|
||||
<view class="key">D</view>
|
||||
<view class="key dotted">F</view>
|
||||
<view class="key">G</view>
|
||||
<view class="key">H</view>
|
||||
<view class="key dotted">J</view>
|
||||
<view class="key">K</view>
|
||||
<view class="key">L</view>
|
||||
<view class="key semi">;</view>
|
||||
<view class="key comma">,</view>
|
||||
<view class="key s4 enter">??</view>
|
||||
<view class="key s5 shift">??</view>
|
||||
<view class="key">Z</view>
|
||||
<view class="key">X</view>
|
||||
<view class="key">C</view>
|
||||
<view class="key">V</view>
|
||||
<view class="key">B</view>
|
||||
<view class="key">N</view>
|
||||
<view class="key">M</view>
|
||||
<view class="key openangular">,</view>
|
||||
<view class="key closeangular">.</view>
|
||||
<view class="key slash">/</view>
|
||||
<view class="key s5 shift up">??</view>
|
||||
<view class="key s3 control">☕</view>
|
||||
<view class="key s3 win">??</view>
|
||||
<view class="key s3 alt">⭐️</view>
|
||||
<view class="key s12 space"></view>
|
||||
<view class="key s3 alt">⭐️</view>
|
||||
<view class="key s2 fn left">??</view>
|
||||
<view class="key s2 fn down">????</view>
|
||||
<view class="key s2 control right">☕</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateMimicry',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '总有你想不到的创意',
|
||||
text: '海量分享',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/fullbg4.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '寻找一起成长的小伙伴',
|
||||
text: '愉快玩耍',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/fullbg5.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d4.png'
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '更多彩蛋等你探索',
|
||||
text: '酷炫多彩',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/fullbg4.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d5.png'
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '商业合作请联系作者',
|
||||
text: '免费开源',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/fullbg5.jpg',
|
||||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d6.png'
|
||||
}],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
.template-mimicry{
|
||||
background: #d8dee8;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.keyboard-fixed{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
.keyboard-box{
|
||||
margin: 0 auto;
|
||||
padding: 30rpx 0;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
// background: radial-gradient(circle at top left, #d8dee8 30%, #c2ccdb);
|
||||
}
|
||||
|
||||
.keyboard {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(30, 2.3vw);
|
||||
grid-template-rows: repeat(5, 3.25vh);
|
||||
grid-gap: 0.95vw;
|
||||
// background: #c2ccdb;
|
||||
padding: 1.73vh 1.73vw;
|
||||
// border-radius: 1.27vw;
|
||||
// box-shadow: -0.32vw -0.32vw 0.95vw #f3f5f8, 0.32vw 0.32vw 0.63vw #c2ccdb;
|
||||
}
|
||||
.keyboard .key {
|
||||
border-radius: 0.76vw;
|
||||
grid-column: auto/span 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.475vw;
|
||||
font-size: 1.9vw;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
background: #d8dee8;
|
||||
box-shadow: -0.32vw -0.32vw 0.95vw #f3f5f8, 0.32vw 0.32vw 0.63vw #c2ccdb;
|
||||
transition: all 100ms cubic-bezier(0.09, 0.32, 0.34, 2);
|
||||
user-select: none;
|
||||
}
|
||||
.keyboard .key:hover,
|
||||
.keyboard .key.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #f6f8fa, inset 0.32vw 0.32vw 0.63vw #c2ccdb;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #f7f9fa, 0 0 15px #f7f9fa, 0 0 20px #f7f9fa;
|
||||
}
|
||||
.keyboard .key.dotted {
|
||||
position: relative;
|
||||
}
|
||||
.keyboard .key.dotted::before {
|
||||
content: '_';
|
||||
font-weight: bold;
|
||||
color: #b5c0d2;
|
||||
position: absolute;
|
||||
top: 70%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.keyboard .key.esc {
|
||||
background: #ed4c67;
|
||||
color: #fbdbe1;
|
||||
}
|
||||
.keyboard .key.esc:hover,
|
||||
.keyboard .key.esc.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #f38e9f, inset 0.32vw 0.32vw 0.63vw #c71432;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #f59eac, 0 0 15px #f59eac, 0 0 20px #f59eac;
|
||||
}
|
||||
.keyboard .key.back {
|
||||
background: #d63031;
|
||||
color: #f7d6d6;
|
||||
}
|
||||
.keyboard .key.back:hover,
|
||||
.keyboard .key.back.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #e57c7d, inset 0.32vw 0.32vw 0.63vw #991e1f;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #e88f90, 0 0 15px #e88f90, 0 0 20px #e88f90;
|
||||
}
|
||||
.keyboard .key.shift {
|
||||
background: #1e90ff;
|
||||
color: #d2e9ff;
|
||||
}
|
||||
.keyboard .key.shift:hover,
|
||||
.keyboard .key.shift.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #71b9ff, inset 0.32vw 0.32vw 0.63vw #0065c8;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #85c3ff, 0 0 15px #85c3ff, 0 0 20px #85c3ff;
|
||||
}
|
||||
.keyboard .key.control {
|
||||
background: #be2edd;
|
||||
color: #f2d5f8;
|
||||
}
|
||||
.keyboard .key.control:hover,
|
||||
.keyboard .key.control.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #d57be9, inset 0.32vw 0.32vw 0.63vw #891aa1;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #db8eec, 0 0 15px #db8eec, 0 0 20px #db8eec;
|
||||
}
|
||||
.keyboard .key.win {
|
||||
background: #f7b731;
|
||||
color: #fdf1d6;
|
||||
}
|
||||
.keyboard .key.win:hover,
|
||||
.keyboard .key.win.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #fad17d, inset 0.32vw 0.32vw 0.63vw #c78908;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #fad890, 0 0 15px #fad890, 0 0 20px #fad890;
|
||||
}
|
||||
.keyboard .key.alt {
|
||||
background: #5352ed;
|
||||
color: #dddcfb;
|
||||
}
|
||||
.keyboard .key.alt:hover,
|
||||
.keyboard .key.alt.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #9291f3, inset 0.32vw 0.32vw 0.63vw #1615ca;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #a2a1f5, 0 0 15px #a2a1f5, 0 0 20px #a2a1f5;
|
||||
}
|
||||
.keyboard .key.fn {
|
||||
background: #26de81;
|
||||
color: #d4f8e6;
|
||||
}
|
||||
.keyboard .key.fn:hover,
|
||||
.keyboard .key.fn.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #76eaaf, inset 0.32vw 0.32vw 0.63vw #189e5a;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #8aedbb, 0 0 15px #8aedbb, 0 0 20px #8aedbb;
|
||||
}
|
||||
.keyboard .key.cap {
|
||||
background: #ee5a24;
|
||||
color: #fcded3;
|
||||
position: relative;
|
||||
}
|
||||
.keyboard .key.cap:hover,
|
||||
.keyboard .key.cap.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #f49675, inset 0.32vw 0.32vw 0.63vw #b23a0e;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #f6a588, 0 0 15px #f6a588, 0 0 20px #f6a588;
|
||||
}
|
||||
.keyboard .key.cap::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0.5vw;
|
||||
height: 0.5vw;
|
||||
background: #f6ac91;
|
||||
top: 1vw;
|
||||
right: 1vw;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.keyboard .key.cap.on::before {
|
||||
background: #fbded3;
|
||||
box-shadow: 0 0 0.5vw 0.2vw rgba(255,255,255,0.8);
|
||||
}
|
||||
.keyboard .key.tab {
|
||||
background: #12cbc4;
|
||||
color: #cafaf8;
|
||||
}
|
||||
.keyboard .key.tab:hover,
|
||||
.keyboard .key.tab.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #5aede7, inset 0.32vw 0.32vw 0.63vw #0d8e89;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #72f0eb, 0 0 15px #72f0eb, 0 0 20px #72f0eb;
|
||||
}
|
||||
.keyboard .key.enter {
|
||||
background: #fdcb6e;
|
||||
color: #fff5e2;
|
||||
}
|
||||
.keyboard .key.enter:hover,
|
||||
.keyboard .key.enter.pressed {
|
||||
transform: perspective(300px) scale(0.97);
|
||||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #fddea3, inset 0.32vw 0.32vw 0.63vw #fba403;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px #fde2b0, 0 0 15px #fde2b0, 0 0 20px #fde2b0;
|
||||
}
|
||||
.keyboard .key.s2 {
|
||||
font-size: 1.73vw;
|
||||
grid-column: auto/span 2;
|
||||
}
|
||||
.keyboard .key.s3 {
|
||||
font-size: 1.73vw;
|
||||
grid-column: auto/span 3;
|
||||
}
|
||||
.keyboard .key.s4 {
|
||||
font-size: 1.73vw;
|
||||
grid-column: auto/span 4;
|
||||
}
|
||||
.keyboard .key.s5 {
|
||||
font-size: 1.73vw;
|
||||
grid-column: auto/span 5;
|
||||
}
|
||||
.keyboard .key.s6 {
|
||||
font-size: 1.73vw;
|
||||
grid-column: auto/span 6;
|
||||
}
|
||||
.keyboard .key.s12 {
|
||||
font-size: 1.73vw;
|
||||
grid-column: auto/span 12;
|
||||
}
|
||||
.keyboard .key[on-shift] {
|
||||
font-size: 1.461538461538461vw;
|
||||
justify-items: center;
|
||||
}
|
||||
.keyboard .key[on-shift]::before {
|
||||
content: attr(on-shift);
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 轮播视觉差 start */
|
||||
.card-swiper {
|
||||
height: 600rpx !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 750rpx !important;
|
||||
left: 0rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 0rpx 120rpx 0rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 0rpx;
|
||||
transform: scale(1);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: none;
|
||||
transition: all 0.2s ease-in 0s;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item2 {
|
||||
margin-top: -340rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 0rpx;
|
||||
transform: translate(340rpx, 20rpx) scale(0.5, 0.5);
|
||||
transition: all 0.6s ease 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item2 {
|
||||
margin-top: -340rpx;
|
||||
width: 100%;
|
||||
transform: translate(300rpx, 0rpx) scale(0.8, 0.8);
|
||||
transition: all 0.6s ease 0s;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -320rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(0rpx, -40rpx) scale(0.7, 0.7);
|
||||
transition: all 0.6s ease 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
margin-top: -380rpx;
|
||||
width: 100%;
|
||||
transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 0s;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
background-color: #FFF;
|
||||
opacity: 0.4;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
left: -270rpx;
|
||||
top: -180rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 30rpx;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<view class="template-moon tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<!-- <tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar> -->
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<!-- 图标logo -->
|
||||
<view class="custom-nav__back">
|
||||
<view class="logo-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png')">
|
||||
<view class="logo-image">
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="tn-icon-left"></view> -->
|
||||
</view>
|
||||
<!-- 搜索框 -->
|
||||
<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
|
||||
<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
|
||||
<view class="custom-nav__search__icon tn-icon-search"></view>
|
||||
<view class="custom-nav__search__text tn-padding-left-xs">好想搜点什么</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
|
||||
|
||||
<view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
Hi，北北欢迎你吖
|
||||
</view>
|
||||
<view class="tn-margin" style="font-size: 50rpx;">
|
||||
<text class="tn-icon-menu-more"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<swiper class="card-swiper tn-margin-top-lg" :circular="true"
|
||||
:autoplay="true" duration="500" interval="5000" previous-margin="60rpx" next-margin="60rpx" @change="cardSwiper">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<view class="swiper-item image-banner">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-text-xxl tn-text-bold tn-color-white">{{item.name}}</view>
|
||||
<view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-xs">{{item.text}}</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="indication">
|
||||
<block v-for="(item,index) in swiperList" :key="index">
|
||||
<view class="spot" :class="cardCur==index?'active':''"></view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-level">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-black">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-camera-fill tn-color-white">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
|
||||
</view>
|
||||
<!-- <view class="tn-color-gray">发布</view> -->
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-signpost tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">导向</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplateMoon',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '图鸟UI 她来了',
|
||||
text: '开启全新的探索之旅',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '欢迎加入东东们',
|
||||
text: '如果你也有不错的作品',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '一起玩转scss',
|
||||
text: '用最少的代码做最骚的效果',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '微信号 tnkewo',
|
||||
text: '商业合作请联系作者',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
name: '努力成为大佬',
|
||||
text: '一起加油吖',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 60%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 15rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
/* 轮播图片入口 start*/
|
||||
.card-swiper {
|
||||
height: 67vh !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 630rpx !important;
|
||||
// left: 60rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 0rpx 90rpx 0rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
transform: scale(0.9);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: none;
|
||||
transition: all 0.2s ease-in 0s;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -180rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(0rpx, -40rpx) scale(0.7, 0.7);
|
||||
transition: all 0.6s ease 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
margin-top: -150rpx;
|
||||
width: 100%;
|
||||
transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 0s;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0rpx 30rpx 60rpx 0rpx rgba(116,10,250, 0.08);
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
display:flex;
|
||||
margin-top: -50rpx;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
background-color: #3165CC;
|
||||
opacity: 0.4;
|
||||
width: 15rpx;
|
||||
height: 15rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 35rpx;
|
||||
background-color: #3165CC;
|
||||
}
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
// line-height: 50rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: -30rpx auto 20rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #01BEFF;
|
||||
width: 90rpx !important;
|
||||
height: 90rpx !important;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: inline-block;
|
||||
margin: 15rpx auto 15rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,482 @@
|
||||
<template>
|
||||
<view class="template-movie tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<!-- <tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar> -->
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="none">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<!-- 图标logo -->
|
||||
<view class="custom-nav__back">
|
||||
<view class="logo-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png')">
|
||||
<view class="logo-image">
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="tn-icon-left"></view> -->
|
||||
</view>
|
||||
<!-- 搜索框 -->
|
||||
<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
|
||||
<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view class="custom-nav__search__icon tn-icon-search"></view>
|
||||
<view class="custom-nav__search__text tn-padding-left-xs">搜索 镇魂街</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
|
||||
|
||||
<view class="top-backgroup">
|
||||
<image src='https://resource.tuniaokj.com/images/index_bg/tuniao3.jpg' mode='widthFix' class='backgroud-image'></image>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="" style="margin: -250rpx 0 120rpx 0;">
|
||||
<tn-notice-bar :show="closeNoticeShow" :list="list" :closeBtn="true" @close="closeNoticeShow = false"></tn-notice-bar>
|
||||
<view class="tn-margin-top-sm">
|
||||
<tn-sticky :offsetTop="10" :customNavHeight="vuex_custom_bar_height">
|
||||
<tn-tabs :list="fixedList" :current="current" activeColor="#000" bold="true" :fontSize="32" :badgeOffset="[20, 50]" @change="tabChange"></tn-tabs>
|
||||
</tn-sticky>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<swiper class="card-swiper" :circular="true"
|
||||
:autoplay="true" duration="500" interval="5000" previous-margin="200rpx" next-margin="200rpx" @change="cardSwiper" style="margin-top: -80rpx;">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<view class="swiper-item image-banner">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-text-xxl tn-text-bold">{{item.name}}</view>
|
||||
<view class="tn-text-sm tn-text-bold tn-padding-top-xs">{{item.text}}</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="indication">
|
||||
<block v-for="(item,index) in swiperList" :key="index">
|
||||
<view class="spot" :class="cardCur==index?'active':''"></view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 方式16 start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-top-xl tn-padding-sm">
|
||||
<block v-for="(item, index) in swiperList" :key="index">
|
||||
<view class="" style="width: 33.3%;">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center ">
|
||||
<view class="tn-radius tn-padding-sm">
|
||||
<view class="image-pic" :style="'background-image:url('+ item.url +')'">
|
||||
<view class="image-movie">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-text-center tn-text-bold tn-padding-top-xs">{{item.name}}</view>
|
||||
<view class="tn-text-center tn-text-xs tn-color-gray--dark tn-padding-top-xs">{{item.text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 方式16 end-->
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action bar-left">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-discover-fill tn-color-aquablue">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-black">首页</view>
|
||||
</view>
|
||||
<view class="action bar-center">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-vip-fill tn-color-white">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
|
||||
</view>
|
||||
<!-- <view class="tn-color-gray">发布</view> -->
|
||||
</view>
|
||||
<view class="action bar-right">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-eye-fill tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">历史</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-xl"></view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplateMovie',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
list: [
|
||||
'电影资源仅提供介绍，请上拥有版权的APP观看',
|
||||
'排行仅为个人喜欢，不喜勿喷',
|
||||
'抓住那只猪科技有限公司出品',
|
||||
'今天想找个人一起去看电影'
|
||||
],
|
||||
closeNoticeShow: true,
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '铁甲钢拳',
|
||||
text: '342人想看',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '龙和雀斑公主',
|
||||
text: '342人想看',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '哈尔的移动城堡',
|
||||
text: '342人想看',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '机器人总动员',
|
||||
text: '342人想看',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
name: '功勋·于敏',
|
||||
text: '342人想看',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/content_1.jpeg',
|
||||
}, {
|
||||
id: 5,
|
||||
type: 'image',
|
||||
name: '心欲呐喊',
|
||||
text: '342人想看',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
|
||||
}, {
|
||||
id: 6,
|
||||
type: 'image',
|
||||
name: '白日梦想家',
|
||||
text: '332人想看',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
|
||||
}, {
|
||||
id: 7,
|
||||
type: 'image',
|
||||
name: '摔跤吧爸爸',
|
||||
text: '342人想看',
|
||||
url: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
|
||||
}],
|
||||
current: 0,
|
||||
fixedList: [
|
||||
{name: '推荐'},
|
||||
{name: '电影'},
|
||||
{name: '综艺'},
|
||||
{name: '动漫'},
|
||||
{name: '电视剧'},
|
||||
{name: '纪录片', count: ''},
|
||||
{name: '其他', count: ''},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
// tab选项卡切换
|
||||
tabChange(index) {
|
||||
this.current = index
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 60%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 10rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx 60rpx 0 60rpx;
|
||||
font-size: 24rpx;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #080808;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
/* 顶部背景图 start */
|
||||
.top-backgroup {
|
||||
height: 450rpx;
|
||||
z-index: -1;
|
||||
|
||||
.backgroud-image {
|
||||
width: 100%;
|
||||
height: 667rpx;
|
||||
// z-index: -1;
|
||||
}
|
||||
}
|
||||
/* 顶部背景图 end */
|
||||
/* 轮播样机样式 start*/
|
||||
.card-swiper {
|
||||
height: 560rpx !important;
|
||||
border-radius: 0 0 50% 50%/0 0 10% 10%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 350rpx !important;
|
||||
// left: 200rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 15rpx 20rpx 15rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 25rpx;
|
||||
transform: scale(0.9) translate(0rpx,60rpx);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: none;
|
||||
transition: all 0.2s ease-in 0s;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -120rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(0rpx, 0rpx) scale(0.7, 0.7);
|
||||
transition: all 0.4s ease 0s;
|
||||
overflow: hidden;
|
||||
color: #000000;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
margin-top: -150rpx;
|
||||
padding-left: 30rpx;
|
||||
width: 100%;
|
||||
transform: translate(-20rpx, 20rpx) scale(0.9, 0.9);
|
||||
transition: all 0.4s ease 0s;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0rpx 10rpx 30rpx rgba(0,0,0,0.3);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// box-shadow: 0rpx 30rpx 60rpx 0rpx rgba(116,10,250, 0.06);
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
background-color: #000;
|
||||
opacity: 0;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
top: -80rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 0;
|
||||
width: 30rpx;
|
||||
background-color: #000;
|
||||
}
|
||||
/* 效果布局 start*/
|
||||
.image-movie{
|
||||
width: 200rpx;
|
||||
height: 300rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-pic{
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
// box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
padding: 50rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.bar-left{
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 0rpx 95% 0rpx 0rpx / 0rpx 94% 0rpx 0rpx;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.bar-center{
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes suspension {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-0.8rem);
|
||||
}
|
||||
}
|
||||
|
||||
.bar-right{
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 95% 0rpx 0rpx 0rpx / 94% 0rpx 0rpx 0rpx;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
// line-height: 50rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: -30rpx auto 20rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #3646FF;
|
||||
width: 90rpx !important;
|
||||
height: 90rpx !important;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(54, 70, 255, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: inline-block;
|
||||
margin: 15rpx auto 15rpx;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,486 @@
|
||||
<template>
|
||||
<view class="template-plan tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<!-- <tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar> -->
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<!-- 按钮 -->
|
||||
<view class="custom-nav__back">
|
||||
<view class="tn-icon-menu-more" style="font-size: 50rpx;"></view>
|
||||
</view>
|
||||
<!-- 字 -->
|
||||
<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
|
||||
<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-center">
|
||||
<text class="tn-text-bold tn-text-xxl">北北小目标</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
|
||||
<view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
未进行（5）
|
||||
</view>
|
||||
<view class="tn-margin" style="font-size: 50rpx;">
|
||||
<text class="tn-icon-send"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<swiper class="card-swiper tn-margin-top-sm" :circular="true"
|
||||
:autoplay="true" duration="500" interval="5000" @change="cardSwiper">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<view class="swiper-item image-banner">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-text-xxl tn-text-bold">{{item.name}}</view>
|
||||
<view class="tn-text-sm tn-text-bold tn-padding-top-xs">{{item.text}}</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="indication">
|
||||
<block v-for="(item,index) in swiperList" :key="index">
|
||||
<view class="spot" :class="cardCur==index?'active':''"></view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view class="" style="margin-top: -30rpx;">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
今日目标
|
||||
</view>
|
||||
<view class="tn-margin" style="font-size: 50rpx;">
|
||||
<text class="tn-icon-edit-form"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-margin-left tn-text-sm tn-color-gray" style="margin-top: -25rpx;">
|
||||
<text>这是今日目标，请干巴爹吖</text>
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<view class="tn-plan-content tn-margin tn-text-justify">
|
||||
<view v-for="(item,index) in planList" :key="index" class="tn-plan-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
|
||||
<text class="tn-plan-content__item--prefix">#</text> {{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-clear-float tn-padding-top-lg">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
历史记录
|
||||
</view>
|
||||
<!-- <view class="tn-margin" style="font-size: 50rpx;">
|
||||
<text class="tn-icon-right"></text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-margin-left tn-text-sm tn-color-gray" style="margin-top: -25rpx;">
|
||||
<text>完成的目标，当然要记录啦</text>
|
||||
</view>
|
||||
|
||||
<view class="tn-margin-top-lg" style="margin-bottom: 50rpx">
|
||||
<view class="tn-plan-content2 tn-margin tn-text-justify">
|
||||
<view v-for="(item,index) in planList2" :key="index" class="tn-plan-content2__item tn-margin-right tn-round tn-text-sm tn-text-bold tn-bg-gray--light tn-color-black">
|
||||
<text class="tn-plan-content2__item--prefix">#</text> {{item.name}}
|
||||
<text class="tn-float-right">{{item.time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" style="height: 10rpx;">
|
||||
</view>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-home-smile">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/a1.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-discover">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/k2.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">圈子</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-image-text">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/i2.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">案例</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-my">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/d2.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-xl"></view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplatePlan',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '看书20分钟',
|
||||
text: '静下心看《读者》',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '创新一个轮播',
|
||||
text: '在图鸟UI新增创意轮播',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '坚持早起',
|
||||
text: '早上9点前起床',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '和群友吹水',
|
||||
text: '技术的友情永不过时',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
name: '散步找创意',
|
||||
text: '每天散步30分钟',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}],
|
||||
planList: [{
|
||||
name: '看书',
|
||||
color: 'red',
|
||||
time: '2021-12-13 06:20',
|
||||
}, {
|
||||
name: '早起',
|
||||
color: 'cyan',
|
||||
time: '8:37',
|
||||
}, {
|
||||
name: '做30个深蹲',
|
||||
color: 'blue',
|
||||
}, {
|
||||
name: '散步',
|
||||
color: 'green',
|
||||
}, {
|
||||
name: '写新的轮播效果',
|
||||
color: 'orange',
|
||||
}, {
|
||||
name: '吃早餐',
|
||||
color: 'purplered',
|
||||
}, {
|
||||
name: '陪猫猫玩',
|
||||
color: 'purple',
|
||||
}, {
|
||||
name: '睡午觉',
|
||||
color: 'brown',
|
||||
}, {
|
||||
name: '干饭饭',
|
||||
color: 'yellowgreen',
|
||||
}, {
|
||||
name: '蔡猪北',
|
||||
color: 'grey',
|
||||
}],
|
||||
planList2: [{
|
||||
name: '陪猫猫玩',
|
||||
time: '2021-12-13 22:45',
|
||||
},{
|
||||
name: '写新的轮播效果',
|
||||
time: '2021-12-13 20:20',
|
||||
}, {
|
||||
name: '散步',
|
||||
time: '2021-12-13 18:11',
|
||||
}, {
|
||||
name: '睡午觉',
|
||||
time: '2021-12-13 13:42',
|
||||
}, {
|
||||
name: '干饭饭',
|
||||
time: '2021-12-13 12:14',
|
||||
}, {
|
||||
name: '看书',
|
||||
time: '2021-12-13 10:21',
|
||||
}, {
|
||||
name: '吃早餐',
|
||||
time: '2021-12-13 08:56',
|
||||
}, {
|
||||
name: '做30个深蹲',
|
||||
time: '2021-12-13 08:40',
|
||||
}, {
|
||||
name: '早起',
|
||||
time: '2021-12-13 08:22',
|
||||
}, {
|
||||
name: '蔡北北测试',
|
||||
time: '2021-12-12 22:06',
|
||||
}],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
.template-plan{
|
||||
}
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 70%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 15rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
/* 轮播 start*/
|
||||
.card-swiper {
|
||||
height: 570rpx !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 450rpx !important;
|
||||
left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 0rpx 80rpx 0rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
transform: scale(0.7) translate(0rpx,-104rpx);
|
||||
transition: all 0.3s ease-in 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: none;
|
||||
transition: all 0.3s ease-in 0s;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -120rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(20rpx, -30rpx) scale(0.7, 0.7);
|
||||
transition: all 0.4s ease 0s;
|
||||
overflow: hidden;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
margin-top: -150rpx;
|
||||
padding-left: 30rpx;
|
||||
width: 100%;
|
||||
transform: translate(-20rpx, 20rpx) scale(0.9, 0.9);
|
||||
transition: all 0.4s ease 0s;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0rpx 10rpx 20rpx rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0rpx 30rpx 60rpx 0rpx rgba(116,10,250, 0.15);
|
||||
// border: 1rpx solid red;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
background-color: #000;
|
||||
opacity: 0.4;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
right: -270rpx;
|
||||
top: -100rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 10rpx;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/* 计划内容 start*/
|
||||
.tn-plan-content {
|
||||
&__item {
|
||||
display: inline-block;
|
||||
line-height: 45rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
margin: 20rpx 20rpx 5rpx 0rpx;
|
||||
|
||||
&--prefix {
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tn-plan-content2 {
|
||||
&__item {
|
||||
line-height: 45rpx;
|
||||
padding: 15rpx 30rpx;
|
||||
margin: 30rpx 0rpx 10rpx 0rpx;
|
||||
|
||||
&--prefix {
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 计划内容 end*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,763 @@
|
||||
<template>
|
||||
<view class="template-read tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<!-- <tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar> -->
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<!-- 图标logo -->
|
||||
<view class="custom-nav__back">
|
||||
<view class="logo-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png')">
|
||||
<view class="logo-image">
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="tn-icon-left"></view> -->
|
||||
</view>
|
||||
<!-- 搜索框 -->
|
||||
<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
|
||||
<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
|
||||
<view class="custom-nav__search__icon tn-icon-search"></view>
|
||||
<view class="custom-nav__search__text tn-padding-left-xs">好想搜点什么</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
|
||||
|
||||
<view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
Hi，北北欢迎你吖
|
||||
</view>
|
||||
<view class="tn-margin" style="font-size: 50rpx;">
|
||||
<text class="tn-icon-menu-more"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<swiper class="card-swiper tn-margin-top-sm" :circular="true"
|
||||
:autoplay="true" duration="500" interval="5000" @change="cardSwiper">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<view class="swiper-item image-banner">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-text-xxl tn-text-bold tn-color-white">{{item.title}}</view>
|
||||
<view class="tn-text-bold tn-color-white tn-padding-top-xs" style="font-size: 60rpx;">{{item.name}}</view>
|
||||
<view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">{{item.text}}</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="indication">
|
||||
<block v-for="(item,index) in swiperList" :key="index">
|
||||
<view class="spot" :class="cardCur==index?'active':''"></view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 方式7 start-->
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-1 tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<image class="" src='https://resource.tuniaokj.com/images/icon/a004.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">排行</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<image class="" src='https://resource.tuniaokj.com/images/icon/a002.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">签到</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<image class="" src='https://resource.tuniaokj.com/images/icon/a006.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">免费</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<image class="" src='https://resource.tuniaokj.com/images/icon/a007.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">会员</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式7 end-->
|
||||
|
||||
<!-- 换背景形式-->
|
||||
<!-- <view class="image-div tn-margin">
|
||||
<image src='https://resource.tuniaokj.com/images/swiper/capsule1.png' mode='widthFix' class='image'></image>
|
||||
</view> -->
|
||||
|
||||
<!-- banner start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm">
|
||||
<view class=" " style="width: 100%;">
|
||||
<view class="image-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/swiper/capsule1.png')">
|
||||
<view class="image-capsule">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- banner end-->
|
||||
|
||||
<view class="tn-margin-top">
|
||||
<view class="nav_title--wrap">
|
||||
<view class="nav_title tn-cool-bg-color-5">
|
||||
<text class="tn-icon-copy tn-padding-right-sm"></text>
|
||||
热 / 门 / 书 / 籍
|
||||
<text class="tn-icon-copy tn-padding-left-sm"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图文 -->
|
||||
<!-- 比例 start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm tn-padding-bottom">
|
||||
<block v-for="(item, index) in content" :key="index">
|
||||
<view class="" style="width: 50%;">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
<view class="image-picbook" :style="'background-image:url(' + item.mainImage + ')'">
|
||||
<view class="image-book">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
|
||||
<text class="tn-blogger-content__label__desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
|
||||
<!-- <view class="justify-content-item tn-flex tn-flex-col-center">
|
||||
<view>
|
||||
<view class="tn-color-gray">
|
||||
<text class="tn-blogger-content__count-icon tn-icon-flower"></text>
|
||||
<text class="tn-padding-right-sm">{{ item.collectionCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-message"></text>
|
||||
<text class="tn-padding-right-sm">{{ item.commentCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-like"></text>
|
||||
<text class="">{{ item.likeCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="justify-content-item tn-text-center">
|
||||
<view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
|
||||
<text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 比例 end-->
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed" style="border-radius: 100rpx;">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-home-smile">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/a1.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-black">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-discover tn-color-gray">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/k2.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">圈子</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-image-text tn-color-gray">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/i2.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">案例</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-my tn-color-gray">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/d2.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-xl"></view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplateRead',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
title: '海量分享',
|
||||
name: '总有你想不到的创意',
|
||||
text: '用最少的代码做最骚的效果',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
title: '愉快玩耍',
|
||||
name: '寻找一起成长的小伙伴',
|
||||
text: '欢迎加入东东们',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
title: '酷炫多彩',
|
||||
name: '更多彩蛋等你探索',
|
||||
text: '开启全新的探索之旅',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
title: '免费开源',
|
||||
name: '商业合作请联系作者',
|
||||
text: '微信号 tnkewo',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}],
|
||||
content: [
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 999,
|
||||
commentCount: 999,
|
||||
likeCount: 999
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['现代','架空'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['奇幻','缘分'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['争霸','命运'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['古言','文学'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['腹黑','重生'],
|
||||
desc: '我们都是好孩子',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['言情','宠文'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['都市','创越'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 60%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 15rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
/* 轮播视觉差 start */
|
||||
.card-swiper {
|
||||
height: 500rpx !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 750rpx !important;
|
||||
left: 0rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 30rpx 90rpx 30rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 30rpx;
|
||||
transform: scale(1);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: none;
|
||||
transition: all 0.2s ease-in 0s;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -220rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
margin-top: -280rpx;
|
||||
width: 100%;
|
||||
transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 0s;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
background-color: #FFFFFF;
|
||||
opacity: 0.6;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
top: -130rpx;
|
||||
margin: 0 8rpx !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* 图标容器7 start */
|
||||
.icon7 {
|
||||
&__item {
|
||||
width: 30%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 10rpx;
|
||||
margin: 20rpx 10rpx;
|
||||
transform: scale(1);
|
||||
transition: transform 0.3s linear;
|
||||
transform-origin: center center;
|
||||
|
||||
&--icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
font-size: 50rpx;
|
||||
border-radius: 0;
|
||||
margin-bottom: -10rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-capsule{
|
||||
padding:120rpx 0rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
}
|
||||
|
||||
/* 胶囊背景图 start */
|
||||
.image-div {
|
||||
height: 450rpx;
|
||||
z-index: -1;
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 667rpx;
|
||||
// z-index: -1;
|
||||
}
|
||||
}
|
||||
/* 胶囊背景图 end */
|
||||
/* 标题 start */
|
||||
.nav_title {
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
&--wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 120rpx;
|
||||
font-size: 46rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
/* 标题 end */
|
||||
|
||||
/* 文章内容 start*/
|
||||
.tn-blogger-content {
|
||||
&__wrap {
|
||||
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.12);
|
||||
border-radius: 20rpx;
|
||||
margin: 15rpx;
|
||||
}
|
||||
|
||||
&__info {
|
||||
&__btn {
|
||||
margin-right: -12rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
&__item {
|
||||
line-height: 45rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 5rpx 18rpx 0 0;
|
||||
|
||||
&--prefix {
|
||||
color: #82B2FF;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
line-height: 35rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
|
||||
&--1 {
|
||||
max-width: 690rpx;
|
||||
min-width: 690rpx;
|
||||
max-height: 400rpx;
|
||||
min-height: 400rpx;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
max-width: 260rpx;
|
||||
max-height: 260rpx;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
height: 212rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__count-icon {
|
||||
font-size: 30rpx;
|
||||
padding-right: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-book{
|
||||
padding: 150rpx 0rpx;
|
||||
font-size: 16rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-picbook{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
/* 文章内容 end*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
// margin: 20rpx;
|
||||
margin: 40rpx 5%;
|
||||
width: 90%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,528 @@
|
||||
<template>
|
||||
<view class="template-course tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<!-- <tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar> -->
|
||||
|
||||
<swiper class="card-swiper" :circular="true"
|
||||
:autoplay="true" duration="500" interval="5000" @change="cardSwiper">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<view class="swiper-item image-banner">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-text-xxl tn-text-bold tn-color-white">{{item.title}}</view>
|
||||
<view class="tn-text-bold tn-color-white tn-padding-top-xs" style="font-size: 60rpx;">{{item.name}}</view>
|
||||
<view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">{{item.text}}</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="indication">
|
||||
<block v-for="(item,index) in swiperList" :key="index">
|
||||
<view class="spot" :class="cardCur==index?'active':''"></view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-margin tea-user__wrap">
|
||||
|
||||
<view class="tn-flex-3 tn-padding tea-radius tn-bg-white tea-shadow" style="margin-right: 30rpx;">
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<view class="user-avatar">
|
||||
<view class="tn-icon-logo-tuniao" style="font-size: 90rpx;color: #01BEFF;"></view>
|
||||
</view>
|
||||
<view class="tn-padding-right tn-text-ellipsis tn-text-left">
|
||||
<view class="tn-padding-right tn-padding-left-sm tn-color-black tn-text-bold">
|
||||
图鸟小伙伴
|
||||
</view>
|
||||
<view class="tn-padding-right tn-padding-left-sm tn-padding-top-xs tn-color-gray tn-text-sm">有 6 张优惠券未使用</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex-1 justify-content-item tn-padding tn-text-center tea-radius tn-bg-white tea-shadow">
|
||||
<view class="">
|
||||
<text class="tn-icon-qr-code tn-text-xl"></text>
|
||||
</view>
|
||||
<view class=" tn-padding-top-xs">
|
||||
会员码
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="">
|
||||
|
||||
<!-- 方式12 start-->
|
||||
<view class="tn-flex tn-margin" style="padding-top: 15rpx;">
|
||||
<view class="tn-flex-1 tea-shadow tea-radius tn-bg-white" style="margin-right: 15rpx;padding: 40rpx 0;">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-blue--light tn-color-blue">
|
||||
<view class="tn-icon-shop tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<view class="tn-text-ellipsis tn-text-xl tn-text-bold">门店自取</view>
|
||||
<view class="tn-text-ellipsis tn-color-gray--dark tn-padding-top-sm">下单免排队</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tea-shadow tea-radius tn-bg-white" style="margin-left: 15rpx;padding: 40rpx 0;">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-blue--light tn-color-blue">
|
||||
<view class="tn-icon-electromobile tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<view class="tn-text-ellipsis tn-text-xl tn-text-bold">外卖配送</view>
|
||||
<view class="tn-text-ellipsis tn-color-gray--dark tn-padding-top-sm">无接触配送</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin" style="padding-top: 15rpx;">
|
||||
<block v-for="(item, index) in tuniaoData" :key="index">
|
||||
<view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white tea-shadow">
|
||||
<view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
|
||||
<view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center" :class="[`tn-color-${item.color}--disabled`]">
|
||||
<view :class="[`tn-icon-${item.icon}`]"></view>
|
||||
</view>
|
||||
<view class="tn-info__item__left__content">
|
||||
<view class="tn-info__item__left__content--title tn-text-bold tn-text-xl tn-color-black">{{ item.title }}</view>
|
||||
<!-- <view class="tn-info__item__left__content--data tn-padding-top-xs">
|
||||
{{ item.value }}
|
||||
<text class="tn-icon-right tn-padding-left-xs"></text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="tn-info__item__right">
|
||||
<view class="tn-info__item__right--icon">
|
||||
<view :class="[`tn-icon-${item.icon}`]"></view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-home-smile">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-home.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">门店</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-watercup tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-buy.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">点餐</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-shop tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-shop.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">商城</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-ticket tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-list.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">订单</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-my tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/shop-my.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-xl"></view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplateCourse',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
title: 'BUG再多',
|
||||
name: '也别忘了',
|
||||
text: '我无限续杯',
|
||||
url: 'https://resource.tuniaokj.com/images/shop/cup1.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
title: '图鸟南南',
|
||||
name: '欢迎加入东东们',
|
||||
text: '如果你也有不错的作品',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
title: '图鸟西西',
|
||||
name: '一起玩转scss',
|
||||
text: '用最少的代码做最骚的效果',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/deer.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
title: '图鸟北北',
|
||||
name: '微信号 tnkewo',
|
||||
text: '商业合作请联系作者',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/swiper3.jpg',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
title: '图鸟猪猪',
|
||||
name: '努力成为大佬',
|
||||
text: '一起加油吖',
|
||||
url: 'https://resource.tuniaokj.com/images/shop/banner2.jpg',
|
||||
}],
|
||||
tuniaoData: [
|
||||
{
|
||||
title: '开通会员',
|
||||
icon: 'vip-fill',
|
||||
color: 'red',
|
||||
value: '我就看看'
|
||||
},
|
||||
{
|
||||
title: '来场约惠',
|
||||
icon: 'tag-fill',
|
||||
color: 'blue',
|
||||
value: '我就看看'
|
||||
},
|
||||
{
|
||||
title: '放肆开玩',
|
||||
icon: 'game-fill',
|
||||
color: 'orange',
|
||||
value: '我就看看'
|
||||
},
|
||||
{
|
||||
title: '加盟开店',
|
||||
icon: 'commissary-fill',
|
||||
color: 'green',
|
||||
value: '我就看看'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
/* 头像 start*/
|
||||
.user-avatar{
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 内容布局 start*/
|
||||
.tea-shadow{
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
.tea-user {
|
||||
|
||||
&__wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 20rpx 30rpx;
|
||||
margin-top: -80rpx;
|
||||
}
|
||||
}
|
||||
.tea-radius{
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
/* 轮播视觉差 start */
|
||||
.card-swiper {
|
||||
height: 800rpx !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 750rpx !important;
|
||||
left: 0rpx;
|
||||
box-sizing: border-box;
|
||||
// padding: 0rpx 30rpx 90rpx 30rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
transform: scale(1);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: none;
|
||||
transition: all 0.2s ease-in 0s;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -320rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
margin-top: -380rpx;
|
||||
width: 100%;
|
||||
transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 0s;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
background-color: #FFFFFF;
|
||||
opacity: 0.6;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
top: -130rpx;
|
||||
margin: 0 8rpx !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* 图标容器12 start */
|
||||
.tn-three{
|
||||
position: absolute;
|
||||
top: 48%;
|
||||
right: 50%;
|
||||
bottom: 50%;
|
||||
left: 52%;
|
||||
transform: translate(-38rpx, -16rpx) rotateX(0deg) rotateY(10deg) rotateZ(-20deg);
|
||||
text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.icon12 {
|
||||
&__item {
|
||||
width: 30%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
margin: 20rpx 10rpx;
|
||||
transform: scale(1);
|
||||
transition: transform 0.3s linear;
|
||||
transform-origin: center center;
|
||||
|
||||
&--icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
background-size: 100% 100%;
|
||||
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 业务展示 start */
|
||||
.tn-info {
|
||||
|
||||
&__container {
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: 48%;
|
||||
margin: 15rpx 0rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
border-radius: 15rpx;
|
||||
|
||||
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
background-size: 100% 100%;
|
||||
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/6.png);
|
||||
}
|
||||
|
||||
&__left {
|
||||
|
||||
&--icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 70rpx;
|
||||
margin-right: 20rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__content {
|
||||
font-size: 30rpx;
|
||||
|
||||
&--data {
|
||||
margin-top: 5rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__right {
|
||||
&--icon {
|
||||
position: absolute;
|
||||
right: 0upx;
|
||||
top: 50upx;
|
||||
font-size: 100upx;
|
||||
width: 108upx;
|
||||
height: 108upx;
|
||||
text-align: center;
|
||||
line-height: 60upx;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 业务展示 end */
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,639 @@
|
||||
<template>
|
||||
<view class="template-tuniao tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<!-- <tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar> -->
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed :isBack="false" :bottomShadow="false" :backgroundColor="navBarBackgroundColor">
|
||||
<view id="navbar" class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left" :style="[navBarStyle]">
|
||||
<!-- 图标logo -->
|
||||
<view class="custom-nav__back">
|
||||
<view class="logo-pic" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo.jpg')">
|
||||
<view class="logo-image">
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="tn-icon-left"></view> -->
|
||||
</view>
|
||||
<!-- 搜索框 -->
|
||||
<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center">
|
||||
<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
|
||||
<view class="custom-nav__search__icon tn-icon-search"></view>
|
||||
<view class="custom-nav__search__text tn-padding-left-xs">好想搜点什么</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view id="page_tips" class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
Hi，早午晚都好吖
|
||||
</view>
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
<text class="tn-icon-share-triangle"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-margin-left tn-margin-right tn-margin-top-sm">
|
||||
<tn-swiper :list="banner" :height="320" :effect3d="false" mode="round"></tn-swiper>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-margin-top-xl">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
热门项目
|
||||
</view>
|
||||
<view class="justify-content-item tn-margin tn-text-lg tn-color-gray--disabled">
|
||||
<text class="tn-padding-xs">全部</text>
|
||||
<text class="tn-icon-topics"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-margin-left tn-margin-right tn-margin-top-sm">
|
||||
<view class="tn-flex-2">
|
||||
|
||||
<view class="image-pic tn-margin-right" style="background-image:url('https://resource.tuniaokj.com/images/shop/cup2.jpg')">
|
||||
<view class="image-tuniao1">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="tn-flex-1">
|
||||
<view class="image-pic" style="background-image:url('https://resource.tuniaokj.com/images/shop/phonecase1.jpg')">
|
||||
<view class="image-tuniao2">
|
||||
</view>
|
||||
</view>
|
||||
<view class="image-pic tn-margin-top" style="background-image:url('https://resource.tuniaokj.com/images/shop/banner1.jpg')">
|
||||
<view class="image-tuniao2">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-margin-top">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
业务范围
|
||||
</view>
|
||||
<!-- <view class="justify-content-item tn-margin tn-text-xxl tn-color-gray--disabled">
|
||||
<text class="tn-padding-xs">全部</text>
|
||||
<text class="tn-icon-topics"></text>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin-left tn-margin-right">
|
||||
<block v-for="(item, index) in tuniaoData" :key="index">
|
||||
<view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white" :class="[`tn-bg-${item.color}`]">
|
||||
<view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
|
||||
<!-- <view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
|
||||
<view :class="[`tn-icon-${item.icon}`]"></view>
|
||||
</view> -->
|
||||
<view class="tn-info__item__left__content">
|
||||
<view class="tn-info__item__left__content--title tn-text-xxl">{{ item.title }}</view>
|
||||
<view class="tn-info__item__left__content--data tn-padding-top-xs">
|
||||
{{ item.value }}
|
||||
<text class="tn-icon-right tn-padding-left-xs"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-info__item__right">
|
||||
<view class="tn-info__item__right--icon">
|
||||
<view :class="[`tn-icon-${item.icon}`]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="bg-tabbar-shadow"></view>
|
||||
<view class="tabbar__placeholder"></view>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<view class="tabbar">
|
||||
<view class="tabbar__bg" :style="[wrapStyle]"></view>
|
||||
<view class="tabbar__list">
|
||||
<block v-for="(item, index) in tabbar" :key="index">
|
||||
<view :id="`tabbar_item_${index}`" class="tabbar__item" :class="[{'tabbar__item--active': index === currentTabbarIndex}]" @click="changeTabbar(index)">
|
||||
<view class="tabbar__item__icon" :class="[item.icon]"></view>
|
||||
<view class="tabbar__item__text">{{ item.name }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- <view class="tabbar__select-active-bg" :class="[showActiceBg ? 'tabbar__select-active-bg--show' : 'tabbar__select-active-bg--hide']" :style="[activeBgStyle]"></view> -->
|
||||
<view class="tabbar__select-active-bg" :animation="activeBgAnimation"></view>
|
||||
</view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplateCourse',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
banner: [{
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner1.jpg'
|
||||
}, {
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner2.jpg'
|
||||
}, {
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner3.jpg'
|
||||
}, {
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/tnbanner4.jpg'
|
||||
}],
|
||||
tuniaoData: [
|
||||
{
|
||||
title: 'UI设计',
|
||||
icon: 'image-text-fill',
|
||||
color: 'red',
|
||||
value: '前往咨询'
|
||||
},
|
||||
{
|
||||
title: '小程序',
|
||||
icon: 'data-fill',
|
||||
color: 'orange',
|
||||
value: '前往咨询'
|
||||
},
|
||||
{
|
||||
title: '网站开发',
|
||||
icon: 'statistics-fill',
|
||||
color: 'purple',
|
||||
value: '前往咨询'
|
||||
},
|
||||
{
|
||||
title: '其他业务',
|
||||
icon: 'bankcard-fill',
|
||||
color: 'blue',
|
||||
value: '前往咨询'
|
||||
}
|
||||
],
|
||||
wrapMaskPositionLeft: 0,
|
||||
activeBgPositionLeft: 0,
|
||||
showActiceBg: false,
|
||||
prevTabbarIndex: 0,
|
||||
currentTabbarIndex: 0,
|
||||
tabbarRectInfo: [],
|
||||
tabbar: [
|
||||
{ name: '首页', icon: 'tn-icon-home' },
|
||||
{ name: '圈子', icon: 'tn-icon-discover' },
|
||||
{ name: '数据', icon: 'tn-icon-data' },
|
||||
{ name: '我的', icon: 'tn-icon-my' }
|
||||
],
|
||||
navBarRectInfo: {},
|
||||
navBarChangebaseLineHeight: 0,
|
||||
navBarStyle: {
|
||||
opacity: 1,
|
||||
display: 'flex'
|
||||
},
|
||||
navBarBackgroundColor: 'rgba(255, 255, 255, 1)',
|
||||
activeBgAnimation: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
wrapStyle() {
|
||||
return {
|
||||
'-webkit-mask-position': `${this.wrapMaskPositionLeft}px -1px, 100%`
|
||||
}
|
||||
},
|
||||
activeBgStyle() {
|
||||
return {
|
||||
'left': `${this.activeBgPositionLeft}px`
|
||||
}
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
this.getTabbarItemInfo()
|
||||
this.initNavBarRectInfo()
|
||||
})
|
||||
},
|
||||
onPageScroll() {
|
||||
this.updateNavBarRectInfo()
|
||||
},
|
||||
methods: {
|
||||
// 初始化导航栏信息
|
||||
async initNavBarRectInfo() {
|
||||
const navBarRectInfo = await this._tGetRect('#navbar')
|
||||
const pageTipsRectInfo = await this._tGetRect('#page_tips')
|
||||
// console.log(navBarRectInfo, pageTipsRectInfo);
|
||||
if (!(navBarRectInfo?.top) || !(pageTipsRectInfo?.top)) {
|
||||
setTimeout(() => {
|
||||
this.initNavBarRectInfo()
|
||||
}, 10)
|
||||
return
|
||||
}
|
||||
this.navBarRectInfo = {
|
||||
top: navBarRectInfo.top
|
||||
}
|
||||
this.navBarChangebaseLineHeight = pageTipsRectInfo.top - navBarRectInfo.top
|
||||
},
|
||||
// 更新导航栏信息
|
||||
updateNavBarRectInfo() {
|
||||
this._tGetRect('#page_tips').then((res) => {
|
||||
const top = res?.top || 0
|
||||
if (!top) {
|
||||
return
|
||||
}
|
||||
const differHeight = top - this.navBarRectInfo.top
|
||||
const opacity = differHeight / this.navBarChangebaseLineHeight
|
||||
if (opacity < 0) {
|
||||
this.navBarStyle.opacity = 0
|
||||
this.navBarStyle.display = 'none'
|
||||
this.navBarBackgroundColor = `rgba(255, 255, 255, 0)`
|
||||
} else {
|
||||
this.navBarStyle.opacity = opacity
|
||||
this.navBarStyle.display = 'flex'
|
||||
this.navBarBackgroundColor = `rgba(255, 255, 255, ${opacity})`
|
||||
}
|
||||
|
||||
// console.log(top, differHeight, opacity);
|
||||
})
|
||||
},
|
||||
// 获取底部元素的位置
|
||||
getTabbarItemInfo() {
|
||||
const view = uni.createSelectorQuery().in(this)
|
||||
for(let i = 0; i < this.tabbar.length; i++) {
|
||||
view.select('#tabbar_item_' + i).boundingClientRect()
|
||||
}
|
||||
view.exec(res => {
|
||||
if (!res.length) {
|
||||
setTimeout(() => {
|
||||
this.getTabbarItemInfo()
|
||||
}, 10)
|
||||
return
|
||||
}
|
||||
|
||||
// 将信息存入数组中
|
||||
res.map((item) => {
|
||||
this.tabbarRectInfo.push({
|
||||
left: item.left,
|
||||
width: item.width
|
||||
})
|
||||
})
|
||||
this.updateHollowsPosition()
|
||||
this.updateActiveBgPosition(true)
|
||||
// console.log(this.tabbarRectInfo)
|
||||
})
|
||||
},
|
||||
// 更新凹陷位置
|
||||
updateHollowsPosition() {
|
||||
const { width, left } = this.tabbarRectInfo[this.currentTabbarIndex]
|
||||
// 计算掩模图片的宽高比
|
||||
// const imageRatio = 200 / 92
|
||||
// 计算定高的宽比
|
||||
const imageFixedHeightWidthRatioValue = 300 * (uni.upx2px(64) / 92)
|
||||
this.wrapMaskPositionLeft = left - ((imageFixedHeightWidthRatioValue - width) / 2)
|
||||
// console.log(imageFixedHeightWidthRatioValue, this.wrapMaskPositionLeft);
|
||||
},
|
||||
// 更新激活时背景的位置
|
||||
updateActiveBgPosition(init = false) {
|
||||
const { width, left } = this.tabbarRectInfo[this.currentTabbarIndex]
|
||||
const oldActiveBgPositionLeft = this.activeBgPositionLeft
|
||||
this.activeBgPositionLeft = left + ((width - uni.upx2px(100)) / 2)
|
||||
// console.log(oldActiveBgPositionLeft, this.activeBgPositionLeft);
|
||||
// if (!init) {
|
||||
// this.showActiceBg = false
|
||||
// setTimeout(() => {
|
||||
// this.showActiceBg = true
|
||||
// }, 150)
|
||||
// } else {
|
||||
// this.showActiceBg = true
|
||||
// }
|
||||
if (!init) {
|
||||
const animation = uni.createAnimation({
|
||||
duration: 200,
|
||||
timingFunction: "ease-out"
|
||||
})
|
||||
animation.top(uni.upx2px(50)).left(oldActiveBgPositionLeft + ((this.activeBgPositionLeft - oldActiveBgPositionLeft) / 2)).scale(0.5).step()
|
||||
animation.left(this.activeBgPositionLeft).top(uni.upx2px(-54)).scale(1).step()
|
||||
this.activeBgAnimation = animation.export()
|
||||
} else {
|
||||
const animation = uni.createAnimation({
|
||||
duration: 100,
|
||||
timingFunction: "ease-out"
|
||||
})
|
||||
animation.left(this.activeBgPositionLeft).top(uni.upx2px(-54)).step()
|
||||
this.activeBgAnimation = animation.export()
|
||||
}
|
||||
|
||||
},
|
||||
// 修改当前选中的tabbar
|
||||
changeTabbar(index) {
|
||||
if (this.currentTabbarIndex === index) return
|
||||
this.prevTabbarIndex = this.currentTabbarIndex
|
||||
this.currentTabbarIndex = index
|
||||
this.$nextTick(() => {
|
||||
this.updateHollowsPosition()
|
||||
this.updateActiveBgPosition()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
.template-tuniao {
|
||||
// background-color: #FBFBFB;
|
||||
}
|
||||
/* 底部tabbar假阴影 start*/
|
||||
.bg-tabbar-shadow{
|
||||
background-image: repeating-linear-gradient(to top, rgba(0,0,0,0.1) 10rpx, #FFFFFF , #FFFFFF);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 450rpx;
|
||||
width: 100vw;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 60%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 10rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx 60rpx 0 60rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
|
||||
/* 热门图片 start*/
|
||||
.image-tuniao1{
|
||||
padding: 164rpx 0rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-tuniao2{
|
||||
padding: 75rpx 0rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-tuniao3{
|
||||
padding: 90rpx 0rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
/* 业务展示 start */
|
||||
.tn-info {
|
||||
|
||||
&__container {
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: 48%;
|
||||
margin: 15rpx 0rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
border-radius: 15rpx;
|
||||
|
||||
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
background-size: 100% 100%;
|
||||
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/3.png);
|
||||
}
|
||||
|
||||
&__left {
|
||||
|
||||
&--icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
background-size: 100% 100%;
|
||||
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
font-size: 30rpx;
|
||||
|
||||
&--data {
|
||||
margin-top: 5rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__right {
|
||||
&--icon {
|
||||
position: absolute;
|
||||
right: 0rpx;
|
||||
top: 50rpx;
|
||||
font-size: 100rpx;
|
||||
width: 108rpx;
|
||||
height: 108rpx;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 业务展示 end */
|
||||
|
||||
/* 底部导航 statr */
|
||||
.tabbar {
|
||||
width: 100%;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom));
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: transparent;
|
||||
z-index: 998;
|
||||
|
||||
&__bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #FFFFFF;
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 61.5'%3E%3Cpath d='M100 0H0c32.9 0 49.3 61.5 100 61.5S167.1 0 200 0H100z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
|
||||
-webkit-mask-size: auto 64rpx, cover;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-composite: xor; /*只显示不重合的地方， chorem 、safari 支持*/
|
||||
z-index: 998;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
&__list {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__item {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
position: relative;
|
||||
|
||||
&--active {
|
||||
.tabbar__item__icon {
|
||||
top: -30rpx;
|
||||
}
|
||||
|
||||
.tabbar__item__text {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 56rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 20rpx;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
&__text {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(10rpx + env(safe-area-inset-bottom));
|
||||
transition: 0.5s;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__select-active-bg {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #FFFFFF;
|
||||
// transition: 0.5s;
|
||||
z-index: -1;
|
||||
// box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||
// box-shadow: inset 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0rpx 10rpx 30rpx rgba(70,23,129, 0.07),
|
||||
0rpx -8rpx 40rpx rgba(255, 255, 255, 0.07),
|
||||
inset 0rpx -10rpx 10rpx rgba(70,23,129, 0.07),
|
||||
inset 0rpx 10rpx 20rpx rgba(255, 255, 255, 1);
|
||||
// transition: box-shadow .2s ease-out;
|
||||
|
||||
&--hide {
|
||||
top: calc(110rpx + 50rpx);
|
||||
}
|
||||
|
||||
&--show {
|
||||
top: -54rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__placeholder {
|
||||
height: calc(110rpx + env(safe-area-inset-bottom));
|
||||
// display: initial;
|
||||
}
|
||||
}
|
||||
/* 底部导航 end */
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,692 @@
|
||||
<template>
|
||||
<view class="template-year tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<!-- <tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar> -->
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<!-- 图标logo -->
|
||||
<view class="custom-nav__back">
|
||||
<view class="logo-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png')">
|
||||
<view class="logo-image">
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="tn-icon-left"></view> -->
|
||||
</view>
|
||||
<!-- 搜索框 -->
|
||||
<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
|
||||
<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
|
||||
<view class="custom-nav__search__icon tn-icon-search"></view>
|
||||
<view class="custom-nav__search__text tn-padding-left-xs">合家欢乐、平平安安</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
小脑虎，新年快乐
|
||||
</view>
|
||||
<view class="justify-content-item tn-margin" style="font-size: 50rpx;">
|
||||
<text class="tn-icon-zodiac-hu"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<swiper class="card-swiper tn-margin tn-shadow-purplered" :current="cardCur" :circular="true" vertical="true"
|
||||
:autoplay="true" duration="500" interval="5000" @change="cardSwiper" style="margin-top: 30rpx;">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<view class="swiper-item image-banner ">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="indication">
|
||||
<block v-for="(item,index) in swiperList" :key="index">
|
||||
<view class="spot tn-text-center tn-padding-top-sm tn-shadow-blur" :class="cardCur==index?'active':''" @tap.stop="handleSwiperClick(index)">
|
||||
<text class="tn-text-bold">{{item.text}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- banner start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-padding-xs tn-margin-top-xl">
|
||||
<view class=" " style="width: 100%;">
|
||||
<view class="image-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/capsule-banner/banner-cap.png')">
|
||||
<view class="image-capsule">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- banner end-->
|
||||
|
||||
|
||||
<view class="tn-margin-top">
|
||||
<view class="nav_title--wrap">
|
||||
<view class="nav_title tn-cool-bg-color-1">
|
||||
<text class="tn-icon-lucky-money tn-padding-right-sm"></text>
|
||||
新 / 年 / 快 / 乐
|
||||
<text class="tn-icon-lucky-money tn-padding-left-sm"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图文 -->
|
||||
<!-- 比例 start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm">
|
||||
<block v-for="(item, index) in content" :key="index">
|
||||
<view class="" style="width: 50%;">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
<view class="image-pic" :style="'background-image:url(' + item.mainImage + ')'">
|
||||
<view class="image-year">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
|
||||
<text class="tn-blogger-content__label__desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
|
||||
<!-- <view class="justify-content-item tn-flex tn-flex-col-center">
|
||||
<view>
|
||||
<view class="tn-color-gray">
|
||||
<text class="tn-blogger-content__count-icon tn-icon-flower"></text>
|
||||
<text class="tn-padding-right-sm">{{ item.collectionCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-message"></text>
|
||||
<text class="tn-padding-right-sm">{{ item.commentCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-like"></text>
|
||||
<text class="">{{ item.likeCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="justify-content-item tn-text-center">
|
||||
<view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
|
||||
<text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 比例 end-->
|
||||
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-home-vertical-fill tn-color-purplered">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-black">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-discover tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">发现</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-camera-fill tn-color-white">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">发布</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-image-text tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">灯谜</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-my tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-xl"></view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplateYear',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '一起愉快的玩耍叭',
|
||||
text: '恭 · 跨年',
|
||||
url: 'https://resource.tuniaokj.com/images/shop/banner2.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '如果你也有不错的作品',
|
||||
text: '喜 · 祝福',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/ad1.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '用最少的代码做最骚的效果',
|
||||
text: '发 · 红包',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/ad2.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '商业合作请联系作者',
|
||||
text: '财 · 红庆',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/ad3.jpg',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
name: '我们都是好孩子',
|
||||
text: '虎 · 生威',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/ad4.jpg',
|
||||
}],
|
||||
content: [
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 999,
|
||||
commentCount: 999,
|
||||
likeCount: 999
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '我们都是好孩子',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
// swiper点击事件
|
||||
handleSwiperClick(index) {
|
||||
this.cardCur = index
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 60%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 10rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx 60rpx 0 60rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
/* 轮播文案在外 start*/
|
||||
.card-swiper {
|
||||
height: 650rpx !important;
|
||||
width: 500rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
height: 650rpx;
|
||||
width: 500rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 0rpx;
|
||||
transform: scale(1);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: none;
|
||||
transition: all 0.2s ease-in 0s;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
display:inline-block;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
color: #E83A30;
|
||||
background-color: #FAD5E8;
|
||||
opacity: 1;
|
||||
width: 160rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 20rpx -30rpx !important;
|
||||
left: 590rpx;
|
||||
right: 0;
|
||||
top: -700rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
color: #FFFFFF;
|
||||
opacity: 1;
|
||||
background-color: #E83A30;
|
||||
}
|
||||
/* 标题 start */
|
||||
.nav_title {
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
&--wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 120rpx;
|
||||
font-size: 46rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
/* 标题 end */
|
||||
|
||||
/* 文章内容 start*/
|
||||
.tn-blogger-content {
|
||||
&__wrap {
|
||||
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.12);
|
||||
border-radius: 20rpx;
|
||||
margin: 15rpx;
|
||||
}
|
||||
|
||||
&__info {
|
||||
&__btn {
|
||||
margin-right: -12rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
&__item {
|
||||
line-height: 45rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 5rpx 18rpx 0 0;
|
||||
|
||||
&--prefix {
|
||||
color: #82B2FF;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
line-height: 35rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
|
||||
&--1 {
|
||||
max-width: 690rpx;
|
||||
min-width: 690rpx;
|
||||
max-height: 400rpx;
|
||||
min-height: 400rpx;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
max-width: 260rpx;
|
||||
max-height: 260rpx;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
height: 212rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__count-icon {
|
||||
font-size: 30rpx;
|
||||
padding-right: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-year{
|
||||
padding: 150rpx 0rpx;
|
||||
font-size: 16rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-capsule{
|
||||
padding: 100rpx 0rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
/* 文章内容 end*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
// line-height: 50rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: -60rpx auto 20rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #E72F8C;
|
||||
width: 90rpx !important;
|
||||
height: 90rpx !important;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(231, 47, 140, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: inline-block;
|
||||
margin: 15rpx auto 15rpx;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user