- 选中后的阴影待调整
- 字体待调整
<template>
<div class="card" :style=" show ? 'width:240px' : ' width:140px'">
<div class="toolbar" @click="showToolBar">
<div :class="['icon', show ? ' el-icon-d-arrow-right' :'el-icon-d-arrow-left']"></div>
<div class="toolbar-name">调查分析工具栏</div>
</div>
<div class="toolbar-items" v-show="show">
<el-scrollbar>
<el-button plain size="mini" v-for="(i,index) in count" :key="index">{{ i.label }}</el-button>
</el-scrollbar>
</div>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
count: [
{ label: "账户统计视图" },
{ label: "zhang" },
{ label: "zhang" },
{ label: "zhang" },
{ label: "zhang" },
{ label: "客户集团账户 / 服务 / 合同信息" },
{ label: "zhang" },
{ label: "zhang" },
{ label: "zhang" },
{ label: "zhang" },
{ label: "zhang" },
{ label: "zhang" },
{ label: "zhang" }
]
};
},
methods: {
showToolBar() {
this.show = !this.show;
}
}
};
</script>
<style lang='less' scoped >
.card {
box-shadow: 0px 0.1px 3px 0.1px #999;
width: 140px;
// transition: width 0.4s;
border-radius: 4px;
.toolbar {
display: flex;
font-size: 14px;
line-height: 25px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
.icon {
color: #fff;
background-color: rgb(64, 80, 92);
line-height: 25px;
border-radius: 4px 0 0 4px;
}
.toolbar-name {
margin-left: 10px;
}
:hover {
cursor: pointer;
}
}
.toolbar-items {
height: 180px;
padding: 10px 0 10px 24px;
font-size: 12px;
/deep/ .el-scrollbar {
height: 100%;
.el-scrollbar__wrap {
// box-sizing: border-box;
overflow-x: hidden;
}
.el-button {
font-size: 12px;
display: flex;
justify-content: flex-start;
border-radius: 14px;
padding: 4px;
margin: 0;
margin-bottom: 4px;
}
.el-button:hover {
color: #f16a00;
border-color: rgba(241, 106, 0, 0.1);
background-color: rgba(241, 106, 0, 0.1);
}
.el-button:focus {
background: linear-gradient(to right, #ff882b, #f16a00);
color: #fff;
font-size: 12px;
border-color: rgba(241, 106, 0, 0.1);
box-shadow: 0 2px 4px #f27300;
}
.el-scrollbar__thumb {
background: #888;
}
.el-scrollbar__bar.is-vertical {
width: 3px;
top: 2px;
}
}
}
}
</style>