Skip to content

Commit bcec268

Browse files
weiqweiq
committed
🍰 Add Panel & Card & Login
1 parent 19a2ace commit bcec268

File tree

18 files changed

+500
-76
lines changed

18 files changed

+500
-76
lines changed

‎.eslintrc.js

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ module.exports = {
2323
}],
2424
"vue/attributes-order": "off",
2525
"vue/html-self-closing": "off",
26+
"vue/require-default-prop": "off",
2627
"vue/singleline-html-element-content-newline": "off",
2728
"vue/multiline-html-element-content-newline":"off",
2829
"vue/name-property-casing": ["error", "PascalCase"],

‎.prettierrc.json

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
{
2+
"printWidth": 100,
3+
"htmlWhitespaceSensitivity": "ignore",
24
"singleQuote": true,
35
"semi": false
46
}

‎src/assets/images/bg.jpg

6.86 KB
Loading

‎src/assets/images/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ requireAll(req)
66

77
// jpg png 图标
88
export { default as logo } from './logo.png';
9+
export { default as logo1 } from './logo1.png';

‎src/assets/images/logo-r.png

6.54 KB
Loading

‎src/assets/images/logo1.png

8.1 KB
Loading

‎src/assets/styles/mixin.scss

+8
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,11 @@
2626
width: 100%;
2727
height: 100%;
2828
}
29+
30+
@mixin abs-full {
31+
position: absolute;
32+
top: 0;
33+
right: 0;
34+
bottom: 0;
35+
left: 0;
36+
}

‎src/assets/styles/variables.scss

+50-12
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
11
// 通用
22
$fontSizeBase: 14px;
3+
$fontSizeMedium: 16px;
4+
$fontSizeLarge: 18px;
35
$borderColor: #ebeef5;
6+
$colorPrimary: #409eff;
7+
$colorSuccess: #67c23a;
8+
$colorWarning: #e6a23c;
9+
$colorDanger: #f56c6c;
10+
$colorInfo: #909399;
11+
$colorWhite: #ffffff;
12+
$colorBlack: #000000;
13+
$colorTextPrimary: #303133;
14+
$colorTextSecondary: #909399;
15+
$colorTextBase: #666;
416

517
// 导航高
618
$navbarHeight: 50px;
@@ -22,13 +34,47 @@ $containerHeaderBorder: 1px solid $borderColor;
2234
$containerHeaderPadding: 0 20px;
2335
$containerMainPadding: 20px;
2436

25-
26-
27-
// 面板
28-
$panelHeaderPadding: 12px 10px;
37+
// 面板容器
38+
$panelHeaderPadding: 0px 10px;
39+
$panelHeaderHeight: 46px;
2940
$panelBodyPadding: 10px;
3041
$panelHeaderBackgroundColor: #fafafa;
3142

