通知与推荐功能，css样式优化
Change-Id: I33d934bfdca88b7a8e6742be2a3c7323d28ffbcf
diff --git a/src/components/Personal/Personal.css b/src/components/Personal/Personal.css
index 28a1adb..69006d2 100644
--- a/src/components/Personal/Personal.css
+++ b/src/components/Personal/Personal.css
@@ -1,217 +1,95 @@
-/* Personal.css */
+/* 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;
- }
-
-
- /* Personal.css */
-/* ... 其他已有样式 ... */
-
-/* 下载进度卡片样式 */
-.progress-card {
- background: #fff;
- border-radius: 8px;
- padding: 20px;
- margin-bottom: 20px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ max-width: 1000px;
+ margin: 0 auto;
+ padding: 25px;
+ font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+ animation: fadeIn 0.5s ease-out forwards;
}
-.download-task {
- margin-bottom: 15px;
+/* 返回按钮 - 渐变风格 */
+.back-button {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 16px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
+ margin-bottom: 30px;
+ box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
}
-.task-info {
- display: flex;
- justify-content: space-between;
- margin-bottom: 5px;
+.back-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
}
-.task-id {
- font-size: 14px;
- color: #666;
+.back-button::before {
+ content: "←";
}
-.task-progress {
- font-size: 14px;
- font-weight: bold;
- color: #1890ff;
-}
-
-.progress-bar {
- height: 8px;
- background: #f0f0f0;
- border-radius: 4px;
+/* 用户资料卡片 - 3D效果 */
+.profile-card {
+ background: white;
+ border-radius: 12px;
+ padding: 25px;
+ margin-bottom: 25px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+ transition: transform 0.3s, box-shadow 0.3s;
+ position: relative;
overflow: hidden;
}
-.progress-fill {
- height: 100%;
- background: #1890ff;
- border-radius: 4px;
- transition: width 0.3s ease;
+.profile-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}
+.profile-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 25px;
+}
+
+.profile-avatar {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ margin-right: 25px;
+ object-fit: cover;
+ border: 4px solid rgba(30, 60, 114, 0.1);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s;
+}
+
+.profile-avatar:hover {
+ transform: scale(1.05);
+}
+
+.username {
+ font-size: 28px;
+ margin: 0 0 10px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ font-weight: 800;
+}
+
+.user-meta {
+ display: flex;
+ gap: 20px;
+}
.user-meta span {
- margin-right: 15px;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ font-size: 15px;
color: #666;
}
@@ -219,3 +97,221 @@
color: #ff9800;
font-weight: bold;
}
+
+/* 统计数据网格 - 卡片式设计 */
+.stats-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 20px;
+}
+
+.stat-item {
+ background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
+ border-radius: 10px;
+ padding: 20px;
+ text-align: center;
+ transition: transform 0.3s;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+}
+
+.stat-item:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+}
+
+.stat-label {
+ font-size: 15px;
+ color: #666;
+ margin-bottom: 10px;
+}
+
+.stat-value {
+ font-size: 22px;
+ font-weight: 700;
+ color: #1e3c72;
+}
+
+/* 下载额度卡片 - 渐变色 */
+.quota-card {
+ background: white;
+ border-radius: 12px;
+ padding: 25px;
+ margin-bottom: 25px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+.quota-card h3 {
+ margin-top: 0;
+ margin-bottom: 20px;
+ color: #1e3c72;
+ font-size: 20px;
+}
+
+.quota-info {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 15px;
+ font-size: 15px;
+}
+
+.quota-used {
+ color: #ff4d4f;
+ font-weight: 600;
+}
+
+.quota-remaining {
+ color: #52c41a;
+ font-weight: 600;
+}
+
+.progress-bar {
+ height: 12px;
+ background: #f0f2f5;
+ border-radius: 6px;
+ margin-bottom: 15px;
+ overflow: hidden;
+}
+
+.progress-fill {
+ height: 100%;
+ border-radius: 6px;
+ transition: width 0.5s ease;
+}
+
+.quota-total {
+ text-align: right;
+ color: #666;
+ font-size: 14px;
+}
+
+/* 下载进度卡片 */
+.progress-card {
+ background: white;
+ border-radius: 12px;
+ padding: 25px;
+ margin-bottom: 25px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+.progress-card h3 {
+ margin-top: 0;
+ margin-bottom: 20px;
+ color: #1e3c72;
+ font-size: 20px;
+}
+
+.download-task {
+ margin-bottom: 20px;
+}
+
+.task-info {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 8px;
+}
+
+.task-id {
+ font-size: 15px;
+ color: #666;
+}
+
+.task-progress {
+ font-size: 15px;
+ font-weight: 600;
+ color: #1890ff;
+}
+
+/* 功能卡片区 - 网格布局 */
+.action-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 20px;
+ margin-bottom: 30px;
+}
+
+.action-card {
+ background: white;
+ border-radius: 12px;
+ padding: 25px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+ cursor: pointer;
+ transition: all 0.3s;
+ border: 1px solid rgba(30, 60, 114, 0.1);
+ text-align: center;
+}
+
+.action-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+ border-color: rgba(30, 60, 114, 0.2);
+}
+
+.action-card h3 {
+ margin-top: 0;
+ margin-bottom: 15px;
+ color: #1e3c72;
+ font-size: 20px;
+}
+
+.action-card p {
+ color: #666;
+ margin-bottom: 0;
+ font-size: 15px;
+}
+
+/* 子页面容器 */
+.subpage-container {
+ margin-top: 30px;
+ border-top: 2px solid #f0f2f5;
+ padding-top: 30px;
+}
+
+/* 加载和错误状态 */
+.loading, .error {
+ text-align: center;
+ padding: 50px;
+ font-size: 18px;
+ background: white;
+ border-radius: 12px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+ margin: 20px 0;
+}
+
+.error {
+ color: #ff4d4f;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(10px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+ .personal-container {
+ padding: 15px;
+ }
+
+ .profile-header {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .profile-avatar {
+ margin-right: 0;
+ margin-bottom: 15px;
+ }
+
+ .user-meta {
+ justify-content: center;
+ }
+
+ .stats-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .action-cards {
+ grid-template-columns: 1fr;
+ }
+}
\ No newline at end of file