Merge pull request #17 from FairyEver/dev
demo-element Former-commit-id: 7c56d851f80016473fc37a8ea78916481bd838c8 [formerly 7c56d851f80016473fc37a8ea78916481bd838c8 [formerly 7c56d851f80016473fc37a8ea78916481bd838c8 [formerly 7c56d851f80016473fc37a8ea78916481bd838c8 [formerly 81a361740c7b9eb00d64118e535e2734d34b893e [formerly 79f7930ca49cc6df408ad1daee3bccaa8e8b0e33]]]]] Former-commit-id: dbce2d37198254fa3bee21e4b0eab977bfd0ad2a Former-commit-id: a27fbf95733223ac25a9253dce4e57f1ccb227d8 Former-commit-id: 32bf6646e87dcb92a7325817581e1b340a8b80bc [formerly df33de999891c4bcb342b5eafda888a86180c7d2] Former-commit-id: d50351de59dcba2767a054f80ed78de901bde3b1 Former-commit-id: 9e0b2d2702e969b3749f17069cfdbee08d391e6a Former-commit-id: eb97223d472507ef7185d3c722fc8b25c75fa439 Former-commit-id: 54a465edeae251c127b60387b76b0e16abf083d5 Former-commit-id: 5adeef691c1050f1af8b010853e3b82992666976
This commit is contained in:
李杨
GitHub
@@ -1 +1 @@
|
||||
5180df7143acd2b32403b34a30d5c86f32288d1c
|
||||
4b819d117b3b7e87effa763dbb04ba3280622cf1
|
||||
1
src/assets/image/logo/w500-element.png.REMOVED.git-id
Normal file
1
src/assets/image/logo/w500-element.png.REMOVED.git-id
Normal file
@@ -0,0 +1 @@
|
||||
96116cf6cd5a5755048348977ceaffcc3ab7b0c9
|
||||
@@ -1,7 +1,7 @@
|
||||
// 主题名称
|
||||
$theme-name: 'tomorrow-night-blue';
|
||||
// 主题背景颜色
|
||||
$theme-bg-color: #002147;
|
||||
$theme-bg-color: #002253;
|
||||
// 主题背景图片
|
||||
$theme-bg-image: none;
|
||||
// 主题背景图片遮罩
|
||||
|
||||
@@ -122,10 +122,31 @@ const demoChart = {
|
||||
])('/demo/chart/')
|
||||
}
|
||||
|
||||
// 路由菜单 组件库
|
||||
const demoElement = {
|
||||
path: '/demo/element',
|
||||
title: '组件库',
|
||||
icon: 'puzzle-piece',
|
||||
children: (pre => [
|
||||
{ path: `${pre}index`, title: '组件库首页' },
|
||||
{
|
||||
path: `${pre}basic`,
|
||||
title: '基础',
|
||||
children: [
|
||||
{ path: `${pre}basic-layout`, title: '布局' },
|
||||
{ path: `${pre}basic-container`, title: '布局容器' },
|
||||
{ path: `${pre}basic-color`, title: '颜色' },
|
||||
{ path: `${pre}basic-button`, title: '按钮' }
|
||||
]
|
||||
}
|
||||
])('/demo/element/')
|
||||
}
|
||||
|
||||
// 菜单 侧边栏
|
||||
export const side = [
|
||||
demoPlugins,
|
||||
demoComponents,
|
||||
demoElement,
|
||||
demoChart
|
||||
]
|
||||
|
||||
@@ -137,10 +158,11 @@ export default [
|
||||
},
|
||||
{
|
||||
path: '/demo',
|
||||
title: '功能',
|
||||
title: '集成功能',
|
||||
children: [
|
||||
demoPlugins,
|
||||
demoComponents,
|
||||
demoElement,
|
||||
demoChart
|
||||
]
|
||||
},
|
||||
|
||||
106
src/pages/demo/element/basic-button/index.vue
Normal file
106
src/pages/demo/element/basic-button/index.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
|
||||
<h1 class="d2-mt-0">基础用法</h1>
|
||||
<el-row class="d2-mb">
|
||||
<el-button>默认按钮</el-button>
|
||||
<el-button type="primary">主要按钮</el-button>
|
||||
<el-button type="success">成功按钮</el-button>
|
||||
<el-button type="info">信息按钮</el-button>
|
||||
<el-button type="warning">警告按钮</el-button>
|
||||
<el-button type="danger">危险按钮</el-button>
|
||||
</el-row>
|
||||
<el-row class="d2-mb">
|
||||
<el-button plain>朴素按钮</el-button>
|
||||
<el-button type="primary" plain>主要按钮</el-button>
|
||||
<el-button type="success" plain>成功按钮</el-button>
|
||||
<el-button type="info" plain>信息按钮</el-button>
|
||||
<el-button type="warning" plain>警告按钮</el-button>
|
||||
<el-button type="danger" plain>危险按钮</el-button>
|
||||
</el-row>
|
||||
<el-row class="d2-mb">
|
||||
<el-button round>圆角按钮</el-button>
|
||||
<el-button type="primary" round>主要按钮</el-button>
|
||||
<el-button type="success" round>成功按钮</el-button>
|
||||
<el-button type="info" round>信息按钮</el-button>
|
||||
<el-button type="warning" round>警告按钮</el-button>
|
||||
<el-button type="danger" round>危险按钮</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button icon="el-icon-search" circle></el-button>
|
||||
<el-button type="primary" icon="el-icon-edit" circle></el-button>
|
||||
<el-button type="success" icon="el-icon-check" circle></el-button>
|
||||
<el-button type="info" icon="el-icon-message" circle></el-button>
|
||||
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" circle></el-button>
|
||||
</el-row>
|
||||
|
||||
<h1>禁用状态</h1>
|
||||
<el-row class="d2-mb">
|
||||
<el-button disabled>默认按钮</el-button>
|
||||
<el-button type="primary" disabled>主要按钮</el-button>
|
||||
<el-button type="success" disabled>成功按钮</el-button>
|
||||
<el-button type="info" disabled>信息按钮</el-button>
|
||||
<el-button type="warning" disabled>警告按钮</el-button>
|
||||
<el-button type="danger" disabled>危险按钮</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button plain disabled>朴素按钮</el-button>
|
||||
<el-button type="primary" plain disabled>主要按钮</el-button>
|
||||
<el-button type="success" plain disabled>成功按钮</el-button>
|
||||
<el-button type="info" plain disabled>信息按钮</el-button>
|
||||
<el-button type="warning" plain disabled>警告按钮</el-button>
|
||||
<el-button type="danger" plain disabled>危险按钮</el-button>
|
||||
</el-row>
|
||||
|
||||
<h1>文字按钮</h1>
|
||||
<el-row>
|
||||
<el-button type="text">文字按钮</el-button>
|
||||
<el-button type="text" disabled>文字按钮</el-button>
|
||||
</el-row>
|
||||
|
||||
<h1>图标按钮</h1>
|
||||
<el-row>
|
||||
<el-button type="primary" icon="el-icon-edit"></el-button>
|
||||
<el-button type="primary" icon="el-icon-share"></el-button>
|
||||
<el-button type="primary" icon="el-icon-delete"></el-button>
|
||||
<el-button type="primary" icon="el-icon-search">搜索</el-button>
|
||||
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
|
||||
</el-row>
|
||||
|
||||
<h1>按钮组</h1>
|
||||
<el-row>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
|
||||
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
|
||||
</el-button-group>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="el-icon-edit"></el-button>
|
||||
<el-button type="primary" icon="el-icon-share"></el-button>
|
||||
<el-button type="primary" icon="el-icon-delete"></el-button>
|
||||
</el-button-group>
|
||||
</el-row>
|
||||
|
||||
<h1>加载中</h1>
|
||||
<el-row>
|
||||
<el-button type="primary" :loading="true">加载中</el-button>
|
||||
</el-row>
|
||||
|
||||
<h1>不同尺寸</h1>
|
||||
<el-row>
|
||||
<el-row class="d2-mb">
|
||||
<el-button>默认按钮</el-button>
|
||||
<el-button size="medium">中等按钮</el-button>
|
||||
<el-button size="small">小型按钮</el-button>
|
||||
<el-button size="mini">超小按钮</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button round>默认按钮</el-button>
|
||||
<el-button size="medium" round>中等按钮</el-button>
|
||||
<el-button size="small" round>小型按钮</el-button>
|
||||
<el-button size="mini" round>超小按钮</el-button>
|
||||
</el-row>
|
||||
</el-row>
|
||||
|
||||
</d2-container>
|
||||
</template>
|
||||
62
src/pages/demo/element/basic-color/components/info.vue
Normal file
62
src/pages/demo/element/basic-color/components/info.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="info" :class="theme">
|
||||
<p class="name">{{name}}</p>
|
||||
<p class="sass">{{sass}}</p>
|
||||
<p class="color">{{color}}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
theme: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'light' // dark
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
sass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.info {
|
||||
padding: 10px;
|
||||
p {
|
||||
margin: 0px;
|
||||
}
|
||||
.name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sass {
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.color {
|
||||
font-size: 12px;
|
||||
opacity: .7;
|
||||
margin-top: 2px;
|
||||
}
|
||||
&.dark {
|
||||
color: #333;
|
||||
}
|
||||
&.light {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
151
src/pages/demo/element/basic-color/index.vue
Normal file
151
src/pages/demo/element/basic-color/index.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<d2-container type="ghost">
|
||||
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<template slot="header">主色</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="color color-primary">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</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="color color-info">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-success">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-warning">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-danger">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<template slot="header">中性色</template>
|
||||
<el-row :gutter="20" class="d2-mb">
|
||||
<el-col :span="6">
|
||||
<div class="color color-text-main">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-text-normal">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-text-sub">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-text-placehoder">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="color color-border-1">
|
||||
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-border-2">
|
||||
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-border-3">
|
||||
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-border-4">
|
||||
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
'd2-element-basic-color-info': () => import('./components/info.vue')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/unit/_color.scss';
|
||||
.color {
|
||||
border-radius: 4px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.color-primary {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
.color-info {
|
||||
background-color: $color-info;
|
||||
}
|
||||
.color-success {
|
||||
background-color: $color-success;
|
||||
}
|
||||
.color-warning {
|
||||
background-color: $color-warning;
|
||||
}
|
||||
.color-danger {
|
||||
background-color: $color-danger;
|
||||
}
|
||||
|
||||
.color-text-main {
|
||||
background-color: $color-text-main;
|
||||
}
|
||||
.color-text-normal {
|
||||
background-color: $color-text-normal;
|
||||
}
|
||||
.color-text-sub {
|
||||
background-color: $color-text-sub;
|
||||
}
|
||||
.color-text-placehoder {
|
||||
background-color: $color-text-placehoder;
|
||||
}
|
||||
|
||||
.color-border-1 {
|
||||
background-color: $color-border-1;
|
||||
}
|
||||
.color-border-2 {
|
||||
background-color: $color-border-2;
|
||||
}
|
||||
.color-border-3 {
|
||||
background-color: $color-border-3;
|
||||
}
|
||||
.color-border-4 {
|
||||
background-color: $color-border-4;
|
||||
}
|
||||
</style>
|
||||
|
||||
94
src/pages/demo/element/basic-container/index.vue
Normal file
94
src/pages/demo/element/basic-container/index.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<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>
|
||||
|
||||
148
src/pages/demo/element/basic-layout/index.vue
Normal file
148
src/pages/demo/element/basic-layout/index.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<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>
|
||||
|
||||
9
src/pages/demo/element/index/index.vue
Normal file
9
src/pages/demo/element/index/index.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<d2-demo-page-cover
|
||||
title="基础组件库"
|
||||
sub-title="D2Admin 集成由饿了么出品的 ElementUI">
|
||||
<img src="@/assets/image/logo/w500-element.png">
|
||||
</d2-demo-page-cover>
|
||||
</d2-container>
|
||||
</template>
|
||||
@@ -21,6 +21,59 @@ const routes = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/demo/business',
|
||||
name: 'demo-business',
|
||||
meta,
|
||||
redirect: { name: 'demo-business-index' },
|
||||
component: () => import('@/components/core/d2-layout-main/index.vue'),
|
||||
children: (pre => [
|
||||
{ path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/business/index/index.vue'), meta }
|
||||
])('demo-business-')
|
||||
},
|
||||
{
|
||||
path: '/demo/chart',
|
||||
name: 'demo-chart',
|
||||
meta,
|
||||
redirect: { name: 'demo-chart-index' },
|
||||
component: () => import('@/components/core/d2-layout-main/index.vue'),
|
||||
children: (pre => [
|
||||
{ path: 'all', name: `${pre}all`, component: () => import('@/pages/demo/chart/all/index.vue'), meta },
|
||||
{ path: 'demo/areaBase', name: `${pre}demo-areaBase`, component: () => import('@/pages/demo/chart/demo/areaBase.vue'), meta },
|
||||
{ path: 'demo/barBase', name: `${pre}demo-barBase`, component: () => import('@/pages/demo/chart/demo/barBase.vue'), meta },
|
||||
{ path: 'demo/columnBase', name: `${pre}demo-columnBase`, component: () => import('@/pages/demo/chart/demo/columnBase.vue'), meta },
|
||||
{ path: 'demo/lineBase', name: `${pre}demo-lineBase`, component: () => import('@/pages/demo/chart/demo/lineBase.vue'), meta },
|
||||
{ path: 'demo/lineStep', name: `${pre}demo-lineStep`, component: () => import('@/pages/demo/chart/demo/lineStep.vue'), meta },
|
||||
{ path: 'demo/nightingaleRoseBase', name: `${pre}demo-nightingaleRoseBase`, component: () => import('@/pages/demo/chart/demo/nightingaleRoseBase.vue'), meta },
|
||||
{ path: 'demo/PieBase', name: `${pre}demo-PieBase`, component: () => import('@/pages/demo/chart/demo/PieBase.vue'), meta },
|
||||
{ path: 'demo/radarBase', name: `${pre}demo-radarBase`, component: () => import('@/pages/demo/chart/demo/radarBase.vue'), meta },
|
||||
{ path: 'dynamicSize', name: `${pre}dynamicSize`, component: () => import('@/pages/demo/chart/dynamicSize/index.vue'), meta },
|
||||
{ path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/chart/index/index.vue'), meta }
|
||||
])('demo-chart-')
|
||||
},
|
||||
{
|
||||
path: '/demo/plugins',
|
||||
name: 'demo-plugins',
|
||||
meta,
|
||||
redirect: { name: 'demo-plugins-index' },
|
||||
component: () => import('@/components/core/d2-layout-main/index.vue'),
|
||||
children: (pre => [
|
||||
{ path: 'build', name: `${pre}build`, component: () => import('@/pages/demo/plugins/build/index.vue'), meta },
|
||||
{ path: 'clipboard-polyfill', name: `${pre}clipboard-polyfill`, component: () => import('@/pages/demo/plugins/clipboard-polyfill/index.vue'), meta },
|
||||
{ path: 'day', name: `${pre}day`, component: () => import('@/pages/demo/plugins/day/index.vue'), meta },
|
||||
{ path: 'export/table', name: `${pre}export-table`, component: () => import('@/pages/demo/plugins/export/table.vue'), meta },
|
||||
{ path: 'export/txt', name: `${pre}export-txt`, component: () => import('@/pages/demo/plugins/export/txt.vue'), meta },
|
||||
{ path: 'i18n/demo1', name: `${pre}i18n-demo1`, component: () => import('@/pages/demo/plugins/i18n/demo1.vue'), meta },
|
||||
{ path: 'i18n/demo2', name: `${pre}i18n-demo2`, component: () => import('@/pages/demo/plugins/i18n/demo2.vue'), meta },
|
||||
{ path: 'import/csv', name: `${pre}import-csv`, component: () => import('@/pages/demo/plugins/import/csv.vue'), meta },
|
||||
{ path: 'import/xlsx', name: `${pre}import-xlsx`, component: () => import('@/pages/demo/plugins/import/xlsx.vue'), meta },
|
||||
{ path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/plugins/index/index.vue'), meta },
|
||||
{ path: 'js-cookie', name: `${pre}js-cookie`, component: () => import('@/pages/demo/plugins/js-cookie/index.vue'), meta },
|
||||
{ path: 'mock/ajax', name: `${pre}mock-ajax`, component: () => import('@/pages/demo/plugins/mock/ajax.vue'), meta },
|
||||
{ path: 'mock/dpd', name: `${pre}mock-dpd`, component: () => import('@/pages/demo/plugins/mock/dpd.vue'), meta },
|
||||
{ path: 'mock/dtd', name: `${pre}mock-dtd`, component: () => import('@/pages/demo/plugins/mock/dtd.vue'), meta }
|
||||
])('demo-plugins-')
|
||||
},
|
||||
{
|
||||
path: '/demo/components',
|
||||
name: 'demo-components',
|
||||
@@ -49,57 +102,18 @@ const routes = [
|
||||
])('demo-components-')
|
||||
},
|
||||
{
|
||||
path: '/demo/plugins',
|
||||
name: 'demo-plugins',
|
||||
path: '/demo/element',
|
||||
name: 'demo-element',
|
||||
meta,
|
||||
redirect: { name: 'demo-plugins-index' },
|
||||
redirect: { name: 'demo-element-index' },
|
||||
component: () => import('@/components/core/d2-layout-main/index.vue'),
|
||||
children: (pre => [
|
||||
{ path: 'build', name: `${pre}build`, component: () => import('@/pages/demo/plugins/build/index.vue'), meta },
|
||||
{ path: 'clipboard-polyfill', name: `${pre}clipboard-polyfill`, component: () => import('@/pages/demo/plugins/clipboard-polyfill/index.vue'), meta },
|
||||
{ path: 'day', name: `${pre}day`, component: () => import('@/pages/demo/plugins/day/index.vue'), meta },
|
||||
{ path: 'export/table', name: `${pre}export-table`, component: () => import('@/pages/demo/plugins/export/table.vue'), meta },
|
||||
{ path: 'export/txt', name: `${pre}export-txt`, component: () => import('@/pages/demo/plugins/export/txt.vue'), meta },
|
||||
{ path: 'i18n/demo1', name: `${pre}i18n-demo1`, component: () => import('@/pages/demo/plugins/i18n/demo1.vue'), meta },
|
||||
{ path: 'i18n/demo2', name: `${pre}i18n-demo2`, component: () => import('@/pages/demo/plugins/i18n/demo2.vue'), meta },
|
||||
{ path: 'import/csv', name: `${pre}import-csv`, component: () => import('@/pages/demo/plugins/import/csv.vue'), meta },
|
||||
{ path: 'import/xlsx', name: `${pre}import-xlsx`, component: () => import('@/pages/demo/plugins/import/xlsx.vue'), meta },
|
||||
{ path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/plugins/index/index.vue'), meta },
|
||||
{ path: 'js-cookie', name: `${pre}js-cookie`, component: () => import('@/pages/demo/plugins/js-cookie/index.vue'), meta },
|
||||
{ path: 'mock/ajax', name: `${pre}mock-ajax`, component: () => import('@/pages/demo/plugins/mock/ajax.vue'), meta },
|
||||
{ path: 'mock/dpd', name: `${pre}mock-dpd`, component: () => import('@/pages/demo/plugins/mock/dpd.vue'), meta },
|
||||
{ path: 'mock/dtd', name: `${pre}mock-dtd`, component: () => import('@/pages/demo/plugins/mock/dtd.vue'), meta }
|
||||
])('demo-plugins-')
|
||||
},
|
||||
{
|
||||
path: '/demo/chart',
|
||||
name: 'demo-chart',
|
||||
meta,
|
||||
redirect: { name: 'demo-chart-index' },
|
||||
component: () => import('@/components/core/d2-layout-main/index.vue'),
|
||||
children: (pre => [
|
||||
{ path: 'all', name: `${pre}all`, component: () => import('@/pages/demo/chart/all/index.vue'), meta },
|
||||
{ path: 'demo/areaBase', name: `${pre}demo-areaBase`, component: () => import('@/pages/demo/chart/demo/areaBase.vue'), meta },
|
||||
{ path: 'demo/barBase', name: `${pre}demo-barBase`, component: () => import('@/pages/demo/chart/demo/barBase.vue'), meta },
|
||||
{ path: 'demo/columnBase', name: `${pre}demo-columnBase`, component: () => import('@/pages/demo/chart/demo/columnBase.vue'), meta },
|
||||
{ path: 'demo/lineBase', name: `${pre}demo-lineBase`, component: () => import('@/pages/demo/chart/demo/lineBase.vue'), meta },
|
||||
{ path: 'demo/lineStep', name: `${pre}demo-lineStep`, component: () => import('@/pages/demo/chart/demo/lineStep.vue'), meta },
|
||||
{ path: 'demo/nightingaleRoseBase', name: `${pre}demo-nightingaleRoseBase`, component: () => import('@/pages/demo/chart/demo/nightingaleRoseBase.vue'), meta },
|
||||
{ path: 'demo/PieBase', name: `${pre}demo-PieBase`, component: () => import('@/pages/demo/chart/demo/PieBase.vue'), meta },
|
||||
{ path: 'demo/radarBase', name: `${pre}demo-radarBase`, component: () => import('@/pages/demo/chart/demo/radarBase.vue'), meta },
|
||||
{ path: 'dynamicSize', name: `${pre}dynamicSize`, component: () => import('@/pages/demo/chart/dynamicSize/index.vue'), meta },
|
||||
{ path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/chart/index/index.vue'), meta }
|
||||
])('demo-chart-')
|
||||
},
|
||||
{
|
||||
path: '/demo/business',
|
||||
name: 'demo-business',
|
||||
meta,
|
||||
redirect: { name: 'demo-business-index' },
|
||||
component: () => import('@/components/core/d2-layout-main/index.vue'),
|
||||
children: (pre => [
|
||||
{ path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/business/index/index.vue'), meta }
|
||||
])('demo-business-')
|
||||
{ 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: 'basic-color', name: `${pre}basic-color`, component: () => import('@/pages/demo/element/basic-color/index.vue'), meta },
|
||||
{ path: 'basic-button', name: `${pre}basic-button`, component: () => import('@/pages/demo/element/basic-button/index.vue'), meta },
|
||||
{ path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/element/index/index.vue'), meta }
|
||||
])('demo-element-')
|
||||
},
|
||||
// 登陆
|
||||
{
|
||||
@@ -109,10 +123,6 @@ const routes = [
|
||||
}
|
||||
]
|
||||
|
||||
// routes[3].children.forEach(e => {
|
||||
// console.log(`{ path: \`\${pre}${e.path}\`, title: 'title' }`)
|
||||
// })
|
||||
|
||||
let router = new VueRouter({ routes })
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
|
||||
Reference in New Issue
Block a user