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] 图片 禁止横向滚动
---
public/img/login-sq33.png | 0
public/img/login-sq3.png | 0
src/components/examineCard/examineCard.vue | 45 ++++++++++++++--------
public/img/login-sq1.png | 0
public/img/login-sq22.png | 0
public/img/login-sq11.png | 0
public/img/login-sq5.png | 0
public/img/login-sq1010.png | 0
/dev/null | 0
public/img/login-sq2.png | 0
src/views/home/index.vue | 27 +++++++++----
public/img/login-sq4.png | 0
public/img/login-sq10.png | 0
public/img/login-sq55.png | 0
public/img/login-sq44.png | 0
15 files changed, 47 insertions(+), 25 deletions(-)
diff --git a/public/img/login-sq1.png b/public/img/login-sq1.png
new file mode 100644
index 0000000..1b3a32e
--- /dev/null
+++ b/public/img/login-sq1.png
Binary files differ
diff --git a/public/img/login-sq10.png b/public/img/login-sq10.png
new file mode 100644
index 0000000..88f19f9
--- /dev/null
+++ b/public/img/login-sq10.png
Binary files differ
diff --git a/public/img/login-sq1010.png b/public/img/login-sq1010.png
new file mode 100644
index 0000000..a606ac7
--- /dev/null
+++ b/public/img/login-sq1010.png
Binary files differ
diff --git a/public/img/login-sq11.png b/public/img/login-sq11.png
new file mode 100644
index 0000000..8f9f94c
--- /dev/null
+++ b/public/img/login-sq11.png
Binary files differ
diff --git a/public/img/login-sq2.png b/public/img/login-sq2.png
new file mode 100644
index 0000000..f5d25a1
--- /dev/null
+++ b/public/img/login-sq2.png
Binary files differ
diff --git a/public/img/login-sq22.png b/public/img/login-sq22.png
new file mode 100644
index 0000000..3894613
--- /dev/null
+++ b/public/img/login-sq22.png
Binary files differ
diff --git a/public/img/login-sq3.png b/public/img/login-sq3.png
new file mode 100644
index 0000000..712677a
--- /dev/null
+++ b/public/img/login-sq3.png
Binary files differ
diff --git a/public/img/login-sq33.png b/public/img/login-sq33.png
new file mode 100644
index 0000000..8c61148
--- /dev/null
+++ b/public/img/login-sq33.png
Binary files differ
diff --git a/public/img/login-sq4.png b/public/img/login-sq4.png
new file mode 100644
index 0000000..0ff079d
--- /dev/null
+++ b/public/img/login-sq4.png
Binary files differ
diff --git a/public/img/login-sq44.png b/public/img/login-sq44.png
new file mode 100644
index 0000000..041c706
--- /dev/null
+++ b/public/img/login-sq44.png
Binary files differ
diff --git a/public/img/login-sq5.png b/public/img/login-sq5.png
new file mode 100644
index 0000000..7713d1c
--- /dev/null
+++ b/public/img/login-sq5.png
Binary files differ
diff --git a/public/img/login-sq55.png b/public/img/login-sq55.png
new file mode 100644
index 0000000..af7ac72
--- /dev/null
+++ b/public/img/login-sq55.png
Binary files differ
diff --git a/public/img/logo.png b/public/img/logo.png
deleted file mode 100644
index 0fc2fc1..0000000
--- a/public/img/logo.png
+++ /dev/null
Binary files differ
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
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index cf5ad51..fa31df3 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -28,6 +28,7 @@
@open="openMain"
v-show="showCard"
></examineCard>
+ <!-- :background="" -->
</div>
</div>
<!-- 审批进度查询 -->
@@ -113,36 +114,43 @@
{
menuName: "保安服务公司许可申请",
centerUrl: "/img/logo.png",
- topUrl: "url(/img/permit/服务许可背景图.jpg)",
- // topUrl: "/img/permit/服务许可背景图.jpg",
+ // topUrl: "url(/img/服务许可背景图.jpg)",
+ topUrl: "url(/img/login-sq1.png)",
+ topUrlh: "url(/img/login-sq11.png)",
+ // topUrl: "/img/服务许可背景图.jpg",
targetUrl: "per",
type: 0,
},
{
menuName: "跨区域经营备案",
centerUrl: "/img/logo.png",
- topUrl: "url(/img/permit/服务许可背景图.jpg)",
+ topUrl: "url(/img/login-sq2.png)",
+ topUrlh: "url(/img/login-sq22.png)",
type: 3,
},
{
menuName: "自招保安单位备案",
centerUrl: "/img/logo.png",
- topUrl: "url(/img/permit/服务许可背景图.jpg)",
+ topUrl: "url(/img/login-sq3.png)",
+ topUrlh: "url(/img/login-sq33.png)",
type: 1,
},
{
menuName: "保安培训公司备案",
centerUrl: "/img/logo.png",
- topUrl: "url(/img/permit/服务许可背景图.jpg)",
+ topUrl: "url(/img/login-sq4.png)",
+ topUrlh: "url(/img/login-sq44.png)",
type: 2,
},
{
menuName: "自招保安单位备案撤销",
centerUrl: "/img/logo.png",
- topUrl: "url(/img/permit/服务许可背景图.jpg)",
+ topUrl: "url(/img/login-sq5.png)",
+ topUrlh: "url(/img/login-sq55.png)",
type: 6,
},
],
+ out: true,
};
},
computed: {
@@ -308,10 +316,10 @@
}
}
.b_main {
- width: 100%;
+ width: 1311px;
height: calc(100% - 220px);
// border: 1px solid red;
- padding: 0 10%;
+ margin: 0 auto;
box-sizing: border-box;
}
}
@@ -369,7 +377,8 @@
.f-b-o-in {
width: 100%;
height: 620px;
- overflow: scroll;
+ overflow-y: scroll;
+ overflow-x: hidden;
}
}
.handling-guideline {
--
Gitblit v1.9.3