youxi-app/pages/index/components/other.uvue

<script lang="ts" setup>
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";

import { config } from '@/config'
const isLoading = ref(true)
const dataList = [
    {
        type: 'chinese',
        mainTitle: '语文',
        assistantTitle: '语文启蒙',
        iconPath: 'https://oss.xiaoxiongcode.com/static/home/765.jpg',
    }, {
        type: 'math',
        mainTitle: '数学',
        assistantTitle: '数学启蒙',
        iconPath: 'https://oss.xiaoxiongcode.com/static/home/764.jpg',
    }, {
        type: 'english',
        mainTitle: '英语',
        assistantTitle: '英语启蒙',
        iconPath: 'https://oss.xiaoxiongcode.com/static/home/763.jpg',
    }
]

function handleDetail(item: any) {
    router.push({
        path: "/pages/other/index",
        query: {
            type: item.type,
        }
    });
}
</script>

<template>
    <view class="boxs">
        <scroll-view class="scroll-view_H" direction="horizontal" :show-scrollbar="false">
            <view class="scroll-view-item_H bg-[white]" v-for="course in dataList || []" :key="course.type"
                @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>
</template>



<style lang="scss" scoped>
.boxs {
    @apply h-[60vh] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[1] pt-[10vh];
}

.jj {
    border: 20px solid #00C6F1;

    border-top: 15px solid #00000000;
    border-right: 15px solid #00000000;
    border-bottom: 15px solid #00000000;
}

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

.scroll-view-item_H {
    @apply w-[140rpx] h-[160rpx] mr-[20px] rounded-2xl border-b-[10px] p-1 flex items-center justify-between pb-[20px];
}
</style>