opensource/plus-ui
2
0
Fork 0
mirror of https://gitee.com/JavaLionLi/plus-ui.git synced 2026-09-14 16:17:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update 优化 调整页面画风 不要过于生硬圆滑

Browse Source
This commit is contained in:
疯狂的狮子Li 2026-04-14 10:11:43 +08:00
parent 38a15e6cd3
commit f599aba890
9 changed files with 60 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/styles/element-ui.scss
View File

@ -192,7 +192,7 @@
// Buttons // Buttons
.el-button { .el-button {
border-radius: var(--app-radius-md); border-radius: var(--el-border-radius-base);
transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
} }

34
src/assets/styles/index.scss
View File

@ -115,7 +115,7 @@ div:focus {
} }
aside { aside {
background: #eef1f6; background: var(--el-fill-color-light);
padding: 8px 24px; padding: 8px 24px;
margin-bottom: 20px; margin-bottom: 20px;
border-radius: var(--app-radius-md); border-radius: var(--app-radius-md);
@ -131,43 +131,43 @@ aside {
'Hiragino Sans GB', 'Hiragino Sans GB',
'Microsoft YaHei', 'Microsoft YaHei',
sans-serif; sans-serif;
color: #2c3e50; color: var(--el-text-color-primary);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
a { a {
color: #337ab7; color: var(--el-color-primary);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: rgb(32, 160, 255); color: var(--el-color-primary-light-3);
} }
} }
} }
//main-container全局样式 //main-container全局样式
.app-container { .app-container {
padding: 20px; padding: 16px;
background: var(--app-surface-bg); background: transparent;
border: 1px solid var(--app-surface-border); border: none;
border-radius: var(--app-radius-base); border-radius: 0;
box-shadow: var(--app-shadow-sm); box-shadow: none;
} }
// search面板样式 // search面板样式
.panel, .panel,
.search { .search {
margin-bottom: 0.75rem; margin-bottom: 12px;
border-radius: var(--app-radius-base); border-radius: var(--app-radius-base);
border: 1px solid var(--el-border-color-light); border: 1px solid var(--el-border-color-lighter);
padding: 0.75rem; padding: 16px;
box-shadow: 0 0 0 rgba(0, 0, 0, 0); background: var(--app-surface-bg);
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; box-shadow: var(--app-shadow-sm);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
&:hover { &:hover {
box-shadow: var(--app-shadow-sm); box-shadow: var(--app-shadow-md);
border-color: var(--el-border-color); border-color: var(--el-border-color-light);
transform: translateY(-1px);
} }
} }

9
src/assets/styles/ruoyi.scss
View File

