From dfa179b30b76044bc576e68e72b6cf725bddbd2e Mon Sep 17 00:00:00 2001 From: jiangping <jp@doumee.com> Date: 星期二, 08 四月 2025 18:13:11 +0800 Subject: [PATCH] 代码初始化 --- admin/src/layouts/TableLayout1.vue | 268 ++++++++++++++++++++++++++-------------------------- 1 files changed, 134 insertions(+), 134 deletions(-) diff --git a/admin/src/layouts/TableLayout1.vue b/admin/src/layouts/TableLayout1.vue index aaee5ed..9cd8065 100644 --- a/admin/src/layouts/TableLayout1.vue +++ b/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,116 +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 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; - } - } - // 澶嶉�夋鍒� - .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 { - 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; - } - } + // 鍒嗛〉 + .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> -- Gitblit v1.9.3