提交 ebf085ef 编写于 作者: Shine-zwj's avatar Shine-zwj

update:更新布局样式

上级 8835f4e8
...@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<LayoutProps>(), { ...@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<LayoutProps>(), {
</script> </script>
<template> <template>
<IbizIndexViewBaseLayout class="ibiz-default-index-view"> <IbizIndexViewBaseLayout class="ibiz-index-view-layout--default">
<template v-slot:header-left> <template v-slot:header-left>
<slot name="caption"></slot> <slot name="caption"></slot>
</template> </template>
...@@ -30,7 +30,6 @@ const props = withDefaults(defineProps<LayoutProps>(), { ...@@ -30,7 +30,6 @@ const props = withDefaults(defineProps<LayoutProps>(), {
<template v-slot:side-left> <template v-slot:side-left>
<a-layout-sider <a-layout-sider
v-if="Object.is(menuAlign, 'LEFT')" v-if="Object.is(menuAlign, 'LEFT')"
theme="light"
collapsible collapsible
:trigger="null" :trigger="null"
:collapsed="collapsed"> :collapsed="collapsed">
...@@ -38,13 +37,10 @@ const props = withDefaults(defineProps<LayoutProps>(), { ...@@ -38,13 +37,10 @@ const props = withDefaults(defineProps<LayoutProps>(), {
</a-layout-sider> </a-layout-sider>
</template> </template>
<template v-slot:content> <template v-slot:content>
<!-- <div class="ibiz-page-tag"></div> -->
<slot name="router" /> <slot name="router" />
</template> </template>
</IbizIndexViewBaseLayout> </IbizIndexViewBaseLayout>
</template> </template>
<style lang="scss"> <style lang="scss">
.ibiz-default-index-view {
}
</style> </style>
\ No newline at end of file
...@@ -3,20 +3,20 @@ ...@@ -3,20 +3,20 @@
</script> </script>
<template> <template>
<a-layout class="app-index-view"> <a-layout class="ibiz-index-view-layout">
<a-layout-header> <a-layout-header class="ibiz-index-view-layout__header">
<slot name="header-left" /> <slot name="header-left" />
<slot name="header-content" /> <slot name="header-content" />
<slot name="header-right" /> <slot name="header-right" />
</a-layout-header> </a-layout-header>
<a-layout> <a-layout class="ibiz-index-view-layout__body">
<slot name="side-left" /> <slot name="side-left" />
<a-layout-content> <a-layout-content>
<slot name="content"></slot> <slot name="content"></slot>
</a-layout-content> </a-layout-content>
<slot name="side-right" /> <slot name="side-right" />
</a-layout> </a-layout>
<a-layout-footer> <a-layout-footer class="ibiz-index-view-layout__footer">
<slot name="footer-left" /> <slot name="footer-left" />
<slot name="footer-content" /> <slot name="footer-content" />
<slot name="footer-right" /> <slot name="footer-right" />
...@@ -25,19 +25,4 @@ ...@@ -25,19 +25,4 @@
</template> </template>
<style lang="scss"> <style lang="scss">
.app-index-view {
width: 100%;
height: 100%;
.ant-layout-header {
display: flex;
background-color: #fff;
justify-content: space-between;
}
.ant-layout-sider {
overflow-y: auto;
}
.ant-layout-footer {
padding: 0;
}
}
</style> </style>
\ No newline at end of file
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<slot /> <slot />
<slot name="body-bottom" /> <slot name="body-bottom" />
</div> </div>
<div class="ibiz-view-footer"> <div class="ibiz-view-layout__footer">
<slot name="footer-left" /> <slot name="footer-left" />
<slot name="footer-content" /> <slot name="footer-content" />
<slot name="footer-right" /> <slot name="footer-right" />
......
...@@ -48,10 +48,27 @@ const props = withDefaults(defineProps<Props>(), { ...@@ -48,10 +48,27 @@ const props = withDefaults(defineProps<Props>(), {
.ant-menu-inline-collapsed { .ant-menu-inline-collapsed {
.ibiz-menu-item { .ibiz-menu-item {
position: relative; position: relative;
display: flex;
align-items: center;
justify-content: center;
.ibiz-icon-text { .ibiz-icon-text {
position: absolute; position: absolute;
right: calc(50% - 8px); .ibiz-icon-text__text {
width: 20px;
height: 20px;
border-radius: 50%;
line-height: 18px;
text-align: center;
font-size: 12px;
border: 1px solid var(--ibiz-color-info);
}
}
} }
.ant-menu-submenu-title {
position: relative;
display: flex;
align-items: center;
justify-content: center;
} }
} }
</style> </style>
\ No newline at end of file
.ibiz-index-view-layout {
width: 100%;
height: 100%;
.ant-layout-sider {
overflow-y: auto;
background-color: var(--ibiz-view-layout-header-bg-color);
}
}
.ibiz-index-view-layout__header {
display: flex;
padding: 0 20px;
background-color: var(--ibiz-view-layout-header-bg-color);
justify-content: space-between;
}
.ibiz-index-view-layout__body {
background-color: var(--ibiz-view-layout-header-bg-color);
}
.ibiz-index-view-layout__footer {
padding: 0;
}
.ibiz-view-layout { .ibiz-view-layout {
display: flex; display: flex;
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
padding: var(--ibiz-view-layout-padding); padding: var(--ibiz-view-layout-padding);
background-color: var(--ibiz-view-layout-bg-color); background-color: var(--ibiz-view-layout-bg-color);
...@@ -8,12 +10,14 @@ ...@@ -8,12 +10,14 @@
flex: none; flex: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 10px;
background-color: var(--ibiz-view-layout-header-bg-color);
} }
.ibiz-view-layout__header-content { .ibiz-view-layout__header-content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: var(--ibiz-view-layout-header-height); height: var(--ibiz-view-layout-header-height);
border-bottom:var(--ibiz-view-layout-header-border-bottom); border-bottom: 1px solid var(--ibiz-view-layout-header-border-bottom);
margin: --ibiz-view-layout-header-padding; margin: --ibiz-view-layout-header-padding;
.ibiz-view__caption { .ibiz-view__caption {
font-size: var(--ibiz-view-caption-font-size); font-size: var(--ibiz-view-caption-font-size);
...@@ -23,11 +27,14 @@ ...@@ -23,11 +27,14 @@
display: flex; display: flex;
flex: auto; flex: auto;
height: 100%; height: 100%;
padding: 0 10px;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
background-color: var(--ibiz-view-layout-body-bg-color);
} }
.ibiz-view-layout__footer { .ibiz-view-layout__footer {
flex: none; flex: none;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background-color: var(--ibiz-view-layout-footer-bg-color);
} }
\ No newline at end of file
@use './ibiz-view-base-layout.scss'; @use './ibiz-view-base-layout.scss';
@use './ibiz-index-view-base-layout.scss';
\ No newline at end of file
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
--ibiz-color-danger: #f56c6c; --ibiz-color-danger: #f56c6c;
--ibiz-color-error: #f56c6c; --ibiz-color-error: #f56c6c;
--ibiz-color-info: #909399; --ibiz-color-info: #909399;
--ibiz-color-border: #e8eaec;
--ibiz-bg-color: #f5f7fa; //默认背景色 --ibiz-bg-color: #f5f7fa; //默认背景色
--ibiz-bg-color-disabled: #f5f7fa; //禁用背景色 --ibiz-bg-color-disabled: #f5f7fa; //禁用背景色
......
...@@ -12,12 +12,19 @@ ...@@ -12,12 +12,19 @@
// layout 组件样式 // layout 组件样式
// ibiz-view-layout .ibiz-index-view-layout{
--ibiz-view-layout-header-bg-color: var(--ibiz-color-white);
--ibiz-view-layout-body-bg-color: var(--ibiz-color-white);
--ibiz-view-layout-footer-bg-color: var(--ibiz-color-white);
}
.ibiz-view-layout{ .ibiz-view-layout{
--ibiz-view-layout-padding: 8px 12px 10px; --ibiz-view-layout-padding: 8px 12px 10px;
--ibiz-view-layout-header-padding: 0 10px; --ibiz-view-layout-header-padding: 0 10px;
--ibiz-view-layout-bg-color: var(--ibiz-bg-color); --ibiz-view-layout-bg-color: var(--ibiz-bg-color);
--ibiz-view-layout-header-bg-color: var(--ibiz-color-white);
--ibiz-view-layout-body-bg-color: var(--ibiz-color-white);
--ibiz-view-layout-footer-bg-color: var(--ibiz-color-white);
--ibiz-view-layout-header-height: 48px; --ibiz-view-layout-header-height: 48px;
--ibiz-view-layout-header-border-bottom: var(--ibiz-border-base); --ibiz-view-layout-header-border-bottom: var(--ibiz-color-border);
--ibiz-view-caption-font-size: var(--ibiz-font-size-lg) --ibiz-view-caption-font-size: var(--ibiz-font-size-lg)
} }
\ No newline at end of file
...@@ -154,6 +154,7 @@ const handleChange = (pagination: IParam, filters: IParam, sorter: IParam, data: ...@@ -154,6 +154,7 @@ const handleChange = (pagination: IParam, filters: IParam, sorter: IParam, data:
<style lang="scss"> <style lang="scss">
.ibiz-grid { .ibiz-grid {
height: 100%; height: 100%;
padding-top: 8px;
.table-striped { .table-striped {
background-color: #fafafa; background-color: #fafafa;
} }
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册