74 lines
1.4 KiB
Vue
74 lines
1.4 KiB
Vue
<template>
|
|
<div class="notice-bar-warp" :style="{ height: height }">
|
|
<div class="notice-bar-pos">
|
|
<div class="notice-icon">
|
|
<img :src="getAssetsFile('images/plant/icon5.png')" />
|
|
</div>
|
|
<div class="notice-bar" :style="{ 'line-height': height }">
|
|
<div class="scrolling-text">
|
|
<span>{{ text }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
defineProps({
|
|
text: {
|
|
type: String,
|
|
required: true,
|
|
default: '这是一条滚动通知消息，请注意查看！',
|
|
},
|
|
height: {
|
|
type: String || Number,
|
|
default: '40px',
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.notice-bar-warp {
|
|
width: 100%;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
.notice-bar-pos {
|
|
display: inline-flex;
|
|
width: 100%;
|
|
}
|
|
.notice-icon {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 30px;
|
|
img {
|
|
width: 80%;
|
|
height: 80%;
|
|
margin: 10% 0;
|
|
}
|
|
}
|
|
}
|
|
.notice-bar {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
width: calc(100% - 30px);
|
|
}
|
|
|
|
.scrolling-text {
|
|
white-space: nowrap;
|
|
animation: scroll-left 10s linear infinite;
|
|
color: #fff;
|
|
}
|
|
|
|
@keyframes scroll-left {
|
|
0% {
|
|
transform: translateX(100%);
|
|
}
|
|
100% {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
</style>
|