前段
Change-Id: I718d4d07ea03c6d2b6bcbd4d426c5d1af2201bf4
diff --git a/src/components/Personal/Personal.css b/src/components/Personal/Personal.css
new file mode 100644
index 0000000..c087ac6
--- /dev/null
+++ b/src/components/Personal/Personal.css
@@ -0,0 +1,162 @@
+/* Personal.css */
+.personal-container {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 20px;
+ }
+
+ .back-button {
+ background: none;
+ border: none;
+ color: #1890ff;
+ cursor: pointer;
+ font-size: 16px;
+ margin-bottom: 20px;
+ padding: 5px 0;
+ }
+
+ .profile-card {
+ background: #fff;
+ border-radius: 8px;
+ padding: 20px;
+ margin-bottom: 20px;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+ }
+
+ .profile-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ }
+
+ .profile-avatar {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ margin-right: 20px;
+ object-fit: cover;
+ }
+
+ .profile-info {
+ flex-grow: 1;
+ }
+
+ .username {
+ font-size: 24px;
+ margin: 0 0 5px;
+ }
+
+ .user-meta {
+ display: flex;
+ gap: 15px;
+ color: #666;
+ font-size: 14px;
+ }
+
+ .stats-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 15px;
+ }
+
+ .stat-item {
+ background: #f5f5f5;
+ border-radius: 6px;
+ padding: 15px;
+ text-align: center;
+ }
+
+ .stat-label {
+ font-size: 14px;
+ color: #666;
+ margin-bottom: 5px;
+ }
+
+ .stat-value {
+ font-size: 18px;
+ font-weight: bold;
+ }
+
+ .quota-card {
+ background: #fff;
+ border-radius: 8px;
+ padding: 20px;
+ margin-bottom: 20px;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+ }
+
+ .quota-card h3 {
+ margin-top: 0;
+ margin-bottom: 15px;
+ }
+
+ .quota-info {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+ }
+
+ .quota-used {
+ color: #1890ff;
+ }
+
+ .quota-remaining {
+ color: #52c41a;
+ }
+
+ .progress-bar {
+ height: 10px;
+ background: #f0f0f0;
+ border-radius: 5px;
+ margin-bottom: 10px;
+ overflow: hidden;
+ }
+
+ .progress-fill {
+ height: 100%;
+ background: #1890ff;
+ border-radius: 5px;
+ transition: width 0.3s ease;
+ }
+
+ .quota-total {
+ text-align: right;
+ color: #666;
+ font-size: 14px;
+ }
+
+ .action-cards {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 15px;
+ }
+
+ .action-card {
+ background: #fff;
+ border-radius: 8px;
+ padding: 20px;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+ cursor: pointer;
+ transition: transform 0.2s ease;
+ }
+
+ .action-card:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+ }
+
+ .action-card h3 {
+ margin-top: 0;
+ color: #1890ff;
+ }
+
+ .action-card p {
+ color: #666;
+ margin-bottom: 0;
+ }
+
+ .subpage-container {
+ margin-top: 20px;
+ border-top: 1px solid #f0f0f0;
+ padding-top: 20px;
+ }
\ No newline at end of file