@coffic/cosy-ui 0.8.23 → 0.8.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/app.css +1 -1
- package/dist/index-astro.ts +1 -0
- package/dist/src-astro/grid/Grid.astro +274 -20
- package/dist/src-astro/list/ListItem.astro +71 -0
- package/dist/src-astro/list/ListItemBreath.astro +60 -0
- package/dist/src-astro/list/ListItemGlow.astro +65 -0
- package/dist/src-astro/list/ListItemIconLeft.astro +53 -0
- package/dist/src-astro/list/ListItemIconRight.astro +53 -0
- package/dist/src-astro/list/ListItemPulse.astro +61 -0
- package/dist/src-astro/list/ListItemRing.astro +59 -0
- package/dist/src-astro/list/index.ts +7 -0
- package/dist/src-vue/alert/Alert.vue +1 -1
- package/dist/src-vue/alert-dialog/Multilang.vue +1 -1
- package/dist/src-vue/buttons/Button.vue +20 -14
- package/dist/src-vue/container/Container.vue +1 -1
- package/dist/src-vue/iPhone/StatusBarContent.vue +88 -76
- package/dist/src-vue/iPhone/iPhoneWindow.vue +149 -129
- package/dist/src-vue/list/ListItem.vue +92 -2
- package/dist/src-vue/list/ListItemBreath.vue +70 -0
- package/dist/src-vue/list/ListItemGlow.vue +75 -0
- package/dist/src-vue/list/ListItemIconLeft.vue +63 -0
- package/dist/src-vue/list/ListItemIconRight.vue +63 -0
- package/dist/src-vue/list/ListItemPulse.vue +71 -0
- package/dist/src-vue/list/ListItemRing.vue +71 -0
- package/dist/src-vue/mac-window/MacWindow.vue +160 -139
- package/package.json +1 -1
|
@@ -1,5 +1,95 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
2
|
+
<ListItemRing
|
|
3
|
+
v-if="animationType === 'ring'"
|
|
4
|
+
:loading="loading"
|
|
5
|
+
:duration="duration"
|
|
6
|
+
@click="$emit('click')"
|
|
7
|
+
>
|
|
3
8
|
<slot />
|
|
4
|
-
</
|
|
9
|
+
</ListItemRing>
|
|
10
|
+
|
|
11
|
+
<ListItemIconLeft
|
|
12
|
+
v-else-if="animationType === 'icon-left'"
|
|
13
|
+
:loading="loading"
|
|
14
|
+
:duration="duration"
|
|
15
|
+
@click="$emit('click')"
|
|
16
|
+
>
|
|
17
|
+
<slot />
|
|
18
|
+
</ListItemIconLeft>
|
|
19
|
+
|
|
20
|
+
<ListItemIconRight
|
|
21
|
+
v-else-if="animationType === 'icon-right'"
|
|
22
|
+
:loading="loading"
|
|
23
|
+
:duration="duration"
|
|
24
|
+
@click="$emit('click')"
|
|
25
|
+
>
|
|
26
|
+
<slot />
|
|
27
|
+
</ListItemIconRight>
|
|
28
|
+
|
|
29
|
+
<ListItemBreath
|
|
30
|
+
v-else-if="animationType === 'breath'"
|
|
31
|
+
:loading="loading"
|
|
32
|
+
:duration="duration"
|
|
33
|
+
@click="$emit('click')"
|
|
34
|
+
>
|
|
35
|
+
<slot />
|
|
36
|
+
</ListItemBreath>
|
|
37
|
+
|
|
38
|
+
<ListItemPulse
|
|
39
|
+
v-else-if="animationType === 'pulse'"
|
|
40
|
+
:loading="loading"
|
|
41
|
+
:duration="duration"
|
|
42
|
+
@click="$emit('click')"
|
|
43
|
+
>
|
|
44
|
+
<slot />
|
|
45
|
+
</ListItemPulse>
|
|
46
|
+
|
|
47
|
+
<ListItemGlow
|
|
48
|
+
v-else-if="animationType === 'glow'"
|
|
49
|
+
:loading="loading"
|
|
50
|
+
:duration="duration"
|
|
51
|
+
@click="$emit('click')"
|
|
52
|
+
>
|
|
53
|
+
<slot />
|
|
54
|
+
</ListItemGlow>
|
|
55
|
+
|
|
56
|
+
<!-- 默认使用 ring 动画 -->
|
|
57
|
+
<ListItemRing
|
|
58
|
+
v-else
|
|
59
|
+
:loading="loading"
|
|
60
|
+
:duration="duration"
|
|
61
|
+
@click="$emit('click')"
|
|
62
|
+
>
|
|
63
|
+
<slot />
|
|
64
|
+
</ListItemRing>
|
|
5
65
|
</template>
|
|
66
|
+
|
|
67
|
+
<script setup lang="ts">
|
|
68
|
+
import ListItemRing from './ListItemRing.vue';
|
|
69
|
+
import ListItemIconLeft from './ListItemIconLeft.vue';
|
|
70
|
+
import ListItemIconRight from './ListItemIconRight.vue';
|
|
71
|
+
import ListItemBreath from './ListItemBreath.vue';
|
|
72
|
+
import ListItemPulse from './ListItemPulse.vue';
|
|
73
|
+
import ListItemGlow from './ListItemGlow.vue';
|
|
74
|
+
|
|
75
|
+
withDefaults(
|
|
76
|
+
defineProps<{
|
|
77
|
+
loading?: boolean;
|
|
78
|
+
duration?: number;
|
|
79
|
+
animationType?:
|
|
80
|
+
| 'ring'
|
|
81
|
+
| 'icon-left'
|
|
82
|
+
| 'icon-right'
|
|
83
|
+
| 'breath'
|
|
84
|
+
| 'pulse'
|
|
85
|
+
| 'glow';
|
|
86
|
+
}>(),
|
|
87
|
+
{
|
|
88
|
+
loading: false,
|
|
89
|
+
duration: undefined,
|
|
90
|
+
animationType: 'ring',
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
|
|
94
|
+
defineEmits(['click']);
|
|
95
|
+
</script>
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<li
|
|
3
|
+
:class="[
|
|
4
|
+
'cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden',
|
|
5
|
+
loading && !duration ? 'breath-anim' : '',
|
|
6
|
+
]"
|
|
7
|
+
@click="$emit('click')"
|
|
8
|
+
>
|
|
9
|
+
<div v-if="loading">
|
|
10
|
+
<template v-if="duration">
|
|
11
|
+
<div
|
|
12
|
+
class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
|
|
13
|
+
:style="{ animationDuration: duration + 'ms' }"
|
|
14
|
+
></div>
|
|
15
|
+
</template>
|
|
16
|
+
</div>
|
|
17
|
+
<div
|
|
18
|
+
class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3"
|
|
19
|
+
>
|
|
20
|
+
<slot />
|
|
21
|
+
</div>
|
|
22
|
+
</li>
|
|
23
|
+
</template>
|
|
24
|
+
|
|
25
|
+
<script setup lang="ts">
|
|
26
|
+
withDefaults(
|
|
27
|
+
defineProps<{
|
|
28
|
+
loading?: boolean;
|
|
29
|
+
duration?: number;
|
|
30
|
+
}>(),
|
|
31
|
+
{
|
|
32
|
+
loading: false,
|
|
33
|
+
duration: undefined,
|
|
34
|
+
}
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
defineEmits(['click']);
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<style scoped>
|
|
41
|
+
/* 背景色呼吸动画 */
|
|
42
|
+
@keyframes breath {
|
|
43
|
+
0%,
|
|
44
|
+
100% {
|
|
45
|
+
background-color: rgb(55 65 81); /* base-300 等效颜色 */
|
|
46
|
+
}
|
|
47
|
+
50% {
|
|
48
|
+
background-color: rgb(139 92 246 / 0.3); /* accent 色彩 */
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
.breath-anim {
|
|
52
|
+
animation: breath 2s ease-in-out infinite;
|
|
53
|
+
background-color: rgb(55 65 81); /* 确保有初始背景色 */
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* 进度条动画 */
|
|
57
|
+
.loading-bar {
|
|
58
|
+
width: 0%;
|
|
59
|
+
height: 100%;
|
|
60
|
+
animation: loading-bar-anim linear forwards;
|
|
61
|
+
}
|
|
62
|
+
@keyframes loading-bar-anim {
|
|
63
|
+
0% {
|
|
64
|
+
width: 0%;
|
|
65
|
+
}
|
|
66
|
+
100% {
|
|
67
|
+
width: 100%;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
</style>
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<li
|
|
3
|
+
:class="[
|
|
4
|
+
'cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden',
|
|
5
|
+
loading && !duration ? 'glow-anim' : '',
|
|
6
|
+
]"
|
|
7
|
+
@click="$emit('click')"
|
|
8
|
+
>
|
|
9
|
+
<div v-if="loading">
|
|
10
|
+
<template v-if="duration">
|
|
11
|
+
<div
|
|
12
|
+
class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
|
|
13
|
+
:style="{ animationDuration: duration + 'ms' }"
|
|
14
|
+
></div>
|
|
15
|
+
</template>
|
|
16
|
+
</div>
|
|
17
|
+
<div
|
|
18
|
+
class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3"
|
|
19
|
+
>
|
|
20
|
+
<slot />
|
|
21
|
+
</div>
|
|
22
|
+
</li>
|
|
23
|
+
</template>
|
|
24
|
+
|
|
25
|
+
<script setup lang="ts">
|
|
26
|
+
withDefaults(
|
|
27
|
+
defineProps<{
|
|
28
|
+
loading?: boolean;
|
|
29
|
+
duration?: number;
|
|
30
|
+
}>(),
|
|
31
|
+
{
|
|
32
|
+
loading: false,
|
|
33
|
+
duration: undefined,
|
|
34
|
+
}
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
defineEmits(['click']);
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<style scoped>
|
|
41
|
+
/* 发光边框动画 */
|
|
42
|
+
@keyframes glow {
|
|
43
|
+
0%,
|
|
44
|
+
100% {
|
|
45
|
+
border: 1px solid rgb(139 92 246 / 0.3);
|
|
46
|
+
box-shadow: 0 0 5px rgb(139 92 246 / 0.3);
|
|
47
|
+
}
|
|
48
|
+
50% {
|
|
49
|
+
border: 1px solid rgb(139 92 246 / 0.8);
|
|
50
|
+
box-shadow:
|
|
51
|
+
0 0 20px rgb(139 92 246 / 0.6),
|
|
52
|
+
0 0 30px rgb(139 92 246 / 0.4),
|
|
53
|
+
inset 0 0 10px rgb(139 92 246 / 0.2);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
.glow-anim {
|
|
57
|
+
animation: glow 2s ease-in-out infinite;
|
|
58
|
+
border: 1px solid rgb(139 92 246 / 0.3); /* 确保有初始边框 */
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* 进度条动画 */
|
|
62
|
+
.loading-bar {
|
|
63
|
+
width: 0%;
|
|
64
|
+
height: 100%;
|
|
65
|
+
animation: loading-bar-anim linear forwards;
|
|
66
|
+
}
|
|
67
|
+
@keyframes loading-bar-anim {
|
|
68
|
+
0% {
|
|
69
|
+
width: 0%;
|
|
70
|
+
}
|
|
71
|
+
100% {
|
|
72
|
+
width: 100%;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
</style>
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<li
|
|
3
|
+
class="cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden"
|
|
4
|
+
@click="$emit('click')"
|
|
5
|
+
>
|
|
6
|
+
<div v-if="loading">
|
|
7
|
+
<template v-if="duration">
|
|
8
|
+
<div
|
|
9
|
+
class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
|
|
10
|
+
:style="{ animationDuration: duration + 'ms' }"
|
|
11
|
+
></div>
|
|
12
|
+
</template>
|
|
13
|
+
</div>
|
|
14
|
+
<div
|
|
15
|
+
class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3"
|
|
16
|
+
>
|
|
17
|
+
<!-- 前置 loading 图标 -->
|
|
18
|
+
<div
|
|
19
|
+
v-if="loading && !duration"
|
|
20
|
+
class="cosy:flex-shrink-0 cosy:transform-none"
|
|
21
|
+
style="transform: none !important"
|
|
22
|
+
>
|
|
23
|
+
<div
|
|
24
|
+
class="cosy:loading cosy:loading-spinner cosy:loading-sm cosy:text-accent"
|
|
25
|
+
></div>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<slot />
|
|
29
|
+
</div>
|
|
30
|
+
</li>
|
|
31
|
+
</template>
|
|
32
|
+
|
|
33
|
+
<script setup lang="ts">
|
|
34
|
+
withDefaults(
|
|
35
|
+
defineProps<{
|
|
36
|
+
loading?: boolean;
|
|
37
|
+
duration?: number;
|
|
38
|
+
}>(),
|
|
39
|
+
{
|
|
40
|
+
loading: false,
|
|
41
|
+
duration: undefined,
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
defineEmits(['click']);
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<style scoped>
|
|
49
|
+
/* 进度条动画 */
|
|
50
|
+
.loading-bar {
|
|
51
|
+
width: 0%;
|
|
52
|
+
height: 100%;
|
|
53
|
+
animation: loading-bar-anim linear forwards;
|
|
54
|
+
}
|
|
55
|
+
@keyframes loading-bar-anim {
|
|
56
|
+
0% {
|
|
57
|
+
width: 0%;
|
|
58
|
+
}
|
|
59
|
+
100% {
|
|
60
|
+
width: 100%;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
</style>
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<li
|
|
3
|
+
class="cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden"
|
|
4
|
+
@click="$emit('click')"
|
|
5
|
+
>
|
|
6
|
+
<div v-if="loading">
|
|
7
|
+
<template v-if="duration">
|
|
8
|
+
<div
|
|
9
|
+
class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
|
|
10
|
+
:style="{ animationDuration: duration + 'ms' }"
|
|
11
|
+
></div>
|
|
12
|
+
</template>
|
|
13
|
+
</div>
|
|
14
|
+
<div
|
|
15
|
+
class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3"
|
|
16
|
+
>
|
|
17
|
+
<slot />
|
|
18
|
+
|
|
19
|
+
<!-- 后置 loading 图标 -->
|
|
20
|
+
<div
|
|
21
|
+
v-if="loading && !duration"
|
|
22
|
+
class="cosy:flex-shrink-0 cosy:ml-auto cosy:transform-none"
|
|
23
|
+
style="transform: none !important"
|
|
24
|
+
>
|
|
25
|
+
<div
|
|
26
|
+
class="cosy:loading cosy:loading-dots cosy:loading-sm cosy:text-accent"
|
|
27
|
+
></div>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</li>
|
|
31
|
+
</template>
|
|
32
|
+
|
|
33
|
+
<script setup lang="ts">
|
|
34
|
+
withDefaults(
|
|
35
|
+
defineProps<{
|
|
36
|
+
loading?: boolean;
|
|
37
|
+
duration?: number;
|
|
38
|
+
}>(),
|
|
39
|
+
{
|
|
40
|
+
loading: false,
|
|
41
|
+
duration: undefined,
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
defineEmits(['click']);
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<style scoped>
|
|
49
|
+
/* 进度条动画 */
|
|
50
|
+
.loading-bar {
|
|
51
|
+
width: 0%;
|
|
52
|
+
height: 100%;
|
|
53
|
+
animation: loading-bar-anim linear forwards;
|
|
54
|
+
}
|
|
55
|
+
@keyframes loading-bar-anim {
|
|
56
|
+
0% {
|
|
57
|
+
width: 0%;
|
|
58
|
+
}
|
|
59
|
+
100% {
|
|
60
|
+
width: 100%;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
</style>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<li
|
|
3
|
+
:class="[
|
|
4
|
+
'cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden',
|
|
5
|
+
loading && !duration ? 'pulse-anim' : '',
|
|
6
|
+
]"
|
|
7
|
+
@click="$emit('click')"
|
|
8
|
+
>
|
|
9
|
+
<div v-if="loading">
|
|
10
|
+
<template v-if="duration">
|
|
11
|
+
<div
|
|
12
|
+
class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
|
|
13
|
+
:style="{ animationDuration: duration + 'ms' }"
|
|
14
|
+
></div>
|
|
15
|
+
</template>
|
|
16
|
+
</div>
|
|
17
|
+
<div
|
|
18
|
+
class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3"
|
|
19
|
+
>
|
|
20
|
+
<slot />
|
|
21
|
+
</div>
|
|
22
|
+
</li>
|
|
23
|
+
</template>
|
|
24
|
+
|
|
25
|
+
<script setup lang="ts">
|
|
26
|
+
withDefaults(
|
|
27
|
+
defineProps<{
|
|
28
|
+
loading?: boolean;
|
|
29
|
+
duration?: number;
|
|
30
|
+
}>(),
|
|
31
|
+
{
|
|
32
|
+
loading: false,
|
|
33
|
+
duration: undefined,
|
|
34
|
+
}
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
defineEmits(['click']);
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<style scoped>
|
|
41
|
+
/* 整体脉冲动画 */
|
|
42
|
+
@keyframes pulse-scale {
|
|
43
|
+
0%,
|
|
44
|
+
100% {
|
|
45
|
+
transform: scale(1);
|
|
46
|
+
opacity: 1;
|
|
47
|
+
}
|
|
48
|
+
50% {
|
|
49
|
+
transform: scale(1.01);
|
|
50
|
+
opacity: 0.9;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
.pulse-anim {
|
|
54
|
+
animation: pulse-scale 1.5s ease-in-out infinite;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* 进度条动画 */
|
|
58
|
+
.loading-bar {
|
|
59
|
+
width: 0%;
|
|
60
|
+
height: 100%;
|
|
61
|
+
animation: loading-bar-anim linear forwards;
|
|
62
|
+
}
|
|
63
|
+
@keyframes loading-bar-anim {
|
|
64
|
+
0% {
|
|
65
|
+
width: 0%;
|
|
66
|
+
}
|
|
67
|
+
100% {
|
|
68
|
+
width: 100%;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
</style>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<li
|
|
3
|
+
:class="[
|
|
4
|
+
'cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden',
|
|
5
|
+
loading && !duration
|
|
6
|
+
? 'cosy:ring-2 cosy:ring-accent ring-pulse-anim'
|
|
7
|
+
: '',
|
|
8
|
+
]"
|
|
9
|
+
@click="$emit('click')"
|
|
10
|
+
>
|
|
11
|
+
<div v-if="loading">
|
|
12
|
+
<template v-if="duration">
|
|
13
|
+
<div
|
|
14
|
+
class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
|
|
15
|
+
:style="{ animationDuration: duration + 'ms' }"
|
|
16
|
+
></div>
|
|
17
|
+
</template>
|
|
18
|
+
</div>
|
|
19
|
+
<div
|
|
20
|
+
class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3"
|
|
21
|
+
>
|
|
22
|
+
<slot />
|
|
23
|
+
</div>
|
|
24
|
+
</li>
|
|
25
|
+
</template>
|
|
26
|
+
|
|
27
|
+
<script setup lang="ts">
|
|
28
|
+
withDefaults(
|
|
29
|
+
defineProps<{
|
|
30
|
+
loading?: boolean;
|
|
31
|
+
duration?: number;
|
|
32
|
+
}>(),
|
|
33
|
+
{
|
|
34
|
+
loading: false,
|
|
35
|
+
duration: undefined,
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
|
+
|
|
39
|
+
defineEmits(['click']);
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<style scoped>
|
|
43
|
+
/* Ring 外环脉冲动画 */
|
|
44
|
+
@keyframes ring-pulse {
|
|
45
|
+
0%,
|
|
46
|
+
100% {
|
|
47
|
+
transform: scale(1);
|
|
48
|
+
}
|
|
49
|
+
50% {
|
|
50
|
+
transform: scale(1.02);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
.ring-pulse-anim {
|
|
54
|
+
animation: ring-pulse 1.5s ease-in-out infinite;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* 进度条动画 */
|
|
58
|
+
.loading-bar {
|
|
59
|
+
width: 0%;
|
|
60
|
+
height: 100%;
|
|
61
|
+
animation: loading-bar-anim linear forwards;
|
|
62
|
+
}
|
|
63
|
+
@keyframes loading-bar-anim {
|
|
64
|
+
0% {
|
|
65
|
+
width: 0%;
|
|
66
|
+
}
|
|
67
|
+
100% {
|
|
68
|
+
width: 100%;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
</style>
|