<template>
|
<div
|
class="card animation-target"
|
:style="{ backgroundImage: out ? data.topUrl : data.topUrlh }"
|
@click="opens"
|
@mouseenter="enter"
|
@mouseleave="leave"
|
>
|
<div class="floatCard">
|
<el-button type="primary" class="floatCard_buts" round v-show="handle"
|
>点击办理</el-button
|
>
|
<el-button type="success" class="floatCard_butsd" round v-show="!handle"
|
>您已成功办理，点击可查询进度</el-button
|
>
|
</div>
|
<div class="title" :style="{ top: titleTop }">{{ data.menuName }}</div>
|
<!-- <img :src="data.topUrl" alt="" /> -->
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
export default {
|
props: ["data", "ind", "background"],
|
data() {
|
return {
|
out: true,
|
titleTop: "166px",
|
};
|
},
|
computed: {
|
...mapGetters(["handle"]),
|
},
|
methods: {
|
enter() {
|
this.out = false;
|
this.titleTop = "126px";
|
},
|
leave() {
|
this.out = true;
|
this.titleTop = "166px";
|
},
|
opens() {
|
var d = this.handle ? "open" : "openLook";
|
this.$emit("open", this.ind, d);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.card {
|
position: relative;
|
float: left;
|
width: 285px;
|
height: 240px;
|
padding: 0 10px;
|
margin-bottom: 70px;
|
margin-right: 30px;
|
margin-left: 30px;
|
border-radius: 10px;
|
background-size: 100% 100%;
|
overflow: hidden;
|
background-repeat: no-repeat;
|
border: 1px solid rgba($color: #000000, $alpha: 0.1);
|
border-top: 0px solid rgba($color: #000000, $alpha: 0.3);
|
&:hover {
|
box-shadow: 0px 5px 15px rgba($color: #000000, $alpha: 0.3);
|
cursor: pointer;
|
}
|
.title {
|
width: 100%;
|
height: 35px;
|
position: absolute;
|
// top: 176px;
|
left: 0;
|
}
|
}
|
.floatCard {
|
opacity: 0;
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
left: 0;
|
top: 0;
|
background-color: rgba($color: #fff, $alpha: 0.6);
|
.floatCard_buts {
|
width: 110px;
|
height: 40px;
|
position: relative;
|
left: calc(50% - 55px);
|
top: calc(50% - 20px);
|
}
|
.floatCard_butsd {
|
width: 250px;
|
height: 40px;
|
position: relative;
|
left: calc(50% - 125px);
|
top: calc(50% - 20px);
|
}
|
}
|
.animation-target {
|
animation: animationA 400ms linear both;
|
&:hover {
|
animation: animation 400ms linear both;
|
// .title {
|
// animation: floatCardanimation 200ms linear both;
|
// }
|
}
|
}
|
|
@keyframes animationA {
|
0% {
|
top: -15px;
|
}
|
100% {
|
top: 0px;
|
}
|
}
|
|
@keyframes animation {
|
0% {
|
top: 0px;
|
}
|
100% {
|
top: -15px;
|
}
|
}
|
@keyframes floatCardanimation {
|
0% {
|
top: 176px;
|
}
|
100% {
|
top: 126px;
|
}
|
}
|
</style>
|
