colexiu-website/src/components/safe/index.vue

<template>
  <div class="container">
    <div class="content">
      <img
        class="animate__animated"
        :class="{animate__fadeInDown: inited ? item[2] : true}"
        v-for="(item, index) in items"
        :key="index"
        :style="{
          width: item[3] + 'px',
          top: item[0] + 'px',
          left: item[1] + 'px',
          'animation-delay': (!inited ? (index * 0.3) + 's' : '0s'),
          'z-index': 6 - index
        }"
        :src="require(`./images/${index + 1}.png`)"
      />
    </div>
  </div>
</template>
<script>
const items = [
  [60, 50, false, 421],
  [120, 220, false, 466],
  [180, -100, false, 581],
  [240 , -15, false, 520],
  [305, 188, false, 519],
]
export default {
  name: 'safe',
  data() {
    return {
      items,
      inited: false,
    }
  },
  mounted() {
    let timer = null
    timer = setTimeout(() => {
      this.inited = true
      clearTimeout(timer)
    }, 2500)
  },
  methods: {
    mouseenter(index) {
      let timer = null
      const _items = [...this.items]
      _items[index][2] = true
      this.items = _items
      setTimeout(() => {
        this.mouseleave(index)
        clearTimeout(timer)
      }, 600)
    },
    mouseleave(index) {
      const _items = [...this.items]
      _items[index][2] = false
      this.items = _items
    }
  }
}
</script>
<style lang="less" scoped>
  .container{
    min-height: 500px;
    .content{
      width: 581px;
      margin: 50px auto;
      margin-left: 280px;
      position: relative;
      >img{
        display: block;
        position: absolute;
        transition: all .3s ease-in-out;
        &:hover{
          margin-top: -10px;
        }
      }
    }
  }
</style>