Skip to content

Commit

Permalink
style: 移除多余css,修复侧边栏折叠样式bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@BoBoooooo
BoBoooooo committed Jan 19, 2021
1 parent cce0196 commit d356106
Show file tree
Hide file tree
Showing 6 changed files with 143 additions and 275 deletions.
28 changes: 16 additions & 12 deletions src/components/Breadcrumb/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,23 @@
-->
<template>
<div class="bread-container">
<el-breadcrumb class="app-breadcrumb"
separator=">">
<el-breadcrumb class="app-breadcrumb" separator=">">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList"
:key="item.path">
<SvgIcon :icon-class="item.meta.title"
class="icon" />
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1"
class="no-redirect">{{ item.meta.title }}</span>
<a v-else
@click.prevent="handleLink(item)">{{ item.meta.title }}</a>
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
<SvgIcon :icon-class="item.meta.title" v-if="!item.parent" class="icon" />
<span
v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
class="no-redirect"
:style="{
verticalAlign: item.parent ? '-4.5px' : '0px',
}"
>{{ item.meta.title }}</span
>
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
</div>

</template>

<script>
Expand Down Expand Up @@ -65,7 +66,10 @@ export default {
if (!name) {
return false;
}
return name.trim().toLocaleLowerCase().includes('dashboard'.toLocaleLowerCase());
return name
.trim()
.toLocaleLowerCase()
.includes('dashboard'.toLocaleLowerCase());
},
pathCompile(path) {
return path;
Expand Down
221 changes: 28 additions & 193 deletions src/styles/element-ui-override.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,109 +7,6 @@

$font-size: 15px;

.el-upload {
input[type='file'] {
display: none !important;
}
}

body .el-table::before {
z-index: inherit;
}
.el-upload__input {
display: none;
}

.cell {
.el-tag {
margin-right: 0px;
}
}

.small-padding {
.cell {
padding-left: 5px;
padding-right: 5px;
}
}

.fixed-width {
.el-button--mini {
padding: 7px 10px;
width: 60px;
}
}

.status-col {
.cell {
padding: 0 10px;
text-align: center;
.el-tag {
margin-right: 0px;
}
}
}

//暂时性解决dialog 问题 https://github.com/ElemeFE/element/issues/2461
.el-dialog {
transform: none;
left: 0;
position: relative;
margin: 0 auto;
}

//element ui upload
.upload-container {
.el-upload {
.el-upload-dragger {
width: 100%;
height: 200px;
}
}
}

//dropdown
.el-dropdown-menu {
padding: 5px 0;
border-radius: 2px;
a {
display: block;
}
}

// 动态表单中的宽度自适应
.el-form-item {
.el-date-editor {
width: 100%;
}
}

.el-input__inner:focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 51, 102, 0.27);
}

.el-form {
clear: both;
.el-select {
width: 100%;
}
}
.el-tooltip__popper {
max-width: 70%;
line-height: 1.4em;
}
.el-radio__label {
margin-left: 6px;
}


.el-submenu__title {
padding: 0 20px !important;
}
.el-button--text {
box-shadow: none !important;
}

