112 lines
2.4 KiB
Vue
112 lines
2.4 KiB
Vue
<!--
|
||
* @Author: your name
|
||
* @Date: 2022-09-20 10:22:51
|
||
* @LastEditTime: 2022-09-22 10:51:44
|
||
* @LastEditors: Please set LastEditors
|
||
* @Description: In User Settings Edit
|
||
*
|
||
-->
|
||
<template>
|
||
<div class="dialogBox">
|
||
<div class="title">
|
||
<span class="mc">社会资源</span>
|
||
<span @click="close" class="close">
|
||
<el-icon><Close /></el-icon>
|
||
</span>
|
||
</div>
|
||
<div class="listBox noScollLine">
|
||
<div v-for="(item, index) in props.data" :key="index">
|
||
<div class="infoBox">
|
||
<div class="content">单位名称：{{ item.dwmc }}</div>
|
||
<div class="content">从业人员：
|
||
<div v-for="it in item.cyry" :key="it" class="peoBox">
|
||
<span>{{ it.xm }}</span>
|
||
<span>{{ it.xb == 1 ? '男' :'女' }}</span>
|
||
<span>{{ it.lxdh }}</span>
|
||
<span>{{ it.sfzh }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="content">所属部门：{{ item.ssbm }}</div>
|
||
<div class="address">
|
||
<img src="@/assets/images/dingwei.png" />
|
||
<span>{{ item.dz }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, defineProps } from "vue";
|
||
// 左右折叠状态
|
||
import emitter from "@/utils/eventBus.js";
|
||
const props = defineProps({
|
||
data: {
|
||
type: Array,
|
||
default: []
|
||
}
|
||
});
|
||
|
||
//关闭弹窗
|
||
function close() {
|
||
emitter.emit("showShzy", false);
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import "@/assets/css/largeScreen.scss";
|
||
@import "@/assets/css/homeScreen.scss";
|
||
.dialogBox {
|
||
.listBox {
|
||
padding: 4px 10px;
|
||
box-sizing: border-box;
|
||
max-height: 80vh;
|
||
overflow: hidden;
|
||
overflow-y: auto;
|
||
.infoBox {
|
||
padding: 4px 10px;
|
||
border: 1px solid #4190ad;
|
||
margin-bottom: 5px;
|
||
border-radius: 4px;
|
||
.other {
|
||
margin: 5 10px;
|
||
color: #779dcd;
|
||
}
|
||
}
|
||
.address {
|
||
margin-top: 10px;
|
||
border-top: 1px solid #18617e;
|
||
padding-top: 6px;
|
||
img {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.peoBox{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
span{
|
||
display: inline-block;
|
||
width: 15%;
|
||
color: rgb(173 203 231);;
|
||
&:nth-child(1){
|
||
text-align: justify;
|
||
text-align-last: justify;
|
||
}
|
||
&:nth-child(2){
|
||
width: 10%;
|
||
text-align: center;
|
||
}
|
||
&:nth-child(3){
|
||
width: 30%;
|
||
}
|
||
&:nth-child(4){
|
||
width: 45%;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|