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

更新图标库

Browse Source 
修复已知bug
This commit is contained in:
jaylen
2022-06-06 13:10:28 +08:00
parent 81579ccee5
commit 1e087b5ac3
226 changed files with 51832 additions and 46044 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
templatePage/life/about/about.vue Normal file
View File

@@ -0,0 +1,267 @@
<template>
<view class="template-bubble">
<!-- 顶部自定义导航 -->
<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>
<canvas canvas-id="bubble" id="bubble" class="bubble" :style="{width: `${windowWidth}px`, height: `${windowHeight}px`}"></canvas>
<view class="container about-bg" style="background-image:url('https://tnuiimage.tnkjapp.com/about/about.png')">
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateBubble',
mixins: [template_page_mixin],
data(){
return {
windowHeight: 0,
windowWidth: 0,
actionTimer: null,
animationTimer: null,
queue: {},
ctx: null
}
},
onLoad() {
this.getSystemInfo()
},
onReady() {
this.$nextTick(() => {
this.queue = {}
this.ctx = uni.createCanvasContext("bubble", this)
setTimeout(() => {
this.actionTimer = setInterval(() => {
this.generateBubble()
}, 500)
}, 1000)
})
},
onUnload() {
this.clearActionTimer()
this.clearAnimationTimer()
},
methods: {
// 获取系统信息
getSystemInfo() {
const systemInfo = uni.getSystemInfoSync()
if (!systemInfo) {
setTimeout(() => {
this.getSystemInfo()
}, 50)
return
}
this.windowHeight = systemInfo.safeArea.height
this.windowWidth = systemInfo.safeArea.width
},
// 生成泡泡
generateBubble() {
const image = "https://tnuiimage.tnkjapp.com/bubble/" + this.$t.number.randomInt(1, 33) + ".png"
uni.getImageInfo({
src: image,
success: (res) => {
if (res.errMsg === 'getImageInfo:ok') {
const anmationData = {
id: new Date().getTime(),
timer: 0,
opacity: 0,
pathData: this.generatePathData(),
image: res.path,
factor: {
speed: 0.0006, // 运动速度，值越小越慢
t: 0.1 // 贝塞尔函数系数，当为0，就是从无到有，这时候屏幕高度也要调一下
}
}
if (Object.keys(this.queue).length > 0) {
this.queue[anmationData.id] = anmationData
} else {
this.queue[anmationData.id] = anmationData
this.bubbleAnimate()
}
}
}
})
},
/* 动画相关 */
// 生成运动的路径数据
generatePathData() {
let width = this.windowWidth,
height = this.windowHeight;
const p0 = {
x: 0.72 * width,
y: height
}
const p1 = {
x: this.$t.number.random(0.22 * width, 0.33 * width),
y: this.$t.number.random(0.5 * height, 0.75 * height)
}
const p2 = {
x: this.$t.number.random(0, 0.88 * width),
y: this.$t.number.random(0.25 * height, 0.5 * height)
}
const p3 = {
x: this.$t.number.random(0, 0.88 * width),
y: this.$t.number.random(0, 0.125 * height)
}
return [p0, p1, p2, p3]
},
// 更新运动的路径
updatePath(data, factor) {
const p0 = data[0]
const p1 = data[1]
const p2 = data[2]
const p3 = data[3]
const t = factor.t
/*计算多项式系数 （下同）*/
const cx1 = 3 * (p1.x - p0.x)
const bx1 = 3 * (p2.x - p1.x) - cx1
const ax1 = p3.x - p0.x - cx1 - bx1
const cy1 = 3 * (p1.y - p0.y)
const by1 = 3 * (p2.y - p1.y) - cy1
const ay1 = p3.y - p0.y - cy1 - by1
const x = ax1 * (t * t * t) + bx1 * (t * t) + cx1 * t + p0.x
const y = ay1 * (t * t * t) + by1 * (t * t) + cy1 * t + p0.y
// console.log(p0.y, p1.y, p2.y, p3.y, y);
return {
x,
y
}
},
// 执行泡泡动画
bubbleAnimate() {
let width = this.windowWidth,
height = this.windowHeight;
Object.keys(this.queue).forEach(key => {
const anmationData = this.queue[+key];
const {
x,
y
} = this.updatePath(
anmationData.pathData,
anmationData.factor
)
const speed = anmationData.factor.speed
anmationData.factor.t += speed
var curWidth = 30
curWidth = (height - y) / 1.5
curWidth = Math.min(30, curWidth)
var curAlpha = anmationData.opacity
curAlpha = y / (0.3 * height) //消失的高度适当调一下
curAlpha = Math.min(1, curAlpha)
this.ctx.globalAlpha = curAlpha
this.ctx.drawImage(anmationData.image, x - curWidth / 2, y, curWidth, curWidth)
// this.ctx.setFillStyle('red')
// this.ctx.fillRect(x - curWidth / 2, y, 50, 50)
if (anmationData.factor.t > 1) {
delete this.queue[anmationData.id]
}
if (y > height) {
delete this.queue[anmationData.id]
}
})
this.ctx.draw()
if (Object.keys(this.queue).length > 0) {
this.animationTimer = setTimeout(() => {
this.bubbleAnimate()
}, 5)
} else {
this.clearAnimationTimer()()
this.ctx.draw() // 清空画面
}
},
// 清除定时器
clearActionTimer() {
if (this.actionTimer) {
clearInterval(this.actionTimer)
}
},
clearAnimationTimer() {
if (this.animationTimer) {
clearTimeout(this.animationTimer)
}
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-bubble {
margin: 0;
width: 100%;
height: 100vh;
color: #fff;
background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
/* background: linear-gradient(-120deg, #9A5CE5, #01BEFF, #00F5D4, #43e97b); */
/* background: linear-gradient(-120deg,#c471f5, #ec008c, #ff4e50,#f9d423); */
/* background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a); */
background-size: 500% 500%;
animation: gradientBG 15s ease infinite;
position: relative;
.bubble {
position: fixed;
bottom: -10vh;
right: 0;
z-index: 1024;
pointer-events: none;
// background-color: red;
}
}
.about-bg {
background-size: cover;
width: 100vw;
height: 100vh;
justify-content: center;
flex-direction: column;
color: #fff;
}
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.container {
width: 100%;
position: absolute;
text-align: center;
}
</style>

37
templatePage/life/browser/browser.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<view class="template-course">
<!-- 顶部自定义导航 -->
<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>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'TemplateCourse',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
</style>

1250
templatePage/life/candle/candle.vue
View File

File diff suppressed because it is too large Load Diff

318
templatePage/life/fullpage/fullpage.vue
View File

@@ -1,159 +1,159 @@
<template>
<view class="template-fullpage">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<swiper class="card-swiper" :circular="true" vertical="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'" style="height: 100vh;width: 100vw;"></image>
</view>
<view class="swiper-item-png image-banner">
<image :src="item.pngurl" mode="heightFix" v-if="item.type=='image'" style="height: 100vh;width: 100vw;"></image>
</view>
</swiper-item>
</swiper>
<view class="indication">
<block v-for="(item,index) in swiperList" :key="index">
<view class="spot" :class="cardCur==index?'active':''"></view>
</block>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateFullpage',
mixins: [template_page_mixin],
data(){
return {
cardCur: 0,
swiperList: [{
id: 0,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg1.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full1.png'
}, {
id: 1,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg2.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full2.png'
}, {
id: 2,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg1.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full3.png'
}, {
id: 3,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg2.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full4.png'
}],
}
},
methods: {
// cardSwiper
cardSwiper(e) {
this.cardCur = e.detail.current
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 全屏轮播 start*/
.card-swiper {
height: 100vh !important;
}
.card-swiper swiper-item {
width: 750rpx !important;
left: 0rpx;
box-sizing: border-box;
overflow: initial;
}
.card-swiper swiper-item .swiper-item {
width: 100%;
display: block;
height: 100vh;
border-radius: 0rpx;
transform: scale(1);
transition: all 0.2s ease-in 0s;
overflow: hidden;
}
.card-swiper swiper-item.cur .swiper-item {
transform: none;
transition: all 0.2s ease-in 0s;
}
.card-swiper swiper-item .swiper-item-png {
margin-top: -50vh;
width: 100%;
display: block;
border-radius: 0rpx;
transform: translate(1040rpx, 20rpx) scale(0.5, 0.5);
transition: all 0.6s ease 0s;
// overflow: hidden;
}
.card-swiper swiper-item.cur .swiper-item-png {
margin-top: -100vh;
width: 900rpx;
transform: translate(-80rpx, 0rpx) scale(1, 1);
transition: all 0.6s ease 0s;
}
.image-banner{
display: flex;
align-items: center;
justify-content: center;
}
.image-banner image{
width: 100%;
}
/* 轮播指示点 start*/
.indication{
z-index: 9999;
width: 100%;
height: 36rpx;
position: fixed;
// display:flex;
display: block;
flex-direction:row;
align-items:center;
justify-content:center;
}
.spot{
background-color: #000;
opacity: 0.3;
width: 10rpx;
height: 10rpx;
border-radius: 20rpx;
margin: 20rpx 0 !important;
left: 95vw;
top: -60vh;
position: relative;
}
.spot.active{
opacity: 0.6;
height: 30rpx;
background-color: #000;
}
</style>
<template>
<view class="template-fullpage">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<swiper class="card-swiper" :circular="true" vertical="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'" style="height: 100vh;width: 100vw;"></image>
</view>
<view class="swiper-item-png image-banner">
<image :src="item.pngurl" mode="heightFix" v-if="item.type=='image'" style="height: 100vh;width: 100vw;"></image>
</view>
</swiper-item>
</swiper>
<view class="indication">
<block v-for="(item,index) in swiperList" :key="index">
<view class="spot" :class="cardCur==index?'active':''"></view>
</block>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateFullpage',
mixins: [template_page_mixin],
data(){
return {
cardCur: 0,
swiperList: [{
id: 0,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg1.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full1.png'
}, {
id: 1,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg2.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full2.png'
}, {
id: 2,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg1.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full3.png'
}, {
id: 3,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg2.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full4.png'
}],
}
},
methods: {
// cardSwiper
cardSwiper(e) {
this.cardCur = e.detail.current
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 全屏轮播 start*/
.card-swiper {
height: 100vh !important;
}
.card-swiper swiper-item {
width: 750rpx !important;
left: 0rpx;
box-sizing: border-box;
overflow: initial;
}
.card-swiper swiper-item .swiper-item {
width: 100%;
display: block;
height: 100vh;
border-radius: 0rpx;
transform: scale(1);
transition: all 0.2s ease-in 0s;
overflow: hidden;
}
.card-swiper swiper-item.cur .swiper-item {
transform: none;
transition: all 0.2s ease-in 0s;
}
.card-swiper swiper-item .swiper-item-png {
margin-top: -50vh;
width: 100%;
display: block;
border-radius: 0rpx;
transform: translate(1040rpx, 20rpx) scale(0.5, 0.5);
transition: all 0.6s ease 0s;
// overflow: hidden;
}
.card-swiper swiper-item.cur .swiper-item-png {
margin-top: -100vh;
width: 900rpx;
transform: translate(-80rpx, 0rpx) scale(1, 1);
transition: all 0.6s ease 0s;
}
.image-banner{
display: flex;
align-items: center;
justify-content: center;
}
.image-banner image{
width: 100%;
}
/* 轮播指示点 start*/
.indication{
z-index: 9999;
width: 100%;
height: 36rpx;
position: fixed;
// display:flex;
display: block;
flex-direction:row;
align-items:center;
justify-content:center;
}
.spot{
background-color: #000;
opacity: 0.3;
width: 10rpx;
height: 10rpx;
border-radius: 20rpx;
margin: 20rpx 0 !important;
left: 95vw;
top: -60vh;
position: relative;
}
.spot.active{
opacity: 0.6;
height: 30rpx;
background-color: #000;
}
</style>

477
templatePage/life/outset/outset.vue Normal file
View File

@@ -0,0 +1,477 @@
<template>
<view class="template-outset">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar> -->
<!-- 流星-->
<view class="tn-satr">
<view class="sky"></view>
<view class="stars">
<view class="falling-stars">
<view class="star-fall"></view>
<view class="star-fall"></view>
<view class="star-fall"></view>
<view class="star-fall"></view>
</view>
<view class="small-stars">
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
</view>
<view class="medium-stars">
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
</view>
</view>
</view>
<!-- 头像用户信息 -->
<view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<view class="user-info__avatar tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/tuniao.png');width: 170rpx;height: 170rpx;background-size: cover;">
</view>
</view>
<!-- <view class="user-info__nick-name">图鸟UI</view> -->
</view>
<view class="tn-text-center tn-color-gray--disabled" style="padding: 60vh 0 0 0;">
<view class="" style="font-size: 45rpx;">
图鸟UI，不止于此
</view>
<view class="tn-color-gray--disabled tn-text-df tn-padding-top">
新触动 新感受 新创意
</view>
</view>
<view class="" style="padding: 120rpx 200rpx;z-index: 999;position: relative;">
<tn-button :plain="true" shape="round" backgroundColor="#FFFFFF" fontColor="#FFFFFF" width="100%" height="70rpx">全新出发</tn-button>
</view>
<view class="tnwave waveAnimation">
<view class="waveWrapperInner bgTop">
<view class="wave waveTop" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgMiddle">
<view class="wave waveMiddle" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgBottom">
<view class="wave waveBottom" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-1.png')"></view>
</view>
</view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'TemplateWave',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 用户信息 start */
.user-info {
&__container {
position: absolute;
top: 25vh;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
&__avatar {
width: 200rpx;
height: 200rpx;
border: 8rpx solid rgba(255,255,255,0.05);
border-radius: 50%;
overflow: hidden;
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
}
&__nick-name {
color: #FFFFFF;
margin-top: 26rpx;
font-size: 36rpx;
font-weight: 600;
text-align: center;
}
}
/* 用户信息 end */
/* 流星*/
.tn-satr {
position: fixed;
width: 100%;
height: 600px;
overflow: hidden;
flex-shrink: 0;
z-index: 998;
}
.stars {
position: absolute;
z-index: 1;
width: 100%;
height: 400px;
}
.star {
border-radius: 50%;
background: #ffffff;
box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 0.8);
}
.small-stars .star {
position: absolute;
width: 3px;
height: 3px;
}
.small-stars .star:nth-child(2n) {
opacity: 0;
-webkit-animation: star-blink 1.2s linear infinite alternate;
animation: star-blink 1.2s linear infinite alternate;
}
.small-stars .star:nth-child(1) {
left: 40px;
bottom: 50px;
}
.small-stars .star:nth-child(2) {
left: 200px;
bottom: 40px;
}
.small-stars .star:nth-child(3) {
left: 60px;
bottom: 120px;
}
.small-stars .star:nth-child(4) {
left: 140px;
bottom: 250px;
}
.small-stars .star:nth-child(5) {
left: 400px;
bottom: 300px;
}
.small-stars .star:nth-child(6) {
left: 170px;
bottom: 80px;
}
.small-stars .star:nth-child(7) {
left: 200px;
bottom: 360px;
-webkit-animation-delay: .2s;
animation-delay: .2s;
}
.small-stars .star:nth-child(8) {
left: 250px;
bottom: 320px;
}
.small-stars .star:nth-child(9) {
left: 300px;
bottom: 340px;
}
.small-stars .star:nth-child(10) {
left: 130px;
bottom: 320px;
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
.small-stars .star:nth-child(11) {
left: 230px;
bottom: 330px;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.small-stars .star:nth-child(12) {
left: 300px;
bottom: 360px;
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
@-webkit-keyframes star-blink {
50% {
width: 3px;
height: 3px;
opacity: 1;
}
}
@keyframes star-blink {
50% {
width: 3px;
height: 3px;
opacity: 1;
}
}
.medium-stars .star {
position: absolute;
width: 3px;
height: 3px;
opacity: 0;
-webkit-animation: star-blink 1.2s ease-in infinite alternate;
animation: star-blink 1.2s ease-in infinite alternate;
}
.medium-stars .star:nth-child(1) {
left: 300px;
bottom: 50px;
}
.medium-stars .star:nth-child(2) {
left: 400px;
bottom: 40px;
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.medium-stars .star:nth-child(3) {
left: 330px;
bottom: 300px;
-webkit-animation-delay: .2s;
animation-delay: .2s;
}
.medium-stars .star:nth-child(4) {
left: 460px;
bottom: 300px;
-webkit-animation-delay: .9s;
animation-delay: .9s;
}
.medium-stars .star:nth-child(5) {
left: 300px;
bottom: 150px;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.medium-stars .star:nth-child(6) {
left: 440px;
bottom: 120px;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.medium-stars .star:nth-child(7) {
left: 200px;
bottom: 140px;
-webkit-animation-delay: .8s;
animation-delay: .8s;
}
.medium-stars .star:nth-child(8) {
left: 30px;
bottom: 480px;
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
.medium-stars .star:nth-child(9) {
left: 460px;
bottom: 400px;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.medium-stars .star:nth-child(10) {
left: 150px;
bottom: 10px;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.medium-stars .star:nth-child(11) {
left: 420px;
bottom: 450px;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.medium-stars .star:nth-child(12) {
left: 340px;
bottom: 180px;
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
}
@keyframes star-blink {
50% {
width: 4px;
height: 4px;
opacity: 1;
}
}
.star-fall {
position: relative;
border-radius: 2px;
width: 80px;
height: 2px;
overflow: hidden;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.star-fall:after {
content: "";
position: absolute;
width: 50px;
height: 2px;
background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.4)));
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
left: 100%;
-webkit-animation: star-fall 3.6s linear infinite;
animation: star-fall 3.6s linear infinite;
}
.star-fall:nth-child(1) {
left: 80px;
bottom: -100px;
}
.star-fall:nth-child(1):after {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
.star-fall:nth-child(2) {
left: 200px;
bottom: -200px;
}
.star-fall:nth-child(2):after {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.star-fall:nth-child(3) {
left: 430px;
bottom: -50px;
}
.star-fall:nth-child(3):after {
-webkit-animation-delay: 3.6s;
animation-delay: 3.6s;
}
.star-fall:nth-child(4) {
left: 400px;
bottom: 100px;
}
.star-fall:nth-child(4):after {
-webkit-animation-delay: .2s;
animation-delay: .2s;
}
@-webkit-keyframes star-fall {
20% {
left: -100%;
}
100% {
left: -100%;
}
}
@keyframes star-fall {
20% {
left: -100%;
}
100% {
left: -100%;
}
}
/* 波浪*/
.template-outset{
background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
width: 100vw;
height: 100vh;
}
@keyframes move_wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1)
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(1)
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1)
}
}
.tnwave {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.waveWrapperInner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
}
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.bgTop {
opacity: 0.4;
}
.waveTop {
background-size: 50% 45px;
}
.waveAnimation .waveTop {
animation: move_wave 4s linear infinite;
}
.bgMiddle {
opacity: 0.6;
}
.waveMiddle {
background-size: 50% 40px;
}
.waveAnimation .waveMiddle {
animation: move_wave 3.5s linear infinite;
}
.bgBottom {
opacity: 0.95;
}
.waveBottom {
background-size: 50% 35px;
}
.waveAnimation .waveBottom {
animation: move_wave 2s linear infinite;
}
</style>

3
templatePage/life/pano/pano.vue
View File

@@ -1,7 +1,8 @@
<template>
<view class="components-pano">
<!-- <web-view src="https://j4zgq9xbby.720yun.com/t/98vkswdwr8y"></web-view> -->
<!-- <web-view src="https://sketchfab.com/models/1e9cb6b98a5b4bc39f0e48ec0261000d/embed?autostart=1&internal=1&ui_infos=0&ui_snapshots=1&ui_stop=0&ui_watermark=0"></web-view> -->
<web-view src="https://vr.he29.com/v3/tour/index?id=3095"></web-view>
<!-- <web-view src="https://vr.he29.com/v3/tour/index?id=7026"></web-view> -->
</view>
</template>

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

@@ -1,171 +1,171 @@
<template>
<view class="template-plus">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="tn-text-center tn-margin tn-text-lg plus-box" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="plus-text">
<view class="tn-text-bold">图鸟UI小程序，免费开源可商用</view>
<view class="tn-margin-bottom-xl">（会员有更多福利鸭）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">图鸟UI Plus会员，初步定价</view>
<view class="tn-text-bold">
<text class="tn-text-xl-xxl">399￥</text>
<text class="tn-text-xl" style="">699￥</text>
<!-- 为什么不用text-decoration 因为这里面加了骚操作，不生效，你试试就知道了吖-->
<text class="" style="margin: -10rpx 10rpx 0 -115rpx;">————</text>
<text class="tn-text-xl-xxl"> / </text>
<text class="tn-text-xxl tn-padding-left-sm">终身</text>
</view>
<view class="tn-margin-bottom-xl">（大约等于1个前端页面价格💕）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">不断更新酷炫组件以及页面模板</view>
<view class="tn-margin-bottom-xl">（偶尔恰饭时常更新啦）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">请勿转售，转售是会慢慢追究法律责任的</view>
<view class="tn-margin-bottom-xl">（毕竟开发圈子就那么小）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">图鸟北北，微信号：<text class="tn-text-bold tn-text-xxl" @click="copyWechat">tnkewo</text> </view>
<view class="">（如需入群，可备注：进微信群）</view>
<view class="">（如需合作，可备注：商业合作）</view>
<view class="tn-margin-bottom-xl">（如需会员，可备注：咨询会员）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">入群须知，群内禁止黄赌毒+广告+吵架</view>
<view class="tn-margin-bottom-xl">（可进群与群友合作，拓展人脉）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">会员人数会达到50+叭</view>
<view class="tn-margin-bottom-xl">（希望够垫付服务器+CDN支出）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">也希望大家能喜欢这个项目</view>
<view class="tn-margin-bottom-xl">（不喜勿喷，北北还在努力成长）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">期待你的5星(⭐⭐⭐⭐⭐)好评</view>
<view class="tn-margin-bottom-xl">（尽管图鸟UI不是我最完美的作品）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">使用手册 + 图片素材 + 意见反馈 + Bug提交</view>
<view class="tn-margin-bottom-xl" @click="copyYuque">（https://www.yuque.com/tuniao）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">项目正式开始于2021年10月，12月30开源公测，2022年1月30上线正式版</view>
<view class="tn-margin-bottom-xl">（期间断断续续的在接单恰饭）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">灵感来源于我的上一个原创项目</view>
<view class="tn-margin-bottom-xl">（项目初衷是拓展业务，寻求商务合作）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold tn-text-xxl"> <text class="tn-icon-vip-fill tn-padding-right-xs"></text> 会员特权 <text class="tn-icon-vip-fill tn-padding-left-xs"></text></view>
<view class="">①会员尊享更多酷炫模板，模板持续更新</view>
<view class="">②优先响应会员页面模板需求，icon需求</view>
<view class="">③会员版本更新，在会员群进行代码发送</view>
<view class="tn-margin-bottom-xl">④有什么好的建议，可以提出来，多沟通</view>
</view>
<view class="plus-text">
<view class="tn-text-bold tn-text-xxl"> <text class="tn-icon-moon-fill tn-padding-right-xs"></text> 关于作者 <text class="tn-icon-moon-fill tn-padding-left-xs"></text></view>
<view class="">蔡北北，95年，广州</view>
<view class="">浮夸UI设计</view>
<view class="">菜鸡软件开发</view>
<view class="">祭天产品经理</view>
<view class="">背锅项目经理</view>
<view class="tn-margin-bottom-xl">努力往CTO去发展</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">北北感恩你的支持</view>
<view class="tn-margin-bottom-xl"></view>
</view>
</view>
<view class="tn-padding-bottom"></view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplatePlus',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
// 复制语雀地址
copyYuque() {
uni.setClipboardData({
data: "https://www.yuque.com/tuniao",
})
},
// 复制微信号
copyWechat() {
uni.setClipboardData({
data: "tnkewo",
})
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 内容 开始 */
.plus-box {
counter-reset: index;
padding: 0;
max-width: 100vw;
background-image: linear-gradient(to top, #FFA726 , #2DE8BD);
background-attachment: fixed;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.plus-text {
counter-increment: index;
display: initial;
align-items: center;
padding: 12px 0;
box-sizing: border-box;
}
.plus-text::before {
content: counters(index, ".", decimal-leading-zero);
font-size: 1.5rem;
font-weight: bold;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
align-self: flex-start;
}
</style>
<template>
<view class="template-plus">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="tn-text-center tn-margin tn-text-lg plus-box" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="plus-text">
<view class="tn-text-bold">图鸟UI小程序，免费开源可商用</view>
<view class="tn-margin-bottom-xl">（会员有更多福利鸭）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">图鸟UI Plus会员，初步定价</view>
<view class="tn-text-bold">
<text class="tn-text-xl-xxl">699￥</text>
<text class="tn-text-xl" style="">1299￥</text>
<!-- 为什么不用text-decoration 因为这里面加了骚操作，不生效，你试试就知道了吖-->
<text class="" style="margin: -10rpx 10rpx 0 -115rpx;">————</text>
<text class="tn-text-xl-xxl"> / </text>
<text class="tn-text-xxl tn-padding-left-sm">终身</text>
</view>
<view class="tn-margin-bottom-xl">（大约等于2个酷炫前端页面价格💕）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">不断更新酷炫组件以及页面模板</view>
<view class="tn-margin-bottom-xl">（偶尔恰饭时常更新啦）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">请勿转售，转售是会慢慢追究法律责任的</view>
<view class="tn-margin-bottom-xl">（毕竟开发圈子就那么小）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">图鸟北北，微信号：<text class="tn-text-bold tn-text-xxl" @click="copyWechat">tnkewo</text> </view>
<view class="">（如需入群，可备注：进微信群）</view>
<view class="">（如需合作，可备注：商业合作）</view>
<view class="tn-margin-bottom-xl">（如需会员，可备注：咨询会员）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">入群须知，群内禁止黄赌毒+广告+吵架</view>
<view class="tn-margin-bottom-xl">（可进群与群友合作，拓展人脉）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">会员人数会达到50+叭</view>
<view class="tn-margin-bottom-xl">（希望够垫付服务器+CDN支出）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">也希望大家能喜欢这个项目</view>
<view class="tn-margin-bottom-xl">（不喜勿喷，北北还在努力成长）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">期待你的5星(⭐⭐⭐⭐⭐)好评</view>
<view class="tn-margin-bottom-xl">（尽管图鸟UI不是我最完美的作品）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">使用手册 + 图片素材 + 意见反馈 + Bug提交</view>
<view class="tn-margin-bottom-xl" @click="copyYuque">（https://www.yuque.com/tuniao）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">项目正式开始于2021年10月，12月30开源公测，2022年1月30上线正式版</view>
<view class="tn-margin-bottom-xl">（期间断断续续的在接单恰饭）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">灵感来源于我的上一个原创项目</view>
<view class="tn-margin-bottom-xl">（项目初衷是拓展业务，寻求商务合作）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold tn-text-xxl"> <text class="tn-icon-vip-fill tn-padding-right-xs"></text> 会员特权 <text class="tn-icon-vip-fill tn-padding-left-xs"></text></view>
<view class="">①会员尊享更多酷炫模板，模板持续更新</view>
<view class="">②优先响应会员页面模板需求，icon需求</view>
<view class="">③会员版本更新，在会员群进行代码发送</view>
<view class="tn-margin-bottom-xl">④有什么好的建议，可以提出来，多沟通</view>
</view>
<view class="plus-text">
<view class="tn-text-bold tn-text-xxl"> <text class="tn-icon-moon-fill tn-padding-right-xs"></text> 关于作者 <text class="tn-icon-moon-fill tn-padding-left-xs"></text></view>
<view class="">蔡北北，95年，广州</view>
<view class="">浮夸UI设计</view>
<view class="">菜鸡软件开发</view>
<view class="">祭天产品经理</view>
<view class="">背锅项目经理</view>
<view class="tn-margin-bottom-xl">努力往CTO去发展</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">北北感恩你的支持</view>
<view class="tn-margin-bottom-xl"></view>
</view>
</view>
<view class="tn-padding-bottom"></view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplatePlus',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
// 复制语雀地址
copyYuque() {
uni.setClipboardData({
data: "https://www.yuque.com/tuniao",
})
},
// 复制微信号
copyWechat() {
uni.setClipboardData({
data: "tnkewo",
})
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 内容 开始 */
.plus-box {
counter-reset: index;
padding: 0;
max-width: 100vw;
background-image: linear-gradient(to top, #FFA726 , #2DE8BD);
background-attachment: fixed;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.plus-text {
counter-increment: index;
display: initial;
align-items: center;
padding: 12px 0;
box-sizing: border-box;
}
.plus-text::before {
content: counters(index, ".", decimal-leading-zero);
font-size: 1.5rem;
font-weight: bold;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
align-self: flex-start;
}
</style>

53
templatePage/life/share/share.vue Normal file
View File

@@ -0,0 +1,53 @@
<template>
<view class="template-course">
<!-- 顶部自定义导航 -->
<!-- <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="bottom-backgroup">
<image src='https://tnuiimage.tnkjapp.com/animate/activity.jpg' mode='widthFix' class='backgroud-image'></image>
</view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'TemplateCourse',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 背景图 start */
.bottom-backgroup {
height: 700rpx;
z-index: -1;
.backgroud-image {
border-radius: 60rpx 60rpx 0 0;
width: 100%;
height: 4100rpx;
// z-index: -1;
}
}
/* 背景图 end */
</style>