From 34f5733bc1f126c572580fa849b9403dfcddd84b Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期二, 03 二月 2026 10:29:41 +0800
Subject: [PATCH] 通知列表

---
 src/router/main/index.js                 |    4 
 src/assets/images/home/examTicket.png    |    0 
 src/views/main/appraisalPlan/index.vue   |  245 ++++++++++++++++++++++++
 src/router/main/appraisalPlan/index.js   |    9 
 src/views/login/index.vue                |   24 ++
 src/assets/styles/global.css             |    6 
 src/views/main/home/index.vue            |   31 ++
 src/views/main/notice/list.vue           |  198 +++++++++++++++++++
 src/views/main/components/MyFooter.vue   |    4 
 src/assets/images/home/appraisalPlan.png |    0 
 /dev/null                                |    0 
 src/views/main/components/MyHeader.vue   |   31 ++
 src/views/main/components/ReturnBtn.vue  |   18 +
 src/assets/images/footerBg.png           |    0 
 src/views/main/notice/detail.vue         |    2 
 src/assets/images/contentBg.png          |    0 
 src/router/main/notice/index.js          |    2 
 src/assets/images/home/certificate.png   |    0 
 src/assets/images/home/score.png         |    0 
 19 files changed, 546 insertions(+), 28 deletions(-)

diff --git a/src/assets/images/contentBg.png b/src/assets/images/contentBg.png
new file mode 100644
index 0000000..4b856c4
--- /dev/null
+++ b/src/assets/images/contentBg.png
Binary files differ
diff --git a/src/assets/images/footerBg.png b/src/assets/images/footerBg.png
new file mode 100644
index 0000000..558f1a2
--- /dev/null
+++ b/src/assets/images/footerBg.png
Binary files differ
diff --git a/src/assets/images/home/appraisalPlan.png b/src/assets/images/home/appraisalPlan.png
index 74fdce9..dbfabb9 100644
--- a/src/assets/images/home/appraisalPlan.png
+++ b/src/assets/images/home/appraisalPlan.png
Binary files differ
diff --git a/src/assets/images/home/certificate.png b/src/assets/images/home/certificate.png
index 8da26fe..a504736 100644
--- a/src/assets/images/home/certificate.png
+++ b/src/assets/images/home/certificate.png
Binary files differ
diff --git a/src/assets/images/home/examTicket.png b/src/assets/images/home/examTicket.png
index d6e2614..a156be6 100644
--- a/src/assets/images/home/examTicket.png
+++ b/src/assets/images/home/examTicket.png
Binary files differ
diff --git a/src/assets/images/home/score.png b/src/assets/images/home/score.png
index ee83330..3114cc1 100644
--- a/src/assets/images/home/score.png
+++ b/src/assets/images/home/score.png
Binary files differ
diff --git a/src/assets/images/test.png b/src/assets/images/test.png
deleted file mode 100644
index 3f702eb..0000000
--- a/src/assets/images/test.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/styles/global.css b/src/assets/styles/global.css
index ab72f41..b59cace 100644
--- a/src/assets/styles/global.css
+++ b/src/assets/styles/global.css
@@ -273,4 +273,10 @@
 
 .el-card__body {
   padding-bottom: 0;
+}
+
+.text-title {
+  color: white;
+  font-size: 32px;
+  font-weight: bold;
 }
\ No newline at end of file
diff --git a/src/router/main/appraisalPlan/index.js b/src/router/main/appraisalPlan/index.js
new file mode 100644
index 0000000..ea8d59e
--- /dev/null
+++ b/src/router/main/appraisalPlan/index.js
@@ -0,0 +1,9 @@
+const appraisalPlan = [
+  {
+    path: 'appraisalPlan',
+    name: '璇勪环璁″垝',
+    component: () => import('@/views/main/appraisalPlan/index.vue'),
+  },
+]
+
+export default appraisalPlan
\ No newline at end of file
diff --git a/src/router/main/index.js b/src/router/main/index.js
index a990c71..448bc1a 100644
--- a/src/router/main/index.js
+++ b/src/router/main/index.js
@@ -1,9 +1,11 @@
 import home from '@/router/main/home/index.js'
 import notice from '@/router/main/notice/index.js'
