/* 个人中心页面样式 */
|
.person-center {
|
min-height: 100vh;
|
background-color: #f5f5f5;
|
position: relative;
|
width: 100%;
|
overflow-x: hidden;
|
display: flex;
|
flex-direction: column;
|
|
&-navbar {
|
background-color: #1a6fb8 !important;
|
display: flex;
|
height: 48px;
|
}
|
|
/* 顶部个人信息区域 */
|
&-header {
|
background: linear-gradient(180deg, #1a6fb8 0%, #3388d9 100%);
|
padding-top: 42px;
|
padding-bottom: 42px;
|
color: #fff;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
}
|
|
&-user {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
}
|
|
&-avatar {
|
width: 119px;
|
height: 119px;
|
border-radius: 50%;
|
border: 2px solid rgba(255, 255, 255, 0.6);
|
margin-bottom: 16px;
|
overflow: hidden;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
}
|
|
&-info {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
}
|
|
&-name-container {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 8px;
|
}
|
|
&-name {
|
font-size: 18px;
|
font-weight: 500;
|
margin-right: 8px;
|
display: flex;
|
align-items: center;
|
}
|
|
&-name-edit {
|
width: 15px;
|
height: 15px;
|
display: flex;
|
}
|
|
&-time {
|
font-size: 12px;
|
opacity: 0.8;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
/* 卡片区域 */
|
&-card {
|
width: 100%;
|
flex: 1;
|
background: #f2f2f2;
|
border-radius: 20px 20px 0px 0px;
|
margin-top: -20px;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
}
|
|
/* 菜单区域 */
|
&-menu {
|
background-color: #fff;
|
border-radius: 8px;
|
margin: 16px;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
}
|
|
&-menu-item {
|
display: flex;
|
align-items: center;
|
padding: 16px;
|
position: relative;
|
border-bottom: 1px solid #f5f5f5;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
}
|
|
&-menu-icon {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-right: 12px;
|
|
img {
|
width: 15px;
|
height: 15px;
|
object-fit: contain;
|
}
|
}
|
|
&-menu-text {
|
flex: 1;
|
font-size: 16px;
|
color: #333;
|
display: flex;
|
align-items: center;
|
}
|
|
&-menu-arrow {
|
color: #ccc;
|
font-size: 14px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
/* 退出登录按钮 */
|
&-logout {
|
width: 100%;
|
padding: 0 16px;
|
box-sizing: border-box;
|
margin-top: auto;
|
margin-bottom: 16px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
&-logout-btn {
|
width: 100%;
|
height: 44px;
|
background: #1a6fb8 !important;
|
border-color: #1a6fb8 !important;
|
font-size: 16px;
|
border-radius: 8px;
|
color: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
|
/* 媒体查询适配不同屏幕尺寸 */
|
@media screen and (max-width: 375px) {
|
.person-center {
|
&-card {
|
border-radius: 16px 16px 0 0;
|
}
|
|
&-menu {
|
margin: 12px;
|
}
|
|
&-logout {
|
padding: 0 12px;
|
}
|
}
|
}
|
|
@media screen and (min-width: 414px) {
|
.person-center {
|
&-avatar {
|
width: 90px;
|
height: 90px;
|
}
|
|
&-name {
|
font-size: 20px;
|
}
|
|
&-menu-item {
|
padding: 18px 16px;
|
}
|
}
|
}
|
