|
@@ -55,11 +55,11 @@ async function getInfo() {
|
|
|
}
|
|
}
|
|
|
if (user.token === 'Basic ZW5kOmVuZA==') {
|
|
if (user.token === 'Basic ZW5kOmVuZA==') {
|
|
|
res = await getSubjectCoursePageNoLogin({
|
|
res = await getSubjectCoursePageNoLogin({
|
|
|
- catalogId: catalog.value?.id, pageSize: 12, pageNum: pageNum.value,
|
|
|
|
|
|
|
+ catalogId: catalog.value?.id, pageSize: 16, pageNum: pageNum.value,
|
|
|
})
|
|
})
|
|
|
} else {
|
|
} else {
|
|
|
res = await getSubjectCoursePage({
|
|
res = await getSubjectCoursePage({
|
|
|
- catalogId: catalog.value?.id, pageSize: 12, pageNum: pageNum.value,
|
|
|
|
|
|
|
+ catalogId: catalog.value?.id, pageSize: 16, pageNum: pageNum.value,
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
courseList.value = [...courseList.value, ...(res.rows || [])]
|
|
courseList.value = [...courseList.value, ...(res.rows || [])]
|
|
@@ -124,24 +124,24 @@ const userInfo = computed(() => user.info.value?.userInfo)
|
|
|
</view>
|
|
</view>
|
|
|
<scroll-view direction="vertical" :show-scrollbar="false" class="cards" ref="cardsScrollView"
|
|
<scroll-view direction="vertical" :show-scrollbar="false" class="cards" ref="cardsScrollView"
|
|
|
@scroll="handleScrollToLowerDebounce">
|
|
@scroll="handleScrollToLowerDebounce">
|
|
|
- <view class="grid grid-cols-4 gap-4">
|
|
|
|
|
- <view class="card" v-for="card in courseList" :key="card.id" :class="`category-${card.catalogId}`"
|
|
|
|
|
- @tap="handleDetail(card)">
|
|
|
|
|
- <view class="w-full h-[11vw] rounded-xl overflow-hidden">
|
|
|
|
|
- <image :src="card?.ossIconPath" mode="aspectFill" class="w-full h-full object-cover"></image>
|
|
|
|
|
|
|
+ <cl-row :gutter="12">
|
|
|
|
|
+ <cl-col :span="6" v-for="card in courseList" :key="card.id as string">
|
|
|
|
|
+ <view class="card" @tap="handleDetail(card)">
|
|
|
|
|
+ <image :src="card?.ossIconPath as string" mode="heightFix" lazy-load
|
|
|
|
|
+ class="!w-full !h-[80rpx] mb-[2px] rounded-xl"></image>
|
|
|
|
|
+ <cl-text ellipsis :pt="{
|
|
|
|
|
+ className: '!text-[12rpx] !font-bold'
|
|
|
|
|
+ }">{{
|
|
|
|
|
+ card.sortNum }}、{{
|
|
|
|
|
+ card.mainTitle }}</cl-text>
|
|
|
|
|
+ <cl-text ellipsis color="#666" :pt="{
|
|
|
|
|
+ className: '!text-[10rpx]'
|
|
|
|
|
+ }">{{
|
|
|
|
|
+ card.assistantTitle }}</cl-text>
|
|
|
|
|
+ <Lock v-if="userInfo == null || userInfo?.memberLevel == 'default'" :record="card" type="vip" />
|
|
|
</view>
|
|
</view>
|
|
|
- <cl-text ellipsis :pt="{
|
|
|
|
|
- className: '!text-[1.5vw] !font-bold'
|
|
|
|
|
- }">{{
|
|
|
|
|
- card.sortNum }}、{{
|
|
|
|
|
- card.mainTitle }}</cl-text>
|
|
|
|
|
- <cl-text ellipsis color="#666" :pt="{
|
|
|
|
|
- className: '!text-[1.2vw]'
|
|
|
|
|
- }">{{
|
|
|
|
|
- card.assistantTitle }}</cl-text>
|
|
|
|
|
- <Lock v-if="userInfo?.memberLevel === 'default'" :record="card" type="vip" />
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ </cl-col>
|
|
|
|
|
+ </cl-row>
|
|
|
<cl-loadmore :loading="loading" :finish="finish"></cl-loadmore>
|
|
<cl-loadmore :loading="loading" :finish="finish"></cl-loadmore>
|
|
|
</scroll-view>
|
|
</scroll-view>
|
|
|
</view>
|
|
</view>
|
|
@@ -226,39 +226,13 @@ const userInfo = computed(() => user.info.value?.userInfo)
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.card {
|
|
.card {
|
|
|
- @apply rounded-2xl border-[3px] border-[#1D4BD9] border-solid border-b-[6px] relative p-1 bg-white pb-3;
|
|
|
|
|
- // background-color: rgba(255, 255, 255, 0.9);
|
|
|
|
|
- // border-radius: 16px;
|
|
|
|
|
- // padding: 16px;
|
|
|
|
|
|
|
+ @apply rounded-2xl border-[3px] border-[#1D4BD9] border-solid border-b-[6px] relative p-1 bg-white pb-3 mb-[12rpx];
|
|
|
|
|
+ height: 140rpx;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
- // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
- aspect-ratio: 8/9;
|
|
|
|
|
-
|
|
|
|
|
- .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 left-0 w-full text-[#0E3E87] text-[1.5vw];
|
|
|
|
|
- bottom: 13%;
|
|
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|