155 lines
3.2 KiB
Vue
155 lines
3.2 KiB
Vue
<template>
|
||
<div class="system-message">
|
||
<!-- 顶部导航 -->
|
||
<div class="nav-tabs">
|
||
<el-tabs v-model="activeTab">
|
||
<el-tab-pane label="系统消息" name="system"></el-tab-pane>
|
||
<el-tab-pane label="交易消息" name="trade"></el-tab-pane>
|
||
<el-tab-pane label="论坛社区互动" name="forum"></el-tab-pane>
|
||
</el-tabs>
|
||
<div class="read-all">
|
||
<el-button type="primary" link>全部已读</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 消息列表 -->
|
||
<div class="message-list">
|
||
<div v-for="(message, index) in messages" :key="index" class="message-item">
|
||
<div class="message-icon">
|
||
<el-icon size="24">
|
||
<Bell />
|
||
</el-icon>
|
||
</div>
|
||
<div class="message-content">
|
||
<div class="message-title">
|
||
<span>{{ message.title }}</span>
|
||
</div>
|
||
<div class="message-desc">{{ message.description }}</div>
|
||
</div>
|
||
<div class="message-time">{{ message.time }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 查看更多 -->
|
||
<div class="view-more">
|
||
<el-button type="primary" link>查看更多 >></el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { Bell } from '@element-plus/icons-vue'
|
||
|
||
const activeTab = ref('system')
|
||
|
||
interface Message {
|
||
title: string
|
||
description: string
|
||
time: string
|
||
}
|
||
|
||
const messages = ref<Message[]>([
|
||
{
|
||
title: '国庆夕金币充值优惠！',
|
||
description: '国庆夕限时优惠，微信满500送50金币，充200送10金币',
|
||
time: '2025-03-05 17:00:57',
|
||
},
|
||
{
|
||
title: '国庆夕金币充值优惠！',
|
||
description: '国庆夕限时优惠，微信满500送50金币，充200送10金币',
|
||
time: '2025-03-05 17:00:57',
|
||
},
|
||
])
|
||
</script>
|
||
|
||
<style scoped>
|
||
.system-message {
|
||
/* background-color: #f0f6ff; */
|
||
width: 913px;
|
||
padding: 20px 25px;
|
||
box-sizing: border-box;
|
||
background: #ffffff;
|
||
border-radius: 6px;
|
||
border: 1px solid #eeeeee;
|
||
}
|
||
|
||
.nav-tabs {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: white;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
width: 100%;
|
||
}
|
||
|
||
.read-all {
|
||
padding-right: 20px;
|
||
}
|
||
|
||
.message-list {
|
||
background: white;
|
||
border-radius: 8px;
|
||
width: 100%;
|
||
}
|
||
|
||
.message-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 15px 20px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.message-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.message-icon {
|
||
color: #409eff;
|
||
margin-right: 15px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.message-content {
|
||
flex: 1;
|
||
min-width: 0; /* 防止文本溢出 */
|
||
}
|
||
|
||
.message-title {
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.message-desc {
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.message-time {
|
||
color: #999;
|
||
font-size: 12px;
|
||
flex-shrink: 0;
|
||
margin-left: 15px;
|
||
}
|
||
|
||
.view-more {
|
||
text-align: center;
|
||
padding: 10px 0;
|
||
color: #409eff;
|
||
background: white;
|
||
margin-top: 20px;
|
||
border-radius: 8px;
|
||
width: 100%;
|
||
}
|
||
|
||
:deep(.el-tabs__header) {
|
||
margin-bottom: 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
:deep(.el-tabs__nav-wrap) {
|
||
padding-right: 20px;
|
||
}
|
||
</style>
|