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>
|