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

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { querySubjectInfo } from '@/services/subject/info'
import type { SubjectInfoResult } from '@/services/subject/info'

import { config } from '@/config'
import { router } from "@/.cool";
const isLoading = ref(true)
const dataList = ref<SubjectInfoResult[]>([])
async function getDataList() {
  const res = await querySubjectInfo({
    delFlag: false,
    subjectType: 'mix'
  })
  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/english/index",
    query: {
      id: item.id,
    }
  });
}
</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.id"
        @tap="handleDetail(course)">
        <cl-image :src="config.baseUrl + course?.iconPath" mode="heightFix"
          class="!w-full !h-[26vh] mb-[2px] rounded-xl"></cl-image>
        <text class="text-[4vh] font-bold">{{
          course.mainTitle }}</text>
        <text class="text-[3vh] 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-[40vh] h-[50vh] mr-[20px] rounded-2xl border-b-[10px] p-1 flex items-center justify-between pb-[20px];
}
</style>