feat: 搭建后台管理框架
This commit is contained in:
Vicky committed
1 parent
6d28bab72b
commit
40546bfd01
238 files changed
+18160
-3837
No files matched your search
@@ -0,0 +1,130 @@
|
||||
html.dark .page-heading h1,
|
||||
html.dark .panel-heading h2,
|
||||
html.dark .episode-toolbar h2,
|
||||
html.dark .stat-value,
|
||||
html.dark .drama-cell b,
|
||||
html.dark .brand b,
|
||||
html.dark .role-card,
|
||||
html.dark .cover-card-info b {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
html.dark .page-heading p,
|
||||
html.dark .eyebrow,
|
||||
html.dark .panel-heading p,
|
||||
html.dark .episode-toolbar p,
|
||||
html.dark .stat-top,
|
||||
html.dark .stat-value small,
|
||||
html.dark .stat-foot,
|
||||
html.dark .table-result-count {
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
html.dark .stat-card,
|
||||
html.dark .panel,
|
||||
html.dark .role-card,
|
||||
html.dark .topbar,
|
||||
html.dark .sidebar {
|
||||
background: var(--el-bg-color-overlay);
|
||||
border-color: var(--el-border-color-light);
|
||||
}
|
||||
|
||||
html.dark .stat-icon,
|
||||
html.dark .role-icon,
|
||||
html.dark .help-icon,
|
||||
html.dark .workspace-avatar,
|
||||
html.dark .profile-avatar,
|
||||
html.dark .top-avatar {
|
||||
background: rgb(64 158 255 / 16%) !important;
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
html.dark .role-active {
|
||||
background: rgb(64 158 255 / 12%);
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
html.dark .drama-cover,
|
||||
html.dark .episode-thumb,
|
||||
html.dark .review-art,
|
||||
html.dark .add-cover,
|
||||
html.dark .upload-area .el-upload-dragger,
|
||||
html.dark .permission-note {
|
||||
background: var(--el-fill-color-light) !important;
|
||||
color: var(--el-text-color-secondary);
|
||||
border-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
html.dark .review-row .el-tag,
|
||||
html.dark .drama-table .el-tag,
|
||||
html.dark .episode-row .el-tag {
|
||||
background: var(--el-fill-color) !important;
|
||||
color: var(--el-text-color-regular) !important;
|
||||
border-color: var(--el-border-color) !important;
|
||||
}
|
||||
|
||||
html.dark .drama-table th,
|
||||
html.dark .drama-table td {
|
||||
background: transparent;
|
||||
color: var(--el-text-color-regular);
|
||||
border-color: var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
html.dark .drama-el-table,
|
||||
html.dark .dashboard-el-table {
|
||||
--el-table-header-bg-color: var(--el-fill-color-light);
|
||||
--el-table-tr-bg-color: var(--el-bg-color-overlay);
|
||||
--el-table-bg-color: var(--el-bg-color-overlay);
|
||||
--el-table-border-color: var(--el-border-color);
|
||||
--el-table-row-hover-bg-color: var(--el-fill-color);
|
||||
--el-table-text-color: var(--el-text-color-regular);
|
||||
--el-table-header-text-color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
html.dark .drama-el-table th.el-table__cell,
|
||||
html.dark .dashboard-el-table th.el-table__cell,
|
||||
html.dark .drama-el-table td.el-table__cell,
|
||||
html.dark .dashboard-el-table td.el-table__cell {
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
|
||||
html.dark .el-tag.status-badge.is-online {
|
||||
--el-tag-bg-color: rgba(34, 160, 90, 0.18);
|
||||
--el-tag-border-color: rgba(103, 194, 58, 0.45);
|
||||
--el-tag-text-color: #7dcea0;
|
||||
background: rgba(34, 160, 90, 0.18) !important;
|
||||
border-color: rgba(103, 194, 58, 0.45) !important;
|
||||
color: #7dcea0 !important;
|
||||
}
|
||||
html.dark .el-tag.status-badge.is-reviewing {
|
||||
--el-tag-bg-color: rgba(217, 119, 6, 0.18);
|
||||
--el-tag-border-color: rgba(230, 162, 60, 0.45);
|
||||
--el-tag-text-color: #f0c27a;
|
||||
background: rgba(217, 119, 6, 0.18) !important;
|
||||
border-color: rgba(230, 162, 60, 0.45) !important;
|
||||
color: #f0c27a !important;
|
||||
}
|
||||
html.dark .el-tag.status-badge.is-draft {
|
||||
--el-tag-bg-color: rgba(144, 147, 153, 0.18);
|
||||
--el-tag-border-color: rgba(168, 171, 178, 0.4);
|
||||
--el-tag-text-color: #c0c4cc;
|
||||
background: rgba(144, 147, 153, 0.18) !important;
|
||||
border-color: rgba(168, 171, 178, 0.4) !important;
|
||||
color: #c0c4cc !important;
|
||||
}
|
||||
html.dark .el-tag.status-badge.is-pending {
|
||||
--el-tag-bg-color: rgba(64, 158, 255, 0.18);
|
||||
--el-tag-border-color: rgba(121, 187, 255, 0.45);
|
||||
--el-tag-text-color: #8cc5ff;
|
||||
background: rgba(64, 158, 255, 0.18) !important;
|
||||
border-color: rgba(121, 187, 255, 0.45) !important;
|
||||
color: #8cc5ff !important;
|
||||
}
|
||||
html.dark .el-tag.status-badge.is-offline {
|
||||
--el-tag-bg-color: rgba(245, 108, 108, 0.18);
|
||||
--el-tag-border-color: rgba(245, 108, 108, 0.45);
|
||||
--el-tag-text-color: #f3a6a6;
|
||||
background: rgba(245, 108, 108, 0.18) !important;
|
||||
border-color: rgba(245, 108, 108, 0.45) !important;
|
||||
color: #f3a6a6 !important;
|
||||
}
|
||||
@@ -0,0 +1,349 @@
|
||||
.library-toolbar {
|
||||
justify-content: flex-start;
|
||||
gap: 16px;
|
||||
min-height: 64px;
|
||||
padding: 12px 0 !important;
|
||||
}
|
||||
.drama-filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.drama-filters > .el-input {
|
||||
width: 300px !important;
|
||||
flex: 0 0 300px !important;
|
||||
}
|
||||
.drama-filters > .el-select {
|
||||
width: 160px !important;
|
||||
flex: 0 0 160px !important;
|
||||
}
|
||||
.table-result-count {
|
||||
margin-left: auto;
|
||||
color: #858b95;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table-actions .el-button {
|
||||
font-size: 13px !important;
|
||||
font-weight: 400 !important;
|
||||
padding: 5px 4px !important;
|
||||
}
|
||||
.table-actions .danger-action {
|
||||
color: #a66a6a !important;
|
||||
}
|
||||
.table-actions .danger-action:hover {
|
||||
color: #b54848 !important;
|
||||
}
|
||||
.drama-cell .drama-cover,
|
||||
.drama-cell .drama-cover-image {
|
||||
width: 44px;
|
||||
height: 56px;
|
||||
flex: 0 0 44px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.drama-cell .drama-cover {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
line-height: 1.3;
|
||||
color: #7e8791;
|
||||
background: #f0f2f4 !important;
|
||||
}
|
||||
.dark .table-result-count {
|
||||
color: #a6aeb9;
|
||||
}
|
||||
.dark .drama-cell .drama-cover {
|
||||
background: #353b45 !important;
|
||||
color: #b9c1cb;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.drama-filters > .el-input {
|
||||
width: min(300px, 45vw) !important;
|
||||
flex-basis: min(300px, 45vw) !important;
|
||||
}
|
||||
.drama-filters > .el-select {
|
||||
width: 150px !important;
|
||||
flex-basis: 150px !important;
|
||||
}
|
||||
.table-result-count {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.drama-el-table,
|
||||
.dashboard-el-table {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
--el-table-header-bg-color: #f7f8fa;
|
||||
--el-table-border-color: #eaecf0;
|
||||
--el-table-row-hover-bg-color: #f8fafc;
|
||||
}
|
||||
.drama-el-table .el-table__cell,
|
||||
.dashboard-el-table .el-table__cell {
|
||||
padding: 14px 0;
|
||||
}
|
||||
.drama-el-table th.el-table__cell,
|
||||
.dashboard-el-table th.el-table__cell {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #737b85;
|
||||
}
|
||||
.drama-el-table td.el-table__cell,
|
||||
.dashboard-el-table td.el-table__cell {
|
||||
font-size: 13px;
|
||||
color: #505862;
|
||||
}
|
||||
.drama-el-table .cell,
|
||||
.dashboard-el-table .cell {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.drama-el-table .el-table__inner-wrapper:before,
|
||||
.dashboard-el-table .el-table__inner-wrapper:before {
|
||||
height: 0;
|
||||
}
|
||||
.dark .drama-el-table,
|
||||
.dark .dashboard-el-table {
|
||||
--el-table-header-bg-color: #2b3038;
|
||||
--el-table-tr-bg-color: #242830;
|
||||
--el-table-bg-color: #242830;
|
||||
--el-table-border-color: #3b414b;
|
||||
--el-table-row-hover-bg-color: #2e3540;
|
||||
--el-table-text-color: #c0c6cf;
|
||||
--el-table-header-text-color: #b1b8c2;
|
||||
}
|
||||
.dark .drama-el-table td.el-table__cell,
|
||||
.dark .dashboard-el-table td.el-table__cell {
|
||||
color: #c0c6cf;
|
||||
}
|
||||
.table-actions .el-button {
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
padding: 7px 11px !important;
|
||||
}
|
||||
.table-actions .el-button--primary {
|
||||
--el-button-bg-color: #409eff;
|
||||
--el-button-border-color: #409eff;
|
||||
--el-button-hover-bg-color: #79bbff;
|
||||
--el-button-hover-border-color: #79bbff;
|
||||
}
|
||||
.table-actions .el-button--success {
|
||||
--el-button-bg-color: #4d866a;
|
||||
--el-button-border-color: #4d866a;
|
||||
--el-button-hover-bg-color: #3c7358;
|
||||
--el-button-hover-border-color: #3c7358;
|
||||
}
|
||||
.table-actions .el-button--danger {
|
||||
--el-button-bg-color: #bd5b5b;
|
||||
--el-button-border-color: #bd5b5b;
|
||||
--el-button-hover-bg-color: #a94b4b;
|
||||
--el-button-hover-border-color: #a94b4b;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 18px 0 4px !important;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.pagination .el-pagination {
|
||||
font-size: 13px !important;
|
||||
--el-pagination-font-size: 13px;
|
||||
--el-pagination-button-bg-color: #f1f3f6;
|
||||
--el-pagination-hover-color: #409eff;
|
||||
--el-pagination-button-color: #4c5561;
|
||||
gap: 5px;
|
||||
}
|
||||
.pagination .el-pagination__sizes {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.pagination .el-select {
|
||||
width: 112px;
|
||||
}
|
||||
.pagination .el-pagination__jump {
|
||||
margin-left: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dark .pagination .el-pagination {
|
||||
--el-pagination-button-bg-color: #353b45;
|
||||
--el-pagination-button-color: #c3cad3;
|
||||
}
|
||||
.drama-el-table td.el-table__cell,
|
||||
.drama-el-table th.el-table__cell {
|
||||
font-size: 14px;
|
||||
}
|
||||
.drama-cell b {
|
||||
font-size: 15px;
|
||||
}
|
||||
.drama-cell small {
|
||||
font-size: 13px;
|
||||
}
|
||||
.table-result-count {
|
||||
font-size: 14px;
|
||||
}
|
||||
.table-actions .el-button {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.library-toolbar .el-input__inner,
|
||||
.library-toolbar .el-select__placeholder {
|
||||
font-size: 14px;
|
||||
}
|
||||
.pagination .el-pagination {
|
||||
font-size: 14px !important;
|
||||
--el-pagination-font-size: 14px;
|
||||
}
|
||||
.el-message-box__title,
|
||||
.el-message-box__message {
|
||||
font-size: 15px;
|
||||
}
|
||||
.el-message-box__btns .el-button {
|
||||
font-size: 14px;
|
||||
}
|
||||
.episode-toolbar {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.episode-el-table {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.episode-table-title b,
|
||||
.episode-table-title small {
|
||||
display: block;
|
||||
}
|
||||
.episode-table-title b {
|
||||
font-size: 14px;
|
||||
color: #343a43;
|
||||
}
|
||||
.episode-table-title small {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
color: #858b95;
|
||||
}
|
||||
.dark .episode-table-title b {
|
||||
color: #e5e8ed;
|
||||
}
|
||||
.dark .episode-table-title small {
|
||||
color: #a6aeb9;
|
||||
}
|
||||
.menu-management-panel {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.menu-management-panel .panel-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
.menu-management-panel .el-alert {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.menu-management-panel .el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.admin-user-search {
|
||||
width: min(440px, 65vw);
|
||||
}
|
||||
.muted-text {
|
||||
font-size: 13px;
|
||||
color: #9298a1;
|
||||
}
|
||||
.role-permission-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(520px, 1.25fr) minmax(340px, 0.9fr);
|
||||
gap: 18px;
|
||||
align-items: start;
|
||||
}
|
||||
.role-table-panel,
|
||||
.permission-tree-panel {
|
||||
min-width: 0;
|
||||
}
|
||||
.role-config-table .el-table__row {
|
||||
cursor: pointer;
|
||||
}
|
||||
.permission-tree-panel .el-tree {
|
||||
max-height: 68vh;
|
||||
overflow: auto;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
.permission-tree-panel .el-tree-node__label {
|
||||
font-size: 14px;
|
||||
}
|
||||
.permission-warning {
|
||||
color: #d66b4f !important;
|
||||
}
|
||||
.admin-users-panel {
|
||||
overflow: hidden;
|
||||
}
|
||||
.admin-user-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 0 16px;
|
||||
}
|
||||
.admin-user-toolbar > .el-input {
|
||||
width: 230px;
|
||||
}
|
||||
.admin-user-toolbar > .el-select {
|
||||
width: 190px;
|
||||
}
|
||||
.admin-users-table {
|
||||
min-width: 1250px;
|
||||
}
|
||||
.menu-editor-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(270px, 0.7fr) minmax(520px, 1.5fr);
|
||||
gap: 18px;
|
||||
align-items: start;
|
||||
}
|
||||
.menu-tree-panel,
|
||||
.menu-form-panel {
|
||||
min-width: 0;
|
||||
}
|
||||
.menu-tree-panel .el-tree {
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
}
|
||||
.menu-form-panel .panel-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.menu-editor-form {
|
||||
max-width: 680px;
|
||||
padding: 16px 12px 0;
|
||||
}
|
||||
.menu-editor-form .el-input,
|
||||
.menu-editor-form .el-select {
|
||||
max-width: 360px;
|
||||
width: 100%;
|
||||
}
|
||||
.menu-editor-form .el-textarea {
|
||||
max-width: 360px;
|
||||
}
|
||||
.menu-editor-form .el-input-number {
|
||||
width: 180px;
|
||||
}
|
||||
.menu-form-footer {
|
||||
padding: 12px 0 4px 122px;
|
||||
border-top: 1px solid #eceef0;
|
||||
}
|
||||
.dark .menu-form-footer {
|
||||
border-color: #3b414b;
|
||||
}
|
||||
@media (max-width: 1150px) {
|
||||
.role-permission-layout,
|
||||
.menu-editor-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.permission-tree-panel .el-tree,
|
||||
.menu-tree-panel .el-tree {
|
||||
max-height: 45vh;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import './style.css';
|
||||
@import './theme.css';
|
||||
@import './typography.css';
|
||||
@import './drama-management.css';
|
||||
@import './dark.css';
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,395 @@
|
||||
:root {
|
||||
font-family: Arial, 'Noto Sans SC', sans-serif;
|
||||
color: var(--el-text-color-primary);
|
||||
background: var(--el-bg-color-page);
|
||||
--el-color-primary: #409eff;
|
||||
--el-color-primary-light-3: #79bbff;
|
||||
--el-color-primary-light-5: #a0cfff;
|
||||
--el-color-primary-light-7: #c6e2ff;
|
||||
--el-color-primary-light-8: #d9ecff;
|
||||
--el-color-primary-light-9: #ecf5ff;
|
||||
--el-color-primary-dark-2: #337ecc;
|
||||
--purple: var(--el-color-primary);
|
||||
--muted: #909399;
|
||||
--line: #e4e7ed;
|
||||
}
|
||||
body {
|
||||
background: var(--el-bg-color-page);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
.sidebar {
|
||||
background: #fff;
|
||||
border-right-color: #e7e9ec;
|
||||
padding-top: 22px;
|
||||
}
|
||||
.brand {
|
||||
padding-bottom: 23px;
|
||||
}
|
||||
.brand-mark {
|
||||
background: #409eff;
|
||||
border-radius: 7px;
|
||||
transform: none;
|
||||
}
|
||||
.brand b {
|
||||
font:
|
||||
700 16px Arial,
|
||||
sans-serif;
|
||||
letter-spacing: -0.4px;
|
||||
color: #29313b;
|
||||
}
|
||||
.brand small {
|
||||
letter-spacing: 0.9px;
|
||||
}
|
||||
.workspace {
|
||||
border-radius: 5px;
|
||||
border-color: #e5e7eb;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.workspace-avatar,
|
||||
.profile-avatar,
|
||||
.top-avatar {
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.nav-label {
|
||||
color: #9298a1;
|
||||
font-size: 10px;
|
||||
}
|
||||
.side-menu .el-menu-item {
|
||||
border-radius: 5px;
|
||||
color: #616873;
|
||||
}
|
||||
.side-menu .el-menu-item:hover {
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
}
|
||||
.side-menu .el-menu-item.is-active {
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
}
|
||||
.menu-count {
|
||||
background: #eef1f4;
|
||||
color: #747d88;
|
||||
}
|
||||
.help-card {
|
||||
background: #f7f8fa;
|
||||
border-color: #eceef0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.help-icon {
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.help-card a {
|
||||
color: #409eff;
|
||||
}
|
||||
.topbar {
|
||||
background: #fff;
|
||||
}
|
||||
.environment {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.page-content {
|
||||
padding-top: 30px;
|
||||
}
|
||||
.eyebrow {
|
||||
letter-spacing: 0.7px;
|
||||
color: #9298a1;
|
||||
}
|
||||
.page-heading h1 {
|
||||
font:
|
||||
600 23px Arial,
|
||||
'Noto Sans SC',
|
||||
sans-serif;
|
||||
letter-spacing: 0;
|
||||
color: #2f343c;
|
||||
}
|
||||
.page-heading p {
|
||||
color: #818791;
|
||||
}
|
||||
.primary-button {
|
||||
background: #409eff !important;
|
||||
border-color: #409eff !important;
|
||||
border-radius: 5px !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.primary-button:hover {
|
||||
background: #79bbff !important;
|
||||
border-color: #79bbff !important;
|
||||
}
|
||||
.stats-grid {
|
||||
gap: 12px;
|
||||
}
|
||||
.stat-card,
|
||||
.panel {
|
||||
border-color: #e6e8eb;
|
||||
border-radius: 6px;
|
||||
box-shadow: none;
|
||||
}
|
||||
.stat-card {
|
||||
min-height: 116px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.stat-top {
|
||||
color: #727983;
|
||||
}
|
||||
.stat-icon {
|
||||
border-radius: 5px;
|
||||
background: #ecf5ff !important;
|
||||
color: #409eff !important;
|
||||
}
|
||||
.stat-value {
|
||||
font-family: Arial, sans-serif;
|
||||
color: #303640;
|
||||
}
|
||||
.stat-foot .positive {
|
||||
color: #4d866a;
|
||||
background: #eff5f1;
|
||||
}
|
||||
.sparkline {
|
||||
opacity: 0.42;
|
||||
}
|
||||
.positive {
|
||||
color: #4d866a;
|
||||
background: #eff5f1;
|
||||
}
|
||||
.review-count,
|
||||
.muted-count {
|
||||
background: #eef1f4;
|
||||
color: #61738a;
|
||||
}
|
||||
.chart-svg path:first-of-type {
|
||||
fill: #d9ecff;
|
||||
}
|
||||
.chart-svg path:last-of-type {
|
||||
stroke: #409eff;
|
||||
}
|
||||
.view-all,
|
||||
.row-action {
|
||||
color: #409eff !important;
|
||||
}
|
||||
.review-art {
|
||||
background: #f1f3f5 !important;
|
||||
border-radius: 5px;
|
||||
font-size: 0;
|
||||
}
|
||||
.review-art:after {
|
||||
content: '—';
|
||||
font-size: 14px;
|
||||
color: #818a95;
|
||||
}
|
||||
.review-row .el-tag,
|
||||
.drama-table .el-tag,
|
||||
.episode-row .el-tag {
|
||||
border-radius: 4px;
|
||||
background: #f0f2f4 !important;
|
||||
color: #606b78 !important;
|
||||
}
|
||||
.drama-cover {
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
font-size: 14px;
|
||||
background: #eceff2 !important;
|
||||
}
|
||||
.drama-cover.rose,
|
||||
.drama-cover.purple,
|
||||
.drama-cover.peach,
|
||||
.drama-cover.blue,
|
||||
.drama-cover.gold {
|
||||
background: #eceff2 !important;
|
||||
}
|
||||
.drama-table th {
|
||||
background: #f7f8fa;
|
||||
color: #7d848e;
|
||||
}
|
||||
.drama-table td {
|
||||
color: #656c76;
|
||||
}
|
||||
.drama-cell b {
|
||||
color: #343a43;
|
||||
}
|
||||
.library-panel {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
.library-toolbar .el-tabs__item,
|
||||
.cover-toolbar .el-tabs__item {
|
||||
font-size: 11px;
|
||||
}
|
||||
.library-toolbar .el-tabs__item.is-active,
|
||||
.cover-toolbar .el-tabs__item.is-active {
|
||||
color: #409eff;
|
||||
}
|
||||
.library-toolbar .el-tabs__active-bar,
|
||||
.cover-toolbar .el-tabs__active-bar {
|
||||
background: #409eff;
|
||||
}
|
||||
.toolbar-filters .el-input__wrapper,
|
||||
.toolbar-filters .el-select__wrapper,
|
||||
.drama-select .el-input__wrapper {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.episode-panel {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.episode-row {
|
||||
border-color: #e7e9ec;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.episode-thumb {
|
||||
border-radius: 4px;
|
||||
background: #e9ecef;
|
||||
color: #7d8792;
|
||||
}
|
||||
.episode-thumb .el-icon {
|
||||
color: #606a75;
|
||||
}
|
||||
.episode-actions .el-button {
|
||||
color: #767e88;
|
||||
}
|
||||
.cover-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
|
||||
}
|
||||
.cover-card,
|
||||
.add-cover {
|
||||
border-color: #e6e8eb;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.poster-art {
|
||||
background: #e9ecef !important;
|
||||
filter: grayscale(0.72);
|
||||
}
|
||||
.poster-art.rose,
|
||||
.poster-art.purple,
|
||||
.poster-art.peach,
|
||||
.poster-art.blue,
|
||||
.poster-art.gold {
|
||||
background: #e9ecef !important;
|
||||
}
|
||||
.poster-glow,
|
||||
.poster-stamp {
|
||||
display: none;
|
||||
}
|
||||
.poster-emoji {
|
||||
font-size: 48px;
|
||||
filter: grayscale(1);
|
||||
opacity: 0.55;
|
||||
}
|
||||
.poster-copy {
|
||||
text-shadow: none;
|
||||
color: #303640;
|
||||
}
|
||||
.poster-copy small,
|
||||
.poster-copy span {
|
||||
color: #606873;
|
||||
opacity: 1;
|
||||
}
|
||||
.cover-card-info b {
|
||||
color: #383e46;
|
||||
}
|
||||
.add-cover {
|
||||
min-height: 276px;
|
||||
background: #fafbfc;
|
||||
color: #656d77;
|
||||
}
|
||||
.add-cover > span {
|
||||
border-radius: 5px;
|
||||
background: #edf0f3;
|
||||
color: #68798d;
|
||||
}
|
||||
.role-card {
|
||||
border-radius: 5px;
|
||||
border-color: #e7e9ec;
|
||||
}
|
||||
.role-active {
|
||||
border-color: #a0cfff;
|
||||
background: #ecf5ff;
|
||||
}
|
||||
.role-icon {
|
||||
border-radius: 5px;
|
||||
background: #ecf5ff !important;
|
||||
color: #409eff !important;
|
||||
}
|
||||
.role-badge {
|
||||
border-radius: 4px;
|
||||
background: #eef1f4;
|
||||
color: #65758a;
|
||||
}
|
||||
.permission-group h3 .el-icon {
|
||||
color: #409eff;
|
||||
}
|
||||
.permission-group .el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background: #409eff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
.permission-note {
|
||||
background: #f6f7f8;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.el-dialog {
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
.el-dialog__header,
|
||||
.el-dialog__footer {
|
||||
border-color: #e8eaed;
|
||||
}
|
||||
.upload-area .el-upload-dragger {
|
||||
border-radius: 5px;
|
||||
background: #fafbfc;
|
||||
}
|
||||
.upload-icon,
|
||||
.upload-area .el-upload__text em {
|
||||
color: #409eff;
|
||||
}
|
||||
.el-tabs__item,
|
||||
.el-input__inner,
|
||||
.el-select__placeholder {
|
||||
font-family: Arial, 'Noto Sans SC', sans-serif;
|
||||
}
|
||||
.el-tag.status-badge {
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.el-tag.status-badge.is-online {
|
||||
--el-tag-bg-color: #e8f8ef;
|
||||
--el-tag-border-color: #b7ebc9;
|
||||
--el-tag-text-color: #178a4a;
|
||||
background: #e8f8ef !important;
|
||||
border-color: #b7ebc9 !important;
|
||||
color: #178a4a !important;
|
||||
}
|
||||
.el-tag.status-badge.is-reviewing {
|
||||
--el-tag-bg-color: #fff4e5;
|
||||
--el-tag-border-color: #f8d7a8;
|
||||
--el-tag-text-color: #d97706;
|
||||
background: #fff4e5 !important;
|
||||
border-color: #f8d7a8 !important;
|
||||
color: #d97706 !important;
|
||||
}
|
||||
.el-tag.status-badge.is-draft {
|
||||
--el-tag-bg-color: #f2f3f5;
|
||||
--el-tag-border-color: #e0e2e6;
|
||||
--el-tag-text-color: #6b7280;
|
||||
background: #f2f3f5 !important;
|
||||
border-color: #e0e2e6 !important;
|
||||
color: #6b7280 !important;
|
||||
}
|
||||
.el-tag.status-badge.is-pending {
|
||||
--el-tag-bg-color: #ecf5ff;
|
||||
--el-tag-border-color: #c6e2ff;
|
||||
--el-tag-text-color: #2b7de9;
|
||||
background: #ecf5ff !important;
|
||||
border-color: #c6e2ff !important;
|
||||
color: #2b7de9 !important;
|
||||
}
|
||||
.el-tag.status-badge.is-offline {
|
||||
--el-tag-bg-color: #fdecec;
|
||||
--el-tag-border-color: #f8c9c9;
|
||||
--el-tag-text-color: #d45656;
|
||||
background: #fdecec !important;
|
||||
border-color: #f8c9c9 !important;
|
||||
color: #d45656 !important;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.stat-top > .stat-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
flex: 0 0 30px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.stat-top > .stat-icon .el-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@import './var.css';
|
||||
@import 'element-plus/theme-chalk/dark/css-vars.css';
|
||||
|
||||
// 解决抽屉弹出时，body宽度变化的问题
|
||||
.el-popup-parent--hidden {
|
||||
width: 100% !important;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
:root {
|
||||
--login-bg-color: #293146;
|
||||
|
||||
/* left menu start */
|
||||
--left-menu-max-width: 200px;
|
||||
|
||||
--left-menu-min-width: 64px;
|
||||
|
||||
--left-menu-bg-color: #001529;
|
||||
|
||||
--left-menu-bg-light-color: #0f2438;
|
||||
|
||||
--left-menu-bg-active-color: var(--el-color-primary);
|
||||
|
||||
--left-menu-text-color: #bfcbd9;
|
||||
|
||||
--left-menu-text-active-color: #fff;
|
||||
|
||||
--left-menu-collapse-bg-active-color: var(--el-color-primary);
|
||||
/* left menu end */
|
||||
|
||||
/* logo start */
|
||||
--logo-height: 50px;
|
||||
|
||||
--logo-title-text-color: #fff;
|
||||
/* logo end */
|
||||
|
||||
/* header start */
|
||||
--top-header-bg-color: '#fff';
|
||||
|
||||
--top-header-text-color: 'inherit';
|
||||
|
||||
--top-header-hover-color: #f6f6f6;
|
||||
|
||||
--top-tool-height: var(--logo-height);
|
||||
|
||||
--top-tool-p-x: 0;
|
||||
|
||||
--tags-view-height: 35px;
|
||||
/* header start */
|
||||
|
||||
/* tab menu start */
|
||||
--tab-menu-max-width: 80px;
|
||||
|
||||
--tab-menu-min-width: 30px;
|
||||
|
||||
--tab-menu-collapse-height: 36px;
|
||||
/* tab menu end */
|
||||
|
||||
--app-content-padding: 20px;
|
||||
|
||||
--app-content-bg-color: #f5f7f9;
|
||||
|
||||
--app-footer-height: 0px;
|
||||
|
||||
--transition-time-02: 0.2s;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--app-content-bg-color: var(--el-bg-color);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// 命名空间
|
||||
@namespace: v;
|
||||
// el命名空间
|
||||
@elNamespace: el;
|
||||
|
||||
// 导出变量
|
||||
:export {
|
||||
namespace: @namespace;
|
||||
elNamespace: @elNamespace;
|
||||
}
|
||||
Reference in new issue
Block a user