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>
|