'保安项目提交'

src/views/homeMy/components/dialog/shzyInfo.vue

@@ -0,0 +1,111 @@
+<!--
+ * @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>