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

update:更新布局样式

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