update:student-vol

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

@@ -58,11 +58,13 @@ export default {
 <style scoped>
 .overview {
   display: flex;
-  justify-content: space-around;
-  padding: 20px;
+  justify-content: space-between;
+  padding: 15px;
   background: white;
   list-style: none;
-  margin: 10px 0;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  margin-bottom: 5px;
 }
 
 .overview li {

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

@@ -44,11 +44,13 @@ export default {
 <style scoped>
 .details {
   display: flex;
-  gap: 15px;
+  gap: 10px;
   padding: 15px;
   background: white;
-  margin-bottom: 10px;
   cursor: pointer;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  margin-bottom: 5px;
 }
 
 .imgBox {

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

@@ -70,13 +70,13 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 15px;
+  padding: 10px;
 }
 
 .user {
   display: flex;
   align-items: center;
-  gap: 15px;
+  gap: 10px;
 }
 
 .user-avatar {

student-vol/src/views/HomeView.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="home">
     <div class="header">
-      <h1>大学生志愿者活动</h1>
       <User :user="userInfo" />
     </div>
     <Navs />

student-vol/src/views/LoveReport.vue

@@ -104,9 +104,21 @@ 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 +127,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,11 +155,10 @@ export default {
 
 .dataItem-label {
   font-size: 12px;
-  color: #666;
+  color: #333;
 }
 
 .rank {
-  background: white;
   padding: 15px;
 }
 
@@ -162,12 +173,13 @@ export default {
 
 .rank-range {
   font-size: 12px;
-  color: #666;
+  color: #333;
   margin-top: 5px;
 }
 
 .rank-list {
   list-style: none;
+  padding: 0;
 }
 
 .rank-list li {
@@ -178,6 +190,10 @@ export default {
   border-bottom: 1px solid #eee;
 }
 
+.rank-list li:last-child {
+  border-bottom: none;
+}
+
 .rank-student {
   display: flex;
   align-items: center;

student-vol/src/views/ServiceRecords.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="container">
     <div class="header">
       <User 
         @updateYear="updateYear" 
@@ -8,9 +8,7 @@
       />
     </div>
     
-    <div class="overview">
-      <Overview :year="year.value" />
-    </div>
+    <Overview :year="year.value" />
     
     <van-list 
       v-model:loading="loading" 
@@ -119,8 +117,16 @@ export default {
 </script>
 
 <style scoped>
+.container {
+  background-color: #f7f8fa;
+  padding: 10px;
+  min-height: 100vh;
+}
+
 .header {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
+  margin: -10px -10px 10px -10px;
+  padding: 10px;
 }
 </style>