样式出界如图所示,当前页面的样式如下。
<style lang="scss">
.board {
width: 1000px;
margin-left: 20px;
display: flex;
overflow-x: auto;
justify-content: space-around;
flex-direction: row;
align-items: flex-start;
}
.kanban {
&.todo {
.board-column-header {
background: #4A9FF9;
}
}
&.working {
.board-column-header {
background: #f9944a;
}
}
&.done {
.board-column-header {
background: #2ac06d;
}
}
}.board-column {
min-width: 300px;
min-height: 100px;
height: auto;
overflow-x: auto;
background: #f0f0f0;
border-radius: 3px;
.board-column-header {
.el-input{
.el-input__inner {
color: white;
border: none;
background: transparent;
}
}
height: 50px;
line-height: 50px;
overflow: hidden;
padding: 0 20px;
margin: 0 3% 0 0;
text-align: center;
background: #333;
color: #fff;
border-radius: 3px 3px 0 0;
}
.board-column-content {
height: auto;
overflow: hidden;
border: 10px solid transparent;
min-height: 60px;
display: flex;
overflow-y: auto;
justify-content: flex-start;
flex-direction: column;
align-items: center;
.board-item {
.el-input{
.el-input__inner {
border: none;
}
}
.el-textarea{
.el-textarea__inner {
border: none;
}
}
cursor: pointer;
width: 100%;
height: 64px;
margin: 5px 0;
background-color: #fff;
text-align: left;
line-height: 54px;
padding: 5px 10px;
box-sizing: border-box;
box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
}
}
}
</style>