mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-03-06 15:54:00 +08:00
新增记载动画,新增颜色选择组件
This commit is contained in:
kert
File diff suppressed because one or more lines are too long
@@ -183,16 +183,46 @@ export default {
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '加载动画',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '加载动画1',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/loading/loading'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '加载动画2',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/loading/loading2'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '加载动画3',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/loading/loading3'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '加载动画4',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/loading/loading4'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '加载动画5',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/loading/loading5'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '动效元素',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '加载动画',
|
||||
author: '图鸟北北',
|
||||
url: '/templatePage/animate/loading/loading'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '流星悬浮',
|
||||
@@ -259,12 +289,6 @@ export default {
|
||||
author: '最帅的你',
|
||||
url: '/templatePage/life/cube/cube'
|
||||
},
|
||||
{
|
||||
icon: 'rocket',
|
||||
title: '图鸟图表(待开源，免费开源)',
|
||||
author: '图鸟北北 & Ucharts秋云',
|
||||
url: '/templatePage/life/candle/candle'
|
||||
},
|
||||
{
|
||||
icon: 'rocket',
|
||||
title: '图鸟生态，期待你的加入',
|
||||
|
||||
@@ -265,6 +265,12 @@ export default {
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/components/table/index'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '取色器',
|
||||
author: '图鸟科技',
|
||||
url: '/vipPage/life/color/color'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '图鸟轮播(实验)',
|
||||
|
||||
31
pages.json
31
pages.json
@@ -569,6 +569,30 @@
|
||||
"navigationBarTitleText": "加载动画",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},{
|
||||
"path": "animate/loading/loading2",
|
||||
"style": {
|
||||
"navigationBarTitleText": "加载动画",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},{
|
||||
"path": "animate/loading/loading3",
|
||||
"style": {
|
||||
"navigationBarTitleText": "加载动画",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},{
|
||||
"path": "animate/loading/loading4",
|
||||
"style": {
|
||||
"navigationBarTitleText": "加载动画",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},{
|
||||
"path": "animate/loading/loading5",
|
||||
"style": {
|
||||
"navigationBarTitleText": "加载动画",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "animate/particle/particle",
|
||||
"style": {
|
||||
@@ -974,6 +998,13 @@
|
||||
"navigationBarTitleText": "uCharts首页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "life/color/color",
|
||||
"style": {
|
||||
"navigationBarTitleText": "取色器",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
@@ -1,265 +1,263 @@
|
||||
<template>
|
||||
<view class="template-loading">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<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="bg-contaniner">
|
||||
</view>
|
||||
|
||||
<view class="container-content hex-border">
|
||||
<view class="hexagons">
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateLoading',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 移动背景部分 */
|
||||
.bg-contaniner {
|
||||
position: fixed;
|
||||
top: -0rpx;
|
||||
left: -300rpx;
|
||||
--text-color: hsl(0 95% 60%);
|
||||
--bg-color: hsl(0 0% 100%);
|
||||
--bg-size: 200px;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
/* grid-template-areas: "body"; */
|
||||
overflow: hidden;
|
||||
font-family: "Dela Gothic One", sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.bg-contaniner::before {
|
||||
--size: 150vmax;
|
||||
|
||||
grid-area: body;
|
||||
content: "";
|
||||
inline-size: var(--size);
|
||||
block-size: var(--size);
|
||||
background-image: url("https://tnuiimage.tnkjapp.com/animate/animate1.jpg");
|
||||
background-size: var(--bg-size);
|
||||
background-repeat: repeat;
|
||||
transform: rotate(45deg);
|
||||
opacity: 0.25;
|
||||
animation: bg 6s linear infinite;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.bg-contaniner::before {
|
||||
animation-duration: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bg {
|
||||
to {
|
||||
background-position: 0 calc(var(--bg-size) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 加载部分 */
|
||||
.components-anloading {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
color: #fff;
|
||||
/* background: linear-gradient(45deg, #0fd850, #f9f047); */
|
||||
}
|
||||
|
||||
.hex-border {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
border: 2px solid rgba(235, 237, 241, 0.8);
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.hex-border::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 174px;
|
||||
height: 174px;
|
||||
border: 2px solid #F4B4C4;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
clip-path: inset(0px 135px 135px 0px);
|
||||
-webkit-clip-path: inset(0px 135px 135px 0px);
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
animation: rotateSmall 2s linear infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hex-border::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 174px;
|
||||
height: 174px;
|
||||
border: 2px solid #F4B4C4;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
clip-path: inset(0px 30px 30px 0px);
|
||||
-webkit-clip-path: inset(0px 30px 30px 0px);
|
||||
animation: rotateLarge 1.6s linear infinite;
|
||||
}
|
||||
|
||||
.hexagons {
|
||||
position: relative;
|
||||
border-radius: 100%;
|
||||
padding: 5%;
|
||||
top: 30px;
|
||||
left: 35px;
|
||||
}
|
||||
|
||||
.hexagon {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 23px;
|
||||
background-color: #F4B4C4;
|
||||
transform: scale(1.02);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.hexagon::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -11.5px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 11.5px solid #F4B4C4;
|
||||
}
|
||||
|
||||
.hexagon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-top: 11.5px solid #F4B4C4;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(1) {
|
||||
animation: animateHex 3s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(2) {
|
||||
left: 53px;
|
||||
animation: animateHex 3s 0.2s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(3) {
|
||||
left: -13px;
|
||||
top: 46px;
|
||||
animation: animateHex 3s 1s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(4) {
|
||||
left: 31px;
|
||||
top: 46px;
|
||||
animation: animateHex 3s 1.2s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(5) {
|
||||
left: 75px;
|
||||
top: 46px;
|
||||
animation: animateHex 3s 0.4s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(6) {
|
||||
top: 84px;
|
||||
animation: animateHex 3s 0.8s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(7) {
|
||||
left: 53px;
|
||||
top: 84px;
|
||||
animation: animateHex 3s 0.6s infinite;
|
||||
}
|
||||
|
||||
@keyframes rotateSmall {
|
||||
100% {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateLarge {
|
||||
0% {
|
||||
clip-path: inset(0px 30px 30px 0px);
|
||||
-webkit-clip-path: inset(0px 30px 30px 0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
clip-path: inset(0px 150px 150px 0px);
|
||||
-webkit-clip-path: inset(0px 150px 150px 0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(1turn);
|
||||
clip-path: inset(0px 30px 30px 0px);
|
||||
-webkit-clip-path: inset(0px 30px 30px 0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animateHex {
|
||||
0% {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
20%,
|
||||
50% {
|
||||
transform: scale(0.6);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
65% {
|
||||
transform: scale(1.02);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="template-loading">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<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="bg-contaniner">
|
||||
</view>
|
||||
|
||||
<view class="container-content hex-border">
|
||||
<view class="hexagons">
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateLoading',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 移动背景部分 */
|
||||
.bg-contaniner {
|
||||
position: fixed;
|
||||
top: -0rpx;
|
||||
left: -300rpx;
|
||||
--text-color: hsl(0 95% 60%);
|
||||
--bg-color: hsl(0 0% 100%);
|
||||
--bg-size: 200px;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
/* grid-template-areas: "body"; */
|
||||
overflow: hidden;
|
||||
font-family: "Dela Gothic One", sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.bg-contaniner::before {
|
||||
--size: 150vmax;
|
||||
|
||||
grid-area: body;
|
||||
content: "";
|
||||
inline-size: var(--size);
|
||||
block-size: var(--size);
|
||||
background-image: url("https://resource.tuniaokj.com/images/animate/animate1.jpg");
|
||||
background-size: var(--bg-size);
|
||||
background-repeat: repeat;
|
||||
transform: rotate(45deg);
|
||||
opacity: 0.25;
|
||||
animation: bg 6s linear infinite;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.bg-contaniner::before {
|
||||
animation-duration: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bg {
|
||||
to {
|
||||
background-position: 0 calc(var(--bg-size) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载部分 */
|
||||
.components-anloading {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
color: #fff;
|
||||
/* background: linear-gradient(45deg, #0fd850, #f9f047); */
|
||||
}
|
||||
|
||||
.hex-border {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
border: 2px solid rgba(235, 237, 241, 0.8);
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.hex-border::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 174px;
|
||||
height: 174px;
|
||||
border: 2px solid #F4B4C4;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
clip-path: inset(0px 135px 135px 0px);
|
||||
-webkit-clip-path: inset(0px 135px 135px 0px);
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
animation: rotateSmall 2s linear infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hex-border::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 174px;
|
||||
height: 174px;
|
||||
border: 2px solid #F4B4C4;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
clip-path: inset(0px 30px 30px 0px);
|
||||
-webkit-clip-path: inset(0px 30px 30px 0px);
|
||||
animation: rotateLarge 1.6s linear infinite;
|
||||
}
|
||||
|
||||
.hexagons {
|
||||
position: relative;
|
||||
border-radius: 100%;
|
||||
padding: 5%;
|
||||
top: 30px;
|
||||
left: 35px;
|
||||
}
|
||||
|
||||
.hexagon {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 23px;
|
||||
background-color: #F4B4C4;
|
||||
transform: scale(1.02);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.hexagon::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -11.5px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 11.5px solid #F4B4C4;
|
||||
}
|
||||
|
||||
.hexagon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-top: 11.5px solid #F4B4C4;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(1) {
|
||||
animation: animateHex 3s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(2) {
|
||||
left: 53px;
|
||||
animation: animateHex 3s 0.2s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(3) {
|
||||
left: -13px;
|
||||
top: 46px;
|
||||
animation: animateHex 3s 1s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(4) {
|
||||
left: 31px;
|
||||
top: 46px;
|
||||
animation: animateHex 3s 1.2s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(5) {
|
||||
left: 75px;
|
||||
top: 46px;
|
||||
animation: animateHex 3s 0.4s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(6) {
|
||||
top: 84px;
|
||||
animation: animateHex 3s 0.8s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(7) {
|
||||
left: 53px;
|
||||
top: 84px;
|
||||
animation: animateHex 3s 0.6s infinite;
|
||||
}
|
||||
|
||||
@keyframes rotateSmall {
|
||||
100% {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateLarge {
|
||||
0% {
|
||||
clip-path: inset(0px 30px 30px 0px);
|
||||
-webkit-clip-path: inset(0px 30px 30px 0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
clip-path: inset(0px 150px 150px 0px);
|
||||
-webkit-clip-path: inset(0px 150px 150px 0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(1turn);
|
||||
clip-path: inset(0px 30px 30px 0px);
|
||||
-webkit-clip-path: inset(0px 30px 30px 0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animateHex {
|
||||
0% {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
20%,
|
||||
50% {
|
||||
transform: scale(0.6);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
65% {
|
||||
transform: scale(1.02);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
61
templatePage/animate/loading/loading2.vue
Normal file
61
templatePage/animate/loading/loading2.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<view class="template-content">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<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-margin tn-text-center" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<view class="load">
|
||||
<text></text>
|
||||
<text></text>
|
||||
<text></text>
|
||||
<text></text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateContent',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
/* 加载 */
|
||||
.load{position:absolute;top:50%;left:42%;transform:translate(-50%, -50%);
|
||||
width:60px;
|
||||
height:60px;
|
||||
}
|
||||
.load text{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}
|
||||
|
||||
.load :first-child{background:#4B98FE;animation-delay:-1.5s}
|
||||
.load :nth-child(2){background:#00D05E;animation-delay:-1s}
|
||||
.load :nth-child(3){background:#FFAC00;animation-delay:-0.5s}
|
||||
.load :last-child{background:#FB6A67}
|
||||
|
||||
@keyframes spin{
|
||||
0%,100%{transform:translate(0)}
|
||||
25%{transform:translate(160%)}
|
||||
50%{transform:translate(160%, 160%)}
|
||||
75%{transform:translate(0, 160%)}
|
||||
}
|
||||
|
||||
</style>
|
||||
153
templatePage/animate/loading/loading3.vue
Normal file
153
templatePage/animate/loading/loading3.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<view class="template-loading">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<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="loader-wrapper">
|
||||
<view class="loader">
|
||||
<view class="logo-loading tn-icon-logo-tuniao tn-text-shadow-aquablue">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateLoading',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
@-webkit-keyframes img {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
@keyframes img {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(-360deg);
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes spin-reverse {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin-reverse {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(-360deg);
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loader-wrapper {
|
||||
// background-color: #00C3FF;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loader {
|
||||
display: flex;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: -75px 0 0 -75px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #4B98FE;
|
||||
animation: spin 1.7s linear infinite;
|
||||
z-index: 11;
|
||||
}
|
||||
.loader:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFAC00;
|
||||
animation: spin-reverse 5.6s linear infinite;
|
||||
}
|
||||
|
||||
.loader:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #00D05E;
|
||||
animation: spin 2.3s linear infinite;
|
||||
}
|
||||
.logo-loading {
|
||||
font-size: 120rpx;
|
||||
color: #01BEFF;
|
||||
margin: auto;
|
||||
align-items: center;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
animation: img 1.7s linear infinite;
|
||||
}
|
||||
|
||||
</style>
|
||||
102
templatePage/animate/loading/loading4.vue
Normal file
102
templatePage/animate/loading/loading4.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<view class="template-content">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<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-margin tn-text-center" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="">
|
||||
<view class="loading loading1 tn-icon-airplane tn-text-shadow-purplered"></view>
|
||||
<view class="loading loading2 tn-icon-flower tn-text-shadow-blue"></view>
|
||||
<view class="loading loading3 tn-icon-gift tn-text-shadow-orangered"></view>
|
||||
<view class="loading loading4 tn-icon-shop tn-text-shadow-indigo"></view>
|
||||
<view class="loading loading5 tn-icon-light tn-text-shadow-orangeyellow"></view>
|
||||
<view class="loading loading6 tn-icon-fire tn-text-shadow-cyan"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateContent',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
.loading {
|
||||
font-size: 60rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
animation: move 3s linear infinite;
|
||||
backface-visibility: hidden;
|
||||
position: absolute;
|
||||
top: calc(50% - 160rpx);
|
||||
left: 50%;
|
||||
transform-origin: -4vmin center;
|
||||
will-change: transform;
|
||||
}
|
||||
.loading1 {
|
||||
color: #4B98FE;
|
||||
animation-delay: -0.5s;
|
||||
opacity: 0;
|
||||
}
|
||||
.loading2 {
|
||||
color: #00D05E;
|
||||
animation-delay: -1s;
|
||||
opacity: 0;
|
||||
}
|
||||
.loading3 {
|
||||
color: #FFAC00;
|
||||
animation-delay: -1.5s;
|
||||
opacity: 0;
|
||||
}
|
||||
.loading4 {
|
||||
color: #FB6A67;
|
||||
animation-delay: -2s;
|
||||
opacity: 0;
|
||||
}
|
||||
.loading5 {
|
||||
color: #957BFE;
|
||||
animation-delay: -2.5s;
|
||||
opacity: 0;
|
||||
}
|
||||
.loading6 {
|
||||
color: #00B9FE;
|
||||
animation-delay: -3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
0% {
|
||||
transform: scale(1) rotate(0deg) translate3d(0, 0, 1px);
|
||||
will-change: transform;
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
z-index: 10;
|
||||
transform: scale(0) rotate(360deg) translate3d(0, 0, 1px);
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
224
templatePage/animate/loading/loading5.vue
Normal file
224
templatePage/animate/loading/loading5.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<view class="template-loading">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<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'}">
|
||||
<!-- 图鸟加载-->
|
||||
<view class="loader">
|
||||
<view class="circle loading1"></view>
|
||||
<view class="circle loading2"></view>
|
||||
<view class="circle loading3"></view>
|
||||
<view class="circle loading4"></view>
|
||||
<view class="circle loading5"></view>
|
||||
<view class="circle loading6"></view>
|
||||
<view class="circle loading7"></view>
|
||||
<view class="circle loading8"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateLoading',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
/* 加载动画*/
|
||||
.loader {
|
||||
position:absolute;
|
||||
width:120rpx;
|
||||
height:120rpx;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translate(-50%, -50%);
|
||||
}
|
||||
.circle{
|
||||
color: #01BEFF;
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
display: inline-block;
|
||||
float: none;
|
||||
background-color: currentColor;
|
||||
border: 0 solid currentColor;
|
||||
-webkit-animation: spin 1s infinite ease-in-out;
|
||||
-moz-animation: spin 1s infinite ease-in-out;
|
||||
-o-animation: spin 1s infinite ease-in-out;
|
||||
animation: spin 1s infinite ease-in-out
|
||||
}
|
||||
|
||||
.loader :nth-child(1) {
|
||||
top: 5%;
|
||||
left: 50%;
|
||||
-webkit-animation-delay: -.875s;
|
||||
-moz-animation-delay: -.875s;
|
||||
-o-animation-delay: -.875s;
|
||||
animation-delay: -.875s
|
||||
}
|
||||
|
||||
.loader :nth-child(2) {
|
||||
top: 18.1801948466%;
|
||||
left: 81.8198051534%;
|
||||
-webkit-animation-delay: -.75s;
|
||||
-moz-animation-delay: -.75s;
|
||||
-o-animation-delay: -.75s;
|
||||
animation-delay: -.75s
|
||||
}
|
||||
|
||||
.loader :nth-child(3) {
|
||||
top: 50%;
|
||||
left: 95%;
|
||||
-webkit-animation-delay: -.625s;
|
||||
-moz-animation-delay: -.625s;
|
||||
-o-animation-delay: -.625s;
|
||||
animation-delay: -.625s
|
||||
}
|
||||
|
||||
.loader :nth-child(4) {
|
||||
top: 81.8198051534%;
|
||||
left: 81.8198051534%;
|
||||
-webkit-animation-delay: -.5s;
|
||||
-moz-animation-delay: -.5s;
|
||||
-o-animation-delay: -.5s;
|
||||
animation-delay: -.5s
|
||||
}
|
||||
|
||||
.loader :nth-child(5) {
|
||||
top: 94.9999999966%;
|
||||
left: 50.0000000005%;
|
||||
-webkit-animation-delay: -.375s;
|
||||
-moz-animation-delay: -.375s;
|
||||
-o-animation-delay: -.375s;
|
||||
animation-delay: -.375s
|
||||
}
|
||||
|
||||
.loader :nth-child(6) {
|
||||
top: 81.8198046966%;
|
||||
left: 18.1801949248%;
|
||||
-webkit-animation-delay: -.25s;
|
||||
-moz-animation-delay: -.25s;
|
||||
-o-animation-delay: -.25s;
|
||||
animation-delay: -.25s
|
||||
}
|
||||
|
||||
.loader :nth-child(7) {
|
||||
top: 49.9999750815%;
|
||||
left: 5.0000051215%;
|
||||
-webkit-animation-delay: -.125s;
|
||||
-moz-animation-delay: -.125s;
|
||||
-o-animation-delay: -.125s;
|
||||
animation-delay: -.125s
|
||||
}
|
||||
|
||||
.loader :nth-child(8) {
|
||||
top: 18.179464974%;
|
||||
left: 18.1803700518%;
|
||||
-webkit-animation-delay: 0s;
|
||||
-moz-animation-delay: 0s;
|
||||
-o-animation-delay: 0s;
|
||||
animation-delay: 0s
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0)
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes spin {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: scale(1);
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 0;
|
||||
-moz-transform: scale(0);
|
||||
transform: scale(0)
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes spin {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 0;
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0);
|
||||
-moz-transform: scale(0);
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0)
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user