|
|
@ -1,9 +1,226 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div class="info-container">网格信息</div>
|
|
|
|
<div class="info-container">
|
|
|
|
|
|
|
|
<div class="network-intro">
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
{{ netWorkintroduce.intro }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="network-list">
|
|
|
|
|
|
|
|
<introduceTitle :isSlot="true">
|
|
|
|
|
|
|
|
<div class="network-title">
|
|
|
|
|
|
|
|
<div class="main-title">
|
|
|
|
|
|
|
|
网格
|
|
|
|
|
|
|
|
<span class="network-num">{{
|
|
|
|
|
|
|
|
mapParmas.networkName | filterName
|
|
|
|
|
|
|
|
}}</span>
|
|
|
|
|
|
|
|
人员列表
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="main-title">
|
|
|
|
|
|
|
|
共
|
|
|
|
|
|
|
|
<span class="network-num">{{ netWorkintroduce.list.length }}</span>
|
|
|
|
|
|
|
|
人
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</introduceTitle>
|
|
|
|
|
|
|
|
<div class="person-list">
|
|
|
|
|
|
|
|
<div v-for="(item, index) in netWorkintroduce.list" :key="index">
|
|
|
|
|
|
|
|
<div class="person-image">
|
|
|
|
|
|
|
|
<el-image
|
|
|
|
|
|
|
|
fit="cover"
|
|
|
|
|
|
|
|
:src="uploadFileUrl + item.avatar"
|
|
|
|
|
|
|
|
:preview-src-list="[uploadFileUrl + item.avatar]"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
</el-image>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="serial-number">{{ index + 1 }}</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="person-data">
|
|
|
|
|
|
|
|
<div class="data-item">
|
|
|
|
|
|
|
|
<div class="lable-value">
|
|
|
|
|
|
|
|
<div class="data-lable">姓名</div>
|
|
|
|
|
|
|
|
<div class="data-value">{{ item.user_name }}</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="lable-value">
|
|
|
|
|
|
|
|
<div class="data-lable">联系电话</div>
|
|
|
|
|
|
|
|
<div class="data-value">{{ item.phonenumber }}</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
export default {};
|
|
|
|
import { mapGetters } from "vuex";
|
|
|
|
|
|
|
|
import introduceTitle from "@/views/components/introduceTitle/subTtile.vue";
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
uploadFileUrl: process.env.VUE_APP_BASE_API,
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
components: {
|
|
|
|
|
|
|
|
introduceTitle,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
filters: {
|
|
|
|
|
|
|
|
filterName(target) {
|
|
|
|
|
|
|
|
// 正则表达式匹配数字和可能的 - 号
|
|
|
|
|
|
|
|
const regex = /(?:\d+-?)+/g;
|
|
|
|
|
|
|
|
// 查找所有匹配的子字符串
|
|
|
|
|
|
|
|
const matches = target.match(regex);
|
|
|
|
|
|
|
|
// 如果有匹配的结果,将其合并为一个字符串并返回
|
|
|
|
|
|
|
|
return matches ? matches.join("") : "";
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
|
|
|
|
...mapGetters(["netWorkintroduce", "mapParmas"]),
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style></style>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
|
|
.info-container {
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
padding: 15px 0;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.network-intro {
|
|
|
|
|
|
|
|
height: 55%;
|
|
|
|
|
|
|
|
padding: 20px 0 20px 20px;
|
|
|
|
|
|
|
|
background: url("~@/assets/images/ui/introduce-text.png");
|
|
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
color: #d3e9ff;
|
|
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
line-height: 25px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
|
|
padding-right: 20px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.network-list {
|
|
|
|
|
|
|
|
height: 45%;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.network-title {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.main-title {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.network-num {
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
width: 36px;
|
|
|
|
|
|
|
|
height: 34px;
|
|
|
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
|
|
|
background: url("~@/assets/images/ui/img_block@2x.png");
|
|
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
text-shadow: 0px 0px 10px #11c2ff;
|
|
|
|
|
|
|
|
font-family: "din-bold-2.ttf";
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.person-list {
|
|
|
|
|
|
|
|
height: calc(100% - 40px);
|
|
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
|
|
|
& > div {
|
|
|
|
|
|
|
|
height: 50%;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
.person-image {
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
width: 32%;
|
|
|
|
|
|
|
|
height: 80%;
|
|
|
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
|
|
|
background: #01031f;
|
|
|
|
|
|
|
|
border: 1px solid rgba(0, 180, 255, 0.6);
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
padding: 5px;
|
|
|
|
|
|
|
|
.serial-number {
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
|
|
height: 28px;
|
|
|
|
|
|
|
|
width: 28px;
|
|
|
|
|
|
|
|
background: url("~@/assets/images/ui/serial-number.png");
|
|
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
padding-left: 5px;
|
|
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
font-family: "din-bold-2.ttf";
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.el-image {
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.person-data {
|
|
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
|
|
|
.lable-value {
|
|
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.data-item > div:last-child {
|
|
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.data-lable {
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
color: #ffc333;
|
|
|
|
|
|
|
|
font-style: italic;
|
|
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.data-value {
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
font-size: 17px;
|
|
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
font-style: italic;
|
|
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.data-value::after {
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
|
|
z-index: -1;
|
|
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
width: 94px;
|
|
|
|
|
|
|
|
height: 10px;
|
|
|
|
|
|
|
|
background: url("~@/assets/images/ui/cell-bg.png");
|
|
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*全局滚动条样式*/
|
|
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
|
|
|
|
width: 3px;
|
|
|
|
|
|
|
|
height: 3px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
|
|
height: 10px;
|
|
|
|
|
|
|
|
width: 1px;
|
|
|
|
|
|
|
|
background: rgba(255, 255, 255, 0.5);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
|
|
|
|
|
background: transparent;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|