xiangyuan-app/src/pages/home/village/index.vue

<template>
  <FlexCol :gap="20" :padding="30">

    <FlexRow center :gap="30">
      <HomeLargeTitle title="村社名片" :active="tab === 'card'" @click="tab = 'card'" />
      <HomeLargeTitle title="乡源树" :active="tab === 'tree'" @click="tab = 'tree'">
        <template #icon>
          <Image src="https://xy.wenlvti.net/app_static/images/village/IconLargeTree.png" :width="45" :height="46" mode="heightFix" />
        </template>
      </HomeLargeTitle>
    </FlexRow>
    <Card v-if="tab === 'card'" />
    <Tree v-if="tab === 'tree'" />
    <Loadmore status="nomore" />
    <Height :height="150" />
  </FlexCol>
</template>

<script setup lang="ts">
import Loadmore from '@/components/display/loading/Loadmore.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Height from '@/components/layout/space/Height.vue';
import Image from '@/components/basic/Image.vue';
import HomeLargeTitle from '@/common/components/parts/HomeLargeTitle.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import { ref } from 'vue';
import Card from './introd/card.vue';
import Tree from './introd/tree.vue';

const tab = ref('tree');
</script>