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 ``` vue
<d2-container type="ghost"> <d2-container type="ghost">
主体内容 主体内容
</d2-container> </d2-container>
``` ```
如果你不希望内容紧贴上边，可以在内容外层容器设置 `class="d2-mt"`

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

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

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

@@ -1,6 +1,6 @@
<template> <template>
<d2-container type="ghost"> <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"/> <d2-markdown :source="doc"/>
</el-card> </el-card>
</d2-container> </d2-container>

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

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

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

@@ -1,90 +1,84 @@
<template> <template>
<d2-container type="ghost"> <d2-container>
<el-card shadow="never" class="d2-mb"> <h1 class="d2-mt-0">主色</h1>
<template slot="header">主色</template> <el-row :gutter="20">
<el-row :gutter="20"> <el-col :span="6">
<el-col :span="6"> <div class="color color-primary">
<div class="color color-primary"> <d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/> </div>
</div> </el-col>
</el-col> </el-row>
</el-row>
</el-card>
<el-card shadow="never" class="d2-mb"> <h1>辅助色</h1>
<template slot="header">辅助色</template> <el-row :gutter="20">
<el-row :gutter="20"> <el-col :span="6">
<el-col :span="6"> <div class="color color-info">
<div class="color color-info"> <d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/> </div>
</div> </el-col>
</el-col> <el-col :span="6">
<el-col :span="6"> <div class="color color-success">
<div class="color color-success"> <d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/> </div>
</div> </el-col>
</el-col> <el-col :span="6">
<el-col :span="6"> <div class="color color-warning">
<div class="color color-warning"> <d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/> </div>
</div> </el-col>
</el-col> <el-col :span="6">
<el-col :span="6"> <div class="color color-danger">
<div class="color color-danger"> <d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/> </div>
</div> </el-col>
</el-col> </el-row>
</el-row>
</el-card>
<el-card shadow="never"> <h1>中性色</h1>
<template slot="header">中性色</template> <el-row :gutter="20" class="d2-mb">
<el-row :gutter="20" class="d2-mb"> <el-col :span="6">
<el-col :span="6"> <div class="color color-text-main">
<div class="color color-text-main"> <d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/> </div>
</div> </el-col>
</el-col> <el-col :span="6">
<el-col :span="6"> <div class="color color-text-normal">
<div class="color color-text-normal"> <d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/> </div>
</div> </el-col>
</el-col> <el-col :span="6">
<el-col :span="6"> <div class="color color-text-sub">
<div class="color color-text-sub"> <d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/> </div>
</div> </el-col>
</el-col> <el-col :span="6">
<el-col :span="6"> <div class="color color-text-placehoder">
<div class="color color-text-placehoder"> <d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/> </div>
</div> </el-col>
</el-col> </el-row>
</el-row> <el-row :gutter="20">
<el-row :gutter="20"> <el-col :span="6">
<el-col :span="6"> <div class="color color-border-1">
<div class="color color-border-1"> <d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/> </div>
</div> </el-col>
</el-col> <el-col :span="6">
<el-col :span="6"> <div class="color color-border-2">
<div class="color color-border-2"> <d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/> </div>
</div> </el-col>
</el-col> <el-col :span="6">
<el-col :span="6"> <div class="color color-border-3">
<div class="color color-border-3"> <d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/> </div>
</div> </el-col>
</el-col> <el-col :span="6">
<el-col :span="6"> <div class="color color-border-4">
<div class="color color-border-4"> <d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/> </div>
</div> </el-col>
</el-col> </el-row>
</el-row>
</el-card>
</d2-container> </d2-container>
</template> </template>

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

@@ -1,118 +1,106 @@
<template> <template>
<d2-container type="ghost"> <d2-container>
<el-card shadow="never" class="d2-mb"> <h1 class="d2-mt-0">基础布局</h1>
<template slot="header">基础布局</template> <el-row>
<el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row>
</el-row> <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"></div></el-col> <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col> </el-row>
</el-row> <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"></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-light"></div></el-col> <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-row>
</el-row> <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"></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-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"></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-light"></div></el-col> </el-row>
</el-row> <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"></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-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"></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-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"></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-light"></div></el-col> </el-row>
</el-row>
</el-card>
<el-card shadow="never" class="d2-mb"> <h1>分栏间隔</h1>
<template slot="header">分栏间隔</template> <el-row :gutter="20">
<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-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-row>
</el-card>
<el-card shadow="never" class="d2-mb"> <h1>混合布局</h1>
<template slot="header">混合布局</template> <el-row :gutter="20">
<el-row :gutter="20"> <el-col :span="16"><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="8"><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> <el-row :gutter="20">
<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="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-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> <el-row :gutter="20">
<el-row :gutter="20"> <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-col :span="16"><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-col :span="4"><div class="grid-content bg-purple"></div></el-col> </el-row>
</el-row>
</el-card>
<el-card shadow="never" class="d2-mb"> <h1>分栏偏移</h1>
<template slot="header">分栏偏移</template> <el-row :gutter="20">
<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" :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> <el-row :gutter="20">
<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-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> <el-row :gutter="20">
<el-row :gutter="20"> <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col> </el-row>
</el-row>
</el-card>
<el-card shadow="never" class="d2-mb"> <h1>对齐方式</h1>
<template slot="header">对齐方式</template> <el-row type="flex" class="row-bg">
<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"></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-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"></div></el-col> </el-row>
</el-row> <el-row type="flex" class="row-bg" justify="center">
<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"></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-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"></div></el-col> </el-row>
</el-row> <el-row type="flex" class="row-bg" justify="end">
<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"></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-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"></div></el-col> </el-row>
</el-row> <el-row type="flex" class="row-bg" justify="space-between">
<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"></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-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"></div></el-col> </el-row>
</el-row> <el-row type="flex" class="row-bg" justify="space-around">
<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"></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-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"></div></el-col> </el-row>
</el-row>
</el-card>
<el-card shadow="never" class="d2-mb"> <h1>响应式布局</h1>
<template slot="header">响应式布局</template> <el-row :gutter="10">
<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="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-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="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-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col> </el-row>
</el-row>
</el-card>
</d2-container> </d2-container>
</template> </template>

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

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