add resource detail and user part interface
Change-Id: I83541b5dc80bde465878cdccdbc77431b56dbff6
diff --git a/src/app/user/user.scss b/src/app/user/user.scss
new file mode 100644
index 0000000..0d044bc
--- /dev/null
+++ b/src/app/user/user.scss
@@ -0,0 +1,172 @@
+//全局容器样式
+.user-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 2rem;
+
+ .p-tabview-title {
+ font-size: 20px;
+ }
+}
+
+//个人信息样式
+.user-profile-card {
+ display: flex;
+
+ .user-avatar {
+ height: 200px;
+ width: 200px;
+ margin: 30px;
+ }
+ .user-info {
+ width: 796px;
+ position: relative;
+ margin-top: 22px;
+
+ .user-detail-info {
+ display: flex;
+ justify-content: space-between;
+
+ .name-container {
+ width: 750px;
+ margin-left: 1rem;
+ .name {
+ font-size: 43px;
+ margin-bottom: 3px;
+ }
+
+ .signature {
+ margin-top: 0;
+ font-size: 20px;
+ }
+ }
+
+ .stats-container {
+ display: flex;
+ flex-wrap: wrap; // 允许换行
+ margin-top: 60px;
+
+ .stats {
+ width: 50%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-bottom: 16px;
+
+ // 左上角：粉丝
+ &:nth-child(1) {
+ justify-content: flex-start; // 左对齐
+ }
+
+ // 右上角：累计上传量
+ &:nth-child(2) {
+ justify-content: flex-end; // 右对齐
+ }
+
+ // 左下角：关注
+ &:nth-child(3) {
+ justify-content: flex-start; // 左对齐
+ }
+
+ // 右下角：累计被下载量
+ &:nth-child(4) {
+ justify-content: flex-end; // 右对齐
+ }
+
+ .stats-label {
+ font-size: 18px;
+ color: #666;
+ margin-right: 4px;
+ white-space: nowrap;
+ }
+
+ .stats-value {
+ font-size: 20px;
+ font-weight: bold;
+ color: #333;
+ }
+ }
+ }
+ }
+
+ .action-button {
+ align-self: flex-end; // 底部对齐
+ margin-top: auto; // 自动上边距将其推到底部
+ // 固定位置：
+ position: absolute;
+ right: 0;
+ bottom: 10px;
+ }
+ }
+}
+
+
+//每一模块的首部样式
+.section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 20px;
+}
+
+//每个模块中的资源样式
+.resource-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 1rem;
+
+ .resource-card {
+ transition: transform 0.2s ease;
+ cursor: pointer;
+ box-shadow: none !important;
+
+ .p-image {
+ img {
+ border-radius: 0.5rem 0.5rem 0 0;
+ object-fit: cover;
+ }
+ }
+
+ .p-card-body {
+ padding: 0;
+ }
+
+ .p-card-content {
+ padding: 0;
+ }
+
+ &:hover {
+ transform: translateY(-4px);
+ }
+
+ .card-content {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ margin-left: 16px;
+ margin-right: 16px;
+ margin-bottom: 16px;
+
+ h3 {
+ margin: 1rem 0;
+ font-size: 1rem;
+ line-height: 1.5;
+ color: #2d3748;
+ }
+
+ .view-count {
+ position: absolute;
+ bottom: 0rem;
+ right: 0rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ color: #718096;
+ font-size: 0.9rem;
+ }
+ }
+ }
+}
+
+
+