xiangyuan-app/src/pages/index.vue

<template>
	<view class="index">
    <StatusBarSpace backgroundColor="transparent" />
    <NavBar 
      :title="title"
      :titleScroll="false"
      backgroundColor="transparent"
      textColor="white"
      align="left"
    />
    <HomeIndex v-if="tabIndex === 0" @goDiscover="tabIndex = 1" />
    <DiscoverIndex v-else-if="tabIndex === 1" />
    <DigIndex v-else-if="tabIndex === 2" />
    <StoreIndex v-else-if="tabIndex === 3" />
    <UserIndex v-else-if="tabIndex === 4" @goSubmit="tabIndex = 2" />
    <TabBar
      v-model:selectedTabIndex="tabIndex"
      fixed
      xbarSpace
    >
      <TabBarItem icon="/static/images/tabs/home.png" activeIcon="/static/images/tabs/home-active.png" text="首页" />
      <TabBarItem icon="/static/images/tabs/discover.png" activeIcon="/static/images/tabs/discover-active.png" text="发现" />
      <TabBarItem icon="/static/images/tabs/dig.png" hump :humpHeight="[ 10, 10 ]" :humpSpace="[20,20]" :iconSize="140" />
      <TabBarItem icon="/static/images/tabs/store.png" activeIcon="/static/images/tabs/store-active.png" text="知识库" />
      <TabBarItem icon="/static/images/tabs/user.png" activeIcon="/static/images/tabs/user-active.png" text="我的" />
    </TabBar>
	</view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';
import NavBar from '@/components/nav/NavBar.vue';
import TabBar from '@/components/nav/TabBar.vue';
import TabBarItem from '@/components/nav/TabBarItem.vue';
import DigIndex from './dig/index.vue';
import UserIndex from './user/index.vue';
import HomeIndex from './home/index.vue';
import DiscoverIndex from './home/discover/index.vue';
import StoreIndex from './home/store/index.vue';

const title = computed(() => {
  switch (tabIndex.value) {
    case 0:
      return '首页·村社文化资源挖掘平台';
    case 1:
      return '发现·村社文化资源挖掘平台';
    case 2:
      return '挖掘·村社文化资源挖掘平台';
    case 3:
      return '知识库·村社文化资源挖掘平台';
    case 4:
      return '我的·村社文化资源挖掘平台';
  }
  return '';
});
const tabIndex = ref(0);
</script>

<style scoped>
.index {
  background-position: top left;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-image: url('@/static/images/BackgroundMask.jpg');
  overflow-x: hidden;
}
</style>