159 lines
2.2 KiB
Text
159 lines
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;
|
|||
|
|
}
|
|||
|
|
}
|