no message
Former-commit-id: d7106d025703b65fd309a8feaf399c3675babfc4 Former-commit-id: 227ac204f64b9799296d9b65e80e963ec90f5320 Former-commit-id: 342e6cbb22bfeea72cffdf552b42edb8621e084f
This commit is contained in:
@@ -1 +1,19 @@
|
||||
@import '../theme-base.scss';
|
||||
@import '../theme-base.scss';
|
||||
|
||||
$theme-name: 'star';
|
||||
$theme-bg-color: #EFF4F8;
|
||||
$theme-bg-image: '/static/image/bg/star.jpg';
|
||||
$theme-card-full-border-color: #d8dfea;
|
||||
|
||||
.theme-#{$theme-name} {
|
||||
background-color: $theme-bg-color;
|
||||
background-image: url($theme-bg-image);
|
||||
.dd-card-full {
|
||||
.dd-card-full__header {
|
||||
border-bottom: 1px solid $theme-card-full-border-color;
|
||||
}
|
||||
.dd-card-full__footer {
|
||||
border-top: 1px solid $theme-card-full-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
$theme-name: 'star'
|
||||
@@ -2,34 +2,26 @@
|
||||
|
||||
$theme-color: #EFF4F8;
|
||||
|
||||
$border-color: #d8dfea;
|
||||
// 默认主题
|
||||
.classic {
|
||||
// 主题公用
|
||||
.theme {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: $theme-color;
|
||||
background-image: url('/static/image/bg/star.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
.el-card {
|
||||
box-shadow: none;
|
||||
&:hover {
|
||||
// box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
|
||||
box-shadow: none;
|
||||
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
|
||||
}
|
||||
}
|
||||
.dd-card-full {
|
||||
position: absolute;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-top: 1px solid $border-color;
|
||||
border-left: 1px solid $border-color;
|
||||
border-right: 1px solid $border-color;
|
||||
background-color: #fff;
|
||||
background-color: #FFF;
|
||||
overflow: hidden;
|
||||
color: #303133;
|
||||
&:hover {
|
||||
// box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
|
||||
box-shadow: none;
|
||||
}
|
||||
.dd-card-full__header {
|
||||
@@ -38,7 +30,6 @@ $border-color: #d8dfea;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
padding: 18px 20px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.dd-card-full__body {
|
||||
@@ -55,7 +46,6 @@ $border-color: #d8dfea;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
padding: 18px 20px;
|
||||
border-top: 1px solid $border-color;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,12 +10,12 @@
|
||||
<slot name="header"></slot>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<!-- [card-full] 撑满 -->
|
||||
<card-full v-if="type === 'card-full'" :right="10" :bottom="0">
|
||||
<!-- [container-full] 撑满 -->
|
||||
<container-full v-if="type === 'card-full'" :right="10" :bottom="0">
|
||||
<slot v-if="$slots.header" name="header" slot="header"></slot>
|
||||
<slot></slot>
|
||||
<slot v-if="$slots.footer" name="footer" slot="footer"></slot>
|
||||
</card-full>
|
||||
</container-full>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -34,6 +34,9 @@ export default {
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
containerFull: () => import('../ContainerFull/index.vue')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -28,7 +28,7 @@ export default {
|
||||
return {
|
||||
menus: [
|
||||
{
|
||||
path: '/a',
|
||||
path: '/demo/components/container/card-full',
|
||||
title: 'menu-a',
|
||||
icon: 'plus'
|
||||
},
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-container class="layout-main" :class="theme">
|
||||
<el-container class="layout-main theme" :class="theme">
|
||||
<!-- 顶栏 -->
|
||||
<el-header>
|
||||
<div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
||||
@@ -37,7 +37,7 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
theme: 'classic',
|
||||
theme: 'theme-star',
|
||||
collapse: false,
|
||||
// [侧边栏宽度] 正常状态
|
||||
asideWidth: '200px',
|
||||
|
||||
Reference in New Issue
Block a user