<style scoped lang="scss">
ul {
padding: 0;
margin: 0;
max-height: 100%;
overflow-y: auto;
li {
cursor: pointer;
text-align: center;
padding: 5px;
&.active,&:hover {
background: #e4e8f1;
color: #48576a;
}
}
}

.manyAreaSelect {
position: relative;
z-index: 2005;
.item {
border: 1px solid #d1dbe5;
background: #fff;
Box-shadow: 0 2px 4px rgba(0,.12),0 0 6px rgba(0,.04);
display: inline-block;
vertical-align: middle;
min-width: 180px;
Box-sizing: border-Box;
position: relative;
height: 100%;
min-height: 260px;
}
.item-title {
height: 36px;
line-height: 36px;
background: #fbfdff;
margin: 0;
border-bottom: 1px solid #d1dbe5;
Box-sizing: border-Box;
color: #1f2d3d;
text-align: center;
}
.trangle {
background: transparent;
display: inline-block;
vertical-align: middle;
width: 40px;
Box-sizing: border-Box;
height: 100%;
position: relative;
.trangle-wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.left,.right {
margin: 10px 5px;
}
;
}

.item-content {
font-size: 13px;
height: 190px;
padding: 8px 2px;
}
.item-footer {
padding: 5px 0;
height: 40px;
text-align: center;
}
}

.selectedContent {
li {
text-align: left;
padding-left: 25px;
}
}

.button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #c4c4c4;
color: #1f2d3d;
margin: 0;
border-radius: 4px;
padding: 4px;
font-size: 12px;
border-radius: 4px;
-webkit-appearance: button;
outline: none;
&.success {
background: #42d885;
border-color: #42d885;
color: #fff;
}

&:disabled {
color: #bfcbd9;
cursor: not-allowed;
background-image: none;
background-color: #eef1f6;
border-color: #d1dbe5;
}
}