fix:css&&select

student-vol/mock/serviceList.json

@@ -5,21 +5,12 @@
     "pageSize": 10,
     "pageCount": 1,
     "list": [
-      {
-        "id": 4,
-        "pic": "./imgs/actImg.jpeg",
-        "content": "666",
-        "publisher": "未知来源",
-        "time": 1766717931972,
-        "status": 1,
-        "hour": 2
-      },
       {
         "id": 1,
         "pic": "./imgs/actImg.jpeg",
         "content": "参与运动会志愿服务，协助现场秩序维护",
         "publisher": "福州大学至诚学院",
-        "time": 1671494400000,
+        "time": 1703011200000,
         "status": 1
       },
       {
@@ -27,7 +18,7 @@
         "pic": "./imgs/actImg.jpeg",
         "content": "图书馆整理图书志愿服务",
         "publisher": "福州市图书馆",
-        "time": 1670284800000,
+        "time": 1701801600000,
         "status": 0
       },
       {
@@ -35,8 +26,26 @@
         "pic": "./imgs/actImg.jpeg",
         "content": "社区敬老院陪伴老人服务",
         "publisher": "鼓楼区养老院",
-        "time": 1672012800000,
+        "time": 1703529600000,
         "status": 2
+      },
+      {
+        "id": 4,
+        "pic": "./imgs/actImg.jpeg",
+        "content": "2024年志愿服务",
+        "publisher": "未知来源",
+        "time": 1735689600000,
+        "status": 1,
+        "hour": 3
+      },
+      {
+        "id": 5,
+        "pic": "./imgs/actImg.jpeg",
+        "content": "2025年志愿服务",
+        "publisher": "福州大学至诚学院",
+        "time": 1737244800000,
+        "status": 1,
+        "hour": 4
       }
     ]
   }

student-vol/src/components/ServiceRecords/Overview.vue

@@ -64,7 +64,7 @@ export default {
   list-style: none;
   border-radius: 16px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
-  margin: -20px 12px 15px;
+  margin: 10px 12px 15px;
   position: relative;
   z-index: 10;
 }

student-vol/src/components/ServiceRecords/User.vue

@@ -72,21 +72,30 @@ export default {
   align-items: center;
   padding: 0;
   margin: 0;
-  background: transparent;
+  background: transparent !important;
 }
 
 .user {
   display: flex;
   align-items: center;
   gap: 10px;
+  background: transparent !important;
+}
+
+.user > div,
+.user > div > p,
+.user > div > span {
+  background: transparent !important;
+}
+
+:deep(.van-button) {
+  background: transparent !important;
 }
 
 .user-avatar {
   width: 65px;
   height: 65px;
   border-radius: 50%;
-  border: 3px solid rgba(255, 255, 255, 0.8);
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
   object-fit: cover;
 }
 
@@ -95,16 +104,15 @@ export default {
   font-weight: 600;
   margin-bottom: 6px;
   color: #fff;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .user-score {
-  background: rgba(255, 255, 255, 0.25);
   padding: 4px 12px;
   border-radius: 20px;
   font-size: 13px;
   color: #fff;
   font-weight: 500;
-  backdrop-filter: blur(5px);
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 </style>

student-vol/src/views/ServiceRecords.vue

@@ -51,8 +51,8 @@ export default {
         const { error, data = {} } = response.data;
         if (error === 0) {
           const list = data.list || [];
-          that.dateList = list;
+          that.dateList = [{ value: 'all', text: '全部' }, ...list];
-          that.year = list[list.length - 1];
+          that.year = that.dateList[0];
         }
       });
     },
@@ -61,8 +61,10 @@ export default {
       const payload = {
         currentPage,
         pageSize: 10,
-        year: this.year.value,
       };
+      if (this.year.value !== 'all') {
+        payload.year = this.year.value;
+      }
 
       this.loading = true;
       axios
@@ -105,6 +107,7 @@ export default {
   watch: {
     "year.value"() {
       if (this.year.value) {
+        this.currentPage = 1;
         this.fetchServiceRecords(1);
       }
     },
@@ -120,18 +123,11 @@ export default {
 }
 
 .header {
-  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #ffb347 100%);
+    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #ffb347 100%);
-  color: white;
+    color: white;
-  padding: 10px 12px 12px;
+    padding: 20px 12px 25px;
-  border-radius: 0 0 30px 30px;
+    border-radius: 0 0 30px 30px;
-  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
+    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
-  margin-bottom: 10px;
+    margin-bottom: 10px;
-}
-
-.header :deep(.container) {
-  min-height: 0 !important;
-  height: auto !important;
-  padding: 0 !important;
-  margin: 0 !important;
 }
 </style>

student-vol/vite.config.js

@@ -148,8 +148,32 @@ function mockPlugin() {
           req.method === "GET"
         )
           return sendJSON("yearScore.json");
-        if (pathname.startsWith("/api/service/list") && req.method === "GET")
+        if (pathname.startsWith("/api/service/list") && req.method === "GET") {
-          return sendJSON("serviceList.json");
+          const sl = readJson("serviceList.json", {
+            error: 0,
+            data: { current: 1, pageSize: 10, pageCount: 1, list: [] },
+          });
+          const url = new URL(req.url, `http://${req.headers.host}`);
+          const year = url.searchParams.get("year");
+          let list = sl.data?.list || [];
+          if (year && year !== "all") {
+            const yearNum = Number(year);
+            list = list.filter((item) => {
+              const date = new Date(item.time);
+              return date.getFullYear() === yearNum;
+            });
+          }
+          const result = {
+            error: 0,
+            data: {
+              ...sl.data,
+              list,
+              current: 1,
+              pageCount: 1,
+            },
+          };
+          return send(res, result);
+        }
         if (pathname.startsWith("/api/service/details") && req.method === "GET")
           return sendJSON("recordDetails.json");