<template>
|
<div class="liuchengDetailForm">
|
<el-dialog
|
title="提示"
|
:visible.sync="dialogVisible"
|
width="1200px"
|
v-dialogDrag>
|
<div slot="title" class="dialog-title">
|
<h1>综合执法一大队</h1>
|
</div>
|
<div class="liucheng-main">
|
<div class="main-block" v-for="item in renyuanData" :key="index">
|
<div class="touxiang-box">
|
<img v-if="item.imgSrc" :src="item.imgSrc" alt="">
|
<h1 v-else>暂无照片</h1>
|
</div>
|
<div class="xinxi-box">
|
<div class="xinxi-content">
|
<div class="xinxi-left">
|
<div class="xinxi-left-line"><h1>姓名：{{item.name}}</h1></div>
|
<div class="xinxi-left-line"><h1>性别：{{item.sex}}</h1></div>
|
<div class="xinxi-left-line"><h1>年龄：{{item.age}}</h1></div>
|
<div class="xinxi-left-line"><h1>执法数量：{{item.zhiNum}}</h1></div>
|
</div>
|
<div class="xinxi-right">
|
<div class="xinxi-right-line"><h1>执法证号：{{item.zhiCard}}</h1></div>
|
<div class="xinxi-right-line"><h1>联系电话：{{item.phone}}</h1></div>
|
<div class="xinxi-right-line"><h1>所属职位：{{item.zhiwei}}</h1></div>
|
<!--<div class="xinxi-right-line"><h1>原执法主体：县农村局</h1></div>-->
|
</div>
|
</div>
|
<!--<div class="caozuo-box">
|
<img src="../../assets/lawImg/edtior.png" alt="">
|
<img src="../../assets/lawImg/delate2.png" alt="">
|
</div>-->
|
</div>
|
</div>
|
<!--<div class="main-block">
|
<div class="touxiang-box">
|
<img src="../../assets/lawImg/touxiang.png" alt="">
|
</div>
|
<div class="xinxi-box">
|
<div class="xinxi-content">
|
<div class="xinxi-left">
|
<div class="xinxi-left-line"><h1>姓名：长大发</h1></div>
|
<div class="xinxi-left-line"><h1>性别：男</h1></div>
|
<div class="xinxi-left-line"><h1>年龄：30</h1></div>
|
<div class="xinxi-left-line"><h1>执法数量：3</h1></div>
|
</div>
|
<div class="xinxi-right">
|
<div class="xinxi-right-line"><h1>执法证号：11232211</h1></div>
|
<div class="xinxi-right-line"><h1>联系电话：153325666</h1></div>
|
<div class="xinxi-right-line"><h1>所属职位：***</h1></div>
|
<div class="xinxi-right-line"><h1>原执法主体：县农村局</h1></div>
|
</div>
|
</div>
|
<!–<div class="caozuo-box">
|
<img src="../../assets/lawImg/edtior.png" alt="">
|
<img src="../../assets/lawImg/delate2.png" alt="">
|
</div>–>
|
</div>
|
</div>
|
<div class="main-block">
|
<div class="touxiang-box">
|
<img src="../../assets/lawImg/touxiang.png" alt="">
|
</div>
|
<div class="xinxi-box">
|
<div class="xinxi-content">
|
<div class="xinxi-left">
|
<div class="xinxi-left-line"><h1>姓名：长大发</h1></div>
|
<div class="xinxi-left-line"><h1>性别：男</h1></div>
|
<div class="xinxi-left-line"><h1>年龄：30</h1></div>
|
<div class="xinxi-left-line"><h1>执法数量：3</h1></div>
|
</div>
|
<div class="xinxi-right">
|
<div class="xinxi-right-line"><h1>执法证号：11232211</h1></div>
|
<div class="xinxi-right-line"><h1>联系电话：153325666</h1></div>
|
<div class="xinxi-right-line"><h1>所属职位：***</h1></div>
|
<div class="xinxi-right-line"><h1>原执法主体：县农村局</h1></div>
|
</div>
|
</div>
|
<!–<div class="caozuo-box">
|
<img src="../../assets/lawImg/edtior.png" alt="">
|
<img src="../../assets/lawImg/delate2.png" alt="">
|
</div>–>
|
</div>
|
</div>
|
<div class="main-block">
|
<div class="touxiang-box">
|
<img src="../../assets/lawImg/touxiang.png" alt="">
|
</div>
|
<div class="xinxi-box">
|
<div class="xinxi-content">
|
<div class="xinxi-left">
|
<div class="xinxi-left-line"><h1>姓名：长大发</h1></div>
|
<div class="xinxi-left-line"><h1>性别：男</h1></div>
|
<div class="xinxi-left-line"><h1>年龄：30</h1></div>
|
<div class="xinxi-left-line"><h1>执法数量：3</h1></div>
|
</div>
|
<div class="xinxi-right">
|
<div class="xinxi-right-line"><h1>执法证号：11232211</h1></div>
|
<div class="xinxi-right-line"><h1>联系电话：153325666</h1></div>
|
<div class="xinxi-right-line"><h1>所属职位：***</h1></div>
|
<div class="xinxi-right-line"><h1>原执法主体：县农村局</h1></div>
|
</div>
|
</div>
|
<!–<div class="caozuo-box">
|
<img src="../../assets/lawImg/edtior.png" alt="">
|
<img src="../../assets/lawImg/delate2.png" alt="">
|
</div>–>
|
</div>
|
</div>
|
<div class="main-block">
|
<div class="touxiang-box">
|
<img src="../../assets/lawImg/touxiang.png" alt="">
|
</div>
|
<div class="xinxi-box">
|
<div class="xinxi-content">
|
<div class="xinxi-left">
|
<div class="xinxi-left-line"><h1>姓名：长大发</h1></div>
|
<div class="xinxi-left-line"><h1>性别：男</h1></div>
|
<div class="xinxi-left-line"><h1>年龄：30</h1></div>
|
<div class="xinxi-left-line"><h1>执法数量：3</h1></div>
|
</div>
|
<div class="xinxi-right">
|
<div class="xinxi-right-line"><h1>执法证号：11232211</h1></div>
|
<div class="xinxi-right-line"><h1>联系电话：153325666</h1></div>
|
<div class="xinxi-right-line"><h1>所属职位：***</h1></div>
|
<div class="xinxi-right-line"><h1>原执法主体：县农村局</h1></div>
|
</div>
|
</div>
|
<!–<div class="caozuo-box">
|
<img src="../../assets/lawImg/edtior.png" alt="">
|
<img src="../../assets/lawImg/delate2.png" alt="">
|
</div>–>
|
</div>
|
</div>
|
<div class="main-block">
|
<div class="touxiang-box">
|
<img src="../../assets/lawImg/touxiang.png" alt="">
|
</div>
|
<div class="xinxi-box">
|
<div class="xinxi-content">
|
<div class="xinxi-left">
|
<div class="xinxi-left-line"><h1>姓名：长大发</h1></div>
|
<div class="xinxi-left-line"><h1>性别：男</h1></div>
|
<div class="xinxi-left-line"><h1>年龄：30</h1></div>
|
<div class="xinxi-left-line"><h1>执法数量：3</h1></div>
|
</div>
|
<div class="xinxi-right">
|
<div class="xinxi-right-line"><h1>执法证号：11232211</h1></div>
|
<div class="xinxi-right-line"><h1>联系电话：153325666</h1></div>
|
<div class="xinxi-right-line"><h1>所属职位：***</h1></div>
|
<div class="xinxi-right-line"><h1>原执法主体：县农村局</h1></div>
|
</div>
|
</div>
|
<!–<div class="caozuo-box">
|
<img src="../../assets/lawImg/edtior.png" alt="">
|
<img src="../../assets/lawImg/delate2.png" alt="">
|
</div>–>
|
</div>
|
</div>
|
<div class="main-block">
|
<div class="touxiang-box">
|
<img src="../../assets/lawImg/touxiang.png" alt="">
|
</div>
|
<div class="xinxi-box">
|
<div class="xinxi-content">
|
<div class="xinxi-left">
|
<div class="xinxi-left-line"><h1>姓名：长大发</h1></div>
|
<div class="xinxi-left-line"><h1>性别：男</h1></div>
|
<div class="xinxi-left-line"><h1>年龄：30</h1></div>
|
<div class="xinxi-left-line"><h1>执法数量：3</h1></div>
|
</div>
|
<div class="xinxi-right">
|
<div class="xinxi-right-line"><h1>执法证号：11232211</h1></div>
|
<div class="xinxi-right-line"><h1>联系电话：153325666</h1></div>
|
<div class="xinxi-right-line"><h1>所属职位：***</h1></div>
|
<div class="xinxi-right-line"><h1>原执法主体：县农村局</h1></div>
|
</div>
|
</div>
|
<!–<div class="caozuo-box">
|
<img src="../../assets/lawImg/edtior.png" alt="">
|
<img src="../../assets/lawImg/delate2.png" alt="">
|
</div>–>
|
</div>
|
</div>
|
<div class="main-block">
|
<div class="touxiang-box">
|
<img src="../../assets/lawImg/touxiang.png" alt="">
|
</div>
|
<div class="xinxi-box">
|
<div class="xinxi-content">
|
<div class="xinxi-left">
|
<div class="xinxi-left-line"><h1>姓名：长大发</h1></div>
|
<div class="xinxi-left-line"><h1>性别：男</h1></div>
|
<div class="xinxi-left-line"><h1>年龄：30</h1></div>
|
<div class="xinxi-left-line"><h1>执法数量：3</h1></div>
|
</div>
|
<div class="xinxi-right">
|
<div class="xinxi-right-line"><h1>执法证号：11232211</h1></div>
|
<div class="xinxi-right-line"><h1>联系电话：153325666</h1></div>
|
<div class="xinxi-right-line"><h1>所属职位：***</h1></div>
|
<div class="xinxi-right-line"><h1>原执法主体：县农村局</h1></div>
|
</div>
|
</div>
|
<!–<div class="caozuo-box">
|
<img src="../../assets/lawImg/edtior.png" alt="">
|
<img src="../../assets/lawImg/delate2.png" alt="">
|
</div>–>
|
</div>
|
</div>
|
<div class="main-block">
|
<div class="touxiang-box">
|
<img src="../../assets/lawImg/touxiang.png" alt="">
|
</div>
|
<div class="xinxi-box">
|
<div class="xinxi-content">
|
<div class="xinxi-left">
|
<div class="xinxi-left-line"><h1>姓名：长大发</h1></div>
|
<div class="xinxi-left-line"><h1>性别：男</h1></div>
|
<div class="xinxi-left-line"><h1>年龄：30</h1></div>
|
<div class="xinxi-left-line"><h1>执法数量：3</h1></div>
|
</div>
|
<div class="xinxi-right">
|
<div class="xinxi-right-line"><h1>执法证号：11232211</h1></div>
|
<div class="xinxi-right-line"><h1>联系电话：153325666</h1></div>
|
<div class="xinxi-right-line"><h1>所属职位：***</h1></div>
|
<div class="xinxi-right-line"><h1>原执法主体：县农村局</h1></div>
|
</div>
|
</div>
|
<!–<div class="caozuo-box">
|
<img src="../../assets/lawImg/edtior.png" alt="">
|
<img src="../../assets/lawImg/delate2.png" alt="">
|
</div>–>
|
</div>
|
</div>
|
<div class="main-block">
|
<div class="touxiang-box">
|
<img src="../../assets/lawImg/touxiang.png" alt="">
|
</div>
|
<div class="xinxi-box">
|
<div class="xinxi-content">
|
<div class="xinxi-left">
|
<div class="xinxi-left-line"><h1>姓名：长大发</h1></div>
|
<div class="xinxi-left-line"><h1>性别：男</h1></div>
|
<div class="xinxi-left-line"><h1>年龄：30</h1></div>
|
<div class="xinxi-left-line"><h1>执法数量：3</h1></div>
|
</div>
|
<div class="xinxi-right">
|
<div class="xinxi-right-line"><h1>执法证号：11232211</h1></div>
|
<div class="xinxi-right-line"><h1>联系电话：153325666</h1></div>
|
<div class="xinxi-right-line"><h1>所属职位：***</h1></div>
|
<div class="xinxi-right-line"><h1>原执法主体：县农村局</h1></div>
|
</div>
|
</div>
|
<!–<div class="caozuo-box">
|
<img src="../../assets/lawImg/edtior.png" alt="">
|
<img src="../../assets/lawImg/delate2.png" alt="">
|
</div>–>
|
</div>
|
</div>-->
|
</div>
|
<!--<div class="addBtn-box">
|
<el-button class="btn">新增队员</el-button>
|
</div>-->
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "lawTeamForm",
|
data() {
|
return {
|
dialogVisible: false,
|
renyuanData: [
|
{
|
imgSrc:'',
|
name:'蔺有智',
|
sex: '男',
|
age: '43',
|
zhiNum: '106',
|
zhiCard: '03041699032',
|
phone: '13856562365',
|
zhiwei:'队员'
|
},
|
{
|
imgSrc:require('../../assets/images/nameImg/申瀚华13000017(1).jpg'),
|
name:'申瀚华',
|
sex: '男',
|
age: '43',
|
zhiNum: '98',
|
zhiCard: '03041699030',
|
phone: '14816262362',
|
zhiwei:'队员'
|
},
|
{
|
imgSrc:require('../../assets/images/nameImg/刘文生(1).jpg'),
|
name:'刘文生',
|
sex: '男',
|
age: '43',
|
zhiNum: '94',
|
zhiCard: '03041699028',
|
phone: '15831288866',
|
zhiwei:'队员'
|
},
|
{
|
imgSrc:require('../../assets/images/nameImg/杨玲(1).jpg'),
|
name:'杨 玲',
|
sex: '女',
|
age: '46',
|
zhiNum: '89',
|
zhiCard: '03041699017',
|
phone: '13836242516',
|
zhiwei:'队员'
|
},
|
{
|
imgSrc:'',
|
name:'薛晶辉',
|
sex: '男',
|
age: '43',
|
zhiNum: '81',
|
zhiCard: '03041622006',
|
phone: '138565623651',
|
zhiwei:'队员'
|
},
|
{
|
imgSrc:require('../../assets/images/nameImg/李霖昊(1).jpg'),
|
name:'李霖昊',
|
sex: '男',
|
age: '43',
|
zhiNum: '79',
|
zhiCard: '03041699010',
|
phone: '18761561264',
|
zhiwei:'队员'
|
},
|
{
|
imgSrc:require('../../assets/images/nameImg/耿芳艳(1).jpg'),
|
name:'耿芳艳',
|
sex: '女',
|
age: '35',
|
zhiNum: '74',
|
zhiCard: '03041699012',
|
phone: '15856562462',
|
zhiwei:'队员'
|
},{
|
imgSrc:require('../../assets/images/nameImg/王雨军13000019(1).jpg'),
|
name:'王雨军',
|
sex: '男',
|
age: '45',
|
zhiNum: '59',
|
zhiCard: '03041699013',
|
phone: '18726288116',
|
zhiwei:'队员'
|
},
|
]
|
}
|
},
|
methods: {
|
init() {
|
this.dialogVisible = true
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.liuchengDetailForm{
|
::-webkit-scrollbar {
|
width: 6px;
|
height: 6px;
|
}
|
/*滚动区域背景*/
|
::-webkit-scrollbar-track-piece {
|
background-color: silver;
|
-webkit-border-radius: 6px;
|
}
|
/*竖向滚动条*/
|
::-webkit-scrollbar-thumb:vertical {
|
height: 5px;
|
background-color: #4383ee;
|
-webkit-border-radius: 6px;
|
}
|
/*横向滚动条*/
|
::-webkit-scrollbar-thumb:horizontal {
|
width: 5px;
|
background-color: #4383ee;
|
-webkit-border-radius: 6px;
|
}
|
}
|
|
</style>
|
<style lang="scss" scoped>
|
h1,h2,h3{
|
margin:0;
|
}
|
::v-deep{
|
.el-dialog {
|
background-color: #0C2748;
|
border: 1px solid #55CFFC;
|
max-height: 85%;
|
/*display: grid!important;*/
|
display: flex;
|
flex-direction: column;
|
}
|
.el-dialog__body{
|
height: calc(100% - 0.1771rem /* 34/192 */);
|
overflow: auto;
|
flex: auto;
|
}
|
.el-button{
|
color: #fff;
|
}
|
.el-dialog__header{
|
background-color:transparent!important;
|
border: none!important;
|
}
|
}
|
.dialog-title{
|
background: url("../../assets/images/lawTeam-block-title.png") no-repeat center;
|
background-size: 100% 100%;
|
width: 1.474rem /* 283/192 */;
|
height: 0.2604rem /* 50/192 */;
|
position: absolute;
|
left: 50%;
|
top: 0;
|
transform: translateX(-50%);
|
h1{
|
font-size: 0.0833rem /* 16/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: center;
|
color: #2DE2FF;
|
text-align: center;
|
line-height: 0.2396rem /* 46/192 */;
|
}
|
}
|
.liucheng-main{
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
padding-bottom: 0.3125rem /* 60/192 */;
|
.main-block{
|
width: calc(50% - 0.1042rem /* 20/192 */);
|
display: flex;
|
margin-top: 0.1042rem /* 20/192 */;
|
margin-left: 0.1042rem /* 20/192 */;
|
.touxiang-box{
|
width: 0.78125rem /* 150/192 */;
|
height: 0.9635rem /* 185/192 */;
|
background: rgba(90,182,255,0.10);
|
border: 1px solid #55cffc;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
img{
|
width: 0.6875rem /* 132/192 */;
|
height: 0.849rem /* 163/192 */;
|
}
|
h1{
|
text-align: center;
|
color: #fff;
|
font-size: 0.0833rem /* 16/192 */;
|
}
|
}
|
}
|
.xinxi-box{
|
width: calc(100% - 0.8854rem /* 170/192 */);
|
margin-left: 0.1042rem /* 20/192 */;
|
position: relative;
|
.xinxi-content{
|
width: 100%;
|
display: flex;
|
.xinxi-left{
|
width: 0.625rem /* 120/192 */;
|
margin-right: 0.0521rem /* 10/192 */;
|
.xinxi-left-line{
|
margin: 0.026rem /* 5/192 */ 0;
|
width: 100%;
|
}
|
h1{
|
font-size: 0.0833rem /* 16/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #fff;
|
line-height: 2.2;
|
text-overflow:ellipsis;
|
overflow:hidden;
|
white-space: nowrap;
|
}
|
}
|
.xinxi-right{
|
width: calc(100% - 0.6771rem /* 130/192 */);
|
.xinxi-right-line{
|
margin: 0.026rem /* 5/192 */ 0;
|
width: 100%;
|
}
|
h1{
|
font-size: 0.0833rem /* 16/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #fff;
|
line-height: 2.2;
|
text-overflow:ellipsis;
|
overflow:hidden;
|
white-space: nowrap;
|
}
|
}
|
}
|
.caozuo-box{
|
width: 100%;
|
display: flex;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
img{
|
width: 0.125rem /* 24/192 */;
|
height: 0.125rem /* 24/192 */;
|
cursor: pointer;
|
&:first-child{
|
margin-right: 0.1042rem /* 20/192 */;
|
}
|
}
|
}
|
}
|
}
|
.addBtn-box{
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
position: absolute;
|
bottom: 0.1042rem /* 20/192 */;
|
left: 0;
|
.btn{
|
width: 2.0833rem /* 400/192 */;
|
height: 0.2083rem /* 40/192 */;
|
background:#1890FF;
|
border-radius: 0.1042rem /* 20/192 */;
|
}
|
}
|
</style>
|
