update:student-vol

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

@@ -1,90 +1,94 @@
 <template>
-  <div class="actItem" @click="detailsClick(data.id)">
-    <div class="actItem-pic">
-      <img :src="data.actPic"/>
-      <span class="actItemStatus" :style="getTagStyle(data)">
-        {{ getTagTxt(data) }}
-      </span>
+    <div class="actItem" @click="detailsClick(data.id)">
+        <div class="actItem-pic">
+            <img :src="data.actPic" />
+            <span class="actItemStatus" :style="getTagStyle(data)">
+                {{ getTagTxt(data) }}
+            </span>
+        </div>
+        <div class="actItem-body">
+            <p class="actItem-title">{{ data.title }}</p>
+            <p>
+                {{ formatDate(data.startTime) }} 至
+                {{ formatDate(data.endTime) }}
+            </p>
+            <p class="actItem-tag">
+                {{ data.isYourSchool ? "本人所在学校活动" : data.palce }}
+            </p>
+        </div>
     </div>
-    <div class="actItem-body">
-      <p class="actItem-title">{{ data.title }}</p>
-      <p>{{ formatDate(data.startTime) }} 至 {{ formatDate(data.endTime) }}</p>
-      <p class="actItem-tag">
-        {{ data.isYourSchool ? "本人所在学校活动" : data.palce }}
-      </p>
-    </div>
-  </div>
 </template>
 
 <script>
 import moment from "moment";
 
 export default {
-  props: ["data"],
-  methods: {
-    getTagStyle(data) {
-      return { backgroundColor: data.canApply ? "#07c160" : "#999" };
+    props: ["data"],
+    methods: {
+        getTagStyle(data) {
+            return { backgroundColor: data.canApply ? "#07c160" : "#999" };
+        },
+        formatDate(value) {
+            return value ? moment(value).format("YYYY-MM-DD HH:mm") : "";
+        },
+        detailsClick(id) {
+            this.$emit("goDetails", id);
+        },
+        getTagTxt(data) {
+            return data.canApply ? "进行中" : "已结束";
+        },
     },
-    formatDate(value) {
-      return value ? moment(value).format("YYYY-MM-DD HH:mm") : "";
-    },
-    detailsClick(id) {
-      this.$emit("goDetails", id);
-    },
-    getTagTxt(data) {
-      return data.canApply ? "进行中" : "已结束";
-    },
-  },
 };
 </script>
 
 <style scoped>
 .actItem {
-  display: flex;
-  gap: 15px;
-  padding: 15px;
-  background: white;
-  margin-bottom: 10px;
-  cursor: pointer;
+    display: flex;
+    gap: 15px;
+    padding: 15px;
+    background: white;
+    margin-bottom: 10px;
+    cursor: pointer;
 }
 
 .actItem-pic {
-  position: relative;
-  width: 100px;
-  height: 100px;
+    position: relative;
+    width: 100px;
+    height: 100px;
 }
 
 .actItem-pic img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 8px;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 8px;
 }
 
 .actItemStatus {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  padding: 2px 8px;
-  color: white;
-  font-size: 12px;
-  border-radius: 4px;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    padding: 2px 8px;
+    color: white;
+    font-size: 12px;
+    border-radius: 4px;
 }
 
 .actItem-body {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    color: #333;
 }
 
 .actItem-title {
-  font-weight: bold;
-  font-size: 16px;
+    font-weight: bold;
+    font-size: 16px;
 }
 
 .actItem-tag {
-  color: #666;
-  font-size: 14px;
+    color: #666;
+    font-size: 14px;
 }
 </style>

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

@@ -1,15 +1,14 @@
 <template>
-  <div class="header-inner">
-    <div class="userInfo">
-      <span class="avatar">
-        <img :src="user.avatar" />
-      </span>
-      <span>{{ user.name }}</span>
+  <router-link to="/userCenter" class="header-inner">
+    <div class="title">大学生志愿者活动</div>
+    <div class="user-info-container">
+      <div class="userInfo">
+        <img class="avatar" :src="user.avatar" />
+        <span class="user-name">{{ user.name }}</span>
+      </div>
+      <span class="arrow">></span>
     </div>
-    <router-link to="/userCenter">
-      <button class="rArrow"></button>
-    </router-link>
-  </div>
+  </router-link>
 </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;
