health-front/pages/index/product.vue

<template>
	<view class="page__view">

		<navbar bgColor="#FFFFFF" >
      <view>
        <uv-tabs 
          :current="current"
          :list="tabs"
          :activeStyle="{
            'font-family': 'PingFang SC',
            'font-weight': 600,
            'font-size': '40rpx',
            'line-height': 1.2,
            'color': '#252545',
          }" 
          :inactiveStyle="{
            'font-family': 'PingFang SC',
            'font-weight': 400,
            'font-size': '32rpx',
            'line-height': 1.5,
            'color': '#A8A8A8',
          }" 
          lineWidth="22rpx"
          lineHeight="4rpx"
          lineColor="#252545"
          @change="onTabChange"
        ></uv-tabs>
      </view>
		</navbar>

    <!-- 营养素 -->
    <tab-nutrient v-if="current == 0"></tab-nutrient>
    <!-- 检测 -->
    <tab-detect v-else-if="current == 1"></tab-detect>
    <!-- 课程 -->
    <tab-course v-else-if="current == 2"></tab-course>

		<tabber select="product" />

  </view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
  import tabNutrient from '@/pages_order/product/tabNutrient/index.vue'
  import tabDetect from '@/pages_order/product/tabDetect/index.vue'
  import tabCourse from '@/pages_order/product/tabCourse/index.vue'

  export default {
		components: {
      tabNutrient,
      tabDetect,
      tabCourse,
      tabber,
    },
    data() {
      return {
        tabs: [
          { name: '营养素' },
          { name: '检测' },
          { name: '课程' },
        ],
        current: 0,
      }
    },
    methods: {
      onTabChange(e) {
        console.log('current', e.index)
        this.current = e.index
        // todo
      },
    },
  }
</script>

<style scoped lang="scss">
	.page__view {
		width: 100vw;
		min-height: 100vh;
    background-image: linear-gradient(#EAE5FF, #F3F2F7, #F3F2F7);
		position: relative;

    /deep/ .uv-tabs__wrapper__nav__line {
      border-radius: 2rpx;
    }
    
	}

</style>