lostecho/vue-element-plus-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 样式布局调整完成

Browse Source
This commit is contained in:
kailong321200875
2023-04-18 17:09:03 +08:00
parent 15be32df99
commit 719317694f
12 changed files with 146 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Logo/src/Logo.vue
View File

@@ -60,8 +60,7 @@ watch(
:class="[
prefixCls,
layout !== 'classic' ? `${prefixCls}__Top` : '',
'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative',
'dark:bg-[var(--el-bg-color)]'
'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative decoration-none'
]"
to="/"
>

17
src/components/Menu/src/Menu.vue
View File

@@ -138,14 +138,15 @@ export default defineComponent({
position: relative;
transition: width var(--transition-time-02);
&:after {
position: absolute;
top: 0;
right: 0;
height: 100%;
border-left: 1px solid var(--left-menu-border-color);
content: '';
}
// &:after {
// position: absolute;
// top: 0;
// right: 0;
// height: 100%;
// width: 1px;
// background-color: var(--el-border-color);
// content: '';
// }
:deep(.@{elNamespace}-menu) {
width: 100% !important;

4
src/components/TabMenu/src/TabMenu.vue
View File

@@ -141,7 +141,7 @@ export default defineComponent({
id={`${variables.namespace}-menu`}
class={[
prefixCls,
'relative bg-[var(--left-menu-bg-color)] top-1px z-3000',
'relative bg-[var(--left-menu-bg-color)] top-1px z-3000 layout-border__right',
{
'w-[var(--tab-menu-max-width)]': !unref(collapse),
'w-[var(--tab-menu-min-width)]': unref(collapse)
@@ -197,7 +197,7 @@ export default defineComponent({
</div>
<Menu
class={[
'!absolute top-0 b-l-1 border-solid border-[var(--left-menu-bg-light-color)]',
'!absolute top-0',
{
'!left-[var(--tab-menu-min-width)]': unref(collapse),
'!left-[var(--tab-menu-max-width)]': !unref(collapse),

59
src/components/TagsView/src/TagsView.vue
View File

@@ -264,8 +264,8 @@ watch(
class="flex w-full relative bg-[#fff] dark:bg-[var(--el-bg-color)]"
>
<span
:class="`${prefixCls}__tool`"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer"
:class="`${prefixCls}__tool ${prefixCls}__tool--first`"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] flex items-center justify-center cursor-pointer"
@click="move(-200)"
>
<Icon
@@ -381,7 +381,7 @@ watch(
</div>
<span
:class="`${prefixCls}__tool`"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] flex items-center justify-center cursor-pointer"
@click="move(200)"
>
<Icon
@@ -391,7 +391,7 @@ watch(
</span>
<span
:class="`${prefixCls}__tool`"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] flex items-center justify-center cursor-pointer"
@click="refreshSelectedTag(selectedTag)"
>
<Icon
@@ -455,7 +455,7 @@ watch(
>
<span
:class="`${prefixCls}__tool`"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer block"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] flex items-center justify-center cursor-pointer block"
>
<Icon
icon="ant-design:setting-outlined"
@@ -476,34 +476,48 @@ watch(
&__tool {
position: relative;
&:hover {
:deep(span) {
color: var(--el-color-black) !important;
}
}
&:after {
position: absolute;
top: 1px;
left: 0;
width: 100%;
height: calc(~'100% - 1px');
border-right: 1px solid var(--tags-view-border-color);
border-left: 1px solid var(--tags-view-border-color);
content: '';
}
&--first {
&:after {
display: none;
}
&:before {
position: absolute;
top: 1px;
left: 0;
width: 100%;
height: calc(~'100% - 1px');
border-right: 1px solid var(--tags-view-border-color);
content: '';
}
}
&:hover {
:deep(span) {
color: var(--el-color-black) !important;
}
}
}
&__item {
position: relative;
top: 2px;
height: calc(~'100% - 4px');
height: calc(~'100% - 6px');
padding-right: 25px;
margin-left: 4px;
font-size: 12px;
cursor: pointer;
border: 1px solid #d9d9d9;
border-radius: 2px;
&--close {
position: absolute;
@@ -547,18 +561,20 @@ watch(
}
&:after {
border-right: 1px solid var(--el-border-color);
border-left: 1px solid var(--el-border-color);
}
&--first {
&:before {
border-right: 1px solid var(--el-border-color);
}
&:after {
display: none;
}
}
}
&__item {
position: relative;
top: 2px;
height: calc(~'100% - 4px');
padding-right: 25px;
font-size: 12px;
cursor: pointer;
border: 1px solid var(--el-border-color);
}
@@ -571,6 +587,7 @@ watch(
&__item.is-active {
color: var(--el-color-white);
background-color: var(--el-color-primary);
border: 1px solid var(--el-color-primary);
.@{prefix-cls}__item--close {
:deep(span) {
color: var(--el-color-white) !important;