1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
| <template>
| <div
| class="status-img flex-center"
| :style="{ width: `${wrapperSize}px`, height: `${wrapperSize}px`, backgroundImage: `url(${iconBg2})` }"
| >
| <img
| class="status-img__inner"
| :class="{ 'status-img__inner_work': showAnimation }"
| :src="runIcon"
| :width="size"
| :height="size"
| /> </div>
| </template>
|
| <script setup lang="ts">
| import { computed, toRefs } from 'vue';
| import iconBg2 from '/@/assets/images/szjt/icon_bg2.png';
| import iconUnWork from '/@/assets/images/szjt/icon_unwork.png';
| import iconWork from '/@/assets/images/szjt/icon_work.png';
| const props = defineProps({
| isWork: {
| type: Boolean,
| required: true,
| },
| wrapperSize: {
| type: Number,
| default: 40,
| },
| size: {
| type: Number,
| default: 20,
| },
|
| /**
| * 是否需要加上动画
| */
| animation: {
| type: Boolean,
| default: true,
| },
| });
|
| const { isWork, size } = toRefs(props);
|
| const runIcon = computed(() => (isWork.value ? iconWork : iconUnWork));
|
| const showAnimation = computed(() => (isWork.value && props.animation));
| </script>
| <style scoped lang="scss">
| .status-img {
| background-size: cover;
| background-repeat: no-repeat;
| &__inner {
| &_work {
| animation: rotate0_360 2s linear infinite normal;
| -webkit-animation: rotate0_360 2s linear infinite normal;
| }
| }
| }
| </style>
|
|
