75 lines
1.3 KiB
Vue
75 lines
1.3 KiB
Vue
|
<!--
|
|||
|
|
@name: index
|
|||
|
|
@author: kahu4
|
|||
|
|
@date: 2023-11-06 18:08
|
|||
|
|
@description：index
|
|||
|
|
@update: 2023-11-06 18:08
|
|||
|
|
-->
|
|||
|
|
<script setup>
|
|||
|
|
import { toRefs } from "vue";
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
text: {
|
|||
|
|
type: String,
|
|||
|
|
default: () => '加载中...'
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
const {text} = toRefs(props)
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<view class="load-over flex flex-ai__center flex-jc__center">
|
|||
|
|
<view class="line"></view>
|
|||
|
|
<view class="text-box flex flex-ai__center flex-jc__center">
|
|||
|
|
<view
|
|||
|
|
:class="{text:true}"
|
|||
|
|
:style="{animationDelay: `${index*0.2}s`}"
|
|||
|
|
v-for="(item,index) in text"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
{{ item }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="line"></view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style
|
|||
|
|
scoped
|
|||
|
|
lang="scss"
|
|||
|
|
>
|
|||
|
|
.load-over {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
position: relative;
|
|||
|
|
color: $tips-color;
|
|||
|
|
|
|||
|
|
.line {
|
|||
|
|
width: 130rpx;
|
|||
|
|
height: 2rpx;
|
|||
|
|
border-radius: 2rpx;
|
|||
|
|
background: $tips-color;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-box {
|
|||
|
|
@include usePadding(30, 20);
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
@include usePadding(5, 0);
|
|||
|
|
animation: jump 3s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes jump {
|
|||
|
|
0%, 60% {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
20% {
|
|||
|
|
transform: translateY(-15rpx);
|
|||
|
|
}
|
|||
|
|
40% {
|
|||
|
|
transform: translateY(15rpx);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|