menu通用组件封装

<script setup>
import { reactive, ref } from "vue";

const props = defineProps({
  menuInfo: Object,
});
const menuItemActive = ref(false);
const info = reactive({ ...props.menuInfo });

const handleMouseEnter = () => {
  info.y = props.menuInfo.activeY;
  menuItemActive.value = true;
};
const handleMouseLeave = () => {
  info.y = props.menuInfo.y;
  menuItemActive.value = false;
};
</script>

<template>
  <div class="menu-item">
    <div
      class="menu-link"
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
    >
      <div
        class="menu-img"
        :style="{
          backgroundImage: `url(${props.menuInfo.img})`,
          backgroundPosition: `${info.x}px ${info.y}px`,
        }"
      ></div>
      <div :class="['menu-title', menuItemActive ? 'menu-title-active' : '']">
        {{ props.menuInfo.title }}
      </div>
      <div :class="['menu-desc', menuItemActive ? 'menu-desc-active' : '']">
        {{ props.menuInfo.desc }}
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.menu-item {
  width: 25%;
  z-index: 999;
  .menu-link {
    padding: 82px 8px 0;
    cursor: pointer;
    .menu-img {
      width: 72px;
      height: 72px;
      margin: 0 auto 10px;
      //   background-image: url("../assets/home/homePage.png");
      background-repeat: no-repeat;
      background-size: 1800px 330px;
    }
    .menu-title {
      font-weight: 700;
      font-size: 18px;
      line-height: 24px;
      color: #222222;
      text-align: center;
    }
    .menu-title-active {
      color: #b51a25;
    }
    .menu-desc {
      font-weight: 400;
      margin-top: 8px;
      line-height: 19px;
      font-size: 14px;
      color: #666666;
      text-align: center;
    }
    .menu-desc-active {
      color: black;
    }
  }
}
</style>

使用

<script setup>
import MenuItem from "../components/MenuItem.vue";

const menuInfo = [
  {
    x: -300,
    y: -30,
    acitveX: -300,
    activeY: -102,
    img: new URL("@/assets/home/homePage.png", import.meta.url),
    title: "仪表板",
    desc: "根据您的需要选择仪表板展示内容，快速进入交易",
    needLogin: true,
  },
  {
    x: -900,
    y: -30,
    acitveX: -900,
    activeY: -102,
    img: new URL("@/assets/home/homePage.png", import.meta.url),
    title: "自贸区业务图书馆",
    desc: "提供最新自贸区、大湾区及人民币国际化政策动态",
    address: "https://igtb.bochk.com/",
  },
  {
    x: 0,
    y: -30,
    acitveX: 0,
    activeY: -102,
    img: new URL("@/assets/home/homePage.png", import.meta.url),
    title: "网上申请商业理财账户",
    desc: "只需三个简单步骤即可申请开立商业理财账户",
    address:
      "https://transaction.bochk.com/igtb/html/aop/gib_aopMainPage.html?lang=zh_CN",
  },
  {
    x: -750,
    y: -30,
    acitveX: -750,
    activeY: -102,
    img: new URL("@/assets/home/homePage.png", import.meta.url),
    title: "查询",
    desc: "以视图形式为您展示全球账户，余额及交易资讯，一目了然",
    needLogin: true,
  },
  {
    x: -1500,
    y: -30,
    acitveX: -1500,
    activeY: -102,
    img: new URL("@/assets/home/homePage.png", import.meta.url),
    title: "知识中心",
    desc: "提供丰富业务资讯、产品介绍、服务条款及功能说明书等",
    address: "https://igtb.bochk.com/",
  },
  {
    x: -1200,
    y: -30,
    acitveX: -1200,
    activeY: -102,
    img: new URL("@/assets/home/homePage.png", import.meta.url),
    title: "工具",
    desc: "提供更多管理工具，使您的交易更加便利",
    needLogin: true,
  },
  {
    x: -150,
    y: -30,
    acitveX: -150,
    activeY: -102,
    img: new URL("@/assets/home/homePage.png", import.meta.url),
    title: "交易银行",
    desc: "了解我们多元化的交易银行业务。",
    address: "https://igtb.bochk.com/",
  },
  {
    x: -1050,
    y: -30,
    acitveX: -1050,
    activeY: -102,
    img: new URL("@/assets/home/homePage.png", import.meta.url),
    title: "培训中心",
    desc: " 提供常用业务指引及功能亮点说明，增进您对iGTB平台的认识",
    address: "https://igtb.bochk.com/",
  },
  {
    x: -600,
    y: -30,
    acitveX: -600,
    activeY: -102,
    img: new URL("@/assets/home/homePage.png", import.meta.url),
    title: "中银全球智汇",
    desc: "智能汇款服务方便您随时追踪汇款，提高汇款效率",
    needLogin: true,
  },
  {
    x: -1350,
    y: -30,
    acitveX: -1350,
    activeY: -102,
    img: new URL("@/assets/home/homePage.png", import.meta.url),
    title: "下载中心",
    desc: "提供不同国家/提供交易模板，供您下载使用",
    needLogin: true,
  },
  {
    x: -1650,
    y: -30,
    acitveX: -1650,
    activeY: -102,
    img: new URL("@/assets/home/homePage.png", import.meta.url),
    title: "本地特色服务",
    desc: "为您提供不同国家/地区的当地特色服务，满足不同业务需要",
    needLogin: true,
  },
  {
    x: -150,
    y: -180,
    acitveX: -150,
    activeY: -252,
    img: new URL("@/assets/home/homePage.png", import.meta.url),
    title: "iGTB API资讯网",
    desc: "了解中银香港iGTB API服务详情，您亦可下载不同API材料",
    address: "https://igtb.bochk.com/",
  },
  {
    x: 0,
    y: -180,
    acitveX: 0,
    activeY: -252,
    img: new URL("@/assets/home/homePage.png", import.meta.url),
    title: "绿色存款",
    desc: "参与绿色存款，启航实践可持续发展理念",
    needLogin: true,
  },
  {
    x: 0,
    y: -30,
    acitveX: 0,
    activeY: -102,
    img: new URL("@/assets/home/homePage.png", import.meta.url),
    title: "在线贷款申请",
    desc: "三个步骤完成您的线上货款申请，轻松解决公司资金周转需要",
    address: "https://igtb.bochk.com/loanapplication_sc.html",
  },
  {
    x: -300,
    y: -30,
    acitveX: -300,
    activeY: -102,
    img: new URL("@/assets/home/homePage.png", import.meta.url),
    title: "申请询证函",
    desc: "",
    needLogin: true,
  },
  {
    x: -1350,
    y: -30,
    acitveX: -1350,
    activeY: -102,
    img: new URL("@/assets/home/homePage.png", import.meta.url),
    title: "上载银行服务指示文件",
    desc: "您可透过此功能上载并递交银行服务指示文件",
    needLogin: true,
  },
];
const handleMenuItemClick = (flag, address) => {
  flag ? (modelFlag.value = true) : open(address, "_blank");
};
</script>
<template>
  <div class="menu">
      <MenuItem
        :menuInfo="item"
        v-for="item in menuInfo"
        :key="item.title"
        @click="handleMenuItemClick(item.needLogin, item.address)"
      />
    </div>
</template>