diff --git a/student-vol/11.pdf b/student-vol/11.pdf
new file mode 100644
index 0000000..2cab2c6
Binary files /dev/null and b/student-vol/11.pdf differ
diff --git a/student-vol/package-lock.json b/student-vol/package-lock.json
index b153142..5e23b23 100644
--- a/student-vol/package-lock.json
+++ b/student-vol/package-lock.json
@@ -16,7 +16,246 @@
       },
       "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"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz",
+      "integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
+      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
+      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.27.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz",
+      "integrity": "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.28.5.tgz",
+      "integrity": "sha512-q3WC4JfdODypvxArsJQROfupPBq9+lMwjKq7C33GhbFYJsufD0yd/ziwD+hJucLeWsnFPWZjsU2DNFqBPE7jwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-member-expression-to-functions": "^7.28.5",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/helper-replace-supers": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/traverse": "^7.28.5",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.28.5.tgz",
+      "integrity": "sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz",
+      "integrity": "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.27.1.tgz",
+      "integrity": "sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-member-expression-to-functions": "^7.27.1",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/traverse": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz",
+      "integrity": "sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-string-parser": {
@@ -37,6 +276,30 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
+      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/parser": {
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
@@ -52,6 +315,155 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/plugin-proposal-decorators": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.28.0.tgz",
+      "integrity": "sha512-zOiZqvANjWDUaUS9xMxbMcK/Zccztbe/6ikvUXaG9nsPH3w6qh5UaPGAnirI/WhIbZ8m3OHU0ReyPrknG+ZKeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/plugin-syntax-decorators": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-decorators": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.27.1.tgz",
+      "integrity": "sha512-YMq8Z87Lhl8EGkmb0MwYkt36QnxC+fzCgrl66ereamPlYToRpIk5nUjKUY3QKLWq8mwUB1BgbeXcTJhZOCDg5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.27.1.tgz",
+      "integrity": "sha512-oFT0FrKHgF53f4vOsZGi2Hh3I35PfSmVs4IBFLFj4dnafP+hIWDLg3VyKmUHfLoLHlyxY4C7DGtmHuJgn+IGww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.27.1.tgz",
+      "integrity": "sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.27.1.tgz",
+      "integrity": "sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.28.5.tgz",
+      "integrity": "sha512-x2Qa+v/CuEoX7Dr31iAfr0IhInrVOWZU/2vJMJ00FOR/2nM0BcBEclpaf9sWCDc+v5e9dMrhSH8/atq/kX7+bA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-create-class-features-plugin": "^7.28.5",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/plugin-syntax-typescript": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
+      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.5",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/types": {
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
@@ -507,12 +919,62 @@
         "node": ">=18"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.29",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.53",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
@@ -867,6 +1329,59 @@
         "vue": "^3.2.25"
       }
     },
+    "node_modules/@vue/babel-helper-vue-transform-on": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.5.0.tgz",
+      "integrity": "sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vue/babel-plugin-jsx": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.5.0.tgz",
+      "integrity": "sha512-mneBhw1oOqCd2247O0Yw/mRwC9jIGACAJUlawkmMBiNmL4dGA2eMzuNZVNqOUfYTa6vqmND4CtOPzmEEEqLKFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/plugin-syntax-jsx": "^7.27.1",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.0",
+        "@babel/types": "^7.28.2",
+        "@vue/babel-helper-vue-transform-on": "1.5.0",
+        "@vue/babel-plugin-resolve-type": "1.5.0",
+        "@vue/shared": "^3.5.18"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/babel-plugin-resolve-type": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.5.0.tgz",
+      "integrity": "sha512-Wm/60o+53JwJODm4Knz47dxJnLDJ9FnKnGZJbUUf8nQRAtt6P+undLUAVU3Ha33LxOJe6IPoifRQ6F/0RrU31w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/parser": "^7.28.0",
+        "@vue/compiler-sfc": "^3.5.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.5.26",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.26.tgz",
@@ -923,6 +1438,69 @@
       "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
       "license": "MIT"
     },
