159 lines
No EOL
2.2 KiB
Text
159 lines
No EOL
2.2 KiB
Text
/* 账号与安全页面样式 - 深色主题 */
|
||
.container {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background-color: #000000;
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* 导航栏样式 - 移除固定高度设置，由JS动态控制 */
|
||
.navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: #1a1a1a;
|
||
padding: 0 16px;
|
||
z-index: 10;
|
||
box-sizing: content-box; /* 确保padding不会影响总高度计算 */
|
||
}
|
||
|
||
.back-btn {
|
||
width: 48px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.icon {
|
||
font-size: 20px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.title {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 34rpx;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* 主内容区 */
|
||
.content {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 16px;
|
||
padding-top: calc(44px + env(safe-area-inset-top) + 16px);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 分区样式 */
|
||
.section {
|
||
margin-bottom: 24px;
|
||
background-color: #1a1a1a;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.section-title {
|
||
display: block;
|
||
padding: 16px;
|
||
font-size: 14px;
|
||
color: #888888;
|
||
background-color: #121212;
|
||
}
|
||
|
||
/* 列表项样式 */
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16px;
|
||
border-bottom: 1px solid #333333;
|
||
}
|
||
|
||
.item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.item-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20px;
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.item-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.item-title {
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
margin-bottom: 4px;
|
||
display: block;
|
||
}
|
||
|
||
.item-value {
|
||
font-size: 14px;
|
||
color: #aaaaaa;
|
||
}
|
||
|
||
.item-arrow {
|
||
font-size: 16px;
|
||
color: #888888;
|
||
}
|
||
|
||
/* 开关样式 */
|
||
.switch-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
flex: 1;
|
||
}
|
||
|
||
/* 图标颜色 */
|
||
.phone {
|
||
color: #07c160;
|
||
}
|
||
|
||
.wechat {
|
||
color: #07c160;
|
||
}
|
||
|
||
.email {
|
||
color: #1aad19;
|
||
}
|
||
|
||
.password {
|
||
color: #07c160;
|
||
}
|
||
|
||
.twofactor {
|
||
color: #07c160;
|
||
}
|
||
|
||
.recommend {
|
||
color: #07c160;
|
||
}
|
||
|
||
.blocked {
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
/* 安全区域适配 */
|
||
@media screen and (device-width: 375px) and (device-height: 812px) {
|
||
.navbar {
|
||
padding-top: 44px;
|
||
height: 88px;
|
||
}
|
||
|
||
.content {
|
||
padding-top: 104px;
|
||
}
|
||
} |