表格兼容平板/pc

src/views/sheetList/components/BalanceSheet.vue

@@ -11,7 +11,7 @@
   const tableHeight = ref(0)
   const disabled = ref(true)
   const cellRef = ref([])
-  const tableRef = ref(null);
+  const rowTable = ref(null);
   const tableData = reactive(props.TableInfo.TableData.Data);
   const freezeData = reactive(props.TableInfo.ExtraConfig.TableFreeze);
 
@@ -37,16 +37,6 @@
     return Math.min(props.TableInfo.ExtraConfig.TableFreeze.FreezeStartCol, props.TableInfo.ExtraConfig.TableFreeze.FreezeEndCol)
   });
 
-  // watch(
-  //   () => props.TableInfo.TableData.Data,  // 假设 config.data 是 props.TableInfo 下的一个属性
-  //   (newVal) => {
-  //     nextTick(() => {
-  //       tableHeight.value = tableRef.value ? tableRef.value.offsetHeight : 35;
-  //     });
-  //   },
-  //   { deep: true }
-  // );
-
   //手机端pc端不同样式
   const dynamicSty = computed(()=>{
     return isMobile() ? 'mobile-sty' : 'pc-sty';
@@ -100,7 +90,7 @@
   }
 
   onMounted(() => {
-    tableHeight.value = tableRef.value ? tableRef.value.offsetHeight : 35;
+    tableHeight.value = rowTable.value ? rowTable.value[0].offsetHeight : 35;
   })
 
   // 设置背景色及字体颜色
@@ -250,7 +240,7 @@ function isNumberVal(value) {
   }
    // 获取某一列的宽度
   function getColumnHeaderWidth (index) {
-    return cellRef.value && cellRef.value ? cellRef.value.offsetWidth : 104
+    return cellRef.value && cellRef.value[index] ? cellRef.value[index].offsetWidth : 104
   }
 </script>
 
@@ -268,10 +258,11 @@ function isNumberVal(value) {
         <thead>
           <tr ref="rowTable">
              <!-- 行头 -->
-             <th class="th-tg sm"  style="width:36px" ref="cellRef"></th>
+             <th class="th-tg sm"  style="width:36px"></th>
 
             <!-- 列头 -->
             <th 
+              ref="cellRef"
               :style="TableInfo.TableData.Data[0][index].ShowStyle?getShowCss(TableInfo.TableData.Data[0][index].ShowStyle,'header'):{}"
               v-for="(item, index) in columnHeader"
               :key="index"
@@ -361,255 +352,221 @@ function isNumberVal(value) {
 </template>
 
 <style lang='scss' scoped>
+// sheet-show-wrapper 相关样式
 .sheet-show-wrapper {
   max-width: 1200px;
   overflow: hidden;
   position: relative;
   margin: 0 auto;
   background: #fff;
-  .tool{
-    // text-align: right;
+
+  .tool {
     margin-top: 5px;
-    span{
-        cursor: pointer;
+    span {
+      cursor: pointer;
     }
   }
-  .sheet-bottom{
+
+  .sheet-bottom {
     display: flex;
     align-items: center;
     justify-content: space-between;
     white-space: nowrap;
     padding: 0 10px;
-    .sheet-source{
+
+    .sheet-source {
       width: 30%;
       min-width: 150px;
       overflow: hidden;
       text-overflow: ellipsis;
     }
-    .right-btns {
-      display: flex;
-      align-items: center;
-      gap:15px;
-      color: #666;
-    }
+
   }
 }
-</style>
-<style scoped lang="scss">
-.table td,th {
-  width: 104px;
-  min-width: 104px;
-  height: 35px;
-  background: #fff;
-  text-align: center;
-  word-break: break-all;
-  border: none;
-  outline-color: #dcdfe6;
-  outline-style: solid;
-  outline-width: 1px;
-  word-wrap: break-word;
-  word-break: break-all;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: relative;
 
-  &.td-chose::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    content: "";
-    display: block;
-    outline: 0;
-    border: 2px solid #0033FF;
-    box-shadow: 0 0 5px rgba(73, 177, 249, .5)
-  }
-  // &.td-col-select::after {
-  //   position: absolute;
-  //   top: 0;
-  //   left: 0;
-  //   right: 0;
-  //   bottom: 0;
-  //   content: "";
-  //   display: block;
-  //   outline: 0;
-  //   border: 1px solid rgb(24, 173, 24);
-  //   border-bottom: none;
-  //   border-top: none;
-  // }
-  // &.td-row-select::after {
-  //   position: absolute;
-  //   top: 0;
-  //   left: 0;
-  //   right: 0;
-  //   bottom: 0;
-  //   content: "";
-  //   display: block;
-  //   outline: 0;
-  //   border: 1px solid rgb(24, 173, 24);
-  //   border-left: none;
-  //   border-right: none;
-  // }
-  &.insert {
-    background: #FFEFDD;
+// 表格相关样式
+.table {
+  width: 100%;
+  font-size: 14px;
+  color: #333;
+
+  td, th {
+    width: 104px;
+    min-width: 104px;
+    height: 35px;
+    background: #fff;
+    text-align: center;
+    word-break: break-all;
+    border: none;
+    outline-color: #dcdfe6;
+    outline-style: solid;
+    outline-width: 1px;
+    word-wrap: break-word;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+
+    &:first-child {
+      border-left: 1px solid #dcdfe6;
+    }
+    &.insert {
+      background: #FFEFDD;
+    }
+
+
+    &.fix-col {
+      position: sticky;
+      left: 0;
+      z-index: 98; // 表格右键操作弹窗为99
+    }
   }
-  .edbname-td {
+
+  .th-tg {
+    background: #EBEEF5;
+
     &:hover {
-      text-decoration: underline;
+      cursor: pointer;
+      background: #ddd;
     }
-  }
-  &.fix-col {
-    position:sticky;
-    left: 0;
-    z-index: 98; // 表格右键操作弹窗为99
-  }
-}
 
-.th-tg {
-  background: #EBEEF5;
-  &:hover {
-    cursor: pointer;
-    background: #ddd;
-    /* border: 2px solid #409eff; */
-  }
-  &.sm {
-    width: 36px;
-    min-width: 36px;
-    max-width: 36px;
+    &.sm {
+      width: 36px;
+      min-width: 36px;
+      max-width: 36px;
+    }
   }
+
 }
-//整行选中
+
+// 表格行（tr）相关样式
 tr {
-  // position: relative;
-  // &.choose-all::after {
-  //   position: absolute;
-  //   top: 0;
-  //   left: 0;
-  //   right: 0;
-  //   bottom: 0;
-  //   content: "";
-  //   display: block;
-  //   outline: 0;
-  //   border: 2px solid #5897fb;
-  //   box-shadow: 0 0 5px rgba(73, 177, 249, .5)
-  // }
   &.fix {
-    position:sticky;
+    position: sticky;
     top: 0;
     z-index: 98; // 表格右键操作弹窗为99
   }
-} 
 
-.el-icon-sort {
-  color: #409eff;
-  cursor: pointer;
-  font-size: 16px;
+  // 可根据需要添加更多tr的样式，例如整行选中效果等
 }
 
-</style>
-<style lang='scss' scoped>
+// 滚动条样式
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
+
 ::-webkit-scrollbar-track {
   background: rgb(239, 239, 239);
   border-radius: 2px;
 }
+
 ::-webkit-scrollbar-thumb {
   background: #ccc;
   border-radius: 10px;
+  &:hover {
+    background: #888;
+  }
 }
-::-webkit-scrollbar-thumb:hover {
-  background: #888;
-}
+
 ::-webkit-scrollbar-corner {
   background: #666;
 }
+
+// table-wrapper 样式
 .table-wrapper {
   max-width: calc(100vw - 20px);
   max-height: calc(100vh - 400px);
   margin: 0 auto;
-  // margin-right: -5px;
   overflow: auto;
   -webkit-overflow-scrolling: touch; /* ios滚动条 */
 }
-table {
-  width: 100%;
-  font-size: 14px;
-  color: #333;
-  td,
-  th {
-    // min-width: 120px;
-    word-break: break-all;
-    word-wrap: break-word;
-    line-height: 1.2em;
-    border: 1px solid #dcdfe6;
-    // height: 40px;
-    text-align: center;
-    border-left: none;
-    border-top: none;
-    &:first-child {
-			border-left: 1px solid #dcdfe6;
-		}
-  }
-
-  .data-cell{
-    color: #333;
-    &.one-bg {
-      background-color: #EFEEF1;
-    }
-    &.two-bg {
-      background-color: #fff;
-    }
-  }
-
-  .thead-sticky {
-    position: sticky;
-    top: 0;
-  }
-
-  .head-column {
-    background-color: #505B78;
-    color: #fff;
-  }
-  .split-word {
-    span { display: inline; }
-  }
-}
-
-.no-water{
-  td,
-  th {
-    background-color: #fff;
-  }
-  .head-column {
-    background-color: #505B78;
-    color: #fff;
-  }
-}
 
+// PC端表格样式
 .pc-sty table {
   table-layout: auto;
-  td,th {
+
+  td, th {
     width: auto;
     height: auto;
     padding: 0.4em 0;
   }
 }
 
+// 移动端表格样式
 .mobile-sty table {
   table-layout: auto;
-  td,th {
+
+  td, th {
     min-width: 120px;
     height: 40px;
   }
 }
-.background-watermark{
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: 100%;
+
+@media screen and (min-width: 650px) {
+  // 滚动条样式
+  ::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+  ::-webkit-scrollbar-track {
+    border-radius: 1px;
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+  }
+  
+  // 表格相关样式
+  .sheet-show-wrapper {
+    .table-wrapper {
+      max-height: calc(100vh - 220px);
+    }
+
+    .tool {
+      margin-top: 3px;
+      span {
+        cursor: pointer;
+      }
+    }
+
+    .sheet-bottom {
+      padding: 0 5px;
+
+      .sheet-source {
+        width: 15%;
+        min-width: 75px;
+      }
+    }
+  }
+
+  // 表格相关样式
+  .table {
+    font-size: 7px;
+    td, th {
+      width: 52px;
+      min-width: 52px;
+      height: 17px;
+      outline-width: 1px;
+    }
+
+    .th-tg {
+      &.sm {
+        width: 18px;
+        min-width: 18px;
+        max-width: 18px;
+      }
+    }
+
+  }
+
+  // 移动端表格样式
+  .mobile-sty table {
+    table-layout: auto;
+
+    td, th {
+      min-width: 60px;
+      height: 20px;
+    }
+  }
 }
 </style>

src/views/sheetList/components/MixedSheet.vue

@@ -10,8 +10,8 @@
 
   const tableHeight = ref(0)
   const disabled = ref(true)
-  const cellRef = ref([])
-  const tableRef = ref(null);
+  const cellRef = ref(null)
+  const rowTable = ref(null);
   const tableData = reactive(props.TableInfo.TableData.Data);
   const freezeData = reactive(props.TableInfo.ExtraConfig.TableFreeze);
 
@@ -37,16 +37,6 @@
     return Math.min(props.TableInfo.ExtraConfig.TableFreeze.FreezeStartCol, props.TableInfo.ExtraConfig.TableFreeze.FreezeEndCol)
   });
 
-  // watch(
-  //   () => props.TableInfo.TableData.Data,  // 假设 config.data 是 props.TableInfo 下的一个属性
-  //   (newVal) => {
-  //     nextTick(() => {
-  //       tableHeight.value = tableRef.value ? tableRef.value.offsetHeight : 35;
-  //     });
-  //   },
-  //   { deep: true }
-  // );
-
   //手机端pc端不同样式
   const dynamicSty = computed(()=>{
     return isMobile() ? 'mobile-sty' : 'pc-sty';
@@ -100,7 +90,7 @@
   }
 
   onMounted(() => {
-    tableHeight.value = tableRef.value ? tableRef.value.offsetHeight : 35;
+    tableHeight.value = rowTable.value ? rowTable.value[0].offsetHeight : 35;
   })
 
   // 设置背景色及字体颜色
@@ -250,7 +240,12 @@ function isNumberVal(value) {
   }
    // 获取某一列的宽度
   function getColumnHeaderWidth (index) {
-    return cellRef.value && cellRef.value ? cellRef.value.offsetWidth : 104
+    if (!cellRef.value) return
+    console.log(index);
+    console.log(cellRef.value);
+    console.log(cellRef.value[index].offsetWidth);
+    
+    return cellRef.value && cellRef.value[index] ? cellRef.value[index].offsetWidth : 104
   }
 </script>
 
@@ -268,10 +263,11 @@ function isNumberVal(value) {
         <thead>
           <tr ref="rowTable">
             <!-- 行头 -->
-            <th class="th-tg sm"  style="width:36px" ref="cellRef"></th>
+            <th class="th-tg sm"  style="width:36px"></th>
 
             <!-- 列头 -->
             <th 
+              ref="cellRef"
               :style="TableInfo.TableData.Data[0][index].ShowStyle?getShowCss(TableInfo.TableData.Data[0][index].ShowStyle,'header'):{}"
               v-for="(item, index) in columnHeader"
               :key="index"
@@ -361,255 +357,243 @@ function isNumberVal(value) {
 </template>
 
 <style lang='scss' scoped>
+// sheet-show-wrapper 相关样式
 .sheet-show-wrapper {
   max-width: 1200px;
   overflow: hidden;
   position: relative;
   margin: 0 auto;
   background: #fff;
-  .tool{
-    // text-align: right;
+
+  .tool {
     margin-top: 5px;
-    span{
-        cursor: pointer;
+    span {
+      cursor: pointer;
     }
   }
-  .sheet-bottom{
+
+  .sheet-bottom {
     display: flex;
     align-items: center;
     justify-content: space-between;
     white-space: nowrap;
     padding: 0 10px;
-    .sheet-source{
+
+    .sheet-source {
       width: 30%;
       min-width: 150px;
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
     .right-btns {
       display: flex;
       align-items: center;
-      gap:15px;
+      gap: 15px;
       color: #666;
     }
   }
 }
-</style>
-<style scoped lang="scss">
-.table td,th {
-  width: 104px;
-  min-width: 104px;
-  height: 35px;
-  background: #fff;
-  text-align: center;
-  word-break: break-all;
-  border: none;
-  outline-color: #dcdfe6;
-  outline-style: solid;
-  outline-width: 1px;
-  word-wrap: break-word;
-  word-break: break-all;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: relative;
 
-  &.td-chose::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    content: "";
-    display: block;
-    outline: 0;
-    border: 2px solid #0033FF;
-    box-shadow: 0 0 5px rgba(73, 177, 249, .5)
-  }
-  // &.td-col-select::after {
-  //   position: absolute;
-  //   top: 0;
-  //   left: 0;
-  //   right: 0;
-  //   bottom: 0;
-  //   content: "";
-  //   display: block;
-  //   outline: 0;
-  //   border: 1px solid rgb(24, 173, 24);
-  //   border-bottom: none;
-  //   border-top: none;
-  // }
-  // &.td-row-select::after {
-  //   position: absolute;
-  //   top: 0;
-  //   left: 0;
-  //   right: 0;
-  //   bottom: 0;
-  //   content: "";
-  //   display: block;
-  //   outline: 0;
-  //   border: 1px solid rgb(24, 173, 24);
-  //   border-left: none;
-  //   border-right: none;
-  // }
-  &.insert {
-    background: #FFEFDD;
+// 表格相关样式
+.table {
+  width: 100%;
+  font-size: 14px;
+  color: #333;
+
+  td, th {
+    width: 104px;
+    min-width: 104px;
+    height: 35px;
+    background: #fff;
+    text-align: center;
+    word-break: break-all;
+    border: none;
+    outline-color: #dcdfe6;
+    outline-style: solid;
+    outline-width: 1px;
+    word-wrap: break-word;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+
+    &:first-child {
+      border-left: 1px solid #dcdfe6;
+    }
+    &.insert {
+      background: #FFEFDD;
+    }
+
+
+    &.fix-col {
+      position: sticky;
+      left: 0;
+      z-index: 98; // 表格右键操作弹窗为99
+    }
   }
-  .edbname-td {
+
+  .th-tg {
+    background: #EBEEF5;
+
     &:hover {
-      text-decoration: underline;
+      cursor: pointer;
+      background: #ddd;
     }
-  }
-  &.fix-col {
-    position:sticky;
-    left: 0;
-    z-index: 98; // 表格右键操作弹窗为99
-  }
-}
 
-.th-tg {
-  background: #EBEEF5;
-  &:hover {
-    cursor: pointer;
-    background: #ddd;
-    /* border: 2px solid #409eff; */
-  }
-  &.sm {
-    width: 36px;
-    min-width: 36px;
-    max-width: 36px;
+    &.sm {
+      width: 36px;
+      min-width: 36px;
+      max-width: 36px;
+    }
   }
+
 }
-//整行选中
+
+// 表格行（tr）相关样式
 tr {
-  // position: relative;
-  // &.choose-all::after {
-  //   position: absolute;
-  //   top: 0;
-  //   left: 0;
-  //   right: 0;
-  //   bottom: 0;
-  //   content: "";
-  //   display: block;
-  //   outline: 0;
-  //   border: 2px solid #5897fb;
-  //   box-shadow: 0 0 5px rgba(73, 177, 249, .5)
-  // }
   &.fix {
-    position:sticky;
+    position: sticky;
     top: 0;
     z-index: 98; // 表格右键操作弹窗为99
   }
-} 
 
-.el-icon-sort {
-  color: #409eff;
-  cursor: pointer;
-  font-size: 16px;
+  // 可根据需要添加更多tr的样式，例如整行选中效果等
 }
 
-</style>
-<style lang='scss' scoped>
+// 滚动条样式
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
+
 ::-webkit-scrollbar-track {
   background: rgb(239, 239, 239);
   border-radius: 2px;
 }
+
 ::-webkit-scrollbar-thumb {
   background: #ccc;
   border-radius: 10px;
+
+  &:hover {
+    background: #888;
+  }
 }
-::-webkit-scrollbar-thumb:hover {
-  background: #888;
-}
+
 ::-webkit-scrollbar-corner {
   background: #666;
 }
+
+// table-wrapper 样式
 .table-wrapper {
   max-width: calc(100vw - 20px);
   max-height: calc(100vh - 400px);
   margin: 0 auto;
-  // margin-right: -5px;
   overflow: auto;
   -webkit-overflow-scrolling: touch; /* ios滚动条 */
 }
-table {
-  width: 100%;
-  font-size: 14px;
-  color: #333;
-  td,
-  th {
-    // min-width: 120px;
-    word-break: break-all;
-    word-wrap: break-word;
-    line-height: 1.2em;
-    border: 1px solid #dcdfe6;
-    // height: 40px;
-    text-align: center;
-    border-left: none;
-    border-top: none;
-    &:first-child {
-			border-left: 1px solid #dcdfe6;
-		}
-  }
-
-  .data-cell{
-    color: #333;
-    &.one-bg {
-      background-color: #EFEEF1;
-    }
-    &.two-bg {
-      background-color: #fff;
-    }
-  }
-
-  .thead-sticky {
-    position: sticky;
-    top: 0;
-  }
-
-  .head-column {
-    background-color: #505B78;
-    color: #fff;
-  }
-  .split-word {
-    span { display: inline; }
-  }
-}
-
-.no-water{
-  td,
-  th {
-    background-color: #fff;
-  }
-  .head-column {
-    background-color: #505B78;
-    color: #fff;
-  }
-}
 
+// PC端表格样式
 .pc-sty table {
   table-layout: auto;
-  td,th {
+
+  td, th {
     width: auto;
     height: auto;
     padding: 0.4em 0;
   }
 }
 
+// 移动端表格样式
 .mobile-sty table {
   table-layout: auto;
-  td,th {
+
+  td, th {
     min-width: 120px;
     height: 40px;
   }
 }
-.background-watermark{
+
+// 背景水印样式
+.background-watermark {
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 100%;
 }
+@media screen and (min-width: 650px) {
+  // 滚动条样式
+  ::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+  ::-webkit-scrollbar-track {
+    border-radius: 1px;
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+  }
+  
+  // 表格相关样式
+  .sheet-show-wrapper {
+    .table-wrapper {
+      max-height: calc(100vh - 220px);
+    }
+
+    .tool {
+      margin-top: 3px;
+      span {
+        cursor: pointer;
+      }
+    }
+
+    .sheet-bottom {
+      padding: 0 5px;
+
+      .sheet-source {
+        width: 15%;
+        min-width: 75px;
+      }
+    }
+  }
+
+  // 表格相关样式
+  .table {
+    font-size: 7px;
+    td, th {
+      width: 52px;
+      min-width: 52px;
+      height: 17px;
+      outline-width: 1px;
+    }
+
+    .th-tg {
+      &.sm {
+        width: 18px;
+        min-width: 18px;
+        max-width: 18px;
+      }
+    }
+
+  }
+  // PC端表格样式
+  .pc-sty table {
+    table-layout: auto;
+
+    td, th {
+      width: auto;
+      height: auto;
+      padding: 0.2em 0;
+    }
+  }
+  // 移动端表格样式
+  .mobile-sty table {
+    table-layout: auto;
+
+    td, th {
+      min-width: 60px;
+      height: 20px;
+    }
+  }
+}
 </style>

src/views/sheetList/components/SharedSheet.vue

@@ -110,6 +110,11 @@
     }
   }
 }
+@media screen and (min-width: 650px) {
+  .sheet-show-wrapper {
+    height: calc(100vh - 190px);
+  }
+}
 </style>
 <style lang='scss' scoped>
 ::-webkit-scrollbar {

src/views/sheetList/components/TimelineSheet.vue

@@ -84,7 +84,7 @@
   }
 
   onMounted(() => {
-    console.log('rowTable', rowTable.value);
+    console.log('rowTable', rowTable.value.offsetHeight);
     
     tableHeight.value = rowTable.value ? rowTable.value.offsetHeight : 35;
   })
@@ -95,7 +95,7 @@
   }
    // 获取某一列的宽度
   function getColumnHeaderWidth (index) {
-    return cellRef.value && cellRef.value ? cellRef.value.offsetWidth : 104
+    return cellRef.value && cellRef.value ? cellRef.value[index].offsetWidth : 104
   }
 </script>
 
@@ -212,7 +212,7 @@
     <div :class="['table-wrapper',dynamicSty ]" v-else>
       <table width="auto" border="0" class="table" :style="disabled ? 'width:100%':''" style="position: relative;">
         <thead>
-          <tr>
+          <tr ref="rowTable">
             <!-- 行头 -->
             <th class="th-tg sm"></th>
 
@@ -361,206 +361,123 @@
 </template>
 
 <style lang='scss' scoped>
+// sheet-show-wrapper 相关样式
 .sheet-show-wrapper {
   max-width: 1200px;
   overflow: hidden;
   position: relative;
   margin: 0 auto;
   background: #fff;
-  .tool{
-    // text-align: right;
+  // table-wrapper 样式
+  .table-wrapper {
+    max-width: calc(100vw - 20px);
+    max-height: calc(100vh - 400px);
+    margin: 0 auto;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch; /* ios滚动条 */
+  }
+  .tool {
     margin-top: 5px;
-    span{
-        cursor: pointer;
+    span {
+      cursor: pointer;
     }
   }
-  .sheet-bottom{
+
+  .sheet-bottom {
     display: flex;
     align-items: center;
     justify-content: space-between;
     white-space: nowrap;
     padding: 0 10px;
-    .sheet-source{
+
+    .sheet-source {
       width: 30%;
       min-width: 150px;
       overflow: hidden;
       text-overflow: ellipsis;
     }
-    .right-btns {
-      display: flex;
-      align-items: center;
-      gap:15px;
-      color: #666;
-    }
-  }
-}
-</style>
-<style scoped lang="scss">
-.table td,th {
-  width: 104px;
-  min-width: 104px;
-  height: 35px;
-  background: #fff;
-  text-align: center;
-  word-break: break-all;
-  border: none;
-  outline-color: #dcdfe6;
-  outline-style: solid;
-  outline-width: 1px;
-  word-wrap: break-word;
-  word-break: break-all;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: relative;
-
-  &.td-chose::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    content: "";
-    display: block;
-    outline: 0;
-    border: 2px solid #0033FF;
-    box-shadow: 0 0 5px rgba(73, 177, 249, .5)
-  }
-  // &.td-col-select::after {
-  //   position: absolute;
-  //   top: 0;
-  //   left: 0;
-  //   right: 0;
-  //   bottom: 0;
-  //   content: "";
-  //   display: block;
-  //   outline: 0;
-  //   border: 1px solid rgb(24, 173, 24);
-  //   border-bottom: none;
-  //   border-top: none;
-  // }
-  // &.td-row-select::after {
-  //   position: absolute;
-  //   top: 0;
-  //   left: 0;
-  //   right: 0;
-  //   bottom: 0;
-  //   content: "";
-  //   display: block;
-  //   outline: 0;
-  //   border: 1px solid rgb(24, 173, 24);
-  //   border-left: none;
-  //   border-right: none;
-  // }
-  &.insert {
-    background: #FFEFDD;
-  }
-  .edbname-td {
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-  &.fix-col {
-    position:sticky;
-    left: 0;
-    z-index: 98; // 表格右键操作弹窗为99
-  }
-}
-
-.th-tg {
-  background: #EBEEF5;
-  &:hover {
-    cursor: pointer;
-    background: #ddd;
-    /* border: 2px solid #409eff; */
-  }
-  &.sm {
-    width: 36px;
-    min-width: 36px;
-    max-width: 36px;
   }
 }
-//整行选中
-tr {
-  // position: relative;
-  // &.choose-all::after {
-  //   position: absolute;
-  //   top: 0;
-  //   left: 0;
-  //   right: 0;
-  //   bottom: 0;
-  //   content: "";
-  //   display: block;
-  //   outline: 0;
-  //   border: 2px solid #5897fb;
-  //   box-shadow: 0 0 5px rgba(73, 177, 249, .5)
-  // }
-  &.fix {
-    position:sticky;
-    top: 0;
-    z-index: 98; // 表格右键操作弹窗为99
-  }
-} 
-
-.el-icon-sort {
-  color: #409eff;
-  cursor: pointer;
-  font-size: 16px;
-}
 
-</style>
-<style lang='scss' scoped>
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-::-webkit-scrollbar-track {
-  background: rgb(239, 239, 239);
-  border-radius: 2px;
-}
-::-webkit-scrollbar-thumb {
-  background: #ccc;
-  border-radius: 10px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: #888;
-}
-::-webkit-scrollbar-corner {
-  background: #666;
-}
-.table-wrapper {
-  max-width: calc(100vw - 20px);
-  max-height: calc(100vh - 400px);
-  margin: 0 auto;
-  // margin-right: -5px;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch; /* ios滚动条 */
-}
-table {
+// 表格相关样式
+.table {
   width: 100%;
   font-size: 14px;
   color: #333;
-  td,
-  th {
-    // min-width: 120px;
+
+  td, th {
+    width: 104px;
+    min-width: 104px;
+    height: 35px;
+    background: #fff;
+    text-align: center;
     word-break: break-all;
+    border: none;
+    outline-color: #dcdfe6;
+    outline-style: solid;
+    outline-width: 1px;
     word-wrap: break-word;
-    line-height: 1.2em;
-    border: 1px solid #dcdfe6;
-    // height: 40px;
-    text-align: center;
-    border-left: none;
-    border-top: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+
     &:first-child {
-			border-left: 1px solid #dcdfe6;
-		}
+      border-left: 1px solid #dcdfe6;
+    }
+
+    &.td-chose::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      content: "";
+      display: block;
+      outline: 0;
+      border: 2px solid #0033FF;
+      box-shadow: 0 0 5px rgba(73, 177, 249, .5);
+    }
+
+    &.insert {
+      background: #FFEFDD;
+    }
+
+    .edbname-td {
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    &.fix-col {
+      position: sticky;
+      left: 0;
+      z-index: 98; // 表格右键操作弹窗为99
+    }
   }
 
-  .data-cell{
+  .th-tg {
+    background: #EBEEF5;
+
+    &:hover {
+      cursor: pointer;
+      background: #ddd;
+    }
+
+    &.sm {
+      width: 36px;
+      min-width: 36px;
+      max-width: 36px;
+    }
+  }
+
+  .data-cell {
     color: #333;
+
     &.one-bg {
       background-color: #EFEEF1;
     }
+
     &.two-bg {
       background-color: #fff;
     }
@@ -575,41 +492,133 @@ table {
     background-color: #505B78;
     color: #fff;
   }
+
   .split-word {
-    span { display: inline; }
+    span {
+      display: inline;
+    }
   }
 }
 
-.no-water{
-  td,
-  th {
-    background-color: #fff;
+tr {
+  &.fix {
+    position: sticky;
+    top: 0;
+    z-index: 98; // 表格右键操作弹窗为99
   }
-  .head-column {
-    background-color: #505B78;
-    color: #fff;
+}
+
+// 滚动条样式
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgb(239, 239, 239);
+  border-radius: 2px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 10px;
+
+  &:hover {
+    background: #888;
   }
 }
 
+::-webkit-scrollbar-corner {
+  background: #666;
+}
+
+// PC端表格样式
 .pc-sty table {
   table-layout: auto;
-  td,th {
+
+  td, th {
     width: auto;
     height: auto;
     padding: 0.4em 0;
   }
 }
 
+// 移动端表格样式
 .mobile-sty table {
   table-layout: auto;
-  td,th {
+
+  td, th {
     min-width: 120px;
     height: 40px;
   }
 }
-.background-watermark{
+
+// 背景水印样式
+.background-watermark {
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 100%;
 }
+
+@media screen and (min-width: 650px) {
+  .sheet-show-wrapper {
+    .table-wrapper {
+      max-height: calc(100vh - 220px);
+    }
+
+    .tool {
+      margin-top: 3px;
+    }
+
+    .sheet-bottom {
+      padding: 0 5px;
+      .sheet-source {
+        width: 15%;
+        min-width: 75px;
+      }
+    }
+  }
+
+  // 表格相关样式
+  .table {
+    width: 100%;
+    font-size: 7px;
+    color: #333;
+
+    td, th {
+      width: 52px;
+      min-width: 52px;
+      height: 17px;
+    }
+    .th-tg {
+      &.sm {
+        width: 18px;
+        min-width: 18px;
+        max-width: 18px;
+      }
+    }
+  }
+  // 滚动条样式
+  ::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: rgb(239, 239, 239);
+    border-radius: 1px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 5px;
+  }
+  // 移动端表格样式
+  .mobile-sty table {
+    td, th {
+      min-width: 60px;
+      height: 20px;
+    }
+  }
+}
 </style>