youxi-app/pages/card/index.uvue

<script setup lang='ts'>
import Back from '@/components/back.uvue'
import Loading from '@/components/loading.uvue'
import { ref, onMounted } from 'vue'
import { type SubjectKnowledgeCardResult, getSubjectKnowledgeCard } from '@/services/subject/card'
import { fetchSubjectConfigInfo } from '@/services/subject/info'
import type { SubjectCatalogResult } from '@/services/subject/catalog'

const activeCategory = ref<string>()
const isLoading = ref(true)
const categories = ref<SubjectCatalogResult[]>([])

const cards = ref<SubjectKnowledgeCardResult[]>([])
async function getDataList() {
  const res = await fetchSubjectConfigInfo({ id: '69afc7e048070409048c06b6' })
  categories.value = res.catalogList || []
  handleSelect(categories.value[0].id as string)
}
function handleSelect(subjectId: string) {
  activeCategory.value = subjectId
  getSubjectKnowledgeCard({ subjectId }).then(res => {
    console.log(res)
    cards.value = res.catalogList || []
  })
}
onMounted(async () => {
  await getDataList()
  isLoading.value = false
})
</script>
<template>
  <Loading v-if="isLoading" />
  <cl-page v-else>
    <Back />
    <!-- 顶部标题栏 -->
    <view class="content">
      <!-- 左侧导航菜单 -->
      <scroll-view direction="vertical" :show-scrollbar="false" class="sidebar">
        <view v-for="category in categories" :key="category.id" class="sidebar-item"
          :class="{ active: activeCategory === category.id }" @tap="handleSelect(category.id as string)">
          <cl-image :src="category?.fileList?.[0]?.url" mode="heightFix" class="!h-[28px]"></cl-image>
          <text class="sidebar-text">{{ category.name }}</text>
        </view>
      </scroll-view>
      <!-- 右侧卡片网格 -->
      <view class="cards-container">
        <view class="header">
          <view class="title-tabs">
            <view class="tab active">知识卡</view>
            <view class="tab">荣誉</view>
          </view>
        </view>
        <scroll-view direction="vertical" :show-scrollbar="false" class="cards">
          <view class="grid grid-cols-5 gap-4">
            <view class="card" v-for="card in cards" :key="card.id">
              <image src="/static/home/21.png" class="w-full h-full" />
              <view class="card-title">{{ card.title }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </cl-page>
</template>
<style lang="scss" scoped>
.header {
  @apply absolute left-1/2 top-5;
  transform: translateX(-50%);
  text-align: center;

  .title-tabs {
    @apply flex flex-row items-center justify-center rounded-full;
    background-color: #9AD2FA;

    .tab {
      @apply rounded-full;
      padding: 5px 10px;
      font-size: 16px;
      transition: all 0.3s ease;

      &.active {
        background-color: white;
        color: #1E88E5;
        font-weight: bold;
      }
    }
  }
}

.content {
  display: flex;
  flex-direction: row;

  .sidebar {
    width: 200px;
    background-color: #116FE9;
    padding: 20px;
    padding-top: 70px;
    height: 100vh;

    .sidebar-item {
      @apply text-white rounded-full py-1 cursor-pointer flex flex-row items-center;
      margin-bottom: 8px;
      transition: all 0.3s ease;
      font-size: 12px;
      width: 100%;

      &.active {
        background-color: rgba(255, 255, 255, 1);
        color: #1E88E5;
        font-weight: bold;
      }

      .sidebar-icon {
        font-size: 28px;
        margin-right: 2px;
      }
    }
  }

  .cards-container {
    @apply relative;
    flex: 1;
    width: 100%;
    padding: 20px;
    padding-top: 70px;
    background: linear-gradient(0deg, #2EB2FD, #0B85F4);

    .cards {
      height: calc(100vh - 90px);
    }

    .card {
      // background-color: rgba(255, 255, 255, 0.9);
      // border-radius: 16px;
      // padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      aspect-ratio: 3/4;

      .card-content {
        width: 100%;
        height: 120px;
        background-color: #E3F2FD;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        aspect-ratio: 3/4;

        .question-mark {
          font-size: 60px;
          font-weight: bold;
          color: #1E88E5;
        }
      }

      .card-title {
        @apply text-center font-bold absolute bottom-[13%] left-0 w-full text-[#0E3E87] text-[1.5vw];
      }
    }
  }
}
</style>