重构
This commit is contained in:
wchino
@@ -309,7 +309,11 @@ onMounted(fetchList);
|
||||
<input v-model.number="form.sortOrder" type="number" />
|
||||
</div>
|
||||
<div class="form-group row-checks">
|
||||
<label><input type="checkbox" v-model="form.isActive" /> {{ t('deposit.active') }}</label>
|
||||
<label class="check-option">
|
||||
<input type="checkbox" v-model="form.isActive" />
|
||||
<span class="check-option__box" aria-hidden="true"></span>
|
||||
<span>{{ t('deposit.active') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="dialog-actions">
|
||||
<button class="btn-cancel" @click="dialogVisible = false">{{ t('common.cancel') }}</button>
|
||||
@@ -365,4 +369,262 @@ onMounted(fetchList);
|
||||
.lang-row:last-child { margin-bottom: 0; }
|
||||
.lang-tag { flex-shrink: 0; font-size: 10px; font-weight: 700; color: #aaa; background: #252525; padding: 2px 6px; border-radius: 3px; min-width: 48px; text-align: center; }
|
||||
.lang-row input { flex: 1; padding: 5px 8px; border: 1px solid #333; border-radius: 3px; background: #0e0e0e; color: #ddd; font-size: 12px; box-sizing: border-box; }
|
||||
|
||||
.page-payment-methods {
|
||||
padding: 0;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.toolbar h2 {
|
||||
color: var(--text);
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-select,
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.lang-row input {
|
||||
min-height: 34px;
|
||||
border-color: var(--border);
|
||||
border-radius: 7px;
|
||||
background: #ffffff;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
border: 1px solid var(--primary);
|
||||
border-radius: 7px;
|
||||
background: var(--primary);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-light);
|
||||
}
|
||||
|
||||
.data-table {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
border-bottom-color: var(--border-soft);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
background: #fbfaf7;
|
||||
color: var(--text-muted);
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.data-table tbody tr:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.details-cell .sub,
|
||||
.form-group label,
|
||||
.lang-hint {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.qr-thumb,
|
||||
.qr-preview {
|
||||
border: 1px solid var(--border);
|
||||
background: #fbfaf7;
|
||||
}
|
||||
|
||||
.badge {
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.badge-blue {
|
||||
background: var(--info-bg);
|
||||
color: var(--info-text);
|
||||
}
|
||||
|
||||
.badge-green {
|
||||
background: var(--success-bg);
|
||||
color: var(--success-text);
|
||||
}
|
||||
|
||||
.status-on {
|
||||
color: var(--success-text);
|
||||
}
|
||||
|
||||
.status-off {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 7px;
|
||||
background: #ffffff;
|
||||
color: var(--text);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn-sm:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.btn-toggle {
|
||||
border-color: var(--info-border);
|
||||
background: var(--info-bg);
|
||||
color: var(--info-text);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
border-color: var(--danger-border);
|
||||
background: var(--danger-bg);
|
||||
color: var(--danger-text);
|
||||
}
|
||||
|
||||
.dialog-overlay {
|
||||
background: rgba(31, 35, 32, 0.28);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.dialog-box {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
color: var(--text);
|
||||
box-shadow: 0 24px 64px rgba(56, 49, 37, 0.14);
|
||||
}
|
||||
|
||||
.dialog-box h3 {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.row-checks label {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.row-checks .check-option {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
min-height: 34px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #fbfaf7;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.row-checks .check-option:hover {
|
||||
border-color: #d5cfc3;
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.row-checks .check-option input[type='checkbox'] {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.check-option__box {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex: 0 0 16px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #cfc7b9;
|
||||
border-radius: 5px;
|
||||
background: #ffffff;
|
||||
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.check-option__box::after {
|
||||
content: '';
|
||||
width: 5px;
|
||||
height: 9px;
|
||||
border: solid #ffffff;
|
||||
border-width: 0 2px 2px 0;
|
||||
opacity: 0;
|
||||
transform: rotate(45deg) translateY(-1px);
|
||||
transition: opacity 0.12s ease;
|
||||
}
|
||||
|
||||
.row-checks .check-option input[type='checkbox']:checked + .check-option__box {
|
||||
border-color: var(--primary);
|
||||
background: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(31, 35, 32, 0.08);
|
||||
}
|
||||
|
||||
.row-checks .check-option input[type='checkbox']:checked + .check-option__box::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.row-checks .check-option input[type='checkbox']:focus-visible + .check-option__box {
|
||||
box-shadow: 0 0 0 3px rgba(31, 35, 32, 0.14);
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 7px;
|
||||
background: #ffffff;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.lang-section {
|
||||
border-color: var(--border-soft);
|
||||
background: #fbfaf7;
|
||||
}
|
||||
|
||||
.lang-tag {
|
||||
background: #f0ede6;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.toolbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.actions,
|
||||
.filter-select,
|
||||
.actions .btn-primary {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dialog-box {
|
||||
min-width: 0;
|
||||
width: calc(100vw - 32px);
|
||||
max-height: calc(100dvh - 32px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user