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,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;
|
||||
}
|
||||
Reference in new issue
Block a user