Some style adjustments.

Author: gudaoxuri

src/components/list/fixed.vue

@@ -26,7 +26,7 @@ const setFixedColumn = (event: MouseEvent) => {
 export function setFixedColumnStyles(styles: any, colIdx: number, fixedColumnIdx: number, columnsConf: ListColumnConf[]) {
   if (fixedColumnIdx >= colIdx) {
     styles.position = 'sticky'
-    styles.zIndex = 99
+    styles.zIndex = 1099
     // TODO 判断left要小于视口宽度
     styles.left = columnsConf.slice(0, colIdx).reduce((count, col) => count + col.width, 0) + 'px'
     if (fixedColumnIdx == colIdx) {

src/components/list/list.vue

@@ -121,8 +121,6 @@ export function closeContextMenu(event: MouseEvent) {
 @import '../../assets/main.scss';
 @include b('list') {
   position: relative;
-  border-top: 1px solid var(--el-border-color);
-  border-left: 1px solid var(--el-border-color);
 
   @include m('size-mini') {
     padding: 1px;
@@ -147,10 +145,12 @@ export function closeContextMenu(event: MouseEvent) {
 
 @include b('list-header') {
   display: flex;
+  border-top: 1px solid var(--el-border-color);
+  border-right: 1px solid var(--el-border-color);
   align-items: center;
   position: sticky;
   top: 0;
-  z-index: 100;
+  z-index: 1100;
 
   @include b('list-cell') {
     display: flex;
@@ -183,14 +183,15 @@ export function closeContextMenu(event: MouseEvent) {
 
 @include b('list-row') {
   display: flex;
+  border-right: 1px solid var(--el-border-color);
 
   &:hover .iw-list-cell {
     background-color: var(--el-color-info-light-9);
   }
 }
 
 @include b('list-cell') {
-  border-right: 1px solid var(--el-border-color);
+  border-left: 1px solid var(--el-border-color);
   border-bottom: 1px solid var(--el-border-color);
   background-color: var(--el-bg-color);
 }

src/components/skeleton.vue

@@ -94,9 +94,9 @@ const listConf = List.initConf(props, tableBasicConf)
 onMounted(async () => {
   Array.prototype.forEach.call(document.getElementsByClassName('iw-tt'), function (ttEle) {
     let outHeight = ttEle.parentElement?.clientHeight
-    let layoutHeight = ttEle.getElementsByClassName('iw-tt-layouts')[0].clientHeight
+    let layoutHeight = ttEle.getElementsByClassName('iw-tt-layouts')[0].offsetHeight
     Array.prototype.forEach.call(ttEle.getElementsByClassName('iw-tt-shows'), function (showEle) {
-      let toolsHeight = showEle.getElementsByClassName('iw-tt-tools')[0].clientHeight
+      let toolsHeight = showEle.getElementsByClassName('iw-tt-tools')[0].offsetHeight
       showEle.getElementsByClassName('iw-tt-table')[0].style.height = outHeight - layoutHeight - toolsHeight + 'px'
     })
   })
@@ -137,6 +137,7 @@ onMounted(async () => {
 
 @include b('tt-layouts') {
   height: 40px;
+  border: 1px solid red;
 }
 
 @include b('tt-tools') {