<template>
  <view class="content">
    <navBar>
      <text slot="title">产品手册</text>
    </navBar>
    <view class="tab">
      <view
        :class="['tab-item', isTab(item.id)]"
        v-for="item in tab"
        :key="item.id"
        @click="getTab(item.id)"
        >{{ item.label }}</view
      >
    </view>
  </view>
</template>

<script>
import navBar from "@/components/navbar/navbar";
export default {
  components: {
    navBar,
  },
  data() {
    return {
      tab: [
        {
          id: 1,
          label: "全部",
        },
        {
          id: 2,
          label: "蓝牙设备",
        },
        {
          id: 3,
          label: "4G/Wi-Fi设备",
        },
      ],
      tabActive: 1,
    };
  },
  methods: {
    isTab(id) {
      return this.tabActive == id
        ? "font-size-lg"
        : "font-size-sm text-color-grey";
    },
    getTab(id) {
      this.tabActive = id;
    },
  },
};
</script>

<style lang="scss" scope>
.tab {
  display: flex;
  align-items: center;

  .tab-item {
    margin-right: 48rpx;
  }
}
</style>