From 34f5733bc1f126c572580fa849b9403dfcddd84b Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期二, 03 二月 2026 10:29:41 +0800
Subject: [PATCH] 通知列表
---
src/views/main/notice/list.vue | 198 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 196 insertions(+), 2 deletions(-)
diff --git a/src/views/main/notice/list.vue b/src/views/main/notice/list.vue
index c3bee06..2c1f9d9 100644
--- a/src/views/main/notice/list.vue
+++ b/src/views/main/notice/list.vue
@@ -1,3 +1,197 @@
<template>
- <div class="main-content">鍒楄〃</div>
-</template>
\ No newline at end of file
+ <div>
+ <div class="content-bg">
+ <div class="main-content">
+ <ReturnBtn></ReturnBtn>
+
+ <el-row class="mt-6">
+ <el-text class="text-title">閫氱煡鍏憡</el-text>
+ </el-row>
+
+ <el-row class="mt-5">
+ <el-input
+ v-model="filter.keyword"
+ style="width: 739px;height: 70px;"
+ placeholder="杈撳叆鍏抽敭瀛楁悳绱�"
+ >
+ <template #append>
+ <el-button class="append-btn" type="primary">
+ <el-text class="text-white text-xl">鎼� 绱�</el-text>
+ </el-button>
+ </template>
+ </el-input>
+ </el-row>
+ </div>
+ </div>
+ <div class="main-content py-4">
+ <el-row class="mb-6">
+ <el-select v-model="filter.area" placeholder="绛涢�夋墍灞炲湴鍖�" style="width: 240px">
+ <el-option
+ v-for="item in areaItems"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-row>
+
+ <el-card
+ v-for="(notice,index) in filterNoticeList"
+ :key="`notice${index}`"
+ class="mt-3 p-4 py-3"
+ shadow="never"
+ >
+ <el-row justify="space-between" align="middle">
+ <div>
+ <el-row><el-text class="text-lg text-black font-medium">{{ notice.title }}</el-text></el-row>
+ <el-row class="mt-2">
+ <el-text style="margin-right: 40px;">鍙戝竷鏃堕棿锛歿{ notice.publishTime }}</el-text>
+ <el-text>鎵�灞炲湴鍖猴細{{ notice.area }}</el-text>
+ </el-row>
+ </div>
+ <div>
+ <el-button text type="primary" @click="goNoticeDetail(notice.id)">鐐瑰嚮鏌ョ湅璇︽儏>></el-button>
+ </div>
+ </el-row>
+ </el-card>
+
+ <el-row justify="end" class="my-7" v-if="noticeList.length > 0">
+ <el-text class="mr-4 text-note">鍏眥{ totalCount }}椤规暟鎹�</el-text>
+ <el-pagination
+ v-model:current-page="filter.pageNo"
+ v-model:page-size="filter.pageSize"
+ background
+ layout="prev, pager, next"
+ :total="totalCount"
+ />
+ </el-row>
+
+ <el-row class="mt-5" v-if="noticeList.length == 0" justify="center">
+ <el-text>鏆傛棤鍏憡~</el-text>
+ </el-row>
+ </div>
+ </div>
+
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ page: 1,
+ size: 5,
+ filter: {
+ pageNo: 1,
+ pageSize: 5,
+ keyword: '',
+ area: '',
+ },
+ areaItems: [
+ { label: '骞夸笢鐪�', value: '' },
+ { label: '骞垮窞甯�', value: '骞垮窞甯�' },
+ { label: '娣卞湷甯�', value: '娣卞湷甯�' }
+ ],
+ noticeList: [],
+ }
+ },
+ computed: {
+ filterNoticeList() {
+ return this.noticeList.slice((this.filter.pageNo-1)*this.filter.pageSize, this.filter.pageNo*this.filter.pageSize)
+ }
+ },
+ created() {
+ this.getNoticeList()
+ },
+ methods: {
+ getNoticeList() {
+ setTimeout(() => {
+ this.noticeList =
+ [
+ {
+ id: '1',
+ title: "鍏充簬鍏竷2024骞村箍涓滅渷浜ф暀璇勬妧鑳界敓鎬侀摼閾句富鍩硅偛鍗曚綅鍏ラ�夊悕鍗曠殑閫氱煡1",
+ publishTime: '2024-07-12 14:24:33',
+ area: '骞夸笢鐪�',
+ },
+ {
+ id: '2',
+ title: "鍏充簬鍏竷2024骞村箍涓滅渷浜ф暀璇勬妧鑳界敓鎬侀摼閾句富鍩硅偛鍗曚綅鍏ラ�夊悕鍗曠殑閫氱煡2",
+ publishTime: '2024-07-12 14:24:33',
+ area: '骞夸笢鐪�',
+ },
+ {
+ id: '3',
+ title: "鍏充簬鍏竷2024骞村箍涓滅渷浜ф暀璇勬妧鑳界敓鎬侀摼閾句富鍩硅偛鍗曚綅鍏ラ�夊悕鍗曠殑閫氱煡3",
+ publishTime: '2024-07-12 14:24:33',
+ area: '骞夸笢鐪�',
+ },
+ {
+ id: '4',
+ title: "鍏充簬鍏竷2024骞村箍涓滅渷浜ф暀璇勬妧鑳界敓鎬侀摼閾句富鍩硅偛鍗曚綅鍏ラ�夊悕鍗曠殑閫氱煡4",
+ publishTime: '2024-07-12 14:24:33',
+ area: '骞夸笢鐪�',
+ },
+ {
+ id: '5',
+ title: "鍏充簬鍏竷2024骞村箍涓滅渷浜ф暀璇勬妧鑳界敓鎬侀摼閾句富鍩硅偛鍗曚綅鍏ラ�夊悕鍗曠殑閫氱煡5",
+ publishTime: '2024-07-12 14:24:33',
+ area: '骞夸笢鐪�',
+ },
+ {
+ id: '6',
+ title: "鍏充簬鍏竷2024骞村箍涓滅渷浜ф暀璇勬妧鑳界敓鎬侀摼閾句富鍩硅偛鍗曚綅鍏ラ�夊悕鍗曠殑閫氱煡6",
+ publishTime: '2024-07-12 14:24:33',
+ area: '骞夸笢鐪�',
+ },
+ {
+ id: '7',
+ title: "鍏充簬鍏竷2024骞村箍涓滅渷浜ф暀璇勬妧鑳界敓鎬侀摼閾句富鍩硅偛鍗曚綅鍏ラ�夊悕鍗曠殑閫氱煡7",
+ publishTime: '2024-07-12 14:24:33',
+ area: '骞夸笢鐪�',
+ },
+ {
+ id: '8',
+ title: "鍏充簬鍏竷2024骞村箍涓滅渷浜ф暀璇勬妧鑳界敓鎬侀摼閾句富鍩硅偛鍗曚綅鍏ラ�夊悕鍗曠殑閫氱煡8",
+ publishTime: '2024-07-12 14:24:33',
+ area: '骞夸笢鐪�',
+ },
+ {
+ id: '9',
+ title: "鍏充簬鍏竷2024骞村箍涓滅渷浜ф暀璇勬妧鑳界敓鎬侀摼閾句富鍩硅偛鍗曚綅鍏ラ�夊悕鍗曠殑閫氱煡9",
+ publishTime: '2024-07-12 14:24:33',
+ area: '骞夸笢鐪�',
+ },
+ {
+ id: '10',
+ title: "鍏充簬鍏竷2024骞村箍涓滅渷浜ф暀璇勬妧鑳界敓鎬侀摼閾句富鍩硅偛鍗曚綅鍏ラ�夊悕鍗曠殑閫氱煡10",
+ publishTime: '2024-07-12 14:24:33',
+ area: '骞夸笢鐪�',
+ },
+ ]
+ this.totalCount = 10
+ }, 400)
+ },
+ goNoticeDetail(id) {
+ this.$router.push(`/main/noticeDetail/${id}`)
+ },
+ }
+}
+
+</script>
+<style scoped>
+.content-bg {
+ height: 240px;
+ background-image: url('@/assets/images/contentBg.png');
+ background-repeat: no-repeat, no-repeat, repeat; /* 鍒嗗埆璁剧疆 */
+ background-size: cover;
+}
+:deep(.el-input__inner) {
+ padding-left: 10px;
+ font-size: 18px;
+}
+.append-btn {
+ width: 114px;
+ height: 100%;
+ background-color: var(--el-color-primary) !important;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0