youxi-app/pages/english/select.uvue

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { querySubjectInfo } from '@/services/subject/info'
import type { SubjectInfoResult } from '@/services/subject/info'
import Back from '@/components/back.uvue'
import Loading from '@/components/loading.uvue'
import { config } from '@/config'
import { router } from "@/.cool";
const isLoading = ref(true)
const visible = ref<boolean>(false)
const dataList = ref<SubjectInfoResult[]>([])
async function getDataList() {
  const res = await querySubjectInfo({
    delFlag: false,
    subjectType: 'english'
  })
  dataList.value = res
}
onMounted(async () => {
  try {
    await getDataList()
    isLoading.value = false
  } catch (err) {
    console.log(err);
    isLoading.value = false
  }
})
function handleDetail(item: SubjectCatalogResult) {
  router.push({
    path: "/pages/english/index",
    query: {
      id: item.id,
    }
  });
}
</script>

<template>
  <Loading v-show="isLoading" />
  <cl-page v-show="!isLoading">
    <Back />
    <img src="https://oss.xiaoxiongcode.com/static/英语/图层 6.png" alt="" class="w-full h-full object-cover" />
    <!-- 精灵图动画 -->
    <!-- <cl-image src="https://oss.xiaoxiongcode.com/static/home/3.gif" mode="heightFix"
      class="!absolute bottom-0 left-0 !w-[44vh] !h-[55vh] z-[1]" /> -->
    <!-- <view class="flex flex-row items-center justify-center gap-4 kk">
      <view class="text-[20px] font-bold bg-[#00C6F1] text-white px-4 py-4 rounded-xl">
        课程导航
      </view>
      <view class="jj"></view>
    </view> -->
    <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-[16px] font-bold">{{
            course.mainTitle }}</text>
          <text class="text-[14px] text-[#666]">{{
            course.assistantTitle }}</text>
        </view>
      </scroll-view>
    </view>
  </cl-page>
</template>



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

.kk {
  @apply w-[50vh] h-[50vh] absolute top-1/2 left-0 z-[1];
  transform: translateY(-50%);

}

.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-[5px] border-[#1D4BD9] border-solid border-b-[10px] p-1 flex items-center justify-between pb-[20px];
}

.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;
    width: 100px;
  }
}

.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>