Dining_Hall/pages/components/Tabs.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view class="list">
    <view class="list-item"  :class="{ active: active == index }"
		v-for="(item, index) in tabList"
		:key="index"
		@click="handleTab(index)"
    >
      <view style="padding: 0 5px">{{ item }}</view>
      <view v-if="active == index" class="line"></view>
    </view>
  </view>
</template>

<script>
import Cookies from "js-cookie";
export default {
  props: {
    tabList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
		fontValue:Cookies.get('fontSize') || 8,
		active: 0
    }
  },
  mounted() {
    console.log('?? ~ mounted ~ tabs:', this.tabList)
  },
  methods: {
    handleTab(index) {
      this.active = index
      this.$emit('changeTab', index)
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;

  .list-item {
    font-weight: 700;
    font-size: 28rpx;
    color: rgba(15, 39, 75, 0.8);
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }
  .active {
    font-weight: 500;
    font-size: 32rpx;
    color: #0f274b;
    z-index: 9;
  }
  .line {
    width: 36px;
    height: 8px;
    background: linear-gradient(90deg, #ff6816 0%, rgba(255, 104, 22, 0) 100%);
    border-radius: 4px 4px 4px 4px;
    position: absolute;
    bottom: 0px;
  }
}
</style>