<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="index"
|
@handleChange="handleChange"
|
/>
|
<section>
|
<member-basic v-if="index === 0" />
|
<member-track v-if="index === 1" />
|
<member-travel v-if="index === 2" />
|
<member-source v-if="index === 3" />
|
</section>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup name="member">
|
import memberBasic from "./pages/basic.vue";
|
import memberSource from "./pages/source.vue";
|
import memberTrack from "./pages/track.vue";
|
import memberTravel from "./pages/travel.vue";
|
const index = ref(0);
|
const changeData = reactive([
|
{
|
name: "1天",
|
value: "1"
|
},
|
{
|
name: "2天",
|
value: "2"
|
},
|
{
|
name: "自定义",
|
value: "custom"
|
}
|
]);
|
const data = reactive({
|
desc: ["所属小区：北京", "所属派出所：来广营派出所", "首次抓拍时间：2023-12-12 12:23"],
|
tags: [
|
{
|
title: "人员标签",
|
contents: [
|
{
|
text: "上访人员",
|
color: "#2B67FF"
|
},
|
{
|
text: "涉毒",
|
color: "#FF4343"
|
}
|
]
|
},
|
{
|
title: "重点事件",
|
contents: [
|
{
|
text: "非法聚集",
|
color: "#2B67FF"
|
},
|
{
|
text: "涉毒",
|
color: "#FF4343"
|
}
|
]
|
}
|
]
|
});
|
const handleChange = (value: number) => {
|
index.value = value;
|
};
|
</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: 25px 0 50px;
|
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;
|
}
|
}
|
}
|
</style>
|
