61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<script setup>
|
||
import {ref, onMounted} from "vue";
|
||
import warn from '../static/icons/warn.png';
|
||
|
||
const XNoticeBox = ref();
|
||
const Context = ref();
|
||
const roll = ref(false);
|
||
|
||
onMounted(() => {
|
||
if (
|
||
Context.value.$el.clientWidth
|
||
>
|
||
XNoticeBox.value.$el.clientWidth
|
||
) {
|
||
roll.value = true;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<view ref="XNoticeBox" class="x-notice-box">
|
||
<view ref="Context" :class="['context', roll ? 'roll' : '']">
|
||
<image class="!size-[26rpx] flex-shrink-0" :src="warn"></image>
|
||
<text class="!whitespace-nowrap flex-shrink-0">提示：请在规定时间内，按要求提交回填1。以免影响收益。哈哈哈哈哈哈哈哈哈哈</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.x-notice-box {
|
||
padding: 18rpx 24rpx;
|
||
background-color: #FFF7E8;
|
||
}
|
||
|
||
.context {
|
||
color: rgb(255, 87, 34);
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
line-height: 22px;
|
||
letter-spacing: 0;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 18rpx;
|
||
}
|
||
|
||
.roll {
|
||
animation: 10s Roll linear infinite forwards;
|
||
}
|
||
|
||
@keyframes Roll {
|
||
0% {
|
||
transform: translateX(100%);
|
||
}
|
||
100% {
|
||
transform: translateX(-100%);
|
||
}
|
||
}
|
||
</style>
|