From 6b6cc06d998d1102743ca7d2e90b4776b40560c7 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Thu, 19 Aug 2021 10:00:59 +0800
Subject: [PATCH] 图片 禁止横向滚动
---
src/components/examineCard/examineCard.vue | 45 +++++++++++++++++++++++++++++----------------
1 files changed, 29 insertions(+), 16 deletions(-)
diff --git a/src/components/examineCard/examineCard.vue b/src/components/examineCard/examineCard.vue
index f31d1a3..3a2d72d 100644
--- a/src/components/examineCard/examineCard.vue
+++ b/src/components/examineCard/examineCard.vue
@@ -1,8 +1,10 @@
<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"
@@ -12,7 +14,7 @@
>您已成功办理，点击可查询进度</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>
@@ -20,14 +22,25 @@
<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);
@@ -40,13 +53,13 @@
.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: 24px;
+ margin-right: 20px;
+ border-radius: 10px;
+ background-size: 100% 100%;
overflow: hidden;
background-repeat: no-repeat;
// background-image: url(/img/permit/服务许可背景图.jpg);
@@ -60,7 +73,7 @@
width: 100%;
height: 35px;
position: absolute;
- top: 176px;
+ // top: 176px;
left: 0;
}
}
@@ -91,9 +104,9 @@
animation: animationA 400ms linear both;
&:hover {
animation: animation 400ms linear both;
- .floatCard {
- animation: floatCardanimation 200ms linear both;
- }
+ // .title {
+ // animation: floatCardanimation 200ms linear both;
+ // }
}
}
@@ -116,10 +129,10 @@
}
@keyframes floatCardanimation {
0% {
- opacity: 0;
+ top: 176px;
}
100% {
- opacity: 1;
+ top: 126px;
}
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3