+    "node_modules/@vue/devtools-core": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-8.0.5.tgz",
+      "integrity": "sha512-dpCw8nl0GDBuiL9SaY0mtDxoGIEmU38w+TQiYEPOLhW03VDC0lfNMYXS/qhl4I0YlysGp04NLY4UNn6xgD0VIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^8.0.5",
+        "@vue/devtools-shared": "^8.0.5",
+        "mitt": "^3.0.1",
+        "nanoid": "^5.1.5",
+        "pathe": "^2.0.3",
+        "vite-hot-client": "^2.1.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@vue/devtools-core/node_modules/nanoid": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.6.tgz",
+      "integrity": "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.0.5.tgz",
+      "integrity": "sha512-q2VV6x1U3KJMTQPUlRMyWEKVbcHuxhqJdSr6Jtjz5uAThAIrfJ6WVZdGZm5cuO63ZnSUz0RCsVwiUUb0mDV0Yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^8.0.5",
+        "birpc": "^2.6.1",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^2.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.0.5.tgz",
+      "integrity": "sha512-bRLn6/spxpmgLk+iwOrR29KrYnJjG9DGpHGkDFG82UM21ZpJ39ztUT9OXX3g+usW7/b2z+h46I9ZiYyB07XMXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.26",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.26.tgz",
@@ -973,6 +1551,16 @@
       "integrity": "sha512-7Z6/y3uFI5PRoKeorTOSXKcDj0MSasfNNltcslbFrPpcw6aXRUALq4IfJlaTRspiWIUOEZbrpM+iQGmCOiWe4A==",
       "license": "MIT"
     },
+    "node_modules/ansis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/ansis/-/ansis-4.2.0.tgz",
+      "integrity": "sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -990,6 +1578,77 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.11",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.11.tgz",
+      "integrity": "sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/birpc": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/bundle-name": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
+      "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "run-applescript": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -1003,6 +1662,27 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001761",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001761.tgz",
+      "integrity": "sha512-JF9ptu1vP2coz98+5051jZ4PwQgd2ni8A+gYSN7EA7dPKIMf0pDlSUxhdmVOaV3/fYK5uWBkgSXJaRLr4+3A6g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -1015,12 +1695,96 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/copy-anything": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
+      "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/default-browser": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.4.0.tgz",
+      "integrity": "sha512-XDuvSq38Hr1MdN47EDvYtx3U0MTqpCEn+F6ft8z2vYDzMrvQhVp0ui9oQdqW3MvK3vqUETglt1tVGgjLuJ5izg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bundle-name": "^4.1.0",
+        "default-browser-id": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/default-browser-id": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.1.tgz",
+      "integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
+      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -1044,6 +1808,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.267",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
+      "integrity": "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/entities": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.0.tgz",
@@ -1056,6 +1827,16 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/error-stack-parser-es": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/error-stack-parser-es/-/error-stack-parser-es-1.0.5.tgz",
+      "integrity": "sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -1143,6 +1924,16 @@
         "@esbuild/win32-x64": "0.27.2"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -1227,6 +2018,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -1315,6 +2116,127 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-docker": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
+      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-inside-container": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
+      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^3.0.0"
+      },
+      "bin": {
+        "is-inside-container": "cli.js"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-what": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
+      "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/is-wsl": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.0.tgz",
+      "integrity": "sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-inside-container": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -1354,6 +2276,13 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/moment": {
       "version": "2.30.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
@@ -1363,6 +2292,23 @@
         "node": "*"
       }
     },
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -1381,6 +2327,53 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ohash": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
+      "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/open": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz",
+      "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "default-browser": "^5.2.1",
+        "define-lazy-prop": "^3.0.0",
+        "is-inside-container": "^1.0.0",
+        "wsl-utils": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/perfect-debounce": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-2.0.0.tgz",
+      "integrity": "sha512-fkEH/OBiKrqqI/yIgjR92lMfs2K8105zt/VT6+7eTjNwisrsh47CeIED9z58zI7DfKdH3uHAn25ziRZn3kgAow==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1393,7 +2386,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -1435,6 +2427,13 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/rollup": {
       "version": "4.53.5",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.5.tgz",
@@ -1477,6 +2476,44 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/run-applescript": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
+      "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/sirv": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
+      "integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1486,6 +2523,29 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/superjson": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz",
+      "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -1503,6 +2563,64 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/unplugin-utils": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.1.tgz",
+      "integrity": "sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/vant": {
       "version": "4.9.22",
       "resolved": "https://registry.npmjs.org/vant/-/vant-4.9.22.tgz",
@@ -1593,6 +2711,110 @@
         }
       }
     },
