<template>
|
<div class="containerTable">
|
<div class="tableHead">
|
<span>姓名</span>
|
<span>性别</span>
|
<span>职务</span>
|
<span>电话</span>
|
</div>
|
<div class="tablecontent">
|
<vueSeamlessScroll :data="peopleList" class="warp" :class-option="defaultOption" >
|
<div v-for="(item,index) in peopleList" :class="{ 'tablecontentItem': index%2==0,'tablecontentItemJ': index%2==1 }">
|
<span>{{item.name}}</span>
|
<span>{{item.sex}}</span>
|
<span>{{item.duty}}</span>
|
<span>{{item.phone}}</span>
|
</div>
|
</vueSeamlessScroll>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import {axios_get,axios_post} from "../../../until/request.js"
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
export default {
|
components: {
|
vueSeamlessScroll
|
},
|
data() {
|
return {
|
chart1: {},
|
chart1option: {},
|
peopleList:[],
|
|
|
}
|
},
|
|
methods:{
|
GetQYPeople(){
|
let pid= this.$store.state.Pid;
|
axios_get("/safe/getCorpMessage/"+pid).then(reponse=>{
|
//console.log(reponse);
|
this.peopleList=reponse.data.corpPersons;
|
})
|
|
|
}
|
},
|
|
mounted() {
|
this.GetQYPeople();
|
},
|
|
|
|
|
computed: {
|
defaultOption() {
|
return {
|
step: 0, // 数值越大速度滚动越快
|
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
|
hoverStop: true, // 是否开启鼠标悬停stop
|
direction: 1, // 0向下 1向上 2向左 3向右
|
openWatch: true, // 开启数据实时监控刷新dom
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
waitTime: 10000 // 单步运动停止的时间(默认值1000ms)
|
}
|
}
|
|
},
|
|
|
watch: {
|
'$store.state.Pid': {
|
deep: true, //深度监听
|
handler(newValue, oldValue) {
|
this.GetQYPeople();
|
},
|
},
|
},
|
|
|
}
|
</script>
|
|
<style scoped="scoped" lang="less">
|
.containerTable {
|
position: relative;
|
height: 100%;
|
width: 100%;
|
|
.tableHead {
|
height: 60px;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
background: linear-gradient(to bottom, #153184, #0A1941);
|
|
span {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 25%;
|
height: 100%;
|
color: #FFF;
|
font-size: 25px;
|
}
|
}
|
|
.tablecontent {
|
height: calc(100% - 60px);
|
width: 100%;
|
.warp{
|
height: 100%;
|
width: 100%;
|
overflow-y: scroll;
|
}
|
.tablecontentItem {
|
height: 60px;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
|
span {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 25%;
|
height: 100%;
|
color: #FFF;
|
font-size: 20px;
|
}
|
}
|
|
.tablecontentItemJ {
|
height: 60px;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
background-color: #08163B;
|
span {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 25%;
|
height: 100%;
|
color: #FFF;
|
font-size: 20px;
|
}
|
}
|
|
|
}
|
}
|
|
</style>
|
