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: 37c15613f04c755a95d4c0e5b3c86534c5694f7a [formerly f14135211d4d7dd1b3b9ed084aefd794c6f9cdcb] [formerly 37c15613f04c755a95d4c0e5b3c86534c5694f7a [formerly f14135211d4d7dd1b3b9ed084aefd794c6f9cdcb] [formerly 37c15613f04c755a95d4c0e5b3c86534c5694f7a [formerly f14135211d4d7dd1b3b9ed084aefd794c6f9cdcb] [formerly f14135211d4d7dd1b3b9ed084aefd794c6f9cdcb [formerly 347f5301d25da297c101d941af81a67f0a8d7240 [formerly dbde0ddc84a48a2bf821a4d019aa141abf78c676]]]]]
Former-commit-id: c1aff8b6f148067e928f23c48a7e46db8047897f
Former-commit-id: f0ec1a348c262479effc5288c7384b38984915b1
Former-commit-id: dbaf1d11571c2ac62a9710612478004b804baf67 [formerly f8af2ab177e82cecfd1eb61cef519e10b69d73d8]
Former-commit-id: 1c3e19c4069737d736aebe8c6d3161dbeef0a31f
Former-commit-id: aab7fd820f04c9423d82273ff5c1086037d0355d
Former-commit-id: db518aed306c55ccd671d8270c7fd233718836c9
Former-commit-id: 1454fa10f3f3c5de355b310a894ce8ef8640d44e
Former-commit-id: 53e42a082b9356f05921f415360a0e0bb7448250
This commit is contained in:
liyang
2018-06-17 12:00:05 +08:00
parent 56428ca55e
commit a6e52e4a74
2 changed files with 61 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/demo/element/basic-color/components/color-info.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<div>
<p>颜色</p>
</div>
</template>

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

@@ -5,7 +5,7 @@
<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">
<!-- <h1>$color-primary</h1> --> <d2-demo-color-info/>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@@ -29,33 +29,58 @@
</el-card> </el-card>
<el-card shadow="never"> <el-card shadow="never">
<template slot="header">中性色</template> <template slot="header">中性色</template>
<el-row :gutter="20" class="d2-mb">
<el-col :span="6">
<div class="color color-text-main"></div>
</el-col>
<el-col :span="6">
<div class="color color-text-normal"></div>
</el-col>
<el-col :span="6">
<div class="color color-text-sub"></div>
</el-col>
<el-col :span="6">
<div class="color color-text-placehoder"></div>
</el-col>
</el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6"> <el-col :span="6">
<div class="color color-info"></div> <div class="color color-border-1"></div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="color color-success"></div> <div class="color color-border-2"></div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="color color-warning"></div> <div class="color color-border-3"></div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="color color-danger"></div> <div class="color color-border-4"></div>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
</d2-container> </d2-container>
</template> </template>
<script>
export default {
components: {
'd2-demo-color-info': () => import('./components/color-info.vue')
}
}
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~@/assets/style/unit/_color.scss'; @import '~@/assets/style/unit/_color.scss';
.color { .color {
border-radius: 4px; border-radius: 4px;
height: 100px; height: 100px;
} }
.color-primary { .color-primary {
background-color: $color-primary; background-color: $color-primary;
} }
.color-info { .color-info {
background-color: $color-info; background-color: $color-info;
} }
@@ -68,5 +93,31 @@
.color-danger { .color-danger {
background-color: $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> </style>