+    "node_modules/vite-dev-rpc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vite-dev-rpc/-/vite-dev-rpc-1.1.0.tgz",
+      "integrity": "sha512-pKXZlgoXGoE8sEKiKJSng4hI1sQ4wi5YT24FCrwrLt6opmkjlqPPVmiPWWJn8M8byMxRGzp1CrFuqQs4M/Z39A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "birpc": "^2.4.0",
+        "vite-hot-client": "^2.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0"
+      }
+    },
+    "node_modules/vite-hot-client": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vite-hot-client/-/vite-hot-client-2.1.0.tgz",
+      "integrity": "sha512-7SpgZmU7R+dDnSmvXE1mfDtnHLHQSisdySVR7lO8ceAXvM0otZeuQQ6C8LrS5d/aYyP/QZ0hI0L+dIPrm4YlFQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0"
+      }
+    },
+    "node_modules/vite-plugin-inspect": {
+      "version": "11.3.3",
+      "resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-11.3.3.tgz",
+      "integrity": "sha512-u2eV5La99oHoYPHE6UvbwgEqKKOQGz86wMg40CCosP6q8BkB6e5xPneZfYagK4ojPJSj5anHCrnvC20DpwVdRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansis": "^4.1.0",
+        "debug": "^4.4.1",
+        "error-stack-parser-es": "^1.0.5",
+        "ohash": "^2.0.11",
+        "open": "^10.2.0",
+        "perfect-debounce": "^2.0.0",
+        "sirv": "^3.0.1",
+        "unplugin-utils": "^0.3.0",
+        "vite-dev-rpc": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-vue-devtools": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-8.0.5.tgz",
+      "integrity": "sha512-p619BlKFOqQXJ6uDWS1vUPQzuJOD6xJTfftj57JXBGoBD/yeQCowR7pnWcr/FEX4/HVkFbreI6w2uuGBmQOh6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-core": "^8.0.5",
+        "@vue/devtools-kit": "^8.0.5",
+        "@vue/devtools-shared": "^8.0.5",
+        "sirv": "^3.0.2",
+        "vite-plugin-inspect": "^11.3.3",
+        "vite-plugin-vue-inspector": "^5.3.2"
+      },
+      "engines": {
+        "node": ">=v14.21.3"
+      },
+      "peerDependencies": {
+        "vite": "^6.0.0 || ^7.0.0-0"
+      }
+    },
+    "node_modules/vite-plugin-vue-inspector": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vue-inspector/-/vite-plugin-vue-inspector-5.3.2.tgz",
+      "integrity": "sha512-YvEKooQcSiBTAs0DoYLfefNja9bLgkFM7NI2b07bE2SruuvX0MEa9cMaxjKVMkeCp5Nz9FRIdcN1rOdFVBeL6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.23.0",
+        "@babel/plugin-proposal-decorators": "^7.23.0",
+        "@babel/plugin-syntax-import-attributes": "^7.22.5",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-transform-typescript": "^7.22.15",
+        "@vue/babel-plugin-jsx": "^1.1.5",
+        "@vue/compiler-dom": "^3.3.4",
+        "kolorist": "^1.8.0",
+        "magic-string": "^0.30.4"
+      },
+      "peerDependencies": {
+        "vite": "^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0"
+      }
+    },
     "node_modules/vue": {
       "version": "3.5.26",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.26.tgz",
@@ -1629,6 +2851,29 @@
       "peerDependencies": {
         "vue": "^3.5.0"
       }
+    },
+    "node_modules/wsl-utils": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
+      "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-wsl": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
     }
   }
 }
diff --git a/student-vol/package.json b/student-vol/package.json
index 09f4e54..4b9f5b3 100644
--- a/student-vol/package.json
+++ b/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"
   }
 }
