uk_front/pages/render/_id.vue

<template>
  <div style="position: relative">
    <bxh :bxhType="'render'" :design="+$route.params.id"></bxh>
    <nuxt-link
      :to="{ name: 'design-id', params: { id: +$route.params.id } }">
      <div class="return"
        @mouseenter="changeImageSrc(true)"
        @mouseleave="changeImageSrc(false)">
        <img :src="src" />
        <div class="content">Return</div>
      </div>
    </nuxt-link>
  </div>
</template>
  
<script>
export default {
  layout: "blank_layout",
  data() {
    return {
      src: require(`@/assets/img/bxh/return.png`),
    };
  },
  mounted() {},
  methods: {
    changeImageSrc(key) {
      if (key) {
        this.src = require(`@/assets/img/bxh/return_hover.png`);
      } else {
        this.src = require(`@/assets/img/bxh/return.png`);
      }
    },
  },
};
</script>
  
<style lang="scss" scoped>
.return {
    position: absolute;
    right: 100px;
    top: 0;
    color: #e5e5e6;
    height: 54px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &:hover {
      .content{
        color: #ff7714;
      }
  }
  }
img {
  width: 18px;
}
.content {
  margin-top: 6px;
}
</style>