@import '../globals.scss'; | |
//全局容器样式 | |
.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; | |
} | |
} | |
} | |
} | |
//发布资源弹窗样式 | |
.publish-dialog { | |
width: 600px !important; | |
max-width: 90vw; | |
.p-dialog-header { | |
font-size: 1.5rem; | |
font-weight: bold; | |
color: $heading-color; | |
padding-bottom: 0.5rem; | |
} | |
.p-dialog-content { | |
padding-top: 0; | |
padding-bottom: 0; | |
.publish-form { | |
display: flex; | |
flex-direction: column; | |
gap: 1.5rem; | |
margin-top: 1rem; | |
.form-field { | |
display: flex; | |
flex-direction: column; | |
gap: 0.5rem; | |
.form-field-header { | |
//*号的样式 | |
.form-field-sign { | |
color: red; | |
margin-right: 5px; | |
} | |
} | |
label { | |
font-weight: 600; | |
color: $heading-color; | |
} | |
input, | |
textarea { | |
padding: 0.75rem 1rem; | |
border-radius: 8px; | |
font-size: 1rem; | |
color: #2d3748; | |
} | |
.p-fileupload { | |
.p-button { | |
width: 100%; | |
justify-content: center; | |
border: none; | |
margin-bottom: 1rem; | |
} | |
} | |
//资源分类样式 | |
.form-field-classify { | |
display: flex; | |
justify-content: space-between; | |
.ml-2 { | |
margin-left: 10px; | |
} | |
} | |
} | |
} | |
} | |
} | |