sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

no message

Browse Source 
Former-commit-id: 8716d744cb5216d2c2f93ecdcbfbf1510bc54a74 [formerly 7ee47c9e097922d154644d6173540bb7cd74ba39] [formerly 8716d744cb5216d2c2f93ecdcbfbf1510bc54a74 [formerly 7ee47c9e097922d154644d6173540bb7cd74ba39] [formerly 8716d744cb5216d2c2f93ecdcbfbf1510bc54a74 [formerly 7ee47c9e097922d154644d6173540bb7cd74ba39] [formerly 7ee47c9e097922d154644d6173540bb7cd74ba39 [formerly a23389c71af615511175cbb0e65154fc75cf7c33 [formerly d4a736009a19aa5c55783e8a2e9626f8ed058c6e]]]]]
Former-commit-id: 6228f01bb2ebceff2880b65b2fc1c61b67a9e184
Former-commit-id: a7f038093f9c7d12882418356c361366341fb5a1
Former-commit-id: 35610da41a483ddcf52eb76d5cbed92c2ee3f029 [formerly 023da26a08d0ef67883f8a85cacd525288b8a697]
Former-commit-id: 3b3539db72f06a74db40c118f4703e764fca2ad9
Former-commit-id: dc9a2919bff93b6e7bdfd455e1deecceff6bb5e7
Former-commit-id: 4c3e5d1ea74969bb0c76c9049d0981d1d5e0342e
Former-commit-id: 8d73f1f8579f9b04ae91814a36abdf3afc949e2e
Former-commit-id: f53f91feedcc764b947ecdc77400470a8ced1543
This commit is contained in:
liyang
2018-06-17 08:18:58 +08:00
parent 5ea334f961
commit 7a6f12ea86
4 changed files with 236 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/menu/index.js
View File

@@ -128,7 +128,15 @@ const demoElement = {
title: '组件库',
icon: 'puzzle-piece',
children: (pre => [
{ path: `${pre}index`, title: '组件库首页' }
{ path: `${pre}index`, title: '组件库首页' },
{
path: `${pre}basic`,
title: '基础',
children: [
{ path: `${pre}basic-layout`, title: '布局' },
{ path: `${pre}basic-container`, title: '布局容器' }
]
}
])('/demo/element/')
}
@@ -136,6 +144,7 @@ const demoElement = {
export const side = [
demoPlugins,
demoComponents,
demoElement,
demoChart
]

86
src/pages/demo/element/basic-container/index.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<d2-container>
<el-container class="d2-mb">
<el-header>顶栏</el-header>
<el-main>主体</el-main>
</el-container>
<el-container class="d2-mb">
<el-header>顶栏</el-header>
<el-main>主体</el-main>
<el-footer>底栏</el-footer>
</el-container>
<el-container class="d2-mb">
<el-aside width="200px">侧边栏</el-aside>
<el-main>主体</el-main>
</el-container>
<el-container class="d2-mb">
<el-header>顶栏</el-header>
<el-container>
<el-aside width="200px">侧边栏</el-aside>
<el-main>主体</el-main>
</el-container>
</el-container>
<el-container class="d2-mb">
<el-header>顶栏</el-header>
<el-container>
<el-aside width="200px">侧边栏</el-aside>
<el-container>
<el-main>主体</el-main>
<el-footer>底栏</el-footer>
</el-container>
</el-container>
</el-container>
<el-container class="d2-mb">
<el-aside width="200px">侧边栏</el-aside>
<el-container>
<el-header>顶栏</el-header>
<el-main>主体</el-main>
</el-container>
</el-container>
<el-container>
<el-aside width="200px">侧边栏</el-aside>
<el-container>
<el-header>顶栏</el-header>
<el-main>主体</el-main>
<el-footer>底栏</el-footer>
</el-container>
</el-container>
</d2-container>
</template>
<style lang="scss" scoped>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>

140
src/pages/demo/element/basic-layout/index.vue
View File

@@ -1,5 +1,141 @@
<template>
<d2-container>
qqq
<d2-container type="ghost">
<el-card shadow="never" class="d2-mb">
<template slot="header">基础布局</template>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
</el-card>
<el-card shadow="never" class="d2-mb">
<template slot="header">分栏间隔</template>
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
</el-card>
<el-card shadow="never" class="d2-mb">
<template slot="header">混合布局</template>
<el-row :gutter="20">
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
</el-card>
<el-card shadow="never" class="d2-mb">
<template slot="header">分栏偏移</template>
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
</el-card>
<el-card shadow="never" class="d2-mb">
<template slot="header">对齐方式</template>
<el-row type="flex" class="row-bg">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="center">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="end">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
</el-card>
<el-card shadow="never" class="d2-mb">
<template slot="header">响应式布局</template>
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
</el-card>
</d2-container>
</template>
<style lang="scss" scoped>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>

2
src/router/index.js
View File

@@ -108,6 +108,8 @@ const routes = [
redirect: { name: 'demo-element-index' },
component: () => import('@/components/core/d2-layout-main/index.vue'),
children: (pre => [
{ path: 'basic-layout', name: `${pre}basic-layout`, component: () => import('@/pages/demo/element/basic-layout/index.vue'), meta },
{ path: 'basic-container', name: `${pre}basic-container`, component: () => import('@/pages/demo/element/basic-container/index.vue'), meta },
{ path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/element/index/index.vue'), meta }
])('demo-element-')
},