ieplus-app/src/pagesStudy/pages/index/compoentns/henan-exam.vue

<template>
  <view>
    <view class="h-16 bg-back my-32"></view>
    <view class="px-30 pt-13 pb-24 text-32 text-fore-title font-bold">真题&模拟</view>
    <view class="">
      <view class="overflow-hidden bg-white sticky z-2" :style="{ top: baseStickyTop + 'px' }">
        <view class="px-30 pt-24 pb-30 text-32 text-fore-title font-bold flex items-center gap-44 bg-back rounded-t-15">
          <view :class="['relative text-fore-light', { 'is-active': current === 0 }]" @click="handleChange(0)">公共课
          </view>
          <view :class="['relative text-fore-light', { 'is-active': current === 1 }]" @click="handleChange(1)">专业课
          </view>
        </view>
      </view>

      <view class="px-30 pb-24 bg-back flex flex-col gap-20 sticky z-1 " :style="{ top: baseStickyTop + 20 + 'px' }">
        <henan-exam-item v-for="(item, index) in list" :key="index" :data="item" />
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import HenanExamItem from '@/pagesStudy/components/henan-exam-item.vue';
import { useNavbar } from '@/hooks/useNavbar';
import { getVHSPaperList } from '@/api/modules/study';
import { Study } from '@/types';

const { baseStickyTop } = useNavbar();
const list = [1, 1, 1, 1, 1, 1, 1, 1]
const current = ref(0);
const handleChange = (index: number) => {
  current.value = index;
}
const loadData = async () => {
  const { data } = await getVHSPaperList({
    subjectId: current.value
  });
  console.log(data)
  // list.value = data;
}
onLoad(() => {
  loadData();
});
</script>
<style lang="scss" scoped>
.is-active {
  @apply text-fore-title;

  &::after {
    content: '';
    display: block;
    width: 20px;
    height: 4px;
    background: radial-gradient(0% 0% at 0% 0%, #31A0FC 0%, #70C8FD 100%);
    position: absolute;
    bottom: 0;
    border-radius: 4rpx;
    left: 50%;
    transform: translateX(-50%);
    bottom: -8rpx;
  }
}
</style>