diff --git a/student-vol/public/imgs/actImg.jpeg b/student-vol/public/imgs/actImg.jpeg
index d957c58..6dc0dbb 100644
Binary files a/student-vol/public/imgs/actImg.jpeg and b/student-vol/public/imgs/actImg.jpeg differ
diff --git a/student-vol/public/imgs/avatar.png b/student-vol/public/imgs/avatar.png
index d5d98dc..ead21eb 100644
Binary files a/student-vol/public/imgs/avatar.png and b/student-vol/public/imgs/avatar.png differ
diff --git a/student-vol/src/App.vue b/student-vol/src/App.vue
index 8930b15..6a0730d 100644
--- a/student-vol/src/App.vue
+++ b/student-vol/src/App.vue
@@ -20,7 +20,7 @@ body {
   background-color: #f5f5f5;
 }
 
-.container {
+#app > .container {
   min-height: 100vh;
   padding-bottom: 20px;
 }
diff --git a/student-vol/src/assets/actImg.jpg b/student-vol/src/assets/actImg.jpg
new file mode 100644
index 0000000..9e15ba2
Binary files /dev/null and b/student-vol/src/assets/actImg.jpg differ
diff --git a/student-vol/src/assets/avatar/1.png b/student-vol/src/assets/avatar/1.png
new file mode 100644
index 0000000..3207364
Binary files /dev/null and b/student-vol/src/assets/avatar/1.png differ
diff --git a/student-vol/src/assets/avatar/2.png b/student-vol/src/assets/avatar/2.png
new file mode 100644
index 0000000..cbce5cb
Binary files /dev/null and b/student-vol/src/assets/avatar/2.png differ
diff --git a/student-vol/src/assets/avatar/3.png b/student-vol/src/assets/avatar/3.png
new file mode 100644
index 0000000..463887f
Binary files /dev/null and b/student-vol/src/assets/avatar/3.png differ
diff --git a/student-vol/src/assets/avatar/4.png b/student-vol/src/assets/avatar/4.png
new file mode 100644
index 0000000..5172639
Binary files /dev/null and b/student-vol/src/assets/avatar/4.png differ
diff --git a/student-vol/src/assets/avatar/5.png b/student-vol/src/assets/avatar/5.png
new file mode 100644
index 0000000..7342b76
Binary files /dev/null and b/student-vol/src/assets/avatar/5.png differ
diff --git a/student-vol/src/assets/avatar/6.png b/student-vol/src/assets/avatar/6.png
new file mode 100644
index 0000000..c3927a2
Binary files /dev/null and b/student-vol/src/assets/avatar/6.png differ
diff --git a/student-vol/src/assets/avatar/zhiyuanzhe.jpg b/student-vol/src/assets/avatar/zhiyuanzhe.jpg
new file mode 100644
index 0000000..99fa33e
Binary files /dev/null and b/student-vol/src/assets/avatar/zhiyuanzhe.jpg differ
diff --git a/student-vol/src/assets/logo.png b/student-vol/src/assets/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/student-vol/src/assets/logo.png differ
diff --git a/student-vol/src/assets/more.png b/student-vol/src/assets/more.png
new file mode 100644
index 0000000..77679d9
Binary files /dev/null and b/student-vol/src/assets/more.png differ
diff --git a/student-vol/src/assets/p1.png b/student-vol/src/assets/p1.png
index 8bca235..e69554f 100644
Binary files a/student-vol/src/assets/p1.png and b/student-vol/src/assets/p1.png differ
diff --git a/student-vol/src/assets/p2.png b/student-vol/src/assets/p2.png
index 1ee28b6..1d3c9b2 100644
Binary files a/student-vol/src/assets/p2.png and b/student-vol/src/assets/p2.png differ
diff --git a/student-vol/src/assets/p3.png b/student-vol/src/assets/p3.png
index dc840f6..846a2fa 100644
Binary files a/student-vol/src/assets/p3.png and b/student-vol/src/assets/p3.png differ
diff --git a/student-vol/src/assets/p4.png b/student-vol/src/assets/p4.png
new file mode 100644
index 0000000..37fd67c
Binary files /dev/null and b/student-vol/src/assets/p4.png differ
diff --git a/student-vol/src/assets/p5.png b/student-vol/src/assets/p5.png
index 90988fe..cc33f90 100644
Binary files a/student-vol/src/assets/p5.png and b/student-vol/src/assets/p5.png differ
diff --git a/student-vol/src/assets/p6.png b/student-vol/src/assets/p6.png
new file mode 100644
index 0000000..89ef25a
Binary files /dev/null and b/student-vol/src/assets/p6.png differ
diff --git a/student-vol/src/assets/rArrow.png b/student-vol/src/assets/rArrow.png
new file mode 100644
index 0000000..bc47c73
Binary files /dev/null and b/student-vol/src/assets/rArrow.png differ
diff --git a/student-vol/src/assets/search.png b/student-vol/src/assets/search.png
new file mode 100644
index 0000000..c24a9d9
Binary files /dev/null and b/student-vol/src/assets/search.png differ
diff --git a/student-vol/src/components/Home/ActItem.vue b/student-vol/src/components/Home/ActItem.vue
index 49c56c5..2124917 100644
--- a/student-vol/src/components/Home/ActItem.vue
+++ b/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>
diff --git a/student-vol/src/components/Home/User.vue b/student-vol/src/components/Home/User.vue
index a5f8c1d..ae8cc51 100644
--- a/student-vol/src/components/Home/User.vue
+++ b/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>
diff --git a/student-vol/src/components/ServiceRecords/Overview.vue b/student-vol/src/components/ServiceRecords/Overview.vue
index c98cf74..d1e1284 100644
--- a/student-vol/src/components/ServiceRecords/Overview.vue
+++ b/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>
diff --git a/student-vol/src/components/ServiceRecords/RecordItem.vue b/student-vol/src/components/ServiceRecords/RecordItem.vue
index ca149c4..b70d7db 100644
--- a/student-vol/src/components/ServiceRecords/RecordItem.vue
+++ b/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>
diff --git a/student-vol/src/components/ServiceRecords/User.vue b/student-vol/src/components/ServiceRecords/User.vue
index 4e7f988..b66f994 100644
--- a/student-vol/src/components/ServiceRecords/User.vue
+++ b/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>
diff --git a/student-vol/src/views/ActDetails.vue b/student-vol/src/views/ActDetails.vue
index e5e34fc..8a44ec0 100644
--- a/student-vol/src/views/ActDetails.vue
+++ b/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>
diff --git a/student-vol/src/views/HomeView.vue b/student-vol/src/views/HomeView.vue
index adff3c4..f208d5b 100644
--- a/student-vol/src/views/HomeView.vue
+++ b/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>
diff --git a/student-vol/src/views/LoveActs.vue b/student-vol/src/views/LoveActs.vue
index 5e7f9f2..037336e 100644
--- a/student-vol/src/views/LoveActs.vue
+++ b/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>
diff --git a/student-vol/src/views/LoveReport.vue b/student-vol/src/views/LoveReport.vue
index ab5b780..d699999 100644
--- a/student-vol/src/views/LoveReport.vue
+++ b/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>
diff --git a/student-vol/src/views/MyApply.vue b/student-vol/src/views/MyApply.vue
index 903ec7f..f91ea52 100644
--- a/student-vol/src/views/MyApply.vue
+++ b/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>
diff --git a/student-vol/src/views/ServiceDetail.vue b/student-vol/src/views/ServiceDetail.vue
index 64cdc69..b35dd7d 100644
--- a/student-vol/src/views/ServiceDetail.vue
+++ b/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>
diff --git a/student-vol/src/views/ServiceRecords.vue b/student-vol/src/views/ServiceRecords.vue
index f64f158..422b0c3 100644
--- a/student-vol/src/views/ServiceRecords.vue
+++ b/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>
diff --git a/student-vol/src/views/UserCenter.vue b/student-vol/src/views/UserCenter.vue
index 1f985b4..c0def5a 100644
--- a/student-vol/src/views/UserCenter.vue
+++ b/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>
diff --git a/student-vol/vite.config.js b/student-vol/vite.config.js
index 598f260..2b30e35 100644
--- a/student-vol/vite.config.js
+++ b/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(),
+  ],
+})