请说中文，<template>
  <view class="container">
    <view class="title">活动中心</view>
    <tab-switcher :tabs="['主题活动', '排行榜', '团体活动']" :currentIndex=currentTab @tabChange="onTabChange"></tab-switcher>
    <view class="underline" />
    <view v-if="currentTab === 0" class="content">
      <swiper :indicator-dots="true" :autoplay="true" interval="2000" duration="500">
        <swiper-item v-for="(item, index) in banners" :key="index">
          <image :src="item.src" mode="aspectFill" />
        </swiper-item>
      </swiper>
      <tab-switcher :tabs="['月榜', '总榜']" :currentIndex=subTabIndex @tabChange="onSubTabChange"></tab-switcher>
      <view class="underline" />
      <view class="section-title">我的排名</view>
      <view class="rank-form">
        <view class="rank-item">
          <text>用户名：</text>
          <text>{{ myRank.user }}</text>
        </view>
        <view class="rank-item">
          <text>完成次数：</text>
          <text>{{ myRank.count }}</text>
        </view>
        <view class="rank-item">
          <text>最近完成：</text>
          <text>{{ myRank.lastComplete }}</text>
        </view>
      </view>
      <view class="section-title">当前用户排名</view>
      <view class="rank-list">
        <view v-for="(rank, index) in userRanks" :key="index" class="rank-item">
          <text>{{ rank.rank }}.</text>
          <text>{{ rank.user }}</text>
          <text>{{ rank.count }}</text>
          <text>{{ rank.lastComplete }}</text>
        </view>
      </view>
    </view>
    <view v-if="currentTab === 1" class="content">
      <tab-switcher :tabs="['总榜', '年榜', '月榜']" :currentIndex=subTabIndex @tabChange="onSubTabChange"></tab-switcher>
      <view class="underline" />
      <picker mode="selector" :range="mountains" range-key="name" @change="handleMountainChange">
        <view class="picker">
          选择山峰:
          <text>{{ mountains[mountainIndex].name }}</text>
        </view>
      </picker>
      <view class="section-title">我的排名</view>
      <view class="rank-form">
        <view class="rank-item">
          <text>用户名：</text>
          <text>{{ myRank.user }}</text>
        </view>
        <view class="rank-item">
          <text>完成次数：</text>
          <text>{{ myRank.count }}</text>
        </view>
        <view class="rank-item">
          <text>最近完成：</text>
          <text>{{ myRank.lastComplete }}</text>
        </view>
      </view>
      <view class="section-title">当前用户排名</view>
      <view class="rank-list">
        <view v-for="(rank, index) in userRanks" :key="index" class="rank-item">
          <text>{{ rank.rank }}.</text>
          <text>{{ rank.user }}</text>
          <text>{{ rank.count }}</text>
          <text>{{ rank.lastComplete }}</text>
        </view>
      </view>
    </view>
    <view v-if="currentTab === 2" class="content">
      <view v-for="(activity, index) in activities" :key="index" class="activity-card">
        <image :src="activity.image" mode="aspectFill" />
        <view class="overlay">
          <view class="activity-title">{{ activity.title }}</view>
          <view class="activity-description">{{ activity.description }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import TabSwitcher from './components/TabSwitcher.vue';

export default {
  components: {
    TabSwitcher,
  },
  data() {
    return {
      currentTab: 0,
      subTabIndex: 0,
      banners: [
        { src: 'https://example.com/banner1.jpg' },
        { src: 'https://example.com/banner2.jpg' },
      ],
      mountains: [
        { id: 1, name: '泰山' },
        { id: 2, name: '华山' },
      ],
      mountainIndex: 0,
      myRank: {
        user: '测试用户',
        count: '123次',
        lastComplete: '昨天',
      },
      userRanks: [
        { rank: '1', user: '用户A', count: '100次', lastComplete: '今天' },
        { rank: '2', user: '用户B', count: '80次', lastComplete: '前天' },
        // 更多用户...
      ],
      activities: [
        {
          image: 'https://example.com/activity1.jpg',
          title: '活动一',
          description: '活动一的简介...',
        },
        {
          image: 'https://example.com/activity2.jpg',
          title: '活动二',
          description: '活动二的简介...',
        },
      ],
    };
  },
  methods: {
    onTabChange(index) {
      this.currentTab = index;
    },
    onSubTabChange(index) {
      this.subTabIndex = index;
    },
    handleMountainChange(e) {
      this.mountainIndex = e.detail.value;
    },
  },
};
</script>

<style scoped>
.container {
  padding: 10px;
  box-sizing: border-box;
}
.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}
.underline {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin: 10px 0;
}
.content {
  width: 100%;
  padding: 10px;
}
.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.rank-form {
  display: flex;
  flex-direction: column;
}
.rank-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.rank-list {
  display: flex;
  flex-direction: column;
}
.rank-list .rank-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  padding: 5px;
  border-bottom: 1px solid #eee;
}
.picker {
  margin-bottom: 10px;
}
.activity-card {
  position: relative;
  margin-bottom: 10px;
}
.activity-card image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}
.activity-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}
.activity-description {
  text-align: center;
}
</style><template>
  <view class="tab-switcher">
    <view 
      v-for="(tab, index) in tabs"
      :key="index"
      :class="{ active: currentIndex === index }"
      @click="switchTab(index)"
    >
      {{ tab }}
      <view class="underline" />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    currentIndex: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    switchTab(index) {
      this.$emit('tabChange', index);
    },
  },
};
</script>

<style scoped>
.tab-switcher {
  display: flex;
  justify-content: space-around;
  width: 100%;
  border-bottom: 1px solid #ddd;
}
.tab-switcher > view {
  position: relative;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}
.tab-switcher .active {
  color: blue;
}
.tab-switcher .active .underline {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: blue;
}
</style>这是一个未完善的页面，请你帮我完善它。给出完整代码