TalkofFood_Design/shihuashishuo-ui/src/views/MessageView-消息列表页.vue
2025-07-23 11:42:07 +08:00

114 lines
2.6 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="message-view">
<header class="top-nav">
<button class="back-btn" @click="goBack">&lt; 返回</button>
<h2 class="title">我的消息</h2>
<div class="placeholder"></div>
</header>
<main class="message-list">
<div class="message-item">
<span class="icon system">📢</span>
<div class="content">
<h4>系统通知</h4>
<p>新版上线快来体验全新的积分商城吧</p>
</div>
<span class="time">昨天</span>
</div>
<div class="message-item">
<span class="icon promotion">💰</span>
<div class="content">
<h4>优惠活动</h4>
<p>限时特惠有机酱油买一赠一不容错过</p>
</div>
<span class="time">3天前</span>
</div>
<div class="message-item">
<span class="icon user">💬</span>
<div class="content">
<h4>互动消息</h4>
<p>用户健康小王子赞了您的分享</p>
</div>
<span class="time">上周</span>
</div>
</main>
</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
const goBack = () => {
router.back();
};
</script>
<style scoped>
.message-view {
padding-top: 60px;
}
.top-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background-color: #fff;
border-bottom: 1px solid var(--color-border);
position: fixed;
top: 0;
left: 0;
right: 0;
max-width: 428px;
margin: 0 auto;
z-index: 10;
}
.back-btn {
background: none; border: none; font-size: 16px; cursor: pointer;
}
.title { font-size: 18px; font-weight: bold; }
.placeholder { width: 50px; } /* To balance the back button */
.message-list {
padding: 10px;
}
.message-item {
display: flex;
align-items: center;
padding: 15px;
border-bottom: 1px solid var(--color-border);
}
.icon {
font-size: 24px;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 15px;
}
.icon.system { background-color: #e0f2fe; }
.icon.promotion { background-color: #fef3c7; }
.icon.user { background-color: #e0e7ff; }
.content {
flex-grow: 1;
}
.content h4 {
font-size: 16px;
margin-bottom: 4px;
}
.content p {
font-size: 14px;
color: var(--color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.time {
font-size: 12px;
color: var(--color-text-secondary);
margin-left: 10px;
}
</style>