<template>
<div>
<div class="add">
<div>
<div class="addimg" @mouseover="onmouseover($event)" @mouseleave="onmouseout($event)" >
<div v-if="add12" class="pak">
<img class="imgs" :src="picture" />
</div>
<div class="errt" v-if="add13">
<router-link :to="{name:'aq/anquanlist'}">
<img class="imgs1" :src="picture" />
<p>哈哈哈</p>
</router-link>
</div>
</div>
</div>
<div></div>
<div></div>
</div>
</div>
</template>
<script>
// import
import avatar from '@/assets/logo.png'
export default {
data() {
return {
anf: false,
add12: true,
add13: false,
imgObj: {
immigrate: require("@/assets/year.png"),
shiftout: require("@/assets/guanbi.png"),
},
picture: require("@/assets/year.png"),
// src: require('@/assets/year.png'),
// conTop: {
// backgroundImage: 'url(' + require('@/assets/year.png') + ')',
// backgroundRepeat: 'no-repeat',
// backgroundSize: cover
// }
};
},
methods: {
// 移入
onmouseover($event) {
this.picture = this.imgObj.shiftout;
this.add12 = false
this.add13 = true
$event.currentTarget.className = 'pak active'
},
// 移出
onmouseout($event) {
this.picture = this.imgObj.immigrate;
// this.anf = false
this.add12 = true
this.add13 = false
$event.currentTarget.className = 'pak'
}
}
};
</script>
<style>
.bottom-transparent {
height: 180px;
width: 100%;
background: rgba(0, 0, 0, 1) url("/static/img/icon_flat-big.png");
background-repeat: no-repeat;
background-position: 5% 50%;
bottom: 0;
margin-bottom: 2px;
position: fixed;
z-index: 100;
opacity: 0.6;
}
.add {
width: 600px;
height: 400px;
border: 1px solid red;
display: flex;
justify-content: space-between;
}
.add>div {
margin-top: 20px;
width: 30%;
height: 120px;
border: 1px solid black;
}
.errt{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.pak{
margin: 0 auto;
width: 100%;
height: 100%;
}
.active {
background: rgb(231, 228, 228);
}
.pak>img{
width: 100px;
height: 100px;
margin: 0 auto;
}
.imgs1 {
width: 60px;
height:60px;
margin: 0 auto;
border: 1px solid red;
/* background: url('~@/assets/year.png') repeat-x; */
background-size: 30px 40px;
/* z-index: 2000; */
}
</style>
移入时候
移出
