| | |
|---|
| | | background-size: 100% 100%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // .column { |
|---|
| | | // overflow-y: hidden; |
|---|
| | | // display: flex; |
|---|
| | | // width: 100%; |
|---|
| | | // height: 100%; |
|---|
| | | // } |
|---|
| | | // .column-left { |
|---|
| | | // height: 100%; |
|---|
| | | // padding-bottom: 20px; |
|---|
| | | // box-sizing: border-box; |
|---|
| | | // // height: inherit; |
|---|
| | | // background-color: #fff; |
|---|
| | | // position: relative; |
|---|
| | | // //float: left; |
|---|
| | | // } |
|---|
| | | // .column-right { |
|---|
| | | // position: relative; |
|---|
| | | // flex: 1; |
|---|
| | | // background-color: #fff; |
|---|
| | | // box-sizing: border-box; |
|---|
| | | // overflow-y: hidden; |
|---|
| | | // height: 100%; |
|---|
| | | // min-width: 1602px; |
|---|
| | | // } |
|---|
| | | // .resize-save { |
|---|
| | | // position: absolute; |
|---|
| | | // top: 0; |
|---|
| | | // right: 5px; |
|---|
| | | // bottom: 0; |
|---|
| | | // left: 0; |
|---|
| | | // padding: 14px; |
|---|
| | | // overflow-x: hidden; |
|---|
| | | // overflow-y: hidden; |
|---|
| | | // } |
|---|
| | | // .resize-bar { |
|---|
| | | // width: 310px; |
|---|
| | | // height: inherit; |
|---|
| | | // resize: horizontal; |
|---|
| | | // cursor: ew-resize; |
|---|
| | | // opacity: 0; |
|---|
| | | // overflow: scroll; |
|---|
| | | // max-width: 500px; //设定最大拉伸长度 |
|---|
| | | // min-width: 33px; //设定最小宽度 |
|---|
| | | // } |
|---|
| | | // /* 拖拽线 */ |
|---|
| | | // .resize-line { |
|---|
| | | // position: absolute; |
|---|
| | | // right: 0; |
|---|
| | | // top: 0; |
|---|
| | | // bottom: 0; |
|---|
| | | // border-right: 2px solid #efefef; |
|---|
| | | // border-left: 1px solid #e0e0e0; |
|---|
| | | // pointer-events: none; |
|---|
| | | // //cursor: ew-resize; |
|---|
| | | // } |
|---|
| | | // .resize-bar:hover ~ .resize-line, |
|---|
| | | // .resize-bar:active ~ .resize-line { |
|---|
| | | // border-left: 1px dashed skyblue; |
|---|
| | | // } |
|---|
| | | // .resize-bar::-webkit-scrollbar { |
|---|
| | | // width: 200px; |
|---|
| | | // height: inherit; |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // /* Firefox只有下面一小块区域可以拉伸 */ |
|---|
| | | // @supports (-moz-user-select: none) { |
|---|
| | | // .resize-bar:hover ~ .resize-line, |
|---|
| | | // .resize-bar:active ~ .resize-line { |
|---|
| | | // border-left: 1px solid #bbb; |
|---|
| | | // } |
|---|
| | | // .resize-bar:hover ~ .resize-line::after, |
|---|
| | | // .resize-bar:active ~ .resize-line::after { |
|---|
| | | // content: ""; |
|---|
| | | // position: absolute; |
|---|
| | | // width: 16px; |
|---|
| | | // height: 16px; |
|---|
| | | // bottom: 0; |
|---|
| | | // right: -8px; |
|---|
| | | // // background: url(./resize.svg); |
|---|
| | | // background-size: 100% 100%; |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | </style> |
|---|
