<template>
  <div class="bg-homeBanner bg-top bg-contain bg-no-repeat">
    <h5 class="my-5 text-lg text-center text-white font-medium">我的</h5>
    <!-- <div class="tab flex justify-center items-center">
      <div class="px-8 text-sm" :class="{ 'active': tab === 1 }" @click="getList(1)">我发起的</div>
      <div class="px-8 text-sm" :class="{ 'active': tab === 2 }" @click="getList(2)">我参与的</div>
    </div>
    <keep-alive>
      <attend :tab="tab" />
    </keep-alive> -->
    <van-tabs class="bg-transparent" :swipe-threshold="3">
      <van-tab title="我发起的提案">
        <attend :tab="1" />
      </van-tab>
      <van-tab title="我参与的提案">
        <attend :tab="2" />
      </van-tab>
      <van-tab title="我报名的活动">
        <attend :tab="3" />
      </van-tab>
      <van-tab title="我参与的活动">
        <attend :tab="4" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import Attend from '@/components/mine/Attend.vue'
import Vue from 'vue'
import { Tab, Tabs } from 'vant'
Vue.use(Tabs)
Vue.use(Tab)
export default Vue.extend({
  name: 'MinePage',
  components: {
    Attend
  },
  data() {
    return {
      tab: 1
    }
  },
  methods: {
    getList(v: number) {
      this.tab = v
    }
  }
})
</script>

<style scoped>
  .mine {
    background-image: url(../../assets/home/banner.png);
    background-size: 100%;
    background-position-x: 50%;
    background-position-y: top;
    background-repeat: no-repeat;
  }
  .active {
    color: #FFBB00;
    position: relative;
  }
  .active::after {
    content: '';
    display: block;
    width: 80px;
    height: 2px;
    background: linear-gradient(to right, #DE00A3, #FFBB00);
    position: absolute;
    bottom: -6px;
    left: 21px;
    z-index: 50;
  }
  >>> .van-tabs__nav {
    background: transparent;
    color: #ffffff99
  }
  >>> .van-tab--active {
    color: #FFBB00;
  }
  >>> .van-tabs__line {
    width: 85px;
    background: linear-gradient(to right, #DE00A3, #FFBB00);
  }
  >>> .van-tab {
    padding: 0 12px;
    flex-shrink: 0;
    /* flex-basis: auto; */
  }
  >>> .van-tab__text--ellipsis {
    overflow: auto;
  }
</style>