You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
2.1 KiB
95 lines
2.1 KiB
1 year ago
|
<template>
|
||
|
|
<div class='HomeFrame'>
|
||
|
|
<ElPopover trigger="manual" :value="activeIcon === 'Frame'" :visibleArrow="false" placement="left"
|
||
|
|
popper-class="global-input-search-popover">
|
||
|
|
<Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference" @click.native="handleClick('Frame')">
|
||
|
|
<img src="@screen/images/home-Frame/Frame.svg">
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
<div class="body">
|
||
|
|
<div class="title">
|
||
|
|
图标含义
|
||
|
|
</div>
|
||
|
|
<!-- <Form labelWidth="90px" column="1" class="form" ref="FormConfigRef" :formList="formList" /> -->
|
||
|
|
<img class="image" src="@screen/images/home-Frame/logoMean.jpg">
|
||
|
|
<div class="footer">
|
||
|
|
</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";
|
||
|
|
import { merge, cloneDeep } from "lodash"
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'HomeFrame',
|
||
|
|
components: {
|
||
|
|
Button,
|
||
|
|
Form
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
activeIcon: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClick(type) {
|
||
|
|
this.activeIcon = this.activeIcon === type ? null : type;
|
||
|
|
},
|
||
|
|
filterEnd(data) {
|
||
|
|
this.activeIcon = null;
|
||
|
|
// this.filterData = data;
|
||
|
|
this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data);
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</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>
|
||
|
|
.image {
|
||
|
|
width: 1440px;
|
||
|
|
height: 900px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.HomeFrame {
|
||
|
|
|
||
|
|
.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>
|