|
@@ -2,7 +2,7 @@
|
|
<el-card shadow="hover">
|
|
<el-card shadow="hover">
|
|
<div class="panel-top">
|
|
<div class="panel-top">
|
|
<div class="panel-name">{{prop.title}}</div>
|
|
<div class="panel-name">{{prop.title}}</div>
|
|
- <div class="cursor-pointer" @click="handleRefresh">
|
|
|
|
|
|
+ <div :class="['panel-refresh', { 'panel-refresh-rotate': roading }]" @click="handleRefresh">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M16.7167 6.66667C15.4895 4.19712 12.9411 2.5 9.99637 2.5C7.05158 2.5 4.56062 4.19712 3.33337 6.66667" stroke="#ADBFD7" stroke-linecap="round"/>
|
|
<path d="M16.7167 6.66667C15.4895 4.19712 12.9411 2.5 9.99637 2.5C7.05158 2.5 4.56062 4.19712 3.33337 6.66667" stroke="#ADBFD7" stroke-linecap="round"/>
|
|
<path d="M3.33337 3.33334V6.66667" stroke="#ADBFD7" stroke-linecap="round"/>
|
|
<path d="M3.33337 3.33334V6.66667" stroke="#ADBFD7" stroke-linecap="round"/>
|
|
@@ -26,8 +26,14 @@ const prop = defineProps({
|
|
})
|
|
})
|
|
|
|
|
|
const emit = defineEmits(['refresh']);
|
|
const emit = defineEmits(['refresh']);
|
|
|
|
+const roading = ref(false);
|
|
|
|
|
|
const handleRefresh = () => {
|
|
const handleRefresh = () => {
|
|
|
|
+ if (roading.value) return;
|
|
|
|
+ roading.value = true;
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ roading.value = false;
|
|
|
|
+ }, 1000);
|
|
emit('refresh');
|
|
emit('refresh');
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
@@ -57,4 +63,20 @@ const handleRefresh = () => {
|
|
background-color: rgb(22, 122, 240, 1);
|
|
background-color: rgb(22, 122, 240, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+.panel-refresh-rotate svg {
|
|
|
|
+ animation: rotate 1s linear infinite;
|
|
|
|
+ transform-origin: center center;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@keyframes rotate {
|
|
|
|
+ 0% {
|
|
|
|
+ transform: rotate(0deg);
|
|
|
|
+ transform-origin: center center;
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ transform: rotate(-360deg);
|
|
|
|
+ transform-origin: center center;
|
|
|
|
+ }
|
|
|
|
+}
|
|
</style>
|
|
</style>
|