<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">
|
<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 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: "liuchengDetailForm",
|
data() {
|
return {
|
dialogVisible: false
|
}
|
},
|
methods: {
|
init() {
|
this.dialogVisible = true
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep{
|
.el-dialog {
|
background-color: #fff;
|
max-height: 78%;
|
/*display: grid!important;*/
|
display: flex;
|
flex-direction: column;
|
}
|
.el-dialog__body{
|
height: calc(100% - 34px);
|
overflow: auto;
|
flex: auto;
|
}
|
.el-button{
|
color: #fff;
|
}
|
}
|
.dialog-title{
|
background: url("../../assets/lawImg/welIndexTitle-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
width: 318px;
|
height: 56px;
|
position: absolute;
|
left: 50%;
|
top: 0;
|
transform: translateX(-50%);
|
h1{
|
font-size: 16px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: center;
|
color: #ffffff;
|
text-align: center;
|
line-height: 46px;
|
}
|
}
|
.liucheng-main{
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
padding-bottom: 60px;
|
.main-block{
|
width: calc(50% - 20px);
|
display: flex;
|
margin-top: 20px;
|
margin-left: 20px;
|
.touxiang-box{
|
width: 150px;
|
height: 185px;
|
background: #ffffff;
|
border: 1px solid #cccccc;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
img{
|
width: 132px;
|
height: 163px;
|
}
|
}
|
}
|
.xinxi-box{
|
width: calc(100% - 170px);
|
margin-left: 20px;
|
position: relative;
|
.xinxi-content{
|
width: 100%;
|
display: flex;
|
.xinxi-left{
|
width: 120px;
|
margin-right: 10px;
|
.xinxi-left-line{
|
margin: 5px 0;
|
width: 100%;
|
}
|
h1{
|
font-size: 16px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #111111;
|
line-height: 1.4;
|
text-overflow:ellipsis;
|
overflow:hidden;
|
white-space: nowrap;
|
}
|
}
|
.xinxi-right{
|
width: calc(100% - 130px);
|
.xinxi-right-line{
|
margin: 5px 0;
|
width: 100%;
|
}
|
h1{
|
font-size: 16px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #111111;
|
line-height: 1.4;
|
text-overflow:ellipsis;
|
overflow:hidden;
|
white-space: nowrap;
|
}
|
}
|
}
|
.caozuo-box{
|
width: 100%;
|
display: flex;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
img{
|
width: 24px;
|
height: 24px;
|
cursor: pointer;
|
&:first-child{
|
margin-right: 20px;
|
}
|
}
|
}
|
}
|
}
|
.addBtn-box{
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
position: absolute;
|
bottom: 20px;
|
left: 0;
|
.btn{
|
width: 400px;
|
height: 40px;
|
background:#1890FF;
|
border-radius: 20px;
|
}
|
}
|
</style>
|
