<script setup lang="ts">
import { SoundOutlined } from '@ant-design/icons-vue'
const props = defineProps({
title: {
type: String,
default: ''
},
color: {
type: String,
default: '#000'
},
bgColor: {
type: String,
default: '#fffbe8'
},
height: {
type: Number,
default: 32
},
translateX: {
type: String,
default: ''
}
})
</script>
<style>
.marquee_box {
display: flex;
align-items: center;
padding: 0 15px;
box-sizing: border-box;
background-color: v-bind(bgColor);
height: v-bind(height) + 'px';
}
.marquee {
flex: 1;
overflow: hidden;
margin-left: 10px;
}
.marquee div {
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(v-bind(translateX));
}
}
</style>
核心是v-bind() 可以使用js中的变量