molong/tuniao-ui
1
0
Fork 0
mirror of https://gitee.com/TSpecific/tuniao-ui.git synced 2026-03-13 10:54:01 +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

214
templatePage/animate/suspended/suspended.vue Normal file
View File

@@ -0,0 +1,214 @@
<template>
<view class="template-suspended">
<!-- 顶部自定义导航 -->
<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="wechat tnxuanfu" @click="navTuniaoUI">
<view class="bg0 pa">
<view class="bg1">
<image src="https://tnuiimage.tnkjapp.com/my/my7.png" class="button-shop shadow"></image>
</view>
</view>
<view class="hx-box pa">
<view class="pr">
<view class="hx-k1 pa0">
<view class="span"></view>
</view>
<view class="hx-k2 pa0">
<view class="span"></view>
</view>
<view class="hx-k3 pa0">
<view class="span"></view>
</view>
<view class="hx-k4 pa0">
<view class="span"></view>
</view>
<view class="hx-k5 pa0">
<view class="span"></view>
</view>
<view class="hx-k6 pa0">
<view class="span"></view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'TemplateSuspended',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {}
},
methods: {
// 跳转到
navTuniaoUI(e) {
wx.vibrateShort();
uni.navigateTo({
url: '/pages/index/index'
})
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-suspended{
background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
width: 100vw;
height: 100vh;
}
/* 悬浮 */
.tnxuanfu{
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.8rem);
}
}
/* 悬浮按钮 */
.button-shop {
width: 90rpx;
height: 90rpx;
display: flex;
flex-direction: row;
position: fixed;
/* bottom:200rpx;
right: 20rpx; */
left: 5rpx;
top: 5rpx;
z-index: 1001;
border-radius: 100px;
opacity: 0.9;
}
/* 按钮 */
.wechat {
bottom: 300rpx;
right: 75rpx;
position: fixed;
z-index: 9999;
}
.pa,
.pa0 {
position: absolute
}
.pa0 {
left: 0;
top: 0
}
.bg0 {
width: 100rpx;
height: 100rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bg1 {
width: 100%;
height: 100%;
}
.hx-box {
top: 50%;
left: 50%;
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
}
.hx-box .pr {
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
animation: hxz 20s linear infinite;
}
@keyframes hxz {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-360deg);
}
}
.hx-box .pr .pa0 {
width: 100rpx;
height: 100rpx;
/* border: 4px solid #5ec0ff; */
border-radius: 1000px;
}
.hx-box .pr .pa0 .span {
display: block;
width: 100%;
height: 100%;
background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc4.png) no-repeat center center;
background-size: 100% 100%;
animation: hx 4s linear infinite;
}
@keyframes hx {
to {
transform: rotate(360deg);
}
}
.hx-k1 {
transform: rotateX(-60deg) rotateZ(-60deg)
}
.hx-k2 {
transform: rotateX(-30deg) rotateZ(-30deg)
}
.hx-k3 {
transform: rotateX(0deg) rotateZ(0deg)
}
.hx-k4 {
transform: rotateX(30deg) rotateZ(30deg)
}
.hx-k5 {
transform: rotateX(60deg) rotateZ(60deg)
}
.hx-k6 {
transform: rotateX(90deg) rotateZ(90deg)
}
</style>