starwork-uniapp/src/pages/home/HomeTab.vue

<template>
  <view class="mx-4 py-1 bg-white rounded-2 pos-relative shadow-sm">
    <view
      class="h-42px z-10 pos-absolute right-1 bg-white flex flex-items-center justify-center px-2"
    >
      <image @click="clickMenu" src="/static/images/icon_table_menu.png" class="w-5 h-5"></image>
    </view>
    <wd-tabs
      v-model="tab"
      auto-line-width
      swipeable
      animated
      color="#0d100e"
      inactiveColor="#838383"
    >
      <wd-tab v-for="(item, index) in list" :key="index" :title="item.name" :name="index">
        <view class="flex flex-wrap ml-1.5">
          <view
            v-for="subItem in item.list"
            :key="subItem.id"
            class="text-center my-2 w-20.4375"
            @click="clickItem(subItem)"
          >
            <image :src="subItem.icon" class="w-7 h-7 m-a"></image>
            <view class="text-3 mt-2">{{ subItem.name }}</view>
          </view>
        </view>
      </wd-tab>
    </wd-tabs>
  </view>
</template>

<script setup lang="ts">
  import { HomeTab, HomeTabItem } from '@/typings'

  defineOptions({
    options: {
      styleIsolation: 'shared'
    }
  })

  const tab = ref<number>(0)

  defineProps({
    list: {
      type: Array<HomeTab>,
      required: true
    }
  })

  const clickMenu = () => {
    uni.navigateTo({
      url: '/pages/application-list/application-list'
    })
  }

  const clickItem = (item: HomeTabItem) => {
    uni.navigateTo({
      url: item.url
    })
  }
</script>

<style>
  :deep(.wd-tabs__nav--wrap) {
    margin-right: 30px;
  }
</style>