From 7225f7ea60a2205d1a2d999b8696ba0488e640ee Mon Sep 17 00:00:00 2001 From: zhanghao <774378400@qq.com> Date: Thu, 27 Aug 2026 13:51:37 +0800 Subject: [PATCH] feat: update development environment API URLs and add neumorphism styles - Changed VITE_API_URL and VITE_WS_URL in .env.development to new IP addresses. - Imported neumorphism.scss for global theme overrides in main.js. - Modified device registration and terminal views to remove certain columns and adjust layout. - Updated intelligence test views to comment out unused fields and adjust form items. - Adjusted user management view to comment out tree panel component. - Updated test configurations and detect views to comment out group-related fields. - Increased column widths in corpus views for better layout. --- .env.development | 4 +- src/assets/styles/neumorphism.scss | 857 ++++++++++++++++++ src/main.js | 1 + src/views/device/register/index.vue | 14 +- src/views/device/terminal/index.vue | 4 +- .../intelligenceTest/mobilePhone/index.vue | 12 +- src/views/intelligenceTest/testCase/index.vue | 12 +- src/views/system/user/index.vue | 2 +- src/views/test/configs/index.vue | 12 +- src/views/test/detect/index.vue | 8 +- src/views/vi/corpus/awaken/index.vue | 2 +- .../test/MultipleConversations/index.vue | 2 +- .../corpus/test/SingleConversation/index.vue | 8 +- 13 files changed, 898 insertions(+), 40 deletions(-) create mode 100644 src/assets/styles/neumorphism.scss diff --git a/.env.development b/.env.development index 10db161..a5744e5 100644 --- a/.env.development +++ b/.env.development @@ -7,8 +7,8 @@ VITE_APP_ENV = 'development' # 招商车研物联网平台/开发环境 VITE_APP_BASE_API = '/dev-api' -VITE_API_URL = http://192.168.0.222:13080 -VITE_WS_URL = ws://192.168.0.222:13080/ws +VITE_API_URL = http://192.168.0.199:13080 +VITE_WS_URL = ws://192.168.0.199:13080/ws VITE_PORT = 80 VITE_INSPECTION_TYPE = "inspection" VITE_MINIO_URL = "http://192.168.28.10:9000/cmvr-iot/" diff --git a/src/assets/styles/neumorphism.scss b/src/assets/styles/neumorphism.scss new file mode 100644 index 0000000..9990be8 --- /dev/null +++ b/src/assets/styles/neumorphism.scss @@ -0,0 +1,857 @@ +/* + * Global neumorphic theme. + * Keep surfaces on one base color and express hierarchy through paired shadows. + */ +:root { + --neu-bg: #e0e5ec; + --neu-shadow-light: rgba(255, 255, 255, 0.82); + --neu-shadow-dark: rgba(163, 177, 198, 0.58); + --neu-text-primary: #344054; + --neu-text-secondary: #566273; + --neu-text-muted: #7a8797; + --neu-primary: #465a9b; + --neu-primary-strong: #38497f; + --neu-danger: #b84a52; + --neu-success: #397a68; + --neu-warning: #a66a2c; + --neu-radius-sm: 8px; + --neu-radius-md: 12px; + --neu-radius-lg: 16px; + --neu-shadow-raised: 7px 7px 14px var(--neu-shadow-dark), -7px -7px 14px var(--neu-shadow-light); + --neu-shadow-raised-sm: 4px 4px 9px var(--neu-shadow-dark), -4px -4px 9px var(--neu-shadow-light); + --neu-shadow-raised-hover: 9px 9px 18px var(--neu-shadow-dark), -9px -9px 18px var(--neu-shadow-light); + --neu-shadow-inset: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light); + --neu-shadow-pressed: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light); + --neu-focus-ring: 0 0 0 2px rgba(70, 90, 155, 0.32); + + --el-bg-color: var(--neu-bg); + --el-bg-color-page: var(--neu-bg); + --el-bg-color-overlay: var(--neu-bg); + --el-text-color-primary: var(--neu-text-primary); + --el-text-color-regular: var(--neu-text-secondary); + --el-text-color-secondary: var(--neu-text-muted); + --el-text-color-placeholder: #8490a0; + --el-border-color: transparent; + --el-border-color-light: transparent; + --el-border-color-lighter: transparent; + --el-border-color-extra-light: transparent; + --el-border-radius-base: var(--neu-radius-sm); + --el-border-radius-small: var(--neu-radius-sm); + --el-border-radius-round: var(--neu-radius-lg); + --el-fill-color: var(--neu-bg); + --el-fill-color-light: var(--neu-bg); + --el-fill-color-lighter: var(--neu-bg); + --el-fill-color-extra-light: var(--neu-bg); + --el-fill-color-dark: var(--neu-bg); + --el-fill-color-darker: var(--neu-bg); + --el-color-primary: var(--neu-primary) !important; + --el-color-success: var(--neu-success); + --el-color-warning: var(--neu-warning); + --el-color-danger: var(--neu-danger); + --el-box-shadow: var(--neu-shadow-raised); + --el-box-shadow-light: var(--neu-shadow-raised-sm); + --el-box-shadow-lighter: var(--neu-shadow-raised-sm); + --el-box-shadow-dark: var(--neu-shadow-raised-hover); + --el-disabled-bg-color: var(--neu-bg); + --el-disabled-border-color: transparent; + --main-fill-bg: var(--neu-bg); + --navbar-bg: var(--neu-bg); + --navbar-text: var(--neu-text-primary); + --navbar-hover: var(--neu-bg); + --sidebar-bg: var(--neu-bg); + --sidebar-text: var(--neu-text-secondary); + --menu-hover: var(--neu-bg); + --menu-active-text: var(--neu-primary); + --tags-bg: var(--neu-bg); + --tags-item-bg: var(--neu-bg); + --tags-item-border: transparent; + --tags-item-text: var(--neu-text-secondary); + --tags-item-hover: var(--neu-bg); + --tags-close-hover: var(--neu-shadow-dark); + --splitpanes-default-bg: var(--neu-bg); +} + +html.dark { + --neu-bg: #292d34; + --neu-shadow-light: rgba(69, 75, 86, 0.72); + --neu-shadow-dark: rgba(12, 14, 18, 0.72); + --neu-text-primary: #edf0f5; + --neu-text-secondary: #c4cad4; + --neu-text-muted: #9aa3b1; + --neu-primary: #8999d5; + --neu-primary-strong: #9eabe0; + --neu-danger: #df858b; + --neu-success: #71b6a2; + --neu-warning: #d7a164; + --neu-focus-ring: 0 0 0 2px rgba(137, 153, 213, 0.36); + --el-bg-color: var(--neu-bg); + --el-bg-color-page: var(--neu-bg); + --el-bg-color-overlay: var(--neu-bg); + --el-text-color-primary: var(--neu-text-primary); + --el-text-color-regular: var(--neu-text-secondary); + --el-text-color-secondary: var(--neu-text-muted); + --el-text-color-placeholder: #8993a2; + --el-border-color: transparent; + --el-border-color-light: transparent; + --el-border-color-lighter: transparent; + --el-border-color-extra-light: transparent; + --el-fill-color: var(--neu-bg); + --el-fill-color-light: var(--neu-bg); + --el-fill-color-lighter: var(--neu-bg); + --el-fill-color-extra-light: var(--neu-bg); + --el-fill-color-dark: var(--neu-bg); + --el-fill-color-darker: var(--neu-bg); + --el-color-primary: var(--neu-primary) !important; + --main-fill-bg: var(--neu-bg); + --navbar-bg: var(--neu-bg); + --navbar-text: var(--neu-text-primary); + --navbar-hover: var(--neu-bg); + --sidebar-bg: var(--neu-bg); + --sidebar-text: var(--neu-text-secondary); + --menu-hover: var(--neu-bg); + --menu-active-text: var(--neu-primary); + --tags-bg: var(--neu-bg); + --tags-item-bg: var(--neu-bg); + --tags-item-border: transparent; + --tags-item-text: var(--neu-text-secondary); + --tags-item-hover: var(--neu-bg); + color-scheme: dark; +} + +html.dark .el-button--primary, +html.dark .unlock-btn { + color: #1f2530 !important; +} + +html, +body, +#app, +.app-wrapper, +.main-container, +.app-main { + background: var(--neu-bg) !important; + color: var(--neu-text-primary); +} + +body { + min-width: 320px; +} + +::selection { + background: rgba(83, 104, 174, 0.22); + color: var(--neu-text-primary); +} + +:focus-visible { + outline: 2px solid var(--neu-primary); + outline-offset: 3px; +} + +/* Application shell */ +#app .sidebar-container, +#app .sidebar-container .scrollbar-wrapper, +#app .sidebar-container .el-menu, +#app .sidebar-logo-container { + background: var(--neu-bg) !important; +} + +#app .sidebar-container { + border: 0 !important; + box-shadow: 6px 0 14px var(--neu-shadow-dark), -4px 0 10px var(--neu-shadow-light) !important; +} + +#app .sidebar-logo-container { + box-shadow: inset 0 -4px 8px -7px var(--neu-shadow-dark); +} + +#app .sidebar-logo-container .sidebar-title, +#app .sidebar-container .el-menu-item, +#app .sidebar-container .el-sub-menu__title, +#app .sidebar-container .menu-title { + color: var(--neu-text-secondary) !important; +} + +#app .sidebar-container .el-menu-item, +#app .sidebar-container .el-sub-menu__title { + width: calc(100% - 20px); + min-width: 0 !important; + height: 44px; + margin: 5px 10px; + border: 0 !important; + border-radius: var(--neu-radius-md); + background: var(--neu-bg) !important; + transition: color 160ms ease, box-shadow 160ms ease, transform 160ms ease; +} + +#app .sidebar-container .el-menu-item:hover, +#app .sidebar-container .el-sub-menu__title:hover { + color: var(--neu-text-primary) !important; + box-shadow: var(--neu-shadow-raised-sm); +} + +#app .sidebar-container .el-menu-item.is-active, +#app .sidebar-container .is-active > .el-sub-menu__title { + color: var(--neu-primary) !important; + font-weight: 650; + box-shadow: var(--neu-shadow-inset); +} + +#app .hideSidebar .sidebar-container .el-menu-item, +#app .hideSidebar .sidebar-container .el-sub-menu__title { + width: 42px; + margin-inline: 6px; +} + +#app .navbar { + height: 54px; + overflow: visible; + background: var(--neu-bg) !important; + border: 0 !important; + box-shadow: 0 7px 14px -10px var(--neu-shadow-dark), 0 -4px 9px var(--neu-shadow-light) !important; +} + +#app .navbar .hamburger-container, +#app .navbar .right-menu .right-menu-item.hover-effect { + margin: 7px 3px; + height: 40px; + line-height: 40px; + border-radius: var(--neu-radius-sm); +} + +#app .navbar .hamburger-container:hover, +#app .navbar .right-menu .right-menu-item.hover-effect:hover { + background: var(--neu-bg) !important; + box-shadow: var(--neu-shadow-pressed); +} + +#app .navbar .right-menu { + height: 54px; + line-height: 54px; +} + +#app .navbar .right-menu .avatar-container { + margin-right: 20px; +} + +#app .navbar .right-menu .avatar-container .avatar-wrapper { + margin-top: 7px; +} + +#app .navbar .right-menu .avatar-container .user-avatar { + width: 38px; + height: 38px; + border: 0; + border-radius: var(--neu-radius-sm); + box-shadow: var(--neu-shadow-raised-sm); +} + +#app .tags-view-container { + height: 38px; + background: var(--neu-bg) !important; + border: 0 !important; + box-shadow: inset 0 -4px 8px -8px var(--neu-shadow-dark) !important; +} + +#app .tags-view-container .tags-view-wrapper .tags-view-item { + height: 28px; + line-height: 28px; + margin-top: 5px; + border: 0 !important; + border-radius: var(--neu-radius-sm); + background: var(--neu-bg) !important; + color: var(--neu-text-secondary) !important; + box-shadow: var(--neu-shadow-raised-sm); +} + +#app .tags-view-container .tags-view-wrapper .tags-view-item.active { + background: var(--neu-bg) !important; + color: var(--neu-primary) !important; + box-shadow: var(--neu-shadow-pressed); +} + +#app .tags-view-container .tags-view-wrapper .tags-view-item.active::before { + background: var(--neu-primary); +} + +#app .app-main { + padding: 22px; +} + +#app .app-container { + background: var(--neu-bg) !important; + border: 0 !important; + border-radius: var(--neu-radius-lg); +} + +/* Raised controls */ +.el-button { + min-height: 32px; + border: 0 !important; + border-radius: var(--neu-radius-md) !important; + background: var(--neu-bg) !important; + color: var(--neu-text-primary) !important; + box-shadow: var(--neu-shadow-raised-sm) !important; + transition: color 150ms ease, box-shadow 150ms ease, transform 150ms ease !important; +} + +.el-button:hover, +.el-button:focus-visible { + color: var(--neu-primary) !important; + transform: translateY(-1px); + box-shadow: var(--neu-shadow-raised) !important; +} + +.el-button:active, +.el-button.is-active { + transform: scale(0.98); + box-shadow: var(--neu-shadow-pressed) !important; +} + +.el-button--primary { + background: var(--neu-primary) !important; + color: #fff !important; +} + +.el-button--primary:hover, +.el-button--primary:focus-visible { + background: var(--neu-primary-strong) !important; + color: #fff !important; +} + +.el-button--danger, +.el-button--warning, +.el-button--success, +.el-button--info { + background: var(--neu-bg) !important; +} + +.el-button--danger { color: var(--neu-danger) !important; } +.el-button--warning { color: var(--neu-warning) !important; } +.el-button--success { color: var(--neu-success) !important; } +.el-button--info { color: var(--neu-text-secondary) !important; } + +.el-button.is-link, +.el-button.is-text, +.el-table .el-button { + min-height: auto; + padding-inline: 5px; + background: transparent !important; + box-shadow: none !important; + transform: none; +} + +.el-button.is-disabled, +.el-button.is-disabled:hover { + color: var(--neu-text-muted) !important; + opacity: 0.58; + box-shadow: none !important; + transform: none; +} + +/* Recessed form controls */ +.el-input__wrapper, +.el-select__wrapper, +.el-textarea__inner, +.el-date-editor.el-input__wrapper, +.el-date-editor.el-range-editor, +.el-input-number, +.el-cascader .el-input__wrapper, +.el-transfer-panel__filter .el-input__wrapper { + border: 0 !important; + border-radius: var(--neu-radius-md) !important; + background: var(--neu-bg) !important; + box-shadow: var(--neu-shadow-inset) !important; + transition: box-shadow 180ms ease !important; +} + +.el-input__wrapper:hover, +.el-select__wrapper:hover, +.el-textarea__inner:hover { + box-shadow: inset 5px 5px 10px var(--neu-shadow-dark), inset -5px -5px 10px var(--neu-shadow-light) !important; +} + +.el-input__wrapper.is-focus, +.el-select__wrapper.is-focused, +.el-textarea__inner:focus, +.el-date-editor.el-input__wrapper.is-focus, +.el-date-editor.el-range-editor.is-active { + box-shadow: var(--neu-shadow-inset), var(--neu-focus-ring) !important; +} + +.el-input__inner, +.el-textarea__inner, +.el-select__placeholder, +.el-range-input { + color: var(--neu-text-primary) !important; +} + +.el-input-group__append, +.el-input-group__prepend { + border: 0 !important; + background: var(--neu-bg) !important; + color: var(--neu-text-secondary); + box-shadow: var(--neu-shadow-inset); +} + +.el-checkbox__inner, +.el-radio__inner { + border: 0 !important; + background: var(--neu-bg) !important; + box-shadow: var(--neu-shadow-inset); +} + +.el-checkbox__input.is-checked .el-checkbox__inner, +.el-checkbox__input.is-indeterminate .el-checkbox__inner, +.el-radio__input.is-checked .el-radio__inner { + background: var(--neu-primary) !important; + box-shadow: var(--neu-shadow-pressed); +} + +.el-checkbox__input.is-checked + .el-checkbox__label, +.el-radio__input.is-checked + .el-radio__label { + color: var(--neu-primary) !important; +} + +.el-switch__core, +.el-slider__runway { + border: 0 !important; + background: var(--neu-bg) !important; + box-shadow: var(--neu-shadow-inset); +} + +.el-switch.is-checked .el-switch__core { + background: var(--neu-primary) !important; +} + +.el-switch__action, +.el-slider__button { + border: 0 !important; + background: var(--neu-bg) !important; + box-shadow: var(--neu-shadow-raised-sm); +} + +.el-slider__bar { + background: var(--neu-primary); +} + +/* Cards and framed tools */ +.el-card, +.dashboard-panel, +.metric-card { + border: 0 !important; + border-radius: var(--neu-radius-lg) !important; + background: var(--neu-bg) !important; + box-shadow: var(--neu-shadow-raised) !important; + transition: box-shadow 220ms ease, transform 220ms ease !important; +} + +.el-card:hover, +.metric-card:hover { + border: 0 !important; + transform: translateY(-2px); + box-shadow: var(--neu-shadow-raised-hover) !important; +} + +.el-card__header { + border: 0 !important; + color: var(--neu-text-primary); +} + +.el-descriptions, +.el-descriptions__body, +.el-descriptions__table, +.el-descriptions__cell, +.el-collapse, +.el-collapse-item__header, +.el-collapse-item__wrap, +.el-tree, +.tree-border, +.splitpanes, +.splitpanes__pane { + border: 0 !important; + background: var(--neu-bg) !important; +} + +.tree-border, +.el-transfer-panel, +.el-upload-dragger { + border: 0 !important; + border-radius: var(--neu-radius-md) !important; + background: var(--neu-bg) !important; + box-shadow: var(--neu-shadow-inset) !important; +} + +.el-tree-node__content { + margin-block: 2px; + border-radius: var(--neu-radius-sm); +} + +.el-tree-node__content:hover, +.el-tree-node.is-current > .el-tree-node__content { + background: var(--neu-bg) !important; + color: var(--neu-primary); + box-shadow: var(--neu-shadow-pressed); +} + +/* Tables stay comparatively flat for scanability. */ +.el-table, +.el-table__inner-wrapper, +.el-table tr, +.el-table th.el-table__cell, +.el-table td.el-table__cell, +.el-table__expanded-cell { + border: 0 !important; + background: var(--neu-bg) !important; +} + +.el-table { + --el-table-bg-color: var(--neu-bg); + --el-table-tr-bg-color: var(--neu-bg); + --el-table-header-bg-color: var(--neu-bg); + --el-table-row-hover-bg-color: var(--neu-bg); + --el-table-border-color: transparent; + color: var(--neu-text-secondary); +} + +.el-table::before, +.el-table__inner-wrapper::before { + display: none; +} + +.el-table .el-table__header-wrapper th, +.el-table .el-table__fixed-header-wrapper th { + background: var(--neu-bg) !important; + color: var(--neu-text-primary) !important; + box-shadow: inset 0 -4px 8px -7px var(--neu-shadow-dark); +} + +.el-table__body tr:hover > td.el-table__cell, +.el-table__body tr.hover-row > td.el-table__cell { + background: var(--neu-bg) !important; + box-shadow: inset 0 3px 7px -6px var(--neu-shadow-dark), inset 0 -3px 7px -6px var(--neu-shadow-light); +} + +/* Overlays */ +.el-popper, +.el-popper.is-light, +.el-dropdown__popper, +.el-select__popper, +.el-picker__popper, +.el-popover, +.el-tooltip__trigger, +.el-message-box, +.el-dialog, +.el-drawer, +.contextmenu { + border: 0 !important; + border-radius: var(--neu-radius-lg) !important; + background: var(--neu-bg) !important; + color: var(--neu-text-primary); + box-shadow: var(--neu-shadow-raised-hover) !important; +} + +.el-popper__arrow::before { + border: 0 !important; + background: var(--neu-bg) !important; +} + +.el-dialog__header, +.el-dialog__footer, +.el-drawer__header, +.el-drawer__footer { + border: 0 !important; + background: var(--neu-bg) !important; +} + +.el-dialog__title, +.el-drawer__title { + color: var(--neu-text-primary) !important; +} + +.el-select-dropdown__item, +.el-dropdown-menu__item, +.el-cascader-node, +.el-picker-panel, +.el-date-table td .el-date-table-cell, +.el-dropdown-menu { + border: 0 !important; + background: var(--neu-bg) !important; +} + +.el-select-dropdown__item:hover, +.el-select-dropdown__item.is-hovering, +.el-dropdown-menu__item:not(.is-disabled):hover, +.el-dropdown-menu__item:not(.is-disabled):focus, +.el-cascader-node:not(.is-disabled):hover, +.el-cascader-node.in-active-path { + background: var(--neu-bg) !important; + color: var(--neu-primary) !important; + box-shadow: var(--neu-shadow-pressed); +} + +.el-overlay { + background: rgba(52, 64, 84, 0.22) !important; + backdrop-filter: blur(3px); +} + +/* Navigation and compact state controls */ +.el-tabs__nav-wrap::after, +.el-tabs__active-bar { + display: none; +} + +.el-tabs__item { + height: 36px; + margin: 3px; + border: 0 !important; + border-radius: var(--neu-radius-sm); + color: var(--neu-text-secondary); +} + +.el-tabs__item:hover { + color: var(--neu-primary); + box-shadow: var(--neu-shadow-raised-sm); +} + +.el-tabs__item.is-active { + color: var(--neu-primary); + box-shadow: var(--neu-shadow-pressed); +} + +.el-tabs--border-card, +.el-tabs--card > .el-tabs__header .el-tabs__nav, +.el-tabs--card > .el-tabs__header .el-tabs__item, +.el-tabs--border-card > .el-tabs__header, +.el-tabs--border-card > .el-tabs__content { + border: 0 !important; + background: var(--neu-bg) !important; +} + +.el-pagination button, +.el-pagination .el-pager li { + border: 0 !important; + border-radius: var(--neu-radius-sm) !important; + background: var(--neu-bg) !important; + color: var(--neu-text-secondary) !important; + box-shadow: var(--neu-shadow-raised-sm); +} + +.el-pagination .el-pager li.is-active { + color: var(--neu-primary) !important; + box-shadow: var(--neu-shadow-pressed); +} + +.el-tag { + border: 0 !important; + border-radius: var(--neu-radius-sm) !important; + background: var(--neu-bg) !important; + color: var(--neu-text-secondary) !important; + box-shadow: var(--neu-shadow-raised-sm); +} + +.el-tag--success { color: var(--neu-success) !important; } +.el-tag--warning { color: var(--neu-warning) !important; } +.el-tag--danger { color: var(--neu-danger) !important; } +.el-tag--primary { color: var(--neu-primary) !important; } + +.el-alert, +.el-message, +.el-notification { + border: 0 !important; + border-radius: var(--neu-radius-md) !important; + background: var(--neu-bg) !important; + color: var(--neu-text-primary) !important; + box-shadow: var(--neu-shadow-raised) !important; +} + +/* Dashboard */ +.home-dashboard { + padding: 6px 6px 28px !important; +} + +.home-dashboard .hero-panel { + min-height: 224px; + border: 0 !important; + border-radius: var(--neu-radius-lg) !important; + background: var(--neu-bg) !important; + background-image: none !important; + color: var(--neu-text-primary) !important; + box-shadow: var(--neu-shadow-raised) !important; +} + +.home-dashboard .hero-panel::before { + display: none; +} + +.home-dashboard .platform-state, +.home-dashboard .hero-description, +.home-dashboard .hero-time > span, +.home-dashboard .time-label { + color: var(--neu-text-secondary) !important; +} + +.home-dashboard .hero-time { + border: 0 !important; + box-shadow: inset 4px 0 7px -7px var(--neu-shadow-dark); +} + +.home-dashboard .cockpit-button { + border: 0 !important; + background: var(--neu-bg) !important; + color: var(--neu-primary) !important; +} + +.home-dashboard .metric-icon, +.home-dashboard .feature-icon, +.home-dashboard .empty-icon { + background: var(--neu-bg) !important; + box-shadow: var(--neu-shadow-inset); +} + +.home-dashboard .feature-item, +.home-dashboard .task-row, +.home-dashboard .recent-item { + border: 0 !important; + border-radius: var(--neu-radius-sm); + background: var(--neu-bg) !important; +} + +.home-dashboard .feature-item:hover, +.home-dashboard .task-row:hover, +.home-dashboard .recent-item:hover { + background: var(--neu-bg) !important; + box-shadow: var(--neu-shadow-pressed); +} + +/* Authentication and lock screens */ +.login, +.register, +.lock-container { + background: var(--neu-bg) !important; + background-image: none !important; + color: var(--neu-text-primary) !important; +} + +.login::before { + display: none !important; +} + +.login-form, +.register-form, +.lock-card { + border: 0 !important; + border-radius: var(--neu-radius-lg) !important; + background: var(--neu-bg) !important; + box-shadow: var(--neu-shadow-raised-hover) !important; +} + +.login-form, +.register-form { + width: min(400px, calc(100vw - 40px)) !important; + padding: 34px 32px 14px !important; +} + +.login .title, +.register .title, +.lock-time, +.lock-username { + color: var(--neu-text-primary) !important; + text-shadow: none !important; +} + +.el-login-footer, +.el-register-footer, +.lock-date, +.lock-hint, +.lock-footer a { + color: var(--neu-text-secondary) !important; +} + +.login-code-img, +.register-code-img, +.lock-avatar { + border: 0 !important; + border-radius: var(--neu-radius-sm); + box-shadow: var(--neu-shadow-raised-sm); +} + +.input-wrap { + border: 0 !important; + border-radius: var(--neu-radius-lg) !important; + background: var(--neu-bg) !important; + box-shadow: var(--neu-shadow-inset) !important; +} + +.input-wrap:focus-within { + background: var(--neu-bg) !important; + box-shadow: var(--neu-shadow-inset), var(--neu-focus-ring) !important; +} + +.lock-input { + color: var(--neu-text-primary) !important; +} + +.lock-input::placeholder { + color: var(--neu-text-muted) !important; +} + +.unlock-btn { + border: 0 !important; + background: var(--neu-primary) !important; + color: #fff !important; + box-shadow: var(--neu-shadow-raised-sm); +} + +.unlock-btn:active:not(:disabled) { + transform: scale(0.96) !important; + box-shadow: var(--neu-shadow-pressed); +} + +.particle-bg { + opacity: 0.12; +} + +/* Scrollbars use the same surface and shadow palette. */ +* { + scrollbar-color: var(--neu-shadow-dark) var(--neu-bg); +} + +::-webkit-scrollbar-track { + background: var(--neu-bg) !important; +} + +::-webkit-scrollbar-thumb { + border: 2px solid var(--neu-bg); + border-radius: var(--neu-radius-sm) !important; + background: var(--neu-shadow-dark) !important; +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + scroll-behavior: auto !important; + transition-duration: 0.01ms !important; + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + } +} + +@media (max-width: 768px) { + #app .app-main { + padding: 14px; + } + + #app .navbar .right-menu .avatar-container { + margin-right: 8px; + } + + .home-dashboard .hero-time { + box-shadow: inset 0 4px 7px -7px var(--neu-shadow-dark); + } + + .el-dialog { + width: calc(100vw - 28px) !important; + max-width: calc(100vw - 28px); + } +} diff --git a/src/main.js b/src/main.js index f281aea..439ea7b 100644 --- a/src/main.js +++ b/src/main.js @@ -8,6 +8,7 @@ import 'element-plus/theme-chalk/dark/css-vars.css' import locale from 'element-plus/es/locale/lang/zh-cn' import '@/assets/styles/index.scss' // global css +import '@/assets/styles/neumorphism.scss' // neumorphic theme overrides import App from './App' import store from './store' diff --git a/src/views/device/register/index.vue b/src/views/device/register/index.vue index f5a68a1..b3913fb 100644 --- a/src/views/device/register/index.vue +++ b/src/views/device/register/index.vue @@ -39,28 +39,28 @@ - + - + - + - + + +