liuhuayong/edu_manage_ui
1
0
Fork 0
Code Issues Pull Requests 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
.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;
}

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

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

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

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

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

@ -27,9 +27,10 @@
--tags-view-active-border-color: var(--el-color-primary);
// Modern rounded style + soft shadows
--app-radius-base: 14px;
--app-radius-sm: calc(var(--app-radius-base) - 8px);
--app-radius-md: calc(var(--app-radius-base) - 4px);
--app-radius-base: 8px;
--app-radius-sm: calc(var(--app-radius-base) * 0.6);
--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-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);
@ -53,7 +54,7 @@ html.dark {
--menuHover: #171819;
--subMenuBg: #1d1e1f;
--subMenuActiveText: #1d1e1f;
--subMenuActiveText: #f4f4f5;
--subMenuHover: #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">
<template #reference>
<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>
</template>
<template #default>
@ -289,9 +289,7 @@ watch(
}
.right-menu {
//float: right;
height: 100%;
line-height: 50px;
display: flex;
align-items: center;
margin-left: auto;
@ -300,20 +298,29 @@ watch(
outline: none;
}
// 消息等有包裹层的图标，确保中间层不破坏对齐
& > * {
display: flex;
align-items: center;
}
.right-menu-item {
display: inline-block;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 8px;
height: 100%;
height: 32px;
font-size: 18px;
color: var(--el-text-color-regular);
vertical-align: text-bottom;
border-radius: var(--app-radius-md);
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
transition: background 0.2s ease, color 0.2s ease;
&: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;
.avatar-wrapper {
margin-top: 5px;
margin-top: 0;
position: relative;
.user-avatar {
@ -330,7 +337,8 @@ watch(
width: 40px;
height: 40px;
border-radius: var(--app-radius-md);
margin-top: 10px;
margin-top: 0;
display: block;
}
i {

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

@ -199,7 +199,13 @@ const themeChange = (val: string) => {
};
const radiusBaseChange = (val: number) => {
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) => {
sideTheme.value = val;

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

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

1
src/layout/index.vue
View File

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

2
src/settings.ts
View File

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