<template>
  <div class="mine">
    <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>
    <attend :tab="tab" />
  </div>
</template>

<script lang="ts">
import Attend from '@/components/mine/Attend.vue'
import Vue from 'vue'
export default Vue.extend({
  name: 'MinePage',
  components: {
    Attend
  },
  data() {
    return {
      tab: 1
    }
  },
  methods: {
    getList(v: number) {
      this.tab = v
      // ...code
    }
  }
})
</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;
  }


</style>