feat(ui): 全局深色主题与登录注册页样式优化 #5
416
src/App.vue
416
src/App.vue
@@ -10,6 +10,7 @@ import { getRoleList, parseMenusFromRoleListResponse } from '@/api/rbacApi'
|
||||
export default {
|
||||
name: 'App',
|
||||
mounted() {
|
||||
this.applyTheme()
|
||||
const authUser = JSON.parse(localStorage.getItem('authUser') || 'null')
|
||||
const userMenus = JSON.parse(localStorage.getItem('userMenus') || '[]')
|
||||
if (authUser) {
|
||||
@@ -20,6 +21,11 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
applyTheme() {
|
||||
const theme = localStorage.getItem('uiTheme') || 'dark'
|
||||
document.body.classList.remove('theme-dark', 'theme-light')
|
||||
document.body.classList.add(theme === 'light' ? 'theme-light' : 'theme-dark')
|
||||
},
|
||||
loadUserMenus(authUser) {
|
||||
const roleId = authUser && authUser.roleIds && authUser.roleIds.length ? authUser.roleIds[0] : undefined
|
||||
if (!roleId) {
|
||||
@@ -34,7 +40,417 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #070b16;
|
||||
color: #dbeafe;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
|
||||
}
|
||||
|
||||
#app{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button,
|
||||
.el-button,
|
||||
.el-link,
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-color: rgba(148, 163, 184, 0.2);
|
||||
background: #111827;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.el-table,
|
||||
.el-table__expanded-cell {
|
||||
background-color: #111827 !important;
|
||||
color: #e5e7eb !important;
|
||||
}
|
||||
|
||||
.el-table th,
|
||||
.el-table tr,
|
||||
.el-table td {
|
||||
background-color: #111827 !important;
|
||||
color: #e5e7eb !important;
|
||||
}
|
||||
|
||||
.el-table th,
|
||||
.el-table thead,
|
||||
.el-table__header-wrapper th,
|
||||
.el-table__fixed-header-wrapper th {
|
||||
background: #1f2937 !important;
|
||||
color: #f8fafc !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.el-table .cell,
|
||||
.el-table th > .cell,
|
||||
.el-table__body-wrapper,
|
||||
.el-table__fixed-body-wrapper {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.el-table td,
|
||||
.el-table th.is-leaf {
|
||||
border-bottom-color: rgba(148, 163, 184, 0.18) !important;
|
||||
}
|
||||
|
||||
.el-table--border,
|
||||
.el-table--group,
|
||||
.el-table--border td,
|
||||
.el-table--border th,
|
||||
.el-table__fixed-right-patch {
|
||||
border-color: rgba(148, 163, 184, 0.18) !important;
|
||||
}
|
||||
|
||||
.el-table--striped .el-table__body tr.el-table__row--striped td {
|
||||
background-color: #162033 !important;
|
||||
color: #e5e7eb !important;
|
||||
}
|
||||
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td,
|
||||
.el-table__body tr.hover-row > td,
|
||||
.el-table__body tr.hover-row.current-row > td,
|
||||
.el-table__body tr.hover-row.el-table__row--striped > td,
|
||||
.el-table__body tr.hover-row.el-table__row--striped.current-row > td {
|
||||
background-color: #233149 !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
.el-table__body tr.current-row > td,
|
||||
.el-table__body tr.current-row:hover > td {
|
||||
background-color: rgba(56, 189, 248, 0.16) !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
.el-table__fixed,
|
||||
.el-table__fixed-right,
|
||||
.el-table__fixed::before,
|
||||
.el-table__fixed-right::before {
|
||||
background-color: #111827 !important;
|
||||
}
|
||||
|
||||
.el-table::before,
|
||||
.el-table--group::after,
|
||||
.el-table--border::after {
|
||||
background-color: rgba(148, 163, 184, 0.18) !important;
|
||||
}
|
||||
|
||||
.el-form-item__label,
|
||||
.el-checkbox,
|
||||
.el-radio,
|
||||
.el-dialog__body,
|
||||
.el-pagination,
|
||||
.el-pagination button,
|
||||
.el-pagination span:not([class*=suffix]),
|
||||
.el-select-dropdown__item,
|
||||
.el-dropdown-menu__item {
|
||||
color: #dbeafe;
|
||||
}
|
||||
|
||||
.el-input__inner,
|
||||
.el-textarea__inner,
|
||||
.el-select .el-input__inner,
|
||||
.el-date-editor .el-input__inner {
|
||||
background-color: #0f172a;
|
||||
border-color: rgba(148, 163, 184, 0.28);
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.el-input__inner::placeholder,
|
||||
.el-textarea__inner::placeholder {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.el-input__inner:hover,
|
||||
.el-textarea__inner:hover,
|
||||
.el-input__inner:focus,
|
||||
.el-textarea__inner:focus {
|
||||
border-color: #38bdf8;
|
||||
}
|
||||
|
||||
.el-dialog,
|
||||
.el-drawer,
|
||||
.el-message-box {
|
||||
background: #111827;
|
||||
color: #e5e7eb;
|
||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||
}
|
||||
|
||||
.el-dialog__title,
|
||||
.el-message-box__title {
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.el-dialog__header,
|
||||
.el-dialog__footer,
|
||||
.el-message-box__header,
|
||||
.el-message-box__content {
|
||||
border-color: rgba(148, 163, 184, 0.16);
|
||||
}
|
||||
|
||||
.el-select-dropdown,
|
||||
.el-dropdown-menu,
|
||||
.el-picker-panel {
|
||||
background: #111827;
|
||||
border-color: rgba(148, 163, 184, 0.22);
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover,
|
||||
.el-dropdown-menu__item:hover {
|
||||
background-color: #1e293b;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.el-pagination .btn-prev,
|
||||
.el-pagination .btn-next,
|
||||
.el-pager li {
|
||||
background: #111827;
|
||||
color: #dbeafe;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
}
|
||||
|
||||
.el-pager li.active {
|
||||
color: #38bdf8;
|
||||
border-color: rgba(56, 189, 248, 0.5);
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
border-color: rgba(56, 189, 248, 0.28);
|
||||
background: rgba(56, 189, 248, 0.12);
|
||||
color: #bae6fd;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
background: #162033;
|
||||
border-bottom-color: rgba(148, 163, 184, 0.18);
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.el-tabs__item:hover,
|
||||
.el-tabs__item.is-active {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap::after {
|
||||
background-color: rgba(148, 163, 184, 0.18);
|
||||
}
|
||||
|
||||
.el-popover,
|
||||
.el-tooltip__popper.is-light {
|
||||
background: #111827;
|
||||
border-color: rgba(148, 163, 184, 0.22);
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.el-tree,
|
||||
.el-tree-node__content {
|
||||
background: transparent;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover,
|
||||
.el-tree-node:focus > .el-tree-node__content {
|
||||
background-color: #1e293b;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.el-loading-mask {
|
||||
background-color: rgba(15, 23, 42, 0.72);
|
||||
}
|
||||
|
||||
body.theme-light {
|
||||
background: #eef4ff;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
body.theme-light .el-card {
|
||||
border-color: #dbe5f3;
|
||||
background: #ffffff;
|
||||
color: #1f2937;
|
||||
box-shadow: 0 12px 32px rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
|
||||
body.theme-light .el-table,
|
||||
body.theme-light .el-table__expanded-cell {
|
||||
background-color: #ffffff !important;
|
||||
color: #1f2937 !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-table th,
|
||||
body.theme-light .el-table tr,
|
||||
body.theme-light .el-table td {
|
||||
background-color: #ffffff !important;
|
||||
color: #1f2937 !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-table th,
|
||||
body.theme-light .el-table thead,
|
||||
body.theme-light .el-table__header-wrapper th,
|
||||
body.theme-light .el-table__fixed-header-wrapper th {
|
||||
background: #f1f6ff !important;
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-table--striped .el-table__body tr.el-table__row--striped td {
|
||||
background-color: #f8fbff !important;
|
||||
color: #1f2937 !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-table--enable-row-hover .el-table__body tr:hover > td,
|
||||
body.theme-light .el-table__body tr.hover-row > td,
|
||||
body.theme-light .el-table__body tr.hover-row.current-row > td,
|
||||
body.theme-light .el-table__body tr.hover-row.el-table__row--striped > td,
|
||||
body.theme-light .el-table__body tr.hover-row.el-table__row--striped.current-row > td {
|
||||
background-color: #eaf2ff !important;
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-table__body tr.current-row > td,
|
||||
body.theme-light .el-table__body tr.current-row:hover > td {
|
||||
background-color: #dbeafe !important;
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-table td,
|
||||
body.theme-light .el-table th.is-leaf,
|
||||
body.theme-light .el-table--border,
|
||||
body.theme-light .el-table--group,
|
||||
body.theme-light .el-table--border td,
|
||||
body.theme-light .el-table--border th,
|
||||
body.theme-light .el-table__fixed-right-patch {
|
||||
border-color: #e2e8f0 !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-table__fixed,
|
||||
body.theme-light .el-table__fixed-right,
|
||||
body.theme-light .el-table__fixed::before,
|
||||
body.theme-light .el-table__fixed-right::before {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-table::before,
|
||||
body.theme-light .el-table--group::after,
|
||||
body.theme-light .el-table--border::after {
|
||||
background-color: #e2e8f0 !important;
|
||||
}
|
||||
|
||||
body.theme-light .el-form-item__label,
|
||||
body.theme-light .el-checkbox,
|
||||
body.theme-light .el-radio,
|
||||
body.theme-light .el-dialog__body,
|
||||
body.theme-light .el-pagination,
|
||||
body.theme-light .el-pagination button,
|
||||
body.theme-light .el-pagination span:not([class*=suffix]),
|
||||
body.theme-light .el-select-dropdown__item,
|
||||
body.theme-light .el-dropdown-menu__item {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
body.theme-light .el-input__inner,
|
||||
body.theme-light .el-textarea__inner,
|
||||
body.theme-light .el-select .el-input__inner,
|
||||
body.theme-light .el-date-editor .el-input__inner {
|
||||
background-color: #ffffff;
|
||||
border-color: #d8e1ef;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
body.theme-light .el-input__inner::placeholder,
|
||||
body.theme-light .el-textarea__inner::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
body.theme-light .el-dialog,
|
||||
body.theme-light .el-drawer,
|
||||
body.theme-light .el-message-box,
|
||||
body.theme-light .el-select-dropdown,
|
||||
body.theme-light .el-dropdown-menu,
|
||||
body.theme-light .el-picker-panel,
|
||||
body.theme-light .el-popover,
|
||||
body.theme-light .el-tooltip__popper.is-light {
|
||||
background: #ffffff;
|
||||
border-color: #dbe5f3;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
body.theme-light .el-dialog__title,
|
||||
body.theme-light .el-message-box__title,
|
||||
body.theme-light .el-card__header {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
body.theme-light .el-card__header {
|
||||
background: #f8fbff;
|
||||
border-bottom-color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.theme-light .el-select-dropdown__item.hover,
|
||||
body.theme-light .el-select-dropdown__item:hover,
|
||||
body.theme-light .el-dropdown-menu__item:hover,
|
||||
body.theme-light .el-tree-node__content:hover,
|
||||
body.theme-light .el-tree-node:focus > .el-tree-node__content {
|
||||
background-color: #eaf2ff;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
body.theme-light .el-pagination .btn-prev,
|
||||
body.theme-light .el-pagination .btn-next,
|
||||
body.theme-light .el-pager li {
|
||||
background: #ffffff;
|
||||
color: #334155;
|
||||
border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.theme-light .el-tabs__item {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
body.theme-light .el-tabs__item:hover,
|
||||
body.theme-light .el-tabs__item.is-active,
|
||||
body.theme-light .el-select-dropdown__item.selected,
|
||||
body.theme-light .el-pager li.active {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
body.theme-light .el-tabs__nav-wrap::after {
|
||||
background-color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.theme-light .el-tag {
|
||||
border-color: #bfdbfe;
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
body.theme-light .el-tree,
|
||||
body.theme-light .el-tree-node__content {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
body.theme-light .el-loading-mask {
|
||||
background-color: rgba(248, 250, 252, 0.72);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -210,8 +210,7 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.effekt-home {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
max-width: 1240px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -219,37 +218,80 @@ export default {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.greet-card,
|
||||
.work-card,
|
||||
.links-card {
|
||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
overflow: hidden;
|
||||
background: #111827;
|
||||
}
|
||||
|
||||
.greet-card,
|
||||
.work-card {
|
||||
border-radius: 10px;
|
||||
border: 1px solid #ebeef5;
|
||||
min-height: 160px;
|
||||
min-height: 174px;
|
||||
}
|
||||
|
||||
.greet-card {
|
||||
position: relative;
|
||||
background: radial-gradient(circle at 88% 16%, rgba(103, 232, 249, 0.28), transparent 28%), linear-gradient(135deg, rgba(30, 64, 175, 0.95) 0%, rgba(15, 23, 42, 0.96) 62%, rgba(8, 13, 27, 0.98) 100%);
|
||||
color: #fff;
|
||||
border-color: rgba(103, 232, 249, 0.22);
|
||||
}
|
||||
|
||||
.greet-card:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -44px;
|
||||
bottom: -54px;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(56, 189, 248, 0.26), transparent 68%);
|
||||
}
|
||||
|
||||
.greet-card >>> .el-card__body,
|
||||
.work-card >>> .el-card__body,
|
||||
.links-card >>> .el-card__body {
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.greet-line {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
color: #f8fbff;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.greet-date {
|
||||
color: #909399;
|
||||
color: #bae6fd;
|
||||
font-size: 13px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.greet-progress-label {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
color: rgba(224, 242, 254, 0.9);
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.greet-progress >>> .el-progress-bar__outer {
|
||||
background-color: rgba(15, 23, 42, 0.68);
|
||||
}
|
||||
|
||||
.greet-progress >>> .el-progress-bar__inner {
|
||||
background: linear-gradient(90deg, #22d3ee 0%, #6366f1 100%);
|
||||
}
|
||||
|
||||
.greet-progress-tip {
|
||||
font-size: 12px;
|
||||
color: #67c23a;
|
||||
margin-top: 6px;
|
||||
color: #a7f3d0;
|
||||
margin-top: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -257,32 +299,52 @@ export default {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.work-card-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
.greet-login-tip >>> .el-link.el-link--primary {
|
||||
color: #67e8f9;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.work-card-title,
|
||||
.links-card-title {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #e0f2fe;
|
||||
margin-bottom: 18px;
|
||||
padding-left: 12px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.work-card-title:before,
|
||||
.links-card-title:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 3px;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, #67e8f9 0%, #6366f1 100%);
|
||||
box-shadow: 0 0 14px rgba(103, 232, 249, 0.55);
|
||||
}
|
||||
|
||||
.work-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.work-stat {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
padding: 12px 8px;
|
||||
border-radius: 8px;
|
||||
background: #f5f9ff;
|
||||
border: 1px solid #e4ecfb;
|
||||
min-width: 126px;
|
||||
text-align: left;
|
||||
padding: 18px;
|
||||
border-radius: 16px;
|
||||
background: #162033;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
cursor: default;
|
||||
transition: box-shadow 0.2s, border-color 0.2s;
|
||||
transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.work-stat--click {
|
||||
@@ -290,38 +352,35 @@ export default {
|
||||
}
|
||||
|
||||
.work-stat--click:hover {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
|
||||
border-color: rgba(56, 189, 248, 0.52);
|
||||
background: #1e293b;
|
||||
box-shadow: 0 0 24px rgba(56, 189, 248, 0.14), 0 18px 34px rgba(0, 0, 0, 0.24);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.work-stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #409eff;
|
||||
line-height: 1.2;
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
color: #67e8f9;
|
||||
line-height: 1.1;
|
||||
text-shadow: 0 0 18px rgba(103, 232, 249, 0.35);
|
||||
}
|
||||
|
||||
.work-stat-label {
|
||||
margin-top: 8px;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
color: #dbeafe;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.work-stat-hint {
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: #8fb3d9;
|
||||
}
|
||||
|
||||
.links-card {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.links-card-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
background: #111827;
|
||||
}
|
||||
|
||||
.home-content {
|
||||
@@ -330,25 +389,28 @@ export default {
|
||||
}
|
||||
|
||||
.home-desc {
|
||||
margin: 0 0 16px;
|
||||
color: #606266;
|
||||
margin: 0 0 18px;
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.project-block {
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
padding: 18px;
|
||||
margin-bottom: 14px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.16);
|
||||
border-radius: 16px;
|
||||
background: #162033;
|
||||
}
|
||||
|
||||
.project-block:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
font-weight: 800;
|
||||
color: #e0f2fe;
|
||||
}
|
||||
|
||||
.link-item {
|
||||
@@ -358,12 +420,95 @@ export default {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.link-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.link-label {
|
||||
min-width: 140px;
|
||||
color: #606266;
|
||||
min-width: 150px;
|
||||
color: #b7c9df;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.doc-link {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.doc-link >>> span {
|
||||
color: #67e8f9;
|
||||
}
|
||||
|
||||
body.theme-light .greet-card,
|
||||
body.theme-light .work-card,
|
||||
body.theme-light .links-card {
|
||||
background: #ffffff;
|
||||
border-color: #dbe5f3;
|
||||
box-shadow: 0 14px 34px rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
|
||||
body.theme-light .greet-card {
|
||||
background: radial-gradient(circle at 88% 16%, rgba(96, 165, 250, 0.24), transparent 28%), linear-gradient(135deg, #2563eb 0%, #3b82f6 58%, #60a5fa 100%);
|
||||
color: #ffffff;
|
||||
border-color: rgba(96, 165, 250, 0.42);
|
||||
}
|
||||
|
||||
body.theme-light .greet-card:after {
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.26), transparent 68%);
|
||||
}
|
||||
|
||||
body.theme-light .greet-date,
|
||||
body.theme-light .greet-progress-label {
|
||||
color: rgba(239, 246, 255, 0.92);
|
||||
}
|
||||
|
||||
body.theme-light .greet-progress >>> .el-progress-bar__outer {
|
||||
background-color: rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
|
||||
body.theme-light .greet-login-tip >>> .el-link.el-link--primary {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
body.theme-light .work-card-title,
|
||||
body.theme-light .links-card-title,
|
||||
body.theme-light .project-title {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
body.theme-light .work-card-title:before,
|
||||
body.theme-light .links-card-title:before {
|
||||
background: linear-gradient(180deg, #2563eb 0%, #38bdf8 100%);
|
||||
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.18);
|
||||
}
|
||||
|
||||
body.theme-light .work-stat,
|
||||
body.theme-light .project-block {
|
||||
background: #f8fbff;
|
||||
border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.theme-light .work-stat--click:hover {
|
||||
background: #eef6ff;
|
||||
border-color: #bfdbfe;
|
||||
box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
body.theme-light .work-stat-value {
|
||||
color: #2563eb;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
body.theme-light .work-stat-label,
|
||||
body.theme-light .link-label {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
body.theme-light .work-stat-hint,
|
||||
body.theme-light .home-desc {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
body.theme-light .doc-link >>> span {
|
||||
color: #2563eb;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,14 +1,21 @@
|
||||
<template>
|
||||
<div class="auto-test-main" style="height: 100%">
|
||||
<el-container style="height: 100%">
|
||||
<div class="aside" style="height: 100%">
|
||||
<div class="auto-test-main" :class="themeClass">
|
||||
<el-container class="app-shell">
|
||||
<aside class="aside" :class="{ 'aside--collapse': isCollapse }">
|
||||
<div class="brand-panel">
|
||||
<div class="brand-mark">效</div>
|
||||
<div v-show="!isCollapse" class="brand-copy">
|
||||
<div class="brand-name">{{ systemName }}</div>
|
||||
<div class="brand-subtitle">Quality Workspace</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-menu
|
||||
:default-active="$route.path"
|
||||
class="el-menu-vertical-demo"
|
||||
:collapse="isCollapse"
|
||||
background-color="#545c64"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffd04b"
|
||||
:background-color="menuBackgroundColor"
|
||||
:text-color="menuTextColor"
|
||||
:active-text-color="menuActiveTextColor"
|
||||
:router="true">
|
||||
<template v-for="menu in displayMenus">
|
||||
<el-submenu v-if="menu.children && menu.children.length > 0" :index="menuIndex(menu)" :key="'sub-' + menuKey(menu)">
|
||||
@@ -41,19 +48,24 @@
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-container>
|
||||
<el-header class="header" style="background-color: rgba(230, 226, 215, 0.9)">
|
||||
</aside>
|
||||
<el-container class="workspace-shell">
|
||||
<el-header class="header">
|
||||
<div class="header-left">
|
||||
<div class="header-icon">
|
||||
<i v-if="isCollapse" class="el-icon-s-unfold" style="font-size: 20px" @click="setCollapse"></i>
|
||||
<i v-else class="el-icon-s-fold" style="font-size: 20px" @click="setCollapse"></i>
|
||||
</div>
|
||||
<button class="header-icon" type="button" @click="setCollapse">
|
||||
<i v-if="isCollapse" class="el-icon-s-unfold"></i>
|
||||
<i v-else class="el-icon-s-fold"></i>
|
||||
</button>
|
||||
<div class="system-name">
|
||||
<span>{{ systemName }}</span>
|
||||
<small>测试协作与效能管理平台</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-user">
|
||||
<button class="theme-switch" type="button" @click="toggleTheme">
|
||||
<i :class="themeIcon"></i>
|
||||
<span>{{ themeLabel }}</span>
|
||||
</button>
|
||||
<el-dropdown v-if="currentUser" trigger="click" @command="handleUserCommand">
|
||||
<span class="user-name-dropdown">
|
||||
{{ displayName }}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
@@ -65,7 +77,7 @@
|
||||
<span v-else class="login-label" @click="goLogin">登录</span>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-main class="main-canvas">
|
||||
<router-view class="main-form" name="Manage"></router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
@@ -79,9 +91,13 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
isCollapse: false,
|
||||
systemName: '效能平台'
|
||||
systemName: '效能平台',
|
||||
uiTheme: localStorage.getItem('uiTheme') || 'dark'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.applyTheme()
|
||||
},
|
||||
computed: {
|
||||
currentUser() {
|
||||
return this.$store.state.currentUser
|
||||
@@ -109,9 +125,36 @@ export default {
|
||||
return ''
|
||||
}
|
||||
return this.currentUser.username || this.currentUser.realName || '未命名用户'
|
||||
},
|
||||
themeClass() {
|
||||
return this.uiTheme === 'light' ? 'theme-shell-light' : 'theme-shell-dark'
|
||||
},
|
||||
themeLabel() {
|
||||
return this.uiTheme === 'light' ? '深色' : '浅色'
|
||||
},
|
||||
themeIcon() {
|
||||
return this.uiTheme === 'light' ? 'el-icon-moon' : 'el-icon-sunny'
|
||||
},
|
||||
menuBackgroundColor() {
|
||||
return this.uiTheme === 'light' ? '#ffffff' : '#07111f'
|
||||
},
|
||||
menuTextColor() {
|
||||
return this.uiTheme === 'light' ? '#64748b' : '#93a9c7'
|
||||
},
|
||||
menuActiveTextColor() {
|
||||
return this.uiTheme === 'light' ? '#ffffff' : '#e0f2fe'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
applyTheme() {
|
||||
document.body.classList.remove('theme-dark', 'theme-light')
|
||||
document.body.classList.add(this.uiTheme === 'light' ? 'theme-light' : 'theme-dark')
|
||||
},
|
||||
toggleTheme() {
|
||||
this.uiTheme = this.uiTheme === 'light' ? 'dark' : 'light'
|
||||
localStorage.setItem('uiTheme', this.uiTheme)
|
||||
this.applyTheme()
|
||||
},
|
||||
setCollapse() {
|
||||
this.isCollapse = !this.isCollapse
|
||||
},
|
||||
@@ -333,49 +376,308 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.auto-test-main {
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #070b16;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
height: 100vh;
|
||||
min-width: 1100px;
|
||||
overflow: hidden;
|
||||
background: radial-gradient(circle at 18% 8%, rgba(37, 99, 235, 0.22), transparent 30%), #070b16;
|
||||
}
|
||||
|
||||
.aside {
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #07111f 0%, #081426 46%, #050914 100%);
|
||||
box-shadow: 12px 0 38px rgba(0, 0, 0, 0.42), inset -1px 0 0 rgba(56, 189, 248, 0.14);
|
||||
transition: width 0.25s ease;
|
||||
}
|
||||
|
||||
.aside--collapse .brand-panel {
|
||||
justify-content: center;
|
||||
padding: 18px 8px;
|
||||
}
|
||||
|
||||
.brand-panel {
|
||||
height: 72px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 18px;
|
||||
color: #e0f2fe;
|
||||
background: linear-gradient(135deg, rgba(14, 165, 233, 0.18) 0%, rgba(15, 23, 42, 0.96) 100%);
|
||||
border-bottom: 1px solid rgba(56, 189, 248, 0.18);
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
border-radius: 12px;
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
color: #06111f;
|
||||
background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
|
||||
box-shadow: 0 0 22px rgba(56, 189, 248, 0.48), 0 12px 30px rgba(99, 102, 241, 0.25);
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
margin-top: 2px;
|
||||
font-size: 11px;
|
||||
color: #67e8f9;
|
||||
letter-spacing: 0.8px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
width: 200px;
|
||||
/*min-height: 400px;*/
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
padding: 0 20px 0 0;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.el-menu-vertical-demo {
|
||||
height: 100%;
|
||||
height: calc(100% - 72px);
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.el-menu-vertical-demo >>> .el-menu-item,
|
||||
.el-menu-vertical-demo >>> .el-submenu__title {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
margin: 4px 10px;
|
||||
border-radius: 13px;
|
||||
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.el-menu-vertical-demo >>> .el-menu-item.is-active {
|
||||
color: #e0f2fe !important;
|
||||
background: linear-gradient(135deg, rgba(14, 165, 233, 0.95) 0%, rgba(79, 70, 229, 0.95) 100%) !important;
|
||||
box-shadow: 0 0 24px rgba(56, 189, 248, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.el-menu-vertical-demo >>> .el-menu-item:hover,
|
||||
.el-menu-vertical-demo >>> .el-submenu__title:hover {
|
||||
background: rgba(14, 165, 233, 0.12) !important;
|
||||
color: #e0f2fe !important;
|
||||
}
|
||||
|
||||
.workspace-shell {
|
||||
min-width: 0;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 64px !important;
|
||||
line-height: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px 0 18px !important;
|
||||
background: rgba(8, 14, 30, 0.88);
|
||||
border-bottom: 1px solid rgba(56, 189, 248, 0.18);
|
||||
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border: 1px solid rgba(56, 189, 248, 0.28);
|
||||
border-radius: 12px;
|
||||
color: #7dd3fc;
|
||||
background: rgba(14, 165, 233, 0.1);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.header-icon:hover {
|
||||
background: rgba(14, 165, 233, 0.18);
|
||||
box-shadow: 0 0 18px rgba(56, 189, 248, 0.22);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.system-name span {
|
||||
display: block;
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
font-weight: 800;
|
||||
color: #e0f2fe;
|
||||
}
|
||||
|
||||
.system-name small {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: #7dd3fc;
|
||||
}
|
||||
|
||||
.header-user {
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #c4d7f2;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-label {
|
||||
color: #409EFF;
|
||||
.theme-switch {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
color: #dbeafe;
|
||||
background: rgba(15, 23, 42, 0.86);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.theme-switch:hover {
|
||||
background: rgba(14, 165, 233, 0.18);
|
||||
box-shadow: 0 0 18px rgba(56, 189, 248, 0.18);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.user-name-dropdown {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 23, 42, 0.86);
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
color: #dbeafe;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-label {
|
||||
color: #67e8f9;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main-canvas {
|
||||
height: calc(100vh - 64px);
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background: radial-gradient(circle at 82% 14%, rgba(34, 211, 238, 0.14), transparent 24%), linear-gradient(135deg, #08111f 0%, #0b1020 45%, #070b16 100%);
|
||||
}
|
||||
|
||||
.main-form {
|
||||
min-height: calc(100vh - 104px);
|
||||
}
|
||||
|
||||
.theme-shell-light.auto-test-main {
|
||||
background: #eef4ff;
|
||||
}
|
||||
|
||||
.theme-shell-light .app-shell {
|
||||
background: radial-gradient(circle at 18% 8%, rgba(59, 130, 246, 0.12), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
|
||||
}
|
||||
|
||||
.theme-shell-light .aside {
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 48%, #eaf2ff 100%);
|
||||
box-shadow: 10px 0 30px rgba(37, 99, 235, 0.12), inset -1px 0 0 #dbe5f3;
|
||||
}
|
||||
|
||||
.theme-shell-light .brand-panel {
|
||||
color: #0f172a;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #eaf2ff 100%);
|
||||
border-bottom-color: #dbe5f3;
|
||||
}
|
||||
|
||||
.theme-shell-light .brand-mark {
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
|
||||
box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
|
||||
}
|
||||
|
||||
.theme-shell-light .brand-subtitle {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.theme-shell-light .el-menu-vertical-demo {
|
||||
background: #f4f8ff !important;
|
||||
}
|
||||
|
||||
.theme-shell-light .el-menu-vertical-demo >>> .el-menu,
|
||||
.theme-shell-light .el-menu-vertical-demo >>> .el-menu--inline {
|
||||
background: #f4f8ff !important;
|
||||
}
|
||||
|
||||
.theme-shell-light .el-menu-vertical-demo >>> .el-menu-item,
|
||||
.theme-shell-light .el-menu-vertical-demo >>> .el-submenu__title {
|
||||
background: transparent !important;
|
||||
color: #64748b !important;
|
||||
}
|
||||
|
||||
.theme-shell-light .el-menu-vertical-demo >>> .el-menu-item.is-active {
|
||||
color: #ffffff !important;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%) !important;
|
||||
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
|
||||
}
|
||||
|
||||
.theme-shell-light .el-menu-vertical-demo >>> .el-menu-item:hover,
|
||||
.theme-shell-light .el-menu-vertical-demo >>> .el-submenu__title:hover {
|
||||
background: #eaf2ff !important;
|
||||
color: #1d4ed8 !important;
|
||||
}
|
||||
|
||||
.theme-shell-light .header {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-bottom-color: #dbe5f3;
|
||||
box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
|
||||
.theme-shell-light .header-icon,
|
||||
.theme-shell-light .theme-switch,
|
||||
.theme-shell-light .user-name-dropdown {
|
||||
color: #1d4ed8;
|
||||
background: #f8fbff;
|
||||
border-color: #dbe5f3;
|
||||
}
|
||||
|
||||
.theme-shell-light .header-icon:hover,
|
||||
.theme-shell-light .theme-switch:hover {
|
||||
background: #eaf2ff;
|
||||
box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
.theme-shell-light .system-name span {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.theme-shell-light .system-name small,
|
||||
.theme-shell-light .login-label {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.theme-shell-light .header-user {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.theme-shell-light .main-canvas,
|
||||
.theme-shell-light .main-form {
|
||||
background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2212,25 +2212,26 @@ export default {
|
||||
|
||||
.case-import-title {
|
||||
font-size: 28px;
|
||||
color: #303133;
|
||||
color: #f8fafc;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.case-import-subtitle {
|
||||
color: #909399;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.case-import-dropzone {
|
||||
border: 1px dashed #dcdfe6;
|
||||
border: 1px dashed rgba(56, 189, 248, 0.36);
|
||||
border-radius: 4px;
|
||||
padding: 28px 20px;
|
||||
margin: 0 auto;
|
||||
max-width: 520px;
|
||||
background: #0f172a;
|
||||
}
|
||||
|
||||
.case-import-drop-text {
|
||||
color: #606266;
|
||||
color: #cbd5e1;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@@ -2240,12 +2241,12 @@ export default {
|
||||
}
|
||||
|
||||
.case-import-file-tip {
|
||||
color: #909399;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.case-import-file-name {
|
||||
margin-top: 8px;
|
||||
color: #303133;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.case-import-actions {
|
||||
@@ -2281,10 +2282,10 @@ export default {
|
||||
.ai-case-import-tip {
|
||||
margin: 0 0 12px;
|
||||
padding: 10px 12px;
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #d9ecff;
|
||||
background: rgba(56, 189, 248, 0.1);
|
||||
border: 1px solid rgba(56, 189, 248, 0.28);
|
||||
border-radius: 4px;
|
||||
color: #606266;
|
||||
color: #cbd5e1;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -2299,22 +2300,22 @@ export default {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 12px;
|
||||
padding: 8px 10px;
|
||||
background: #fafafa;
|
||||
border: 1px solid #ebeef5;
|
||||
background: #162033;
|
||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.ai-gen-params-label {
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.ai-gen-params-hint {
|
||||
margin-left: 6px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.ai-doc-block {
|
||||
@@ -2324,7 +2325,7 @@ export default {
|
||||
.ai-doc-block-title {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
color: #f8fafc;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@@ -2352,15 +2353,15 @@ export default {
|
||||
.ai-case-table-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
color: #f8fafc;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mindmap-wrap {
|
||||
margin-top: 8px;
|
||||
border: 1px solid #ebeef5;
|
||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||
border-radius: 6px;
|
||||
background: #fafcff;
|
||||
background: #0f172a;
|
||||
padding: 14px 12px;
|
||||
min-height: 280px;
|
||||
overflow: auto;
|
||||
@@ -2414,11 +2415,11 @@ export default {
|
||||
gap: 6px;
|
||||
min-width: 220px;
|
||||
max-width: 760px;
|
||||
background: #fff;
|
||||
border: 1px solid #dce6ff;
|
||||
background: #111827;
|
||||
border: 1px solid rgba(56, 189, 248, 0.28);
|
||||
border-radius: 8px;
|
||||
padding: 8px 10px;
|
||||
box-shadow: 0 1px 4px rgba(64, 158, 255, 0.08);
|
||||
box-shadow: 0 1px 8px rgba(56, 189, 248, 0.12);
|
||||
}
|
||||
|
||||
.mindmap-node-head {
|
||||
@@ -2442,7 +2443,7 @@ export default {
|
||||
.mindmap-node-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
color: #303133;
|
||||
color: #f8fafc;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
word-break: break-word;
|
||||
@@ -2477,15 +2478,15 @@ export default {
|
||||
.mindmap-inline-detail-card {
|
||||
width: 420px;
|
||||
max-width: 620px;
|
||||
background: #fff;
|
||||
border: 1px solid #d9e8f6;
|
||||
background: #111827;
|
||||
border: 1px solid rgba(56, 189, 248, 0.26);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
box-shadow: 0 1px 6px rgba(64, 158, 255, 0.12);
|
||||
box-shadow: 0 1px 8px rgba(56, 189, 248, 0.12);
|
||||
}
|
||||
|
||||
.mindmap-inline-detail-title {
|
||||
color: #303133;
|
||||
color: #f8fafc;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -2497,7 +2498,7 @@ export default {
|
||||
}
|
||||
|
||||
.mindmap-inline-detail-item {
|
||||
color: #606266;
|
||||
color: #cbd5e1;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 6px;
|
||||
white-space: pre-wrap;
|
||||
@@ -2520,12 +2521,12 @@ export default {
|
||||
}
|
||||
|
||||
.mindmap-meta-text {
|
||||
color: #909399;
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mindmap-empty {
|
||||
color: #909399;
|
||||
color: #94a3b8;
|
||||
text-align: center;
|
||||
line-height: 220px;
|
||||
}
|
||||
@@ -2537,7 +2538,7 @@ export default {
|
||||
.ai-case-detail-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
color: #f8fafc;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
@@ -2553,33 +2554,54 @@ export default {
|
||||
.ai-case-detail-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #606266;
|
||||
color: #cbd5e1;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.ai-case-detail-text {
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
color: #e5e7eb;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
padding: 10px 12px;
|
||||
background: #f9fafc;
|
||||
background: #0f172a;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ebeef5;
|
||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||
}
|
||||
|
||||
.ai-case-detail-empty {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
color: #94a3b8;
|
||||
padding: 32px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.auto-gen-case-title {
|
||||
color: #303133;
|
||||
color: #f8fafc;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
body.theme-light .ai-case-import-tip {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
body.theme-light .ai-gen-params-bar {
|
||||
background: #f1f6ff;
|
||||
border-color: #dbe5f3;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
body.theme-light .ai-gen-params-label,
|
||||
body.theme-light .ai-doc-block-title,
|
||||
body.theme-light .ai-case-table-title,
|
||||
body.theme-light .auto-gen-case-title {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
body.theme-light .ai-gen-params-hint {
|
||||
color: #64748b;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,14 +1,24 @@
|
||||
<template>
|
||||
<div id="backgroud">
|
||||
<div id="backgroud" :class="themeClass">
|
||||
<button class="login-theme-switch" type="button" @click="toggleTheme">
|
||||
<i :class="themeIcon"></i>
|
||||
<span>{{ themeLabel }}</span>
|
||||
</button>
|
||||
<div class="login-hero">
|
||||
<div class="login-brand-mark">效</div>
|
||||
<h1>效能平台</h1>
|
||||
<p>统一管理测试协作、缺陷跟踪、用例周期与数据工具。</p>
|
||||
</div>
|
||||
<div class="content_right">
|
||||
<div class="login-body-title">
|
||||
<h2>登录</h2>
|
||||
<h2>欢迎登录</h2>
|
||||
<p>Quality Workspace</p>
|
||||
</div>
|
||||
<div class="messge">
|
||||
<span>{{ msg }}</span>
|
||||
</div>
|
||||
<div class="cr_top">
|
||||
<div class="ct_input" style="height: 60px;width: 254px">
|
||||
<div class="ct_input">
|
||||
<span class="ct-img-yhm"> </span>
|
||||
<input
|
||||
id="username"
|
||||
@@ -23,7 +33,7 @@
|
||||
placeholder="用户名"
|
||||
@keyup.enter="handleLogin">
|
||||
</div>
|
||||
<div class="ct_input" style="height:60px;width: 254px">
|
||||
<div class="ct_input">
|
||||
<span class="ct_img_mm"> </span>
|
||||
<input
|
||||
id="password"
|
||||
@@ -57,10 +67,34 @@ export default {
|
||||
return {
|
||||
msg: '',
|
||||
username: '',
|
||||
password: ''
|
||||
password: '',
|
||||
uiTheme: localStorage.getItem('uiTheme') || 'dark'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
themeClass() {
|
||||
return this.uiTheme === 'light' ? 'theme-login-light' : 'theme-login-dark'
|
||||
},
|
||||
themeLabel() {
|
||||
return this.uiTheme === 'light' ? '深色' : '浅色'
|
||||
},
|
||||
themeIcon() {
|
||||
return this.uiTheme === 'light' ? 'el-icon-moon' : 'el-icon-sunny'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.applyTheme()
|
||||
},
|
||||
methods: {
|
||||
applyTheme() {
|
||||
document.body.classList.remove('theme-dark', 'theme-light')
|
||||
document.body.classList.add(this.uiTheme === 'light' ? 'theme-light' : 'theme-dark')
|
||||
},
|
||||
toggleTheme() {
|
||||
this.uiTheme = this.uiTheme === 'light' ? 'dark' : 'light'
|
||||
localStorage.setItem('uiTheme', this.uiTheme)
|
||||
this.applyTheme()
|
||||
},
|
||||
handleLogin() {
|
||||
if (!this.username || !this.password) {
|
||||
this.msg = 'username、password 为必传参数'
|
||||
@@ -126,67 +160,147 @@ export default {
|
||||
<style scoped>
|
||||
@import "../../assets/css/Form.css";
|
||||
|
||||
.content_right {
|
||||
padding: 20px 0;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
border-radius: 3px;
|
||||
border-color: rgba(250, 255, 251, .8);
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, .1), 0 0 8px rgba(140, 141, 140, .6);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
outline: 0;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
#backgroud {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 80px;
|
||||
background: radial-gradient(circle at 15% 18%, rgba(34, 211, 238, 0.22), transparent 26%), radial-gradient(circle at 82% 22%, rgba(99, 102, 241, 0.24), transparent 30%), linear-gradient(135deg, #050914 0%, #08111f 46%, #0f172a 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-hero {
|
||||
width: 420px;
|
||||
color: #f8fbff;
|
||||
}
|
||||
|
||||
.login-brand-mark {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
border-radius: 18px;
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
color: #06111f;
|
||||
background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
|
||||
box-shadow: 0 0 34px rgba(56, 189, 248, 0.48), 0 22px 48px rgba(99, 102, 241, 0.28);
|
||||
}
|
||||
|
||||
.login-hero h1 {
|
||||
margin: 24px 0 14px;
|
||||
font-size: 42px;
|
||||
line-height: 1.15;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0 0 26px rgba(103, 232, 249, 0.22);
|
||||
}
|
||||
|
||||
.login-hero p {
|
||||
margin: 0;
|
||||
color: #9fb8d4;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.login-theme-switch {
|
||||
position: fixed;
|
||||
right: 28px;
|
||||
top: 24px;
|
||||
z-index: 2;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
color: #dbeafe;
|
||||
background: rgba(15, 23, 42, 0.78);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.login-theme-switch:hover {
|
||||
background: rgba(14, 165, 233, 0.18);
|
||||
box-shadow: 0 0 18px rgba(56, 189, 248, 0.18);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.content_right {
|
||||
padding: 34px 36px 30px;
|
||||
background: rgba(15, 23, 42, 0.78);
|
||||
color: #dbeafe;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
box-shadow: 0 0 42px rgba(56, 189, 248, 0.12), 0 30px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
position: static;
|
||||
width: 330px;
|
||||
min-height: 340px;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.login-body-title h2 {
|
||||
font-size: 26px;
|
||||
color: #e0f2fe;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.login-body-title p {
|
||||
color: #67e8f9;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.8px;
|
||||
}
|
||||
|
||||
.cr_top .ct_input {
|
||||
position: relative;
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.account-oprate .regist-btn {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
color: #67e8f9;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.account-oprate .regist-btn:hover {
|
||||
color: #bae6fd;
|
||||
}
|
||||
|
||||
.messge {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
height: 20px;
|
||||
margin-top: 14px;
|
||||
height: 22px;
|
||||
text-align: left;
|
||||
padding-left: 24px;
|
||||
color: #D60909;
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.content_right .cr_top {
|
||||
position: relative;
|
||||
margin: 0 23px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.content_right .input_text {
|
||||
margin-bottom: 18px;
|
||||
background: #fff;
|
||||
background: rgba(8, 18, 36, 0.86);
|
||||
}
|
||||
|
||||
.account-oprate {
|
||||
width: 252px;
|
||||
margin-left: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ct_img_mm,
|
||||
.ct-img-yhm {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 8px;
|
||||
top: 16px;
|
||||
left: 14px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url("https://t4.chei.com.cn/passport/images/login2014/icon_input.png");
|
||||
opacity: 0.82;
|
||||
filter: invert(78%) sepia(37%) saturate(773%) hue-rotate(153deg) brightness(103%) contrast(93%);
|
||||
}
|
||||
|
||||
.ct-img-yhm {
|
||||
@@ -195,39 +309,52 @@ export default {
|
||||
|
||||
.input_text {
|
||||
display: inline-block;
|
||||
width: 224px;
|
||||
height: 24px;
|
||||
padding: 8px 0 8px 28px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 0 14px 0 42px;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
color: #e0f2fe;
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
border-radius: 14px;
|
||||
vertical-align: middle;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.input_text:hover {
|
||||
border-color: rgba(82, 168, 236, .8);
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 8px rgba(82, 168, 236, .6);
|
||||
.input_text::placeholder {
|
||||
color: #6f8baa;
|
||||
}
|
||||
|
||||
.input_text:hover,
|
||||
.input_text:focus {
|
||||
border-color: rgba(103, 232, 249, 0.72);
|
||||
background: rgba(8, 18, 36, 0.96);
|
||||
box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12), 0 0 20px rgba(56, 189, 248, 0.14);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.btn_login:hover {
|
||||
background-color: #3e82dc;
|
||||
background: linear-gradient(135deg, #22d3ee 0%, #4f46e5 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 26px rgba(56, 189, 248, 0.32), 0 16px 30px rgba(79, 70, 229, 0.24);
|
||||
}
|
||||
|
||||
.btn_login {
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
width: 254px;
|
||||
height: 37px;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
border: 1px solid #4591f5;
|
||||
background-color: #4591f5;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 14px;
|
||||
color: #06111f;
|
||||
border: 1px solid rgba(103, 232, 249, 0.68);
|
||||
background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
|
||||
margin-bottom: 16px;
|
||||
-webkit-appearance: none;
|
||||
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
button,
|
||||
@@ -273,4 +400,95 @@ ul {
|
||||
padding: 0;
|
||||
font-family: '\5FAE\8F6F\96C5\9ED1', '\5B8B\4F53', Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.theme-login-light#backgroud {
|
||||
background: radial-gradient(circle at 15% 18%, rgba(59, 130, 246, 0.14), transparent 26%), radial-gradient(circle at 82% 22%, rgba(14, 165, 233, 0.12), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #eef4ff 48%, #eaf2ff 100%);
|
||||
}
|
||||
|
||||
.theme-login-light .login-theme-switch {
|
||||
color: #1d4ed8;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-color: #dbe5f3;
|
||||
box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
|
||||
.theme-login-light .login-theme-switch:hover {
|
||||
background: #eaf2ff;
|
||||
box-shadow: 0 14px 26px rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
.theme-login-light .login-hero {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.theme-login-light .login-brand-mark {
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
|
||||
box-shadow: 0 18px 38px rgba(37, 99, 235, 0.24);
|
||||
}
|
||||
|
||||
.theme-login-light .login-hero h1 {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.theme-login-light .login-hero p {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.theme-login-light .content_right {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #334155;
|
||||
border-color: #dbe5f3;
|
||||
box-shadow: 0 24px 70px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.theme-login-light .login-body-title h2 {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.theme-login-light .login-body-title p,
|
||||
.theme-login-light .account-oprate .regist-btn {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.theme-login-light .account-oprate .regist-btn:hover {
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.theme-login-light .content_right .input_text {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.theme-login-light .input_text {
|
||||
color: #0f172a;
|
||||
border-color: #d8e1ef;
|
||||
}
|
||||
|
||||
.theme-login-light .input_text::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.theme-login-light .input_text:hover,
|
||||
.theme-login-light .input_text:focus {
|
||||
border-color: #60a5fa;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.theme-login-light .ct_img_mm,
|
||||
.theme-login-light .ct-img-yhm {
|
||||
opacity: 0.72;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.theme-login-light .btn_login {
|
||||
color: #ffffff;
|
||||
border-color: #2563eb;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
|
||||
}
|
||||
|
||||
.theme-login-light .btn_login:hover {
|
||||
background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
|
||||
box-shadow: 0 16px 30px rgba(37, 99, 235, 0.22);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,27 @@
|
||||
<template>
|
||||
<div id="backgroud">
|
||||
<div class="register-head" style="padding-top: 20px"></div>
|
||||
<div id="backgroud" :class="themeClass">
|
||||
<button class="register-theme-switch" type="button" @click="toggleTheme">
|
||||
<i :class="themeIcon"></i>
|
||||
<span>{{ themeLabel }}</span>
|
||||
</button>
|
||||
<div class="register-hero">
|
||||
<div class="register-brand-mark">效</div>
|
||||
<h1>效能平台</h1>
|
||||
<p>创建账号后即可进入统一测试协作、用例管理与质量工作台。</p>
|
||||
<div class="register-feature-list">
|
||||
<span>测试协作</span>
|
||||
<span>用例管理</span>
|
||||
<span>质量工作台</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model">
|
||||
<div class="location-title"><h1>注册</h1></div>
|
||||
<div class="location-title">
|
||||
<span class="register-card-kicker">Create Account</span>
|
||||
<h1>创建账号</h1>
|
||||
<p>注册后开启你的质量效能工作区</p>
|
||||
</div>
|
||||
|
||||
<el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
|
||||
<el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-position="top" class="demo-ruleForm">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model.trim="ruleForm.username" type="text" placeholder="用户名" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
@@ -77,10 +94,34 @@ export default {
|
||||
username: [{ required: true, validator: validateUsername, trigger: 'blur' }],
|
||||
password: [{ required: true, validator: validatePass, trigger: 'blur' }],
|
||||
checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
|
||||
}
|
||||
},
|
||||
uiTheme: localStorage.getItem('uiTheme') || 'dark'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
themeClass() {
|
||||
return this.uiTheme === 'light' ? 'theme-register-light' : 'theme-register-dark'
|
||||
},
|
||||
themeLabel() {
|
||||
return this.uiTheme === 'light' ? '深色' : '浅色'
|
||||
},
|
||||
themeIcon() {
|
||||
return this.uiTheme === 'light' ? 'el-icon-moon' : 'el-icon-sunny'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.applyTheme()
|
||||
},
|
||||
methods: {
|
||||
applyTheme() {
|
||||
document.body.classList.remove('theme-dark', 'theme-light')
|
||||
document.body.classList.add(this.uiTheme === 'light' ? 'theme-light' : 'theme-dark')
|
||||
},
|
||||
toggleTheme() {
|
||||
this.uiTheme = this.uiTheme === 'light' ? 'dark' : 'light'
|
||||
localStorage.setItem('uiTheme', this.uiTheme)
|
||||
this.applyTheme()
|
||||
},
|
||||
open(message) {
|
||||
this.$alert(message, '提示', {
|
||||
confirmButtonText: '确定'
|
||||
@@ -116,35 +157,349 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "../../assets/css/Form.css";
|
||||
<style scoped>
|
||||
#backgroud {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 72px;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
padding: 72px 48px;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#backgroud.theme-register-dark {
|
||||
background: radial-gradient(circle at 15% 18%, rgba(34, 211, 238, 0.22), transparent 26%), radial-gradient(circle at 82% 22%, rgba(99, 102, 241, 0.24), transparent 30%), linear-gradient(135deg, #050914 0%, #08111f 46%, #0f172a 100%);
|
||||
}
|
||||
|
||||
#backgroud.theme-register-light {
|
||||
background: radial-gradient(circle at 14% 18%, rgba(59, 130, 246, 0.14), transparent 28%), radial-gradient(circle at 84% 18%, rgba(14, 165, 233, 0.16), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #eef6ff 48%, #eaf2ff 100%);
|
||||
}
|
||||
|
||||
.register-hero {
|
||||
flex: 0 0 420px;
|
||||
max-width: 420px;
|
||||
color: #f8fbff;
|
||||
}
|
||||
|
||||
.register-brand-mark {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
border-radius: 18px;
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
color: #06111f;
|
||||
background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
|
||||
box-shadow: 0 0 34px rgba(56, 189, 248, 0.48), 0 22px 48px rgba(99, 102, 241, 0.28);
|
||||
}
|
||||
|
||||
.register-hero h1 {
|
||||
margin: 24px 0 14px;
|
||||
font-size: 42px;
|
||||
line-height: 1.15;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0 0 26px rgba(103, 232, 249, 0.22);
|
||||
}
|
||||
|
||||
.register-hero p {
|
||||
margin: 0;
|
||||
color: #9fb8d4;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.register-feature-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.register-feature-list span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
color: #bae6fd;
|
||||
background: rgba(56, 189, 248, 0.12);
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.register-theme-switch {
|
||||
position: fixed;
|
||||
right: 28px;
|
||||
top: 24px;
|
||||
z-index: 2;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
color: #dbeafe;
|
||||
background: rgba(15, 23, 42, 0.78);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.register-theme-switch:hover {
|
||||
background: rgba(14, 165, 233, 0.18);
|
||||
box-shadow: 0 0 18px rgba(56, 189, 248, 0.18);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.model {
|
||||
position: relative;
|
||||
flex: 0 0 420px;
|
||||
width: 420px;
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 34px 36px 30px;
|
||||
border-radius: 24px;
|
||||
text-align: left;
|
||||
background: rgba(15, 23, 42, 0.82);
|
||||
color: #dbeafe;
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
box-shadow: 0 0 42px rgba(56, 189, 248, 0.12), 0 30px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.location-title {
|
||||
text-align: center;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.register-card-kicker {
|
||||
display: inline-flex;
|
||||
margin-bottom: 10px;
|
||||
color: #67e8f9;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.6px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.location-title h1 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 28px;
|
||||
color: #e0f2fe;
|
||||
}
|
||||
|
||||
.location-title p {
|
||||
margin: 0;
|
||||
color: #9fb8d4;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.register-head {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
float: left;
|
||||
width: 80%;
|
||||
.demo-ruleForm {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.register-actions .el-form-item__content {
|
||||
.demo-ruleForm >>> .el-form-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.model >>> .el-form-item__label {
|
||||
padding: 0 0 7px;
|
||||
color: #cbd5e1;
|
||||
line-height: 1.2;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.model >>> .el-input__inner {
|
||||
height: 44px;
|
||||
background: rgba(8, 18, 36, 0.86);
|
||||
border-color: rgba(56, 189, 248, 0.22);
|
||||
color: #f8fafc;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.model >>> .el-input__inner:hover,
|
||||
.model >>> .el-input__inner:focus {
|
||||
border-color: #38bdf8;
|
||||
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
|
||||
}
|
||||
|
||||
.register-actions {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.register-actions >>> .el-form-item__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-items: stretch;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.login-link-wrap {
|
||||
.enter-btn {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
text-align: right;
|
||||
height: 46px;
|
||||
border: 1px solid rgba(103, 232, 249, 0.68);
|
||||
border-radius: 14px;
|
||||
color: #06111f;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
|
||||
box-shadow: 0 16px 34px rgba(59, 130, 246, 0.25);
|
||||
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.enter-btn:hover {
|
||||
background: linear-gradient(135deg, #22d3ee 0%, #4f46e5 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 26px rgba(56, 189, 248, 0.32), 0 16px 30px rgba(79, 70, 229, 0.24);
|
||||
}
|
||||
|
||||
.login-link-btn {
|
||||
align-self: flex-end;
|
||||
padding-right: 0;
|
||||
margin-top: 10px;
|
||||
color: #67e8f9;
|
||||
}
|
||||
|
||||
.theme-register-light .register-hero {
|
||||
color: #10233f;
|
||||
}
|
||||
|
||||
.theme-register-light .register-brand-mark {
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
|
||||
box-shadow: 0 20px 48px rgba(37, 99, 235, 0.2);
|
||||
}
|
||||
|
||||
.theme-register-light .register-hero h1 {
|
||||
color: #0f172a;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.theme-register-light .register-hero p {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.theme-register-light .register-feature-list span {
|
||||
color: #1d4ed8;
|
||||
background: rgba(37, 99, 235, 0.08);
|
||||
border-color: rgba(37, 99, 235, 0.16);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.theme-register-light .register-theme-switch {
|
||||
color: #1d4ed8;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
border-color: rgba(37, 99, 235, 0.18);
|
||||
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.theme-register-light .register-theme-switch:hover {
|
||||
background: #eff6ff;
|
||||
box-shadow: 0 16px 34px rgba(37, 99, 235, 0.14);
|
||||
}
|
||||
|
||||
.theme-register-light .model {
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
color: #1e293b;
|
||||
border-color: rgba(37, 99, 235, 0.14);
|
||||
box-shadow: 0 28px 70px rgba(37, 99, 235, 0.14);
|
||||
}
|
||||
|
||||
.theme-register-light .register-card-kicker {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.theme-register-light .location-title h1 {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.theme-register-light .location-title p {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.theme-register-light .model >>> .el-form-item__label {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.theme-register-light .model >>> .el-input__inner {
|
||||
background: #ffffff;
|
||||
border-color: #dbe7f6;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.theme-register-light .model >>> .el-input__inner:hover,
|
||||
.theme-register-light .model >>> .el-input__inner:focus {
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.theme-register-light .enter-btn {
|
||||
color: #ffffff;
|
||||
border-color: #2563eb;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
|
||||
}
|
||||
|
||||
.theme-register-light .enter-btn:hover {
|
||||
background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
|
||||
box-shadow: 0 16px 30px rgba(37, 99, 235, 0.22);
|
||||
}
|
||||
|
||||
.theme-register-light .login-link-btn {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
#backgroud {
|
||||
gap: 40px;
|
||||
padding: 72px 28px 36px;
|
||||
}
|
||||
|
||||
.register-hero {
|
||||
flex-basis: 360px;
|
||||
max-width: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
#backgroud {
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
padding: 80px 18px 28px;
|
||||
}
|
||||
|
||||
.register-hero,
|
||||
.model {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
max-width: 430px;
|
||||
}
|
||||
|
||||
.register-hero {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.register-brand-mark,
|
||||
.register-feature-list {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user