product_wx/pages/subPackages/parkActivity/index.vue

<template>
   <div>
     <div class="parkAct">
       <div class="parkDynamicTab2">
         <div
             v-for="(item, index) in tabList"
             :key="index"
             class="tabItem"
             :class="selectTab === item.name ? 'selectTabItem' : ''"
             @click="clickTab(item)"
         >
           {{ item.name }}
         </div>
       </div>
       <activity />
     </div>
   </div>
</template>

<script>
import activity from "../../index/components/activity.vue";

export default {
  components: { activity },
  name: "index",
  data(){
    return {
      selectTab: "全部",
      tabList: [
        { name: "全部" },
        { name: "培训" },
        { name: "私募" },
        { name: "法务" },
        { name: "财税" },
      ],
    }
  },
  methods:{
    clickTab(item) {
      this.selectTab = item.name;
    },
  }
}
</script>

<style lang="scss">
.parkAct{
  background: white;
  box-sizing: border-box;
  height: 1424rpx;
  padding: 0 32rpx;
  .parkDynamicTab2 {
    display: flex;
    padding: 24rpx 0;
    margin-top: 24rpx;
    .tabItem {
      color: #666666;
      font-size: 28rpx;
      margin: 0 auto;
    }
    .selectTabItem {
      color: #18172a;
      border-bottom: 6rpx solid #034df7;
    }
  }
}
</style>