// .el-loading-spinner .circular{
// display: none;
// }
Expand All @@ -124,26 +21,7 @@ body .el-table::before {
// .el-loading-text{
// display: none;
// }
.el-tab-pane > .page-container {
box-shadow: none !important;
padding:0;
}
.el-input__icon.el-icon-search {
color: #ff5722;
}
.cell.el-tooltip {
div {
overflow: hidden;
}
}
.cell {
button {
padding: 7px 10px !important;
}
span {
margin: 0 !important;
}
}

.dialogNoPadding {
.el-dialog__body {
padding: 10px 0 0 0;
Expand All @@ -168,103 +46,60 @@ body .el-table::before {
right: 12px !important;
}

.is-in-pagination {
input {
border-radius: 0 !important;
}
}
.el-pagination .el-select .el-input .el-input__inner {
border-radius: 0 !important;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
background: #f5f7f9 !important;
}
.el-table__body tr.hover-row > td,
.el-table__body tr.hover-row.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped > td,
.el-table__body tr.hover-row.el-table__row--striped.current-row > td {
background-color: #ebf7ff !important;
}
.el-tabs--border-card {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 6px;
}

.el-tabs--border-card .el-card__header {
border-radius: 6px;
}

// 覆盖message样式
.el-message__content {
color: #657180 !important;
font-size:14px!important;
font-size: 14px !important;
}
.el-message {
min-width:unset!important;
min-width: unset !important;
border-radius: 4px;
border: none;
padding:10px 16px!important;
padding: 10px 16px !important;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
background: white !important;
}

.is-disabled {
color: #606266;
}
.el-radio__input.is-disabled + span.el-radio__label {
color: #606266!important;
font-weight: normal!important;

.el-radio__input.is-disabled + span.el-radio__label {
color: #606266 !important;
font-weight: normal !important;
}
.el-checkbox-group.is-disabled + span.el-checkbox__label {
color: #606266!important;
font-weight: normal!important;
.el-checkbox-group.is-disabled + span.el-checkbox__label {
color: #606266 !important;
font-weight: normal !important;
}
.el-checkbox__input.is-disabled + span.el-checkbox__label{
color: #606266!important;
font-weight: normal!important;
.el-checkbox__input.is-disabled + span.el-checkbox__label {
color: #606266 !important;
font-weight: normal !important;
}
.el-cascader__label{
color: #606266!important;
font-weight: normal!important;
.el-cascader__label {
color: #606266 !important;
font-weight: normal !important;
}
.el-checkbox__input.is-disabled.is-checked{
.el-checkbox__input.is-disabled.is-checked {
display: none !important;
}
.el-checkbox.is-disabled {
.el-checkbox.is-disabled {
display: none !important;
}
.el-checkbox.is-disabled.is-checked {
.el-checkbox.is-disabled.is-checked {
display: inline-block !important;
padding:0px;
padding: 0px;
}
.is-disabled>.el-input__suffix{
.is-disabled > .el-input__suffix {
display: none !important;
}
.el-radio__input.is-disabled.is-checked {
.el-radio__input.is-disabled.is-checked {
display: none !important;
}
.el-checkbox-group{
min-height:32px;
}
.is-disabled .el-checkbox__label,.el-radio__label{
padding-left:0px!important;
}

.el-date-editor.el-input{
width:100%!important;
}
.el-badge__content.is-dot{
width:6px!important;
height:6px!important;
}
.el-badge__content{
border:none!important;
.el-checkbox-group {
min-height: 32px;
}
.el-transfer-panel__item.el-checkbox{
display: block;
.is-disabled .el-checkbox__label,
.el-radio__label {
padding-left: 0px !important;
}

.el-radio-group {
padding-left: 10px;
}
2 changes: 1 addition & 1 deletion src/styles/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,6 @@ export default Object.freeze({
sidebar: {
backgroundColor: '#282c34', // 侧边栏菜单颜色
textColor: '#fff', // 侧边栏字体颜色
activeTextColor: '#616dad', // 侧边栏高亮文字颜色
activeTextColor: '#cddc39', // 侧边栏高亮文字颜色
},
});
27 changes: 13 additions & 14 deletions src/views/dashboard/Dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,30 +7,29 @@

<template>
<div class="dashboard-container">
<el-card shadow="never">
你好 {{realname}}
</el-card>
<el-row :gutter="15">
<el-col :span="12">
<el-card shadow="never"> 你好 {{ realname }} </el-card>
</el-col>
<el-col :span="12">
<el-card shadow="never"> 增删改查示例 </el-card>
</el-col>
</el-row>
<el-card class="mt-15">
<div slot="header"
class="clearfix">
<div slot="header" class="clearfix">
<span>我的开源项目</span>
</div>
<div class="demo-container">
<div v-for="(o) in 9"
:key="o"
class="item">
<div v-for="o in 9" :key="o" class="item">
<el-card :body-style="{ padding: '0px' }">
<img src="http://img1.mukewang.com/szimg/5fd343d9093a7d0e05400304.png"
class="image">
<img src="http://img1.mukewang.com/szimg/5fd343d9093a7d0e05400304.png" class="image" />
<div style="padding: 14px;">
<span>开源项目</span>
<span>开源项目 {{o}}</span>
</div>
</el-card>

</div>
</div>
</el-card>

</div>
</template>

Expand All @@ -52,7 +51,7 @@ export default class Dashboard extends Vue {
.demo-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
justify-content: flex-start;
.item {
margin: 15px;
.image {
Expand Down
Loading

0 comments on commit d356106

Please sign in to comment.