@ -77,7 +77,7 @@ h6 {
font-weight: 600; font-weight: 600;
} }
.el-dialog:not(.is-fullscreen) { .el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important; margin-top: 0 !important;
} }
.el-dialog.scrollbar .el-dialog__body { .el-dialog.scrollbar .el-dialog__body {
@ -125,8 +125,8 @@ h6 {
/* tree border */ /* tree border */
.tree-border { .tree-border {
margin-top: 5px; margin-top: 5px;
border: 1px solid #e5e6e7; border: 1px solid var(--el-border-color-light);
background: #ffffff none; background: var(--el-bg-color);
border-radius: var(--app-radius-md); border-radius: var(--app-radius-md);
width: 100%; width: 100%;
} }
@ -203,12 +203,11 @@ h6 {
box-shadow: var(--app-shadow-sm); box-shadow: var(--app-shadow-sm);
border-color: var(--el-border-color-lighter); border-color: var(--el-border-color-lighter);
overflow: hidden; overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.2s ease; transition: box-shadow 0.2s ease;
} }
.el-card:hover { .el-card:hover {
box-shadow: var(--app-shadow-md); box-shadow: var(--app-shadow-md);
transform: translateY(-1px);
} }
.card-box { .card-box {

9
src/assets/styles/variables.module.scss
View File

@ -27,9 +27,10 @@
--tags-view-active-border-color: var(--el-color-primary); --tags-view-active-border-color: var(--el-color-primary);
// Modern rounded style + soft shadows // Modern rounded style + soft shadows
--app-radius-base: 14px; --app-radius-base: 8px;
--app-radius-sm: calc(var(--app-radius-base) - 8px); --app-radius-sm: calc(var(--app-radius-base) * 0.6);
--app-radius-md: calc(var(--app-radius-base) - 4px); --app-radius-md: var(--app-radius-base);
--app-radius-lg: calc(var(--app-radius-base) * 1.4);
--app-radius-lg: var(--app-radius-base); --app-radius-lg: var(--app-radius-base);
--app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 16px rgba(15, 23, 42, 0.08); --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 16px rgba(15, 23, 42, 0.08);
--app-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12); --app-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
@ -53,7 +54,7 @@ html.dark {
--menuHover: #171819; --menuHover: #171819;
--subMenuBg: #1d1e1f; --subMenuBg: #1d1e1f;
--subMenuActiveText: #1d1e1f; --subMenuActiveText: #f4f4f5;
--subMenuHover: #171819; --subMenuHover: #171819;
--subMenuTitleHover: #171819; --subMenuTitleHover: #171819;

28
src/layout/components/Navbar.vue
View File

@ -38,7 +38,7 @@
<el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false"> <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
<template #reference> <template #reference>
<el-badge :value="newNotice > 0 ? newNotice : ''" :max="99"> <el-badge :value="newNotice > 0 ? newNotice : ''" :max="99">
<div class="right-menu-item hover-effect" style="display: block"><svg-icon icon-class="message" /></div> <div class="right-menu-item hover-effect"><svg-icon icon-class="message" /></div>
</el-badge> </el-badge>
</template> </template>
<template #default> <template #default>
@ -289,9 +289,7 @@ watch(
} }
.right-menu { .right-menu {
//float: right;
height: 100%; height: 100%;
line-height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: auto; margin-left: auto;
@ -300,20 +298,29 @@ watch(
outline: none; outline: none;
} }
// 消息等有包裹层的图标，确保中间层不破坏对齐
& > * {
display: flex;
align-items: center;
}
.right-menu-item { .right-menu-item {
display: inline-block; display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 8px; padding: 0 8px;
height: 100%; height: 32px;
font-size: 18px; font-size: 18px;
color: var(--el-text-color-regular); color: var(--el-text-color-regular);
vertical-align: text-bottom; border-radius: var(--app-radius-md);
&.hover-effect { &.hover-effect {
cursor: pointer; cursor: pointer;
transition: background 0.3s; transition: background 0.2s ease, color 0.2s ease;
&:hover { &:hover {
background: var(--el-fill-color-lighter); background: var(--el-fill-color-light);
color: var(--el-color-primary);
} }
} }
} }
@ -322,7 +329,7 @@ watch(
margin-right: 40px; margin-right: 40px;
.avatar-wrapper { .avatar-wrapper {
margin-top: 5px; margin-top: 0;
position: relative; position: relative;
.user-avatar { .user-avatar {
@ -330,7 +337,8 @@ watch(
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: var(--app-radius-md); border-radius: var(--app-radius-md);
margin-top: 10px; margin-top: 0;
display: block;
} }
i { i {

8
src/layout/components/Settings/index.vue
View File

@ -199,7 +199,13 @@ const themeChange = (val: string) => {
}; };
const radiusBaseChange = (val: number) => { const radiusBaseChange = (val: number) => {
settingsStore.radiusBase = val; settingsStore.radiusBase = val;
document.documentElement.style.setProperty('--app-radius-base', `${val}px`); const el = document.documentElement;
el.style.setProperty('--app-radius-base', `${val}px`);
el.style.setProperty('--app-radius-sm', `${Math.round(val * 0.6)}px`);
el.style.setProperty('--app-radius-md', `${val}px`);
el.style.setProperty('--app-radius-lg', `${Math.round(val * 1.4)}px`);
el.style.setProperty('--el-border-radius-base', `${val}px`);
el.style.setProperty('--el-border-radius-small', `${Math.round(val * 0.6)}px`);
}; };
const handleTheme = (val: string) => { const handleTheme = (val: string) => {
sideTheme.value = val; sideTheme.value = val;

12
src/layout/components/TagsView/index.vue
View File

@ -243,9 +243,9 @@ onMounted(() => {
height: 34px; height: 34px;
width: 100%; width: 100%;
background-color: var(--el-bg-color); background-color: var(--el-bg-color);
border: 1px solid var(--el-border-color-light); border-top: none;
border-radius: var(--app-radius-md); border-bottom: 1px solid var(--el-border-color-lighter);
box-shadow: var(--app-shadow-sm); box-shadow: none;
.tags-view-wrapper { .tags-view-wrapper {
.tags-view-item { .tags-view-item {
display: inline-block; display: inline-block;
@ -275,12 +275,12 @@ onMounted(() => {
margin-right: 15px; margin-right: 15px;
} }
&.active { &.active {
background-color: #42b983; background-color: var(--tags-view-active-bg);
color: #fff; color: #fff;
border-color: #42b983; border-color: var(--tags-view-active-border-color);
&::before { &::before {
content: ''; content: '';
background: #fff; background: rgba(255, 255, 255, 0.7);
display: inline-block; display: inline-block;
width: 8px; width: 8px;
height: 8px; height: 8px;

1
src/layout/index.vue
View File

@ -127,6 +127,7 @@ const setLayout = () => {
width: calc(100% - #{$base-sidebar-width}); width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s; transition: width 0.28s;
background: $fixed-header-bg; background: $fixed-header-bg;
box-shadow: 0 2px 8px rgba(0, 21, 41, 0.10);
} }
.hideSidebar .fixed-header { .hideSidebar .fixed-header {

2
src/settings.ts
View File

@ -76,6 +76,6 @@ const setting: DefaultSettings = {
/** /**
* 页面圆角大小 * 页面圆角大小
*/ */
radiusBase: 10 radiusBase: 8
}; };
export default setting; export default setting;