提交 88512966 authored 作者: zax's avatar zax

单位管理页面分页修改

上级 7eca527d
......@@ -22,6 +22,7 @@ body {
#app{
width: 100%;
height:100%;
position: absolute;
}
a {
......
......@@ -115,4 +115,138 @@ export default {
</script>
<style scoped>
.role{
background: #ebf0f8;
width: 100%;
}
.role .content{
margin: 40px;
height: 841px;
background: #fff;
overflow: hidden;
}
.role .content .title{
padding: 30px 0 0 60px;
font-size: 20px;
color: #233b6e;
}
.role .content .search{
position: relative;
margin-top: 36px;
padding: 0px 70px 0px 70px;
display: flex;
}
.role .content .searchVal{
width: 280px;
display: flex;
font-size: 18px;
color: #4663a6;
}
.role .content .searchVal>span{
width: 140px;
display: inline-block;
line-height: 34px;
}
.role .content .change{
color: #4877e6;
cursor: pointer;
}
.role .content .change>img{
margin-right: 3px;
}
.role .content .common-table{
box-shadow: 4px 4px 5px rgba(72,119,230,0.1);
border: .5px solid transparent;
border-radius: 10px;
}
.role>>>.el-input__inner{
border: 1px solid rgba(8,104,157,.3);
border-radius: 2px;
font-size: 18px;
color: #999;
height: 34px;
line-height: 34px;
width: 180px;
}
.role .content .button{
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
text-align: center;
background: #4877e6;
cursor: pointer;
margin-left: 35px;
border-radius: 2px;
color: #fff;
font-size: 18px;
}
.role .content .button:hover{
background: rgba(72,119,230,.6);
}
.role .content .import{
position: absolute;
right: 70px;
}
.add{
position: absolute;
right: 220px;
}
.role .content .common-table{
margin: 24px 70px 0 70px;
}
.role .content .common-table>>>.el-table th > .cell{
font-size: 18px;
color: #333;
font-weight: normal;
}
.role .content .common-table>>>.el-table th.is-leaf{
height: 70px;
}
.role .content .common-table>>>.el-table tr{
font-size: 18px;
}
.role .content .common-table>>>.el-table{
color: #233b6e;
}
.role .content .common-table>>>.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td {
background-color: #fff;
}
.role .content .common-table>>>.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: #f5f8fd;
}
.role .content .common-table>>>.el-table th.is-leaf, .el-table td {
border-bottom: 1px solid #d5e3ff;
}
.role .content .common-table>>>.el-table__body tr, .el-table__body td {
padding: 0;
height: 60px;
background: #f5f8fd;
}
.role .content .block{
text-align: right;
padding: 30px 70px 0 0;
}
.role .content>>>.el-pagination.is-background .el-pager li{
background-image: linear-gradient(to bottom, #c5d5f7,#7a95e6);
color: #fff;
}
.role .content>>>.el-pagination.is-background .el-pager li:not(.disabled).active{
background-image: linear-gradient(to bottom, #7a9eeb,#274acf);
color: #fff;
}
.role .content>>>.el-table td{
border-bottom: 1px solid #d5e3ff;
}
.role .content>>>.btn-prev,.role .content>>>.btn-next{
background: #c5d5f7;
background-image: linear-gradient(to bottom, #c5d5f7,#7a95e6);
color: #fff;
}
.role .content>>>.btn-prev:disabled,.dynamicList .content>>>.btn-next:disabled{
color: #C0C4CC;
}
.role .content>>>.el-table__body tr.current-row > td{
background: #f5f8fd;
}
</style>
\ No newline at end of file
......@@ -76,7 +76,7 @@
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size=8
:page-size="pageSize"
background
layout="prev, pager, next"
:total="totalLength">
......@@ -100,6 +100,9 @@ import './company.css'
export default {
data () {
return {
totalLength: 0,
currentPage: 1, // 分页第一页
pageSize: 8, // 每页个数
searchName: '',
openModel: false, // 弹框开关
components: '', // 当前弹框内容
......@@ -116,9 +119,6 @@ export default {
{type: '7'},
{type: '8'}
],
totalLength: 0,
currentPage: 1, // 分页第一页
pageSize: 8, // 每页个数
allData: [],
typeVal: { // 单位类别
'1': 'AK中心',
......@@ -249,5 +249,144 @@ export default {
}
</script>
<style scoped>
.role{
background: #ebf0f8;
width: 100%;
}
.role .content{
margin: 40px;
height: 841px;
background: #fff;
overflow: hidden;
}
.role .content .title{
padding: 30px 0 0 60px;
font-size: 20px;
color: #233b6e;
}
.role .content .search{
position: relative;
margin-top: 36px;
padding: 0px 70px 0px 70px;
display: flex;
}
.role .content .searchVal{
width: 280px;
display: flex;
font-size: 18px;
color: #4663a6;
}
.role .content .searchVal>span{
width: 140px;
display: inline-block;
line-height: 34px;
}
.role .content .change{
color: #4877e6;
cursor: pointer;
}
.role .content .change>img{
margin-right: 3px;
}
.role .content .common-table{
box-shadow: 4px 4px 5px rgba(72,119,230,0.1);
border: .5px solid transparent;
border-radius: 10px;
}
.role>>>.el-input__inner{
border: 1px solid rgba(8,104,157,.3);
border-radius: 2px;
font-size: 18px;
color: #999;
height: 34px;
line-height: 34px;
width: 180px;
}
.role .content .button{
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
text-align: center;
background: #4877e6;
cursor: pointer;
margin-left: 100px;
border-radius: 2px;
color: #fff;
font-size: 18px;
}
.role .content .button:hover{
background: rgba(72,119,230,.6);
}
.role .content .new{
position: absolute;
right: 70px;
}
/*表格样式*/
.role .content .common-table{
margin: 24px 70px 0 70px;
}
.role .content .common-table>>>.el-table th > .cell{
font-size: 18px;
color: #333;
font-weight: normal;
}
.role .content .common-table>>>.el-table th.is-leaf{
height: 70px;
}
.role .content .common-table>>>.el-table tr{
font-size: 18px;
}
.role .content .common-table>>>.el-table{
color: #233b6e;
}
.role .content .common-table>>>.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td {
background-color: #fff;
}
.role .content .common-table>>>.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: #f5f8fd;
}
.role .content .common-table>>>.el-table th.is-leaf, .el-table td {
border-bottom: 1px solid #d5e3ff;
}
.role .content .common-table>>>.el-table__body tr, .el-table__body td {
padding: 0;
height: 60px;
background: #f5f8fd;
}
.role .content .block{
text-align: right;
padding: 30px 70px 0 0;
}
.role .content>>>.el-pagination.is-background .el-pager li{
background-image: linear-gradient(to bottom, #c5d5f7,#7a95e6);
color: #fff;
}
.role .content>>>.el-pagination.is-background .el-pager li:not(.disabled).active{
background-image: linear-gradient(to bottom, #7a9eeb,#274acf);
color: #fff;
}
.role .content>>>.el-table td{
border-bottom: 1px solid #d5e3ff;
}
.role .content>>>.btn-prev,.role .content>>>.btn-next{
background: #c5d5f7;
background-image: linear-gradient(to bottom, #c5d5f7,#7a95e6);
color: #fff;
}
.role .content>>>.btn-prev:disabled,.dynamicList .content>>>.btn-next:disabled{
color: #C0C4CC;
}
.role .content>>>.el-table__body tr.current-row > td{
background: #f5f8fd;
}
.role .content>>>.el-pagination.is-background .el-pager li{
background-image: linear-gradient(to bottom, #c5d5f7,#7a95e6);
color: #fff;
}
.role .content>>>.el-pagination.is-background .el-pager li:not(.disabled).active{
background-image: linear-gradient(to bottom, #7a9eeb,#274acf);
color: #fff;
}
</style>
......@@ -71,7 +71,7 @@
</el-table>
</div>
<!-- 分页 -->
<div class="block" v-if="this.totleLength >= 10">
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
......@@ -128,7 +128,7 @@ export default {
this.$server.getRolefindAll().then((res) => { // 数据请求
if (res.data.code === 200) {
this.roleList = res.data.data;
this.$server.getUnitfindAll().then((res) => { // 数据请求
this.$server.getUnitFindAll().then((res) => { // 数据请求
if (res.data.code === 200) {
this.unitList = res.data.data;
if (this.$route.params.value !== undefined) { // 角色页面跳转过来所带参数
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论