feat: 暂时隐藏用户登录认证功能
This commit is contained in:
hzm
347
app/globals.css
347
app/globals.css
@@ -14,14 +14,15 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
background: radial-gradient(1200px 600px at 10% -10%, rgba(96,165,250,0.15), transparent 40%) , radial-gradient(1000px 500px at 90% 0%, rgba(34,211,238,0.12), transparent 45%), var(--bg);
|
||||
background: radial-gradient(1200px 600px at 10% -10%, rgba(96, 165, 250, 0.15), transparent 40%), radial-gradient(1000px 500px at 90% 0%, rgba(34, 211, 238, 0.12), transparent 45%), var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@@ -32,10 +33,10 @@ body {
|
||||
}
|
||||
|
||||
.glass {
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,0.25);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
@@ -65,13 +66,29 @@ body {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.col-12 { grid-column: span 12; }
|
||||
.col-6 { grid-column: span 6; }
|
||||
.col-4 { grid-column: span 4; }
|
||||
.col-3 { grid-column: span 3; }
|
||||
.col-12 {
|
||||
grid-column: span 12;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column: span 6;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.col-6, .col-4, .col-3 { grid-column: span 12; }
|
||||
|
||||
.col-6,
|
||||
.col-4,
|
||||
.col-3 {
|
||||
grid-column: span 12;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
@@ -101,6 +118,7 @@ body {
|
||||
.content {
|
||||
padding-top: 90px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -110,6 +128,7 @@ body {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.add-fund-section {
|
||||
margin-top: 60px;
|
||||
}
|
||||
@@ -133,9 +152,10 @@ body {
|
||||
font-size: 14px;
|
||||
transition: border-color 200ms ease, box-shadow 200ms ease;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(96,165,250,0.2);
|
||||
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
|
||||
}
|
||||
|
||||
/* 美化并隐藏原生数字输入的上下按钮，使用自定义按钮 */
|
||||
@@ -144,6 +164,7 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
@@ -159,10 +180,12 @@ input[type="number"] {
|
||||
cursor: pointer;
|
||||
transition: transform 150ms ease, box-shadow 200ms ease;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 20px rgba(34,211,238,0.25);
|
||||
box-shadow: 0 10px 20px rgba(34, 211, 238, 0.25);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
@@ -200,10 +223,12 @@ input[type="number"] {
|
||||
background: #0b1220;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.badge-v span {
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.badge-v strong {
|
||||
font-size: 11px;
|
||||
}
|
||||
@@ -213,14 +238,17 @@ input[type="number"] {
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat .label {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.stat .value {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stat .badge {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
@@ -228,60 +256,80 @@ input[type="number"] {
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.input {
|
||||
font-size: 16px; /* 防止 iOS 在输入时自动放大 */
|
||||
font-size: 16px;
|
||||
/* 防止 iOS 在输入时自动放大 */
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.stat .label {
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.stat .value {
|
||||
font-size: 15px;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stat .badge {
|
||||
padding: 2px 6px;
|
||||
font-size: 13px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.card .title {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item .name {
|
||||
max-width: 100px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item .badge {
|
||||
padding: 2px 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.up { color: var(--danger); }
|
||||
.down { color: var(--success); }
|
||||
|
||||
.up {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.down {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.list { grid-template-columns: 1fr; }
|
||||
.list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
@@ -293,6 +341,7 @@ input[type="number"] {
|
||||
border: 1px solid var(--border);
|
||||
background: #0b1220;
|
||||
}
|
||||
|
||||
.item .name {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
@@ -306,6 +355,7 @@ input[type="number"] {
|
||||
max-width: none;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.item .weight {
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
@@ -359,20 +409,24 @@ input[type="number"] {
|
||||
cursor: pointer;
|
||||
transition: box-shadow 200ms ease, border-color 200ms ease, transform 150ms ease, color 200ms ease;
|
||||
}
|
||||
|
||||
.icon-button:hover {
|
||||
color: var(--text);
|
||||
transform: translateY(-1px);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.icon-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.icon-button.danger {
|
||||
background: linear-gradient(180deg, #ef4444, #f87171);
|
||||
color: #2b0b0b;
|
||||
}
|
||||
|
||||
.icon-button.danger:hover {
|
||||
box-shadow: 0 10px 20px rgba(248,113,113,0.25);
|
||||
box-shadow: 0 10px 20px rgba(248, 113, 113, 0.25);
|
||||
}
|
||||
|
||||
.fav-button {
|
||||
@@ -385,9 +439,11 @@ input[type="number"] {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.fav-button:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.fav-button.active {
|
||||
color: var(--accent);
|
||||
}
|
||||
@@ -456,8 +512,15 @@ input[type="number"] {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-right { text-align: right; justify-content: flex-end; }
|
||||
.text-center { text-align: center; justify-content: center; }
|
||||
.text-right {
|
||||
text-align: right;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.name-cell {
|
||||
gap: 8px;
|
||||
@@ -501,31 +564,58 @@ input[type="number"] {
|
||||
.table-header-row {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
grid-template-columns: 1fr 80px 100px;
|
||||
grid-template-areas:
|
||||
grid-template-areas:
|
||||
"name value change"
|
||||
"name time profit";
|
||||
gap: 4px 12px;
|
||||
padding: 12px !important;
|
||||
}
|
||||
.name-cell { grid-area: name; }
|
||||
.value-cell { grid-area: value; }
|
||||
.change-cell { grid-area: change; }
|
||||
.profit-cell { grid-area: profit; }
|
||||
.time-cell {
|
||||
grid-area: time;
|
||||
|
||||
.name-cell {
|
||||
grid-area: name;
|
||||
}
|
||||
|
||||
.value-cell {
|
||||
grid-area: value;
|
||||
}
|
||||
|
||||
.change-cell {
|
||||
grid-area: change;
|
||||
}
|
||||
|
||||
.profit-cell {
|
||||
grid-area: profit;
|
||||
}
|
||||
|
||||
.time-cell {
|
||||
grid-area: time;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.action-cell { display: none; }
|
||||
.holding-cell { display: none; }
|
||||
.holding-amount-cell { display: none; }
|
||||
|
||||
.action-cell {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.holding-cell {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.holding-amount-cell {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table-cell.time-cell span {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-compact .up { color: var(--danger); }
|
||||
.stat-compact .up {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.action-cell .danger {
|
||||
display: none;
|
||||
@@ -534,7 +624,8 @@ input[type="number"] {
|
||||
|
||||
.swipe-action-bg {
|
||||
position: absolute;
|
||||
top: 1px; /* 留出一点缝隙，或者与 border 对齐 */
|
||||
top: 1px;
|
||||
/* 留出一点缝隙，或者与 border 对齐 */
|
||||
bottom: 1px;
|
||||
right: 0;
|
||||
width: 80px;
|
||||
@@ -551,7 +642,10 @@ input[type="number"] {
|
||||
cursor: pointer;
|
||||
box-shadow: inset 10px 0 20px -10px rgba(0,0,0,0.2); /* 增加一点内阴影，增加层次感 */
|
||||
}
|
||||
.stat-compact .down { color: var(--success); }
|
||||
|
||||
.stat-compact .down {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
transition: all 0.3s ease;
|
||||
@@ -572,9 +666,11 @@ input[type="number"] {
|
||||
flex-direction: column;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
justify-content: flex-start; /* 移动端改为左对齐 */
|
||||
justify-content: flex-start;
|
||||
/* 移动端改为左对齐 */
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
backdrop-filter: none;
|
||||
@@ -619,23 +715,26 @@ input[type="number"] {
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(2,6,23,0.6);
|
||||
background: rgba(2, 6, 23, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.modal {
|
||||
width: 560px;
|
||||
max-width: 92vw;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -1051,8 +1150,188 @@ input[type="number"] {
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
||||
.tabs {
|
||||
max-width: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 用户菜单样式 ========== */
|
||||
.user-menu-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-menu-trigger {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-menu-trigger.logged-in {
|
||||
border-color: var(--primary);
|
||||
background: rgba(34, 211, 238, 0.1);
|
||||
}
|
||||
|
||||
.user-avatar-small {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||||
color: #05263b;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.user-menu-dropdown {
|
||||
position: fixed;
|
||||
top: 76px;
|
||||
right: 16px;
|
||||
min-width: 200px;
|
||||
padding: 8px;
|
||||
z-index: 100;
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.user-menu-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
.user-avatar-large {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||||
color: #05263b;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-email {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.user-status {
|
||||
font-size: 11px;
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.user-menu-divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.user-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.user-menu-item:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.user-menu-item.danger {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.user-menu-item.danger:hover {
|
||||
background: rgba(248, 113, 113, 0.1);
|
||||
}
|
||||
|
||||
/* ========== 登录模态框样式 ========== */
|
||||
.login-modal {
|
||||
max-width: 400px !important;
|
||||
}
|
||||
|
||||
.login-message {
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.login-message.error {
|
||||
background: rgba(248, 113, 113, 0.15);
|
||||
border: 1px solid rgba(248, 113, 113, 0.3);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.login-message.success {
|
||||
background: rgba(52, 211, 153, 0.15);
|
||||
border: 1px solid rgba(52, 211, 153, 0.3);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.button.secondary:hover {
|
||||
border-color: var(--muted);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* ========== 移动端响应式 ========== */
|
||||
@media (max-width: 640px) {
|
||||
.user-menu-dropdown {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-width: 100%;
|
||||
border-radius: 20px 20px 0 0;
|
||||
padding: 16px;
|
||||
padding-bottom: calc(16px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.user-menu-header {
|
||||
padding: 16px 8px;
|
||||
}
|
||||
|
||||
.user-menu-item {
|
||||
padding: 14px 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.login-modal {
|
||||
max-width: 100% !important;
|
||||
margin: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user