yuhaiming/dm-ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

update 优化整体页面样式 更圆滑

Browse Source
This commit is contained in:
疯狂的狮子Li
2026-03-11 11:59:47 +08:00
parent 656366d610
commit 2db01677e3
11 changed files with 487 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/views/login.vue
View File

@@ -240,29 +240,38 @@ onMounted(() => {
height: 100%;
background-image: url('../assets/images/login-background.jpg');
background-size: cover;
background-position: center;
}
.title-box {
display: flex;
align-items: center;
gap: 8px;
.title {
margin: 0px auto 30px auto;
margin: 0px auto 26px auto;
text-align: center;
color: #707070;
color: var(--el-text-color-primary);
font-weight: 600;
letter-spacing: 0.5px;
}
:deep(.lang-select--style) {
line-height: 0;
color: #7483a3;
color: var(--el-text-color-secondary);
}
}
.login-form {
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
border-radius: var(--app-radius-lg);
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(255, 255, 255, 0.5);
width: min(420px, 90vw);
padding: 32px 30px 12px 30px;
z-index: 1;
box-shadow: var(--app-shadow-lg);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
.el-input {
height: 40px;
input {
@@ -283,14 +292,48 @@ onMounted(() => {
color: #bfbfbf;
}
.login-form :deep(.el-input__wrapper) {
background-color: rgba(255, 255, 255, 0.9);
}
.login-form :deep(.el-input__wrapper.is-focus) {
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.login-form :deep(.el-button--primary) {
border-radius: var(--app-radius-md);
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
}
.login-form :deep(.el-button.is-circle) {
background: rgba(15, 23, 42, 0.04);
border: 1px solid rgba(15, 23, 42, 0.08);
color: var(--el-text-color-regular);
}
.login-form :deep(.el-button.is-circle:hover) {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.2);
}
.login-code {
width: 33%;
width: calc(37% - 10px);
height: 40px;
float: right;
margin-left: 10px;
box-sizing: border-box;
border-radius: var(--app-radius-sm);
overflow: hidden;
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--el-border-color-light);
img {
cursor: pointer;
vertical-align: middle;
display: block;
width: 100%;
height: 40px;
object-fit: cover;
}
}
@@ -301,7 +344,7 @@ onMounted(() => {
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
color: rgba(255, 255, 255, 0.75);
font-family: Arial, serif;
font-size: 12px;
letter-spacing: 1px;
@@ -309,6 +352,27 @@ onMounted(() => {
.login-code-img {
height: 40px;
padding-left: 12px;
padding-left: 0;
}
:global(html.dark) {
.login-form {
background: rgba(17, 24, 39, 0.9);
border-color: rgba(148, 163, 184, 0.2);
}
.login-form :deep(.el-input__wrapper) {
background-color: rgba(17, 24, 39, 0.7);
}
.login-form :deep(.el-button.is-circle) {
background: rgba(148, 163, 184, 0.12);
border-color: rgba(148, 163, 184, 0.25);
color: #e5e7eb;
}
.el-login-footer {
color: rgba(226, 232, 240, 0.65);
}
}
</style>

64
src/views/workflow/task/allTaskWaiting.vue
View File

@@ -27,8 +27,12 @@
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5" v-if="tab === 'waiting'">
<el-button type="primary" plain icon="Edit" :disabled="multiple" @click="handleUserOpen()">修改办理人 </el-button>
<el-button type="primary" plain icon="Bell" :disabled="multiple" @click="handleUrgeTaskOpen()">催办 </el-button>
<el-button class="todo-action-btn todo-action-btn--primary" type="primary" plain icon="Edit" :disabled="multiple" @click="handleUserOpen()"
>修改办理人
</el-button>
<el-button class="todo-action-btn todo-action-btn--warning" type="warning" plain icon="Bell" :disabled="multiple" @click="handleUrgeTaskOpen()"
>催办
</el-button>
</el-col>
<right-toolbar v-model:show-search="showSearch" @query-table="handleQuery"></right-toolbar>
</el-row>
@@ -277,3 +281,59 @@ onMounted(() => {
getWaitingList();
});
</script>
<style lang="scss" scoped>
.todo-action-btn {
height: 32px;
padding: 0 14px;
border-radius: var(--app-radius-md);
font-weight: 600;
--el-button-bg-color: var(--el-fill-color-lighter);
--el-button-border-color: var(--el-border-color-light);
--el-button-text-color: var(--el-text-color-regular);
--el-button-hover-bg-color: var(--el-fill-color-light);
--el-button-hover-border-color: var(--el-border-color);
}
.todo-action-btn--primary {
--el-button-text-color: var(--el-color-primary);
--el-button-border-color: var(--el-color-primary-light-5);
--el-button-bg-color: var(--el-color-primary-light-9);
--el-button-hover-bg-color: var(--el-color-primary-light-8);
--el-button-hover-border-color: var(--el-color-primary-light-5);
}
.todo-action-btn--warning {
--el-button-text-color: var(--el-color-warning);
--el-button-border-color: var(--el-color-warning-light-5);
--el-button-bg-color: var(--el-color-warning-light-9);
--el-button-hover-bg-color: var(--el-color-warning-light-8);
--el-button-hover-border-color: var(--el-color-warning-light-5);
}
:global(html.dark) {
.todo-action-btn {
--el-button-bg-color: rgba(148, 163, 184, 0.12);
--el-button-border-color: rgba(148, 163, 184, 0.3);
--el-button-text-color: var(--el-text-color-regular);
--el-button-hover-bg-color: rgba(148, 163, 184, 0.2);
--el-button-hover-border-color: rgba(148, 163, 184, 0.45);
}
.todo-action-btn--primary {
--el-button-bg-color: rgba(99, 113, 150, 0.14);
--el-button-border-color: rgba(99, 113, 150, 0.45);
--el-button-text-color: #c4cfdd;
--el-button-hover-bg-color: rgba(99, 113, 150, 0.22);
--el-button-hover-border-color: rgba(99, 113, 150, 0.65);
}
.todo-action-btn--warning {
--el-button-bg-color: rgba(214, 149, 59, 0.16);
--el-button-border-color: rgba(214, 149, 59, 0.55);
--el-button-text-color: #ffe6bb;
--el-button-hover-bg-color: rgba(214, 149, 59, 0.24);
--el-button-hover-border-color: rgba(214, 149, 59, 0.75);
}
}
</style>