lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 监控大屏、安全检测

Browse Source
This commit is contained in:
duanliang
2024-12-18 10:42:20 +08:00
parent 4a6820831b 1108aafed4
commit dfa6dc31b5
24 changed files with 1379 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/CoreVideo/index.vue Normal file
View File

@@ -0,0 +1,93 @@
<template>
<div class="core-video">
<div class="title">核心景区视频</div>
<ul class="list">
<li
class="item"
:style="{ backgroundImage: `url(${index == 0 ? item1 : item2})` }"
v-for="(item, index) in 10"
:key="index"
>
<p class="item-title">三峡之巅-最新异常名称</p>
<img class="item-img" src="@/assets/images/cover.png" />
</li>
</ul>
</div>
</template>
<script setup>
import item1 from '@/assets/images/item-1.png'
import item2 from '@/assets/images/item-2.png'
</script>
<style lang="scss" scoped>
.core-video {
margin: vh(10);
width: vw(326);
border-radius: vw(2);
background-image: url('@/assets/images/bg-1.png');
background-size: 100% 100%;
.title {
width: vw(260);
height: vh(26);
text-align: center;
line-height: vh(26);
margin-left: vw(32.5);
font-size: vw(16);
font-weight: 800;
color: #fff;
background-image: url('@/assets/images/title-1.png');
background-size: 100% 100%;
}
.list {
overflow-y: auto;
overflow-x: hidden;
height: vh(1026);
padding: vw(8);
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(0); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: #f1f1f1; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: #888; /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
/* 当鼠标悬停在滚动条上时滑块的样式 */
&::-webkit-scrollbar-thumb:hover {
background: #555; /* 滑块的背景色 */
}
}
.item {
margin-bottom: vh(13);
background-size: 100% 100%;
&-title {
margin-bottom: vh(6);
margin-left: vw(45);
color: #fff;
font-size: vw(16);
height: vh(24);
line-height: vh(24);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&-img {
width: 100%;
height: vh(164);
display: block;
object-fit: cover;
}
}
}
</style>

166
src/components/Correspondence/index.vue Normal file
View File

@@ -0,0 +1,166 @@
<template>
<div class="box-4-content">
<div class="top-box">
<div class="title">融合通信</div>
<div class="icon-box flex">
<div class="item"><img src="/src/assets/images/r-icon-1.png" alt="" /> 白帝城 </div>
<div class="item"><img src="/src/assets/images/r-icon-2.png" alt="" />三峡之颠</div>
<div class="item"><img src="/src/assets/images/r-icon-3.png" alt="" />龙桥河</div>
<div class="item"><img src="/src/assets/images/r-icon-4.png" alt="" />消防队</div>
<div class="item"><img src="/src/assets/images/r-icon-5.png" alt="" />文旅城</div>
<div class="item"><img src="/src/assets/images/r-icon-6.png" alt="" />交通城</div>
</div>
</div>
<div class="bom-box">
<div class="title">
<span>最近联系</span>
</div>
<table class="table">
<tr class="tr-th">
<th>人员姓名</th>
<th>部门</th>
<th>职位</th>
<th>时间</th>
</tr>
<tr class="tr-td">
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
</tr>
<tr class="tr-td">
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
<tr class="tr-td">
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
<tr class="tr-td">
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
</table>
</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.box-4-content {
width: vw(260);
height: vh(1060);
background-image: url('/src/assets/images/rt-bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
margin-top: vh(10);
margin-left: vw(10);
position: relative;
z-index: 999;
.bom-box {
.table {
width: 100%;
margin-top: vh(5);
.tr-th {
background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
border-radius: 0px 0px 0px 0px;
// border: 1px solid;
border-image: linear-gradient(180deg, rgba(0, 150, 255, 0), rgba(0, 150, 255, 1)) 1 1;
font-weight: 400;
font-size: vw(12);
color: #0096ff;
line-height: vh(14);
text-align: left;
font-style: normal;
text-transform: none;
th {
padding: vw(5);
}
}
.tr-td {
font-weight: 400;
font-size: vw(14);
color: #f1f7ff;
line-height: vh(16);
text-align: left;
font-style: normal;
text-transform: none;
td {
padding: vh(5) vw(10);
}
}
.tr-td:nth-child(odd) {
background: linear-gradient(90deg, rgba(0, 150, 255, 0) 0%, rgba(0, 150, 255, 0.22) 100%);
}
}
.title {
background-image: url('/src/assets/images/nav-l-t-bg.png');
background-size: 100% 100%;
span {
margin-left: vw(30);
font-weight: 800;
font-size: vw(15);
line-height: vh(26);
text-align: center;
font-style: normal;
text-transform: none;
background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
}
.top-box {
width: 100%;
height: vh(500);
.icon-box {
font-weight: 400;
font-size: vw(14);
color: #ffffff;
line-height: vh(16);
flex-wrap: wrap;
margin-left: vw(20);
.item {
margin-top: vh(40);
margin-right: vh(20);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&:nth-child(3n) {
margin-right: 0;
}
& > img {
width: vw(54);
height: vh(60);
}
}
}
.title {
font-weight: 800;
font-size: vw(16);
line-height: vh(26);
text-align: center;
font-style: normal;
text-transform: none;
background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
}
</style>

156
src/components/Header/index.vue Normal file
View File

@@ -0,0 +1,156 @@
<template>
<div class="header">
<div v-if="isBack" class="back">返回</div>
<ul class="nav-left">
<li
class="nav-left-item"
:style="{
backgroundImage: `url(${current == index && !isSkip ? title2Select : title2})`
}"
v-for="(item, index) in navLeft"
:key="index"
@click="handleNav(item, index)"
>
{{ item.name }}
</li>
</ul>
<div class="title">
<span>{{ name }}</span>
</div>
<ul class="nav-right">
<li class="nav-right-item" v-for="(item, index) in navRight" :key="index">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import title2 from '@/assets/images/title-2.png'
import title2Select from '@/assets/images/title-2-select.png'
let props = defineProps({
title: {
type: String,
default: ''
},
navLeft: {
type: Array,
default: () => []
},
navRight: {
type: Array,
default: () => []
},
current: {
type: Number,
default: 0
},
isSkip: {
type: Boolean,
default: false
},
isBack: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['change'])
const router = useRouter()
const name = computed(() => {
if (!props.isSkip && props.navLeft.length > 0) {
return props.navLeft[props.current].name
}
return props.title
})
const handleNav = (item, index) => {
if (props.isSkip) {
router.push(item.path)
} else {
emit('on-change', index)
}
}
</script>
<style scoped lang="scss">
.header {
position: absolute;
left: vw(326);
.back {
position: absolute;
left: vw(60);
top: vh(40);
width: vw(120);
height: vh(30);
font-weight: 600;
font-size: vw(20);
color: #ffffff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: vw(60);
border: 1px solid rgba(0, 114, 220, 0.3);
background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
}
.title {
width: vw(3133);
height: vh(120);
line-height: vh(90);
text-align: center;
letter-spacing: vw(10);
box-sizing: border-box;
background-image: url('@/assets/images/title.png');
background-size: 100% 100%;
& > span {
font-size: vw(48);
font-weight: 800;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
}
}
.nav-left {
position: absolute;
right: vw(2100);
top: vh(34);
display: flex;
&-item {
cursor: pointer;
margin-left: vh(-16);
width: vw(210);
height: vh(56);
line-height: vh(46);
font-weight: 600;
font-size: vw(28);
text-align: center;
color: rgba(208, 236, 255, 0.9);
background-size: 100% 100%;
}
}
.nav-right {
position: absolute;
left: vw(2110);
top: vh(34);
display: flex;
&-item {
cursor: pointer;
margin-right: vh(-16);
width: vw(210);
height: vh(56);
line-height: vh(46);
font-weight: 600;
font-size: vw(28);
text-align: center;
color: rgba(208, 236, 255, 0.9);
background-image: url('@/assets/images/title-3.png');
background-size: 100% 100%;
}
}
}
</style>