diff --git a/packages/component/src/css/index.css b/packages/component/src/css/index.css index 987a8ddbfc..337ce3a06a 100644 --- a/packages/component/src/css/index.css +++ b/packages/component/src/css/index.css @@ -293,18 +293,19 @@ flex-wrap: wrap; align-items: flex-start; box-sizing: content-box; - max-width: 420px; + max-width: 460px; max-height: 400px; margin: 12px 0 0 12px; - overflow: auto; + overflow-x: hidden; + overflow-y: auto; } .l7-select-control--image .l7-select-control-item { position: relative; display: flex; + flex: 0 0 calc((100% - (12px + 9px) * 2) / 3); flex-direction: column; justify-content: center; box-sizing: content-box; - width: 408px / 3 - 12px; margin-right: 12px; margin-bottom: 12px; overflow: hidden; diff --git a/packages/component/src/css/select.less b/packages/component/src/css/select.less index b0f37bfb2e..1a03286e00 100644 --- a/packages/component/src/css/select.less +++ b/packages/component/src/css/select.less @@ -23,23 +23,25 @@ } .l7-select-control--image { + @select-control-split: 12px; display: flex; flex-wrap: wrap; align-items: flex-start; box-sizing: content-box; - max-width: @l7-select-control-image-width; + max-width: 460px; max-height: 400px; - margin: 12px 0 0 12px; - overflow: auto; + margin: @select-control-split 0 0 @select-control-split; + overflow-x: hidden; + overflow-y: auto; .l7-select-control-item { position: relative; display: flex; + flex: 0 0 calc((100% - (@select-control-split + 9px) * 2) / 3); flex-direction: column; justify-content: center; box-sizing: content-box; - width: (@l7-select-control-image-width - 12px) / 3 - 12px; - margin-right: 12px; - margin-bottom: 12px; + margin-right: @select-control-split; + margin-bottom: @select-control-split; overflow: hidden; font-size: 12px; border: 1px solid @l7-popper-control-bg-color; diff --git a/packages/component/src/css/variables.less b/packages/component/src/css/variables.less index 50ec19d7ba..b1c5d58a68 100644 --- a/packages/component/src/css/variables.less +++ b/packages/component/src/css/variables.less @@ -24,8 +24,6 @@ // SelectControl @l7-select-control-active-color: #0370fe; -@l7-select-control-image-width: 420px; - @position-list: top, right, bottom, left; @l7-control-z-index: 999;