style: 优化大屏设计时,选择资源,资源库展示样式,固定头部和底部分页

main
wu.jian2 2 years ago
parent 1d06c73b82
commit 926b7b7df1

@ -38,7 +38,6 @@
</el-select>
<el-button
size="small"
style="margin-right: 20px"
type="primary"
@click="reSearch"
>
@ -52,7 +51,9 @@
element-loading-text="加载中"
:style="{
display: gridComputed ? 'grid' : 'flex',
justifyContent: gridComputed ? 'space-around' : 'flex-start'
justifyContent: gridComputed ? 'space-around' : 'flex-start',
height: 'calc(100vh - 400px)',
marginBottom: '38px'
}"
>
<!-- <div v-if="list.length !== 0"> -->
@ -100,23 +101,23 @@
>
暂无数据
</div>
<div class="footer-pagination-wrap">
<div class="bs-pagination">
<el-pagination
class="bs-el-pagination"
popper-class="bs-el-pagination"
background
layout="total, prev, pager, next, sizes"
:page-size="size"
prev-text="上一页"
next-text="下一页"
:total="totalCount"
:page-sizes="[10, 20, 50, 100]"
:current-page="current"
@current-change="currentChangeHandle"
@size-change="sizeChangeHandle"
/>
</div>
</div>
<div class="footer-pagination-wrap">
<div class="bs-pagination">
<el-pagination
class="bs-el-pagination"
popper-class="bs-el-pagination"
background
layout="total, prev, pager, next, sizes"
:page-size="size"
prev-text="上一页"
next-text="下一页"
:total="totalCount"
:page-sizes="[10, 20, 50, 100]"
:current-page="current"
@current-change="currentChangeHandle"
@size-change="sizeChangeHandle"
/>
</div>
</div>
</div>
@ -224,7 +225,11 @@ export default {
<style lang="scss" scoped>
@import '../../assets/style/bsTheme.scss';
::v-deep .el-dialog__body{
position: relative;
min-height: 500px;
padding: 0 16px 16px 16px !important;
}
.big-screen-list-wrap {
.el-select {
display: inline-block !important;
@ -243,7 +248,11 @@ export default {
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 12px;
position: sticky;
top: 0px;
z-index: 999;
padding: 16px 0;
background-color: var(--bs-background-2);
.el-input {
width: 200px;
@ -274,15 +283,6 @@ export default {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 15px;
// ::v-deep .el-loading-mask {
// display: flex;
// align-items: center;
// justify-content: center;
// height: calc(100vh - 260px) !important;
// z-index: 999;
// top: 50px;
// }
.big-screen-card-wrap {
position: relative;
height: 230px;
@ -407,14 +407,15 @@ export default {
.el-loading-parent--relative {
position: unset !important;
}
}
.footer-pagination-wrap {
.footer-pagination-wrap {
bottom: 5px;
right: 16px;
width: 100%;
position: absolute;
margin-top: 16px;
position: absolute;
}
}
.bs-pagination {
::v-deep .el-input__inner {
width: 110px !important;

@ -41,7 +41,7 @@
</div>
<el-table
:key="randomKey"
max-height="450"
max-height="400"
class="bs-el-table"
:data="tableList"
>
@ -83,7 +83,7 @@
</el-dialog>
<!-- 新增或编辑目录弹窗 -->
<el-dialog
:title="currentCatalog.code ? '编辑分组':'新建分组'"
:title="currentCatalog.code ? '编辑分组' : '新建分组'"
:visible.sync="catalogVisible"
custom-class="bs-el-dialog"
width="30%"
@ -107,9 +107,7 @@
clearable
/>
</el-form-item>
<el-form-item
label="排序"
>
<el-form-item label="排序">
<el-input-number
v-model="currentCatalog.orderNum"
:min="0"
@ -205,7 +203,7 @@ export default {
this.dataList = data
this.$emit('updateCatalogList', data)
})
.catch(() => {})
.catch(() => { })
},
//
addOrEditCatalog () {
@ -280,12 +278,14 @@ export default {
@import '../assets/style/bsTheme.scss';
.catalog-edit-wrap{
::v-deep .el-dialog__body{
min-height: 500px !important;
min-height: 300px !important;
}
.el-input {
width: 200px;
margin-right: 20px;
}
.top-search-wrap {
display: flex;
align-items: center;
@ -295,6 +295,7 @@ export default {
.el-input {
width: 200px;
margin-right: 20px;
::v-deep.el-input__inner {
background-color: #151A26 !important;
}

@ -186,6 +186,9 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
}
//
.bs-pagination {
.el-pagination .el-select .el-input{
margin: 0 10px;
}
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {

Loading…
Cancel
Save