-  background: white;
+  width: 100%;
 }
 
 .userInfo {
@@ -33,18 +46,19 @@ export default {
   gap: 10px;
 }
 
-.avatar img {
+.avatar {
   width: 50px;
   height: 50px;
   border-radius: 50%;
+  border: 2px solid white;
 }
 
-.rArrow {
-  width: 20px;
-  height: 20px;
-  border: none;
-  background: url('../assets/rArrow.png') no-repeat center;
-  background-size: contain;
-  cursor: pointer;
+.user-name {
+  font-weight: bold;
+}
+
+.arrow {
+  font-size: 24px;
+  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;
-  font-weight: bold;
+  color: #ff6b35;
+  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;
-  padding: 15px;
+  gap: 10px;
+  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;
-  height: 100px;
+  width: 76px;
+  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;
-  right: 5px;
-  padding: 2px 8px;
+  top: 0;
+  left: 0;
+  padding: 3px 10px;
   color: white;
-  font-size: 12px;
-  border-radius: 4px;
+  font-size: 11px;
+  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;
-  height: 60px;
+  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;
 }
 
 .user-name {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 5px;
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 6px;
+  color: #fff;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .user-score {
-  color: #ff5d23;
-  font-size: 14px;
+  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);
 }
 </style>

student-vol/src/views/ActDetails.vue

@@ -1,55 +1,62 @@
 <template>
-  <div class="container">
-    <div class="head">
-      <p class="title">{{ data.title }}</p>
-      <div class="status">
-        <van-tag :color="getActStatusColor(data)" round style="margin-right: 10px">
-          {{ data.canApply ? '进行中' : '已结束' }}
-        </van-tag>
-        <van-tag :color="getActApplyColor(data)" round>
-          {{ applyStatusMap[data.applyStatus] }}
-        </van-tag>
-      </div>
+    <div class="container">
+        <div class="head">
+            <p class="title">{{ data.title }}</p>
+            <div class="status">
+                <van-tag
+                    :color="getActStatusColor(data)"
+                    round
+                    style="margin-right: 10px"
+                >
+                    {{ data.canApply ? "进行中" : "已结束" }}
+                </van-tag>
+                <van-tag :color="getActApplyColor(data)" round>
+                    {{ applyStatusMap[data.applyStatus] }}
+                </van-tag>
+            </div>
+        </div>
+
+        <div class="dataItem">
+            <span class="label">活动时间</span>
+            <p>
+                {{ formatDate(data.startTime) }} -
+                {{ formatDate(data.endTime) }}
+            </p>
+        </div>
+
+        <div class="dataItem">
+            <span class="label">活动地点</span>
+            <p>{{ data.palce }}</p>
+        </div>
+
+        <div class="dataItem">
+            <span class="label">活动简介</span>
+            <p>{{ data.content }}</p>
+        </div>
+
+        <div class="dataItem">
+            <span class="label">活动来源</span>
+            <p>{{ data.publisher }}</p>
+        </div>
+
+        <div class="dataItem">
+            <span class="label">服务时长</span>
+            <p>{{ data.hour }}小时</p>
+        </div>
+
+        <div class="dataItem">
+            <span class="label">招募人数</span>
+            <p>{{ data.total }}人</p>
+        </div>
+
+        <button
+            class="fBtn"
+            v-if="[2, 3].indexOf(data.applyStatus) === -1"
+            @click="applyClick"
+        >
+            {{ data.applyStatus === 1 ? "撤销申请" : "立即报名" }}
+        </button>
     </div>
-    
-    <div class="dataItem">
-      <span class="label">活动时间</span>
-      <p>{{ formatDate(data.startTime) }} - {{ formatDate(data.endTime) }}</p>
-    </div>
-    
-    <div class="dataItem">
-      <span class="label">活动地点</span>
-      <p>{{ data.palce }}</p>
-    </div>
-    
-    <div class="dataItem">
-      <span class="label">活动简介</span>
-      <p>{{ data.content }}</p>
-    </div>
-    
-    <div class="dataItem">
-      <span class="label">活动来源</span>
-      <p>{{ data.publisher }}</p>
-    </div>
-    
-    <div class="dataItem">
-      <span class="label">服务时长</span>
-      <p>{{ data.hour }}小时</p>
-    </div>
-    
-    <div class="dataItem">
-      <span class="label">招募人数</span>
-      <p>{{ data.total }}人</p>
-    </div>
-    
-    <button 
-      class="fBtn" 
-      v-if="[2, 3].indexOf(data.applyStatus) === -1"
-      @click="applyClick"
-    >
-      {{ data.applyStatus === 1 ? '撤销申请' : '立即报名' }}
-    </button>
-  </div>
 </template>
 
 <script>
@@ -58,108 +65,112 @@ import moment from "moment";
 import { showSuccessToast, showFailToast } from "vant";
 
 export default {
-  data() {
-    return {
-      data: {},
-      applyStatusMap: ["", "审核中", "审核通过", "审核拒绝"],
-    };
-  },
-  methods: {
-    formatDate(value) {
-      return value ? moment(value).format("YYYY-MM-DD HH:mm") : "--";
+    data() {
+        return {
+            data: {},
+            applyStatusMap: ["", "审核中", "审核通过", "审核拒绝"],
+        };
     },
-    getActStatusColor(data) {
-      return data.canApply ? "#07C160" : "#ff976a";
-    },
-    getActApplyColor(data) {
-      const list = ["", "#1989fa", "#07c160", "#f6352c"];
-      return list[data.applyStatus];
-    },
-    fetchDetails() {
-      const that = this;
-      const payload = { id: this.$route.query.id };
-      axios
-        .get("/api/actDetails/details", {
-          params: payload,
-        })
-        .then(function (response) {
-          const { error, data = {} } = response.data;
-          if (error === 0) {
-            that.data = data.details || {};
-          }
-        });
-    },
-    applyClick() {
-      const that = this;
-      const payload = {
-        isApplay: this.data.applyStatus !== 1,
-        id: this.$route.query.id,
-      };
+    methods: {
+        formatDate(value) {
+            return value ? moment(value).format("YYYY-MM-DD HH:mm") : "--";
+        },
+        getActStatusColor(data) {
+            return data.canApply ? "#07C160" : "#ff976a";
+        },
+        getActApplyColor(data) {
+            const list = ["", "#1989fa", "#07c160", "#f6352c"];
+            return list[data.applyStatus];
+        },
+        fetchDetails() {
+            const that = this;
+            const payload = { id: this.$route.query.id };
+            axios
+                .get("/api/actDetails/details", {
+                    params: payload,
+                })
+                .then(function (response) {
+                    const { error, data = {} } = response.data;
+                    if (error === 0) {
+                        that.data = data.details || {};
+                    }
+                });
+        },
+        applyClick() {
+            const that = this;
+            const payload = {
+                isApplay: this.data.applyStatus !== 1,
+                id: this.$route.query.id,
+            };
 
-      axios.post("/api/actDetails/apply", payload).then(function (response) {
-        const { error, msg } = response.data;
-        if (error === 0) {
-          showSuccessToast("操作成功");
-          that.fetchDetails();
-        } else {
-          showFailToast(msg || "网络错误，请稍后重试");
-        }
-      });
+            axios
+                .post("/api/actDetails/apply", payload)
+                .then(function (response) {
+                    const { error, msg } = response.data;
+                    if (error === 0) {
+                        showSuccessToast("操作成功");
+                        that.fetchDetails();
+                    } else {
+                        showFailToast(msg || "网络错误，请稍后重试");
+                    }
+                });
+        },
+    },
+    mounted() {
+        this.fetchDetails();
     },
-  },
-  mounted() {
-    this.fetchDetails();
-  },
 };
 </script>
 
 <style scoped>
 .head {
-  background: white;
-  padding: 20px;
-  margin-bottom: 10px;
+    background: white;
+    padding: 20px;
+    margin-bottom: 10px;
+    color: #333; /* ✅ 让 head 区域默认文字深色 */
 }
 
 .title {
-  font-size: 20px;
-  font-weight: bold;
-  margin-bottom: 10px;
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    color: #333; /* ✅ 标题深色（关键） */
 }
 
 .status {
-  display: flex;
-  gap: 10px;
+    display: flex;
+    gap: 10px;
 }
 
 .dataItem {
-  background: white;
-  padding: 15px 20px;
-  margin-bottom: 1px;
+    background: white;
+    padding: 15px 20px;
+    margin-bottom: 1px;
 }
 
 .label {
-  display: block;
-  color: #666;
-  font-size: 14px;
-  margin-bottom: 8px;
+    display: block;
+    color: #666;
+    font-size: 14px;
+    margin-bottom: 8px;
 }
 
 .dataItem p {
-  color: #333;
-  line-height: 1.6;
+    color: #333;
+    line-height: 1.6;
 }
 
 .fBtn {
-  position: fixed;
-  bottom: 20px;
-  left: 20px;
-  right: 20px;
-  padding: 15px;
-  background: #ff5d23;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  font-size: 16px;
-  cursor: pointer;
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    right: 20px;
+    padding: 15px;
+    background: #ff5d23;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 16px;
+    cursor: pointer;
 }
 </style>

student-vol/src/views/HomeView.vue

@@ -1,28 +1,27 @@
 <template>
-  <div class="home">
-    <div class="header">
-      <h1>大学生志愿者活动</h1>
-      <User :user="userInfo" />
-    </div>
-    <Navs />
-    <div class="list">
-      <div class="list-header">
-        <span>志愿活动</span>
-        <div class="list-more" @click="goMoreActs">
-          查看更多
-          <img src="../assets/rArrow.png" />
+    <div class="home">
+        <div class="header">
+            <User :user="userInfo" />
+        </div>
+        <Navs />
+        <div class="list">
+            <div class="list-header">
+                <span>志愿活动</span>
+                <div class="list-more" @click="goMoreActs">
+                    查看更多
+                    <img src="../assets/rArrow.png" />
+                </div>
+            </div>
+            <div class="actList">
+                <ActItem
+                    v-for="item in list"
+                    :key="item.id"
+                    :data="item"
+                    @goDetails="goDetails"
+                />
+            </div>
         </div>
-      </div>
-      <div class="actList">
-        <ActItem 
-          v-for="item in list" 
-          :key="item.id" 
-          :data="item"
-          @goDetails="goDetails"
-        />
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -32,96 +31,96 @@ import Navs from "../components/Home/Navs.vue";
 import ActItem from "../components/Home/ActItem.vue";
 
 export default {
-  components: {
-    User,
-    Navs,
-    ActItem,
-  },
-  data() {
-    return {
-      userInfo: {
-        avatar: "",
-        name: "",
-      },
-      list: [],
-    };
-  },
-  methods: {
-    fetchUserInfo() {
-      const that = this;
-      axios.get("/api/userInfo").then(function (response) {
-        const { error, data = {} } = response.data;
-        if (error === 0) {
-          that.userInfo = {
-            avatar: data.avatar,
-            name: data.name,
-          };
-        }
-      });
+    components: {
+        User,
+        Navs,
+        ActItem,
     },
-    fetchActList() {
-      const that = this;
-      axios.get("/api/actList").then(function (response) {
-        const { error, data = {} } = response.data;
-        if (error === 0) {
-          that.list = data.list;
-        }
-      });
+    data() {
+        return {
+            userInfo: {
+                avatar: "",
+                name: "",
+            },
+            list: [],
+        };
     },
-    goDetails(id) {
-      this.$router.push("/actDetails?id=" + id);
+    methods: {
+        fetchUserInfo() {
+            const that = this;
+            axios.get("/api/userInfo").then(function (response) {
+                const { error, data = {} } = response.data;
+                if (error === 0) {
+                    that.userInfo = {
+                        avatar: data.avatar,
+                        name: data.name,
+                    };
+                }
+            });
+        },
+        fetchActList() {
+            const that = this;
+            axios.get("/api/actList").then(function (response) {
+                const { error, data = {} } = response.data;
+                if (error === 0) {
+                    that.list = data.list;
+                }
+            });
+        },
+        goDetails(id) {
+            this.$router.push("/actDetails?id=" + id);
+        },
+        goMoreActs() {
+            this.$router.push("/loveActs");
+        },
     },
-    goMoreActs() {
-      this.$router.push("/loveActs");
+    mounted() {
+        this.fetchUserInfo();
+        this.fetchActList();
     },
-  },
-  mounted() {
-    this.fetchUserInfo();
-    this.fetchActList();
-  },
 };
 </script>
 
 <style scoped>
 .home {
-  min-height: 100vh;
-  background: #f5f5f5;
+    min-height: 100vh;
+    background: #f5f5f5;
 }
 
 .header {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  padding: 20px 0;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 20px 0;
 }
 
 .header h1 {
-  text-align: center;
-  margin-bottom: 15px;
-}
-
-.list {
-  padding: 15px;
+    text-align: center;
+    margin-bottom: 15px;
 }
 
 .list-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
-  font-weight: bold;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    font-weight: bold;
+}
+
+.list-header span {
+    color: #333;
 }
 
 .list-more {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  color: #666;
-  font-size: 14px;
-  cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    color: #666;
+    font-size: 14px;
+    cursor: pointer;
 }
 
 .list-more img {
-  width: 16px;
-  height: 16px;
+    width: 16px;
+    height: 16px;
 }
 </style>

student-vol/src/views/LoveActs.vue

@@ -1,30 +1,33 @@
 <template>
-  <div class="container">
-    <div class="searchBox">
-      <div class="search">
-        <span class="search-icon"></span>
-        <input placeholder="请输入地点、活动名称等关键字" v-model="keyword" />
-      </div>
+    <div class="container">
+        <div class="searchBox">
+            <div class="search">
+                <span class="search-icon"></span>
+                <input
+                    placeholder="请输入地点、活动名称等关键字"
+                    v-model="keyword"
+                />
+            </div>
+        </div>
+
+        <div class="body">
+            <van-list
+                v-model:loading="loading"
+                :finished="finished"
+                finished-text="没有更多了"
+                @load="onLoad"
+            >
+                <ActItem
+                    v-for="item in actList"
+                    :key="item.id"
+                    :data="item"
+                    @goDetails="goDetails"
+                />
+            </van-list>
+        </div>
+
+        <button class="fBtn" @click="goMyApply">我的报名</button>
     </div>
-    
-    <div class="body">
-      <van-list 
-        v-model:loading="loading" 
-        :finished="finished" 
-        finished-text="没有更多了" 
-        @load="onLoad"
-      >
-        <ActItem 
-          v-for="item in actList" 
-          :key="item.id" 
-          :data="item"
-          @goDetails="goDetails"
-        />
-      </van-list>
-    </div>
-    
-    <button class="fBtn" @click="goMyApply">我的报名</button>
-  </div>
 </template>
 
 <script>
@@ -32,108 +35,106 @@ import axios from "axios";
 import ActItem from "../components/Home/ActItem.vue";
 
 export default {
-  components: {
-    ActItem,
-  },
-  data() {
-    return {
-      actList: [],
-      loading: false,
-      finished: false,
-      currentPage: 1,
-      keyword: "",
-    };
-  },
-  methods: {
-    fetchActList(currentPage = 1) {
-      const that = this;
-      const payload = {
-        currentPage,
-        pageSize: 10,
-        keyword: this.keyword,
-      };
+    components: {
+        ActItem,
+    },
+    data() {
+        return {
+            actList: [],
+            loading: false,
+            finished: false,
+            currentPage: 1,
+            keyword: "",
+        };
+    },
+    methods: {
+        fetchActList(currentPage = 1) {
+            const that = this;
+            const payload = {
+                currentPage,
+                pageSize: 10,
+                keyword: this.keyword,
+            };
 
-      this.loading = true;
-      axios
-        .get("/api/actList", { params: payload })
-        .then(function (response) {
-          const { error, data = {} } = response.data;
-          if (error === 0) {
-            const currentPage = data.current;
-            const list = data.list;
+            this.loading = true;
+            axios
+                .get("/api/actList", { params: payload })
+                .then(function (response) {
+                    const { error, data = {} } = response.data;
+                    if (error === 0) {
+                        const currentPage = data.current;
+                        const list = data.list;
 
-            if (currentPage === 1) {
-              that.actList = list;
-            } else {
-              that.actList.push(...list);
-            }
+                        if (currentPage === 1) {
+                            that.actList = list;
+                        } else {
+                            that.actList.push(...list);
+                        }
 
-            that.currentPage = currentPage;
-            that.finished = data.pageCount === currentPage;
-          }
-        })
-        .finally(function () {
-          that.loading = false;
-        });
+                        that.currentPage = currentPage;
+                        that.finished = data.pageCount === currentPage;
+                    }
+                })
+                .finally(function () {
+                    that.loading = false;
+                });
+        },
+        onLoad() {
+            this.fetchActList(this.currentPage + 1);
+        },
+        goMyApply() {
+            this.$router.push("/myApply");
+        },
+        goDetails(id) {
+            this.$router.push("/actDetails?id=" + id);
+        },
     },
-    onLoad() {
-      this.fetchActList(this.currentPage + 1);
+    watch: {
+        keyword() {
+            this.currentPage = 1;
+            this.fetchActList(1);
+        },
     },
-    goMyApply() {
-      this.$router.push("/myApply");
+    mounted() {
+        this.fetchActList(1);
     },
-    goDetails(id) {
-      this.$router.push("/actDetails?id=" + id);
-    },
-  },
-  watch: {
-    keyword() {
-      this.currentPage = 1;
-      this.fetchActList(1);
-    },
-  },
-  mounted() {
-    this.fetchActList(1);
-  },
 };
 </script>
 
 <style scoped>
 .searchBox {
-  padding: 15px;
-  background: white;
-}
-
-.search {
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  background: #f5f5f5;
-  border-radius: 20px;
+    padding: 15px;
+    background: white;
 }
 
 .search input {
-  flex: 1;
-  border: none;
-  background: transparent;
-  outline: none;
-  margin-left: 10px;
+    flex: 1;
+    border: none;
+    background: transparent;
+    outline: none;
+    margin-left: 10px;
+    color: #333;
+    font-size: 14px;
+}
+
+.search input::placeholder {
+    color: #999;
 }
 
 .body {
-  padding: 10px;
+    padding: 10px;
 }
 
 .fBtn {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  padding: 12px 24px;
-  background: #ff5d23;
-  color: white;
-  border: none;
-  border-radius: 25px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-  cursor: pointer;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 12px 24px;
+    background: #ff5d23;
+    color: white;
+    border: none;
+    border-radius: 25px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
 }
 </style>

student-vol/src/views/LoveReport.vue

@@ -1,203 +1,199 @@
 <template>
-  <div class="container">
-    <div class="tabs">
-      <div :class="{ tabItem: true, active: curTab === 0 }" @click="tabClick(0)">
-        总积分
-      </div>
-      <div :class="{ tabItem: true, active: curTab === 1 }" @click="tabClick(1)">
-        年度积分
-      </div>
+    <div class="container">
+        <div class="tabs">
+            <div
+                :class="{ tabItem: true, active: curTab === 0 }"
+                @click="tabClick(0)"
+            >
+                总积分
+            </div>
+            <div
+                :class="{ tabItem: true, active: curTab === 1 }"
+                @click="tabClick(1)"
+            >
+                年度积分
+            </div>
+        </div>
+
+        <div class="dataList">
+            <div class="dataItem">
+                <p class="dataItem-score">{{ provinceRank }}</p>
+                <p class="dataItem-label">全省的排名</p>
+            </div>
+            <div class="dataItem">
+                <p class="dataItem-score">{{ totalScore }}</p>
+                <p class="dataItem-label">服务总积分</p>
+            </div>
+            <div class="dataItem">
+                <p class="dataItem-score">{{ grandeRank }}</p>
+                <p class="dataItem-label">本校本年级排名</p>
+            </div>
+        </div>
+
+        <div class="rank">
+            <div class="rank-hd">
+                <p class="rank-title">本校本年级服务标兵</p>
+                <p class="rank-range">1200人参与排名</p>
+            </div>
+            <ul class="rank-list">
+                <li v-for="(item, idx) in dataList" :key="item.id">
+                    <div class="rank-student">
+                        <span class="rank-idx">{{ idx + 1 }}</span>
+                        <span class="rank-avatar">
+                            <img :src="item.avatar" />
+                        </span>
+                        <span class="rank-name">{{ item.name }}</span>
+                    </div>
+                    <div class="rank-score">{{ item.score }}分</div>
+                </li>
+            </ul>
+        </div>
     </div>
-    
-    <div class="dataList">
-      <div class="dataItem">
-        <p class="dataItem-score">{{ provinceRank }}</p>
-        <p class="dataItem-label">全省的排名</p>
-      </div>
-      <div class="dataItem">
-        <p class="dataItem-score">{{ totalScore }}</p>
-        <p class="dataItem-label">服务总积分</p>
-      </div>
-      <div class="dataItem">
-        <p class="dataItem-score">{{ grandeRank }}</p>
-        <p class="dataItem-label">本校本年级排名</p>
-      </div>
-    </div>
-    
-    <div class="rank">
-      <div class="rank-hd">
-        <p class="rank-title">本校本年级服务标兵</p>
-        <p class="rank-range">1200人参与排名</p>
-      </div>
-      <ul class="rank-list">
-        <li v-for="(item, idx) in dataList" :key="item.id">
-          <div class="rank-student">
-            <span class="rank-idx">{{ idx + 1 }}</span>
-            <span class="rank-avatar">
-              <img :src='item.avatar' />
-            </span>
-            <span class="rank-name">{{ item.name }}</span>
-          </div>
-          <div class="rank-score">{{ item.score }}分</div>
-        </li>
-      </ul>
-    </div>
-  </div>
 </template>
 
 <script>
 import axios from "axios";
 
 export default {
-  data() {
-    return {
-      curTab: 0,
-      dataList: [],
-      provinceRank: "",
-      totalScore: "",
-      grandeRank: "",
-    };
-  },
-  methods: {
-    tabClick(value) {
-      this.curTab = Number(value);
-      this.fetchOverview(this.curTab);
-      this.fetchRankList(this.curTab);
+    data() {
+        return {
+            curTab: 0,
+            dataList: [],
+            provinceRank: "",
+            totalScore: "",
+            grandeRank: "",
+        };
     },
-    fetchOverview(type) {
-      const that = this;
-      axios
-        .get("/api/report/myOverview", {
-          params: { type },
-        })
-        .then(function (response) {
-          const { error, data = {} } = response.data;
-          if (error === 0) {
-            that.provinceRank = data.provinceRank;
-            that.totalScore = data.totalScore;
-            that.grandeRank = data.grandeRank;
-          }
-        });
+    methods: {
+        tabClick(value) {
+            this.curTab = Number(value);
+            this.fetchOverview(this.curTab);
+            this.fetchRankList(this.curTab);
+        },
+        fetchOverview(type) {
+            const that = this;
+            axios
+                .get("/api/report/myOverview", {
+                    params: { type },
+                })
+                .then(function (response) {
+                    const { error, data = {} } = response.data;
+                    if (error === 0) {
+                        that.provinceRank = data.provinceRank;
+                        that.totalScore = data.totalScore;
+                        that.grandeRank = data.grandeRank;
+                    }
+                });
+        },
+        fetchRankList(type) {
+            const that = this;
+            const payload = {
+                currentPage: 1,
+                pageSize: 10,
+                type,
+            };
+            axios
+                .get("/api/report/rankList", { params: payload })
+                .then(function (response) {
+                    const { error, data = {} } = response.data;
+                    if (error === 0) {
+                        that.dataList = data.list || [];
+                    }
+                });
+        },
     },
-    fetchRankList(type) {
-      const that = this;
-      const payload = {
-        currentPage: 1,
-        pageSize: 10,
-        type,
-      };
-      axios
-        .get("/api/report/rankList", { params: payload })
-        .then(function (response) {
-          const { error, data = {} } = response.data;
-          if (error === 0) {
-            that.dataList = data.list || [];
-          }
-        });
+    mounted() {
+        this.fetchOverview(this.curTab);
+        this.fetchRankList(this.curTab);
     },
-  },
-  mounted() {
-    this.fetchOverview(this.curTab);
-    this.fetchRankList(this.curTab);
-  },
 };
 </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;
+    display: flex;
+    padding: 10px;
 }
 
 .tabItem {
-  flex: 1;
-  text-align: center;
-  padding: 10px;
-  cursor: pointer;
+    flex: 1;
+    text-align: center;
+    padding: 10px;
+    cursor: pointer;
+    color: #666;
 }
 
 .tabItem.active {
-  color: #ff5d23;
-  border-bottom: 2px solid #ff5d23;
+    color: #ff5d23;
+    border-bottom: 2px solid #ff5d23;
+    font-weight: bold;
 }
 
 .dataList {
-  display: flex;
-  justify-content: space-around;
-  padding: 20px;
-  background: white;
-  margin: 10px 0;
+    display: flex;
+    justify-content: space-around;
+    padding: 20px;
 }
 
 .dataItem {
-  text-align: center;
+    text-align: center;
 }
 
 .dataItem-score {
-  font-size: 24px;
-  font-weight: bold;
-  color: #ff5d23;
-  margin-bottom: 5px;
+    font-size: 24px;
+    font-weight: bold;
+    color: #ff5d23;
+    margin-bottom: 5px;
 }
 
 .dataItem-label {
-  font-size: 12px;
-  color: #666;
+    font-size: 12px;
+    color: #333;
 }
 
 .rank {
-  background: white;
-  padding: 15px;
-}
-
-.rank-hd {
-  margin-bottom: 15px;
+    padding: 15px;
+    color: #333; /* ⭐ 内容区统一深色 */
 }
 
 .rank-title {
-  font-weight: bold;
-  font-size: 16px;
+    font-weight: bold;
+    font-size: 16px;
 }
 
 .rank-range {
-  font-size: 12px;
-  color: #666;
-  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;
+    font-size: 12px;
+    color: #666;
+    margin-top: 5px;
 }
 
 .rank-idx {
-  width: 20px;
-  text-align: center;
-  font-weight: bold;
+    width: 20px;
+    text-align: center;
+    font-weight: bold;
 }
 
-.rank-avatar img {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
+.rank-name {
+    font-size: 14px;
 }
 
 .rank-score {
-  color: #ff5d23;
-  font-weight: bold;
+    color: #ff5d23;
+    font-weight: bold;
 }
 </style>

student-vol/src/views/MyApply.vue

@@ -1,36 +1,36 @@
 <template>
-  <div class="container">
-    <ul class="tabList">
-      <li @click="tabClick(0)">
-        <span :class="curTab === 0 ? 'active' : ''">全部</span>
-      </li>
-      <li @click="tabClick(1)">
-        <span :class="curTab === 1 ? 'active' : ''">审核中</span>
-      </li>
-      <li @click="tabClick(2)">
-        <span :class="curTab === 2 ? 'active' : ''">审核通过</span>
-      </li>
-      <li @click="tabClick(3)">
-        <span :class="curTab === 3 ? 'active' : ''">审核拒绝</span>
-      </li>
-    </ul>
-    
-    <div class="list">
-      <van-list 
-        v-model:loading="loading" 
-        :finished="finished" 
-        finished-text="没有更多了" 
-        @load="onLoad"
-      >
-        <ActItem 
-          v-for="item in actList" 
-          :key="item.id" 
-          :data="item"
-          @goDetails="goDetails"
-        />
-      </van-list>
+    <div class="container">
+        <ul class="tabList">
+            <li @click="tabClick(0)">
+                <span :class="curTab === 0 ? 'active' : ''">全部</span>
+            </li>
+            <li @click="tabClick(1)">
+                <span :class="curTab === 1 ? 'active' : ''">审核中</span>
+            </li>
+            <li @click="tabClick(2)">
+                <span :class="curTab === 2 ? 'active' : ''">审核通过</span>
+            </li>
+            <li @click="tabClick(3)">
+                <span :class="curTab === 3 ? 'active' : ''">审核拒绝</span>
+            </li>
+        </ul>
+
+        <div class="list">
+            <van-list
+                v-model:loading="loading"
+                :finished="finished"
+                finished-text="没有更多了"
+                @load="onLoad"
+            >
+                <ActItem
+                    v-for="item in actList"
+                    :key="item.id"
+                    :data="item"
+                    @goDetails="goDetails"
+                />
+            </van-list>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -38,93 +38,95 @@ import axios from "axios";
 import ActItem from "../components/Home/ActItem.vue";
 
 export default {
-  components: {
-    ActItem,
-  },
-  data() {
-    return {
-      curTab: 0,
-      actList: [],
-      loading: false,
-      finished: false,
-      currentPage: 1,
-    };
-  },
-  methods: {
-    tabClick(value) {
-      this.curTab = value;
-      this.currentPage = 1;
-      this.fetchApplyList(1);
+    components: {
+        ActItem,
     },
-    fetchApplyList(currentPage = 1) {
-      const that = this;
-      const payload = {
-        currentPage,
-        pageSize: 10,
-        type: this.curTab,
-      };
+    data() {
+        return {
+            curTab: 0,
+            actList: [],
+            loading: false,
+            finished: false,
+            currentPage: 1,
+        };
+    },
+    methods: {
+        tabClick(value) {
+            this.curTab = value;
+            this.currentPage = 1;
+            this.fetchApplyList(1);
+        },
+        fetchApplyList(currentPage = 1) {
+            const that = this;
+            const payload = {
+                currentPage,
+                pageSize: 10,
+                type: this.curTab,
+            };
 
-      this.loading = true;
-      axios
-        .get("/api/myApplyList", { params: payload })
-        .then(function (response) {
-          const { error, data = {} } = response.data;
-          if (error === 0) {
-            const currentPage = data.current;
-            const list = data.list;
+            this.loading = true;
+            axios
+                .get("/api/myApplyList", { params: payload })
+                .then(function (response) {
+                    const { error, data = {} } = response.data;
+                    if (error === 0) {
+                        const currentPage = data.current;
+                        const list = data.list;
 
-            if (currentPage === 1) {
-              that.actList = list;
-            } else {
-              that.actList.push(...list);
-            }
+                        if (currentPage === 1) {
+                            that.actList = list;
+                        } else {
+                            that.actList.push(...list);
+                        }
 
-            that.currentPage = currentPage;
-            that.finished = data.pageCount === currentPage;
-          }
-        })
-        .finally(function () {
-          that.loading = false;
-        });
+                        that.currentPage = currentPage;
+                        that.finished = data.pageCount === currentPage;
+                    }
+                })
+                .finally(function () {
+                    that.loading = false;
+                });
+        },
+        onLoad() {
+            this.fetchApplyList(this.currentPage + 1);
+        },
+        goDetails(id) {
+            this.$router.push("/actDetails?id=" + id);
+        },
     },
-    onLoad() {
-      this.fetchApplyList(this.currentPage + 1);
+    mounted() {
+        this.fetchApplyList(1);
     },
-    goDetails(id) {
-      this.$router.push("/actDetails?id=" + id);
-    },
-  },
-  mounted() {
-    this.fetchApplyList(1);
-  },
 };
 </script>
 
 <style scoped>
 .tabList {
-  display: flex;
-  background: white;
-  list-style: none;
-  border-bottom: 1px solid #eee;
+    display: flex;
+    background: white;
+    list-style: none;
+    border-bottom: 1px solid #eee;
+    color: #333; /* ✅ tab 区域默认文字深色 */
 }
 
 .tabList li {
-  flex: 1;
-  text-align: center;
-  padding: 15px 0;
-  cursor: pointer;
+    flex: 1;
+    text-align: center;
+    padding: 15px 0;
+    cursor: pointer;
 }
 
 .tabList span {
-  padding: 5px 10px;
+    padding: 5px 10px;
+    color: #333; /* ✅ 兜底：span 明确深色 */
 }
 
 .tabList span.active {
-  color: #ff5d23;
-  border-bottom: 2px solid #ff5d23;
+    color: #ff5d23;
+    border-bottom: 2px solid #ff5d23;
 }
 
 .list {
-  padding: 10px;
+    padding: 10px;
 }
 </style>

student-vol/src/views/ServiceDetail.vue

@@ -1,59 +1,59 @@
 <template>
-  <div class="container">
-    <div class="dataItem">
-      <span class="label">服务时间</span>
-      <span>{{ formatDay(data.actTime) }}</span>
+    <div class="container">
+        <div class="dataItem">
+            <span class="label">服务时间</span>
+            <span>{{ formatDay(data.actTime) }}</span>
+        </div>
+
+        <div class="dataItem">
+            <span class="label">服务地点</span>
+            <span>{{ data.place }}</span>
+        </div>
+
+        <div class="dataItem">
+            <span class="label">服务内容</span>
+            <span>{{ data.content }}</span>
+        </div>
+
+        <div class="dataItem">
+            <span class="label">服务照片</span>
+            <div>
+                <img
+                    class="serviceImg"
+                    v-for="url in data.imgList"
+                    :src="url"
+                    :key="url"
+                />
+            </div>
+        </div>
+
+        <div class="dataItem">
+            <span class="label">服务时长</span>
+            <span>{{ data.hour }}小时</span>
+        </div>
+
+        <div class="dataItem">
+            <span class="label">纪实时间</span>
+            <span>{{ formatDate(data.uploadTime) }}</span>
+        </div>
+
+        <div class="dataItem">
+            <span class="label">审核状态</span>
+            <span>
+                <span
+                    class="status"
+                    :style="{ backgroundColor: bgColorMap[data.status] }"
+                >
+                    {{ statusMap[data.status] }}
+                </span>
+            </span>
+        </div>
+
+        <div class="footer">
+            <p class="title">{{ titleMap[data.status] }}</p>
+            <p class="score" v-if="data.status === 1">4分</p>
+        </div>
     </div>
-    
-    <div class="dataItem">
-      <span class="label">服务地点</span>
-      <span>{{ data.place }}</span>
-    </div>
-    
-    <div class="dataItem">
-      <span class="label">服务内容</span>
-      <span>{{ data.content }}</span>
-    </div>
-    
-    <div class="dataItem">
-      <span class="label">服务照片</span>
-      <div>
-        <img 
-          class="serviceImg" 
-          v-for="(url) in data.imgList" 
-          :src="url" 
-          :key="url"
-        />
-      </div>
-    </div>
-    
-    <div class="dataItem">
-      <span class="label">服务时长</span>
-      <span>{{ data.hour }}小时</span>
-    </div>
-    
-    <div class="dataItem">
-      <span class="label">纪实时间</span>
-      <span>{{ formatDate(data.uploadTime) }}</span>
-    </div>
-    
-    <div class="dataItem">
-      <span class="label">审核状态</span>
-      <span>
-        <span 
-          class="status" 
-          :style="{ backgroundColor: bgColorMap[data.status] }"
-        >
-          {{ statusMap[data.status] }}
-        </span>
-      </span>
-    </div>
-    
-    <div class="footer">
-      <p class="title">{{ titleMap[data.status] }}</p>
-      <p class="score" v-if="data.status === 1">4分</p>
-    </div>
-  </div>
 </template>
 
 <script>
@@ -61,92 +61,93 @@ import axios from "axios";
 import moment from "moment";
 
 export default {
-  data() {
-    return {
-      data: {},
-      statusMap: ["审核中", "审核通过", "审核驳回"],
-      bgColorMap: ["#1989fa", "#07c160", "#f6352c"],
-      titleMap: [
-        "正在审核中，请耐心等待",
-        "感谢您的服务，请收下服务积分",
-        "审核被驳回了哟",
-      ],
-    };
-  },
-  methods: {
-    formatDate(value) {
-      return value ? moment(value).format("YYYY-MM-DD HH:mm") : "--";
+    data() {
+        return {
+            data: {},
+            statusMap: ["审核中", "审核通过", "审核驳回"],
+            bgColorMap: ["#1989fa", "#07c160", "#f6352c"],
+            titleMap: [
+                "正在审核中，请耐心等待",
+                "感谢您的服务，请收下服务积分",
+                "审核被驳回了哟",
+            ],
+        };
     },
-    formatDay(value) {
-      return value ? moment(value).format("YYYY-MM-DD") : "--";
+    methods: {
+        formatDate(value) {
+            return value ? moment(value).format("YYYY-MM-DD HH:mm") : "--";
+        },
+        formatDay(value) {
+            return value ? moment(value).format("YYYY-MM-DD") : "--";
+        },
+        fetchDetails() {
+            const that = this;
+            const payload = { id: this.$route.query.id };
+            axios
+                .get("/api/service/details", {
+                    params: payload,
+                })
+                .then(function (response) {
+                    const { error, data = {} } = response.data;
+                    if (error === 0) {
+                        that.data = data.details || {};
+                    }
+                });
+        },
     },
-    fetchDetails() {
-      const that = this;
-      const payload = { id: this.$route.query.id };
-      axios
-        .get("/api/service/details", {
-          params: payload,
-        })
-        .then(function (response) {
-          const { error, data = {} } = response.data;
-          if (error === 0) {
-            that.data = data.details || {};
-          }
-        });
+    mounted() {
+        this.fetchDetails();
     },
-  },
-  mounted() {
-    this.fetchDetails();
-  },
 };
 </script>
 
 <style scoped>
 .dataItem {
-  background: white;
-  padding: 15px 20px;
-  margin-bottom: 1px;
+    background: white;
+    padding: 15px 20px;
+    margin-bottom: 1px;
+    color: #333; /* ✅ 关键：让值的文字变深色 */
 }
 
 .label {
-  display: block;
-  color: #666;
-  font-size: 14px;
-  margin-bottom: 8px;
+    display: block;
+    color: #666;
+    font-size: 14px;
+    margin-bottom: 8px;
 }
 
 .serviceImg {
-  width: 100px;
-  height: 100px;
-  object-fit: cover;
-  border-radius: 8px;
-  margin-right: 10px;
-  margin-top: 10px;
+    width: 100px;
+    height: 100px;
+    object-fit: cover;
+    border-radius: 8px;
+    margin-right: 10px;
+    margin-top: 10px;
 }
 
 .status {
-  padding: 4px 12px;
-  color: white;
-  font-size: 12px;
-  border-radius: 12px;
+    padding: 4px 12px;
+    color: white;
+    font-size: 12px;
+    border-radius: 12px;
 }
 
 .footer {
-  background: white;
-  padding: 20px;
-  text-align: center;
-  margin-top: 10px;
+    background: white;
+    padding: 20px;
+    text-align: center;
+    margin-top: 10px;
 }
 
 .title {
-  font-size: 16px;
-  color: #666;
-  margin-bottom: 10px;
+    font-size: 16px;
+    color: #666;
+    margin-bottom: 10px;
 }
 
 .score {
-  font-size: 32px;
-  color: #ff5d23;
-  font-weight: bold;
+    font-size: 32px;
+    color: #ff5d23;
+    font-weight: bold;
 }
 </style>

student-vol/src/views/ServiceRecords.vue

@@ -1,31 +1,25 @@
 <template>
-  <div>
-    <div class="header">
-      <User 
-        @updateYear="updateYear" 
-        :date="year" 
-        :dateList="dateList"
-      />
+    <div class="container">
+        <div class="header">
+            <User @updateYear="updateYear" :date="year" :dateList="dateList" />
+        </div>
+
+        <Overview :year="year.value" />
+
+        <van-list
+            v-model:loading="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+            @load="onLoad"
+        >
+            <RecordItem
+                v-for="item in dataList"
+                :key="item.id"
+                :data="item"
+                @goDetails="goDetails"
+            />
+        </van-list>
     </div>
-    
-    <div class="overview">
-      <Overview :year="year.value" />
-    </div>
-    
-    <van-list 
-      v-model:loading="loading" 
-      :finished="finished" 
-      finished-text="没有更多了"
-      @load="onLoad"
-    >
-      <RecordItem 
-        v-for="item in dataList" 
-        :key="item.id" 
-        :data="item"
-        @goDetails="goDetails"
-      />
-    </van-list>
-  </div>
 </template>
 
 <script>
@@ -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

@@ -1,45 +1,60 @@
 <template>
-  <div class="container">
-    <div class="inner">
-      <h1>个人信息</h1>
-      <ul>
-        <li>
-          <p class="label"><span>*</span>姓名</p>
-          <span class="txt">{{ name }}</span>
-        </li>
-        <li>
-          <p class="label"><span>*</span>编号</p>
-          <span class="txt">{{ code }}</span>
-        </li>
-        <li>
-          <p class="label"><span>*</span>性别</p>
-          <input type="radio" value="0" v-model="gender" />男
-          <input type="radio" value="1" v-model="gender" />女
-        </li>
-        <li>
-          <p class="label"><span>*</span>手机号</p>
-          <input placeholder="请输入手机号" v-model.trim="phoneNum" />
-        </li>
-        <li>
-          <p class="label"><span>*</span>学校</p>
-          <input placeholder="请输入学校名称" v-model.trim="school" />
-        </li>
-        <li>
-          <p class="label"><span>*</span>专业</p>
-          <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 :class="{ active: userType === 1 }" @click="changeUserType(1)">团员</span>
-            <span :class="{ active: userType === 2 }" @click="changeUserType(2)">党员</span>
-          </div>
-        </li>
-      </ul>
-      <button class="subBtn" @click="submitClick">提交</button>
+    <div class="container">
+        <div class="inner">
+            <h1>个人信息</h1>
+            <ul>
+                <li>
+                    <p class="label"><span>*</span>姓名</p>
+                    <span class="txt">{{ name }}</span>
+                </li>
+                <li>
+                    <p class="label"><span>*</span>编号</p>
+                    <span class="txt">{{ code }}</span>
+                </li>
+                <li>
+                    <p class="label"><span>*</span>性别</p>
+                    <input type="radio" value="0" v-model="gender" />男
+                    <input type="radio" value="1" v-model="gender" />女
+                </li>
+                <li>
+                    <p class="label"><span>*</span>手机号</p>
+                    <input placeholder="请输入手机号" v-model.trim="phoneNum" />
+                </li>
+                <li>
+                    <p class="label"><span>*</span>学校</p>
+                    <input placeholder="请输入学校名称" v-model.trim="school" />
+                </li>
+                <li>
+                    <p class="label"><span>*</span>专业</p>
+                    <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
+                            :class="{ active: userType === 1 }"
+                            @click="changeUserType(1)"
+                            >团员</span
+                        >
+                        <span
+                            :class="{ active: userType === 2 }"
+                            @click="changeUserType(2)"
+                            >党员</span
+                        >
+                    </div>
+                </li>
+            </ul>
+            <button class="subBtn" @click="submitClick">提交</button>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -47,156 +62,181 @@ import axios from "axios";
 import { showToast, showSuccessToast, showFailToast } from "vant";
 
 export default {
-  data() {
-    return {
-      name: "",
-      code: null,
-      gender: 0,
-      phoneNum: "",
-      school: "",
-      profession: "",
-      userType: 0,
-    };
-  },
-  methods: {
-    changeUserType(value) {
-      this.userType = value;
+    data() {
+        return {
+            name: "",
+            code: null,
+            gender: 0,
+            phoneNum: "",
+            school: "",
+            profession: "",
+            userType: 0,
+        };
     },
-    fetchUsrInfo() {
-      const that = this;
-      axios.get("/api/userInfo").then(function (response) {
-        const { error, data = {} } = response.data;
-        if (error === 0) {
-          that.name = data.name;
-          that.code = data.code;
-          that.gender = data.gender;
-          that.phoneNum = data.phoneNum;
-          that.school = data.school;
-          that.profession = data.profession;
-          that.userType = data.userType;
-        }
-      });
-    },
-    check() {
-      var phoneNum = this.phoneNum;
-      var school = this.school;
-      var profession = this.profession;
+    methods: {
+        changeUserType(value) {
+            this.userType = value;
+        },
+        fetchUsrInfo() {
+            const that = this;
+            axios.get("/api/userInfo").then(function (response) {
+                const { error, data = {} } = response.data;
+                if (error === 0) {
+                    that.name = data.name;
+                    that.code = data.code;
+                    that.gender = data.gender;
+                    that.phoneNum = data.phoneNum;
+                    that.school = data.school;
+                    that.profession = data.profession;
+                    that.userType = data.userType;
+                }
+            });
+        },
+        check() {
+            var phoneNum = this.phoneNum;
+            var school = this.school;
+            var profession = this.profession;
 
-      if (phoneNum === "") {
-        showToast("手机号不可为空");
-        return;
-      }
-      if (school === "") {
-        showToast("学校不可为空");
-        return;
-      }
-      if (profession === "") {
-        showToast("专业不可为空");
-        return;
-      }
+            if (phoneNum === "") {
+                showToast("手机号不可为空");
+                return;
+            }
+            if (school === "") {
+                showToast("学校不可为空");
+                return;
+            }
+            if (profession === "") {
+                showToast("专业不可为空");
+                return;
+            }
 
-      const payload = {
-        name: this.name,
-        code: this.code,
-        gender: this.gender,
-        phoneNum,
-        school,
-        profession,
-        userType: this.userType,
-      };
-      return payload;
-    },
-    submitClick() {
-      var payload = this.check();
-      if (!payload) {
-        return;
-      }
+            const payload = {
+                name: this.name,
+                code: this.code,
+                gender: this.gender,
+                phoneNum,
+                school,
+                profession,
+                userType: this.userType,
+            };
+            return payload;
+        },
+        submitClick() {
+            var payload = this.check();
+            if (!payload) {
+                return;
+            }
 
-      axios.post("/api/userInfo/submit", payload).then(function (response) {
-        const { error, msg } = response.data;
-        if (error === 0) {
-          showSuccessToast("操作成功");
-        } else {
-          showFailToast(msg || "网络错误，请稍后重试");
-        }
-      });
+            axios
+                .post("/api/userInfo/submit", payload)
+                .then(function (response) {
+                    const { error, msg } = response.data;
+                    if (error === 0) {
+                        showSuccessToast("操作成功");
+                    } else {
+                        showFailToast(msg || "网络错误，请稍后重试");
+                    }
+                });
+        },
+    },
+    mounted() {
+        this.fetchUsrInfo();
     },
-  },
-  mounted() {
-    this.fetchUsrInfo();
-  },
 };
 </script>
 
 <style scoped>
 .inner {
-  padding: 20px;
-  background: white;
+    padding: 20px;
+    background: white;
+    color: #333;
 }
 
 h1 {
-  text-align: center;
-  margin-bottom: 20px;
+    text-align: center;
+    margin-bottom: 20px;
+    color: #333;
 }
 
 ul {
-  list-style: none;
+    list-style: none;
+    padding: 0;
+    margin: 0;
 }
 
 li {
-  padding: 15px 0;
-  border-bottom: 1px solid #eee;
+    padding: 15px 0;
+    border-bottom: 1px solid #eee;
+    color: #333;
 }
 
 .label {
-  font-weight: bold;
-  margin-bottom: 10px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    color: #333;
 }
 
 .label span {
-  color: red;
+    color: red;
 }
 
 .txt {
-  color: #666;
+    color: #666;
 }
 
-input[type="text"], input {
-  width: 100%;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  margin-top: 5px;
+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 {
-  display: flex;
-  gap: 10px;
-  margin-top: 10px;
+    display: flex;
+    gap: 10px;
+    margin-top: 10px;
 }
 
 .userTypeList span {
-  padding: 8px 20px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  cursor: pointer;
+    padding: 8px 20px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    cursor: pointer;
+    color: #333;
 }
 
 .userTypeList span.active {
-  background: #ff5d23;
-  color: white;
-  border-color: #ff5d23;
+    background: #ff5d23;
+    color: white;
+    border-color: #ff5d23;
 }
 
 .subBtn {
-  width: 100%;
-  padding: 15px;
-  background: #ff5d23;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-size: 16px;
-  margin-top: 20px;
-  cursor: pointer;
+    width: 100%;
+    padding: 15px;
+    background: #ff5d23;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 16px;
+    margin-top: 20px;
+    cursor: pointer;
 }
 </style>