153 lines
3.8 KiB
Vue
153 lines
3.8 KiB
Vue
<template>
|
|
<div class="comom-title">
|
|
<span class="title">重点人员动态预警</span>
|
|
</div>
|
|
<div class="comom-cnt zdryBox">
|
|
<div style="height:33px;">
|
|
<CheckBox :data="checkData" @changeData="changeData"></CheckBox>
|
|
</div>
|
|
<ul class="ryBox" v-loading="loading">
|
|
<li :class="item.isChecked ? 'active':''" v-for="item in personList" :key="item.id" >
|
|
<YjItem :item="item"></YjItem>
|
|
</li>
|
|
<MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="120"></MOSTY.Empty>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import YjItem from "@/views/home/components/yjItem.vue";
|
|
import * as MOSTY from "@/components/MyComponents/index";
|
|
import CheckBox from "@/components/checkBox/index.vue";
|
|
import { ref ,reactive} from 'vue';
|
|
const checkData = reactive({
|
|
list: ["红", "橙", "黄", "蓝"],
|
|
hasChoose: ["红"]
|
|
});
|
|
const loading = ref(false); // 加载中
|
|
const personList = ref([
|
|
{
|
|
image: require("@/assets/images/person.png"),
|
|
name: "张三",
|
|
gender: "男",
|
|
similarity: 85,
|
|
sfzh:'11010119900307121X',
|
|
age: 25,
|
|
mz:'汉',
|
|
warningTime: "2025-02-15 13: 00",
|
|
location: "林艺市八宫区天山路宫区天山路宫区天山路",
|
|
yjjb:'10',
|
|
yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
|
|
},
|
|
{
|
|
image: require("@/assets/images/person.png"),
|
|
name: "张三",
|
|
gender: "男",
|
|
age: 25,
|
|
sfzh:'11010119900307121X',
|
|
mz:'汉',
|
|
similarity: 85,
|
|
warningTime: "2025-02-15 13: 00",
|
|
location: "林艺市八宫区天山路宫区天山路宫区天山路",
|
|
yjjb:'20',
|
|
yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
|
|
},
|
|
{
|
|
image: require("@/assets/images/person.png"),
|
|
name: "张三",
|
|
gender: "男",
|
|
age: 25,
|
|
mz:'汉',
|
|
sfzh:'11010119900307121X',
|
|
similarity: 85,
|
|
warningTime: "2025-02-15 13: 00",
|
|
location: "林艺市八宫区天山路...",
|
|
yjjb:'30',
|
|
yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
|
|
},
|
|
{
|
|
image: require("@/assets/images/person.png"),
|
|
name: "张三",
|
|
gender: "男",
|
|
age: 25,
|
|
mz:'汉',
|
|
sfzh:'11010119900307121X',
|
|
similarity: 85,
|
|
warningTime: "2025-02-15 13: 00",
|
|
location: "林艺市八宫区天山路...",
|
|
yjjb:'40',
|
|
yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
|
|
},
|
|
]);
|
|
// 复选框切换
|
|
function changeData(){
|
|
console.log('切换');
|
|
}
|
|
|
|
|
|
const contentItem = ref([
|
|
{label:'线索总数',value:'892'},
|
|
{label:'下发总数',value:'892'},
|
|
{label:'已处置总数',value:'892'},
|
|
{label:'反馈总数',value:'892'},
|
|
{label:'未反馈总数',value:'892'},
|
|
{label:'未处置总数',value:'892'},
|
|
])
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/css/homeScreen.scss";
|
|
.zdryBox{
|
|
background: #052249;
|
|
.ryBox{
|
|
height: calc(100% - 33px);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
background-color: #263b70;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #146bbe;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background-color: #263b70;
|
|
}
|
|
::-webkit-scrollbar-corner {
|
|
background-color: #142141;
|
|
}
|
|
|
|
::v-deep .el-checkbox__label{
|
|
color:#fff;
|
|
}
|
|
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
|
|
color:#00FFFF;
|
|
}
|
|
::v-deep .el-checkbox__inner{
|
|
background:rgba(0,144,255,0.2);
|
|
border:1px solid #0072FF;
|
|
}
|
|
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
|
|
background-color: #00FFFF;
|
|
border-color:#00FFFF;
|
|
}
|
|
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
|
|
background-color: #00FFFF;
|
|
border-color:#00FFFF;
|
|
}
|
|
::v-deep .el-checkbox__inner::after{
|
|
border:2px solid #000;
|
|
border-left:0;
|
|
border-top:0;
|
|
left:3px;
|
|
top:0px;
|
|
}
|
|
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
|
|
background: #000;
|
|
}
|
|
|
|
|
|
</style> |