|
|
@@ -1,76 +1,75 @@
|
|
|
-<script setup lang='ts'>
|
|
|
-import { ref } from 'vue'
|
|
|
-import { router } from '@/.cool'
|
|
|
-import { user } from '@/.cool'
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
+import { querySubjectInfo } from '@/services/subject/info'
|
|
|
+import type { SubjectInfoResult } from '@/services/subject/info'
|
|
|
|
|
|
-function handleView(url) {
|
|
|
- router.push({ path: url })
|
|
|
+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: 'chinese'
|
|
|
+ })
|
|
|
+ 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/chinese/index",
|
|
|
+ query: {
|
|
|
+ id: item.id,
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
<template>
|
|
|
- <view class="flex flex-row items-center justify-center w-full " style="height: calc(97vh - 85px);">
|
|
|
- <view class="content" @tap="handleView('/pages/chinese/index')">
|
|
|
- <image mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/语文/图层 4.png" alt="" lazy-load
|
|
|
- class="w-full h-full object-cover absolute top-0 left-0" />
|
|
|
- <view class=" flex items-center justify-center ft">
|
|
|
- <view class="text-[10vh] font-bold">
|
|
|
- 语文启蒙
|
|
|
- </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="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>
|
|
|
- <view class="flex items-center justify-center h-[60vh]">
|
|
|
- <cl-image src="https://oss.xiaoxiongcode.com/static/home/play.png" mode="heightFix" lazy-load height="60%"
|
|
|
- width="auto" class="ml-10" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
-
|
|
|
</template>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.bottom {
|
|
|
- @apply absolute bottom-[1vh] left-1/2 w-full max-w-[800px] rounded-[20px] px-10 py-1 flex flex-row items-center justify-between gap-5;
|
|
|
- transform: translateX(-50%);
|
|
|
|
|
|
- .progress {
|
|
|
- @apply w-[400px] h-[80px] rounded-[40px] flex justify-center gap-2 px-[30px] gap-3;
|
|
|
- background: linear-gradient(0deg, #AAE3FF 0%, #DFF4FD 100%);
|
|
|
- width: 40%;
|
|
|
- }
|
|
|
|
|
|
- .check {
|
|
|
- background: linear-gradient(0deg, #FBD00E 0%, #FBEC92 100%);
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
-.bg1 {
|
|
|
- background: linear-gradient(0deg, #7597FA 0%, #C1DAFF 100%);
|
|
|
- border-radius: 28px;
|
|
|
- height: 80px;
|
|
|
+<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];
|
|
|
}
|
|
|
|
|
|
-.bg2 {
|
|
|
- background: linear-gradient(0deg, #3CD3DE 0%, #ADFBFF 100%);
|
|
|
- border-radius: 28px;
|
|
|
- height: 80px;
|
|
|
-}
|
|
|
+.jj {
|
|
|
+ border: 20px solid #00C6F1;
|
|
|
|
|
|
-.bg3 {
|
|
|
- background: linear-gradient(0deg, #FFCE4A 0%, #FFEC88 100%);
|
|
|
- border-radius: 28px;
|
|
|
- height: 80px;
|
|
|
+ border-top: 15px solid #00000000;
|
|
|
+ border-right: 15px solid #00000000;
|
|
|
+ border-bottom: 15px solid #00000000;
|
|
|
}
|
|
|
|
|
|
-.ft {
|
|
|
- font-family: eryazhaocaimao;
|
|
|
- text-shadow:
|
|
|
- -1px -1px 0 #000,
|
|
|
- 1px -1px 0 #000,
|
|
|
- -1px 1px 0 #000,
|
|
|
- 1px 1px 0 #000;
|
|
|
+.scroll-view_H {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ flex-direction: row;
|
|
|
}
|
|
|
|
|
|
-.content {
|
|
|
- @apply relative mx-auto text-white w-[90vw] border-[3px] border-[#fff] border-solid rounded-[30px] flex flex-row items-center justify-around gap-4 h-[60vh];
|
|
|
-
|
|
|
+.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>
|
