49 lines
943 B
Vue
49 lines
943 B
Vue
<template>
|
|
<div
|
|
:class="{ icon: 1, active: active }"
|
|
:style="{
|
|
'background-image': bg || `url(${OSS_URL}/urm/animation_horn.png)`,
|
|
}"
|
|
></div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { px2vw } from '@/utils'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
width?: number | string
|
|
active: boolean
|
|
bg?: string
|
|
}>(),
|
|
{
|
|
active: false,
|
|
},
|
|
)
|
|
const OSS_URL = import.meta.env.VITE_OSS_URL
|
|
const _width = px2vw(props.width || 48)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.icon {
|
|
width: v-bind(_width);
|
|
height: v-bind(_width);
|
|
transform: translate(-2px);
|
|
background-size: calc(v-bind(_width) * 3) v-bind(_width);
|
|
background-repeat: no-repeat;
|
|
background-position: calc(v-bind(_width) * -2) center;
|
|
cursor: pointer;
|
|
}
|
|
.icon.active {
|
|
animation: ani 1s steps(3) infinite;
|
|
}
|
|
@keyframes ani {
|
|
from {
|
|
background-position-x: 0;
|
|
}
|
|
to {
|
|
background-position-x: calc(v-bind(_width) * -3);
|
|
}
|
|
}
|
|
</style>
|