<template>
<div @mouseleave="hoverBtn('')">
<div :style="`width:${width}rem;height:${width}rem`" @click="btnClick(id)" @mouseover="hoverBtn(id)">
<div :style="styleExternalBtn" class="menu-icon" v-on="$listeners" />
<div :style="`width:${width}rem;font-size: ${Number(width)/6}rem;`" class="font-class" v-on="$listeners">{{text}}</div>
</div>
<div style="position: relative;left: 0" :style="`top: ${-width}rem;`">
<div v-if="hasChildren" v-for="(item, index) of children" :key="index">
<svg class="line" :style="`margin-top: ${width=='5'?-4.6:-5.6}rem`">
<defs>
<linearGradient
style="color: #1e445d"
:id="`gradient-${id}${index}`"
>
<stop offset="0%" stop-color="#1e445daa" />
<stop offset="50%" stop-color="#2f6b91" />
<stop offset="100%" stop-color="#1e445daa" />
</linearGradient>
</defs>
<line :x1="`${positions[width][children.length][index].x1}rem`"
:y1="`${positions[width][children.length][index].y1}rem`"
:x2="`${positions[width][children.length][index].x2}rem`"
:y2="`${positions[width][children.length][index].y2}rem`" :stroke="`url(#gradient-${id}${index})`" stroke-width="1" style="position: absolute"/>
<!-- `url(#gradient-${id}${index})`-->
</svg>
<div class="children-menu" @click="childrenClick(item)"
:style="`width:${width=='5'?4.6:6}rem;height:${width=='5'?4.6:6}rem;
left:${positions[width][children.length][index].left}rem;
top: ${positions[width][children.length][index].top}rem;`">
<div :style="`margin-top: ${width=='5'?1.45:2.2}rem`">{{item.name}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'MenuBtn',
props: {
id: {
type: String,
required: true
},
bg: {
type: String,
required: true
},
bgHover: {
type: String,
default: ''
},
width: {
type: String,
default: '10'
},
height: {
type: String,
default: '10'
},
text: {
type: String,
default: ''
},
font: {
type: String,
default: ''
},
hasChildren: {
type: Boolean,
default: false
},
children: {
type: Array,
default: () => ([])
}
},
computed: {
styleExternalBtn() {
return {
background: `url(${this.bg})`,
'--hover-url': `url(${this.bgHover})`,
width: `${this.width}` + 'rem',
height: `${this.height}` + 'rem',
}
}
},
data() {
return {
positions: {
'5': {
1: [
{left: 0,top: -5,x1: 5,y1: 4.1,x2: 5.0001,y2: 5},
],
2: [
{left: -2,top: -5,x1: 4.4,y1: 4.1,x2: 5.5,y2: 5},
{left: 2,top: -5,x1: 4.4,y1: 4.1,x2: 3.3,y2: 5},
],
6: [
{left: -5.5,top: 1,x1: 6,y1: 2,x2: 8,y2: 2.0001},
{left: -4.5,top: -2.5,x1: 6,y1: 3,x2: 7,y2: 4},
{left: -1.8,top: -5,x1: 4.4,y1: 4.1,x2: 5.5,y2: 5},
{left: 1.8,top: -5,x1: 4.4,y1: 4.1,x2: 3.3,y2: 5},
{left: 4.5,top: -2.5,x1: 2.8,y1: 3,x2: 2,y2: 4},
{left: 5.5,top: 1,x1: 0.8,y1: 2,x2: 2.5,y2: 2.0001},
]
},
'10': {
1: [
{left: 1.8,top: -8,x1: 6.2,y1: 5.3,x2: 6.201,y2: 8.001},
],
2: [
{left: -2,top: -8,x1: 6,y1: 5.3,x2: 8,y2: 8.5},
{left: 5,top: -8,x1: 6,y1: 5.3,x2: 4.2,y2: 8.5},
],
3: [
{left: -4.5,top: -5,x1: 8.1,y1: 4.8,x2: 10.1,y2: 6.3},
{left: 1.8,top: -8,x1: 6.2,y1: 5.3,x2: 6.201,y2: 8.001},
{left: 8,top: -5,x1: 4.1,y1: 4.4,x2: 2,y2: 5.9},
],
6: [
{left: -6.5,top: -.5,x1: 0.2,y1: 3,x2: 2.7,y2: 3.001},
{left: -4.5,top: -5,x1: 8.1,y1: 4.8,x2: 10.1,y2: 6.3},
{left: -0.7,top: -8,x1: 6.8,y1: 5.3,x2: 8,y2: 8},
{left: 4.2,top: -8,x1: 5.5,y1: 5.3,x2: 4,y2: 8},
{left: 8,top: -5,x1: 4.1,y1: 4.4,x2: 2,y2: 5.9},
{left: 10,top: -.5,x1: 9.8,y1: 3,x2: 12.2,y2: 3.001},
]
}
}
}
},
methods: {
hoverBtn(id) {
if(this.children.length!==0) {
this.$emit('menuHover', id)
// this.hasChildren=true
}
},
btnClick(id) {
if(this.children.length===0) {
this.$emit('btnClick', id)
}
},
childrenClick(item) {
this.$emit('btnClick', item)
}
}
}
</script>
<style scoped>
.menu-icon {
background-repeat: no-repeat;
cursor: pointer;
background-size: cover !important;
-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.font-class {
color: white;
position: relative;
bottom: 30%;
font-family: fzhzgbjt;
text-align: center;
cursor: pointer;
-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.menu-icon:hover {
--hover-url: '';
background: var(--hover-url) !important;
background-size: cover !important;
}
.children-menu {
width: 5rem;
height: 5rem;
position: absolute;
color: white;
font-family: fzhzgbjt;
z-index: 1111111111;
background-repeat: no-repeat;
cursor: pointer;
background: url("../../assets/images/menubtn/二级未选中.png") !important;
background-size: 100% 100% !important;
-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.children-menu:hover {
background: url("../../assets/images/menubtn/二级选中.png") !important;
background-size: 100% 100% !important;
}
.line {
display: block;
position: absolute;
transform: scaleY(-1);
margin-left: -1.4rem;
}
/*.common-icon:hover::before {*/
/* content: attr(data-tip);*/
/* display: block;*/
/* word-break: keep-all;*/
/* white-space: nowrap;*/
/* letter-spacing: 0.1rem;*/
/* position: relative;*/
/* padding: 0.01rem 0.3rem;*/
/* color: #fff;*/
/* !*font-weight: bold;*!*/
/* border: 1px solid #246aa1;*/
/* background: #154a76;*/
/* border-radius: 5px;*/
/* top: 95%;*/
/*}*/
</style>
