# 布局
蓝湖设计稿地址：布局 (opens new window)
# 业务布局
UED根据氚云项目的业务场景总结了以下六种业务布局规范，基于 1440*800 分辨率设计。
header 高度为 52px。
可以参考示例代码及 API 快速使用布局。
# 布局一
该布局中 content 宽度是自适应，最小宽度为 1200px，content 左右留白最大宽度为 120px。
该布局在可视宽度小于 1440px 时效果为 content 宽度保持 1200px 不变，左右留白自适应呈现。在可视宽度大于等于 1440px 时，content 自适应呈现，左右留白保持 120px 不变。
<template>
<h3-button @click="demoA = true" type="primary">查看效果</h3-button>
<h3-modal
wrap-class-name="layout-md-modal"
width="100vw"
:footer="null"
v-model="demoA"
>
<div class="layout-demo">
<!-- 示例代码 start-->
<h3-layout main-type="auto-space" wrapper-cls="layout-md-demo-a-layout">
<template #header>
<div class="layout-md-demo-a-header">内容</div>
</template>
<div class="layout-md-demo-a-content">内容</div>
</h3-layout>
<!-- 示例代码 end-->
</div>
</h3-modal>
</template>
<script>
import {H3Layout, H3Button, H3Modal} from '@lateinos/awesome-ui';
@Component({
name: 'DemoA',
components: {
H3Layout,
H3Button,
H3Modal
}
})
export default class DemoA extends Vue {
}
</script>
<style lang="less">
.layout-md-demo-a-layout {
margin: @h3-margin-lg 0;
}
.layout-md-demo-a-content, .layout-md-demo-a-header {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
# 布局二
该布局中 content 宽度是自适应，sider 固定宽度为 240px。
content 与 sider 间距通过控制 content 实际内容 margin-left 实现。
<template>
<h3-button @click="demoB = true" type="primary">查看效果</h3-button>
<h3-modal
wrap-class-name="layout-md-modal"
width="100vw"
:footer="null"
v-model="demoB">
<div class="layout-demo">
<!-- 示例代码 start-->
<h3-layout left-sider-width="240" wrapper-cls="layout-md-demo-b-layout">
<template #header>
<div class="layout-md-demo-b-header">内容</div>
</template>
<template #left>
<div class="layout-md-demo-b-sider">内容</div>
</template>
<div class="layout-md-demo-b-content">内容</div>
</h3-layout>
<!-- 示例代码 end-->
</div>
</h3-modal>
</template>
<script>
import {H3Layout, H3Button, H3Modal} from '@lateinos/awesome-ui';
@Component({
name: 'DemoB',
components: {
H3Layout,
H3Button,
H3Modal
}
})
export default class DemoB extends Vue {
}
</script>
<style lang="less">
.layout-md-demo-b-layout {
margin: @h3-margin-xs 0;
}
.layout-md-demo-b-sider, .layout-md-demo-b-header {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.layout-md-demo-b-content {
.layout-md-demo-b-sider();
width: calc(100% - @h3-margin-xs);
margin-left: @h3-margin-xs;
}
</style>
# 布局三
该布局中 content 固定宽度为 1200px。
<template>
<h3-button @click="demoC = true" type="primary">查看效果</h3-button>
<h3-modal
wrap-class-name="layout-md-modal"
width="100vw"
:footer="null"
v-model="demoC"
>
<div class="layout-demo">
<!-- 示例代码 start-->
<h3-layout main-type="fixed" wrapper-cls="layout-md-demo-c-layout">
<template #header>
<div class="layout-md-demo-c-header">内容</div>
</template>
<div class="layout-md-demo-c-content">内容</div>
</h3-layout>
<!-- 示例代码 end-->
</div>
</h3-modal>
</template>
<script>
import {H3Layout, H3Button, H3Modal} from '@lateinos/awesome-ui';
@Component({
name: 'DemoC',
components: {
H3Layout,
H3Button,
H3Modal
}
})
export default class DemoC extends Vue {
}
</script>
<style lang="less">
.layout-md-demo-c-layout {
margin: @h3-margin-lg 0;
}
.layout-md-demo-c-content, .layout-md-demo-c-header {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
# 布局四
该布局中 content 宽度自适应，左右 sider 宽度为 120px，左右两边留白为固定 32px。
content 与 sider 间距通过控制 content 实际内容 margin-left 和 margin-right 实现。
<template>
<h3-button @click="demoD = true" type="primary">查看效果</h3-button>
<h3-modal
wrap-class-name="layout-md-modal"
width="100vw"
:footer="null"
v-model="demoD">
<div class="layout-demo">
<!-- 示例代码 start-->
<h3-layout wrapper-cls="layout-md-demo-d-layout">
<template #header>
<div class="layout-md-demo-d-header">内容</div>
</template>
<template #left>
<div class="layout-md-demo-d-sider">内容</div>
</template>
<div class="layout-md-demo-d-content">内容</div>
<template #right>
<div class="layout-md-demo-d-sider">内容</div>
</template>
</h3-layout>
<!-- 示例代码 end-->
</div>
</h3-modal>
</template>
<script>
import {H3Layout, H3Button, H3Modal} from '@lateinos/awesome-ui';
@Component({
name: 'DemoD',
components: {
H3Layout,
H3Button,
H3Modal
}
})
export default class DemoD extends Vue {
}
</script>
<style lang="less">
.layout-md-demo-d-layout {
margin: @h3-margin-lg @h3-margin-xl;
}
.layout-md-demo-d-sider, .layout-md-demo-d-header {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.layout-md-demo-d-content {
.layout-md-demo-d-sider();
width: calc(100% - @h3-margin-xs * 2);
margin:0 @h3-margin-xs;
}
</style>
# 布局五
该布局中 content 宽度自适应，sider 固定宽度为 232px，通过传入的 wrapper-cls 来控制 content 和 sider 总宽度为 1200px。content 与 sider 间距为 16px，因此 content 内容宽度为 952px。
content 与 sider 间距通过控制 content 实际内容 margin-left 实现。
<template>
<h3-button @click="demoE = true" type="primary">查看效果</h3-button>
<h3-modal
wrap-class-name="layout-md-modal"
width="100vw"
:footer="null"
v-model="demoE">
<div class="layout-demo">
<!-- 示例代码 start-->
<h3-layout left-sider-width="232" wrapper-cls="layout-md-demo-e-layout">
<template #header>
<div class="layout-md-demo-e-header">内容</div>
</template>
<template #left>
<div class="layout-md-demo-e-sider">内容</div>
</template>
<div class="layout-md-demo-e-content">内容</div>
</h3-layout>
<!-- 示例代码 end-->
</div>
</h3-modal>
</template>
<script>
import {H3Layout, H3Button, H3Modal} from '@lateinos/awesome-ui';
@Component({
name: 'DemoE',
components: {
H3Layout,
H3Button,
H3Modal
}
})
export default class DemoE extends Vue {
}
</script>
<style lang="less">
.layout-md-demo-e-layout {
margin: @h3-margin-lg auto;
width: @h3-layout-main-content-width;
}
.layout-md-demo-e-sider, .layout-md-demo-e-header {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.layout-md-demo-e-content {
.layout-md-demo-e-sider();
width: calc(100% - @h3-margin-md);
margin-left: @h3-margin-md;
}
</style>
# 布局六
该布局中 content 宽度是自适应，sider 固定宽度为 400px。
content 与 sider 间距通过控制 content 实际内容 margin-right 实现。
<template>
<h3-button @click="demoF = true" type="primary">查看效果</h3-button>
<h3-modal
wrap-class-name="layout-md-modal"
width="100vw"
:footer="null"
v-model="demoF">
<div class="layout-demo">
<!-- 示例代码 start-->
<h3-layout right-sider-width="400" wrapper-cls="layout-md-demo-f-layout">
<template #header>
<div class="layout-md-demo-f-header">内容</div>
</template>
<div class="layout-md-demo-f-content">内容</div>
<template #right>
<div class="layout-md-demo-f-sider">内容</div>
</template>
</h3-layout>
<!-- 示例代码 end-->
</div>
</h3-modal>
</template>
<script>
import {H3Layout, H3Button, H3Modal} from '@lateinos/awesome-ui';
@Component({
name: 'DemoF',
components: {
H3Layout,
H3Button,
H3Modal
}
})
export default class DemoF extends Vue {
}
</script>
<style lang="less">
.layout-md-demo-f-layout {
margin: @h3-margin-xs 0;
}
.layout-md-demo-f-sider, .layout-md-demo-f-header {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.layout-md-demo-f-content {
.layout-md-demo-f-sider();
width: calc(100% - @h3-margin-xs);
margin-left: @h3-margin-xs;
}
</style>