独树的风
10 months ago
parent
0c6c9b0c01
commit
1b2a8b4530
@ -0,0 +1,151 @@
|
|||||||
|
<!-- 感知设备搜索及复选图层 -->
|
||||||
|
<template>
|
||||||
|
<div class="search_check">
|
||||||
|
<!-- 右侧区域搜索框 -->
|
||||||
|
<div class="search">
|
||||||
|
<input placeholder="请输入摄像头名称" class="search_input" />
|
||||||
|
<button class="search_button">
|
||||||
|
<i class="el-icon-search"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- 沿海视频切换框 -->
|
||||||
|
<div class="check">
|
||||||
|
<div class="check_coverage">
|
||||||
|
<div class="check_title">图层</div>
|
||||||
|
</div>
|
||||||
|
<div class="check_coveragebottom">
|
||||||
|
<el-checkbox class="checkbox" size="mini">全选</el-checkbox>
|
||||||
|
<el-checkbox size="mini" class="checkbox">
|
||||||
|
<div class="check_label">
|
||||||
|
<div class="check_label_text">沿海视频</div>
|
||||||
|
<div class="check_label_count">(446)</div>
|
||||||
|
</div>
|
||||||
|
</el-checkbox>
|
||||||
|
<el-checkbox size="mini" class="checkbox">
|
||||||
|
<div class="check_label">
|
||||||
|
<div class="check_label_text">非沿海视频</div>
|
||||||
|
<div class="check_label_count">(779)</div>
|
||||||
|
</div>
|
||||||
|
</el-checkbox>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'MapSearch',
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.search_check {
|
||||||
|
width: 16vw;
|
||||||
|
height: 27vh;
|
||||||
|
// position: absolute;
|
||||||
|
// right: 23vw;
|
||||||
|
position: relative;
|
||||||
|
// background: #02274e;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
.search {
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.search_input {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 14vw;
|
||||||
|
border: 1px solid #00f5ff;
|
||||||
|
background-color: #02274e;
|
||||||
|
color: #ecf4f9;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_input::placeholder {
|
||||||
|
position: relative;
|
||||||
|
left: 1vw;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-family: '苹方-简';
|
||||||
|
color: #ecf4f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_button {
|
||||||
|
width: 2.5vw;
|
||||||
|
height: 4vh;
|
||||||
|
border: 0;
|
||||||
|
background-color: #03d6df;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #02c7ce;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-icon-search {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.check {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 13vw;
|
||||||
|
height: 18vh;
|
||||||
|
position: absolute;
|
||||||
|
top: 7vh;
|
||||||
|
right: 0;
|
||||||
|
background-image: url('@/assets/picture/bg_info.png');
|
||||||
|
background-size: 100% auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
.check_coverage {
|
||||||
|
height: 3vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check_title {
|
||||||
|
margin-left: 1vw;
|
||||||
|
color: #ecf4f9;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
line-height: 3vh;
|
||||||
|
font-family: '苹方-简 中黑体';
|
||||||
|
}
|
||||||
|
|
||||||
|
.check_coveragebottom {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
height: 15vh;
|
||||||
|
|
||||||
|
.el-checkbox {
|
||||||
|
margin-left: 1vw;
|
||||||
|
color: #ecf4f9;
|
||||||
|
|
||||||
|
.el-checkbox__label {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-family: '苹方-简 中黑体';
|
||||||
|
}
|
||||||
|
|
||||||
|
.check_label {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 10vw;
|
||||||
|
|
||||||
|
.check_label_count {
|
||||||
|
width: 3vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue