H5静态化

doum

2025-09-26 9057e04efad1b7d61c77a72e5c37a504d0aee935

 admin/src/layouts/TableLayout1.vue

@@ -1,34 +1,34 @@
<template>
    <div class="table-layout">
        <!-- 头部 -->
<!--        <div v-if="withBreadcrumb" class="table-header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="path in paths" :key="path">{{path}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>-->
        <Profile :roles="roles" :permissions="permissions">
            <div style="width: 100%; height: 100%; padding: 0 16px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;">
                <div style="width: 240px; height: 100%; flex-shrink: 0; background: #ffffff;">
                    <slot name="menu"></slot>
                </div>
                <div style="width: calc(100% - 250px); height: 100%">
                    <!-- 搜索表单部分 -->
                    <div class="table-search-form" style="padding: 0 !important;">
                        <div class="form-wrap">
                            <slot name="search-form"></slot>
                        </div>
                    </div>
                    <slot name="space"></slot>
                    <!-- 列表和分页部分 -->
                    <div class="table-content" style="padding: 0 !important;">
                        <div class="table-wrap">
                            <slot name="table-wrap"></slot>
                        </div>
                    </div>
                </div>
  <div class="table-layout">
    <!-- 头部 -->
    <!--        <div v-if="withBreadcrumb" class="table-header">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item v-for="path in paths" :key="path">{{path}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>-->
    <Profile :roles="roles" :permissions="permissions">
      <div style="width: 100%; height: 100%; padding: 0 16px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;">
        <div style="width: 240px; height: 100%; flex-shrink: 0; background: #ffffff;">
          <slot name="menu"></slot>
        </div>
        <div style="width: calc(100% - 250px); height: 100%">
          <!-- 搜索表单部分 -->
          <div class="table-search-form" style="padding: 0 !important;">
            <div class="form-wrap">
              <slot name="search-form"></slot>
            </div>
        </Profile>
    </div>
          </div>
          <slot name="space"></slot>
          <!-- 列表和分页部分 -->
          <div class="table-content" style="padding: 0 !important;">
            <div class="table-wrap">
              <slot name="table-wrap"></slot>
            </div>
          </div>
        </div>
      </div>
    </Profile>
  </div>
</template>

<script>
@@ -60,107 +60,116 @@
</script>

<style lang="scss">
    @import "@/assets/style/variables.scss";
    .table-layout {
        height: 100%;
        display: flex;
        flex-direction: column;
        .not-allow-wrap {
            padding-top: 0;
        }
@import "@/assets/style/variables.scss";
.table-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  .not-allow-wrap {
    padding-top: 20;
  }
}
// 头部
.table-header {
  overflow: hidden;
  padding: 12px 16px;
  flex-shrink: 0;
  // 页面路径
  .el-breadcrumb {
    .el-breadcrumb__item {
      .el-breadcrumb__inner {
        color: #ABB2BE;
        font-size: 12px;
      }
      &:last-of-type .el-breadcrumb__inner {
        color: #606263;
        font-size: 14px;
      }
    }
    // 头部
    .table-header {
        overflow: hidden;
        padding: 12px 16px;
        flex-shrink: 0;
        // 页面路径
        .el-breadcrumb {
            .el-breadcrumb__item {
                .el-breadcrumb__inner {
                    color: #ABB2BE;
                    font-size: 12px;
                }
                &:last-of-type .el-breadcrumb__inner {
                    color: #606263;
                    font-size: 14px;
                }
            }
        }
  }
}
// 搜索
.table-search-form {
  display: flex;
  flex-wrap: wrap;
  /*padding: 0 16px;*/
  /*box-sizing: border-box;*/
  .form-wrap {
    padding: 16px 16px 0 16px;
    width: 100%;
    background: #fff;
    &:empty {
      padding: 0;
    }
    // 搜索
    .table-search-form {
        display: flex;
        flex-wrap: wrap;
        /*padding: 0 16px;*/
        /*box-sizing: border-box;*/
        .form-wrap {
            padding: 16px 16px 0 16px;
            width: 100%;
            background: #fff;
            &:empty {
                padding: 0;
            }
  }
  section {
    display: inline-block;
    margin-left: 16px;
    margin-bottom: 18px;
  }
}
// 列表和分页
.table-content {
  /*padding: 0 16px;*/
  .table-wrap {
    padding: 16px 16px 60px 16px;
    background: #fff;
    // 工具栏
    .toolbar {
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
      li {
        display: inline-block;
        margin-right: 6px;
      }
    }
    // 表格
    .el-table {
      th {
        .cell {
          color: #666;
        }
        section {
      }
      // 复选框列
      .el-table-column--selection {
        .cell {
          text-align: center !important;
        }
      }
      // 多值字段
      .table-column-strings {
        ul {
          li {
            display: inline-block;
            margin-left: 16px;
            margin-bottom: 18px;
            background: #eee;
            border-radius: 3px;
            padding: 0 3px;
            margin-right: 3px;
            margin-bottom: 3px;
          }
        }
      }
      // 树视觉调整
      [class*=el-table__row--level] .el-table__expand-icon {
        position: relative;
        left: -6px;
        margin-right: 0;
      }
    }
    // 列表和分页
    .table-content {
        /*padding: 0 16px;*/
        .table-wrap {
            padding: 16px 16px 0 16px;
            background: #fff;
            // 工具栏
            .toolbar {
                border-bottom: 1px solid #eee;
                padding-bottom: 10px;
                li {
                    display: inline-block;
                    margin-right: 6px;
                }
            }
            // 表格
            .el-table {
                th {
                    .cell {
                        color: #666;
                    }
                }
                // 复选框列
                .el-table-column--selection {
                    .cell {
                        text-align: center !important;
                    }
                }
                // 多值字段
                .table-column-strings {
                    ul {
                        li {
                            display: inline-block;
                            background: #eee;
                            border-radius: 3px;
                            padding: 0 3px;
                            margin-right: 3px;
                            margin-bottom: 3px;
                        }
                    }
                }
                // 树视觉调整
                [class*=el-table__row--level] .el-table__expand-icon {
                    position: relative;
                    left: -6px;
                    margin-right: 0;
                }
            }
            // 分页
            .table-pagination {
                padding: 16px 0;
                text-align: left;
            }
        }
    // 分页
    .table-pagination {
      margin-left: 0px;
      padding: 16px 0px ;
      text-align: left;
      display: block;
      z-index: 100;
      width: -webkit-fill-available;
      /* width: 80%; */
      position: fixed;
      bottom: 0px;
      background-color: white;
      margin-right: 50px;
    }
  }
}
</style>