|
|
@@ -0,0 +1,167 @@
|
|
|
+<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>
|
