2025-04-12 14:54:02 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div class="homeBox">
|
|
|
|
|
|
<!-- 头部 -->
|
2025-04-14 19:48:42 +08:00
|
|
|
|
<div class="head">
|
2025-04-12 14:54:02 +08:00
|
|
|
|
<Head></Head>
|
2025-04-14 19:48:42 +08:00
|
|
|
|
<TopIcon class="head-icon-l"></TopIcon>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div></div>
|
|
|
|
|
|
<el-container class="container" direction="horizontal">
|
|
|
|
|
|
<el-aside style="width:455px">
|
|
|
|
|
|
<div class="content-box">
|
|
|
|
|
|
<div class="title-box">
|
|
|
|
|
|
<span class="title">线索研判盯办统计</span>
|
2025-04-12 14:54:02 +08:00
|
|
|
|
</div>
|
2025-04-14 19:48:42 +08:00
|
|
|
|
<div class="content background-img-1" style="height:106px">
|
|
|
|
|
|
<div class="content-item" v-for="(value, key) in contentItem" :key="`contentItem${key}`">
|
|
|
|
|
|
{{ key }}:{{ value }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-box">
|
|
|
|
|
|
<div class="title-box">
|
|
|
|
|
|
<span class="title">情报上报数量</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="content background-img-2" style="height:185px">
|
|
|
|
|
|
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
<Line class="content background-img-2" style="height:175px"></Line>
|
2025-04-12 14:54:02 +08:00
|
|
|
|
</div>
|
2025-04-14 19:48:42 +08:00
|
|
|
|
<div class="content-box">
|
|
|
|
|
|
<div class="title-box">
|
|
|
|
|
|
<span class="title">情报数据情报来源</span>
|
2025-04-12 14:54:02 +08:00
|
|
|
|
</div>
|
2025-04-14 19:48:42 +08:00
|
|
|
|
<!-- <div class="content background-img-2" style="height:185px">
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
<Bar class="content background-img-2" style="height:175px"></Bar>
|
2025-04-12 14:54:02 +08:00
|
|
|
|
</div>
|
2025-04-14 19:48:42 +08:00
|
|
|
|
<div class="content-box">
|
|
|
|
|
|
<div class="title-box">
|
|
|
|
|
|
<span class="title">情报反馈统计</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="content background-img-3" style="height:234px">
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
<Pei class="content background-img-3" style="height:234px">
|
|
|
|
|
|
</Pei>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-aside>
|
|
|
|
|
|
<el-main class="h-100 main">
|
|
|
|
|
|
<div class="top">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="top-item" v-for="(item, index) in topRightTile" :key="`topRightTile${index}`">
|
|
|
|
|
|
<img :src="item.icon" alt="" class="top-icon" />
|
|
|
|
|
|
<div class="top-item-right">
|
|
|
|
|
|
<div class="top-item-title">{{ item.title }}</div>
|
|
|
|
|
|
<div class="top-item-title-tow">{{ item.desc }}</div>
|
|
|
|
|
|
<img src="~@/assets/images/databi/line.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="med content background-img-4" style="height:calc(100% - 338px)">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="footer " style="height:234px">
|
|
|
|
|
|
<div class="content-box">
|
|
|
|
|
|
<div class="title-box title-img-2">
|
|
|
|
|
|
<div class="flexcb">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<span class="title">全域布控处置重点人员</span>
|
|
|
|
|
|
<span class="title-desc">全域布控处置重点群体</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="btn">
|
|
|
|
|
|
查看更多》
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content background-img-5" style="height:234px">
|
|
|
|
|
|
<MyTable :tableData="pageData.tableData1" :tableColumn="pageData.tableColumn1"
|
|
|
|
|
|
:tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
|
|
|
|
|
|
:controlsWidth="pageData.controlsWidth" class="my-table">
|
|
|
|
|
|
<template #zp="{ row }">
|
|
|
|
|
|
<el-image style="width: 40px; height: 40px" :src="row.zp">
|
|
|
|
|
|
</el-image>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<template #clzt="{ row }">
|
|
|
|
|
|
<span style="color: #FDBC3A ;">{{ row.clzt }}</span>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</MyTable>
|
|
|
|
|
|
</div>
|
2025-04-12 14:54:02 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-04-14 19:48:42 +08:00
|
|
|
|
</el-main>
|
|
|
|
|
|
<el-footer>
|
|
|
|
|
|
<div class="content-box">
|
|
|
|
|
|
<div class="title-box">
|
|
|
|
|
|
<span class="title">情报上报数量</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content right-1" style="height:251px">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
|
|
|
|
|
<el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
|
|
|
|
|
|
{{ city }}
|
|
|
|
|
|
</el-checkbox>
|
|
|
|
|
|
</el-checkbox-group>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="warning-list">
|
|
|
|
|
|
<div class="warning-card" v-for="(item, index) in warningList" :key="index">
|
|
|
|
|
|
<div class="warning-image">
|
|
|
|
|
|
<img :src="item.image" alt="预警图片">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="warning-info">
|
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
|
<span class="label">姓名：</span>
|
|
|
|
|
|
<span>{{ item.name }}</span>
|
|
|
|
|
|
<span class="tag">涉警人员</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
|
<span class="label">性别：</span>
|
|
|
|
|
|
<span>{{ item.gender }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
|
<span class="label">相似度：</span>
|
|
|
|
|
|
<span class="highlight">{{ item.similarity }}%</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
|
<span class="label">预警时间：</span>
|
|
|
|
|
|
<span>{{ item.warningTime }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info-item flex align-center">
|
|
|
|
|
|
<span class="label nowrap">抓拍地址：</span>
|
|
|
|
|
|
<span class="one_text_detail">{{ item.location }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-box">
|
|
|
|
|
|
<div class="title-box">
|
|
|
|
|
|
<span class="title">情报上报数量</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content right-2" style="height:244px">
|
|
|
|
|
|
<MyTable :tableData="pageData.tableData2" :tableColumn="pageData.tableColumn2"
|
|
|
|
|
|
:tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
|
|
|
|
|
|
:controlsWidth="pageData.controlsWidth" class="my-table">
|
|
|
|
|
|
<template #zp="{ row }">
|
|
|
|
|
|
<el-image style="width: 40px; height: 40px" :src="row.zp">
|
|
|
|
|
|
</el-image>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</MyTable>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-box">
|
|
|
|
|
|
<div class="title-box">
|
|
|
|
|
|
<span class="title">重点人发掘情况</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content right-3" style="height:234px">
|
|
|
|
|
|
<MyTable :tableData="pageData.tableData2" :tableColumn="pageData.tableColumn2"
|
|
|
|
|
|
:tableHeight="pageData.tableHeight" :key="pageData.keyCount+2" :tableConfiger="pageData.tableConfiger"
|
|
|
|
|
|
:controlsWidth="pageData.controlsWidth" class="my-table">
|
|
|
|
|
|
<template #zp="{ row }">
|
|
|
|
|
|
<el-image style="width: 40px; height: 40px" :src="row.zp">
|
|
|
|
|
|
</el-image>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</MyTable>
|
2025-04-12 14:54:02 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-04-14 19:48:42 +08:00
|
|
|
|
</el-footer>
|
|
|
|
|
|
</el-container>
|
2025-04-12 14:54:02 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
|
import Head from './layout/head.vue'
|
2025-04-14 19:48:42 +08:00
|
|
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
|
|
|
|
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
|
|
|
|
import Line from './components/line.vue'
|
|
|
|
|
|
import Bar from './components/bar.vue'
|
|
|
|
|
|
import Pei from './components/pei.vue'
|
|
|
|
|
|
import TopIcon from './components/top-icon.vue'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const contentItem = ref(
|
|
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
'线索总数': "892条", "下发总数": "892条", "已处置总数": "892条", "反馈总数": "892条", "未反馈总数": "892条", "未处置总数": "892条"
|
|
|
|
|
|
})
|
|
|
|
|
|
const topRightTile = ref([
|
|
|
|
|
|
{
|
|
|
|
|
|
title: "线索总数",
|
|
|
|
|
|
desc: "25",
|
|
|
|
|
|
icon: require("@/assets/images/databi/top-1.png"),
|
|
|
|
|
|
|
|
|
|
|
|
}, {
|
|
|
|
|
|
title: "已处理线索总数",
|
|
|
|
|
|
desc: "5222/3",
|
|
|
|
|
|
icon: require("@/assets/images/databi/top-2.png"),
|
|
|
|
|
|
|
|
|
|
|
|
}, {
|
|
|
|
|
|
title: "重点人总数",
|
|
|
|
|
|
desc: "100.0",
|
|
|
|
|
|
icon: require("@/assets/images/databi/top-3.png"),
|
|
|
|
|
|
|
|
|
|
|
|
}, {
|
|
|
|
|
|
title: "重点群体总数",
|
|
|
|
|
|
desc: "99.9",
|
|
|
|
|
|
icon: require("@/assets/images/databi/top-4.png"),
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
])
|
|
|
|
|
|
const pageData = reactive({
|
|
|
|
|
|
tableData1: [
|
|
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
zp: require("@/assets/images/databi/top-1.png"),
|
|
|
|
|
|
name: "12344",
|
|
|
|
|
|
xb: "12344",
|
|
|
|
|
|
sfzh: "12344",
|
|
|
|
|
|
gkdw: "12344",
|
|
|
|
|
|
hdsj: "12344",
|
|
|
|
|
|
hdfsdz: "12344",
|
|
|
|
|
|
clzt: "12344",
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
tableData2: [{
|
|
|
|
|
|
zp: require("@/assets/images/databi/top-1.png"),
|
|
|
|
|
|
|
|
|
|
|
|
name: "123",
|
|
|
|
|
|
xb: "123",
|
|
|
|
|
|
sfzh: "123",
|
|
|
|
|
|
gkyy: "123",
|
|
|
|
|
|
}],
|
|
|
|
|
|
|
|
|
|
|
|
//表格数据
|
|
|
|
|
|
keyCount: 0,
|
|
|
|
|
|
tableConfiger: {
|
|
|
|
|
|
rowHieght: 61,
|
|
|
|
|
|
showSelectType: "null",
|
|
|
|
|
|
loading: false,
|
|
|
|
|
|
border: false,
|
|
|
|
|
|
size: "small",
|
|
|
|
|
|
haveControls: false,
|
|
|
|
|
|
stripe: true
|
|
|
|
|
|
},
|
|
|
|
|
|
tableHeight: '100%',
|
|
|
|
|
|
tableColumn1: [
|
|
|
|
|
|
{ label: "照片", prop: "zp", showSolt: true },
|
|
|
|
|
|
{ label: "姓名", prop: "name" },
|
|
|
|
|
|
{ label: "性别", prop: "xb", },
|
|
|
|
|
|
{ label: "身份证号", prop: "sfzh", },
|
|
|
|
|
|
{ label: "管控单位", prop: "gkdw" },
|
|
|
|
|
|
|
|
|
|
|
|
{ label: " 活动时间", prop: "hdsj", },
|
|
|
|
|
|
{ label: " 活动发生地址", prop: "hdfsdz", },
|
|
|
|
|
|
|
|
|
|
|
|
{ label: " 处置状态", prop: "clzt", showSolt: true }
|
|
|
|
|
|
],
|
|
|
|
|
|
tableColumn2: [
|
|
|
|
|
|
{ label: "照片", prop: "zp", showSolt: true ,},
|
|
|
|
|
|
{ label: "姓名", prop: "name", width:50},
|
|
|
|
|
|
{ label: "性别", prop: "xb", width:50},
|
|
|
|
|
|
{ label: "身份证号", prop: "sfzh", },
|
|
|
|
|
|
{ label: "管控原因", prop: "gkyy",width:100 },
|
|
|
|
|
|
],
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const checkAll = ref(false)
|
|
|
|
|
|
const isIndeterminate = ref(true)
|
|
|
|
|
|
const checkedCities = ref(['全部'])
|
|
|
|
|
|
const cities = ['全部', '红色', '橙色', '黄色', '蓝色']
|
|
|
|
|
|
|
|
|
|
|
|
const handleCheckAllChange = (val) => {
|
|
|
|
|
|
checkedCities.value = val ? cities : []
|
|
|
|
|
|
isIndeterminate.value = false
|
|
|
|
|
|
}
|
|
|
|
|
|
const handleCheckedCitiesChange = (value) => {
|
|
|
|
|
|
const checkedCount = value.length
|
|
|
|
|
|
checkAll.value = checkedCount === cities.length
|
|
|
|
|
|
isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const warningList = ref([
|
|
|
|
|
|
{
|
|
|
|
|
|
image: require('@/assets/images/person.png'),
|
|
|
|
|
|
name: '张三',
|
|
|
|
|
|
gender: '男',
|
|
|
|
|
|
similarity: 85,
|
|
|
|
|
|
warningTime: '2025-02-15 13: 00',
|
|
|
|
|
|
location: '林艺市八宫区天山路宫区天山路宫区天山路'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
image: require('@/assets/images/person.png'),
|
|
|
|
|
|
name: '张三',
|
|
|
|
|
|
gender: '男',
|
|
|
|
|
|
similarity: 85,
|
|
|
|
|
|
warningTime: '2025-02-15 13: 00',
|
|
|
|
|
|
location: '林艺市八宫区天山路宫区天山路宫区天山路'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
image: require('@/assets/images/person.png'),
|
|
|
|
|
|
name: '张三',
|
|
|
|
|
|
gender: '男',
|
|
|
|
|
|
similarity: 85,
|
|
|
|
|
|
warningTime: '2025-02-15 13: 00',
|
|
|
|
|
|
location: '林艺市八宫区天山路...'
|
|
|
|
|
|
}
|
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2025-04-12 14:54:02 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
2025-04-14 19:48:42 +08:00
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
.container {
|
|
|
|
|
|
height: calc(100% - 67px);
|
2025-04-12 14:54:02 +08:00
|
|
|
|
width: 100%;
|
2025-04-14 19:48:42 +08:00
|
|
|
|
margin-top: -61px;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
padding: 0 30px 20px 30px;
|
|
|
|
|
|
|
|
|
|
|
|
.content-box {
|
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
|
|
|
|
|
|
|
.title-img-2 {
|
|
|
|
|
|
background: url("~@/assets/images/databi/title-box-2.png") no-repeat center center !important;
|
|
|
|
|
|
|
|
|
|
|
|
.title-desc {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #98BCE0;
|
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
color: #0072FF;
|
|
|
|
|
|
margin-top: 3px;
|
|
|
|
|
|
}
|
2025-04-12 14:54:02 +08:00
|
|
|
|
}
|
2025-04-14 19:48:42 +08:00
|
|
|
|
|
|
|
|
|
|
.title-box {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 35px;
|
|
|
|
|
|
background: url("~@/assets/images/databi/title-box.png") no-repeat center center;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
line-height: 35px;
|
|
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
|
margin-left: 60px;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-04-12 14:54:02 +08:00
|
|
|
|
}
|
2025-04-14 19:48:42 +08:00
|
|
|
|
|
|
|
|
|
|
|
2025-04-12 14:54:02 +08:00
|
|
|
|
}
|
2025-04-14 19:48:42 +08:00
|
|
|
|
|
|
|
|
|
|
.background-img-1 {
|
|
|
|
|
|
background: url("~@/assets/images/databi/content-box.png") no-repeat center center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.background-img-2 {
|
|
|
|
|
|
background: url("~@/assets/images/databi/content-box-2.png") no-repeat center center;
|
|
|
|
|
|
background-size: 100% 100%
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.background-img-3 {
|
|
|
|
|
|
background: url("~@/assets/images/databi/content-box-3.png") no-repeat center center;
|
|
|
|
|
|
background-size: 100% 100%
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.background-img-4 {
|
|
|
|
|
|
background: url("~@/assets/images/databi/content-box-4.png") no-repeat center center;
|
|
|
|
|
|
background-size: 100% 100%
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.background-img-5 {
|
|
|
|
|
|
background: url("~@/assets/images/databi/content-box-4.png") no-repeat center center;
|
|
|
|
|
|
background-size: 100% 100%
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.right-1 {
|
|
|
|
|
|
background: url("~@/assets/images/databi/right-1.png") no-repeat center center;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.warning-list {
|
|
|
|
|
|
height: 205px;
|
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
2025-04-12 14:54:02 +08:00
|
|
|
|
}
|
2025-04-14 19:48:42 +08:00
|
|
|
|
|
|
|
|
|
|
.info-item {
|
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.warning-card {
|
|
|
|
|
|
background: url("~@/assets/images/databi/blue.png") no-repeat center center;
|
2025-04-12 14:54:02 +08:00
|
|
|
|
background-size: 100% 100%;
|
2025-04-14 19:48:42 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
gap: 20px;
|
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
|
padding: 4px 4px 4px 10px;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.warning-image {
|
|
|
|
|
|
width: 100px;
|
|
|
|
|
|
height: 80px;
|
|
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.warning-image img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.warning-info {
|
|
|
|
|
|
flex: 1;
|
2025-04-12 14:54:02 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-04-14 19:48:42 +08:00
|
|
|
|
|
|
|
|
|
|
.right-2 {
|
|
|
|
|
|
background: url("~@/assets/images/databi/right-2.png") no-repeat center center;
|
|
|
|
|
|
background-size: 100% 100%
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.right-3 {
|
|
|
|
|
|
background: url("~@/assets/images/databi/right-3.png") no-repeat center center;
|
|
|
|
|
|
background-size: 100% 100%
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.content {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
padding: 10px;
|
2025-04-12 14:54:02 +08:00
|
|
|
|
box-sizing: border-box;
|
2025-04-14 19:48:42 +08:00
|
|
|
|
.content-item {
|
|
|
|
|
|
width: 138px;
|
|
|
|
|
|
height: 36px;
|
|
|
|
|
|
line-height: 36px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
background: url("~@/assets/images/databi/content-item.png") no-repeat center center;
|
|
|
|
|
|
|
2025-04-12 14:54:02 +08:00
|
|
|
|
}
|
2025-04-14 19:48:42 +08:00
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.el-main {
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
.top {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
|
|
|
|
|
|
|
.top-item {
|
|
|
|
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
gap: 5px;
|
|
|
|
|
|
|
|
|
|
|
|
.top-icon {
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
width: 50px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.top-item-right {
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
|
|
|
|
|
|
.top-item-title {
|
|
|
|
|
|
color: #0072FF;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.top-item-title-tow {
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.med {
|
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.footer {
|
|
|
|
|
|
// margin-top: 4px;
|
|
|
|
|
|
|
2025-04-12 14:54:02 +08:00
|
|
|
|
}
|
2025-04-14 19:48:42 +08:00
|
|
|
|
|
2025-04-12 14:54:02 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2025-04-14 19:48:42 +08:00
|
|
|
|
.el-footer {
|
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
|
height: 100% !important;
|
|
|
|
|
|
width: 455px !important;
|
2025-04-12 14:54:02 +08:00
|
|
|
|
}
|
2025-04-14 19:48:42 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2025-04-12 14:54:02 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2025-04-14 19:48:42 +08:00
|
|
|
|
.homeBox {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
background: url("~@/assets/images/databi/cantainer.png") no-repeat center center;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
.head{
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
.head-icon-l{
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 30px;
|
|
|
|
|
|
left: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.my-table :deep(.el-table--fit) {
|
|
|
|
|
|
border: none !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.my-table .el-table,
|
|
|
|
|
|
.el-table__expanded-cell {
|
|
|
|
|
|
background-color: transparent !important;
|
|
|
|
|
|
border: none !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.my-table :deep(.el-table) tr {
|
|
|
|
|
|
background-color: transparent !important;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
}
|
2025-04-12 14:54:02 +08:00
|
|
|
|
|
2025-04-14 19:48:42 +08:00
|
|
|
|
.el-table th,
|
|
|
|
|
|
.el-table tr {
|
|
|
|
|
|
border: 0 !important;
|
|
|
|
|
|
background-color: transparent !important;
|
|
|
|
|
|
color: white !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
|
|
|
|
|
background: #003D82;
|
|
|
|
|
|
opacity: 75%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.el-table--border tr,
|
|
|
|
|
|
td {
|
|
|
|
|
|
border: none !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 去最下面的横线 */
|
|
|
|
|
|
|
|
|
|
|
|
.el-table::after {
|
|
|
|
|
|
border-bottom: none !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
/*table内的高亮*/
|
|
|
|
|
|
|
|
|
|
|
|
.el-table tbody tr:hover>td {
|
|
|
|
|
|
|
|
|
|
|
|
background-color: transparent !important
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.el-checkbox__inner {
|
|
|
|
|
|
background-color: transparent !important;
|
|
|
|
|
|
border: 1px solid #0072FF;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.el-checkbox__label {
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.el-checkbox__input.is-checked .el-checkbox__inner {
|
|
|
|
|
|
background-color: #00FFFF !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.el-checkbox__inner::after {
|
|
|
|
|
|
border-color: black !important;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
2025-04-12 14:54:02 +08:00
|
|
|
|
</style>
|
