feat: 全站视觉焕新与悬浮玻璃 TabBar 迁移
This commit is contained in:
@@ -1,90 +1,140 @@
|
||||
/* ============================================================
|
||||
UserDatabase Page — 本地用户数据库
|
||||
============================================================ */
|
||||
|
||||
.udb-page {
|
||||
padding: 0 24px 40px;
|
||||
padding: 0 32rpx calc(24rpx + env(safe-area-inset-bottom));
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 锁屏验证 */
|
||||
.udb-lock-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.udb-lock-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 60px 40px;
|
||||
padding: 64rpx 40rpx;
|
||||
text-align: center;
|
||||
margin-top: 48rpx;
|
||||
}
|
||||
|
||||
.udb-lock-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 24px;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.udb-lock-title {
|
||||
font-size: 36px;
|
||||
display: block;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.udb-lock-desc {
|
||||
font-size: 26px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 32px;
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.6;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.udb-password-input {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
height: 88rpx;
|
||||
background: var(--bg-input);
|
||||
border: 1rpx solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 0 24px;
|
||||
font-size: 30px;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 30rpx;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.udb-password-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.udb-error {
|
||||
font-size: 24px;
|
||||
color: var(--danger);
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
color: var(--danger);
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.udb-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
font-size: 30px;
|
||||
height: 96rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 顶部标题 */
|
||||
.page-header.udb-header {
|
||||
min-height: 88rpx;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 24rpx;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.udb-header .page-title {
|
||||
text-align: center;
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* 工具栏 */
|
||||
.udb-toolbar {
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: 8rpx 0 24rpx;
|
||||
}
|
||||
|
||||
.udb-add-btn {
|
||||
padding: 14px 28px;
|
||||
font-size: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 80rpx;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 数据表格 */
|
||||
.udb-table {
|
||||
background: var(--bg-card);
|
||||
border: 1rpx solid var(--border);
|
||||
border-radius: 24px;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.udb-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 16px;
|
||||
min-height: 112rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
border-bottom: 1rpx solid var(--border);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.udb-row:last-child {
|
||||
@@ -93,31 +143,31 @@
|
||||
|
||||
.udb-header {
|
||||
background: var(--bg-input);
|
||||
padding: 16px;
|
||||
min-height: 80rpx;
|
||||
}
|
||||
|
||||
.udb-header .udb-col {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
font-size: 24rpx;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.udb-col {
|
||||
font-size: 24px;
|
||||
font-size: 24rpx;
|
||||
color: var(--text-secondary);
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 0 6px;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
.col-nick {
|
||||
flex: 0 0 22%;
|
||||
flex: 0 0 24%;
|
||||
}
|
||||
|
||||
.col-id {
|
||||
flex: 0 0 36%;
|
||||
flex: 0 0 32%;
|
||||
}
|
||||
|
||||
.col-stats {
|
||||
@@ -127,10 +177,12 @@
|
||||
|
||||
.col-action {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
gap: 12rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.udb-row.active {
|
||||
@@ -138,11 +190,13 @@
|
||||
}
|
||||
|
||||
.udb-link {
|
||||
padding: 6px 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 22px;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.2;
|
||||
color: var(--accent-secondary);
|
||||
background: var(--accent-secondary-soft);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.udb-danger {
|
||||
@@ -151,55 +205,78 @@
|
||||
}
|
||||
|
||||
.udb-current {
|
||||
font-size: 22px;
|
||||
font-size: 22rpx;
|
||||
color: var(--accent-secondary);
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.udb-empty {
|
||||
padding: 40px;
|
||||
padding: 80rpx 24rpx;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: 28px;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/* 新建账号弹窗 */
|
||||
.udb-page .modal-overlay {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48rpx;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.udb-add-card {
|
||||
padding: 48px 36px;
|
||||
width: 80%;
|
||||
width: 100%;
|
||||
max-width: 640rpx;
|
||||
padding: 40rpx;
|
||||
border-radius: 32rpx;
|
||||
background: var(--bg-card);
|
||||
border: 1rpx solid var(--border);
|
||||
box-shadow: var(--shadow-elevated);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.udb-add-title {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 24px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 32rpx;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.udb-add-input {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
height: 88rpx;
|
||||
background: var(--bg-input);
|
||||
border: 1rpx solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 0 24px;
|
||||
font-size: 28px;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 32px;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.udb-add-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.udb-add-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.udb-add-actions .btn-secondary,
|
||||
.udb-add-actions .btn-primary {
|
||||
flex: 1;
|
||||
padding: 18px 0;
|
||||
text-align: center;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -86,8 +86,8 @@ export default function UserDatabasePage() {
|
||||
return (
|
||||
<View className={`theme-${resolvedTheme}`}>
|
||||
<ThemedPageMeta />
|
||||
<View className='udb-page'>
|
||||
<View className='udb-lock-card surface-card mt-20'>
|
||||
<View className='udb-page udb-lock-page' style={{ paddingTop: `${safe.headerPaddingTop}px` }}>
|
||||
<View className='udb-lock-card surface-card'>
|
||||
<Image className='udb-lock-icon' src={assetUrl('/icon/账号管理.png')} mode='aspectFit' />
|
||||
<Text className='udb-lock-title'>管理员验证</Text>
|
||||
<Text className='udb-lock-desc'>请输入密码以访问用户数据库</Text>
|
||||
@@ -116,7 +116,7 @@ export default function UserDatabasePage() {
|
||||
<ThemedPageMeta />
|
||||
<View className='udb-page'>
|
||||
|
||||
<View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
|
||||
<View className='page-header udb-header' style={{ paddingTop: `${safe.headerPaddingTop}px` }}>
|
||||
<Text className='page-title'>本地用户数据库</Text>
|
||||
</View>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user