| | |
| | | <template> |
| | | <div |
| | | class="card animation-target" |
| | | :style="{ backgroundImage: data.topUrl }" |
| | | :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 |
| | | > |
| | | </div> |
| | | <div class="title">{{ data.menuName }}</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"], |
| | | props: ["data", "ind", "background"], |
| | | data() { |
| | | return {}; |
| | | 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); |
| | |
| | | .card { |
| | | position: relative; |
| | | float: left; |
| | | width: 21%; |
| | | height: 236px; |
| | | width: 285px; |
| | | height: 240px; |
| | | padding: 0 10px; |
| | | margin-bottom: 15px; |
| | | margin-right: 35px; |
| | | border-radius: 5px; |
| | | background-size: 100% 85%; |
| | | margin-bottom: 70px; |
| | | margin-right: 30px; |
| | | margin-left: 30px; |
| | | border-radius: 10px; |
| | | background-size: 100% 100%; |
| | | overflow: hidden; |
| | | background-repeat: no-repeat; |
| | | // background-image: url(/img/permit/服务许可背景图.jpg); |
| | | border: 1px solid rgba($color: #000000, $alpha: 0.1); |
| | | border-top: 0px solid rgba($color: #000000, $alpha: 0.3); |
| | | &:hover { |
| | |
| | | width: 100%; |
| | | height: 35px; |
| | | position: absolute; |
| | | top: 176px; |
| | | // top: 176px; |
| | | left: 0; |
| | | } |
| | | } |
| | |
| | | animation: animationA 400ms linear both; |
| | | &:hover { |
| | | animation: animation 400ms linear both; |
| | | .floatCard { |
| | | animation: floatCardanimation 200ms linear both; |
| | | } |
| | | // .title { |
| | | // animation: floatCardanimation 200ms linear both; |
| | | // } |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | @keyframes floatCardanimation { |
| | | 0% { |
| | | opacity: 0; |
| | | top: 176px; |
| | | } |
| | | 100% { |
| | | opacity: 1; |
| | | top: 126px; |
| | | } |
| | | } |
| | | </style> |