<template>
<div class="all" :style="{ width: boxWidth + '%' }">
<el-popover placement="top-start" :title="title" :width="popoverWidth" :trigger="trigger">
<div slot="reference">
<div class="sub">
<div class="left">
<div class="top">{{ data.name }}</div>
<div class="bottom">{{ data.num }}</div>
</div>
<div class="right">
<slot name="img_title"></slot>
</div>
</div>
</div>
<slot name="content"></slot>
</el-popover>
</div>
</template>
<script>
export default {
name: 'title',
props: {
data: {},
boxWidth: {
type: Number,
default: 15,
},
popoverWidth: {
type: String,
default: '100%',
},
trigger: {
type: String,
default: 'click',
},
title: {
type: String,
default: '',
},
},
data() {
return {
subwidth: {},
}
},
}
</script>
<style lang="less" scoped>
.all {
width: 16%;
}
.sub {
display: flex;
justify-content: space-between;
padding: 20px;
background-color: #ccc;
box-shadow: 1px 1px rgba(0, 0, 0, 0.3);
.left {
.top {
white-space: nowrap;
}
}
.bottom {
margin-top: 20px;
}
.right {
display: flex;
align-items: center;
margin-left: 30px;
}
}
</style>
Processed:
0.011, SQL:
10
