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: 21c2eb17a98a8670e50e3c5a01992400b81770e9 [formerly 21c2eb17a98a8670e50e3c5a01992400b81770e9 [formerly 21c2eb17a98a8670e50e3c5a01992400b81770e9 [formerly 21c2eb17a98a8670e50e3c5a01992400b81770e9 [formerly dea08899083aa05e8d6f14614c025b48b97741e6 [formerly 1ce2023c82a4fcd9627e210eb274c69219fd7425]]]]]
Former-commit-id: 940e1f2395a642c9af922dab82dc23bac003f17f
Former-commit-id: 99acadc56e19d94f968c0d8e63a4b25dddde8c3b
Former-commit-id: 21cecee25d507ce21b21c9cbbfc811c8257cfb0d [formerly d218edea00350bf5c15b8c72263474467eea3e56]
Former-commit-id: 7d5e734f081616be0d3b49e7dcb460a9f38c9e11
Former-commit-id: 3b94c9ce56c268eb3b1866883f1c7805673f25b9
Former-commit-id: 642c47e68190eff32090d358c65df31f40854a3c
Former-commit-id: 36eb24536167392823e080fae3d21dde6f9d318c
Former-commit-id: a87d518565feff320f9f4de7b19d3165a5a3c51d
This commit is contained in:
liyang
2018-07-02 08:22:28 +08:00
parent 9d8defcab2
commit 3585e9eb78
7 changed files with 241 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/zh/components/container.md
View File

@@ -85,10 +85,12 @@ export default {
### 隐形页面容器
不显示任何背景色和边框
不显示任何背景色和边框，通常这个模式只有在极少情况下会使用
``` vue
<d2-container type="ghost">
主体内容
</d2-container>
```
如果你不希望内容紧贴上边，可以在内容外层容器设置 `class="d2-mt"`

10
src/assets/style/theme/theme.scss
View File

@@ -249,7 +249,8 @@
.d2-theme-container-main-body {
// 布局组件
.container-component {
// [组件] d2-container-full
// [组件]
// d2-container-full 填充型
.d2-container-full {
border: $theme-container-border-outer;
border-top: none;
@@ -266,16 +267,17 @@
background: $theme-container-header-footer-background-color;
}
}
// [组件] d2-container-card
// [组件]
// d2-container-card 卡片型
.d2-container-card {
border: $theme-container-border-outer;
border-top: none;
background: transparent;
.el-card__header {
&>.el-card__header {
border-bottom: $theme-container-border-inner;
background: $theme-container-header-footer-background-color;
}
.el-card__body {
&>.el-card__body {
background: $theme-container-background-color;
}
}

2
src/pages/demo/components/container/ghost.vue
View File

@@ -1,6 +1,6 @@
<template>
<d2-container type="ghost">
<el-card shadow="never" style="width: 50%;">
<el-card shadow="never" class="d2-mt" style="width: 50%;">
<d2-markdown :source="doc"/>
</el-card>
</d2-container>

6
src/pages/demo/components/container/md/doc-ghost.md
View File

@@ -1,9 +1,11 @@
## 隐形页面容器
不显示任何背景色和边框
不显示任何背景色和边框，通常这个模式只有在极少情况下会使用
```
<d2-container type="ghost">
主体内容
</d2-container>
```
```
如果你不希望内容紧贴上边，可以在内容外层容器设置 `class="d2-mt"`

164
src/pages/demo/element/basic-color/index.vue
View File

@@ -1,90 +1,84 @@
<template>
<d2-container type="ghost">
<d2-container>
<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>
<h1 class="d2-mt-0">主色</h1>
<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>
<h1>辅助色</h1>
<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>
<h1>中性色</h1>
<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>
</d2-container>
</template>

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

@@ -1,118 +1,106 @@
<template>
<d2-container type="ghost">
<d2-container>
<h1 class="d2-mt-0">基础布局</h1>
<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 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>
<h1>分栏间隔</h1>
<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 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>
<h1>混合布局</h1>
<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 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>
<h1>分栏偏移</h1>
<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 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>
<h1>对齐方式</h1>
<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 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>
<h1>响应式布局</h1>
<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>
</d2-container>
</template>

102
src/pages/demo/element/basic-typography/index.vue
View File

@@ -1,55 +1,55 @@
<template>
<d2-container type="ghost">
<el-card shadow="never" class="d2-mb">
<template slot="header">中文字体</template>
<el-row :gutter="10">
<el-col :span="6">
<el-card shadow="never">
<template slot="header">PingFang SC</template>
<p class="basic-typography-text typography-style-1">和畅惠风</p>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never">
<template slot="header">Hiragino Sans GB</template>
<p class="basic-typography-text typography-style-2">和畅惠风</p>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never">
<template slot="header">Microsoft YaHei</template>
<p class="basic-typography-text typography-style-3">和畅惠风</p>
</el-card>
</el-col>
</el-row>
</el-card>
<el-card shadow="never" class="d2-mb">
<template slot="header">英文／数字字体</template>
<el-row :gutter="10">
<el-col :span="6">
<el-card shadow="never">
<template slot="header">Helvetica Neue</template>
<p class="basic-typography-text typography-style-4">RGag</p>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never">
<template slot="header">Helvetica</template>
<p class="basic-typography-text typography-style-5">RGag</p>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never">
<template slot="header">Arial</template>
<p class="basic-typography-text typography-style-6">RGag</p>
</el-card>
</el-col>
</el-row>
</el-card>
<el-card shadow="never">
<template slot="header">Font-family 代码</template>
<d2-highlight :code="code"/>
</el-card>
<d2-container>
<template slot="header">字体</template>
<h1 class="d2-mt-0">中文字体</h1>
<el-row :gutter="10">
<el-col :span="6">
<el-card shadow="never">
<template slot="header">PingFang SC</template>
<p class="basic-typography-text typography-style-1">和畅惠风</p>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never">
<template slot="header">Hiragino Sans GB</template>
<p class="basic-typography-text typography-style-2">和畅惠风</p>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never">
<template slot="header">Microsoft YaHei</template>
<p class="basic-typography-text typography-style-3">和畅惠风</p>
</el-card>
</el-col>
</el-row>
<h1>英文／数字字体</h1>
<el-row :gutter="10">
<el-col :span="6">
<el-card shadow="never">
<template slot="header">Helvetica Neue</template>
<p class="basic-typography-text typography-style-4">RGag</p>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never">
<template slot="header">Helvetica</template>
<p class="basic-typography-text typography-style-5">RGag</p>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never">
<template slot="header">Arial</template>
<p class="basic-typography-text typography-style-6">RGag</p>
</el-card>
</el-col>
</el-row>
<h1>Font-family 代码</h1>
<d2-highlight :code="code"/>
</d2-container>
</template>