ieplus-app/src/pagesMain/pages/index/components/index-banner.vue

<template>
  <view class="shadow-card mx-30 bg-white overflow-hidden rounded-17 p-2">
    <ie-image :is-oss="true" src="/banner/index-banner-1.png" custom-class="w-full min-h-264 overflow-hidden"
      :round="15" />
    <view class="pt-24 pb-40 bg-white grid grid-cols-4 gap-y-32 justify-items-center">
      <view class="w-fit" v-for="item in menus" :key="item.name" @click="navigateTo(item.pageUrl, item.navigateType)">
        <ie-image :is-oss="true" custom-class="w-auto h-82" :round="10" :src="item.icon" mode="heightFix" />
        <view class="text-26 text-fore-title">{{ item.name }}</view>
      </view>
    </view>
  </view>
  <view class="mx-30 mt-36">
    <ie-image :is-oss="true" src="/banner/index-banner-2.png" custom-class="w-full min-h-180 bg-back" :round="15" />
  </view>
</template>
<script lang="ts" setup>
import { useTransferPage } from '@/hooks/useTransferPage';
const { transferTo } = useTransferPage();
const menus = [
  {
    name: '学习备考',
    icon: '/menu/menu-study.png',
    pageUrl: '/pagesStudy/pages/index/index',
  },
  {
    name: '志愿填报',
    icon: '/menu/menu-volunteer.png',
    pageUrl: '/pagesMain/pages/volunteer/volunteer',
    navigateType: 'switchTab',
  },
  {
    name: '找院校',
    icon: '/menu/menu-college.png',
    pageUrl: '/pagesOther/pages/college-library/index/index',
  },
  {
    name: '查专业',
    icon: '/menu/menu-major.png',
    pageUrl: '/pagesOther/pages/major-library/index/index',
  },
  {
    name: '看职业',
    icon: '/menu/menu-work.png',
    pageUrl: '/pagesOther/pages/vocation-library/index/index',
  },
  {
    name: '自我测评',
    icon: '/menu/menu-test.png',
    pageUrl: '/pagesOther/pages/test-center/index/index',
  },
  {
    name: '单招资讯',
    icon: '/menu/menu-news.png',
    pageUrl: '/pagesOther/pages/news/index/index',
  },
  {
    name: '专升本',
    icon: '/menu/menu-upgrade.png',
    pageUrl: '/pages/index/index',
  }
]
const navigateTo = (pageUrl: string, navigateType?: string) => {
  transferTo(pageUrl, {
    type: navigateType || 'navigate',
  });
}
</script>
<style lang="scss" scoped></style>