health-front/pages_order/product/tabCourse/courseRecommendView.vue

<template>
  <view>
    <view class="tabs">
      <uv-tabs 
        :list="tabs"
        :activeStyle="{
          'font-family': 'PingFang SC',
          'font-weight': 600,
          'font-size': '28rpx',
          'line-height': 1.5,
          'color': '#FFFFFF',
          'background-color': '#252545',
          'border-radius': '32rpx',
          'padding': '9rpx 40rpx',
        }" 
        :inactiveStyle="{
          'font-family': 'PingFang SC',
          'font-weight': 400,
          'font-size': '28rpx',
          'line-height': 1.5,
          'color': '#252545',
          'background-color': '#E5E4EB',
          'border-radius': '32rpx',
          'padding': '9rpx 40rpx',
        }" 
        lineWidth="0"
        lineHeight="0"
        @change="onChange"
      ></uv-tabs>
    </view>
    <view class="content">
      <view v-for="item in list" :key="item.id">
        <productCard 
          :data="item"
          cardStyle="width: 100%; height: 210px;"
          imgStyle="width: 100%; height: 110px;"
        ></productCard>
      </view>
    </view>
  </view>
</template>

<script>
  import productCard from '@/pages_order/product/productCard.vue'

  export default {
		components: {
      productCard,
    },
    data() {
      return {
        tabs: [],
        current: 0,
        list: [],
      }
    },
    mounted() {

      this.tabs = [
        { name: '生理' },
        { name: '心理' },
      ]

			this.list = [
        {
          id: '001',
					url: '', 
          name: '情绪管理课程',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
        {
          id: '002',
					url: '', 
          name: '我认知与成长课程',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
        {
          id: '003',
					url: '', 
          name: '情绪管理课程',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
        {
          id: '004',
					url: '', 
          name: '我认知与成长课程',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
			]
    },
    methods: {
      onChange(e) {
        console.log('current', e.index)
        this.current = e.index
        // todo
      },
    },
  }
</script>

<style scoped lang="scss">
.tabs {
  margin: 0 5px;
}

.content {
  padding: 16rpx 32rpx 24rpx 32rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32rpx;
}
</style>