update:student-vol

student-vol/package.json

@@ -17,6 +17,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
-    "vite": "^7.2.4"
+    "vite": "^7.2.4",
+    "vite-plugin-vue-devtools": "^8.0.5",
+    "vite-plugin-vue-inspector": "^5.3.2"
   }
 }

student-vol/src/App.vue

@@ -20,7 +20,7 @@ body {
   background-color: #f5f5f5;
 }
 
-.container {
+#app > .container {
   min-height: 100vh;
   padding-bottom: 20px;
 }

student-vol/src/components/Home/ActItem.vue

@@ -8,7 +8,10 @@
         </div>
         <div class="actItem-body">
             <p class="actItem-title">{{ data.title }}</p>
-      <p>{{ formatDate(data.startTime) }} 至 {{ formatDate(data.endTime) }}</p>
+            <p>
+                {{ formatDate(data.startTime) }} 至
+                {{ formatDate(data.endTime) }}
+            </p>
             <p class="actItem-tag">
                 {{ data.isYourSchool ? "本人所在学校活动" : data.palce }}
             </p>
@@ -76,6 +79,7 @@ export default {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    color: #333;
 }
 
 .actItem-title {

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

@@ -1,15 +1,14 @@
 <template>
-  <div class="header-inner">
+  <router-link to="/userCenter" class="header-inner">
+    <div class="title">大学生志愿者活动</div>
+    <div class="user-info-container">
       <div class="userInfo">
-      <span class="avatar">
+        <img class="avatar" :src="user.avatar" />
-        <img :src="user.avatar" />
+        <span class="user-name">{{ user.name }}</span>
-      </span>
+      </div>
-      <span>{{ user.name }}</span>
+      <span class="arrow">></span>
     </div>
-    <router-link to="/userCenter">
-      <button class="rArrow"></button>
   </router-link>
-  </div>
 </template>
 
 <script>
@@ -20,11 +19,25 @@ export default {
 
 <style scoped>
 .header-inner {
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+  color: white;
+  text-decoration: none;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 15px;
+}
+
+.user-info-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 15px;
+  width: 100%;
-  background: white;
 }
 
 .userInfo {
@@ -33,18 +46,19 @@ export default {
   gap: 10px;
 }
 
-.avatar img {
+.avatar {
   width: 50px;
   height: 50px;
   border-radius: 50%;
+  border: 2px solid white;
 }
 
-.rArrow {
+.user-name {
-  width: 20px;
+  font-weight: bold;
-  height: 20px;
+}
-  border: none;
+
-  background: url('../assets/rArrow.png') no-repeat center;
+.arrow {
-  background-size: contain;
+  font-size: 24px;
-  cursor: pointer;
+  font-weight: bold;
 }
 </style>

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

@@ -59,28 +59,50 @@ export default {
 .overview {
   display: flex;
   justify-content: space-around;
-  padding: 20px;
+  padding: 20px 15px;
   background: white;
   list-style: none;
-  margin: 10px 0;
+  border-radius: 16px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+  margin: -20px 12px 15px;
+  position: relative;
+  z-index: 10;
 }
 
 .overview li {
   text-align: center;
+  flex: 1;
+  position: relative;
+}
+
+.overview li:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 40px;
+  background: linear-gradient(to bottom, transparent, #eee, transparent);
 }
 
 .num {
-  font-size: 20px;
+  font-size: 14px;
   margin-bottom: 8px;
+  color: #666;
 }
 
 .highColor {
-  color: #ff5d23;
+  color: #ff6b35;
-  font-weight: bold;
+  font-weight: 700;
+  font-size: 26px;
+  display: block;
+  margin-bottom: 2px;
 }
 
 .label {
-  color: #666;
+  color: #999;
   font-size: 12px;
+  font-weight: 500;
 }
 </style>

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

@@ -42,52 +42,76 @@ export default {
 </script>
 
 <style scoped>
+.container {
+  margin-bottom: 6px;
+}
+
 .details {
   display: flex;
-  gap: 15px;
+  gap: 10px;
-  padding: 15px;
+  padding: 12px;
   background: white;
-  margin-bottom: 10px;
   cursor: pointer;
+  border-radius: 12px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+  transition: all 0.3s ease;
+}
+
+.details:active {
+  transform: scale(0.99);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .imgBox {
   position: relative;
-  width: 100px;
+  width: 76px;
-  height: 100px;
+  height: 76px;
+  flex-shrink: 0;
 }
 
 .imgBox img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 8px;
+  border-radius: 10px;
 }
 
 .status {
   position: absolute;
-  top: 5px;
+  top: 0;
-  right: 5px;
+  left: 0;
-  padding: 2px 8px;
+  padding: 3px 10px;
   color: white;
-  font-size: 12px;
+  font-size: 11px;
-  border-radius: 4px;
+  border-radius: 10px 0 8px 0;
+  font-weight: 500;
 }
 
 .main {
   flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: 8px;
+  min-width: 0;
 }
 
 .content {
   font-size: 15px;
   line-height: 1.5;
+  color: #333;
+  font-weight: 500;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .bottomTxt {
-  color: #999;
+  color: #aaa;
   font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 </style>

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

@@ -70,29 +70,41 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 15px;
+  padding: 0;
+  margin: 0;
+  background: transparent;
 }
 
 .user {
   display: flex;
   align-items: center;
-  gap: 15px;
+  gap: 10px;
 }
 
 .user-avatar {
-  width: 60px;
+  width: 65px;
-  height: 60px;
+  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;
 }
 
 .user-name {
-  font-size: 18px;
+  font-size: 20px;
-  font-weight: bold;
+  font-weight: 600;
-  margin-bottom: 5px;
+  margin-bottom: 6px;
+  color: #fff;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .user-score {
-  color: #ff5d23;
+  background: rgba(255, 255, 255, 0.25);
-  font-size: 14px;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 13px;
+  color: #fff;
+  font-weight: 500;
+  backdrop-filter: blur(5px);
 }
 </style>

student-vol/src/views/ActDetails.vue

@@ -3,8 +3,12 @@
         <div class="head">
             <p class="title">{{ data.title }}</p>
             <div class="status">
-        <van-tag :color="getActStatusColor(data)" round style="margin-right: 10px">
+                <van-tag
-          {{ data.canApply ? '进行中' : '已结束' }}
+                    :color="getActStatusColor(data)"
+                    round
+                    style="margin-right: 10px"
+                >
+                    {{ data.canApply ? "进行中" : "已结束" }}
                 </van-tag>
                 <van-tag :color="getActApplyColor(data)" round>
                     {{ applyStatusMap[data.applyStatus] }}
@@ -14,7 +18,10 @@
 
         <div class="dataItem">
             <span class="label">活动时间</span>
-      <p>{{ formatDate(data.startTime) }} - {{ formatDate(data.endTime) }}</p>
+            <p>
+                {{ formatDate(data.startTime) }} -
+                {{ formatDate(data.endTime) }}
+            </p>
         </div>
 
         <div class="dataItem">
@@ -47,7 +54,7 @@
             v-if="[2, 3].indexOf(data.applyStatus) === -1"
             @click="applyClick"
         >
-      {{ data.applyStatus === 1 ? '撤销申请' : '立即报名' }}
+            {{ data.applyStatus === 1 ? "撤销申请" : "立即报名" }}
         </button>
     </div>
 </template>
@@ -96,7 +103,9 @@ export default {
                 id: this.$route.query.id,
             };
 
-      axios.post("/api/actDetails/apply", payload).then(function (response) {
+            axios
+                .post("/api/actDetails/apply", payload)
+                .then(function (response) {
                     const { error, msg } = response.data;
                     if (error === 0) {
                         showSuccessToast("操作成功");
@@ -118,12 +127,14 @@ export default {
     background: white;
     padding: 20px;
     margin-bottom: 10px;
+    color: #333; /* ✅ 让 head 区域默认文字深色 */
 }
 
 .title {
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 10px;
+    color: #333; /* ✅ 标题深色（关键） */
 }
 
 .status {

student-vol/src/views/HomeView.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="home">
         <div class="header">
-      <h1>大学生志愿者活动</h1>
             <User :user="userInfo" />
         </div>
         <Navs />
@@ -99,10 +98,6 @@ export default {
     margin-bottom: 15px;
 }
 
-.list {
-  padding: 15px;
-}
-
 .list-header {
     display: flex;
     justify-content: space-between;
@@ -111,6 +106,10 @@ export default {
     font-weight: bold;
 }
 
+.list-header span {
+    color: #333;
+}
+
 .list-more {
     display: flex;
     align-items: center;

student-vol/src/views/LoveActs.vue

@@ -3,7 +3,10 @@
         <div class="searchBox">
             <div class="search">
                 <span class="search-icon"></span>
-        <input placeholder="请输入地点、活动名称等关键字" v-model="keyword" />
+                <input
+                    placeholder="请输入地点、活动名称等关键字"
+                    v-model="keyword"
+                />
             </div>
         </div>
 
@@ -104,20 +107,18 @@ export default {
     background: white;
 }
 
-.search {
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  background: #f5f5f5;
-  border-radius: 20px;
-}
-
 .search input {
     flex: 1;
     border: none;
     background: transparent;
     outline: none;
     margin-left: 10px;
+    color: #333;
+    font-size: 14px;
+}
+
+.search input::placeholder {
+    color: #999;
 }
 
 .body {

student-vol/src/views/LoveReport.vue

@@ -1,10 +1,16 @@
 <template>
     <div class="container">
         <div class="tabs">
-      <div :class="{ tabItem: true, active: curTab === 0 }" @click="tabClick(0)">
+            <div
+                :class="{ tabItem: true, active: curTab === 0 }"
+                @click="tabClick(0)"
+            >
                 总积分
             </div>
-      <div :class="{ tabItem: true, active: curTab === 1 }" @click="tabClick(1)">
+            <div
+                :class="{ tabItem: true, active: curTab === 1 }"
+                @click="tabClick(1)"
+            >
                 年度积分
             </div>
         </div>
@@ -34,7 +40,7 @@
                     <div class="rank-student">
                         <span class="rank-idx">{{ idx + 1 }}</span>
                         <span class="rank-avatar">
-              <img :src='item.avatar' />
+                            <img :src="item.avatar" />
                         </span>
                         <span class="rank-name">{{ item.name }}</span>
                     </div>
@@ -104,9 +110,23 @@ export default {
 </script>
 
 <style scoped>
+.container {
+    background-color: #f7f8fa;
+    padding: 10px;
+    min-height: 100vh;
+}
+
+.tabs,
+.dataList,
+.rank {
+    background: white;
+    border-radius: 8px;
+    margin-bottom: 10px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
 .tabs {
     display: flex;
-  background: white;
     padding: 10px;
 }
 
@@ -115,19 +135,19 @@ export default {
     text-align: center;
     padding: 10px;
     cursor: pointer;
+    color: #666;
 }
 
 .tabItem.active {
     color: #ff5d23;
     border-bottom: 2px solid #ff5d23;
+    font-weight: bold;
 }
 
 .dataList {
     display: flex;
     justify-content: space-around;
     padding: 20px;
-  background: white;
-  margin: 10px 0;
 }
 
 .dataItem {
@@ -143,16 +163,12 @@ export default {
 
 .dataItem-label {
     font-size: 12px;
-  color: #666;
+    color: #333;
 }
 
 .rank {
-  background: white;
     padding: 15px;
-}
+    color: #333; /* ⭐ 内容区统一深色 */
-
-.rank-hd {
-  margin-bottom: 15px;
 }
 
 .rank-title {
@@ -166,34 +182,14 @@ export default {
     margin-top: 5px;
 }
 
-.rank-list {
-  list-style: none;
-}
-
-.rank-list li {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 0;
-  border-bottom: 1px solid #eee;
-}
-
-.rank-student {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
 .rank-idx {
     width: 20px;
     text-align: center;
     font-weight: bold;
 }
 
-.rank-avatar img {
+.rank-name {
-  width: 40px;
+    font-size: 14px;
-  height: 40px;
-  border-radius: 50%;
 }
 
 .rank-score {

student-vol/src/views/MyApply.vue

@@ -106,6 +106,7 @@ export default {
     background: white;
     list-style: none;
     border-bottom: 1px solid #eee;
+    color: #333; /* ✅ tab 区域默认文字深色 */
 }
 
 .tabList li {
@@ -117,6 +118,7 @@ export default {
 
 .tabList span {
     padding: 5px 10px;
+    color: #333; /* ✅ 兜底：span 明确深色 */
 }
 
 .tabList span.active {

student-vol/src/views/ServiceDetail.vue

@@ -20,7 +20,7 @@
             <div>
                 <img
                     class="serviceImg"
-          v-for="(url) in data.imgList" 
+                    v-for="url in data.imgList"
                     :src="url"
                     :key="url"
                 />
@@ -106,6 +106,7 @@ export default {
     background: white;
     padding: 15px 20px;
     margin-bottom: 1px;
+    color: #333; /* ✅ 关键：让值的文字变深色 */
 }
 
 .label {

student-vol/src/views/ServiceRecords.vue

@@ -1,16 +1,10 @@
 <template>
-  <div>
+    <div class="container">
         <div class="header">
-      <User 
+            <User @updateYear="updateYear" :date="year" :dateList="dateList" />
-        @updateYear="updateYear" 
-        :date="year" 
-        :dateList="dateList"
-      />
         </div>
 
-    <div class="overview">
         <Overview :year="year.value" />
-    </div>
 
         <van-list
             v-model:loading="loading"
@@ -119,8 +113,25 @@ export default {
 </script>
 
 <style scoped>
+.container {
+  background-color: #f5f6f8;
+  min-height: auto;
+  padding-bottom: 20px;
+}
+
 .header {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #ffb347 100%);
   color: white;
+  padding: 10px 12px 12px;
+  border-radius: 0 0 30px 30px;
+  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
+  margin-bottom: 10px;
+}
+
+.header :deep(.container) {
+  min-height: 0 !important;
+  height: auto !important;
+  padding: 0 !important;
+  margin: 0 !important;
 }
 </style>

student-vol/src/views/UserCenter.vue

@@ -26,14 +26,29 @@
                 </li>
                 <li>
                     <p class="label"><span>*</span>专业</p>
-          <input placeholder="请输入专业名称" v-model.trim="profession" />
+                    <input
+                        placeholder="请输入专业名称"
+                        v-model.trim="profession"
+                    />
                 </li>
                 <li>
                     <p class="label"><span>*</span>人员属性</p>
                     <div class="userTypeList">
-            <span :class="{ active: userType === 0 }" @click="changeUserType(0)">群众</span>
+                        <span
-            <span :class="{ active: userType === 1 }" @click="changeUserType(1)">团员</span>
+                            :class="{ active: userType === 0 }"
-            <span :class="{ active: userType === 2 }" @click="changeUserType(2)">党员</span>
+                            @click="changeUserType(0)"
+                            >群众</span
+                        >
+                        <span
+                            :class="{ active: userType === 1 }"
+                            @click="changeUserType(1)"
+                            >团员</span
+                        >
+                        <span
+                            :class="{ active: userType === 2 }"
+                            @click="changeUserType(2)"
+                            >党员</span
+                        >
                     </div>
                 </li>
             </ul>
@@ -112,7 +127,9 @@ export default {
                 return;
             }
 
-      axios.post("/api/userInfo/submit", payload).then(function (response) {
+            axios
+                .post("/api/userInfo/submit", payload)
+                .then(function (response) {
                     const { error, msg } = response.data;
                     if (error === 0) {
                         showSuccessToast("操作成功");
@@ -132,25 +149,31 @@ export default {
 .inner {
     padding: 20px;
     background: white;
+    color: #333;
 }
 
 h1 {
     text-align: center;
     margin-bottom: 20px;
+    color: #333;
 }
 
 ul {
     list-style: none;
+    padding: 0;
+    margin: 0;
 }
 
 li {
     padding: 15px 0;
     border-bottom: 1px solid #eee;
+    color: #333;
 }
 
 .label {
     font-weight: bold;
     margin-bottom: 10px;
+    color: #333;
 }
 
 .label span {
@@ -161,12 +184,28 @@ li {
     color: #666;
 }
 
-input[type="text"], input {
+li input:not([type="radio"]) {
     width: 100%;
     padding: 10px;
     border: 1px solid #ddd;
     border-radius: 4px;
     margin-top: 5px;
+    box-sizing: border-box;
+
+    color: #333;
+    background-color: #fff;
+}
+
+li input:not([type="radio"])::placeholder {
+    color: #999;
+}
+
+input[type="radio"] {
+    margin-right: 6px;
+    margin-left: 10px;
+}
+input[type="radio"]:first-of-type {
+    margin-left: 0;
 }
 
 .userTypeList {
@@ -180,6 +219,7 @@ input[type="text"], input {
     border: 1px solid #ddd;
     border-radius: 4px;
     cursor: pointer;
+    color: #333;
 }
 
 .userTypeList span.active {

student-vol/vite.config.js

@@ -1,5 +1,6 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import VueDevTools from "vite-plugin-vue-devtools";
 import fs from "fs";
 import path from "path";
 
@@ -144,5 +145,10 @@ function mockPlugin() {
 }
 
 export default defineConfig({
-  plugins: [vue(), mockPlugin()],
+  base: './',
-});
+  plugins: [
+    vue(),
+    mockPlugin(),
+    VueDevTools(),
+  ],
+})