<template>
|
<div class="wrap">
|
<div class="left">
|
<header>
|
<icon-file-image />
|
<p>人员图片</p>
|
</header>
|
<div class="avatar">
|
<a-image
|
width="250"
|
height="250"
|
border-radius="14px"
|
:preview="false"
|
src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
|
/>
|
</div>
|
<div class="detail">
|
<p>姓名：张三</p>
|
<p>
|
<span>编号：1231241241231</span>
|
</p>
|
</div>
|
<div class="desc">
|
<p v-for="(item, key) in data.desc" :key="key">{{ item }}</p>
|
</div>
|
<div class="tags">
|
<div v-for="(item, key) in data.tags" :key="key">
|
<p>
|
<span>{{ item.title }}</span>
|
<span>>></span>
|
</p>
|
<div>
|
<p v-for="(tag, index) in item.contents" :key="index" :style="{ background: tag.color }">
|
{{ tag.text }}
|
</p>
|
</div>
|
</div>
|
</div>
|
<div class="icons">
|
<div><icon-cloud /></div>
|
<div><icon-command /></div>
|
<div><icon-cloud /></div>
|
<div><icon-command /></div>
|
<div><icon-cloud /></div>
|
<div><icon-command /></div>
|
</div>
|
</div>
|
<div class="right">
|
<the-a-tabs style="margin: 8px 0" :data="['基本信息', '人员轨迹', '出行信息', '资源信息']" :index="0" />
|
<section>
|
<div class="menus">
|
<div><the-a-change :data="changeData" default-value="custom"></the-a-change></div>
|
<div><a-time-picker type="time-range" style="width: 250px" /></div>
|
<div>
|
<the-a-select :data="['正序', '倒序']" placeholder="请选择" title="排序"></the-a-select>
|
</div>
|
<div>
|
<the-a-select :data="['1号楼', '2号楼']" placeholder="请选择" title="出现地点"></the-a-select>
|
</div>
|
<div>
|
<a-button type="primary">
|
<template #icon>
|
<icon-search />
|
</template>
|
<template #default>搜索</template>
|
</a-button>
|
</div>
|
<div>
|
<a-button>
|
<template #icon>
|
<icon-refresh />
|
</template>
|
<template #default>重置</template>
|
</a-button>
|
</div>
|
<div class="buttons">
|
<div>
|
<icon-list size="20" />
|
</div>
|
<div class="button active">
|
<icon-apps size="20" />
|
</div>
|
</div>
|
</div>
|
</section>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup name="member">
|
const changeData = reactive([
|
{
|
name: "1天",
|
value: "1"
|
},
|
{
|
name: "2天",
|
value: "2"
|
},
|
{
|
name: "自定义",
|
value: "custom"
|
}
|
]);
|
const data = reactive({
|
desc: [
|
"所属小区：北京",
|
"所属派出所：来广营派出所",
|
"首次抓拍时间：2023-12-12 12:23",
|
"首次抓拍地点：二号楼",
|
"抓拍次数：23",
|
"出现天数：12",
|
"最后出现时间：2024-01-12 12:23",
|
"常住地址：A小区1栋2单元201"
|
],
|
tags: [
|
{
|
title: "人员标签",
|
contents: [
|
{
|
text: "上访人员",
|
color: "#2B67FF"
|
},
|
{
|
text: "涉毒",
|
color: "#FF4343"
|
}
|
]
|
},
|
{
|
title: "重点事件",
|
contents: [
|
{
|
text: "非法聚集",
|
color: "#2B67FF"
|
},
|
{
|
text: "涉毒",
|
color: "#FF4343"
|
}
|
]
|
}
|
]
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.wrap {
|
margin: 20px;
|
display: flex;
|
.left {
|
width: 360px;
|
padding: 20px;
|
margin-right: 20px;
|
background: var(--color-bg-2);
|
> header {
|
display: flex;
|
p {
|
margin-left: 5px;
|
}
|
}
|
.avatar {
|
display: flex;
|
justify-content: center;
|
margin: 20px auto;
|
}
|
.detail {
|
padding-bottom: 6px;
|
border-bottom: 1px solid var(--color-bg-3);
|
> p {
|
text-align: center;
|
&:nth-child(1) {
|
font-size: 18px;
|
font-weight: bold;
|
margin-bottom: 12px;
|
}
|
span {
|
position: relative;
|
&:after {
|
left: 0;
|
width: 100%;
|
content: "";
|
position: absolute;
|
display: block;
|
height: 2px;
|
bottom: -6px;
|
background: var(--color-bg-5);
|
}
|
}
|
}
|
}
|
.desc {
|
margin-top: 20px;
|
> p {
|
margin-top: 12px;
|
padding-left: 12px;
|
position: relative;
|
&::before {
|
position: absolute;
|
content: "";
|
background: #3b93ff;
|
width: 4px;
|
height: 4px;
|
border-radius: 2px;
|
top: 5px;
|
left: 0px;
|
}
|
}
|
}
|
.tags {
|
> div {
|
margin-top: 12px;
|
> p {
|
line-height: 24px;
|
font-size: 14px;
|
display: flex;
|
justify-content: space-between;
|
}
|
> div {
|
margin-top: 12px;
|
height: 28px;
|
> p {
|
display: inline-block;
|
margin-right: 16px;
|
padding: 6px 10px;
|
border-radius: 4px;
|
color: #fff;
|
}
|
}
|
}
|
}
|
.icons {
|
margin: 75px 0;
|
display: flex;
|
> div {
|
margin-right: 10px;
|
background: var(--color-bg-3);
|
padding: 8px;
|
border-radius: 6px;
|
}
|
}
|
}
|
.right {
|
flex: 1;
|
> section {
|
background: var(--color-bg-2);
|
padding-top: 20px;
|
margin-top: 10px;
|
.menus {
|
display: flex;
|
padding: 0 5px 20px 20px;
|
> div {
|
margin-right: 10px;
|
&.buttons {
|
display: flex;
|
background: var(--color-fill-2);
|
> div {
|
width: 34px;
|
height: 34px;
|
cursor: pointer;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
&.active {
|
background: #1057fd;
|
color: #fff;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
