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,414 @@
|
||||
<template>
|
||||
<view class="template-classify">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed :bottomShadow="false">商品分类</tn-nav-bar>
|
||||
|
||||
<view class="tn-classify__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<view class="tn-classify__search--wrap tn-flex tn-flex-col-center tn-flex-row-center tn-border-solids-bottom">
|
||||
<view class="tn-classify__search__box tn-flex tn-flex-col-center tn-flex-row-center tn-bg-gray--light tn-color-gray--dark">
|
||||
<view class="tn-classify__search__icon tn-icon-search"></view>
|
||||
<view class="tn-classify__search__text">请输入商品名称</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分类列表和内容 -->
|
||||
<view class="tn-classify__container tn-bg-gray--light">
|
||||
<view class="tn-classify__container__wrap tn-flex tn-flex-nowrap tn-flex-row-around tn-bg-white">
|
||||
<!-- 左边容器 -->
|
||||
<scroll-view class="tn-classify__left-box tn-flex-basic-sm" :scroll-top="leftScrollViewTop" scroll-y scroll-with-animation :style="{height: scrollViewHeight + 'px'}">
|
||||
<view
|
||||
v-for="(item, index) in tabbar"
|
||||
:key="index"
|
||||
:id="`tabbar_item_${index}`"
|
||||
class="tn-classify__tabbar__item tn-flex tn-flex-col-center tn-flex-row-center"
|
||||
:class="[tabbarItemClass(index)]"
|
||||
@tap.stop="clickClassifyNav(index)">
|
||||
<view class="tn-classify__tabbar__item__title">{{ item }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 右边容器 -->
|
||||
<scroll-view class="tn-classify__right-box" scroll-y :scroll-top="rightScrollViewTop" :style="{height: scrollViewHeight + 'px'}">
|
||||
<block v-if="classifyContent.subClassify && classifyContent.subClassify.length > 0">
|
||||
<view class="tn-classify__content">
|
||||
<!-- 推荐商品轮播图 -->
|
||||
<view class="tn-classify__content__recomm">
|
||||
<tn-swiper v-if="classifyContent.recommendProduct.length > 0" class="tn-classify__content__recomm__swiper" :list="classifyContent.recommendProduct" :height="200" :effect3d="true"></tn-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 分类内容子栏目 -->
|
||||
<view v-for="(item,index) in classifyContent.subClassify" :key="index" class="tn-classify__content__sub-classify">
|
||||
<view class="tn-classify__content__sub-classify--title tn-text-lg tn-padding-top-sm">{{ item.title }}</view>
|
||||
|
||||
<view class="tn-classify__content__sub-classify__content tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-left">
|
||||
<view
|
||||
v-for="(sub_item,sub_index) in item.classify"
|
||||
:key="sub_index"
|
||||
class="tn-classify__content__sub-classify__content__item tn-flex tn-flex-wrap tn-flex-row-center"
|
||||
>
|
||||
<view class="tn-classify__content__sub-classify__content__image tn-flex tn-flex-col-center tn-flex-row-center">
|
||||
<image :src="sub_item.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="tn-classify__content__sub-classify__content__title tn-margin-bottom-sm">{{ sub_item.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-padding-bottom"></view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'templateShopClassify',
|
||||
data() {
|
||||
return {
|
||||
// 侧边栏分类数据
|
||||
tabbar: [
|
||||
'推荐分类',
|
||||
'医疗保健',
|
||||
'运动户外',
|
||||
'电脑办公',
|
||||
'家电',
|
||||
'宠物鲜花',
|
||||
'食品酒饮',
|
||||
'个护清洁',
|
||||
'手机',
|
||||
'数码',
|
||||
'母婴童装',
|
||||
'京东国际',
|
||||
'汽摩生活',
|
||||
'美妆护肤',
|
||||
'箱包',
|
||||
'鞋靴',
|
||||
'钟表珠宝',
|
||||
'玩具乐器',
|
||||
'内衣配饰',
|
||||
'生鲜',
|
||||
'家居厨具',
|
||||
'男装',
|
||||
'二手商品',
|
||||
'女装',
|
||||
'家具家装',
|
||||
'奢侈品',
|
||||
'计生情趣',
|
||||
'医药',
|
||||
'生活旅行',
|
||||
'图鸟服务',
|
||||
],
|
||||
// 分类里面的内容信息
|
||||
classifyContent: {
|
||||
// 推荐商品
|
||||
recommendProduct: [
|
||||
{image: 'https://resource.tuniaokj.com/images/shop/banner1.jpg', title: '推荐商品1'},
|
||||
{image: 'https://resource.tuniaokj.com/images/shop/banner2.jpg', title: '推荐商品2'},
|
||||
{image: 'https://resource.tuniaokj.com/images/shop/banner3.jpg', title: '推荐商品3'}
|
||||
],
|
||||
// 子栏目
|
||||
subClassifyTabbar: [],
|
||||
// 显示子栏目分类选项
|
||||
showSubClassifyTabbar: false,
|
||||
// 每个子栏目下的内容
|
||||
subClassify: [
|
||||
{
|
||||
title: '推荐分类',
|
||||
classify: [
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg', title: '海报设计'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg', title: '精美页面'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/computer1.jpg', title: '设计师电脑'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/computer2.jpg', title: '轻薄本'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg', title: '5G手机'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg', title: '游戏手机'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/watch1.jpg', title: '智能手表'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/watch2.jpg', title: '运动手表'},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '专场推荐',
|
||||
classify: [
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg', title: '5G手机'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg', title: '游戏手机'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/watch1.jpg', title: '智能手表'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/watch2.jpg', title: '运动手表'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/card.jpg', title: '图鸟服务'}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '专场推荐',
|
||||
classify: [
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/bag1.jpg', title: '环保袋'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/bag2.jpg', title: '手提袋'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/cup1.jpg', title: '奶茶杯'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/cup2.jpg', title: '纸杯'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/pillow.jpg', title: '抱枕'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/sticker.jpg', title: '贴纸'}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '专场推荐',
|
||||
classify: [
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/bag1.jpg', title: '环保袋'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/bag2.jpg', title: '手提袋'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/cup1.jpg', title: '奶茶杯'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/cup2.jpg', title: '纸杯'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/pillow.jpg', title: '抱枕'},
|
||||
{ image: 'https://resource.tuniaokj.com/images/shop/pillow2.jpg', title: '蓝色抱枕'}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// 分类菜单item的信息
|
||||
tabbarItemInfo: [],
|
||||
// scrollView的top值
|
||||
scrollViewBasicTop: 0,
|
||||
// scrollView的高度
|
||||
scrollViewHeight: 0,
|
||||
// 左边scrollView的滚动高度
|
||||
leftScrollViewTop: 0,
|
||||
// 右边scrollView的滚动高度
|
||||
rightScrollViewTop: 0,
|
||||
// 当前选中的tabbar序号
|
||||
currentTabbarIndex: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabbarItemClass() {
|
||||
return index => {
|
||||
if (index === this.currentTabbarIndex) {
|
||||
return 'tn-classify__tabbar__item--active tn-bg-white'
|
||||
} else {
|
||||
let clazz = 'tn-bg-gray--light'
|
||||
if (this.currentTabbarIndex > 0 && index === this.currentTabbarIndex - 1) {
|
||||
clazz += ' tn-classify__tabbar__item--active--prev'
|
||||
}
|
||||
if (this.currentTabbarIndex < this.tabbar.length && index === this.currentTabbarIndex + 1) {
|
||||
clazz += ' tn-classify__tabbar__item--active--next'
|
||||
}
|
||||
return clazz
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
this.getScrollViewInfo()
|
||||
this.getTabbarItemRect()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 获取scrollView的高度信息
|
||||
getScrollViewInfo() {
|
||||
// 获取搜索栏的bottom信息，然后用整个屏幕的可用高度减去bottom的值即可获取scrollView的高度(防止双重滚动)
|
||||
this._tGetRect('.tn-classify__search--wrap').then((rect) => {
|
||||
// 如果获取失败重新获取
|
||||
if (!rect) {
|
||||
setTimeout(() => {
|
||||
this.getScrollViewInfo()
|
||||
}, 10)
|
||||
return
|
||||
}
|
||||
// 获取当前屏幕的可用高度
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.scrollViewBasicTop = systemInfo.statusBarHeight + rect.bottom + uni.upx2px(10)
|
||||
this.scrollViewHeight = systemInfo.safeArea.height + systemInfo.statusBarHeight - rect.bottom - uni.upx2px(10)
|
||||
})
|
||||
},
|
||||
// 获取分类菜单每个item的信息
|
||||
getTabbarItemRect() {
|
||||
let view = uni.createSelectorQuery().in(this)
|
||||
for (let i = 0; i < this.tabbar.length; i++) {
|
||||
view.select('#tabbar_item_' + i).boundingClientRect()
|
||||
}
|
||||
view.exec(res => {
|
||||
if (!res.length) {
|
||||
setTimeout(() => {
|
||||
this.getTabbarItemRect()
|
||||
}, 10)
|
||||
return
|
||||
}
|
||||
|
||||
// 将每个分类item的相关信息
|
||||
res.map((item) => {
|
||||
this.tabbarItemInfo.push({
|
||||
top: item.top,
|
||||
height: item.height
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
// 点击了分类导航
|
||||
clickClassifyNav(index) {
|
||||
if (this.currentTabbarIndex === index) {
|
||||
return
|
||||
}
|
||||
this.currentTabbarIndex = index
|
||||
|
||||
this.handleLeftScrollView(index)
|
||||
this.switchClassifyContent()
|
||||
},
|
||||
// 点击分类后，处理scrollView滚动到居中位置
|
||||
handleLeftScrollView(index) {
|
||||
const tabbarItemTop = this.tabbarItemInfo[index].top - this.scrollViewBasicTop
|
||||
if (tabbarItemTop > this.scrollViewHeight / 2) {
|
||||
this.leftScrollViewTop = tabbarItemTop - (this.scrollViewHeight / 2) + this.tabbarItemInfo[index].height
|
||||
} else {
|
||||
this.leftScrollViewTop = 0
|
||||
}
|
||||
},
|
||||
// 切换对应分类的数据
|
||||
switchClassifyContent() {
|
||||
this.rightScrollViewTop = 1
|
||||
this.$nextTick(() => {
|
||||
this.rightScrollViewTop = 0
|
||||
})
|
||||
this.classifyContent.subClassify[0].title = this.tabbar[this.currentTabbarIndex]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tn-classify {
|
||||
|
||||
/* 搜索栏 start */
|
||||
&__search {
|
||||
&--wrap {
|
||||
height: 126rpx;
|
||||
}
|
||||
|
||||
&__box {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 20rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
/* 搜索栏 end */
|
||||
|
||||
/* 分类列表和内容 strat */
|
||||
&__container {
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
&__left-box {
|
||||
|
||||
}
|
||||
|
||||
&__right-box {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
/* 分类列表和内容 end */
|
||||
|
||||
/* 侧边导航 start */
|
||||
&__tabbar {
|
||||
&__item {
|
||||
height: 90rpx;
|
||||
|
||||
&:first-child {
|
||||
border-top-right-radius: 0rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: 0rpx;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background-color: #FFFFFF;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 12rpx;
|
||||
height: 40rpx;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
background-color: $tn-main-color;
|
||||
border-radius: 12rpx;
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
}
|
||||
|
||||
&--prev {
|
||||
border-bottom-right-radius: 26rpx;
|
||||
}
|
||||
|
||||
&--next {
|
||||
border-top-right-radius: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 侧边导航 end */
|
||||
|
||||
/* 分类内容 start */
|
||||
&__content {
|
||||
margin: 18rpx;
|
||||
|
||||
/* 推荐商品 start */
|
||||
&__recomm {
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
&__swiper {
|
||||
|
||||
}
|
||||
}
|
||||
/* 推荐商品 end */
|
||||
|
||||
/* 子栏目 start */
|
||||
&__sub-classify {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&--title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
&__content {
|
||||
|
||||
&__item {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
&__image {
|
||||
background-color: rgba(188, 188, 188, 0.1);
|
||||
border-radius: 12rpx;
|
||||
margin: 10rpx;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
overflow: hidden;
|
||||
border: 1rpx solid rgba(0,0,0,0.02);
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 子栏目 end */
|
||||
}
|
||||
/* 分类内容 end */
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,805 @@
|
||||
<template>
|
||||
<view class="template-money tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
<view class="top-backgroup">
|
||||
<image src='https://resource.tuniaokj.com/images/money/money-bg.jpg' mode='heightFix' class='backgroud-image'></image>
|
||||
</view>
|
||||
<swiper class="card-swiper" :current="cardCur" :circular="true"
|
||||
:autoplay="true" duration="500" interval="5000" @change="cardSwiper">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<view class="swiper-item image-banner">
|
||||
<image :src="item.url" mode="heightFix" v-if="item.type=='image'" ></image>
|
||||
</view>
|
||||
<view class="swiper-item-text tn-text-center">
|
||||
<view class="tn-text-bold tn-padding-top-xs tn-color-brown">
|
||||
<text class="tn-icon-copy tn-padding-right-xs"></text>
|
||||
{{item.name}}
|
||||
<text class="tn-icon-copy tn-padding-left-xs"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="indication">
|
||||
<block v-for="(item,index) in swiperList" :key="index">
|
||||
<view class="spot tn-text-center tn-padding-top-sm tn-shadow-blur tn-color-red" :class="cardCur==index?'active':''" @tap.stop="handleSwiperClick(index)">
|
||||
<view class="tn-icon-lucky-money-fill tn-text-xxl icon-text"></view>
|
||||
<view class="">{{item.text}}</view>
|
||||
<view class="tn-text-sm">{{item.get}}</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="" style="background-image:url('https://resource.tuniaokj.com/images/money/bgpng.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
top: -58vh;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width:100%;
|
||||
height:270rpx">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- banner start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-padding-xs tn-margin-top-xl">
|
||||
<view class=" " style="width: 100%;">
|
||||
<view class="image-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/capsule-banner/banner-coinbag.png')">
|
||||
<view class="image-capsule">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- banner end-->
|
||||
|
||||
<view class="tn-margin-top">
|
||||
<view class="nav_title--wrap">
|
||||
<view class="nav_title tn-cool-bg-color-15">
|
||||
<text class="tn-icon-gift tn-padding-right-sm"></text>
|
||||
礼 / 品 / 兑 / 换
|
||||
<text class="tn-icon-gift tn-padding-left-sm"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图文 -->
|
||||
<!-- 比例 start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm">
|
||||
<block v-for="(item, index) in content" :key="index">
|
||||
<view class="" style="width: 50%;">
|
||||
<view class="tn-blogger-content__wrap" style="background-color: rgba(255,255,255,0.6);">
|
||||
<view class="image-pic" :style="'background-image:url(' + item.mainImage + ')'">
|
||||
<view class="image-year">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
|
||||
<text class="tn-blogger-content__label__desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
|
||||
<!-- <view class="justify-content-item tn-flex tn-flex-col-center">
|
||||
<view>
|
||||
<view class="tn-color-gray">
|
||||
<text class="tn-blogger-content__count-icon tn-icon-flower"></text>
|
||||
<text class="tn-padding-right-sm">{{ item.collectionCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-message"></text>
|
||||
<text class="tn-padding-right-sm">{{ item.commentCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-like"></text>
|
||||
<text class="">{{ item.likeCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="justify-content-item tn-text-center">
|
||||
<view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
|
||||
<text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 比例 end-->
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
|
||||
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-home tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tnnew.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-discover tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">发现</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="action bar-center">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-camera-fill tn-color-white">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-color-gray">发布</view>
|
||||
</view> -->
|
||||
|
||||
<view class="action bar-center">
|
||||
<view class="nav-index-button">
|
||||
<view class="nav-index-button__content">
|
||||
<view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<!-- <view class="tn-icon-logo-tuniao"></view> -->
|
||||
<view class="bar-circle">
|
||||
<image class="" src='https://resource.tuniaokj.com/images/tabbar/money-share.png'></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="nav-index-button__meteor">
|
||||
<view class="nav-index-button__meteor__wrapper">
|
||||
<view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item" :style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
|
||||
<view class="nav-index-button__meteor__item--pic"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="tn-color-gray">发布</view> -->
|
||||
</view>
|
||||
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-video tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">视频</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-my tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-xl"></view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateMoney',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '春节期间累计获得64839金币',
|
||||
text: '0.56元',
|
||||
get: '已领取',
|
||||
url: 'https://resource.tuniaokj.com/images/money/money-test.png',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '春节期间累计获得231345金币',
|
||||
text: '1.29元',
|
||||
get: '已领取',
|
||||
url: 'https://resource.tuniaokj.com/images/money/money-test2.png',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '春节期间累计获得342432金币',
|
||||
text: '5.??元',
|
||||
get: '未领取',
|
||||
url: 'https://resource.tuniaokj.com/images/money/money-test.png',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '春节期间累计获得643498金币',
|
||||
text: '8.??元',
|
||||
get: '未领取',
|
||||
url: 'https://resource.tuniaokj.com/images/money/money-test2.png',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
name: '春节期间累计获得975521金币',
|
||||
text: '99元',
|
||||
get: '未领取',
|
||||
url: 'https://resource.tuniaokj.com/images/money/money-test.png',
|
||||
}],
|
||||
content: [
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['99金币'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 999,
|
||||
commentCount: 999,
|
||||
likeCount: 999
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['66金币'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['1266金币'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['9999金币'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['6666金币'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['888金币'],
|
||||
desc: '我们都是好孩子',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['299金币'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['899金币'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
// swiper点击事件
|
||||
handleSwiperClick(index) {
|
||||
this.cardCur = index
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 顶部背景图 start */
|
||||
.top-backgroup {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
z-index: -1;
|
||||
|
||||
.backgroud-image {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
// z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.card-swiper {
|
||||
height: 70vh !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 750rpx !important;
|
||||
left: 0rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
margin-top: 30vh;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100vh;
|
||||
border-radius: 0rpx;
|
||||
transform: translate(30rpx, 0rpx) scale(0.8);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: translate(30rpx, 0rpx) scale(1, 1);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -65vh;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
display: block;
|
||||
border-radius: 10rpx;
|
||||
transform: scale(0.7, 0.7);
|
||||
transition: all 0.4s ease 0s;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
padding-left: 30rpx;
|
||||
transform: scale(1);
|
||||
transition: all 0.4s ease 0s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
opacity: 1;
|
||||
width: 100rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 20rpx 15rpx !important;
|
||||
left: 0rpx;
|
||||
right: 0;
|
||||
top: -53vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active .icon-text{
|
||||
transform: scale(1.6);
|
||||
margin-bottom: 20rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 标题 start */
|
||||
.nav_title {
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
&--wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 120rpx;
|
||||
font-size: 46rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
/* 标题 end */
|
||||
|
||||
/* 文章内容 start*/
|
||||
.tn-blogger-content {
|
||||
&__wrap {
|
||||
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.12);
|
||||
border-radius: 20rpx;
|
||||
margin: 15rpx;
|
||||
}
|
||||
|
||||
&__info {
|
||||
&__btn {
|
||||
margin-right: -12rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
&__item {
|
||||
line-height: 45rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 5rpx 18rpx 0 0;
|
||||
|
||||
&--prefix {
|
||||
color: #82B2FF;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
line-height: 35rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
|
||||
&--1 {
|
||||
max-width: 690rpx;
|
||||
min-width: 690rpx;
|
||||
max-height: 400rpx;
|
||||
min-height: 400rpx;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
max-width: 260rpx;
|
||||
max-height: 260rpx;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
height: 212rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__count-icon {
|
||||
font-size: 30rpx;
|
||||
padding-right: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-year{
|
||||
padding: 150rpx 0rpx;
|
||||
font-size: 16rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-capsule{
|
||||
padding: 100rpx 0rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
/* 文章内容 end*/
|
||||
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.bar-center{
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes suspension {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-0.8rem);
|
||||
}
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
// line-height: 50rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0rpx auto 0rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
// background-color: #01BEFF;
|
||||
width: 130rpx !important;
|
||||
height: 130rpx !important;
|
||||
overflow: hidden;
|
||||
// border-radius: 50%;
|
||||
// box-shadow: 0px 10px 30px rgba(70,23,129, 0.12),
|
||||
// 0px -8px 40px rgba(255, 255, 255, 1),
|
||||
// inset 0px -10px 10px rgba(70,23,129, 0.05),
|
||||
// inset 0px 10px 20px rgba(255, 255, 255, 1);
|
||||
// box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
display: inline-block;
|
||||
margin: 0rpx auto 0rpx;
|
||||
}
|
||||
|
||||
/* 流星+悬浮 */
|
||||
.nav-index-button {
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
z-index: 999999;
|
||||
|
||||
|
||||
&__content {
|
||||
position: absolute;
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
&--icon {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transform: scale(0.85);
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
background-size: 100% 100%;
|
||||
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__meteor {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
transform-style: preserve-3d;
|
||||
transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
|
||||
|
||||
&__wrapper {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
transform-style: preserve-3d;
|
||||
animation: spin 20s linear infinite;
|
||||
}
|
||||
|
||||
&__item {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 1000rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
&--pic {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc2.png) no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
animation: arc 4s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes suspension {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-0.6rem);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateX(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes arc {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,533 @@
|
||||
<template>
|
||||
<view class="template-order">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#F7F7F7CC">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<!-- 返回按钮 -->
|
||||
<view class="custom-nav__back" @tap.stop="goBack">
|
||||
<view class="tn-icon-left"></view>
|
||||
</view>
|
||||
<!-- 搜索框 -->
|
||||
<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center">
|
||||
<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark">
|
||||
<view class="custom-nav__search__icon tn-icon-search"></view>
|
||||
<view class="custom-nav__search__text">搜索我的订单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="order--wrap" :style="{top: vuex_custom_bar_height + 'px'}">
|
||||
<!-- 顶部标签 -->
|
||||
<tn-tabs-swiper class="order__tabs" ref="tabs" :list="list" :current="tabsIndex" :isScroll="false" @change="tabsChange"></tn-tabs-swiper>
|
||||
|
||||
<!-- 标签内容 -->
|
||||
<swiper class="order__swiper" :style="{top: `${swiperTop}px`, height: `${swiperHeight}px`}" :current="swiperIndex" @transition="swiperTransition" @animationfinish="swiperAnimationFinish">
|
||||
|
||||
<swiper-item class="order__swiper__item">
|
||||
<scroll-view :style="{height: `${swiperHeight}px`}" scroll-y>
|
||||
<view v-for="(item,index) in 6" :key="index" class="order__item">
|
||||
<view class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__head__title">图鸟官方小店<text class="order__item__head__title--right-icon tn-icon-right"></text></view>
|
||||
<view class="order__item__head__status">完成</view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="order__item__content__title">
|
||||
图鸟官方设计 酷炫效果展示 让用户眼前一亮的赶脚
|
||||
</view>
|
||||
<view class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
||||
<view class="order__item__content__info__price">
|
||||
<text class="order__item__content__info__price--unit">￥</text>
|
||||
<text class="order__item__content__info__price__value--integer">1000</text>
|
||||
<text class="order__item__content__info__price__value--decimal">.00</text>
|
||||
</view>
|
||||
<view class="order__item__content__info__count">
|
||||
<text>共1件</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__operaation__left">
|
||||
<text class="order__item__operaation__left--text">更多</text>
|
||||
</view>
|
||||
<view class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
|
||||
<view class="order__item__operaation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">查看发票</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">退换/售后</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="tn-color-red" backgroundColor="tn-bg-red" :fontSize="24" height="auto" padding="10rpx 18rpx">再次购买</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-bottom"></view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
|
||||
<swiper-item class="order__swiper__item">
|
||||
<scroll-view :style="{height: `${swiperHeight}px`}" scroll-y>
|
||||
<view v-for="(item,index) in 6" :key="index" class="order__item">
|
||||
<view class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__head__title">图鸟官方小店<text class="order__item__head__title--right-icon tn-icon-right"></text></view>
|
||||
<view class="order__item__head__status">完成</view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
|
||||
<view class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/bag2.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
||||
<view class="order__item__content__info__price">
|
||||
<text class="order__item__content__info__price--unit">￥</text>
|
||||
<text class="order__item__content__info__price__value--integer">2000</text>
|
||||
<text class="order__item__content__info__price__value--decimal">.00</text>
|
||||
</view>
|
||||
<view class="order__item__content__info__count">
|
||||
<text>共2件</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__operaation__left">
|
||||
<text class="order__item__operaation__left--text">更多</text>
|
||||
</view>
|
||||
<view class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
|
||||
<view class="order__item__operaation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">查看发票</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">退换/售后</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="tn-color-red" backgroundColor="tn-bg-red" :fontSize="24" height="auto" padding="10rpx 18rpx">再次购买</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-bottom"></view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
|
||||
<swiper-item class="order__swiper__item">
|
||||
<scroll-view :style="{height: `${swiperHeight}px`}" scroll-y>
|
||||
<view v-for="(item,index) in 6" :key="index" class="order__item">
|
||||
<view class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__head__title">图鸟官方小店<text class="order__item__head__title--right-icon tn-icon-right"></text></view>
|
||||
<view class="order__item__head__status">完成</view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
|
||||
<view class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/cup1.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/computer2.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
||||
<view class="order__item__content__info__price">
|
||||
<text class="order__item__content__info__price--unit">￥</text>
|
||||
<text class="order__item__content__info__price__value--integer">3000</text>
|
||||
<text class="order__item__content__info__price__value--decimal">.00</text>
|
||||
</view>
|
||||
<view class="order__item__content__info__count">
|
||||
<text>共3件</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__operaation__left">
|
||||
<text class="order__item__operaation__left--text">更多</text>
|
||||
</view>
|
||||
<view class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
|
||||
<view class="order__item__operaation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">查看发票</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">退换/售后</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="tn-color-red" backgroundColor="tn-bg-red" :fontSize="24" height="auto" padding="10rpx 18rpx">再次购买</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-bottom"></view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
|
||||
<swiper-item class="order__swiper__item">
|
||||
<scroll-view :style="{height: `${swiperHeight}px`}" scroll-y>
|
||||
<view v-for="(item,index) in 6" :key="index" class="order__item">
|
||||
<view class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__head__title">图鸟官方小店<text class="order__item__head__title--right-icon tn-icon-right"></text></view>
|
||||
<view class="order__item__head__status">完成</view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
|
||||
<view class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/computer1.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/watch1.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
||||
<view class="order__item__content__info__price">
|
||||
<text class="order__item__content__info__price--unit">￥</text>
|
||||
<text class="order__item__content__info__price__value--integer">4000</text>
|
||||
<text class="order__item__content__info__price__value--decimal">.00</text>
|
||||
</view>
|
||||
<view class="order__item__content__info__count">
|
||||
<text>共4件</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__operaation__left">
|
||||
<text class="order__item__operaation__left--text">更多</text>
|
||||
</view>
|
||||
<view class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
|
||||
<view class="order__item__operaation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">查看发票</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">退换/售后</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="tn-color-red" backgroundColor="tn-bg-red" :fontSize="24" height="auto" padding="10rpx 18rpx">再次购买</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-bottom"></view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
|
||||
<swiper-item class="order__swiper__item">
|
||||
<scroll-view :style="{height: `${swiperHeight}px`}" scroll-y>
|
||||
<view v-for="(item,index) in 6" :key="index" class="order__item">
|
||||
<view class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__head__title">图鸟官方小店<text class="order__item__head__title--right-icon tn-icon-right"></text></view>
|
||||
<view class="order__item__head__status">完成</view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
|
||||
<view class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/pillow.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="order__item__content__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/bag1.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
||||
<view class="order__item__content__info__price">
|
||||
<text class="order__item__content__info__price--unit">￥</text>
|
||||
<text class="order__item__content__info__price__value--integer">5000</text>
|
||||
<text class="order__item__content__info__price__value--decimal">.00</text>
|
||||
</view>
|
||||
<view class="order__item__content__info__count">
|
||||
<text>共5件</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
|
||||
<view class="order__item__operaation__left">
|
||||
<text class="order__item__operaation__left--text">更多</text>
|
||||
</view>
|
||||
<view class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
|
||||
<view class="order__item__operaation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">查看发票</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="#080808" backgroundColor="#080808" :fontSize="24" height="auto" padding="10rpx 18rpx">退换/售后</tn-button>
|
||||
</view>
|
||||
<view class="order__item__operation__right__button">
|
||||
<tn-button :plain="true" shape="round" fontColor="tn-color-red" backgroundColor="tn-bg-red" :fontSize="24" height="auto" padding="10rpx 18rpx">再次购买</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-bottom"></view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import templatePageMixin from '@/libs/mixin/template_page_mixin.js'
|
||||
|
||||
export default {
|
||||
name: 'TemplateOrder',
|
||||
mixins: [templatePageMixin],
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{name: '全部'},
|
||||
{name: '待付款'},
|
||||
{name: '待发货', count: 10},
|
||||
{name: '待收货'},
|
||||
{name: '待评价', count: 5}
|
||||
],
|
||||
tabsIndex: 0,
|
||||
swiperIndex: 0,
|
||||
swiperTop: 0,
|
||||
swiperHeight: 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
this.updateSwiperInfo()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 计算可滑动区域的高度信息
|
||||
updateSwiperInfo() {
|
||||
// 获取可滑动菜单的信息
|
||||
this._tGetRect('.order__tabs').then(res => {
|
||||
if (!res) {
|
||||
setTimeout(() => {
|
||||
this.updateSwiperInfo()
|
||||
}, 10)
|
||||
return
|
||||
}
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.swiperTop = res.bottom - this.vuex_custom_bar_height
|
||||
this.swiperHeight = systemInfo.safeArea.height - res.bottom + systemInfo.statusBarHeight
|
||||
})
|
||||
},
|
||||
// 标签栏值发生改变
|
||||
tabsChange(index) {
|
||||
this.swiperIndex = index
|
||||
},
|
||||
// swiper-item位置发生改变
|
||||
swiperTransition(event) {
|
||||
this.$refs.tabs.setDx(event.detail.dx)
|
||||
},
|
||||
// swiper动画结束
|
||||
swiperAnimationFinish(event) {
|
||||
const current = event.detail.current
|
||||
this.$refs.tabs.setFinishCurrent(current)
|
||||
this.swiperIndex = current
|
||||
this.tabsIndex = current
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.template-order {
|
||||
background-color: #F7F7F7CC;
|
||||
}
|
||||
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 65%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
padding: 28rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx;
|
||||
font-size: 24rpx;
|
||||
background-color: #FFFFFF;
|
||||
border: 1rpx solid #E6E6E6;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
.order {
|
||||
&--wrap {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
/* 导航栏 start */
|
||||
&__tabs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: inherit;
|
||||
}
|
||||
/* 导航栏 end */
|
||||
|
||||
/* swiper start */
|
||||
&__swiper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
background-color: inherit;
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
/* swiper end */
|
||||
|
||||
/* 订单内容 start */
|
||||
&__item {
|
||||
margin: 20rpx;
|
||||
padding: 36rpx 26rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 头部 start */
|
||||
&__head {
|
||||
|
||||
&__title {
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
|
||||
&--right-icon {
|
||||
font-size: 24rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__status {
|
||||
font-size: 22rpx;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
/* 头部 end */
|
||||
|
||||
/* 内容 start */
|
||||
&__content {
|
||||
|
||||
margin-top: 20rpx;
|
||||
|
||||
&__image {
|
||||
margin-right: 20rpx;
|
||||
|
||||
image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
padding-right: 40rpx;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
white-space: normal !important;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
&__info {
|
||||
|
||||
&__price {
|
||||
&--unit {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
&__value--integer, &__value--decimal {
|
||||
font-weight: bold;
|
||||
}
|
||||
&__value--decimal {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__count {
|
||||
color: #AAAAAA;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 内容 end */
|
||||
|
||||
/* 操作按钮 start */
|
||||
&__operation {
|
||||
margin-top: 30rpx;
|
||||
|
||||
&__right {
|
||||
&__button {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 操作按钮 end */
|
||||
}
|
||||
/* 订单内容 end */
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,796 @@
|
||||
<template>
|
||||
<view class="template-store tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<!-- <tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar> -->
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<!-- 图标logo -->
|
||||
<view class="custom-nav__back">
|
||||
<view class="logo-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png')">
|
||||
<view class="logo-image">
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="tn-icon-left"></view> -->
|
||||
</view>
|
||||
<!-- 搜索框 -->
|
||||
<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
|
||||
<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
|
||||
<view class="custom-nav__search__icon tn-icon-search"></view>
|
||||
<view class="custom-nav__search__text tn-padding-left-xs">搜索好吃的</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
|
||||
|
||||
<view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
|
||||
新年庆典，狂欢来袭
|
||||
</view>
|
||||
<view class="tn-margin" style="font-size: 50rpx;">
|
||||
<text class="tn-icon-menu-more"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<swiper class="card-swiper tn-margin-top-sm" :circular="true"
|
||||
:autoplay="true" duration="500" interval="5000" @change="cardSwiper">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<view class="swiper-item image-banner">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
</view>
|
||||
<view class="swiper-item-text">
|
||||
<view class="tn-text-xxl tn-text-bold tn-color-white">{{item.title}}</view>
|
||||
<view class="tn-text-bold tn-color-white tn-padding-top-xs" style="font-size: 40rpx;">{{item.name}}</view>
|
||||
<view class=" tn-text-bold tn-color-red tn-padding-top-sm tn-padding-bottom-sm">
|
||||
<text class="tn-text-lg">￥</text>
|
||||
<text class="tn-text-sm">{{item.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-item-text2">
|
||||
<view class="tn-text-xxl tn-text-bold">
|
||||
<text class="tn-color-white tn-float-right tn-bg-red" style="border-radius: 10rpx;padding: 10rpx 20rpx;">马上抢</text>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="indication">
|
||||
<block v-for="(item,index) in swiperList" :key="index">
|
||||
<view class="spot" :class="cardCur==index?'active':''"></view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 方式7 start-->
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-1 tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<image class="" src='https://resource.tuniaokj.com/images/icon/a004.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">排行</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<image class="" src='https://resource.tuniaokj.com/images/icon/a002.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">签到</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<image class="" src='https://resource.tuniaokj.com/images/icon/a006.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">免费</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<image class="" src='https://resource.tuniaokj.com/images/icon/a007.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">会员</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式7 end-->
|
||||
|
||||
<!-- 换背景形式-->
|
||||
<!-- <view class="image-div tn-margin">
|
||||
<image src='https://resource.tuniaokj.com/images/swiper/capsule1.png' mode='widthFix' class='image'></image>
|
||||
</view> -->
|
||||
|
||||
<!-- banner start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm">
|
||||
<view class=" " style="width: 100%;">
|
||||
<view class="image-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/swiper/capsule1.png')">
|
||||
<view class="image-store">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- banner end-->
|
||||
|
||||
<view class="tn-margin-top">
|
||||
<view class="nav_title--wrap">
|
||||
<view class="nav_title tn-cool-bg-color-16">
|
||||
<text class="tn-icon-star tn-padding-right-sm"></text>
|
||||
热 / 门 / 美 / 食
|
||||
<text class="tn-icon-star tn-padding-left-sm"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图文 -->
|
||||
<!-- 比例 start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm">
|
||||
<block v-for="(item, index) in content" :key="index">
|
||||
<view class="" style="width: 50%;">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
<view class="image-picbook" :style="'background-image:url(' + item.mainImage + ')'">
|
||||
<view class="image-book">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
|
||||
<text class="tn-blogger-content__label__desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
|
||||
<!-- <view class="justify-content-item tn-flex tn-flex-col-center">
|
||||
<view>
|
||||
<view class="tn-color-gray">
|
||||
<text class="tn-blogger-content__count-icon tn-icon-flower"></text>
|
||||
<text class="tn-padding-right-sm">{{ item.collectionCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-message"></text>
|
||||
<text class="tn-padding-right-sm">{{ item.commentCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-like"></text>
|
||||
<text class="">{{ item.likeCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="justify-content-item tn-text-center">
|
||||
<view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
|
||||
<text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 比例 end-->
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed" style="border-radius: 60rpx 60rpx 0 0;">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-home-smile">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/a1.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-black">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-menu-list tn-color-gray">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/k2.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">分类</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-cart tn-color-gray">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/i2.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">购物车</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-my tn-color-gray">
|
||||
</view>
|
||||
<!-- <image class="" src='https://resource.tuniaokj.com/images/tabbar/d2.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-xl"></view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplateStore',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
title: '巴西烤肉-午餐券12元',
|
||||
name: '祈福新村2号街',
|
||||
text: '59.00',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
title: '巴西烤肉-午餐券12元',
|
||||
name: '祈福新村2号街',
|
||||
text: '59.00',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
title: '巴西烤肉-午餐券12元',
|
||||
name: '祈福新村2号街',
|
||||
text: '59.00',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
title: '巴西烤肉-午餐券12元',
|
||||
name: '祈福新村2号街',
|
||||
text: '59.00',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
title: '巴西烤肉-午餐券12元',
|
||||
name: '祈福新村2号街',
|
||||
text: '59.00',
|
||||
url: 'https://resource.tuniaokj.com/images/swiper/read.jpg',
|
||||
}],
|
||||
content: [
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 999,
|
||||
commentCount: 999,
|
||||
likeCount: 999
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['炸串','火锅'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
desc: '我们都是好孩子',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/sticker.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 60%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 15rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx 0 60rpx 60rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
/* 轮播视觉差 start */
|
||||
.card-swiper {
|
||||
height: 400rpx !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 620rpx !important;
|
||||
left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0rpx 0rpx 90rpx 0rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 30rpx;
|
||||
transform: scale(0.9);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: none;
|
||||
transition: all 0.2s ease-in 0s;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text {
|
||||
margin-top: -140rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 70%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text {
|
||||
margin-top: -200rpx;
|
||||
width: 100%;
|
||||
transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
|
||||
transition: all 0.6s ease 0s;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item-text2 {
|
||||
margin-top: -160rpx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50%;
|
||||
border-radius: 10rpx;
|
||||
transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
|
||||
transition: all 0.3s ease 0s;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item-text2 {
|
||||
margin-top: -120rpx;
|
||||
width: 100%;
|
||||
transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
|
||||
transition: all 0.3s ease 0s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
background-color: #000000;
|
||||
opacity: 0.2;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 40rpx;
|
||||
top: -60rpx;
|
||||
margin: 0 8rpx !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 30rpx;
|
||||
background-color: #E83A30;
|
||||
}
|
||||
|
||||
/* 图标容器7 start */
|
||||
.icon7 {
|
||||
&__item {
|
||||
width: 30%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 10rpx;
|
||||
margin: 20rpx 10rpx;
|
||||
transform: scale(1);
|
||||
transition: transform 0.3s linear;
|
||||
transform-origin: center center;
|
||||
|
||||
&--icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
font-size: 50rpx;
|
||||
border-radius: 0;
|
||||
margin-bottom: -10rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-store{
|
||||
padding:120rpx 0rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
}
|
||||
|
||||
/* 胶囊背景图 start */
|
||||
.image-div {
|
||||
height: 450rpx;
|
||||
z-index: -1;
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 667rpx;
|
||||
// z-index: -1;
|
||||
}
|
||||
}
|
||||
/* 胶囊背景图 end */
|
||||
/* 标题 start */
|
||||
.nav_title {
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
&--wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 120rpx;
|
||||
font-size: 46rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
/* 标题 end */
|
||||
|
||||
/* 文章内容 start*/
|
||||
.tn-blogger-content {
|
||||
&__wrap {
|
||||
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.12);
|
||||
border-radius: 20rpx;
|
||||
margin: 15rpx;
|
||||
}
|
||||
|
||||
&__info {
|
||||
&__btn {
|
||||
margin-right: -12rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
&__item {
|
||||
line-height: 45rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 5rpx 18rpx 0 0;
|
||||
|
||||
&--prefix {
|
||||
color: #E83A30;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
line-height: 35rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
|
||||
&--1 {
|
||||
max-width: 690rpx;
|
||||
min-width: 690rpx;
|
||||
max-height: 400rpx;
|
||||
min-height: 400rpx;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
max-width: 260rpx;
|
||||
max-height: 260rpx;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
height: 212rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__count-icon {
|
||||
font-size: 30rpx;
|
||||
padding-right: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-book{
|
||||
padding: 150rpx 0rpx;
|
||||
font-size: 16rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-picbook{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
/* 文章内容 end*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user