youxi-app/pages/other/index.uvue

<script lang="ts" setup>
import Loading from '@/components/loading.uvue'
import Back from '@/components/back.uvue'
import { ref, onMounted } from 'vue'
import { querySubjectInfo, querySubjectInfoNoLogin } from '@/services/subject/info'
import type { SubjectInfoResult } from '@/services/subject/info'
import { router, debounce, user } from "@/.cool";

const isLoading = ref(true)
const dataList = ref<SubjectInfoResult[]>([])
const subjectType = ref('')
const title = {
    chinese: '语文',
    math: '数学',
    english: '英语',
}
async function getDataList() {
    subjectType.value = router.query().type
    let res: SubjectInfoResult[] = []
    if (user.token === 'Basic ZW5kOmVuZA==') {
        res = await querySubjectInfoNoLogin({
            delFlag: false,
            subjectType: subjectType.value
        })
    } else {
        res = await querySubjectInfo({
            delFlag: false,
            subjectType: subjectType.value
        })
    }
    dataList.value = res
}
onMounted(async () => {
    try {
        await getDataList()
        isLoading.value = false
    } catch (err) {
        console.log(err);
        isLoading.value = false
    }
})
function handleDetail(item: any) {
    router.push({
        path: `/pages/${subjectType.value}/index`,
        query: {
            id: item.id,
        }
    });
}
</script>

<template>
    <Loading v-show="isLoading" />
    <cl-page v-show="!isLoading">
        <view class="video-fullscreen_title">
            <Back />
            <view class="text-[20px] font-bold text-white">
                {{ title[subjectType] }}
            </view>
        </view>
        <image mode="aspectFill" v-if="subjectType === 'chinese'" src="https://oss.xiaoxiongcode.com/static/语文/图层 4.jpg"
            alt="" class="w-full h-full object-cover" />
        <image mode="aspectFill" v-else-if="subjectType === 'math'"
            src="https://oss.xiaoxiongcode.com/static/home/math-bg.jpg" alt="" class="w-full h-full object-cover" />
        <image mode="aspectFill" v-else src="https://oss.xiaoxiongcode.com/static/英语/zero.jpg" alt=""
            class="w-full h-full object-cover" />
        <!-- 顶部右侧光标签 -->
        <view class="boxs">
            <scroll-view class="scroll-view_H" direction="horizontal" :show-scrollbar="false" ref="cardsScrollView">
                <view class="scroll-view-item_H bg-[white]" v-for="course in dataList || []" :key="course.id"
                    @tap="handleDetail(course)">
                    <cl-image :src="course?.iconPath" mode="heightFix"
                        class="!w-full !h-[85rpx] mb-[2px] rounded-xl"></cl-image>
                    <text class="text-[16rpx] font-bold text-[#000]">{{
                        course.mainTitle }}</text>
                    <text class="text-[12rpx] text-[#666]">{{
                        course.assistantTitle }}</text>
                </view>
            </scroll-view>
        </view>
    </cl-page>
</template>

<style lang="scss" scoped>
.boxs {
    @apply w-[calc(100vw-100px)] h-[50vh] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[1];
}

.video-fullscreen_title {
    @apply absolute top-3 left-0 pl-[80px] w-[100vw] z-10 flex items-center justify-between flex-row;
    color: #fff;
}

.scroll-view_H {
    width: 100%;
    height: 100%;
    flex-direction: row;
    justify-content: center;
}

.scroll-view-item_H {
    @apply w-[140rpx] h-[160rpx] mr-[20px] rounded-2xl border-[5px] border-[#1D4BD9] border-solid border-b-[10px] p-1 flex items-center relative;
}

.light-tag {
    @apply absolute top-3 left-1/2 z-[1] flex flex-row items-center bg-white px-3 py-2 font-bold rounded-full shadow-md;
    transform: translateX(-50%);

    .light-icon {
        width: 20px;
        height: 20px;
        margin-right: 3px;
    }

    .light-text {
        font-size: 16px;
        min-width: 100px;
        padding-right: 5px;
    }
}

.select-item {
    @apply flex items-center justify-center rounded-xl border-[3px] border-[#1D4BD9] border-solid border-b-[5px] px-4 py-2 font-bold;
}

.selected {
    @apply border-green-500;
}

.footer {
    @apply absolute bottom-2 right-5 z-[1] flex flex-row items-center justify-center gap-4;
}

.text-stroke-custom {
    color: white;
    text-shadow:
        /* 左上角投影 */
        -1px -1px 0 #1D4BD9,
        /* 右上角投影 */
        1px -1px 0 #1D4BD9,
        /* 左下角投影 */
        -1px 1px 0 #1D4BD9,
        /* 右下角投影 */
        1px 1px 0 #1D4BD9;

}
</style>