74 lines
1.5 KiB
Vue
74 lines
1.5 KiB
Vue
<!--
|
|
* @Author: gtz
|
|
* @Date: 2022-06-06 15:34:34
|
|
* @LastEditors: gtz
|
|
* @LastEditTime: 2022-06-09 17:45:35
|
|
* @Description: file content
|
|
* @FilePath: \mt-bus-fe\src\views\DataAnalysis\components\hoverBox.vue
|
|
-->
|
|
<template>
|
|
<div v-if="visible" class="hover-box" :style="{ left: buttonWidth + 'px' }">
|
|
<el-row class="hover-box-title">
|
|
{{ injectData.title }} <span style="margin: 0 16px">|</span> {{ injectData.line }} {{ injectData.process }} {{ injectData.equipmentName }} {{ moment(new Date()).format('YYYY-MM-DD') }}
|
|
</el-row>
|
|
<el-row class="hover-box-main" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment'
|
|
export default {
|
|
props: {
|
|
injectData: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
buttonWidth: {
|
|
type: Number,
|
|
default: () => 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
moment
|
|
}
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.visible = true
|
|
},
|
|
remove() {
|
|
this.visible = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.hover-box{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
min-width: 600px;
|
|
background: #020F1B;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
opacity: 0.85;
|
|
backdrop-filter: blur(6px);
|
|
background: #000;
|
|
z-index: 1;
|
|
font-size: 14px;
|
|
text-align: left;
|
|
.hover-box-title {
|
|
height: 48px;
|
|
line-height: 48px;
|
|
padding: 0 16px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, .45);
|
|
}
|
|
.hover-box-main{
|
|
height: 50px;
|
|
}
|
|
}
|
|
</style>
|