74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
|
|
<script setup lang="ts">import { defineModel } from "vue";
|
|
import Panel from "@/components/common/Panel.vue";
|
|
|
|
// 定义系统消息的数据结构
|
|
interface SystemMessage {
|
|
title: string;
|
|
content: string;
|
|
time: string;
|
|
}
|
|
|
|
// 使用泛型指定 model 的类型
|
|
const systemMessage = defineModel<SystemMessage[]>({ default: () => [] });
|
|
</script>
|
|
|
|
<template>
|
|
<Panel title="系统通知" class="system-notification">
|
|
<template #tools>
|
|
<!-- 可选按钮 -->
|
|
</template>
|
|
<div class="system-notification-content">
|
|
<el-scrollbar>
|
|
<div
|
|
class="system-notification-item"
|
|
v-for="(item, index) in systemMessage"
|
|
:key="index"
|
|
>
|
|
<div class="system-notification-item-top">
|
|
<span class="system-notification-item-top-title">{{ item.title }}</span>
|
|
<span>{{ item.content }}</span>
|
|
</div>
|
|
<div class="system-notification-item-bottom">{{ item.time }}</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
</Panel>
|
|
</template>
|
|
|
|
<style scoped lang="scss">.system-notification-content {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-bottom: 18px;
|
|
|
|
.system-notification-item {
|
|
height: 80px;
|
|
width: 100%;
|
|
border-bottom: 1px solid #EAEAEC;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #999999;
|
|
font-style: normal;
|
|
|
|
.system-notification-item-top {
|
|
padding: 0 24px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
&-title {
|
|
font-size: 18px;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.system-notification-item-bottom {
|
|
padding: 0 24px;
|
|
}
|
|
}
|
|
}
|
|
</style> |