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.
111 lines
2.7 KiB
111 lines
2.7 KiB
<template>
|
|
<div class="HomeFrame">
|
|
<ElPopover trigger="manual" :value="activeIcon === 'Frame'" :visibleArrow="false" placement="left"
|
|
popper-class="global-input-search-popover">
|
|
|
|
<div slot="reference">
|
|
<el-tooltip effect="light" content="图标含义" placement="left">
|
|
<Button :class="['btn', { 'btn-active': activeIcon }]" @click.native="handleClick('Frame')">
|
|
<img src="@screen/images/home-Frame/Frame.svg" />
|
|
</Button>
|
|
</el-tooltip>
|
|
</div>
|
|
|
|
<div class="body">
|
|
<div class="title">图标含义</div>
|
|
<span class="close" @click="() => { this.activeIcon = null; }">
|
|
<i class="el-icon-close" />
|
|
</span>
|
|
<!-- <Form labelWidth="90px" column="1" class="form" ref="FormConfigRef" :formList="formList" /> -->
|
|
<img class="image" src="@screen/images/home-Frame/logoMean.png" />
|
|
<!-- <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);
|
|
// margin-top: 6vh;
|
|
|
|
.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%;
|
|
}
|
|
|
|
.close {
|
|
padding: 3px 9px;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: fit-content;
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.image {
|
|
width: 50vw;
|
|
height: 65vh;
|
|
}
|
|
|
|
.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>
|
|
|