Joe
1 year ago
16 changed files with 319 additions and 66 deletions
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
@ -0,0 +1,113 @@ |
|||||
|
<template> |
||||
|
<div class='HomeFilter'> |
||||
|
<ElPopover trigger="click" :visibleArrow="false" placement="left" popper-class="global-input-search-popover"> |
||||
|
<Button :class="['btn', { 'btn-active': true }]" slot="reference"> |
||||
|
<img src="@screen/images/home-filter/filter.svg"> |
||||
|
</Button> |
||||
|
|
||||
|
|
||||
|
<div class="body"> |
||||
|
<div class="title"> |
||||
|
设备筛选 |
||||
|
</div> |
||||
|
<Form labelWidth="72px" column="1" class="form" ref="FormConfigRef" :formList="formList" /> |
||||
|
|
||||
|
<div class="footer">∏ |
||||
|
<Button style="background-color: rgba(0, 179, 204, .3);" @click.native="handleResetForm"> |
||||
|
重置 |
||||
|
</Button> |
||||
|
<Button @click.native="handleSearch"> |
||||
|
搜索 |
||||
|
</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ElPopover> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Button from '@screen/components/Buttons/Button.vue'; |
||||
|
import Form from '@screen/components/FormConfig'; |
||||
|
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; |
||||
|
|
||||
|
export default { |
||||
|
name: 'HomeFilter', |
||||
|
components: { |
||||
|
Button, |
||||
|
Form |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
formList: [ |
||||
|
{ |
||||
|
...PresetFormItems.station, |
||||
|
key: "23", |
||||
|
required: false, |
||||
|
label: "起始桩号" |
||||
|
}, |
||||
|
{ |
||||
|
...PresetFormItems.station, |
||||
|
key: "s", |
||||
|
required: false, |
||||
|
label: "结束桩号" |
||||
|
}, |
||||
|
{ |
||||
|
label: "车道占用:", |
||||
|
key: "key027", |
||||
|
type: "CheckboxGroup", |
||||
|
isAlone: true, |
||||
|
default: [], |
||||
|
options: { |
||||
|
options: [ |
||||
|
{ key: "weChat", label: "行1" }, |
||||
|
{ key: "message", label: "行2" }, |
||||
|
{ key: "website", label: "行3" }, |
||||
|
{ key: "weibo", label: "行4" }, |
||||
|
{ key: "weibo2", label: "应急车道" }, |
||||
|
], |
||||
|
}, |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss'> |
||||
|
div.el-popper.global-input-search-popover { |
||||
|
background: rgba(6, 66, 88, 0.8); |
||||
|
border: 1px solid rgba(42, 217, 253, 0.6); |
||||
|
position: relative; |
||||
|
padding-top: 36px; |
||||
|
transform: translateY(24px); |
||||
|
|
||||
|
.body { |
||||
|
.title { |
||||
|
background: linear-gradient(90deg, #237E9B 0%, rgba(23, 145, 184, 0) 100%); |
||||
|
padding: 3px 9px; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
<style lang='scss' scoped> |
||||
|
.HomeFilter { |
||||
|
|
||||
|
.btn { |
||||
|
padding: 9px; |
||||
|
background: linear-gradient(180deg, #152E3C 0%, #163A45 100%); |
||||
|
border-radius: 4px; |
||||
|
overflow: hidden; |
||||
|
height: unset; |
||||
|
border: 1px solid rgba(40, 144, 167, 1); |
||||
|
} |
||||
|
|
||||
|
.btn-active { |
||||
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue