mini-h5/src/pages/task/index.vue

<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '',
  },
}
</route>
<template>
  <view class="w-full min-h-screen bg-bgc flex flex-col items-center">
    <view class="font-600 text-[48rpx] text-white flex flex-col justify-center w-690rpx mt-20rpx">
      <text class="text-primary">{{ $t('task.Tasks') }}</text>
      <text>{{ $t('task.GetRewardsFor') }}</text>
      <text>{{ $t('CompletingQuests') }}</text>
    </view>
    <view
      class="w-690rpx h-90rpx p-10rpx box-border bg-cardlight rounded-20rpx flex items-center justify-center mt-70rpx"
    >
      <view
        class="w-325rpx h-70rpx rounded-20rpx flex items-center justify-center text-white text-26rpx font-700"
        :class="activeTab === 'one' ? 'tab-bg' : ''"
        @click="changeActiveTab('one')"
      >
        In-game
      </view>
      <view
        class="w-325rpx h-70rpx rounded-20rpx flex items-center justify-center text-white text-26rpx font-700"
        :class="activeTab === 'two' ? 'tab-bg' : ''"
        @click="changeActiveTab('two')"
      >
        Partners
      </view>
    </view>
    <view class="w-690rpx flex flex-col items-center mb-120rpx">
      <view
        v-for="(item, index) in 10"
        :key="index"
        class="w-full h-full mt-20rpx bg-cardlight rounded-20rpx flex justify-between"
      >
        <view class="flex-1 flex">
          <view class="min-w-120rpx h-120rpx rounded-10rpx flex items-center justify-center">
            <image
              src="@/static/images/task/task1.png"
              class="w-90rpx h-90rpx rounded-10rpx"
              mode="scaleToFill"
            />
          </view>
          <view class="flex flex-col justify-center ml-15rpx text-[#fff] flex-1">
            <text class="text-[28rpx] font-700">加入频道</text>
            <view class="mt-10rpx">
              <image
                src="@/static/images/trophy/jinbi.png"
                class="w-30rpx h-30rpx"
                mode="scaleToFill"
              />
              <text class="fw-400 ml-10rpx text-26rpx">+1111</text>
            </view>
          </view>
          <view class="flex flex-col justify-center mr-20rpx">
            <view class="w-160rpx text-center">
              <view
                class="w-160rpx h-60rpx bg-primary rounded-10rpx flex items-center justify-center"
              >
                <text class="text-26rpx font-700">check</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <tabbar currentTab="pages/task/index"></tabbar>
</template>
<script setup lang="ts">
import tabbar from '@/components/TabBar/index.vue'

type Tab = 'one' | 'two'
const activeTab = ref<Tab>('one')

// 点击切换个人数据或团队数据
const changeActiveTab = async (tab: Tab) => {
  activeTab.value = tab
  if (tab === 'one') {
  } else if (tab === 'two') {
  }
}
</script>
<style lang="scss" scoped>
.tab-bg {
  background: var(--primary-color);
  color: var(--text-color);
}
</style>