Browse Source

fix: 修复列表内容过多时滚动条位置不对问题#2

master
Cmen 3 years ago
parent
commit
2597cd2479
  1. 42
      src/editor/Catalog/index.tsx
  2. 4
      src/editor/Catalog/style.less
  3. 46
      src/editor/index.less
  4. 1
      src/store/reducers/map/index.ts

42
src/editor/Catalog/index.tsx

@ -63,26 +63,28 @@ const Catalog = () => {
});
return (
<Collapse
defaultActiveKey={["1", "2", "3", "4", "5"]}
expandIconPosition="right"
>
<Panel header="矩形" key={1}>
<OverlayList overlays={rectangles} />
</Panel>
<Panel header="多边形" key={2}>
<OverlayList overlays={polygons} />
</Panel>
<Panel header="多段线" key={3}>
<OverlayList overlays={polylines} />
</Panel>
<Panel header="圆形" key={4}>
<OverlayList overlays={circles} />
</Panel>
<Panel header="标记点" key={5}>
<OverlayList overlays={points} />
</Panel>
</Collapse>
<div className="catalog-wrapper">
<Collapse
defaultActiveKey={["1", "2", "3", "4", "5"]}
expandIconPosition="right"
>
<Panel header="矩形" key={1}>
<OverlayList overlays={rectangles} />
</Panel>
<Panel header="多边形" key={2}>
<OverlayList overlays={polygons} />
</Panel>
<Panel header="多段线" key={3}>
<OverlayList overlays={polylines} />
</Panel>
<Panel header="圆形" key={4}>
<OverlayList overlays={circles} />
</Panel>
<Panel header="标记点" key={5}>
<OverlayList overlays={points} />
</Panel>
</Collapse>
</div>
);
};

4
src/editor/Catalog/style.less

@ -17,3 +17,7 @@
.overlay-item-selected {
background-color: #e5e6e7;
}
.catalog-wrapper{
height: 100%;
overflow-y: scroll;
}

46
src/editor/index.less

@ -19,3 +19,49 @@
#mapStage {
height: 100%;
}
// ----------------------------- scroll thumb ---------------------
body {
user-select: none;
/*---滚动条大小--*/
/*---滚动条默认显示样式--*/
/*---鼠标点击滚动条显示样式--*/
/*---滚动框背景样式--*/
/* 滚动条的滑轨背景颜色 */
/* 滑块颜色 */
/* 横向滚动条和纵向滚动条相交处尖角的颜色 */
}
body ::-webkit-scrollbar {
width: 8px;
height: 8px;
background: white;
border-left: 1px solid #e8e8e8;
}
body #node-editor-graph-root input {
color: #2b2b2b;
}
body ::-webkit-scrollbar-thumb {
border-width: 1px;
border-style: solid;
border-color: #e4e4e4;
border-radius: 6px;
background: #c9c9c9;
}
body ::-webkit-scrollbar-thumb:hover {
background-color: #c6c6c6;
}
body ::-webkit-scrollbar-track-piece {
border-radius: 0;
}
body ::-webkit-scrollbar-track {
background-color: #e4e4e4;
}
body ::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
}
body ::-webkit-scrollbar-corner {
background-color: #eee;
}
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */

1
src/store/reducers/map/index.ts

@ -34,7 +34,6 @@ export function finishEditOverlay(state = initState, payload: any) {
const { overlays } = draft.map;
const existed = overlays.find((overlay) => overlay.id === id);
if (existed) {
console.log(overlay);
overlays[overlays.indexOf(existed)] = {
...existed,
...overlay,

Loading…
Cancel
Save