43+
// 卡片
44+
$cardHeaderPadding: 0px 10px;
45+
$cardHeaderHeight: 40px;
46+
$cardBodyPadding: 5px 10px;
47+
48+
/* element-ui 样式修改 */
49+
// https://github.com/ElemeFE/element/blob/dev/packages/theme-chalk/src/common/var.scss
50+
51+
$--color-primary: $colorPrimary !default;
52+
$--color-success: $colorSuccess !default;
53+
$--color-warning: $colorWarning !default;
54+
$--color-danger: $colorDanger !default;
55+
$--color-info: $colorInfo !default;
56+
$--color-white: $colorWhite !default;
57+
$--color-black: $colorBlack !default;
58+
$--color-text-primary: $colorTextPrimary !default;
59+
60+
$--font-size-base: $fontSizeBase !default;
61+
$--color-text-secondary: $colorTextSecondary !default;
62+
$--font-size-extra-large: 20px !default;
63+
$--font-size-large: $fontSizeLarge !default;
64+
$--font-size-medium: $fontSizeMedium !default;
65+
$--font-size-small: 13px !default;
66+
$--font-size-extra-small: 12px !default;
67+
68+
$--input-medium-font-size: 14px !default;
69+
$--input-medium-height: 36px !default;
70+
$--input-small-font-size: 13px !default;
71+
$--input-small-height: 32px !default;
72+
$--input-mini-font-size: 12px !default;
73+
$--input-mini-height: 28px !default;
74+
75+
/* 改变 icon 字体路径变量，必需 */
76+
$--font-path: '~element-ui/lib/theme-chalk/fonts';
77+
3278
// 共享变量给页面js
3379
// 例 import { menuText } from '@/assets/styles/variables.scss'
3480
:export {
@@ -42,11 +88,3 @@ $panelHeaderBackgroundColor: #fafafa;
4288
subMenuHover: $subMenuHover;
4389
sideBarWidth: $sideBarWidth;
4490
}
45-
46-
/* element-ui 样式修改 */
47-
// https://github.com/ElemeFE/element/blob/dev/packages/theme-chalk/src/common/var.scss
48-
/* 改变字体大小 */
49-
$--color-primary: #409EFF !default;
50-
$--font-size-base: $fontSizeBase !default;
51-
/* 改变 icon 字体路径变量，必需 */
52-
$--font-path: '~element-ui/lib/theme-chalk/fonts';

‎src/components/Card/components/card.vue

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<template>
2+
<div class="le-card" :class="{ ['le-card--' + type]: type }">
3+
<div class="le-card__header" v-if="$slots.header || header || $slots.append">
4+
<div class="le-card__header--title">
5+
<slot name="header">{{ header }}</slot>
6+
</div>
7+
<div class="le-card__header--append">
8+
<slot name="append">{{ append }}</slot>
9+
</div>
10+
</div>
11+
<div class="le-card__body">
12+
<slot></slot>
13+
</div>
14+
<div class="le-card__footer" v-if="$slots.footer || footer || $slots.footerAppend">
15+
<div>
16+
<slot name="footer">{{ footer }}</slot>
17+
</div>
18+
<slot name="footerAppend">{{ footerAppend }}</slot>
19+
</div>
20+
</div>
21+
</template>
22+
23+
<script>
24+
export default {
25+
name: 'LeCard',
26+
props: {
27+
type: String,
28+
header: String,
29+
footer: String,
30+
append: String,
31+
footerAppend: String
32+
}
33+
}
34+
</script>
35+
36+
<style lang="scss" scoped>
37+
@import '~@/assets/styles/variables.scss';
38+
.le-card {
39+
border-radius: 4px;
40+
border: 1px solid $borderColor;
41+
background-color: #fff;
42+
&--info {
43+
border-left: 4px solid $colorInfo;
44+
}
45+
&--success {
46+
border-left: 4px solid $colorSuccess;
47+
}
48+
&--warning {
49+
border-left: 4px solid $colorWarning;
50+
}
51+
&--danger {
52+
border-left: 4px solid $colorDanger;
53+
}
54+
}
55+
.le-card + .le-card {
56+
margin-top: 10px;
57+
}
58+
.le-card__header,
59+
.le-card__footer {
60+
color: $colorTextSecondary;
61+
padding: $cardHeaderPadding;
62+
height: $cardHeaderHeight;
63+
flex: none;
64+
display: flex;
65+
align-items: center;
66+
justify-content: space-between;
67+
}
68+
.le-card__header--title {
69+
font-size: $fontSizeMedium;
70+
font-weight: 700;
71+
color: $colorTextPrimary;
72+
}
73+
.le-card__header--append {
74+
height: $cardHeaderHeight;
75+
display: flex;
76+
align-items: center;
77+
}
78+
.le-card__body {
79+
padding: $cardBodyPadding;
80+
overflow: auto;
81+
flex: auto;
82+
color: $colorTextBase;
83+
}
84+
</style>

