119 lines
2.7 KiB
Vue
119 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, ref, onMounted } from 'vue';
|
|
import { ueEventData, ueEventTotal, ueEventId } from '../../hooks/useUEEvent';
|
|
import useI18n from '@/hooks/useI18n';
|
|
const { t } = useI18n();
|
|
|
|
onMounted(() => {});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="cdr" style="display: block">
|
|
<div class="cdr-head">
|
|
<span class="col">IMSI</span>
|
|
<span class="col">行为</span>
|
|
<span class="col-w">信息</span>
|
|
</div>
|
|
<div class="cdr-marquee-view">
|
|
<div
|
|
class="row"
|
|
:class="{ 'row-new': item.id === ueEventId }"
|
|
v-for="item in ueEventData"
|
|
:key="item.id"
|
|
>
|
|
<span class="col" :title="item.imsi">{{ item.imsi }}</span>
|
|
<span class="col" :title="item.type">{{ item.type }}</span>
|
|
<span class="col-w" :title="item.msg">{{ item.msg }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.cdr {
|
|
&-head {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
font-size: 0.583rem;
|
|
padding: 0.5rem 1.5rem;
|
|
color: #68d8fe;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 1.05;
|
|
& .col {
|
|
width: 3.2rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
&-w {
|
|
width: 8.4rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-marquee-view {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
height: 70%;
|
|
|
|
/* 修改滚动条的样式 */
|
|
&::-webkit-scrollbar {
|
|
width: 8px; /* 设置滚动条宽度 */
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background-color: #101129; /* 设置滚动条轨道背景颜色 */
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: #28293f; /* 设置滚动条滑块颜色 */
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background-color: #68d8fe; /* 设置鼠标悬停时滚动条滑块颜色 */
|
|
}
|
|
|
|
& .row {
|
|
line-height: 1.05;
|
|
padding: 0.5rem 1.5rem;
|
|
color: #61a8ff;
|
|
font-size: 0.75rem;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
&-new {
|
|
color: #fff;
|
|
animation: backInRight 0.3s alternate;
|
|
}
|
|
@keyframes backInRight {
|
|
0% {
|
|
opacity: 0.7;
|
|
-webkit-transform: translateX(2000px) scale(0.7);
|
|
transform: translateX(2000px) scale(0.7);
|
|
}
|
|
|
|
80% {
|
|
opacity: 0.7;
|
|
-webkit-transform: translateX(0) scale(0.7);
|
|
transform: translateX(0) scale(0.7);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
& .col {
|
|
width: 3.2rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
&-w {
|
|
width: 8.4rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|