图片 禁止横向滚动

liuyg

2021-08-19 6b6cc06d998d1102743ca7d2e90b4776b40560c7

图片  禁止横向滚动

 public/img/login-sq1.png

 public/img/login-sq10.png

 public/img/login-sq1010.png

 public/img/login-sq11.png

 public/img/login-sq2.png

 public/img/login-sq22.png

 public/img/login-sq3.png

 public/img/login-sq33.png

 public/img/login-sq4.png

 public/img/login-sq44.png

 public/img/login-sq5.png

 public/img/login-sq55.png

 public/img/logo.png

Binary files differ

 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>

 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 {