<template>
  <section class="home">
    <div class="page">
      <p class="title">点击进入月份</p>
      <div class="tab-content">
        <span v-for="(item, index) in tabList" :key="index" class="tab-item" :class="tabIndex == index ? 'active' : ''" @click="back(index)">{{item}}</span>
      </div>
    </div>
  </section>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "home",
  data() {
    return {
      tabList: ['全部', '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      tabIndex: 0,
    };
  },
  onLoad(options) {
    this.tabIndex = options.index
  },
  methods: {
    back(index) {
      this.tabIndex = index
      uni.setStorageSync('partyTabIndex', this.tabIndex)
      uni.navigateBack({delta:1})
    }
  },
};
</script>
<style scoped lang="scss">
@import "../../styles/party";
.home {
  width: 100%;
  height: 100%;
}
.page {
  width: 100%;
  overflow-x: hidden;
  background-color: #fff;
  .title{
    padding: 32px 0 40px 30px;
    font-size: 26px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #B9B9B9;
    line-height: 36px;
  }
  .tab-content{
    padding-left: 30px;
    .tab-item{
      display: inline-block;
      width: 144px;
      height: 48px;
      text-align: center;
      line-height: 48px;
      border-radius: 24px;
      box-sizing: border-box;
      border: 1px solid #CBCBCB;
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333;
      margin: 0 38px 32px 0;
    }
    .active{
      color: #DA2D1A;
    }
  }
}
</style>
