From 763bf34c3ac43a4d2c6d98e66cad0c3ec9e5d74a Mon Sep 17 00:00:00 2001 From: yangbin <1796443586@qq.com> Date: Mon, 24 Aug 2026 18:30:32 +0800 Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E9=A3=8E=E6=A0=BC=E4=BB=A5?= =?UTF-8?q?=E5=8F=8A=E9=83=A8=E5=88=86=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=8F=98=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/assets/styles/education-theme.scss | 615 ++++++++++++++++++ .../src/assets/styles/element-variables.scss | 10 +- frontend/src/assets/styles/index.scss | 13 +- frontend/src/assets/styles/sidebar.scss | 21 +- frontend/src/assets/styles/variables.scss | 10 +- frontend/src/layout/components/Navbar.vue | 38 +- .../src/layout/components/SemesterBar.vue | 11 +- .../src/layout/components/Sidebar/index.vue | 10 +- .../src/layout/components/TagsView/index.vue | 37 +- frontend/src/layout/index.vue | 20 +- .../src/views/schedule/planImport/index.vue | 26 +- .../src/views/student/studentInfo/index.vue | 15 +- .../views/teachBusiness/semester/index.vue | 53 +- frontend/src/views/teachNotice/index.vue | 107 ++- .../src/views/teachOffice/elective/index.vue | 144 ++-- .../src/views/teachOffice/subject/index.vue | 71 +- .../src/views/teachOffice/teacher/index.vue | 6 +- .../organLog/components/auditedView.vue | 113 ++-- .../organLog/components/logView.vue | 127 ++-- .../organLog/components/reportedView.vue | 134 ++-- 20 files changed, 1044 insertions(+), 537 deletions(-) create mode 100644 frontend/src/assets/styles/education-theme.scss diff --git a/frontend/src/assets/styles/education-theme.scss b/frontend/src/assets/styles/education-theme.scss new file mode 100644 index 000000000..9d57d72fc --- /dev/null +++ b/frontend/src/assets/styles/education-theme.scss @@ -0,0 +1,615 @@ +/** + * Copyright (c) 2026 软件研发部 + * 内部使用,未经授权禁止外传。 + * @description 教学管理信息系统全局视觉主题 + * @author 软件研发部 + * @since 2026-08-24 + */ + +:root { + --edu-color-primary: #0b6b55; + --edu-color-primary-hover: #085442; + --edu-color-primary-active: #063f34; + --edu-color-primary-soft: #e8f3ef; + --edu-color-primary-faint: #f3f8f6; + --edu-color-accent: #c69b3c; + --edu-color-text: #172b25; + --edu-color-text-secondary: #52645f; + --edu-color-text-muted: #7a8a85; + --edu-color-border: #dce6e2; + --edu-color-border-strong: #c8d8d2; + --edu-color-canvas: #f4f7f6; + --edu-color-surface: #ffffff; + --edu-color-success: #238b68; + --edu-color-warning: #b77a17; + --edu-color-danger: #c94b52; + --edu-shadow-sm: 0 1px 2px rgba(19, 45, 37, 0.05); + --edu-shadow-md: 0 6px 18px rgba(19, 45, 37, 0.08); + --edu-shadow-dialog: 0 18px 48px rgba(14, 36, 30, 0.18); + --edu-radius-sm: 5px; + --edu-radius-md: 8px; + --edu-radius-lg: 12px; + --edu-transition-fast: 160ms ease; + --edu-transition-base: 220ms ease; +} + +body { + color: var(--edu-color-text); + background: var(--edu-color-canvas); +} + +button, +input, +textarea, +select { + font-family: inherit; +} + +button, +[role="button"], +.el-button, +.el-dropdown, +.el-menu-item, +.el-submenu__title { + -webkit-tap-highlight-color: transparent; +} + +a:focus-visible, +button:focus-visible, +[role="button"]:focus-visible, +.el-button:focus-visible, +.el-input__inner:focus-visible, +.el-textarea__inner:focus-visible { + outline: 2px solid var(--edu-color-primary); + outline-offset: 2px; +} + +#app .main-container, +#app .app-main { + background: var(--edu-color-canvas); +} + +#app .app-container { + padding: 20px 22px; +} + +/* 按钮采用清晰的主次层级,避免同屏操作全部呈现为高强调。 */ +#app .el-button { + min-height: 36px; + padding: 9px 16px; + border-radius: var(--edu-radius-sm); + border-color: var(--edu-color-border-strong); + color: #334740; + font-size: 14px; + font-weight: 500; + letter-spacing: 0.1px; + box-shadow: var(--edu-shadow-sm); + transition: + color var(--edu-transition-fast), + background-color var(--edu-transition-fast), + border-color var(--edu-transition-fast), + box-shadow var(--edu-transition-fast); +} + +#app .el-button:hover, +#app .el-button:focus { + color: var(--edu-color-primary); + background: var(--edu-color-primary-faint); + border-color: #9cbdb1; + box-shadow: 0 2px 6px rgba(11, 107, 85, 0.10); +} + +#app .el-button:active { + color: var(--edu-color-primary-active); + background: #dfede8; + border-color: var(--edu-color-primary); + box-shadow: inset 0 1px 2px rgba(8, 76, 63, 0.12); +} + +#app .el-button--primary { + color: #ffffff; + background: var(--edu-color-primary); + border-color: var(--edu-color-primary); + box-shadow: 0 2px 5px rgba(11, 107, 85, 0.18); +} + +#app .el-button--primary:hover, +#app .el-button--primary:focus { + color: #ffffff; + background: var(--edu-color-primary-hover); + border-color: var(--edu-color-primary-hover); + box-shadow: 0 4px 10px rgba(11, 107, 85, 0.22); +} + +#app .el-button--primary:active { + color: #ffffff; + background: var(--edu-color-primary-active); + border-color: var(--edu-color-primary-active); +} + +#app .el-button--primary.is-plain { + color: var(--edu-color-primary); + background: var(--edu-color-primary-faint); + border-color: #9cbdb1; + box-shadow: none; +} + +#app .el-button--primary.is-plain:hover, +#app .el-button--primary.is-plain:focus { + color: #ffffff; + background: var(--edu-color-primary); + border-color: var(--edu-color-primary); +} + +#app .el-button--success.is-plain, +#app .el-button--warning.is-plain, +#app .el-button--danger.is-plain, +#app .el-button--info.is-plain { + box-shadow: none; +} + +#app .el-button--success.is-plain { + color: var(--edu-color-success); + background: #eef8f4; + border-color: #afd5c7; +} + +#app .el-button--warning.is-plain { + color: var(--edu-color-warning); + background: #fbf6ea; + border-color: #dfc58f; +} + +#app .el-button--danger.is-plain { + color: var(--edu-color-danger); + background: #fbf0f1; + border-color: #e4b3b7; +} + +#app .el-button--info.is-plain { + color: #5f706b; + background: #f3f5f4; + border-color: #c8d1ce; +} + +#app .el-button--success.is-plain:hover, +#app .el-button--warning.is-plain:hover, +#app .el-button--danger.is-plain:hover, +#app .el-button--info.is-plain:hover { + color: #ffffff; +} + +#app .el-button--success { + background: var(--edu-color-success); + border-color: var(--edu-color-success); +} + +#app .el-button--warning { + background: var(--edu-color-warning); + border-color: var(--edu-color-warning); +} + +#app .el-button--danger { + background: var(--edu-color-danger); + border-color: var(--edu-color-danger); +} + +#app .el-button--info { + background: #5f706b; + border-color: #5f706b; +} + +#app .el-button--success, +#app .el-button--warning, +#app .el-button--danger, +#app .el-button--info { + color: #ffffff; +} + +#app .el-button--success.is-plain:hover { + background: var(--edu-color-success); + border-color: var(--edu-color-success); +} + +#app .el-button--warning.is-plain:hover { + background: var(--edu-color-warning); + border-color: var(--edu-color-warning); +} + +#app .el-button--danger.is-plain:hover { + background: var(--edu-color-danger); + border-color: var(--edu-color-danger); +} + +#app .el-button--info.is-plain:hover { + background: #5f706b; + border-color: #5f706b; +} + +#app .el-button--mini { + min-height: 30px; + padding: 6px 11px; + font-size: 13px; +} + +#app .el-button--small { + min-height: 32px; + padding: 7px 13px; +} + +#app .el-button--text { + min-height: 30px; + padding: 5px 7px; + color: var(--edu-color-primary); + border-color: transparent; + background: transparent; + box-shadow: none; +} + +#app .el-button--text:hover, +#app .el-button--text:focus { + color: var(--edu-color-primary-hover); + background: var(--edu-color-primary-soft); + border-color: transparent; +} + +#app .el-button.is-circle { + min-width: 36px; + padding: 0; +} + +#app .el-button.is-disabled, +#app .el-button.is-disabled:hover, +#app .el-button.is-disabled:focus { + color: #9aa7a3; + background: #f2f4f3; + border-color: #e1e7e4; + box-shadow: none; +} + +/* 表单控件保持紧凑,同时用统一焦点状态提升批量录入效率。 */ +#app .el-input__inner, +#app .el-textarea__inner, +#app .el-range-editor.el-input__inner { + border-color: var(--edu-color-border-strong); + border-radius: var(--edu-radius-sm); + color: var(--edu-color-text); + background: var(--edu-color-surface); + transition: + border-color var(--edu-transition-fast), + box-shadow var(--edu-transition-fast); +} + +#app .el-input__inner:hover, +#app .el-textarea__inner:hover, +#app .el-range-editor.el-input__inner:hover { + border-color: #91b3a7; +} + +#app .el-input.is-active .el-input__inner, +#app .el-input__inner:focus, +#app .el-textarea__inner:focus, +#app .el-range-editor.is-active { + border-color: var(--edu-color-primary); + box-shadow: 0 0 0 3px rgba(11, 107, 85, 0.10); +} + +#app .el-form-item__label { + color: #344a42; + font-weight: 500; +} + +#app .el-checkbox__input.is-checked .el-checkbox__inner, +#app .el-checkbox__input.is-indeterminate .el-checkbox__inner, +#app .el-radio__input.is-checked .el-radio__inner { + background-color: var(--edu-color-primary); + border-color: var(--edu-color-primary); +} + +#app .el-checkbox__input.is-checked + .el-checkbox__label, +#app .el-radio__input.is-checked + .el-radio__label { + color: var(--edu-color-primary-hover); +} + +/* 数据表格用浅层表头和克制分隔线,强调扫描效率。 */ +#app .el-table { + color: #344740; + border-radius: var(--edu-radius-md); + border: 1px solid var(--edu-color-border); + overflow: hidden; +} + +#app .el-table::before, +#app .el-table--border::after { + background-color: var(--edu-color-border); +} + +#app .el-table th.el-table__cell { + color: #29443b; + font-weight: 600; + background: #edf4f1; + border-bottom-color: #d7e4df; +} + +#app .el-table td.el-table__cell { + border-bottom-color: #e7eeeb; +} + +#app .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { + background: #f2f8f5; +} + +#app .el-table .current-row > td.el-table__cell { + background: #e8f3ef; +} + +/* 行级操作保持单行,避免按钮被列宽挤压后增加表格行高。 */ +#app .el-table .table-action-column .cell { + white-space: nowrap; +} + +/* 卡片与弹窗采用一致的白色工作面,不使用装饰性大渐变。 */ +#app .el-card { + border: 1px solid var(--edu-color-border); + border-radius: var(--edu-radius-lg); + background: var(--edu-color-surface); + box-shadow: var(--edu-shadow-sm); +} + +#app .el-card__header { + padding: 15px 18px; + color: var(--edu-color-text); + font-weight: 600; + background: #fbfcfc; + border-bottom-color: var(--edu-color-border); +} + +#app .el-dialog { + border-radius: var(--edu-radius-lg); + box-shadow: var(--edu-shadow-dialog); + overflow: hidden; +} + +#app .el-dialog__header { + padding: 18px 22px 16px; + background: #f8faf9; + border-bottom: 1px solid var(--edu-color-border); +} + +#app .el-dialog__title { + color: var(--edu-color-text); + font-size: 17px; + font-weight: 600; +} + +#app .el-dialog__body { + padding: 22px; +} + +#app .el-dialog__footer { + padding: 14px 22px 18px; + background: #fbfcfc; + border-top: 1px solid #edf1ef; +} + +#app .el-pagination.is-background .el-pager li:not(.disabled).active { + background: var(--edu-color-primary); +} + +#app .el-pagination button:hover, +#app .el-pager li:hover { + color: var(--edu-color-primary); +} + +#app .el-tag { + border-radius: 4px; + font-weight: 500; +} + +/* 教学管理列表页保持统一的信息层级,同时允许各业务页面保留原有结构。 */ +#app .management-page { + --management-section-gap: 16px; + --management-section-padding: 18px; +} + +#app .management-page .section-card { + padding: var(--management-section-padding); + margin-bottom: var(--management-section-gap); + border: 1px solid var(--edu-color-border); + border-radius: var(--edu-radius-lg); + background: var(--edu-color-surface); + box-shadow: var(--edu-shadow-sm); +} + +#app .management-page .section-heading { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 24px; + padding-bottom: 16px; + margin-bottom: 18px; + border-bottom: 1px solid #edf1ef; +} + +#app .management-page .section-heading--compact { + padding-bottom: 12px; + margin-bottom: 14px; +} + +#app .management-page .section-title { + margin: 0; + color: var(--edu-color-text); + font-size: 16px; + font-weight: 600; + line-height: 1.4; +} + +#app .management-page .section-description { + margin: 4px 0 0; + color: var(--edu-color-text-secondary); + font-size: 12px; + line-height: 1.5; +} + +#app .management-page .export-bar, +#app .management-page .action-row { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +#app .management-page .export-bar .el-button + .el-button, +#app .management-page .action-row .el-button + .el-button { + margin-left: 0; +} + +#app .management-page .table-heading { + margin-bottom: 0; +} + +/* 选修课操作较多,宽屏时并列展示操作与导出,降低按钮堆叠造成的视觉噪音。 */ +#app .elective-page { + display: grid; + grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr); + gap: var(--management-section-gap); +} + +#app .elective-page .section-card { + margin-bottom: 0; +} + +#app .elective-page .query-card, +#app .elective-page .upload-card, +#app .elective-page .table-card { + grid-column: 1 / -1; +} + +#app .elective-page .action-card { + grid-column: 1; + grid-row: 2; +} + +#app .elective-page .export-card { + grid-column: 2; + grid-row: 2; +} + +#app .management-page .query-card .q-control, +#app .management-page .search-card .q-control { + max-width: 520px; +} + +/* 首页沿用原有模块,不改变信息结构,仅降低大色块与渐变的视觉重量。 */ +#app .home { + background: var(--edu-color-canvas); +} + +#app .home .module-card { + border: 1px solid var(--edu-color-border); + background: var(--edu-color-surface); + box-shadow: var(--edu-shadow-sm); +} + +#app .home .module-card:hover { + border-color: #c9dcd5; + box-shadow: var(--edu-shadow-md); +} + +#app .home .module-card .el-card__header { + color: var(--edu-color-text); + background: #fbfcfc; + border-bottom: 1px solid var(--edu-color-border); +} + +#app .home .card-header { + color: var(--edu-color-text); +} + +#app .home .card-header .card-icon { + color: var(--edu-color-primary); +} + +#app .home .card-header .more-btn { + color: var(--edu-color-primary); +} + +#app .home .contact-item .contact-icon { + background: var(--edu-color-primary-soft); + color: var(--edu-color-primary); + border-radius: var(--edu-radius-md); + box-shadow: none; +} + +/* 下拉浮层渲染在 body 下,因此使用系统级选择器统一其视觉。 */ +.el-select-dropdown, +.el-dropdown-menu, +.el-picker-panel, +.el-popover { + border-color: var(--edu-color-border); + border-radius: var(--edu-radius-md); + box-shadow: var(--edu-shadow-md); +} + +.el-select-dropdown__item.hover, +.el-select-dropdown__item:hover, +.el-dropdown-menu__item:not(.is-disabled):hover, +.el-dropdown-menu__item:not(.is-disabled):focus { + color: var(--edu-color-primary); + background: var(--edu-color-primary-soft); +} + +.el-select-dropdown__item.selected { + color: var(--edu-color-primary); + font-weight: 600; +} + +@media (max-width: 768px) { + #app .app-container { + padding: 14px; + } + + #app .el-button { + min-height: 38px; + } + + #app .el-dialog { + width: calc(100% - 24px); + margin-top: 4vh; + } + + #app .management-page { + --management-section-padding: 14px; + } + + #app .management-page .section-heading, + #app .management-page .upload-row { + align-items: stretch; + flex-direction: column; + } + + #app .management-page .section-heading .el-button, + #app .management-page .upload-right .el-button { + width: 100%; + } +} + +@media (max-width: 1200px) { + #app .elective-page { + display: block; + } + + #app .elective-page .section-card { + margin-bottom: var(--management-section-gap); + } +} + +@media (prefers-reduced-motion: reduce) { + #app *, + #app *::before, + #app *::after { + scroll-behavior: auto; + transition-duration: 0.01ms; + animation-duration: 0.01ms; + animation-iteration-count: 1; + } +} diff --git a/frontend/src/assets/styles/element-variables.scss b/frontend/src/assets/styles/element-variables.scss index 21a8f3e05..e7a9d4ac7 100644 --- a/frontend/src/assets/styles/element-variables.scss +++ b/frontend/src/assets/styles/element-variables.scss @@ -4,13 +4,13 @@ **/ /* theme color */ -$--color-primary: #00875A; -$--color-success: #13ce66; -$--color-warning: #ffba00; -$--color-danger: #ff4949; +$--color-primary: #0b6b55; +$--color-success: #238b68; +$--color-warning: #c58a22; +$--color-danger: #c94b52; // $--color-info: #1E1E1E; -$--button-font-weight: 400; +$--button-font-weight: 500; // $--color-text-regular: #1f2d3d; diff --git a/frontend/src/assets/styles/index.scss b/frontend/src/assets/styles/index.scss index 27d028ab4..b2cce8aa8 100644 --- a/frontend/src/assets/styles/index.scss +++ b/frontend/src/assets/styles/index.scss @@ -4,20 +4,21 @@ @import './element-ui.scss'; @import './sidebar.scss'; @import './btn.scss'; +@import './education-theme.scss'; /* ================= 系统主题色(教育绿) ================= */ :root { /* 基础绿 */ - --edu-green: #007F4F; - --edu-green-hover: #00663E; - --edu-green-bg: #E3F2E9; + --edu-green: #0b6b55; + --edu-green-hover: #085442; + --edu-green-bg: #e8f3ef; /* 主色:导航、按钮、主题色 */ - --edu-green-primary: #00875A; /* rgb(0,135,90) */ + --edu-green-primary: #0b6b55; /* hover 加深 */ - --edu-green-dark: #006B47; /* rgb(0,107,71) */ + --edu-green-dark: #084c3f; /* 浅色背景、标签底色 */ - --edu-green-light: #E6F4EA; /* rgb(230,244,234) */ + --edu-green-light: #e8f3ef; } body { diff --git a/frontend/src/assets/styles/sidebar.scss b/frontend/src/assets/styles/sidebar.scss index 5bbb3c8cd..667fd54f5 100644 --- a/frontend/src/assets/styles/sidebar.scss +++ b/frontend/src/assets/styles/sidebar.scss @@ -5,6 +5,8 @@ transition: width 0.28s; width: $base-sidebar-width !important; background-color: $base-menu-background; + border-right: 1px solid rgba(3, 49, 40, 0.32); + box-shadow: 4px 0 14px rgba(8, 51, 42, 0.08); height: 100%; position: relative; overflow: hidden; @@ -52,14 +54,15 @@ white-space: nowrap !important; height: 44px !important; line-height: 44px !important; - font-weight: 600; + font-weight: 500; + letter-spacing: 0.2px; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { - background-color: rgba(0, 0, 0, 0.06) !important; + background-color: rgba(255, 255, 255, 0.08) !important; } } @@ -111,29 +114,29 @@ content: ''; position: absolute; inset: 0; - background-color: rgba(255, 255, 255, 0.15); - border-right: 3px solid #FFC53D; + background-color: rgba(255, 255, 255, 0.13); + border-left: 3px solid #d7b45a; pointer-events: none; z-index: 1; } } .el-submenu.is-active > .el-submenu__title { - color: #E6F4EA !important; + color: #ffffff !important; font-weight: 600; &::before { - background-color: rgba(255, 255, 255, 0.15); - border-right: 3px solid #FFC53D; + background-color: rgba(255, 255, 255, 0.10); + border-left: 3px solid #d7b45a; } .el-submenu__icon-arrow { - color: #FFC53D !important; + color: #e2c36f !important; } } .el-submenu__title .el-submenu__icon-arrow { - color: rgba(255, 255, 255, 0.9); + color: rgba(255, 255, 255, 0.76); font-size: 12px; font-weight: 700; transition: transform 0.2s; diff --git a/frontend/src/assets/styles/variables.scss b/frontend/src/assets/styles/variables.scss index 962c5514e..0c8cb1db0 100644 --- a/frontend/src/assets/styles/variables.scss +++ b/frontend/src/assets/styles/variables.scss @@ -8,16 +8,16 @@ $tiffany: #4AB7BD; $yellow:#FEC171; $panGreen: #30B08F; -// 默认菜单主题风格(教育绿) -$base-menu-color: #e8f5ef; +// 默认菜单主题风格(学院绿) +$base-menu-color: #dcebe6; $base-menu-color-active: #ffffff; -$base-menu-background: #00875A; +$base-menu-background: #0b5f4a; $base-menu-light-color:rgba(0,0,0,.70); $base-menu-light-background:#ffffff; -$base-sub-menu-background: #006B47; -$base-sub-menu-hover: rgba(255,255,255,.12); +$base-sub-menu-background: #084c3f; +$base-sub-menu-hover: rgba(255,255,255,.10); $base-sidebar-width: 200px; diff --git a/frontend/src/layout/components/Navbar.vue b/frontend/src/layout/components/Navbar.vue index a0c9c0132..2bfd00346 100644 --- a/frontend/src/layout/components/Navbar.vue +++ b/frontend/src/layout/components/Navbar.vue @@ -159,19 +159,19 @@ export default { justify-content: center; width: 38px; height: 38px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.08); - transition: all 0.25s ease; + border-radius: 7px; + background: rgba(255, 255, 255, 0.07); + border: 1px solid rgba(255, 255, 255, 0.10); + transition: background-color 0.18s ease, border-color 0.18s ease; cursor: pointer; &:hover { - background: rgba(255, 255, 255, 0.2); - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + background: rgba(255, 255, 255, 0.15); + border-color: rgba(255, 255, 255, 0.28); } &:active { - transform: translateY(0); + background: rgba(255, 255, 255, 0.21); } .svg-icon { @@ -192,19 +192,19 @@ export default { justify-content: center; width: 38px; height: 38px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.08); - transition: all 0.25s ease; + border-radius: 7px; + background: rgba(255, 255, 255, 0.07); + border: 1px solid rgba(255, 255, 255, 0.10); + transition: background-color 0.18s ease, border-color 0.18s ease; cursor: pointer; &:hover { - background: rgba(255, 255, 255, 0.2); - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + background: rgba(255, 255, 255, 0.15); + border-color: rgba(255, 255, 255, 0.28); } &:active { - transform: translateY(0); + background: rgba(255, 255, 255, 0.21); } .svg-icon { @@ -282,7 +282,7 @@ export default { margin-right: 0; padding: 0 6px 0 10px; height: 100%; - border-radius: 22px; + border-radius: 8px; cursor: pointer; &.is-active .user-caret { @@ -299,10 +299,10 @@ export default { position: relative; width: 36px; height: 36px; - border-radius: 50%; + border-radius: 8px; padding: 2px; - background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.55)); - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); + background: rgba(255, 255, 255, 0.92); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); flex-shrink: 0; } @@ -310,7 +310,7 @@ export default { cursor: pointer; width: 100%; height: 100%; - border-radius: 50%; + border-radius: 6px; object-fit: cover; background: var(--edu-green-light); display: block; diff --git a/frontend/src/layout/components/SemesterBar.vue b/frontend/src/layout/components/SemesterBar.vue index d67e31dd3..c028415cb 100644 --- a/frontend/src/layout/components/SemesterBar.vue +++ b/frontend/src/layout/components/SemesterBar.vue @@ -147,7 +147,7 @@ export default { display: flex; align-items: center; justify-content: center; - gap: 12px; + gap: 10px; height: 36px; font-size: 13px; color: rgba(255, 255, 255, 0.85); @@ -159,10 +159,9 @@ export default { justify-content: center; height: 36px; padding: 0 16px; - border-radius: 18px; - background: rgba(255, 255, 255, 0.12); - border: 1px solid rgba(255, 255, 255, 0.22); - backdrop-filter: blur(2px); + border-radius: 7px; + background: rgba(255, 255, 255, 0.09); + border: 1px solid rgba(255, 255, 255, 0.16); box-sizing: border-box; i { @@ -251,7 +250,7 @@ export default { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; - border-radius: 18px; + border-radius: 7px; height: 36px; padding: 0 12px; display: flex; diff --git a/frontend/src/layout/components/Sidebar/index.vue b/frontend/src/layout/components/Sidebar/index.vue index 2e37a3d81..c6f2598b9 100644 --- a/frontend/src/layout/components/Sidebar/index.vue +++ b/frontend/src/layout/components/Sidebar/index.vue @@ -81,7 +81,15 @@ export default { align-items: center; justify-content: center; cursor: pointer; - color: #bfcbd9; + color: rgba(255, 255, 255, 0.72); + border-top: 1px solid rgba(255, 255, 255, 0.10); + background: rgba(3, 49, 40, 0.18); + transition: background-color 160ms ease, color 160ms ease; + + &:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.10); + } .collapse-hamburger { line-height: 48px; diff --git a/frontend/src/layout/components/TagsView/index.vue b/frontend/src/layout/components/TagsView/index.vue index ffa995329..92a750ba3 100644 --- a/frontend/src/layout/components/TagsView/index.vue +++ b/frontend/src/layout/components/TagsView/index.vue @@ -135,8 +135,8 @@ export default { tagActiveStyle(tag) { if (!this.isActive(tag)) return {} return { - "background-color": "#00875A", - "border-color": "#00875A" + "background-color": "#e8f3ef", + "border-color": "#0b6b55" } }, isAffix(tag) { @@ -363,7 +363,8 @@ $tags-bar-height: 34px; height: $tags-bar-height; width: 100%; background: #fff; - border-bottom: 1px solid #d8dce5; + border-bottom: 1px solid #dce6e2; + box-shadow: 0 1px 2px rgba(19, 45, 37, 0.04); display: flex; align-items: center; overflow: hidden; @@ -413,29 +414,37 @@ $tags-bar-height: 34px; cursor: pointer; height: 26px; line-height: 26px; - border: 1px solid #d8dce5; - color: #495060; + border: 1px solid #dce6e2; + color: #52645f; background: #fff; padding: 0 8px; font-size: 12px; margin-left: 5px; - border-radius: 3px; + border-radius: 5px; + transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; + + &:hover { + color: #0b6b55; + background: #f3f8f6; + border-color: #b6cec5; + } &:first-of-type { margin-left: 6px; } &:last-of-type { margin-right: 15px; } } } &:not(.tags-view-container--chrome) .tags-view-wrapper .tags-view-item.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + background-color: #e8f3ef; + color: #085442; + border-color: #0b6b55; + font-weight: 600; &::before { content: ''; - background: #fff; + background: #c69b3c; display: inline-block; - width: 8px; - height: 8px; - border-radius: 50%; + width: 3px; + height: 12px; + border-radius: 2px; position: relative; margin-right: 2px; } @@ -749,4 +758,4 @@ $tags-bar-height: 34px; min-height: calc(100vh - 34px) !important; overflow: auto; } - \ No newline at end of file + diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue index 66d9ddee3..a2bd3bbca 100644 --- a/frontend/src/layout/index.vue +++ b/frontend/src/layout/index.vue @@ -1,5 +1,13 @@ + + + { + getSemester(semesterId).then(response => { const data = response.data || {} const { xn, xq } = this.parseNd(data.nd) // 解析锁定时长(如 "2周" / "1月" / "1") @@ -406,21 +424,22 @@ export default { }).catch(() => {}) }, /** 编辑校历按钮 */ - handleEditCalendar() { - if (this.ids.length !== 1) return - const nd = this.ids[0] + handleEditCalendar(row) { + const nd = row && row.nd ? row.nd : this.ids[0] + if (!nd) return this.$router.push({ path: '/teachBusiness/semester/semesterCalendar', query: { nd: nd, name: this.getSemesterName(nd) } }) }, /** 删除按钮 */ - handleDelete() { - if (!this.ids.length) return - const names = this.ids.map(nd => this.getSemesterName(nd)).join('、') + handleDelete(row) { + const semesterIds = row && row.nd ? [row.nd] : this.ids + if (!semesterIds.length) return + const names = semesterIds.map(nd => this.getSemesterName(nd)).join('、') this.$modal.confirm('确认删除学期【' + names + '】吗?').then(() => { // 批量删除:逐个调用 - const delList = this.ids.map(nd => delSemester(nd)) + const delList = semesterIds.map(nd => delSemester(nd)) return Promise.all(delList) }).then(() => { this.getList() diff --git a/frontend/src/views/teachNotice/index.vue b/frontend/src/views/teachNotice/index.vue index 62f60adae..5f6bc26e1 100644 --- a/frontend/src/views/teachNotice/index.vue +++ b/frontend/src/views/teachNotice/index.vue @@ -1,17 +1,5 @@