+import appraisalPlan from '@/router/main/appraisalPlan'
 
 const mainRouter = [
   ...home,
-  ...notice
+  ...notice,
+  ...appraisalPlan
 ]
 const router = [
   {
diff --git a/src/router/main/notice/index.js b/src/router/main/notice/index.js
index 08ddb94..f8777d2 100644
--- a/src/router/main/notice/index.js
+++ b/src/router/main/notice/index.js
@@ -5,7 +5,7 @@
     component: () => import('@/views/main/notice/list.vue'),
   },
   {
-    path: 'noticeDetail',
+    path: 'noticeDetail/:id',
     name: '鍏憡璇︽儏',
     component: () => import('@/views/main/notice/detail.vue'),
   },
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index aad58df..edaec00 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -36,7 +36,7 @@
           <el-checkbox v-model="form.agreement" label="鍚屾剰xxx鏈嶅姟鍗忚" size="large" />
         </el-form-item>
 
-        <el-button class="mt-1" @click="submitLogin()" type="primary" size="large" style="width: 100%;">
+        <el-button class="mt-1" @click="submitLogin()" :loading="loginLoading" type="primary" size="large" style="width: 100%;">
           <el-text class="text-lg text-white">鐧诲綍</el-text>
         </el-button>
       </el-form>
@@ -101,12 +101,14 @@
 
 <script>
 import { useLoginStore } from '@/stores/login.js'
+import { useSessionStore } from '@/stores/session.js'
 import { storeToRefs } from 'pinia';
 export default {
   components: {},
   setup() {
     const { loginDialogVisible } = storeToRefs(useLoginStore())
-    return { loginDialogVisible }
+    const { setUserInfo } = useSessionStore()
+    return { loginDialogVisible, setUserInfo }
   },
   data() {
     return {
@@ -129,13 +131,14 @@
       countdown: 180,
       countdownInterval: null,
       sendCodeLoading: false,
+      loginLoading: false
     }
   },
   computed: {
     title() {
       let obj = {
         register: '娉� 鍐�',
-        mobile: '鎵� 鏈� 鍙风櫥 褰�',
+        mobile: '鎵� 鏈� 鍙� 鐧� 褰�',
         qrCode: '寰� 淇� 鎵� 鐮� 鐧� 褰�'
       }
       return obj[this.loginType]
@@ -179,10 +182,25 @@
     async submitLogin() {
       try {
         await this.$refs.accountForm.validate()
+        this.loginLoading = true
+        setTimeout(() => {
+          localStorage.setItem('accessToken', '123456')
+          this.getUserInfo()
+          this.$message.success('鐧诲綍鎴愬姛')
+          this.loginDialogVisible = false
+          this.loginLoading = false
+
+        }, 1000)
       } catch (error) {
         console.log()
       }
     },
+    getUserInfo() {
+      this.setUserInfo({
+        id: '123456',
+        username: '榛勫┓濠�',
+      })
+    },
     async submitRegister() {
       try {
         await this.$refs.registerForm.validate()
diff --git a/src/views/main/appraisalPlan/index.vue b/src/views/main/appraisalPlan/index.vue
new file mode 100644
index 0000000..6624bc0
--- /dev/null
+++ b/src/views/main/appraisalPlan/index.vue
@@ -0,0 +1,245 @@
+<template>
+  <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-form-item label="绛夌骇锛�" class="mb-6">
+        <el-radio-group  v-model="filter.level">
+          <el-radio
+            v-for="(item,index) in levelItems"
+            :key="`radio${index}`"
+            :value="item.value"
+          >
+            {{ item.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="鑰冪偣锛�" 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-form-item>
+
+      <el-table 
+        :data="filterList" 
+        table-layout="auto" 
+        stripe
+        empty-text="鏆傛棤璇勪环璁″垝淇℃伅~"
+        style="width: 100%"
+      >
+        <el-table-column
+          v-for="(item,index) in headers" :key="`table${index}`" 
+          :prop="item.value" 
+          :label="item.label" 
+          :width="item.width"
+          :align="item.align || 'start'"
+          :sortable="item.sortable"
+        >
+          <template #signupTime="{ row }">
+            {{ row }}
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <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>
+    </div>
+  </div>
+  
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      page: 1,
+      size: 5,
+      filter: {
+        pageNo: 1,
+        pageSize: 5,
+        keyword: '',
+        level: '',
+        area: '',
+      },
+      areaItems: [
+        { label: '骞夸笢鐪�', value: '' },
+        { label: '骞垮窞甯�', value: '骞垮窞甯�' },
+        { label: '娣卞湷甯�', value: '娣卞湷甯�' }
+      ],
+      levelItems: [
+        { label: '鍏ㄩ儴', value: '' },
+        { label: '浜旂骇/鍒濈骇宸�', value: '5' },
+        { label: '鍥涚骇/鍒濈骇宸�', value: '4' },
+        { label: '涓夌骇/鍒濈骇宸�', value: '3' },
+        { label: '浜岀骇/鍒濈骇宸�', value: '2' },
+        { label: '涓�绾�/鍒濈骇宸�', value: '1' },
+      ],
+      noticeList: [],
+      headers: [
+        { label: '鑱屼笟锛堝伐绉嶏級鍚嶇О', value: 'occupationJob' },
+        { label: '绛夌骇', value: 'level' },
+        { label: '鑰冪偣', value: 'examAddress' },
+        { label: '璇勪环璁″垝鍚嶇О', value: 'planName', width: 150 },
+        { label: '鎶ュ悕鏃堕棿', value: 'signupTime' },
+        { label: '璇勪环鏈烘瀯淇℃伅', value: 'orgInfo' },
+        { label: '鎿嶄綔', value: 'operation', align: 'center' },
+      ],
+      planList: []
+    }
+  },
+  computed: {
+    filterList() {
+      return this.planList.slice((this.filter.pageNo-1)*this.filter.pageSize, this.filter.pageNo*this.filter.pageSize)
+    }
+  },
+  created() {
+    this.getPlanList()
+  },
+  methods: {
+    getPlanList() {
+      setTimeout(() => {
+        this.planList = 
+        [
+          {
+            id: '1',
+            occupationJob: "浜掕仈缃戣惀閿�甯堬紙瑙嗛鍒涙帹鍛橈級",
+            level: '涓夌骇',
+            examAddress: '涓北甯�',
+            planName: '2025骞翠腑灞卞競鎶�甯堝闄簰鑱旂綉钀ラ攢甯堣棰戝簥鑵垮厓楂樼骇宸ョ敵鎶ヨ鍒掞紙璁″垝鍙�:2511002630锛�',
+            startTime: '2025-11-19 09:00',
+            endTime: '2025-12-22 18:00',
+            orgInfo: {
+              name: '涓北甯傛妧甯堝闄�',
+              concatName: '鍚�*瀹�',
+              mobile: '13424571164'
+            }
+          },
+          {
+            id: '2',
+            occupationJob: "鐢靛伐",
+            level: '涓夌骇',
+            examAddress: '涓北甯�',
+            planName: '2025骞翠腑灞卞競鎶�甯堝闄簰鑱旂綉钀ラ攢甯堣棰戝簥鑵垮厓楂樼骇宸ョ敵鎶ヨ鍒掞紙璁″垝鍙�:2511002630锛�',
+            startTime: '2025-11-19 09:00',
+            endTime: '2025-12-22 18:00',
+            orgInfo: {
+              name: '涓北甯傛妧甯堝闄�',
+              concatName: '鍚�*瀹�',
+              mobile: '13424571164'
+            }
+          },
+          {
+            id: '3',
+            occupationJob: "鐢靛伐",
+            level: '涓夌骇',
+            examAddress: '涓北甯�',
+            planName: '2025骞翠腑灞卞競鎶�甯堝闄簰鑱旂綉钀ラ攢甯堣棰戝簥鑵垮厓楂樼骇宸ョ敵鎶ヨ鍒掞紙璁″垝鍙�:2511002630锛�',
+            startTime: '2025-11-19 09:00',
+            endTime: '2025-12-22 18:00',
+            orgInfo: {
+              name: '涓北甯傛妧甯堝闄�',
+              concatName: '鍚�*瀹�',
+              mobile: '13424571164'
+            }
+          },
+          {
+            id: '4',
+            occupationJob: "鐢靛伐",
+            level: '涓夌骇',
+            examAddress: '涓北甯�',
+            planName: '2025骞翠腑灞卞競鎶�甯堝闄簰鑱旂綉钀ラ攢甯堣棰戝簥鑵垮厓楂樼骇宸ョ敵鎶ヨ鍒掞紙璁″垝鍙�:2511002630锛�',
+            startTime: '2025-11-19 09:00',
+            endTime: '2025-12-22 18:00',
+            orgInfo: {
+              name: '涓北甯傛妧甯堝闄�',
+              concatName: '鍚�*瀹�',
+              mobile: '13424571164'
+            }
+          },
+          {
+            id: '5',
+            occupationJob: "鐢靛伐",
+            level: '涓夌骇',
+            examAddress: '涓北甯�',
+            planName: '2025骞翠腑灞卞競鎶�甯堝闄簰鑱旂綉钀ラ攢甯堣棰戝簥鑵垮厓楂樼骇宸ョ敵鎶ヨ鍒掞紙璁″垝鍙�:2511002630锛�',
+            startTime: '2025-11-19 09:00',
+            endTime: '2025-12-22 18:00',
+            orgInfo: {
+              name: '涓北甯傛妧甯堝闄�',
+              concatName: '鍚�*瀹�',
+              mobile: '13424571164'
+            }
+          },
+          {
+            id: '6',
+            occupationJob: "鐢靛伐",
+            level: '涓夌骇',
+            examAddress: '涓北甯�',
+            planName: '2025骞翠腑灞卞競鎶�甯堝闄簰鑱旂綉钀ラ攢甯堣棰戝簥鑵垮厓楂樼骇宸ョ敵鎶ヨ鍒掞紙璁″垝鍙�:2511002630锛�',
+            startTime: '2025-11-19 09:00',
+            endTime: '2025-12-22 18:00',
+            orgInfo: {
+              name: '涓北甯傛妧甯堝闄�',
+              concatName: '鍚�*瀹�',
+              mobile: '13424571164'
+            }
+          },
+        ]
+        this.totalCount = 6
+      }, 400)
+    },
+  }
+}
+
+</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
diff --git a/src/views/main/components/MyFooter.vue b/src/views/main/components/MyFooter.vue
index 2bce5f1..5c60bf3 100644
--- a/src/views/main/components/MyFooter.vue
+++ b/src/views/main/components/MyFooter.vue
@@ -66,7 +66,9 @@
   align-items: center;
   background-color: #007AFF;
   margin-top: 30px;
-  /* background-image: url('@/assets/images/test.png'); */
+  background-image: url('@/assets/images/footerBg.png');
+  background-repeat: no-repeat, no-repeat, repeat; /* 鍒嗗埆璁剧疆 */
+  background-size: cover;
 }
 :deep(.el-select__wrapper) {
   min-height: 44px;
diff --git a/src/views/main/components/MyHeader.vue b/src/views/main/components/MyHeader.vue
index 16ff088..d3c54d0 100644
--- a/src/views/main/components/MyHeader.vue
+++ b/src/views/main/components/MyHeader.vue
@@ -2,7 +2,7 @@
   <div class="custom-header">
     <el-row class="content" justify="space-between">
       <el-text class="text-white text-2xl font-bold">骞夸笢鐪佹妧鑳戒汉鎵嶈瘎浠疯�冨姟绠$悊骞冲彴</el-text>
-      <el-dropdown v-if="!userInfo.id" placement="bottom">
+      <el-dropdown v-if="userInfo.id" placement="bottom">
         <el-row  align="middle">
           <Icon icon="fa:user-circle" width="22" height="22" class="mr-2"  style="color: #fff" />
           <el-text class="text-white cursor-p text-lg font-bold">榛勫┓濠�</el-text>
@@ -11,7 +11,7 @@
         <template #dropdown>
           <el-dropdown-menu>
             <el-dropdown-item>涓汉涓績</el-dropdown-item>
-            <el-dropdown-item>閫�鍑虹櫥褰�</el-dropdown-item>
+            <el-dropdown-item @click="logout()">閫�鍑虹櫥褰�</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -30,17 +30,42 @@
 export default {
   setup() {
     const { loginDialogVisible } = storeToRefs(useLoginStore())
+    const { setUserInfo } = useSessionStore()
     const { userInfo } = storeToRefs(useSessionStore())
-    return { loginDialogVisible, userInfo }
+    return { loginDialogVisible, userInfo, setUserInfo }
   },
   data() {
     return {
       
     }
   },
+  created() {
+    const token =  localStorage.getItem('accessToken')
+    if (token) {
+      this.getUserInfo()
+    }
+  },
   methods: {
     login() {
       this.loginDialogVisible = true
+    },
+    getUserInfo() {
+      setTimeout(() => {
+        this.setUserInfo({
+          id: '12345',
+          username: '榛勫┓濠�'
+        })
+      }, 1000)
+    },
+    logout() {
+      this.$messageBox.confirm('纭畾瑕侀��鍑虹櫥褰曞悧', '鎻愮ず', 
+      { confirmButtonText: '纭畾', cancelButtonText: '鍙栨秷', type: 'error' }).then(res => {
+        if (res == 'confirm') {
+          localStorage.removeItem('accessToken')
+          this.setUserInfo({})
+          this.$message.success('閫�鍑虹櫥褰�')
+        }
+      })
     }
   }
 }
diff --git a/src/views/main/components/ReturnBtn.vue b/src/views/main/components/ReturnBtn.vue
index e20ef6e..ba3526b 100644
--- a/src/views/main/components/ReturnBtn.vue
+++ b/src/views/main/components/ReturnBtn.vue
@@ -1,16 +1,20 @@
 <template>
-  <el-button text class="pl-0 pr-2 my-1" @click="goBack">
-    <el-row align="middle">
-      <Icon icon="mingcute:home-6-line" width="16" height="16" style="color: var(--el-color-primary)" />
-      <el-text class="ml-1" style="color: var(--el-color-primary);">杩斿洖棣栭〉</el-text>
-    </el-row>
-  </el-button>
+  <el-row align="middle" class="pl-0 pr-2 py-2 cursor-p" @click="goBack">
+    <Icon icon="mingcute:home-6-line" width="16" height="16" :style="{color: this.color}" />
+    <el-text class="ml-1" :style="{color: this.color}">杩斿洖棣栭〉</el-text>
+  </el-row>
 </template>
 <script>
 export default {
+  props: {
+    color: {
+      type: String,
+      default: 'white'
+    }
+  },
   methods: {
     goBack() {
-      this.$router.replace('/main/home')
+      this.$router.go('-1')
     }
   }
 }
diff --git a/src/views/main/home/index.vue b/src/views/main/home/index.vue
index 355c457..850d37d 100644
--- a/src/views/main/home/index.vue
+++ b/src/views/main/home/index.vue
@@ -7,16 +7,15 @@
     </el-image>
     <div class="main-content">
       <el-row justify="space-between">
-        <el-card 
+        <div 
           v-for="(item,index) in operationList"
           :key="`operation${index}`"
-          shadow="hover"
-          style="max-width: 270px;"
-          class="cursor-p my-4"
+          class="cursor-p my-4 p-0"
+          @click="goOperationPage(item)"
         >
-          <el-image :src="$getImageUrl(`/home/${item.value}.png`)">
+          <el-image style="max-width: 270px;" :src="$getImageUrl(`/home/${item.value}.png`)">
           </el-image>
-        </el-card>
+        </div>
       </el-row>
 
       <el-row justify="space-between" class="py-2" style="border-bottom: 2px solid var(--el-color-primary);">
@@ -24,7 +23,7 @@
           <span style="color: var(--el-color-primary);">閫氱煡</span>
           <span>鍏憡</span>
         </el-text>
-        <el-button text type="primary">鏌ョ湅鍏ㄩ儴>></el-button>
+        <el-button text type="primary" @click="goNoticeList()">鏌ョ湅鍏ㄩ儴>></el-button>
       </el-row>
       
       <el-card 
@@ -42,7 +41,7 @@
             </el-row>
           </div>
           <div>
-            <el-button text type="primary">鐐瑰嚮鏌ョ湅璇︽儏>></el-button>
+            <el-button text type="primary" @click="goNoticeDetail(notice.id)">鐐瑰嚮鏌ョ湅璇︽儏>></el-button>
           </div>
         </el-row>
       </el-card>
@@ -64,7 +63,7 @@
         { name: "鎴愮哗鏌ヨ", value: 'score' },
         { name: "璇佷功鏌ヨ", value: 'certificate' },
       ],
-      noticeList: []
+      noticeList: [],
     }
   },
   created() {
@@ -76,32 +75,46 @@
         this.noticeList = 
         [
           {
+            id: '1',
             title: "鍏充簬鍏竷2024骞村箍涓滅渷浜ф暀璇勬妧鑳界敓鎬侀摼閾句富鍩硅偛鍗曚綅鍏ラ�夊悕鍗曠殑閫氱煡",
             publishTime: '2024-07-12 14:24:33',
             area: '骞夸笢鐪�',
           },
           {
+            id: '2',
             title: "鍏充簬鍏竷2024骞村箍涓滅渷浜ф暀璇勬妧鑳界敓鎬侀摼閾句富鍩硅偛鍗曚綅鍏ラ�夊悕鍗曠殑閫氱煡",
             publishTime: '2024-07-12 14:24:33',
             area: '骞夸笢鐪�',
           },
           {
+            id: '3',
             title: "鍏充簬鍏竷2024骞村箍涓滅渷浜ф暀璇勬妧鑳界敓鎬侀摼閾句富鍩硅偛鍗曚綅鍏ラ�夊悕鍗曠殑閫氱煡",
             publishTime: '2024-07-12 14:24:33',
             area: '骞夸笢鐪�',
           },
           {
+            id: '4',
             title: "鍏充簬鍏竷2024骞村箍涓滅渷浜ф暀璇勬妧鑳界敓鎬侀摼閾句富鍩硅偛鍗曚綅鍏ラ�夊悕鍗曠殑閫氱煡",
             publishTime: '2024-07-12 14:24:33',
             area: '骞夸笢鐪�',
           },
           {
+            id: '5',
             title: "鍏充簬鍏竷2024骞村箍涓滅渷浜ф暀璇勬妧鑳界敓鎬侀摼閾句富鍩硅偛鍗曚綅鍏ラ�夊悕鍗曠殑閫氱煡",
             publishTime: '2024-07-12 14:24:33',
             area: '骞夸笢鐪�',
           },
         ]
       }, 400)
+    },
+    goNoticeDetail(id) {
+      this.$router.push(`/main/noticeDetail/${id}`)
+    },
+    goNoticeList() {
+      this.$router.push('/main/noticeList')
+    },
+    goOperationPage(item) {
+      this.$router.push(`/main/${item.value}`)
     }
   }
 }
diff --git a/src/views/main/notice/detail.vue b/src/views/main/notice/detail.vue
index 283d900..69b5e83 100644
--- a/src/views/main/notice/detail.vue
+++ b/src/views/main/notice/detail.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="main-content">
-    <ReturnBtn></ReturnBtn>
+    <ReturnBtn color="var(--el-color-primary)"></ReturnBtn>
 
     <el-card shadow="never" class="p-6">
       <!-- 鏍囬 -->
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