‎src/components/Card/index.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Card from './components/card'
2+
3+
Card.install = function(Vue) {
4+
Vue.component(Card.name, Card)
5+
}
6+
7+
export default Card

‎src/components/Panel/components/panel.vue

+33-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
<template>
2-
<div class="le-panel">
3-
<div class="le-panel__header" v-if="$slots.header || header">
4-
<slot name="header">{{ header }}</slot>
2+
<div class="le-panel" :class="{ 'le-panel__full': full }">
3+
<div class="le-panel__header" v-if="$slots.header || header || $slots.append">
4+
<div>
5+
<slot name="header">{{ header }}</slot>
6+
</div>
7+
<slot name="append"></slot>
8+
</div>
9+
<div class="le-panel__sub-header" v-if="$slots.subHeader || subHeader || $slots.subAppend">
10+
<div>
11+
<slot name="subHeader">{{ subHeader }}</slot>
12+
</div>
13+
<slot name="subAppend"></slot>
514
</div>
615
<div class="le-panel__body" :style="bodyStyle">
716
<slot></slot>
@@ -13,14 +22,17 @@
1322
export default {
1423
name: 'LePanel',
1524
props: {
16-
header: {},
17-
bodyStyle: {}
25+
full: Boolean,
26+
header: String,
27+
bodyStyle: Object,
28+
subHeader: String
1829
}
1930
}
2031
</script>
2132

2233
<style lang="scss" scoped>
2334
@import '~@/assets/styles/variables.scss';
35+
@import '~@/assets/styles/mixin.scss';
2436
2537
.le-panel {
2638
border-radius: 4px;
@@ -29,12 +41,27 @@ export default {
2941
overflow: hidden;
3042
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
3143
}
32-
.le-panel__header {
44+
.le-panel__full {
45+
@include abs-full;
46+
display: flex;
47+
flex-direction: column;
48+
}
49+
.le-panel__header,
50+
.le-panel__sub-header {
51+
flex: none;
52+
height: $panelHeaderHeight;
3353
padding: $panelHeaderPadding;
54+
display: flex;
55+
align-items: center;
56+
justify-content: space-between;
3457
border-bottom: 1px solid $borderColor;
58+
}
59+
.le-panel__header {
3560
background: $panelHeaderBackgroundColor;
3661
}
3762
.le-panel__body {
3863
padding: $panelBodyPadding;
64+
overflow: auto;
65+
flex: auto;
3966
}
4067
</style>

‎src/components/index.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1-
import Panel from './Panel'
21
import Container from './Container'
32
import Aside from './Container/components/aside'
43
import Header from './Container/components/header'
54
import Main from './Container/components/main'
65
import Footer from './Container/components/footer'
76
import SvgIcon from './SvgIcon'
7+
import Panel from './Panel'
8+
import Card from './Card'
89

910
const components = [
10-
Panel,
1111
Container,
1212
Aside,
1313
Header,
1414
Main,
1515
Footer,
16-
SvgIcon
16+
SvgIcon,
17+
Panel,
18+
Card
1719
]
1820

1921
const install = function(Vue, opts = {}) {

‎src/routers/index.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ import { NotFount } from '@/routers/pages'
1515
import Dashboard from '@/routers/dashboard'
1616
import Nested from '@/routers/nested'
1717
import Container from '@/routers/ui/container'
18-
import Panel from '@/routers/ui/Panel'
18+
import Panel from '@/routers/ui/panel'
19+
import Card from '@/routers/ui/card'
1920
/**
2021
* Note: sub-menu only appear when route children.length >= 1
2122
*
@@ -65,7 +66,8 @@ export const constantRoutes = [
6566
meta: { title: 'UI元素', icon: 'table' },
6667
children: [
6768
Container,
68-
Panel
69+
Panel,
70+
Card
6971
]
7072
},
7173
{

0 commit comments

Comments
 (0)