youxi-app/pages/programming/code.uvue

<script setup lang="ts">
import Back from '@/components/back.uvue'
import Loading from '@/components/loading.uvue'
import { ref, onMounted, watch, nextTick, onUnmounted } from 'vue'
import { type SubjectCourseResult, fetchSubjectCourseApp, updateSubjectProgress } from '@/services/subject/course'
import { router, user } from '@/.cool'

const course = ref<SubjectCourseResult>()
const isLoading = ref(false)
const courseSummary = ref([])
const codeImage = ref([])
const type = ref(0)
//通过路由参数获取课程id
async function fetchCatalog() {
    course.value = await fetchSubjectCourseApp({ id: router.query().id })
    type.value = parseInt(router.query().type) || 0
    courseSummary.value = JSON.parse(course.value?.courseSummary as string)
    codeImage.value = JSON.parse(course.value?.codeImage as string)
}
onMounted(async () => {
    isLoading.value = true
    await fetchCatalog()
    isLoading.value = false
})


</script>
<template>
    <Loading v-show="isLoading" />
    <cl-page>
        <Back />
        <image class="absolute top-0 left-0 z-[1] w-full h-full " mode="aspectFill"
            src="https://oss.xiaoxiongcode.com/static/scratch/2.jpg" />
        <view class="main">


            <view class="text-[20px] font-bold text-[#fff] absolute top-6 left-20">
                {{ course?.mainTitle }}
            </view>
            <view class="courseSummary" :show-scrollbar="false" v-if="type === 2">
                <image class="absolute top-0 left-0 z-[1] w-full h-full " mode="aspectFill"
                    src="https://oss.xiaoxiongcode.com/static/scratch/1.png" />
                <view class="text-[20px] w-[60vw] font-bold mb-3 text-[#000] relative z-[2]"
                    v-for="(item, index) in courseSummary" :key="index">
                    {{ index + 1 }}. {{ item }}
                </view>
            </view>
            <scroll-view class="codeImage" v-else :show-scrollbar="false">
                <cl-row :gutter="12">
                    <cl-col :span="8" v-for="item in codeImage" :key="item">
                        <cl-image showMenuByLongpress lazy-load preview :src="item" mode="scaleToFill"
                            class="!w-full !h-[40vh] mb-[12px] rounded-xl">
                        </cl-image>
                    </cl-col>
                </cl-row>

            </scroll-view>
        </view>
    </cl-page>
</template>
<style lang="scss" scoped>
.main {
    // background: linear-gradient(0deg, #88C5F0, #D0ECFF);
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;

    .progress {
        position: relative;
        z-index: 2;
    }
}

.box-shadow {
    box-shadow: 4px 7px 10px 0px rgba(62, 166, 238, 0.44);
}

.courseSummary {
    @apply absolute max-w-[1000px] w-[70vw] rounded-[30px] text-white flex flex-col items-center p-[30px] text-center;
    aspect-ratio: 585 / 324;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);

}

.codeImage {
    @apply absolute max-w-[1000px] w-[80vw] text-white;
    top: 70px;
    height: calc(100vh - 80px);
}
</style>