分页样式统一更换封装组件 #138

Merged
lukeyan merged 1 commits from lukeyan into master 1 year ago

@ -74,6 +74,7 @@ export default {
height: 5vh;
display: flex;
flex-direction: row-reverse;
margin-top: 1vh;
/deep/.el-pagination.is-background .btn-next,
/deep/.el-pagination.is-background .btn-prev,
/deep/.el-pagination.is-background .el-pager li {

@ -394,6 +394,7 @@ export default {
height: 5vh;
display: flex;
flex-direction: row-reverse;
margin-top: 1vh;
/deep/.el-pagination.is-background .btn-next,
/deep/.el-pagination.is-background .btn-prev,
/deep/.el-pagination.is-background .el-pager li {

@ -2,18 +2,25 @@
<div class="main">
<div class="leftMenu">
<div class="fanhui">
<span @click="goBack">
<i class="el-icon-back"></i> 返回</span>
<span @click="goBack"> <i class="el-icon-back"></i> 返回</span>
</div>
<div class="fengexian"></div>
<el-menu default-active="2" class="el-menu-vertical-demo" :default-openeds="openeds" @select="handleMenuSelect">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
:default-openeds="openeds"
@select="handleMenuSelect"
>
<el-menu-item index="1">
<img src="../../assets/companyFile/基本信息.png" alt="">&nbsp;&nbsp;
<img src="../../assets/companyFile/基本信息.png" alt="" />&nbsp;&nbsp;
<span slot="title">基本信息</span>
</el-menu-item>
<el-submenu index="2">
<template slot="title">
<img src="../../assets/companyFile/实时感知信息.png" alt="">&nbsp;&nbsp;
<img
src="../../assets/companyFile/实时感知信息.png"
alt=""
/>&nbsp;&nbsp;
<span>实时感知信息</span>
</template>
<el-menu-item-group>
@ -24,7 +31,10 @@
</el-submenu>
<el-submenu index="3">
<template slot="title">
<img src="../../assets/companyFile/人员信息.png" alt="">&nbsp;&nbsp;
<img
src="../../assets/companyFile/人员信息.png"
alt=""
/>&nbsp;&nbsp;
<span>人员信息</span>
</template>
<el-menu-item-group>
@ -34,15 +44,15 @@
</el-menu-item-group>
</el-submenu>
<el-menu-item index="4">
<img src="../../assets/companyFile/车辆信息.png" alt="">&nbsp;&nbsp;
<img src="../../assets/companyFile/车辆信息.png" alt="" />&nbsp;&nbsp;
<span slot="title">车辆信息</span>
</el-menu-item>
<el-menu-item index="5">
<img src="../../assets/companyFile/物品信息.png" alt="">&nbsp;&nbsp;
<img src="../../assets/companyFile/物品信息.png" alt="" />&nbsp;&nbsp;
<span slot="title">物品信息</span>
</el-menu-item>
<el-menu-item index="6">
<img src="../../assets/companyFile/案件信息.png" alt="">&nbsp;&nbsp;
<img src="../../assets/companyFile/案件信息.png" alt="" />&nbsp;&nbsp;
<span slot="title">案件信息</span>
</el-menu-item>
</el-menu>
@ -51,57 +61,99 @@
<el-scrollbar ref="scrollbar">
<div class="jibenxinxi scroll-target" ref="child1">
<div class="topZS"></div>
<div class="title">
基本信息
</div>
<div class="title">基本信息</div>
<div class="jibenleft">
<div class="topimg">
<img :src="companyData.picUrl" @click="showDia()">
<div class="companyName"><span v-html="companyData.companyName"></span></div>
<img :src="companyData.picUrl" @click="showDia()" />
<div class="companyName">
<span v-html="companyData.companyName"></span>
</div>
</div>
<div class="middleText"><span>平安指数</span> </div>
<div class="middleText"><span>平安指数</span></div>
<div class="bottomZhishu">
<div class="shangyue" @mouseover="showMonthScore()" @mouseout="closeMonthScore()">
<div
class="shangyue"
@mouseover="showMonthScore()"
@mouseout="closeMonthScore()"
>
<p>上月</p>
<div class="zhishu">{{ safeData.monthScore }}</div>
<div class="paiming" v-show="isMonthShow">
<div class="pingan">平安指数&nbsp;<span class="pinganNum">{{ safeData.monthScore
<div class="pingan">
平安指数&nbsp;<span class="pinganNum">{{
safeData.monthScore
}}</span>
</div>
<div class="pingan">辖区排名&nbsp;<span class="pinganNum">{{ safeData.monthRank
<div class="pingan">
辖区排名&nbsp;<span class="pinganNum">{{
safeData.monthRank
}}</span>
<i class="el-icon-caret-top blue" v-if="safeData.monthTrend == '1'"></i>
<i class="el-icon-caret-bottom red" v-if="safeData.monthTrend == '-1'"></i>
<i
class="el-icon-caret-top blue"
v-if="safeData.monthTrend == '1'"
></i>
<i
class="el-icon-caret-bottom red"
v-if="safeData.monthTrend == '-1'"
></i>
</div>
</div>
</div>
<div class="shu"></div>
<div class="shangyue" @mouseover="showSeasonScore()" @mouseout="closeSeasonScore()">
<div
class="shangyue"
@mouseover="showSeasonScore()"
@mouseout="closeSeasonScore()"
>
<p>上季</p>
<div class="zhishu">{{ safeData.seasonScore }}</div>
<div class="paiming" v-show="isSeasonShow">
<div class="pingan">平安指数&nbsp;<span class="pinganNum">{{ safeData.seasonScore
<div class="pingan">
平安指数&nbsp;<span class="pinganNum">{{
safeData.seasonScore
}}</span>
</div>
<div class="pingan">辖区排名&nbsp;<span class="pinganNum">{{ safeData.seasonRank
<div class="pingan">
辖区排名&nbsp;<span class="pinganNum">{{
safeData.seasonRank
}}</span>
<i class="el-icon-caret-top blue" v-if="safeData.seasonTrend == '1'"></i>
<i class="el-icon-caret-bottom red" v-if="safeData.seasonTrend == '-1'"></i>
<i
class="el-icon-caret-top blue"
v-if="safeData.seasonTrend == '1'"
></i>
<i
class="el-icon-caret-bottom red"
v-if="safeData.seasonTrend == '-1'"
></i>
</div>
</div>
</div>
<div class="shu"></div>
<div class="shangyue" @mouseover="showYearScore()" @mouseout="closeYearScore()">
<div
class="shangyue"
@mouseover="showYearScore()"
@mouseout="closeYearScore()"
>
<p>去年</p>
<div class="zhishu">{{ safeData.yearScore }}</div>
<div class="paiming" v-show="isYearShow">
<div class="pingan">平安指数&nbsp;<span class="pinganNum">{{ safeData.yearScore
<div class="pingan">
平安指数&nbsp;<span class="pinganNum">{{
safeData.yearScore
}}</span>
</div>
<div class="pingan">辖区排名&nbsp;<span class="pinganNum">{{ safeData.yearRank
<div class="pingan">
辖区排名&nbsp;<span class="pinganNum">{{
safeData.yearRank
}}</span>
<i class="el-icon-caret-top blue" v-if="safeData.yearTrend == '1'"></i>
<i class="el-icon-caret-bottom red" v-if="safeData.yearTrend == '-1'"></i>
<i
class="el-icon-caret-top blue"
v-if="safeData.yearTrend == '1'"
></i>
<i
class="el-icon-caret-bottom red"
v-if="safeData.yearTrend == '-1'"
></i>
</div>
</div>
</div>
@ -115,76 +167,131 @@
</div>
<div class="jibenhangTitle">企业类型</div>
<div class="jibenhangrightText">
<div :class="{ 'shewei': (a == '剧毒' || a == '易制毒'), 'zhongdian': a == ('消防重点' || a == '所管消防'), 'zhibao': (a == '放射源' || a == '易制爆'), 'zhian': a == ('治安重点' || a == '创安单位') }"
v-for="a in companyData.companyTypes" :key="a">{{ a }}
<div
:class="{
shewei: a == '剧毒' || a == '易制毒',
zhongdian: a == ('消防重点' || a == '所管消防'),
zhibao: a == '放射源' || a == '易制爆',
zhian: a == ('治安重点' || a == '创安单位'),
}"
v-for="a in companyData.companyTypes"
:key="a"
>
{{ a }}
</div>
</div>
</div>
<div class="jibenhang">
<div class="jibenhangTitle">统一社会信用代码</div>
<div class="jibenhangleftText">{{ companyData.socialCreditCode }}</div>
<div class="jibenhangleftText">
{{ companyData.socialCreditCode }}
</div>
<div class="jibenhangTitle">企业性质</div>
<div class="jibenhangrightText">
{{ companyData.companyNature }}</div>
{{ companyData.companyNature }}
</div>
</div>
<div class="jibenhang">
<div class="jibenhangTitle">成立日期</div>
<div class="jibenhangleftText">{{ companyData.establishDate }}</div>
<div class="jibenhangleftText">
{{ companyData.establishDate }}
</div>
<div class="jibenhangTitle">营业期限</div>
<div class="jibenhangrightText">{{ companyData.businessTermDate }}</div>
<div class="jibenhangrightText">
{{ companyData.businessTermDate }}
</div>
</div>
<div class="jibenhang">
<div class="jibenhangTitle">企业登记注册地</div>
<div class="jibenhangleftText">{{ companyData.registerAddress }}</div>
<div class="jibenhangleftText">
{{ companyData.registerAddress }}
</div>
<div class="jibenhangTitle">企业经营状态</div>
<div class="jibenhangrightText">{{ companyData.businessStatus }}</div>
<div class="jibenhangrightText">
{{ companyData.businessStatus }}
</div>
</div>
<div class="jibenhang">
<div class="jibenhangTitle">企业法定代表人</div>
<div class="jibenhangleftText">{{ companyData.legalPerson }}</div>
<div class="jibenhangTitle">注册资本</div>
<div class="jibenhangrightText">{{ companyData.registerCapital }}</div>
<div class="jibenhangrightText">
{{ companyData.registerCapital }}
</div>
</div>
<div class="jibenhang">
<div class="jibenhangTitle">发照日期</div>
<div class="jibenhangleftText">{{ companyData.businessLicenseDate }}</div>
<div class="jibenhangleftText">
{{ companyData.businessLicenseDate }}
</div>
<div class="jibenhangTitle">登记机关</div>
<div class="jibenhangrightText">{{ companyData.registerAuthority }}</div>
<div class="jibenhangrightText">
{{ companyData.registerAuthority }}
</div>
</div>
<div class="jibenhang">
<div class="jibenhangTitle">企业安全责任人</div>
<div class="jibenhangleftText">{{ companyData.emergencyContact }}</div>
<div class="jibenhangleftText">
{{ companyData.emergencyContact }}
</div>
<div class="jibenhangTitle">安全责任人电话</div>
<div class="jibenhangrightText">{{ companyData.emergencyContactPhone }}</div>
<div class="jibenhangrightText">
{{ companyData.emergencyContactPhone }}
</div>
</div>
<div class="jibenhang">
<div class="jibenhangTitle">企业地址</div>
<el-tooltip :content="companyData.companyAddress" placement="bottom-start">
<div class="jibenhangText">{{ companyData.companyAddress }}</div>
<el-tooltip
:content="companyData.companyAddress"
placement="bottom-start"
>
<div class="jibenhangText">
{{ companyData.companyAddress }}
</div>
</el-tooltip>
</div>
<div class="jibenhang jibenhang1">
<div class="jibenhangTitle">营业执照经营范围</div>
<el-tooltip :content="companyData.businessScope" placement="bottom-start">
<el-tooltip
:content="companyData.businessScope"
placement="bottom-start"
>
<div class="jibenhangText">{{ companyData.businessScope }}</div>
</el-tooltip>
</div>
</div>
<div class="bottomZS"></div>
<el-dialog title="企业图片" :visible.sync="diaVisible" class="picForm">
<img :src="companyData.picUrl" @mouseover="showpic()">
<el-dialog
title="企业图片"
:visible.sync="diaVisible"
class="picForm"
>
<img :src="companyData.picUrl" @mouseover="showpic()" />
<div class="zhezhao" v-if="picShow" @mouseleave="closepic()">
<el-button @click="uploadPic()"></el-button>
<el-button type="primary" @click="downloadPic()"></el-button>
<el-button type="primary" @click="downloadPic()"
>下载图片</el-button
>
</div>
</el-dialog>
</div>
<monitor :companyID="companyID" ref="child2-1" v-if="companyID"></monitor>
<monitor
:companyID="companyID"
ref="child2-1"
v-if="companyID"
></monitor>
<kakou :companyID="companyID" ref="child2-2" v-if="companyID"></kakou>
<yujing :companyID="companyID" ref="child2-3" v-if="companyID"></yujing>
<qiyeyuangong :companyID="companyID" ref="child3-1" v-if="companyID"></qiyeyuangong>
<liudongrenyuan :companyID="companyID" ref="child3-2" v-if="companyID"></liudongrenyuan>
<qiyeyuangong
:companyID="companyID"
ref="child3-1"
v-if="companyID"
></qiyeyuangong>
<liudongrenyuan
:companyID="companyID"
ref="child3-2"
v-if="companyID"
></liudongrenyuan>
<fangke :companyID="companyID" ref="child3-3" v-if="companyID"></fangke>
<car :companyID="companyID" ref="child4" v-if="companyID"></car>
<wupin :companyID="companyID" ref="child5" v-if="companyID"></wupin>
@ -195,18 +302,17 @@
</template>
<script>
import { safeIndex, baseInfo } from '@/api/archives'
import { safeIndex, baseInfo } from "@/api/archives";
//import { download } from '@/api/download'
import monitor from './monitor.vue'
import kakou from './kakou.vue'
import yujing from './yujing.vue'
import car from './car.vue'
import wupin from './wupin.vue'
import anjian from './anjian.vue'
import qiyeyuangong from './qiyeyuangong.vue'
import liudongrenyuan from './liudongrenyuan.vue'
import fangke from './fangke.vue'
import monitor from "./monitor.vue";
import kakou from "./kakou.vue";
import yujing from "./yujing.vue";
import car from "./car.vue";
import wupin from "./wupin.vue";
import anjian from "./anjian.vue";
import qiyeyuangong from "./qiyeyuangong.vue";
import liudongrenyuan from "./liudongrenyuan.vue";
import fangke from "./fangke.vue";
export default {
components: {
monitor,
@ -217,7 +323,7 @@ export default {
anjian,
qiyeyuangong,
liudongrenyuan,
fangke
fangke,
},
data() {
return {
@ -229,111 +335,108 @@ export default {
isYearShow: false,
diaVisible: false,
picShow: false,
companyID: '',
openeds: ['2', '3'],
}
companyID: "",
openeds: ["2", "3"],
};
},
created() {
this.searchCompany()
this.searchCompany();
},
methods: {
getsafeIndex() {
safeIndex({ id: this.companyData.id }).then(res => {
this.safeDataList = res.data
this.safeDataList.forEach(item => {
if (item.scoreType == 'month') {
this.safeData.monthRank = item.areaRank ? item.areaRank : 0
this.safeData.monthScore = item.score ? item.score : 0
this.safeData.monthTrend = item.trend ? item.trend : 0
return
}
if (item.scoreType == 'season') {
this.safeData.seasonRank = item.areaRank ? item.areaRank : 0
this.safeData.seasonScore = item.score ? item.score : 0
this.safeData.seasonTrend = item.trend ? item.trend : 0
return
}
if (item.scoreType == 'year') {
this.safeData.yearRank = item.areaRank ? item.areaRank : 0
this.safeData.yearScore = item.score ? item.score : 0
this.safeData.yearTrend = item.trend ? item.trend : 0
return
safeIndex({ id: this.companyData.id }).then((res) => {
this.safeDataList = res.data;
this.safeDataList.forEach((item) => {
if (item.scoreType == "month") {
this.safeData.monthRank = item.areaRank ? item.areaRank : 0;
this.safeData.monthScore = item.score ? item.score : 0;
this.safeData.monthTrend = item.trend ? item.trend : 0;
return;
}
if (item.scoreType == "season") {
this.safeData.seasonRank = item.areaRank ? item.areaRank : 0;
this.safeData.seasonScore = item.score ? item.score : 0;
this.safeData.seasonTrend = item.trend ? item.trend : 0;
return;
}
if (item.scoreType == "year") {
this.safeData.yearRank = item.areaRank ? item.areaRank : 0;
this.safeData.yearScore = item.score ? item.score : 0;
this.safeData.yearTrend = item.trend ? item.trend : 0;
return;
}
if (!item.scoreType) {
this.safeData.yearRank = 0
this.safeData.yearScore = 0
this.safeData.yearTrend = 0
this.safeData.seasonRank = 0
this.safeData.seasonScore = 0
this.safeData.seasonTrend = 0
this.safeData.monthRank = 0
this.safeData.monthScore = 0
this.safeData.monthTrend = 0
}
})
})
this.safeData.yearRank = 0;
this.safeData.yearScore = 0;
this.safeData.yearTrend = 0;
this.safeData.seasonRank = 0;
this.safeData.seasonScore = 0;
this.safeData.seasonTrend = 0;
this.safeData.monthRank = 0;
this.safeData.monthScore = 0;
this.safeData.monthTrend = 0;
}
});
});
},
showMonthScore() {
this.isMonthShow = true
this.isMonthShow = true;
},
showDia() {
this.diaVisible = true
this.diaVisible = true;
},
showpic() {
this.picShow = true
this.picShow = true;
},
closepic() {
this.picShow = false
this.picShow = false;
},
closeMonthScore() {
this.isMonthShow = false
this.isMonthShow = false;
},
showSeasonScore() {
this.isSeasonShow = true
this.isSeasonShow = true;
},
closeSeasonScore() {
this.isSeasonShow = false
this.isSeasonShow = false;
},
showYearScore() {
this.isYearShow = true
this.isYearShow = true;
},
closeYearScore() {
this.isYearShow = false
this.isYearShow = false;
},
handleMenuSelect(index) {
if (index == 1) {
this.$refs.container.scrollTo(0, 0);
return
return;
}
const refName = `child${index}`
const refName = `child${index}`;
const child = this.$refs[refName]
const child = this.$refs[refName];
if (child) {
child.$el.scrollIntoView()
child.$el.scrollIntoView();
}
},
searchCompany() {
const id = sessionStorage.getItem('companyID')
console.log(id, 'id');
baseInfo({ id }).then(res => {
this.companyData = res.data
this.companyID = this.companyData.id
console.log(this.companyData, '接口获取参数');
this.getsafeIndex()
})
const id = sessionStorage.getItem("companyID");
console.log(id, "id");
baseInfo({ id }).then((res) => {
this.companyData = res.data;
this.companyID = this.companyData.id;
console.log(this.companyData, "接口获取参数");
this.getsafeIndex();
});
},
goBack() {
this.$router.go(-1)
this.$router.go(-1);
},
downloadPic() {
downloadPic() {},
uploadPic() {},
},
uploadPic() {
}
}
}
};
</script>
<style lang="less" scoped>
@ -354,7 +457,7 @@ export default {
top: 20px;
height: 100%;
width: 240px;
background: url('~@/assets/companyFile/导航背景.png') no-repeat;
background: url("~@/assets/companyFile/导航背景.png") no-repeat;
background-size: 100% 100%;
padding: 20px;
box-sizing: border-box;
@ -365,24 +468,20 @@ export default {
background: rgba(108, 128, 151, 0.6);
margin-top: 10px;
margin-bottom: 20px;
}
.fanhui {
font-size: 14px;
color: #66FFDF;
color: #66ffdf;
letter-spacing: 1px;
font-weight: 400;
span {
cursor: pointer;
}
}
}
.mainBody {
width: calc(100% - 305px);
margin-left: 280px;
@ -396,7 +495,7 @@ export default {
// ,
&::-webkit-scrollbar-thumb {
background: #4CF993;
background: #4cf993;
border-radius: 2px;
}
@ -408,7 +507,7 @@ export default {
.jibenxinxi {
width: 100%;
height: 450px;
background: url('~@/assets/companyFile/背景22136.png') no-repeat;
background: url("~@/assets/companyFile/背景22136.png") no-repeat;
background-size: 100% 100%;
padding: 55px 20px 20px;
box-sizing: border-box;
@ -418,7 +517,7 @@ export default {
.jibenleft {
width: 346px;
height: 370px;
background: url('~@/assets/companyFile/矩形备份 289981.png') no-repeat;
background: url("~@/assets/companyFile/矩形备份 289981.png") no-repeat;
background-size: 100% 100%;
padding: 10px;
box-sizing: border-box;
@ -428,7 +527,6 @@ export default {
height: 240px;
position: relative;
img {
width: 100%;
height: 100%;
@ -459,12 +557,16 @@ export default {
width: 100%;
text-align: center;
opacity: 0.8;
background-image: linear-gradient(270deg, rgba(84, 98, 116, 0.00) 21%, #586C78 53%, rgba(84, 98, 116, 0.00) 85%);
background-image: linear-gradient(
270deg,
rgba(84, 98, 116, 0) 21%,
#586c78 53%,
rgba(84, 98, 116, 0) 85%
);
span {
font-size: 16px;
color: #FFE6D9;
color: #ffe6d9;
letter-spacing: 0;
line-height: 16px;
text-shadow: 0 0 4px rgba(33, 121, 195, 0.88);
@ -488,7 +590,7 @@ export default {
p {
opacity: 0.8;
font-size: 16px;
color: #FFFFFF;
color: #ffffff;
letter-spacing: 0;
line-height: 16px;
font-weight: 400;
@ -498,7 +600,7 @@ export default {
.zhishu {
font-family: AlimamaShuHeiTi;
font-size: 20px;
color: #FFFFFF;
color: #ffffff;
letter-spacing: 1px;
line-height: 22px;
font-weight: 700;
@ -510,7 +612,7 @@ export default {
top: 100%;
width: 225px;
height: 132px;
background: url('~@/assets/companyFile/编组 2421.png') no-repeat;
background: url("~@/assets/companyFile/编组 2421.png") no-repeat;
background-size: 100% 100%;
padding-left: 26px;
padding-top: 20px;
@ -520,7 +622,7 @@ export default {
box-sizing: border-box;
text-align: left;
font-size: 14px;
color: #FFFFFF;
color: #ffffff;
letter-spacing: 0;
font-weight: 400;
margin-top: 10px;
@ -528,7 +630,7 @@ export default {
span {
font-family: AlimamaShuHeiTi;
font-size: 20px;
color: #EBFFF8;
color: #ebfff8;
letter-spacing: 2.5px;
line-height: 37px;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
@ -550,7 +652,7 @@ export default {
width: 1px;
height: 100%;
opacity: 0.7;
background: #959A9F;
background: #959a9f;
}
}
}
@ -562,7 +664,6 @@ export default {
border: 1px solid rgba(91, 116, 140, 0.6);
.jibenhang {
height: 41px;
width: 100%;
@ -575,7 +676,7 @@ export default {
padding-left: 10px;
width: 150px;
height: 100%;
background: rgba(108, 128, 151, 0.20);
background: rgba(108, 128, 151, 0.2);
line-height: 40px;
border-right: 1px solid rgba(91, 116, 140, 0.6);
font-size: 14px;
@ -591,7 +692,7 @@ export default {
width: calc(100% - 151px);
line-height: 40px;
font-size: 14px;
color: #FFFFFF;
color: #ffffff;
letter-spacing: 0;
font-weight: 400;
overflow: hidden;
@ -607,7 +708,7 @@ export default {
border-right: 1px solid rgba(91, 116, 140, 0.6);
line-height: 40px;
font-size: 14px;
color: #FFFFFF;
color: #ffffff;
letter-spacing: 0;
font-weight: 400;
}
@ -619,21 +720,20 @@ export default {
height: 100%;
line-height: 40px;
font-size: 14px;
color: #FFFFFF;
color: #ffffff;
letter-spacing: 0;
font-weight: 400;
overflow: hidden;
.shewei {
display: inline-block;
height: 26px;
line-height: 26px;
width: auto;
background: url('~@/assets/companyFile/编组 11991.png') no-repeat;
background: url("~@/assets/companyFile/编组 11991.png") no-repeat;
padding: 0 5px;
font-size: 14px;
color: #B5EBFF;
color: #b5ebff;
letter-spacing: 0.44px;
font-weight: 400;
background-size: 100% 100%;
@ -645,10 +745,11 @@ export default {
height: 26px;
line-height: 26px;
width: auto;
background: url('~@/assets/companyFile/编组 11222221.png') no-repeat;
background: url("~@/assets/companyFile/编组 11222221.png")
no-repeat;
padding: 0 5px;
font-size: 14px;
color: #E3DEFF;
color: #e3deff;
letter-spacing: 0.44px;
font-weight: 400;
background-size: 100% 100%;
@ -659,10 +760,11 @@ export default {
height: 26px;
line-height: 26px;
width: auto;
background: url('~@/assets/companyFile/编组 11991备份 10.png') no-repeat;
background: url("~@/assets/companyFile/编组 11991备份 10.png")
no-repeat;
padding: 0 5px;
font-size: 14px;
color: #E3DEFF;
color: #e3deff;
display: inline-block;
letter-spacing: 0.44px;
font-weight: 400;
@ -675,16 +777,16 @@ export default {
line-height: 26px;
width: auto;
display: inline-block;
background: url('~@/assets/companyFile/编组 11991备份 21.png') no-repeat;
background: url("~@/assets/companyFile/编组 11991备份 21.png")
no-repeat;
padding: 0 5px;
font-size: 14px;
color: #E3DEFF;
color: #e3deff;
letter-spacing: 0.44px;
font-weight: 400;
background-size: 100% 100%;
margin-right: 10px;
}
}
}
@ -723,27 +825,26 @@ export default {
line-height: 36;
text-align: center;
font-size: 16px;
color: #EBFFF4;
color: #ebfff4;
letter-spacing: 2px;
line-height: 36px;
text-shadow: 0 0 9px rgba(21, 255, 195, 0.60);
text-shadow: 0 0 9px rgba(21, 255, 195, 0.6);
font-weight: 400;
}
}
}
.picForm {
/deep/ .el-dialog {
background-color: rgba(0, 0, 0, 0);
background: url('~@/assets/companyFile/背景.png') no-repeat;
background: url("~@/assets/companyFile/背景.png") no-repeat;
background-size: 100% 100%;
width: 811px;
height: 534px;
.el-dialog__title {
font-size: 16px;
color: #EBFFF4;
color: #ebfff4;
letter-spacing: 2px;
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
@ -779,9 +880,9 @@ export default {
padding: 0;
line-height: 46px;
text-align: center;
background: #163C53;
background: #163c53;
font-size: 16px;
color: #F8FBFF;
color: #f8fbff;
letter-spacing: 0.89px;
font-weight: 500;
border: 0;
@ -795,10 +896,10 @@ export default {
text-align: center;
background: rgba(0, 0, 0, 0);
border: 0;
background: url('~@/assets/companyFile/2121.png') no-repeat;
background: url("~@/assets/companyFile/2121.png") no-repeat;
background-size: 100% 100%;
font-size: 16px;
color: #F8FBFF;
color: #f8fbff;
letter-spacing: 0.89px;
font-weight: 500;
}
@ -810,27 +911,27 @@ export default {
/deep/.el-menu {
font-family: PingFangSC-Regular;
font-size: 16px;
color: #E3F5FF;
color: #e3f5ff;
letter-spacing: 1.14px;
font-weight: 400;
background: rgba(255, 255, 255, 0);
.el-menu-item {
background: url('~@/assets/companyFile/背景921.png') no-repeat;
background: url("~@/assets/companyFile/背景921.png") no-repeat;
background-size: 100% 100%;
height: 42px;
line-height: 42px;
color: #E3F5FF;
color: #e3f5ff;
letter-spacing: 1.14px;
font-weight: 400;
margin-bottom: 15px;
}
.el-submenu {
background: url('~@/assets/companyFile/27812.png') no-repeat;
background: url("~@/assets/companyFile/27812.png") no-repeat;
background-size: 100% 100%;
color: #E3F5FF;
color: #e3f5ff;
letter-spacing: 1.14px;
font-weight: 400;
margin-bottom: 15px;
@ -859,11 +960,11 @@ export default {
}
.el-submenu__title i {
color: #E3F5FF;
color: #e3f5ff;
}
.el-submenu__title {
color: #E3F5FF;
color: #e3f5ff;
height: 42px;
line-height: 42px;
letter-spacing: 1.14px;
@ -873,8 +974,7 @@ export default {
}
.el-submenu__title:hover {
color: #E3F5FF;
color: #e3f5ff;
letter-spacing: 1.14px;
font-weight: 400;
background: rgba(255, 255, 255, 0);
@ -884,7 +984,7 @@ export default {
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: rgba(64, 158, 255, 0);
color: #ccc;
border: 1px solid #76EAE4;
border: 1px solid #76eae4;
}
/deep/.el-tooltip__popper {

@ -67,19 +67,15 @@
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="table_pagination">
<el-pagination
:background="true"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[5, 10]"
:page-size="pageSize"
:current-page="pageNum"
layout="total, sizes, prev, pager, next, jumper"
<lkyPagination
:page_sizes="page_sizes"
:pageSize="pageSize"
:pageNum="pageNum"
:total="total"
>
</el-pagination>
</div>
:pagination_width="pagination_width"
@size_change="size_change"
@num_change="num_change"
></lkyPagination>
</div>
</div>
</div>
@ -126,6 +122,8 @@ export default {
],
},
table_data: [],
page_sizes: [5, 10],
pagination_width: "96",
pageSize: 10,
pageNum: 1,
total: 0,
@ -399,64 +397,4 @@ export default {
}
}
}
.table_pagination {
width: 96vw;
height: 5vh;
display: flex;
flex-direction: row-reverse;
/deep/.el-input--suffix .el-input__inner {
color: #fff;
border: 0.1px solid #277f79;
border-radius: 0px;
background: rgba(0, 0, 0, 0);
width: 5vw;
height: 2.6vh;
line-height: 2.6vh;
}
/deep/.el-input__icon {
color: #fff;
line-height: 2.6vh;
height: 2.6vh;
}
/deep/.el-pagination {
margin-top: 1vh;
.el-pagination__total {
color: #fff;
}
.el-input__inner {
border-radius: 0px;
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
.btn-prev {
border-radius: 0px;
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
ul {
li {
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
}
.btn-next {
border: 0.1px solid #28847e;
border-radius: 0px;
background: #3c4b4a;
color: #fff;
}
.el-pager {
li {
border: 0.1px solid #28847e;
background: #3c4b4a !important;
}
}
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
border: 2px solid #76eae4;
}
}
</style>

@ -60,6 +60,23 @@
<div class="line_item_one"></div>
<div class="line_item_two"></div>
</div>
<!-- 流程点 -->
<div class="next_point">
<div class="next_point_item_one">
<div class="next_point_item_one_text">1.转处置任务治安大队</div>
</div>
<div class="next_point_item_two">
<div class="next_point_item_two_text">1.转处置任务治安大队</div>
</div>
<div class="next_point_item_three">
<div class="next_point_item_three_text">1.转处置任务治安大队</div>
</div>
</div>
<!-- 流程线 -->
<div class="line_three_i">
<div class="line_item_one"></div>
<div class="line_item_two"></div>
</div>
<!-- 流程线 -->
<div class="line_four">
<div class="line_item"></div>
@ -208,32 +225,32 @@ export default {
}
}
.line_one {
width: 10vw;
width: 5vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.line_item {
width: 10vw;
width: 5vw;
height: 2px;
background: #278961;
}
}
.line_two {
width: 8vw;
width: 4vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 8vw;
width: 4vw;
height: 15vh;
border-left: 2px solid #278961;
border-bottom: 2px solid #278961;
border-top: 1px solid #278961;
}
.line_item_two {
width: 8vw;
width: 4vw;
height: 15vh;
border-left: 2px solid #278961;
border-top: 2px solid #278961;
@ -325,20 +342,41 @@ export default {
}
}
.line_three {
width: 8vw;
width: 4vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 8vw;
width: 4vw;
height: 15vh;
// border-right: 2px solid #747b7e;
border-bottom: 2px solid #747b7e;
border-top: 1px solid #747b7e;
}
.line_item_two {
width: 4vw;
height: 15vh;
// border-right: 2px solid #747b7e;
border-top: 2px solid #747b7e;
border-bottom: 1px solid #747b7e;
}
}
.line_three_i {
width: 4vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 4vw;
height: 15vh;
border-right: 2px solid #747b7e;
border-bottom: 2px solid #747b7e;
border-top: 1px solid #747b7e;
}
.line_item_two {
width: 8vw;
width: 4vw;
height: 15vh;
border-right: 2px solid #747b7e;
border-top: 2px solid #747b7e;

@ -84,19 +84,15 @@
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="table_pagination">
<el-pagination
:background="true"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[5, 10]"
:page-size="pageSize"
:current-page="pageNum"
layout="total, sizes, prev, pager, next, jumper"
<lkyPagination
:page_sizes="page_sizes"
:pageSize="pageSize"
:pageNum="pageNum"
:total="total"
>
</el-pagination>
</div>
:pagination_width="pagination_width"
@size_change="size_change"
@num_change="num_change"
></lkyPagination>
</div>
</div>
</div>
@ -151,6 +147,8 @@ export default {
],
},
table_data: [],
page_sizes: [5, 10],
pagination_width: "96",
pageSize: 10,
pageNum: 1,
total: 0,
@ -278,14 +276,14 @@ export default {
return "驳回";
}
},
handleSizeChange(val) {
console.log(`每页 ${val}`);
// --
size_change(val) {
this.pageNum = 1;
this.pageSize = val;
this.search_data();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
// --
num_change(val) {
this.pageNum = val;
this.search_data();
},
@ -433,64 +431,4 @@ export default {
}
}
}
.table_pagination {
width: 96vw;
height: 5vh;
display: flex;
flex-direction: row-reverse;
/deep/.el-input--suffix .el-input__inner {
color: #fff;
border: 0.1px solid #277f79;
border-radius: 0px;
background: rgba(0, 0, 0, 0);
width: 5vw;
height: 2.6vh;
line-height: 2.6vh;
}
/deep/.el-input__icon {
color: #fff;
line-height: 2.6vh;
height: 2.6vh;
}
/deep/.el-pagination {
margin-top: 1vh;
.el-pagination__total {
color: #fff;
}
.el-input__inner {
border-radius: 0px;
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
.btn-prev {
border-radius: 0px;
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
ul {
li {
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
}
.btn-next {
border: 0.1px solid #28847e;
border-radius: 0px;
background: #3c4b4a;
color: #fff;
}
.el-pager {
li {
border: 0.1px solid #28847e;
background: #3c4b4a !important;
}
}
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
border: 2px solid #76eae4;
}
}
</style>

@ -60,6 +60,23 @@
<div class="line_item_one"></div>
<div class="line_item_two"></div>
</div>
<!-- 流程点 -->
<div class="next_point">
<div class="next_point_item_one">
<div class="next_point_item_one_text">1.转处置任务治安大队</div>
</div>
<div class="next_point_item_two">
<div class="next_point_item_two_text">1.转处置任务治安大队</div>
</div>
<div class="next_point_item_three">
<div class="next_point_item_three_text">1.转处置任务治安大队</div>
</div>
</div>
<!-- 流程线 -->
<div class="line_three_i">
<div class="line_item_one"></div>
<div class="line_item_two"></div>
</div>
<!-- 流程线 -->
<div class="line_four">
<div class="line_item"></div>
@ -208,32 +225,32 @@ export default {
}
}
.line_one {
width: 10vw;
width: 5vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.line_item {
width: 10vw;
width: 5vw;
height: 2px;
background: #278961;
}
}
.line_two {
width: 8vw;
width: 4vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 8vw;
width: 4vw;
height: 15vh;
border-left: 2px solid #278961;
border-bottom: 2px solid #278961;
border-top: 1px solid #278961;
}
.line_item_two {
width: 8vw;
width: 4vw;
height: 15vh;
border-left: 2px solid #278961;
border-top: 2px solid #278961;
@ -325,20 +342,41 @@ export default {
}
}
.line_three {
width: 8vw;
width: 4vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 8vw;
width: 4vw;
height: 15vh;
// border-right: 2px solid #747b7e;
border-bottom: 2px solid #747b7e;
border-top: 1px solid #747b7e;
}
.line_item_two {
width: 4vw;
height: 15vh;
// border-right: 2px solid #747b7e;
border-top: 2px solid #747b7e;
border-bottom: 1px solid #747b7e;
}
}
.line_three_i {
width: 4vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 4vw;
height: 15vh;
border-right: 2px solid #747b7e;
border-bottom: 2px solid #747b7e;
border-top: 1px solid #747b7e;
}
.line_item_two {
width: 8vw;
width: 4vw;
height: 15vh;
border-right: 2px solid #747b7e;
border-top: 2px solid #747b7e;

@ -81,19 +81,15 @@
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="table_pagination">
<el-pagination
:background="true"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[5, 10]"
:page-size="pageSize"
:current-page="pageNum"
layout="total, sizes, prev, pager, next, jumper"
<lkyPagination
:page_sizes="page_sizes"
:pageSize="pageSize"
:pageNum="pageNum"
:total="total"
>
</el-pagination>
</div>
:pagination_width="pagination_width"
@size_change="size_change"
@num_change="num_change"
></lkyPagination>
</div>
</div>
</div>
@ -148,6 +144,8 @@ export default {
],
},
table_data: [],
page_sizes: [5, 10],
pagination_width: "96",
pageSize: 10,
pageNum: 1,
total: 0,
@ -273,14 +271,14 @@ export default {
return "驳回";
}
},
handleSizeChange(val) {
console.log(`每页 ${val}`);
// --
size_change(val) {
this.pageNum = 1;
this.pageSize = val;
this.search_data();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
// --
num_change(val) {
this.pageNum = val;
this.search_data();
},
@ -427,64 +425,4 @@ export default {
}
}
}
.table_pagination {
width: 96vw;
height: 5vh;
display: flex;
flex-direction: row-reverse;
/deep/.el-input--suffix .el-input__inner {
color: #fff;
border: 0.1px solid #277f79;
border-radius: 0px;
background: rgba(0, 0, 0, 0);
width: 5vw;
height: 2.6vh;
line-height: 2.6vh;
}
/deep/.el-input__icon {
color: #fff;
line-height: 2.6vh;
height: 2.6vh;
}
/deep/.el-pagination {
margin-top: 1vh;
.el-pagination__total {
color: #fff;
}
.el-input__inner {
border-radius: 0px;
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
.btn-prev {
border-radius: 0px;
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
ul {
li {
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
}
.btn-next {
border: 0.1px solid #28847e;
border-radius: 0px;
background: #3c4b4a;
color: #fff;
}
.el-pager {
li {
border: 0.1px solid #28847e;
background: #3c4b4a !important;
}
}
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
border: 2px solid #76eae4;
}
}
</style>

@ -27,7 +27,7 @@
<div class="picture_item">
<div class="start_point">
<div class="start_point_item">
<div class="start_point_item_text">1.转处置任务治安大队</div>
<div class="start_point_item_text">转处置任务治安大队</div>
</div>
</div>
<div class="line_one">
@ -46,13 +46,13 @@
<!-- 流程点 -->
<div class="next_point">
<div class="next_point_item_one">
<div class="next_point_item_one_text">1.转处置任务治安大队</div>
<div class="next_point_item_one_text">转处置任务治安大队</div>
</div>
<div class="next_point_item_two">
<div class="next_point_item_two_text">1.转处置任务治安大队</div>
<div class="next_point_item_two_text">转处置任务治安大队</div>
</div>
<div class="next_point_item_three">
<div class="next_point_item_three_text">1.转处置任务治安大队</div>
<div class="next_point_item_three_text">转处置任务治安大队</div>
</div>
</div>
<!-- 流程线 -->
@ -60,6 +60,23 @@
<div class="line_item_one"></div>
<div class="line_item_two"></div>
</div>
<!-- 流程点 -->
<div class="next_point">
<div class="next_point_item_one">
<div class="next_point_item_one_text">转处置任务治安大队</div>
</div>
<div class="next_point_item_two">
<div class="next_point_item_two_text">转处置任务治安大队</div>
</div>
<div class="next_point_item_three">
<div class="next_point_item_three_text">转处置任务治安大队</div>
</div>
</div>
<!-- 流程线 -->
<div class="line_three_i">
<div class="line_item_one"></div>
<div class="line_item_two"></div>
</div>
<!-- 流程线 -->
<div class="line_four">
<div class="line_item"></div>
@ -71,7 +88,7 @@
<!-- 流程终结点 -->
<div class="end_point">
<div class="end_point_item">
<div class="end_point_item_text">1.转处置任务治安大队</div>
<div class="end_point_item_text">转处置任务治安大队</div>
</div>
</div>
</div>
@ -208,32 +225,32 @@ export default {
}
}
.line_one {
width: 10vw;
width: 5vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.line_item {
width: 10vw;
width: 5vw;
height: 2px;
background: #278961;
}
}
.line_two {
width: 8vw;
width: 4vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 8vw;
width: 4vw;
height: 15vh;
border-left: 2px solid #278961;
border-bottom: 2px solid #278961;
border-top: 1px solid #278961;
}
.line_item_two {
width: 8vw;
width: 4vw;
height: 15vh;
border-left: 2px solid #278961;
border-top: 2px solid #278961;
@ -325,20 +342,41 @@ export default {
}
}
.line_three {
width: 8vw;
width: 4vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 8vw;
width: 4vw;
height: 15vh;
// border-right: 2px solid #747b7e;
border-bottom: 2px solid #747b7e;
border-top: 1px solid #747b7e;
}
.line_item_two {
width: 4vw;
height: 15vh;
// border-right: 2px solid #747b7e;
border-top: 2px solid #747b7e;
border-bottom: 1px solid #747b7e;
}
}
.line_three_i {
width: 4vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 4vw;
height: 15vh;
border-right: 2px solid #747b7e;
border-bottom: 2px solid #747b7e;
border-top: 1px solid #747b7e;
}
.line_item_two {
width: 8vw;
width: 4vw;
height: 15vh;
border-right: 2px solid #747b7e;
border-top: 2px solid #747b7e;

@ -78,19 +78,15 @@
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="table_pagination">
<el-pagination
:background="true"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[5, 10]"
:page-size="pageSize"
:current-page="pageNum"
layout="total, sizes, prev, pager, next, jumper"
<lkyPagination
:page_sizes="page_sizes"
:pageSize="pageSize"
:pageNum="pageNum"
:total="total"
>
</el-pagination>
</div>
:pagination_width="pagination_width"
@size_change="size_change"
@num_change="num_change"
></lkyPagination>
</div>
</div>
</div>
@ -145,6 +141,8 @@ export default {
],
},
table_data: [],
page_sizes: [5, 10],
pagination_width: "96",
pageSize: 10,
pageNum: 1,
total: 0,
@ -200,7 +198,6 @@ export default {
},
//
check_details(val) {
console.log("12344", val);
this.$emit("change_to_detail", val); //
},
//
@ -278,14 +275,14 @@ export default {
return "驳回";
}
},
handleSizeChange(val) {
console.log(`每页 ${val}`);
// --
size_change(val) {
this.pageNum = 1;
this.pageSize = val;
this.search_data();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
// --
num_change(val) {
this.pageNum = val;
this.search_data();
},
@ -440,64 +437,4 @@ export default {
// border: 0.1px solid #2f6363;
}
}
.table_pagination {
width: 96vw;
height: 5vh;
display: flex;
flex-direction: row-reverse;
/deep/.el-input--suffix .el-input__inner {
color: #fff;
border: 0.1px solid #277f79;
border-radius: 0px;
background: rgba(0, 0, 0, 0);
width: 5vw;
height: 2.6vh;
line-height: 2.6vh;
}
/deep/.el-input__icon {
color: #fff;
line-height: 2.6vh;
height: 2.6vh;
}
/deep/.el-pagination {
margin-top: 1vh;
.el-pagination__total {
color: #fff;
}
.el-input__inner {
border-radius: 0px;
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
.btn-prev {
border-radius: 0px;
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
ul {
li {
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
}
.btn-next {
border: 0.1px solid #28847e;
border-radius: 0px;
background: #3c4b4a;
color: #fff;
}
.el-pager {
li {
border: 0.1px solid #28847e;
background: #3c4b4a !important;
}
}
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
border: 2px solid #76eae4;
}
}
</style>

@ -27,7 +27,7 @@
<div class="picture_item">
<div class="start_point">
<div class="start_point_item">
<div class="start_point_item_text">1.转处置任务治安大队</div>
<div class="start_point_item_text">转处置任务治安大队</div>
</div>
</div>
<div class="line_one">
@ -46,13 +46,13 @@
<!-- 流程点 -->
<div class="next_point">
<div class="next_point_item_one">
<div class="next_point_item_one_text">1.转处置任务治安大队</div>
<div class="next_point_item_one_text">转处置任务治安大队</div>
</div>
<div class="next_point_item_two">
<div class="next_point_item_two_text">1.转处置任务治安大队</div>
<div class="next_point_item_two_text">转处置任务治安大队</div>
</div>
<div class="next_point_item_three">
<div class="next_point_item_three_text">1.转处置任务治安大队</div>
<div class="next_point_item_three_text">转处置任务治安大队</div>
</div>
</div>
<!-- 流程线 -->
@ -60,6 +60,23 @@
<div class="line_item_one"></div>
<div class="line_item_two"></div>
</div>
<!-- 流程点 -->
<div class="next_point">
<div class="next_point_item_one">
<div class="next_point_item_one_text">转处置任务治安大队</div>
</div>
<div class="next_point_item_two">
<div class="next_point_item_two_text">转处置任务治安大队</div>
</div>
<div class="next_point_item_three">
<div class="next_point_item_three_text">转处置任务治安大队</div>
</div>
</div>
<!-- 流程线 -->
<div class="line_three_i">
<div class="line_item_one"></div>
<div class="line_item_two"></div>
</div>
<!-- 流程线 -->
<div class="line_four">
<div class="line_item"></div>
@ -208,32 +225,32 @@ export default {
}
}
.line_one {
width: 10vw;
width: 5vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.line_item {
width: 10vw;
width: 5vw;
height: 2px;
background: #278961;
}
}
.line_two {
width: 8vw;
width: 4vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 8vw;
width: 4vw;
height: 15vh;
border-left: 2px solid #278961;
border-bottom: 2px solid #278961;
border-top: 1px solid #278961;
}
.line_item_two {
width: 8vw;
width: 4vw;
height: 15vh;
border-left: 2px solid #278961;
border-top: 2px solid #278961;
@ -325,20 +342,41 @@ export default {
}
}
.line_three {
width: 8vw;
width: 4vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 8vw;
width: 4vw;
height: 15vh;
// border-right: 2px solid #747b7e;
border-bottom: 2px solid #747b7e;
border-top: 1px solid #747b7e;
}
.line_item_two {
width: 4vw;
height: 15vh;
// border-right: 2px solid #747b7e;
border-top: 2px solid #747b7e;
border-bottom: 1px solid #747b7e;
}
}
.line_three_i {
width: 4vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 4vw;
height: 15vh;
border-right: 2px solid #747b7e;
border-bottom: 2px solid #747b7e;
border-top: 1px solid #747b7e;
}
.line_item_two {
width: 8vw;
width: 4vw;
height: 15vh;
border-right: 2px solid #747b7e;
border-top: 2px solid #747b7e;

@ -70,7 +70,7 @@
</ul>
</div>
<!-- 分页区域 -->
<div class="footer">
<!-- <div class="footer">
<el-pagination
:background="true"
@current-change="handleCurrentChange"
@ -81,7 +81,16 @@
:total="total"
>
</el-pagination>
</div>
</div> -->
<lkyPagination
:page_sizes="page_sizes"
:pageSize="pageSize"
:pageNum="pageNum"
:total="total"
:pagination_width="pagination_width"
@size_change="size_change"
@num_change="num_change"
></lkyPagination>
</div>
</el-card>
</div>
@ -105,9 +114,11 @@ export default {
return {
searchCompany: "",
company_data: [],
page_sizes: [6],
pageSize: 6,
pageNum: 1,
total: "",
total: 0,
pagination_width: "84",
};
},
created() {
@ -159,8 +170,14 @@ export default {
}
});
}, 300),
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
// --
size_change(val) {
this.pageNum = 1;
this.pageSize = val;
this.getData();
},
// --
num_change(val) {
this.pageNum = val;
this.getData();
},
@ -184,7 +201,7 @@ export default {
<style lang="less" scoped>
/* card统一样式 */
.el-card.box-card.is-always-shadow {
height: calc(100vh - 116px);
height: calc(100vh - 120px);
/* 控制card布局高度,用于适配 */
position: relative;
@ -498,67 +515,6 @@ export default {
}
}
}
/* 底部分页展示区域 */
.footer {
height: 5vh;
display: flex;
flex-direction: row-reverse;
/deep/.el-input--suffix .el-input__inner {
color: #fff;
border: 0.1px solid #277f79;
border-radius: 0px;
background: rgba(0, 0, 0, 0);
width: 5vw;
height: 2.6vh;
line-height: 2.6vh;
}
/deep/.el-input__icon {
color: #fff;
line-height: 2.6vh;
height: 2.6vh;
}
/deep/.el-pagination {
margin-top: 1vh;
.el-pagination__total {
color: #fff;
}
.el-input__inner {
border-radius: 0px;
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
.btn-prev {
border-radius: 0px;
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
ul {
li {
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
}
.btn-next {
border: 0.1px solid #28847e;
border-radius: 0px;
background: #3c4b4a;
color: #fff;
}
.el-pager {
li {
border: 0.1px solid #28847e;
background: #3c4b4a !important;
}
}
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
border: 2px solid #76eae4;
}
}
}
}
</style>

@ -63,19 +63,15 @@
:table_data="table_data"
:jump_params="jump_params"
></CompanyTable>
<div class="table_pagination">
<el-pagination
:background="true"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[5, 10]"
:page-size="pageSize"
:current-page="pageNum"
layout="total, sizes, prev, pager, next, jumper"
<lkyPagination
:page_sizes="page_sizes"
:pageSize="pageSize"
:pageNum="pageNum"
:total="total"
>
</el-pagination>
</div>
:pagination_width="pagination_width"
@size_change="size_change"
@num_change="num_change"
></lkyPagination>
</div>
</div>
</el-card>
@ -117,9 +113,11 @@ export default {
jump_params: {}, //
show_value: "",
table_data: [],
page_sizes: [5, 10],
pageSize: 10,
pageNum: 1,
total: 0,
total: 16,
pagination_width: "85.2",
};
},
created() {
@ -211,14 +209,14 @@ export default {
this.$message.warning("企业查询失败");
});
},
handleSizeChange(val) {
console.log(`每页 ${val}`);
// --
size_change(val) {
this.pageNum = 1;
this.pageSize = val;
this.search();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
// --
num_change(val) {
this.pageNum = val;
this.search();
},
@ -229,7 +227,8 @@ export default {
/* card统一样式 */
.el-card.box-card.is-always-shadow {
border: 0px;
height: 88vh; /* 控制card布局高度,用于适配 */
/* 控制card布局高度,用于适配 */
height: calc(100vh - 120px);
position: relative;
background: url("~@/assets/companyFile/22136.png") no-repeat !important;
background-size: 100% 100% !important;
@ -274,13 +273,6 @@ export default {
background: #4d8f89;
}
}
}
.table_body {
width: 85.2vw;
height: 68vh;
margin-top: 3vh;
// border: 0.1px solid #4d8f89;
}
/deep/.el-input--suffix .el-input__inner {
color: #fff;
border: 0.1px solid #34a6a6;
@ -307,65 +299,12 @@ export default {
height: 4vh;
}
}
}
.table_pagination {
width: 85.2vw;
height: 5vh;
display: flex;
flex-direction: row-reverse;
/deep/.el-input--suffix .el-input__inner {
color: #fff;
border: 0.1px solid #34a6a6;
border-radius: 0px;
background: rgba(0, 0, 0, 0);
width: 5vw;
height: 2.6vh;
line-height: 2.6vh;
}
/deep/.el-input__icon {
color: #fff;
line-height: 2.6vh;
height: 2.6vh;
}
/deep/.el-pagination {
margin-top: 1vh;
.el-pagination__total {
color: #fff;
}
.el-input__inner {
border-radius: 0px;
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
.btn-prev {
border-radius: 0px;
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
ul {
li {
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
}
.btn-next {
border: 0.1px solid #28847e;
border-radius: 0px;
background: #3c4b4a;
color: #fff;
}
.el-pager {
li {
border: 0.1px solid #28847e;
background: #3c4b4a !important;
}
}
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
border: 2px solid #76eae4;
.table_body {
width: 85.2vw;
height: 68vh;
margin-top: 3vh;
// border: 0.1px solid #4d8f89;
}
}
</style>

@ -148,7 +148,8 @@ export default {
/* card统一样式 */
.el-card.box-card.is-always-shadow {
border: 0px;
height: 88.5vh; /* 控制card布局高度,用于适配 */
/* 控制card布局高度,用于适配 */
height: calc(100vh - 120px);
position: relative;
background: url("~@/assets/companyFile/22136.png") no-repeat !important;
background-size: 100% 100% !important;

@ -324,7 +324,8 @@ export default {
/* card统一样式 */
.el-card.box-card.is-always-shadow {
border: 0px;
height: 88vh; /* 控制card布局高度,用于适配 */
/* 控制card布局高度,用于适配 */
height: calc(100vh - 120px);
position: relative;
background: url("~@/assets/companyFile/22136.png") no-repeat !important;
background-size: 100% 100% !important;

Loading…
Cancel
Save