增加other分包页面
我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）
This commit is contained in:
1206
other/blogger/blogger.vue
Normal file
1206
other/blogger/blogger.vue
Normal file
File diff suppressed because it is too large
Load Diff
800
other/blogger/details.vue
Normal file
800
other/blogger/details.vue
Normal file
@@ -0,0 +1,800 @@
|
||||
<template>
|
||||
<view class="template-details 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="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<!-- 图文信息 -->
|
||||
<block v-for="(item,index) in content" :key="index">
|
||||
<view class="blogger__item">
|
||||
<view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center">
|
||||
<view class="justify__author__info" @click="tn('/circlePages/blogger_other')">
|
||||
<view class="tn-flex tn-flex-row-center">
|
||||
<view class="tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<view class="">
|
||||
<tn-avatar
|
||||
class=""
|
||||
shape="circle"
|
||||
:src="item.userAvatar"
|
||||
size="lg">
|
||||
</tn-avatar>
|
||||
</view>
|
||||
<view class="tn-padding-right tn-text-ellipsis">
|
||||
<view class="tn-padding-right tn-padding-left-sm tn-text-bold tn-text-lg">{{ item.userName }}</view>
|
||||
<view class="tn-padding-right tn-padding-left-sm tn-padding-top-xs tn-color-gray">{{ item.date }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
|
||||
<!-- 既然都点到详情里面了，加个关注按钮呗 -->
|
||||
<text class="tn-bg-brown--light tn-round tn-text-df tn-text-bold tn-color-brown" style="padding: 10rpx 24rpx;">+ 关注</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex-col-center tn-flex-row-left">
|
||||
<view v-for="(label_item,label_index) in item.label" :key="label_index" class="blogger__desc__label tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
|
||||
<text class="blogger__desc__label--prefix">#</text>
|
||||
<text class="tn-text-df">{{ label_item }}</text>
|
||||
</view>
|
||||
<!-- 不用限制长度了，因为发布的时候限制长度了-->
|
||||
<text v-if="!item.label || item.label.length < 4" class="blogger__desc__content tn-flex-1 tn-text-justify tn-text-df">{{ item.desc }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 内容太多疲劳了-->
|
||||
<!-- <view
|
||||
v-if="item.content"
|
||||
class="blogger__content"
|
||||
:id="`blogger__content--${index}`"
|
||||
>
|
||||
<view
|
||||
class="blogger__content__data clamp-text-2">
|
||||
{{ item.content }}
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<block v-if="item.mainImage">
|
||||
<view v-if="[1,2,4].indexOf(item.mainImage.length) != -1" class="tn-padding-top-xs">
|
||||
<image v-for="(image_item,image_index) in item.mainImage" :key="image_index"
|
||||
class="blogger__main-image"
|
||||
:class="{
|
||||
'blogger__main-image--1 tn-margin-bottom-sm': item.mainImage.length === 1,
|
||||
'blogger__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': item.mainImage.length === 2 || item.mainImage.length === 4
|
||||
}"
|
||||
:src="image_item"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<view v-else class="tn-padding-top-xs">
|
||||
<tn-grid hoverClass="none" :col="3">
|
||||
<block v-for="(image_item,image_index) in item.mainImage" :key="image_index">
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<tn-grid-item style="width: 30%;margin: 10rpx;">
|
||||
<image
|
||||
class="blogger__main-image blogger__main-image--3"
|
||||
:src="image_item"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</tn-grid-item>
|
||||
<!-- #endif-->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<tn-grid-item style="width: 30%;margin: 10rpx;">
|
||||
<image
|
||||
class="blogger__main-image blogger__main-image--3"
|
||||
:src="image_item"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</tn-grid-item>
|
||||
<!-- #endif-->
|
||||
</block>
|
||||
</tn-grid>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
|
||||
<view class="justify-content-item tn-flex tn-flex-col-center">
|
||||
<view style="margin-right: 10rpx;">
|
||||
<tn-avatar-group :lists="item.viewUser.latestUserAvatar" size="sm"></tn-avatar-group>
|
||||
</view>
|
||||
<text class="tn-color-gray">{{ item.viewUser.viewUserCount }}人</text>
|
||||
</view>
|
||||
<view class="justify-content-item tn-color-gray tn-text-center">
|
||||
<view class="">
|
||||
<text class="blogger__count-icon tn-icon-footprint"></text>
|
||||
<text class="tn-padding-right">{{ item.collectionCount }}</text>
|
||||
<text class="blogger__count-icon tn-icon-message"></text>
|
||||
<text class="tn-padding-right">{{ item.commentCount }}</text>
|
||||
<text class="blogger__count-icon tn-icon-like"></text>
|
||||
<text class="">{{ item.likeCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 边距间隔 -->
|
||||
<!-- <view class="tn-strip-bottom" v-if="index != content.length - 1"></view> -->
|
||||
</block>
|
||||
|
||||
<!-- 按钮-->
|
||||
<view class="tn-flex tn-flex-row-between" style="margin: 40rpx 0 60rpx 0;">
|
||||
<view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
|
||||
<tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="90%" shadow fontBold>
|
||||
<text class="tn-icon-like-lack tn-padding-right-xs tn-color-black"></text>
|
||||
<text class="tn-color-black">点 赞</text>
|
||||
</tn-button>
|
||||
</view>
|
||||
<view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
|
||||
<tn-button backgroundColor="#FFF00D" padding="40rpx 0" width="90%" shadow fontBold open-type="share">
|
||||
<text class="tn-icon-share-triangle tn-padding-right-xs tn-color-black"></text>
|
||||
<text class="tn-color-black">分 享</text>
|
||||
</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 评论 -->
|
||||
<view class="tn-margin" style="padding-bottom: 120rpx;">
|
||||
<!-- 图标logo/头像 -->
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xl" @click="tn('/circlePages/blogger_other')">
|
||||
<view class="justify-content-item">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view class="logo-pic tn-shadow">
|
||||
<view class="logo-image">
|
||||
<view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg');width: 60rpx;height: 60rpx;background-size: cover;">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-right tn-padding-left-sm">
|
||||
<view class="tn-padding-right tn-text-df tn-text-bold tn-color-black">
|
||||
抓住那只高产母猪
|
||||
</view>
|
||||
<view class="tn-padding-right tn-text-ellipsis tn-text-xs tn-color-gray" style="padding-top: 5rpx;">
|
||||
2024年5月26日
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-color-gray">
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-icon-like-lack tn-padding-xs"></text>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-text-xs">26</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" style="margin: 20rpx 30rpx 30rpx 80rpx;">
|
||||
求打卡地点
|
||||
</view>
|
||||
<view class="tn-bg-gray--light tn-padding-sm" style="margin: 20rpx 30rpx 30rpx 80rpx;border-radius: 10rpx;">
|
||||
<text class="tn-text-bold tn-padding-right-xs">博主回复: </text>
|
||||
<text style="line-height: 40rpx;">保密</text>
|
||||
<view class="tn-flex tn-flex-row-between tn-margin-top-xs">
|
||||
<view class="justify-content-item tn-text-xs tn-color-gray" style="padding-top: 5rpx;">
|
||||
2024年5月26日
|
||||
</view>
|
||||
<view class="justify-content-item tn-text-xs tn-color-gray">
|
||||
<text class="tn-padding-xs">16</text>
|
||||
<text class="tn-icon-like-lack"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 评论2-->
|
||||
<!-- 图标logo/头像 -->
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xl" @click="tn('/circlePages/blogger_other')">
|
||||
<view class="justify-content-item">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view class="logo-pic tn-shadow">
|
||||
<view class="logo-image">
|
||||
<view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg');width: 60rpx;height: 60rpx;background-size: cover;">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-right tn-padding-left-sm">
|
||||
<view class="tn-padding-right tn-text-df tn-text-bold tn-color-black">
|
||||
北染陌人
|
||||
</view>
|
||||
<view class="tn-padding-right tn-text-ellipsis tn-text-xs tn-color-gray" style="padding-top: 5rpx;">
|
||||
2024年5月25日
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-color-gray">
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-icon-like-lack tn-padding-xs"></text>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-text-xs">68</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" style="margin: 20rpx 30rpx 30rpx 80rpx;">
|
||||
求摄影师微信，谢谢
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 评论3-->
|
||||
<!-- 图标logo/头像 -->
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xl" @click="tn('/circlePages/blogger_other')">
|
||||
<view class="justify-content-item">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view class="logo-pic tn-shadow">
|
||||
<view class="logo-image">
|
||||
<view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg');width: 60rpx;height: 60rpx;background-size: cover;">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-right tn-padding-left-sm">
|
||||
<view class="tn-padding-right tn-text-df tn-text-bold tn-color-black">
|
||||
原来是吖释鸭
|
||||
</view>
|
||||
<view class="tn-padding-right tn-text-ellipsis tn-text-xs tn-color-gray">
|
||||
2024年5月25日
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-color-gray">
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-icon-like-lack tn-padding-xs"></text>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-text-xs">43</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" style="margin: 20rpx 30rpx 30rpx 80rpx;">
|
||||
吃瓜群众到此一游，阿巴阿巴
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="tabbar footerfixed dd-glass">
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center">
|
||||
<view class="justify-content-item tn-margin-top">
|
||||
<view class="tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
|
||||
|
||||
<!-- <view class="tn-flex tn-flex-row-center tn-padding-right tn-padding-left">
|
||||
<text class="tn-icon-emoji-good tn-text-xxl"></text>
|
||||
</view> -->
|
||||
|
||||
<view class="tn-flex tn-flex-row-center tn-flex-col-center tn-padding-right tn-padding-left-sm">
|
||||
<view class="avatar-all">
|
||||
<view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/blogger/onepiece-1.jpg');width: 60rpx;height: 60rpx;background-size: cover;">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="topic__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="topic__info__item__input__left-icon">
|
||||
<view class="tn-icon-emoji-good"></view>
|
||||
</view>
|
||||
<view class="topic__info__item__input__content">
|
||||
<input maxlength="20" placeholder-class="input-placeholder" :cursor-spacing="18" placeholder="不说点啥子吗？" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-margin-top tn-margin-right">
|
||||
<view class="topic__info__item__sure">
|
||||
<view class="tn-flex-1 justify-content-item tn-text-center">
|
||||
<tn-button shape="round" backgroundColor="tn-cool-bg-color-15--reverse" width="100%" shadow>
|
||||
<text class="tn-color-white" hover-class="tn-hover" :hover-stay-time="150">
|
||||
发 送
|
||||
</text>
|
||||
</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateDetails',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
content: [
|
||||
/* {
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2024年5月20日',
|
||||
label: ['追剧达人','重生粉','UI框架'],
|
||||
desc: '追剧比追人要轻松多了，助你开发酷炫UI一臂之力',
|
||||
content: '基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫的前端页面，吖，编不下去了',
|
||||
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: 62
|
||||
},
|
||||
collectionCount: 439,
|
||||
commentCount: 46,
|
||||
likeCount: 83
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2024年5月20日',
|
||||
label: ['追剧达人','重生粉','UI框架'],
|
||||
desc: '追剧比追人要轻松多了，助你开发酷炫UI一臂之力',
|
||||
content: '基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫的前端页面，吖，编不下去了',
|
||||
mainImage:[
|
||||
'https://resource.tuniaokj.com/images/blogger/content_1.jpeg'
|
||||
],
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
],
|
||||
viewUserCount: 12
|
||||
},
|
||||
collectionCount: 902,
|
||||
commentCount: 64,
|
||||
likeCount: 83
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2024年5月20日',
|
||||
label: [],
|
||||
desc: '',
|
||||
content: '',
|
||||
mainImage:[
|
||||
'https://resource.tuniaokj.com/images/shop/computer2.jpg',
|
||||
'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
|
||||
],
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
],
|
||||
viewUserCount: 56
|
||||
},
|
||||
collectionCount: 431,
|
||||
commentCount: 26,
|
||||
likeCount: 84
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2024年5月20日',
|
||||
label: ['追剧达人','重生粉'],
|
||||
desc: '追剧比追人要轻松多了',
|
||||
content: '基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫的前端页面，吖，编不下去了 基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫的前端页面，吖，编不下去了',
|
||||
mainImage:[
|
||||
'https://resource.tuniaokj.com/images/swiper/swiper2.jpg',
|
||||
'https://resource.tuniaokj.com/images/swiper/swiper3.jpg',
|
||||
'https://resource.tuniaokj.com/images/swiper/swiper4.jpg',
|
||||
],
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
],
|
||||
viewUserCount: 231
|
||||
},
|
||||
collectionCount: 780,
|
||||
commentCount: 89,
|
||||
likeCount: 82
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/content_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2024年5月20日',
|
||||
label: ['追剧达人','链接'],
|
||||
desc: 'https://www.yuque.com/tuniao',
|
||||
mainImage:[
|
||||
'https://resource.tuniaokj.com/images/shop/watch1.jpg',
|
||||
'https://resource.tuniaokj.com/images/shop/watch2.jpg',
|
||||
'https://resource.tuniaokj.com/images/shop/pillow2.jpg',
|
||||
'https://resource.tuniaokj.com/images/shop/pillow.jpg',
|
||||
],
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
],
|
||||
viewUserCount: 28
|
||||
},
|
||||
collectionCount: 432,
|
||||
commentCount: 33,
|
||||
likeCount: 12
|
||||
}, */
|
||||
{
|
||||
userAvatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
|
||||
userName: '可我会像',
|
||||
date: '2024年5月20日',
|
||||
label: ['追剧达人','重生粉'],
|
||||
desc: '追剧比追人要轻松多了',
|
||||
mainImage:[
|
||||
'https://resource.tuniaokj.com/images/blogger/y11.jpg',
|
||||
'https://resource.tuniaokj.com/images/blogger/y33.jpg',
|
||||
'https://resource.tuniaokj.com/images/blogger/y22.jpg',
|
||||
'https://resource.tuniaokj.com/images/blogger/y44.jpg',
|
||||
'https://resource.tuniaokj.com/images/blogger/y55.jpg',
|
||||
],
|
||||
viewUser: {
|
||||
latestUserAvatar: [
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
],
|
||||
viewUserCount: 65
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 102
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 跳转
|
||||
tn(e) {
|
||||
uni.navigateTo({
|
||||
url: e,
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 胶囊*/
|
||||
.tn-custom-nav-bar__back {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 1000rpx;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.5);
|
||||
color: #FFFFFF;
|
||||
font-size: 18px;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
flex: 1;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
width: 1rpx;
|
||||
height: 110%;
|
||||
position: absolute;
|
||||
top: 22.5%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
opacity: 0.7;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
/* 文章内容 start*/
|
||||
.blogger {
|
||||
&__item {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
&__author {
|
||||
&__btn {
|
||||
margin-right: -12rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
line-height: 55rpx;
|
||||
|
||||
&__label {
|
||||
padding: 0 20rpx;
|
||||
margin: 0rpx 18rpx 0 0;
|
||||
|
||||
&--prefix {
|
||||
color: #00FFC8;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
&__content {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin-top: 18rpx;
|
||||
padding-right: 18rpx;
|
||||
|
||||
&__data {
|
||||
line-height: 46rpx;
|
||||
text-align: justify;
|
||||
overflow: hidden;
|
||||
transition: all 0.25s ease-in-out;
|
||||
|
||||
}
|
||||
|
||||
&__status {
|
||||
margin-top: 10rpx;
|
||||
font-size: 26rpx;
|
||||
color: #82B2FF;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
border-radius: 16rpx;
|
||||
|
||||
&--1 {
|
||||
max-width: 80%;
|
||||
max-height: 300rpx;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
max-width: 260rpx;
|
||||
max-height: 260rpx;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
height: 212rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__count-icon {
|
||||
font-size: 40rpx;
|
||||
padding-right: 5rpx;
|
||||
}
|
||||
|
||||
&__ad {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
transform: translate3d(0px, 0px, 0px) !important;
|
||||
|
||||
::v-deep .uni-swiper-slide-frame {
|
||||
transform: translate3d(0px, 0px, 0px) !important;
|
||||
}
|
||||
.uni-swiper-slide-frame {
|
||||
transform: translate3d(0px, 0px, 0px) !important;
|
||||
}
|
||||
|
||||
&__item {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-origin: left center;
|
||||
transform: translate3d(100%, 0px, 0px) scale(1) !important;
|
||||
transition: transform 0.25s ease-in-out;
|
||||
z-index: 1;
|
||||
|
||||
&--0 {
|
||||
transform: translate3d(0%, 0px, 0px) scale(1) !important;
|
||||
z-index: 4;
|
||||
}
|
||||
&--1 {
|
||||
transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
|
||||
z-index: 3;
|
||||
}
|
||||
&--2 {
|
||||
transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
border-radius: 40rpx;
|
||||
width: 640rpx;
|
||||
height: 500rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 文章内容 end*/
|
||||
|
||||
/* 间隔线 start*/
|
||||
.tn-strip-bottom {
|
||||
width: 100%;
|
||||
border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
|
||||
}
|
||||
/* 间隔线 end*/
|
||||
|
||||
/* 头像 start */
|
||||
.logo-image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo-pic {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position: top;
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
// background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
/* 底部 start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
align-items: center;
|
||||
min-height: 130rpx;
|
||||
padding: 0;
|
||||
height: calc(130rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(30rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-left: 10rpx;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
|
||||
/* 毛玻璃*/
|
||||
.dd-glass {
|
||||
width: 100%;
|
||||
backdrop-filter: blur(20rpx);
|
||||
-webkit-backdrop-filter: blur(20rpx);
|
||||
}
|
||||
|
||||
/* 头像*/
|
||||
.avatar-all {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 4rpx solid rgba(255,255,255,0.05);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* 内容*/
|
||||
.topic {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
margin-bottom: 120rpx;
|
||||
|
||||
|
||||
/* 表单信息 start */
|
||||
&__info {
|
||||
margin: 0 50rpx;
|
||||
margin-top: 105rpx;
|
||||
padding: 30rpx 51rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: rgba(255,255,255,1);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
|
||||
|
||||
&__item {
|
||||
|
||||
&__input {
|
||||
width: 400rpx;
|
||||
height: 60rpx;
|
||||
border: 1rpx solid #C6D1D8;
|
||||
border-radius: 39rpx;
|
||||
|
||||
&__left-icon {
|
||||
width: 10%;
|
||||
font-size: 44rpx;
|
||||
margin-left: 20rpx;
|
||||
margin-right: 5rpx;
|
||||
color: #C6D1D8;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 80%;
|
||||
padding-left: 10rpx;
|
||||
|
||||
&--verify-code {
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 30rpx;
|
||||
color: #78909C;
|
||||
// letter-spacing: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
&__right-icon {
|
||||
width: 10%;
|
||||
font-size: 34rpx;
|
||||
margin-right: 20rpx;
|
||||
color: #78909C;
|
||||
}
|
||||
|
||||
&__right-verify-code {
|
||||
width: 34%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
text-align: center;
|
||||
font-size: 31rpx;
|
||||
font-weight: bold;
|
||||
line-height: 77rpx;
|
||||
// text-indent: 1em;
|
||||
border-radius: 100rpx;
|
||||
color: #FFFFFF;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
// border: 2rpx solid #FFFFFF;
|
||||
}
|
||||
|
||||
&__sure {
|
||||
height: 60rpx;
|
||||
width: 140rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
/* 表单信息 end */
|
||||
|
||||
/* 内容 end */
|
||||
|
||||
}
|
||||
|
||||
/deep/.input-placeholder {
|
||||
font-size: 30rpx;
|
||||
color: #C6D1D8;
|
||||
}
|
||||
|
||||
</style>
|
||||
1042
other/index/index.vue
Normal file
1042
other/index/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
163
other/slotMachine/components/pop-ling-qu.vue
Normal file
163
other/slotMachine/components/pop-ling-qu.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-popup v-model="show" mode="center" @close="close">
|
||||
<view class="bg">
|
||||
<view class="title">恭喜您获得</view>
|
||||
<view class="goods">
|
||||
<template v-if="result&&result.type==3">
|
||||
<view class="u-flex u-col-center u-row-center">
|
||||
<image style="height: 100px;" :src="result.img" mode="heightFix"></image>
|
||||
</view>
|
||||
<view class="u-flex u-row-center u-m-t-30">
|
||||
<view class="type">{{result.name}}</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="result&&result.type==2">
|
||||
<view class="u-flex color-money u-col-center u-row-center">
|
||||
<view class="money">{{result.number}}</view>
|
||||
<view class="font-bold " style="margin-top: 20rpx;font-size: 36rpx;">元</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-24 u-row-center">
|
||||
<view class="type">现金红包</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="u-flex close u-row-center">
|
||||
<u-icon name="close-circle" :size="54" @click="close" color="#fff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
result: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open(data) {
|
||||
console.log(data);
|
||||
this.result = data
|
||||
this.show = true
|
||||
},
|
||||
close() {
|
||||
console.log('抽奖弹窗关闭');
|
||||
this.show = false
|
||||
// if(!this.result){
|
||||
// return
|
||||
// }
|
||||
// const {
|
||||
// orderId,
|
||||
// id
|
||||
// } = this.result
|
||||
// this.$Request.postJson('app/discSpinning/receive', this.result).then(res => {
|
||||
// this.result = ''
|
||||
// console.log(res)
|
||||
// if (res.code == 0) {
|
||||
// console.log('抽奖领取成功');
|
||||
// const key=res.data==0?'isBindAliPay':undefined
|
||||
// this.$emit('close',key)
|
||||
// if(key&&key=='isBindAliPay'){
|
||||
// uni.navigateTo({
|
||||
// url:'/me/invite/zhifubao'
|
||||
// })
|
||||
// }
|
||||
// } else {
|
||||
// }
|
||||
// })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .u-mode-center-box {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.color-money {
|
||||
color: #E42F00;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-weight: 700;
|
||||
font-size: 96rpx;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 628rpx;
|
||||
height: 770rpx;
|
||||
margin-right: 10rpx;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-image: url("~static/images/zhuanpan/gift.png");
|
||||
position: relative;
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 2),
|
||||
(min-device-pixel-ratio: 2) {
|
||||
background-image: url("~static/images/zhuanpan/gift@2x.png");
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 218rpx;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-weight: 700;
|
||||
font-size: 60rpx;
|
||||
color: #AF6920;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.goods {
|
||||
position: absolute;
|
||||
top: 336rpx;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.type {
|
||||
padding: 6rpx 28rpx;
|
||||
border-radius: 100rpx;
|
||||
background: #E25B41;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.close{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
top: 574rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.btn {
|
||||
padding: 10rpx 60rpx 10rpx 64rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 44rpx;
|
||||
color: #AF6920;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,33 +1,73 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
|
||||
<u-navbar title="抽奖" back-icon-color="#fff" :background="{background:'transparent'}" immersive :border-bottom="false"
|
||||
title-color="#fff"></u-navbar>
|
||||
|
||||
<u-navbar title="抽奖" back-icon-color="#fff" :background="{background:'transparent'}" immersive
|
||||
:border-bottom="false" title-color="#fff"></u-navbar>
|
||||
<view class="sm">
|
||||
<HM-slotMachine ref="HMslotMachine"></HM-slotMachine>
|
||||
</view>
|
||||
<view class="start" @tap="start">
|
||||
<text>开 始</text>
|
||||
</view>
|
||||
|
||||
<ling-qu ref="refLingqu"></ling-qu>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lingQu from './components/pop-ling-qu.vue'
|
||||
|
||||
function isAllElementssame(array, key) {
|
||||
for (let index = 0; index < array.length; index++) {
|
||||
if (array[index][key] != array[0][key]) {
|
||||
return false
|
||||
}
|
||||
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
lingQu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
prizeList:[
|
||||
{name:'iPhone13',value:'iPhone',img:require('@/other/static/1.png')},
|
||||
{name:'airPods3',value:'airPods',img:require('@/other/static/2.png')},
|
||||
{name:'行李箱',value:'luggage',img:require('@/other/static/3.png')},
|
||||
{name:'风筒',value:'dryer',img:require('@/other/static/4.png')},
|
||||
{name:'平行车',value:'balanceCar',img:require('@/other/static/5.png')},
|
||||
{name:'iPad5',value:'iPad',img:require('@/other/static/6.png')}
|
||||
prizeList: [{
|
||||
name: 'iPhone13',
|
||||
value: 'iPhone',
|
||||
img: require('@/other/static/1.png')
|
||||
},
|
||||
{
|
||||
name: 'airPods3',
|
||||
value: 'airPods',
|
||||
img: require('@/other/static/2.png')
|
||||
},
|
||||
{
|
||||
name: '行李箱',
|
||||
value: 'luggage',
|
||||
img: require('@/other/static/3.png')
|
||||
},
|
||||
{
|
||||
name: '风筒',
|
||||
value: 'dryer',
|
||||
img: require('@/other/static/4.png')
|
||||
},
|
||||
{
|
||||
name: '平行车',
|
||||
value: 'balanceCar',
|
||||
img: require('@/other/static/5.png')
|
||||
},
|
||||
{
|
||||
name: 'iPad5',
|
||||
value: 'iPad',
|
||||
img: require('@/other/static/6.png')
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
|
||||
},
|
||||
onReady() {
|
||||
// init(options)初始化抽奖组件
|
||||
@@ -37,30 +77,45 @@
|
||||
// duration 总抽奖时长 毫秒
|
||||
// direction 滚动方向 up|down
|
||||
this.$refs.HMslotMachine.init({
|
||||
prizeList:this.prizeList,
|
||||
defaultResults:['iPhone','iPhone','iPhone'],
|
||||
duration:4000,
|
||||
direction:'up'
|
||||
prizeList: this.prizeList,
|
||||
defaultResults: ['iPhone', 'iPhone', 'iPhone'],
|
||||
duration: 4000,
|
||||
direction: 'up'
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
start(){
|
||||
showLingPop(data) {
|
||||
this.$refs.refLingqu.open(data)
|
||||
},
|
||||
start() {
|
||||
// roll(options)开始摇奖
|
||||
// 参数说明
|
||||
// results 开奖结果，结构[value,value,value] value为奖品数据的value值
|
||||
// success 开奖回调 e={results} results为开奖结果数据
|
||||
const that = this;
|
||||
this.$refs.HMslotMachine.roll({
|
||||
results:this.getResults(),
|
||||
success:(e)=>{
|
||||
|
||||
console.log("success e: ",e);
|
||||
results: this.getResults(),
|
||||
success: (e) => {
|
||||
console.log("success e: ", e);
|
||||
const item = isAllElementssame(e.results, 'value') ? e.results[0] : undefined
|
||||
if (item) {
|
||||
that.showLingPop({...item,type:3})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '很遗憾，未中奖',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
getResults(){
|
||||
getResults() {
|
||||
// 生成随机的抽奖结果 实际应用应该ajax请求后台，让后台返回开奖结果
|
||||
let max = this.prizeList.length-1;
|
||||
let arr = [Math.floor(Math.random() * (max - 1 + 1) + 1),Math.floor(Math.random() * (max - 1 + 1) + 1),Math.floor(Math.random() * (max - 1 + 1) + 1)];
|
||||
let max = this.prizeList.length - 1;
|
||||
let arr = [Math.floor(Math.random() * (max - 1 + 1) + 1), Math.floor(Math.random() * (max - 1 + 1) + 1),
|
||||
Math.floor(Math.random() * (max - 1 + 1) + 1)
|
||||
];
|
||||
return [
|
||||
this.prizeList[arr[0]].value,
|
||||
this.prizeList[arr[1]].value,
|
||||
@@ -71,19 +126,22 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background-image: linear-gradient(to top,#8F1E70, #51279A);
|
||||
min-height: calc(100vh - var(--window-bottom) - var(--window-top));
|
||||
}
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-image: linear-gradient(to top, #8F1E70, #51279A);
|
||||
min-height: calc(100vh - var(--window-bottom) - var(--window-top));
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.sm{
|
||||
|
||||
.sm {
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
.start{
|
||||
|
||||
.start {
|
||||
width: 70%;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
@@ -95,7 +153,8 @@ page{
|
||||
box-shadow: 0 1px 2px rgba($color: #51279A, $alpha: 1);
|
||||
border-bottom: solid 3px #8d5805;
|
||||
box-sizing: border-box;
|
||||
text{
|
||||
|
||||
text {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #b51c06;
|
||||
@@ -103,6 +162,4 @@ page{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</style>
|
||||
BIN
other/static/ad.png
Normal file
BIN
other/static/ad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
BIN
other/static/avatar/5.png
Normal file
BIN
other/static/avatar/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
other/static/avatar/6.png
Normal file
BIN
other/static/avatar/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
other/static/avatar/7.png
Normal file
BIN
other/static/avatar/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
779
other/tools/tools.vue
Normal file
779
other/tools/tools.vue
Normal file
@@ -0,0 +1,779 @@
|
||||
<template>
|
||||
<view class="template-activity 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>
|
||||
|
||||
|
||||
<!-- 方式4 start-->
|
||||
<!-- <view class="tn-flex">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-radius" @click="tn('/activityPages/planet')">
|
||||
<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" @click="tn('/activityPages/project')">
|
||||
<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-trophy-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" @click="tn('/activityPages/map')">
|
||||
<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-map-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" @click="tn('/activityPages/study')">
|
||||
<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-creative-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 list1" :key="index">
|
||||
<view class="nav-list-item tn-shadow-blur tn-cool-bg-image"
|
||||
:class="['tn-main-gradient-' + item.color + '--light']">
|
||||
<view class="nav-link">
|
||||
<view class='title tn-text-bold' style="color: #080808;">{{ item.title }}</view>
|
||||
<view class='join tn-color-grey tn-text-sm'>{{ item.join }} 人参与</view>
|
||||
</view>
|
||||
<view class="icon tn-shadow-blur" :class="['tn-bg-' + item.color]">
|
||||
<view class="" :class="['tn-icon-' + item.icon]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
|
||||
<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'>
|
||||
|
||||
<navigator class="nav-list-item tn-shadow-blur tn-cool-bg-image"
|
||||
:class="['tn-main-gradient-' + item.color + '--light']" target="miniProgram" :app-id="item.appid"
|
||||
:path="item.path" version="release" delta="1" hover-class="none" v-for="(item, index) in linksData"
|
||||
:key="index">
|
||||
<view class="nav-link">
|
||||
<view class='title tn-text-bold' style="color: #080808;">{{ item.title }}</view>
|
||||
<view class='join tn-color-grey tn-text-sm'>{{ item.join }} 人查看</view>
|
||||
</view>
|
||||
<view class="icon tn-shadow-blur" :class="['tn-bg-' + item.color]">
|
||||
<view class="" :class="['tn-icon-' + item.icon]"></view>
|
||||
</view>
|
||||
</navigator>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class='tn-tabbar-height'></view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Discovery',
|
||||
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',
|
||||
}],
|
||||
list1: [{
|
||||
icon: 'honor-fill',
|
||||
title: '称呼计算器',
|
||||
join: '629',
|
||||
color: 'blue'
|
||||
},
|
||||
{
|
||||
icon: 'count-fill',
|
||||
title: '支付宝语音生成',
|
||||
join: '268',
|
||||
color: 'purplered'
|
||||
},
|
||||
{
|
||||
icon: 'gloves-fill',
|
||||
title: '一周天气预报',
|
||||
join: '332',
|
||||
color: 'cyan'
|
||||
},
|
||||
{
|
||||
icon: 'trusty-fill',
|
||||
title: '今日星座运势',
|
||||
join: '106',
|
||||
color: 'orangeyellow'
|
||||
},
|
||||
{
|
||||
icon: 'hardware-fill',
|
||||
title: '来碗毒鸡汤',
|
||||
join: '98',
|
||||
color: 'indigo'
|
||||
},
|
||||
{
|
||||
icon: 'baby-fill',
|
||||
title: '垃圾分一分',
|
||||
join: '57',
|
||||
color: 'red'
|
||||
},
|
||||
{
|
||||
icon: 'safe-fill',
|
||||
title: '手持弹幕',
|
||||
join: '76',
|
||||
color: 'green'
|
||||
},
|
||||
{
|
||||
icon: 'flag-fill',
|
||||
title: '孩子取名',
|
||||
join: '225',
|
||||
color: 'orange'
|
||||
},
|
||||
{
|
||||
icon: 'topics-fill',
|
||||
title: '午餐吃什么',
|
||||
join: '422',
|
||||
color: 'teal'
|
||||
},
|
||||
{
|
||||
icon: 'light-fill',
|
||||
title: '朋友圈文案',
|
||||
join: '983',
|
||||
color: 'orangered'
|
||||
}
|
||||
],
|
||||
linksData: [{
|
||||
icon: 'honor-fill',
|
||||
join: '629',
|
||||
color: 'purplered',
|
||||
url: '',
|
||||
title: '司命',
|
||||
appid: 'wx734d93edc5b48019',
|
||||
path: 'pages/index/index'
|
||||
},
|
||||
{
|
||||
icon: 'count-fill',
|
||||
join: '268',
|
||||
color: 'blue',
|
||||
url: '',
|
||||
title: '爱小睡眠',
|
||||
appid: 'wx65880bde88b32037',
|
||||
path: 'pages/index/index'
|
||||
},
|
||||
{
|
||||
icon: 'gloves-fill',
|
||||
join: '332',
|
||||
color: 'orangeyellow',
|
||||
url: '',
|
||||
title: '群友作品',
|
||||
appid: '',
|
||||
path: 'pages/index/index'
|
||||
},
|
||||
{
|
||||
icon: 'trusty-fill',
|
||||
join: '106',
|
||||
color: 'cyan',
|
||||
url: '',
|
||||
title: '群友作品',
|
||||
appid: '',
|
||||
path: 'pages/index/index'
|
||||
},
|
||||
{
|
||||
icon: 'hardware-fill',
|
||||
join: '98',
|
||||
color: 'red',
|
||||
url: '',
|
||||
title: '群友作品',
|
||||
appid: '',
|
||||
path: 'pages/index/index'
|
||||
},
|
||||
{
|
||||
icon: 'baby-fill',
|
||||
join: '57',
|
||||
color: 'indigo',
|
||||
url: '',
|
||||
title: '群友作品',
|
||||
appid: '',
|
||||
path: 'pages/index/index'
|
||||
},
|
||||
{
|
||||
icon: 'safe-fill',
|
||||
join: '76',
|
||||
color: 'orange',
|
||||
url: '',
|
||||
title: '群友作品',
|
||||
appid: '',
|
||||
path: 'pages/index/index'
|
||||
},
|
||||
{
|
||||
icon: 'flag-fill',
|
||||
join: '225',
|
||||
color: 'green',
|
||||
url: '',
|
||||
title: '群友作品',
|
||||
appid: '',
|
||||
path: 'pages/index/index'
|
||||
},
|
||||
{
|
||||
icon: 'topics-fill',
|
||||
join: '422',
|
||||
color: 'orangered',
|
||||
url: '',
|
||||
title: '群友作品',
|
||||
appid: '',
|
||||
path: 'pages/index/index'
|
||||
},
|
||||
{
|
||||
icon: 'light-fill',
|
||||
join: '983',
|
||||
color: 'teal',
|
||||
url: '',
|
||||
title: '表情包制作',
|
||||
appid: 'wx096589e82af2ffa5',
|
||||
path: 'pages/index/index'
|
||||
}
|
||||
],
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack(){
|
||||
uni.navigateBack()
|
||||
},
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
// 跳转
|
||||
tn(e) {
|
||||
uni.navigateTo({
|
||||
url: e,
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.template-activity {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.tn-tabbar-height {
|
||||
min-height: 120rpx;
|
||||
height: calc(140rpx + env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
/* 胶囊*/
|
||||
.tn-custom-nav-bar__back {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 1000rpx;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.5);
|
||||
color: #FFFFFF;
|
||||
font-size: 18px;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
flex: 1;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
width: 1rpx;
|
||||
height: 110%;
|
||||
position: absolute;
|
||||
top: 22.5%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
opacity: 0.7;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
/* .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: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.join {
|
||||
color: #FFFFFF;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 元素标题 end */
|
||||
|
||||
/* 元素图标 start */
|
||||
.icon {
|
||||
font-variant: small-caps;
|
||||
position: absolute;
|
||||
top: 60rpx;
|
||||
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;
|
||||
|
||||
&::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_bg2.png);
|
||||
}
|
||||
}
|
||||
|
||||
/* 元素图标 end */
|
||||
}
|
||||
|
||||
/* 列表元素 end */
|
||||
}
|
||||
|
||||
/* 组件导航列表 end*/
|
||||
</style>
|
||||
570
other/topic/reserve.vue
Normal file
570
other/topic/reserve.vue
Normal file
@@ -0,0 +1,570 @@
|
||||
<template>
|
||||
<view class="template-reserve 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="slideshow">
|
||||
<view class="slideshow-image" style="background-image: url('https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg')"></view>
|
||||
<view class="slideshow-image" style="background-image: url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg')"></view>
|
||||
<view class="slideshow-image" style="background-image: url('https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg')"></view>
|
||||
<view class="slideshow-image" style="background-image: url('https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg')"></view>
|
||||
</view>
|
||||
|
||||
<view class="reserve tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="reserve-content tn-padding tn-color-black tn-text-lg dd-glass2" style="margin:71vh 30rpx 20vh 30rpx">
|
||||
<view class="tn-text-center tn-text-bold tn-padding-top tn-padding-bottom">
|
||||
活动详情
|
||||
</view>
|
||||
<view class="">
|
||||
|
||||
<view class="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex-col-center tn-flex-row-left">
|
||||
<view class="blogger__desc__label tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
|
||||
<text class="blogger__desc__label--prefix">#</text>
|
||||
<text class="tn-text-df">常回家看看</text>
|
||||
</view>
|
||||
<!-- 不用限制长度了，因为发布的时候限制长度了-->
|
||||
<text class="blogger__desc__content tn-flex-1 tn-text-justify tn-text-df">
|
||||
可爱的校友，让我们相约华软，来一场说看就看的木棉雨；通知将于活动前一晚送达，请查收！！
|
||||
</text>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<view class="tn-padding-top-lg">
|
||||
集合时间：2024年12月20日 12:00:00
|
||||
</view>
|
||||
<view class="">
|
||||
集合地点：喷泉广场
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- <view class="tn-margin-top tn-color-black tn-bg-white tn-radius" >
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center">
|
||||
<view class="justify-content-item">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view class="tn-padding tn-color-black">
|
||||
<view class="tn-padding-right-sm tn-text-lg tn-text-bold clamp-text-1">
|
||||
广东省广州市番禺祈福新村129号
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex justify-content-item tn-flex-row-center tn-padding-right-xs">
|
||||
<view class="tn-bg-gray--light tn-padding-xs tn-margin-sm tn-color-black tn-round">
|
||||
<text class="tn-icon-location-fill" style="font-size: 50rpx;"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="tn-text-center tn-text-bold tn-padding-top-xl">
|
||||
活动参与者
|
||||
</view>
|
||||
|
||||
<tn-read-more :closeBtn="true" openText="查看更多参与者" openIcon="more-circle" closeText="折叠起来" closeIcon="close" :showHeight="300">
|
||||
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-top-xl">
|
||||
<block v-for="(item, index) in groupList" :key="index">
|
||||
<view class="tn-padding-bottom tn-padding-left" style="width: 20%;">
|
||||
<view class="tn-flex tn-flex-row-left tn-flex-col-center" style="">
|
||||
<view class="user-pic">
|
||||
<view class="user-image">
|
||||
<view class="tn-shadow-blur" :style="'background-image:url('+ item.src +');width: 70rpx;height: 70rpx;background-size: cover;'">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
</tn-read-more>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="tn-footerfixed tn-flex tn-flex-row-between tn-flex-col-center tn-padding tn-safe-area-inset-bottom dd-glass">
|
||||
<view class="justify-content-item tn-padding-bottom">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view class="user-pic">
|
||||
<view class="user-image">
|
||||
<view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg');width: 70rpx;height: 70rpx;background-size: cover;">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 按钮-->
|
||||
<view class="justify-content-item tn-flex-col-center tn-flex-row-center tn-text-center tn-padding-bottom">
|
||||
<view class="tn-flex tn-flex-row-between">
|
||||
<view class="justify-content-item tn-margin-xs tn-text-center" style="width: 300rpx;">
|
||||
<tn-button shape="round" backgroundColor="#00FFC6" padding="40rpx 0" width="90%" shadow fontBold>
|
||||
<text class="tn-icon-topic tn-padding-right-xs tn-color-black"></text>
|
||||
<text class="tn-color-black">参与活动</text>
|
||||
</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="justify-content-item tn-flex-col-center tn-flex-row-center tn-text-center tn-padding-bottom" @click="openLocation">
|
||||
<view class="tn-bg-gray--light tn-padding-xs tn-margin-sm tn-color-black tn-round">
|
||||
<text class="tn-icon-location-fill" style="font-size: 50rpx;"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateReserve',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
groupList: [
|
||||
{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_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/shop/cup1.jpg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'},
|
||||
{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'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'},
|
||||
{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'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'},
|
||||
{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/shop/watch1.jpg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'},
|
||||
{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'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
|
||||
{src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openLocation() {
|
||||
uni.openLocation({
|
||||
longitude: 113.3298396012573,
|
||||
latitude: 22.961803525530176,
|
||||
name: '祈福新村',
|
||||
address: '祈福新村'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.template-reserve {
|
||||
}
|
||||
/* 胶囊*/
|
||||
.tn-custom-nav-bar__back {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 1000rpx;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.5);
|
||||
color: #FFFFFF;
|
||||
font-size: 18px;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
flex: 1;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
width: 1rpx;
|
||||
height: 110%;
|
||||
position: absolute;
|
||||
top: 22.5%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
opacity: 0.7;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
/* 内容*/
|
||||
.reserve{
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.reserve-content{
|
||||
background-color: rgba(255,255,255,0.7);
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
|
||||
/* 标签 */
|
||||
.blogger {
|
||||
&__item {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
line-height: 55rpx;
|
||||
|
||||
&__label {
|
||||
padding: 0 20rpx;
|
||||
margin: 0rpx 18rpx 0 0;
|
||||
|
||||
&--prefix {
|
||||
color: #00FFC8;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* 文字截取*/
|
||||
.clamp-text-1 {
|
||||
-webkit-line-clamp: 1;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.clamp-text-2 {
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 毛玻璃*/
|
||||
.dd-glass {
|
||||
width: 100%;
|
||||
backdrop-filter: blur(20rpx);
|
||||
-webkit-backdrop-filter: blur(20rpx);
|
||||
}
|
||||
|
||||
/* 毛玻璃*/
|
||||
.dd-glass2 {
|
||||
// width: 100%;
|
||||
backdrop-filter: blur(8rpx);
|
||||
-webkit-backdrop-filter: blur(8rpx);
|
||||
}
|
||||
|
||||
/* 用户头像 start */
|
||||
.user-image {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-pic {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position: top;
|
||||
border-radius: 100rpx;
|
||||
overflow: hidden;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* 底部悬浮按钮 start*/
|
||||
.tn-tabbar-height {
|
||||
min-height: 120rpx;
|
||||
height: calc(140rpx + env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
.tn-footerfixed {
|
||||
position: fixed;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
transition: all 0.25s ease-out;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
||||
/* 相册 start*/
|
||||
.slideshow {
|
||||
top: 0;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.slideshow-image {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: no-repeat 50% 50%;
|
||||
background-size: cover;
|
||||
-webkit-animation-name: kenburns;
|
||||
animation-name: kenburns;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-duration: 16s;
|
||||
animation-duration: 16s;
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.slideshow-image:nth-child(1) {
|
||||
-webkit-animation-name: kenburns-1;
|
||||
animation-name: kenburns-1;
|
||||
z-index: 3;
|
||||
}
|
||||
.slideshow-image:nth-child(2) {
|
||||
-webkit-animation-name: kenburns-2;
|
||||
animation-name: kenburns-2;
|
||||
z-index: 2;
|
||||
}
|
||||
.slideshow-image:nth-child(3) {
|
||||
-webkit-animation-name: kenburns-3;
|
||||
animation-name: kenburns-3;
|
||||
z-index: 1;
|
||||
}
|
||||
.slideshow-image:nth-child(4) {
|
||||
-webkit-animation-name: kenburns-4;
|
||||
animation-name: kenburns-4;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@-webkit-keyframes kenburns-1 {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
1.5625% {
|
||||
opacity: 1;
|
||||
}
|
||||
23.4375% {
|
||||
opacity: 1;
|
||||
}
|
||||
26.5625% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
98.4375% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2117647059);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes kenburns-1 {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
1.5625% {
|
||||
opacity: 1;
|
||||
}
|
||||
23.4375% {
|
||||
opacity: 1;
|
||||
}
|
||||
26.5625% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
98.4375% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2117647059);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes kenburns-2 {
|
||||
23.4375% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
26.5625% {
|
||||
opacity: 1;
|
||||
}
|
||||
48.4375% {
|
||||
opacity: 1;
|
||||
}
|
||||
51.5625% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
@keyframes kenburns-2 {
|
||||
23.4375% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
26.5625% {
|
||||
opacity: 1;
|
||||
}
|
||||
48.4375% {
|
||||
opacity: 1;
|
||||
}
|
||||
51.5625% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes kenburns-3 {
|
||||
48.4375% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
51.5625% {
|
||||
opacity: 1;
|
||||
}
|
||||
73.4375% {
|
||||
opacity: 1;
|
||||
}
|
||||
76.5625% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
@keyframes kenburns-3 {
|
||||
48.4375% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
51.5625% {
|
||||
opacity: 1;
|
||||
}
|
||||
73.4375% {
|
||||
opacity: 1;
|
||||
}
|
||||
76.5625% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes kenburns-4 {
|
||||
73.4375% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
76.5625% {
|
||||
opacity: 1;
|
||||
}
|
||||
98.4375% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes kenburns-4 {
|
||||
73.4375% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
76.5625% {
|
||||
opacity: 1;
|
||||
}
|
||||
98.4375% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
/* 相册 end*/
|
||||
</style>
|
||||
1287
other/topic/topic.vue
Normal file
1287
other/topic/topic.vue
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user