From 24f0b2abcd8f7ea73f01d583b58c69ba66119e12 Mon Sep 17 00:00:00 2001
From: lld <15027638633@163.com>
Date: Thu, 26 Mar 2026 22:45:06 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E5=85=AC=E5=91=8Aui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/news/index.vue                    |   3 +
 pages/news/subpages/sysNotice/index.vue | 233 ++++++++++++++++++++++++
 2 files changed, 236 insertions(+)
 create mode 100644 pages/news/subpages/sysNotice/index.vue

diff --git a/pages/news/index.vue b/pages/news/index.vue
index 7b953fa..3e73920 100644
--- a/pages/news/index.vue
+++ b/pages/news/index.vue
@@ -197,6 +197,9 @@ export default {
     handleItemClick(item) {
       this.$modal.showToast('敬请期待~')
       console.log('点击消息:', item.title)
+      if (item.title === '系统通知') {
+        this.$tab.navigateTo('/pages/news/subpages/sysNotice/index');
+      }
     },
     deleteItem(event, index) {
       this.$modal.showToast('敬请期待~')
diff --git a/pages/news/subpages/sysNotice/index.vue b/pages/news/subpages/sysNotice/index.vue
new file mode 100644
index 0000000..0542241
--- /dev/null
+++ b/pages/news/subpages/sysNotice/index.vue
@@ -0,0 +1,233 @@
+<template>
+  <view class="notice-page">
+
+    <!-- 未读/已读标签栏 -->
+    <view class="tab-bar">
+      <view
+          class="tab-item"
+          :class="{ active: currentTab === 0 }"
+          @click="currentTab = 0"
+      >
+        未读
+      </view>
+      <view
+          class="tab-item"
+          :class="{ active: currentTab === 1 }"
+          @click="currentTab = 1"
+      >
+        已读
+      </view>
+    </view>
+
+    <!-- 公告列表 -->
+    <scroll-view scroll-y class="notice-list">
+      <view
+          v-for="(item, index) in noticeList"
+          :key="index"
+          class="notice-item"
+      >
+        <!-- 状态点 + 标题 -->
+        <view class="notice-header">
+          <view class="status-dot" :style="{ borderColor: item.dotColor }">
+            <view class="dot-inner" :style="{ backgroundColor: item.dotColor }" v-if="item.dotInner"></view>
+          </view>
+          <text class="notice-title">{{ item.title }}</text>
+        </view>
+
+        <!-- 内容描述 -->
+        <view class="notice-content">
+          <text class="content-text">{{ item.content }}</text>
+        </view>
+
+        <!-- 底部：头像 + 作者 + 时间 -->
+        <view class="notice-footer">
+          <view class="author-info">
+            <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
+            <text class="author-name">{{ item.author }}</text>
+          </view>
+          <text class="notice-time">{{ item.time }}</text>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentTab: 0, // 0未读 1已读
+      noticeList: [
+        {
+          title: '2024年春节放假通知',
+          content: '各位同事：一年一度的春节又到啦，根据国家法定节假日规定，2024年春节放假安排如下：02月01日—...',
+          author: '那只猪-图鸟人事部',
+          time: '2024-01-26 10:12',
+          dotColor: '#e53935',
+          dotInner: true, // 实心红点
+          avatar: '/static/avatar1.png' // 替换为你的头像路径
+        },
+        {
+          title: '关于年前请假审批流程通知',
+          content: '各位同事：这里是一大堆瞎逼逼的描述，为了凑字数，想不出来什么文案了',
+          author: '你的名字',
+          time: '2024-01-20 14:02',
+          dotColor: '#007bff',
+          dotInner: false, // 空心蓝点
+          avatar: '/static/avatar2.png'
+        },
+        {
+          title: '图鸟OA系统更新通知',
+          content: '各位同事：这里是一大堆瞎逼逼的描述，为了凑字数，想不出来什么文案了',
+          author: '不许凶我吖',
+          time: '2024-01-12 09:56',
+          dotColor: '#4caf50',
+          dotInner: true, // 实心绿点
+          avatar: '/static/avatar3.png'
+        },
+        {
+          title: '凑数的文案，凑够一行超出隐藏，不喜勿喷',
+          content: '各位同事：这里是一大堆瞎逼逼的描述，为了凑字数，想不出来什么文案了',
+          author: '图鸟西西',
+          time: '2024-01-06 17:59',
+          dotColor: '#007bff',
+          dotInner: false, // 空心蓝点
+          avatar: '/static/avatar4.png'
+        },
+        {
+          title: '2023年12月考勤统计核对表',
+          content: '各位同事：这里是一大堆瞎逼逼的描述，为了凑字数，想不出来什么文案了',
+          author: '',
+          time: '',
+          dotColor: '#4caf50',
+          dotInner: true, // 实心绿点
+          avatar: ''
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 页面容器 */
+.notice-page {
+  height: 100vh;
+  background-color: #f8f8f8;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 标签栏 */
+.tab-bar {
+  display: flex;
+  height: 80rpx;
+  padding: 0 20rpx;
+  background-color: #fff;
+  border-bottom: 1rpx solid #eee;
+}
+.tab-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  color: #999;
+  position: relative;
+}
+.tab-item.active {
+  color: #007bff;
+  font-weight: 500;
+}
+.tab-item.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40rpx;
+  height: 4rpx;
+  background-color: #007bff;
+  border-radius: 2rpx;
+}
+
+/* 公告列表 */
+.notice-list {
+  flex: 1;
+  padding: 20rpx;
+}
+.notice-item {
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 24rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
+}
+
+/* 公告头部：状态点 + 标题 */
+.notice-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+.status-dot {
+  width: 24rpx;
+  height: 24rpx;
+  border: 2rpx solid;
+  border-radius: 50%;
+  margin-right: 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dot-inner {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+}
+.notice-title {
+  font-size: 32rpx;
+  color: #333;
+  font-weight: 500;
+}
+
+/* 公告内容 */
+.notice-content {
+  margin-bottom: 20rpx;
+}
+.content-text {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.5;
+  /* 超出两行隐藏（可按需调整） */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* 公告底部：头像 + 作者 + 时间 */
+.notice-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.author-info {
+  display: flex;
+  align-items: center;
+}
+.avatar {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  margin-right: 12rpx;
+}
+.author-name {
+  font-size: 26rpx;
+  color: #999;
+}
+.notice-time {
+  font-size: 26rpx;
+  color: #999;
+}
+</style>
\ No newline at end of file