#aksrt-admin-app, #aksrt-admin-app * { box-sizing: border-box; } #aksrt-admin-app { min-height: 100%; color: #333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif; font-size: 14px; line-height: 1.6; } /* ==================== FA5 Icon in NaiveUI Menu ==================== */ #aksrt-admin-app .n-menu .n-menu-item-content i[class*="fa-"], #aksrt-admin-app .n-menu-item-content i[class*="fa-"] { font-size: 18px; width: 18px; text-align: center; display: inline-flex; align-items: center; justify-content: center; color: inherit; opacity: 0.75; transition: opacity 0.15s; } #aksrt-admin-app .n-menu-item-content--selected i[class*="fa-"], #aksrt-admin-app .n-menu-item-content:hover i[class*="fa-"] { opacity: 1; } #aksrt-admin-app .n-layout, #aksrt-admin-app .n-layout-sider { min-height: 100vh; } #aksrt-admin-app .aksrt-admin-layout { min-height: 100vh; background: rgb(249, 250, 252); } #aksrt-admin-app .aksrt-csf-shell .n-layout-sider { background: #fff; border-right: 1px solid #f2f2f2; } #aksrt-admin-app .aksrt-csf-shell .n-menu-item-content { border-bottom: 1px solid #f4f4f4; border-radius: 0; } #aksrt-admin-app .aksrt-csf-shell .n-menu-item-content--selected, #aksrt-admin-app .aksrt-csf-shell .n-menu-item-content:hover { color: #0997f5; background: rgb(249, 250, 252); } #aksrt-admin-app .aksrt-schema-page { max-width: none; } #aksrt-admin-app .aksrt-form-renderer__header { margin: -30px -30px 0; padding: 18px 30px; border-bottom: 1px solid #eee; background: #fff; } #aksrt-admin-app .aksrt-form-renderer__title { color: #0991f5; font-size: 19px; } #aksrt-admin-app .aksrt-field-group { margin: 0 -30px; border: 0; border-radius: 0; background: transparent; } #aksrt-admin-app .aksrt-field-group__body { padding: 0; } #aksrt-admin-app .aksrt-field { display: grid; grid-template-columns: minmax(150px, 22%) minmax(0, 1fr); column-gap: 24px; align-items: start; margin: 0; padding: 20px 30px; border-bottom: 1px solid #eee; } #aksrt-admin-app .aksrt-field > :not(.aksrt-field__label-row):not(.aksrt-field__desc):not(.aksrt-field__error) { grid-column: 2; } #aksrt-admin-app .aksrt-field__label-row { grid-column: 1; grid-row: 1; margin: 4px 0 0; } #aksrt-admin-app .aksrt-field__label { color: #0991f5; font-weight: 600; } #aksrt-admin-app .aksrt-field__desc { grid-column: 1; margin: 26px 0 0; } #aksrt-admin-app .aksrt-field--notice { display: block; padding-top: 14px; padding-bottom: 14px; background: #fff8e5; } #aksrt-admin-app .aksrt-field__fieldset .aksrt-field, #aksrt-admin-app .aksrt-field__repeater .aksrt-field, #aksrt-admin-app .aksrt-field__sortable .aksrt-field { padding: 12px 0; border-bottom-color: #eee; } #aksrt-admin-app .aksrt-field__repeater-item, #aksrt-admin-app .aksrt-field__fieldset { border-radius: 2px; background: #fff; } #aksrt-admin-app .aksrt-form-renderer__save-bar { left: auto; right: 0; bottom: 0; border-top: 1px solid #f2f2f2; background: rgba(255, 255, 255, .96); } #aksrt-admin-app .aksrt-form-renderer__save-bar .n-button--primary-type { border-radius: 30px; background-image: linear-gradient(135deg, #65bff7 10%, #0d67b9 100%); box-shadow: -1px 2px 10px rgba(1, 65, 139, .3); } #aksrt-admin-app .aksrt-page-container, #aksrt-admin-app .content-page { max-width: 1100px; margin: 0 auto; } #aksrt-admin-app .aksrt-page-title { margin: 0 0 12px; color: #1a1a2e; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } #aksrt-admin-app .aksrt-page-desc { margin: 0 0 24px; color: #7a7f8a; font-size: 13px; line-height: 1.7; } #aksrt-admin-app .aksrt-section-card { margin-bottom: 18px; border-radius: 12px !important; border: 1px solid #eceff5 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } #aksrt-admin-app .aksrt-section-card .n-card__content { padding: 18px 20px 20px !important; } #aksrt-admin-app .aksrt-section-card .n-card-header { padding: 18px 20px 0 !important; } #aksrt-admin-app .aksrt-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } #aksrt-admin-app .aksrt-section-header h3 { margin: 0; color: #1a1a2e; font-size: 15px; font-weight: 600; } #aksrt-admin-app .section-icon, #aksrt-admin-app .header-icon { font-size: 17px; opacity: 0.8; display: inline-flex; align-items: center; } #aksrt-admin-app .section-desc, #aksrt-admin-app .aksrt-hint-text { color: #8a909c; font-size: 12px; line-height: 1.6; } #aksrt-admin-app .section-desc { margin: 0 0 14px; } #aksrt-admin-app .aksrt-form .n-form-item { margin-bottom: 18px; } #aksrt-admin-app .aksrt-form .n-form-item:last-child { margin-bottom: 0; } #aksrt-admin-app .aksrt-form .n-form-item-label { color: #555 !important; font-size: 13px; font-weight: 500; } #aksrt-admin-app .aksrt-form .n-input, #aksrt-admin-app .aksrt-form .n-select .n-base-selection, #aksrt-admin-app .aksrt-form .n-input-number { min-height: 38px; --n-height: 38px !important; } #aksrt-admin-app .aksrt-form .n-input--textarea textarea { min-height: 84px; } #aksrt-admin-app .aksrt-form .n-switch { --n-rail-height: 26px !important; --n-rail-width: 48px !important; } #aksrt-admin-app .aksrt-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 24px 0 8px; margin-top: 28px; border-top: 1px solid #eef1f6; } #aksrt-admin-app .aksrt-form-actions .n-button { min-width: 120px; height: 40px; font-weight: 500; } #aksrt-admin-app .aksrt-tabs .n-tabs-nav { margin-bottom: 20px !important; } #aksrt-admin-app .aksrt-tabs .n-tabs-tab { padding: 10px 20px !important; font-size: 14px !important; font-weight: 500; } #aksrt-admin-app .n-data-table { border-radius: 10px; overflow: hidden; } #aksrt-admin-app .n-data-table .n-data-table-th { background: #f8fafc; } #aksrt-admin-app .n-empty { padding: 24px 0; } #aksrt-admin-app .aksrt-card-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; flex-wrap: wrap; } #aksrt-admin-app .aksrt-card-header-row__left { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } #aksrt-admin-app .aksrt-card-header-row__title { font-weight: 600; } /* ==================== 卡片 header 行(标题 + 按钮) ==================== */ #aksrt-admin-app .aksrt-card-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; flex-wrap: wrap; } #aksrt-admin-app .aksrt-card-header-row__left { display: flex; align-items: center; gap: 8px; min-width: 0; } #aksrt-admin-app .aksrt-card-header-row__title { margin: 0; font-size: 15px; font-weight: 600; color: #1a1a2e; } /* ==================== 过渡 ==================== */ .fade-slide-enter-active, .fade-slide-leave-active { transition: opacity 0.24s ease, transform 0.24s ease; } .fade-slide-enter-from { opacity: 0; transform: translateY(12px); } .fade-slide-leave-to { opacity: 0; transform: translateY(-8px); } /* ==================== Modal 样式(弹层) ==================== */ .aksrt-modal-card { width: 100%; max-width: 520px; } /* ==================== 移动端适配 ==================== */ @media (max-width: 768px) { /* 容器 */ #aksrt-admin-app .aksrt-page-container, #aksrt-admin-app .content-page { max-width: 100%; padding: 0; } #aksrt-admin-app .aksrt-form-renderer__header { margin: -14px -12px 0; padding: 14px 16px; } #aksrt-admin-app .aksrt-field-group { margin: 0 -12px; } #aksrt-admin-app .aksrt-field { display: block; padding: 16px; } #aksrt-admin-app .aksrt-field__desc { margin: 2px 0 8px; } #aksrt-admin-app .aksrt-page-title { font-size: 18px; margin-bottom: 8px; } #aksrt-admin-app .aksrt-page-desc { font-size: 12px; margin-bottom: 14px; } /* 卡片紧凑 */ #aksrt-admin-app .aksrt-section-card { margin-bottom: 12px; border-radius: 10px !important; } #aksrt-admin-app .aksrt-section-card .n-card__content { padding: 14px !important; } #aksrt-admin-app .aksrt-section-card .n-card-header { padding: 14px 14px 0 !important; } #aksrt-admin-app .aksrt-section-header { margin-bottom: 10px; } /* 表单:label 改为顶部排列(覆盖 left 模式) */ #aksrt-admin-app .aksrt-form .n-form-item { margin-bottom: 14px; } #aksrt-admin-app .aksrt-form .n-form-item .n-form-item-label { text-align: left !important; padding: 0 0 6px !important; width: auto !important; height: auto !important; line-height: 1.5 !important; justify-content: flex-start !important; } #aksrt-admin-app .aksrt-form .n-form-item-blank { width: 100%; } /* 强制行内表单单列 */ #aksrt-admin-app .aksrt-form .n-form-item .n-form-item-label, #aksrt-admin-app .aksrt-form .n-form-item-row { display: block !important; } /* radio button 自动换行 */ #aksrt-admin-app .aksrt-form .n-radio-group { width: 100%; } #aksrt-admin-app .aksrt-form .n-radio-group .n-space { flex-wrap: wrap !important; gap: 6px 8px !important; } #aksrt-admin-app .aksrt-form .n-radio-button { flex: 1 1 auto; min-width: 0; } /* 输入组在窄屏堆叠 */ #aksrt-admin-app .aksrt-form .n-input-group { flex-wrap: wrap; gap: 6px; } #aksrt-admin-app .aksrt-form .n-input-group > .n-input, #aksrt-admin-app .aksrt-form .n-input-group > .n-button { border-radius: 6px !important; } /* 表单底部按钮区 */ #aksrt-admin-app .aksrt-form-actions { flex-direction: column-reverse; align-items: stretch; padding: 16px 0 8px; margin-top: 20px; gap: 8px; } #aksrt-admin-app .aksrt-form-actions .n-button { width: 100%; min-width: 0; height: 42px; } /* 卡片 header 行:换行排列 */ #aksrt-admin-app .aksrt-card-header-row { gap: 8px; } /* Naive 弹窗全屏 */ .n-modal-mask + .n-modal-body-wrapper .n-modal, .n-modal-body-wrapper > .n-modal { width: 100vw !important; max-width: 100vw !important; border-radius: 0 !important; margin: 0 !important; min-height: 100vh; } .aksrt-modal-card { max-width: 100vw !important; width: 100vw !important; min-height: 100vh; border-radius: 0 !important; } /* 数据表格隐藏次要列 */ .aksrt-table-mobile-hide, #aksrt-admin-app .n-data-table .aksrt-table-mobile-hide { display: none !important; } /* 表格内边距收紧 */ #aksrt-admin-app .n-data-table .n-data-table-td, #aksrt-admin-app .n-data-table .n-data-table-th { padding: 8px 10px !important; } /* tabs */ #aksrt-admin-app .aksrt-tabs .n-tabs-tab { padding: 8px 12px !important; font-size: 13px !important; } /* drawer 内菜单 */ .n-drawer .n-menu .n-menu-item-content { padding-left: 18px !important; } } /* ==================== 超窄设备(<= 480px)追加 ==================== */ @media (max-width: 480px) { #aksrt-admin-app .aksrt-section-card .n-card__content { padding: 12px !important; } #aksrt-admin-app .aksrt-section-card .n-card-header { padding: 12px 12px 0 !important; } }