feat(英语/语文): 新增英语和语文课程相关页面及功能

- 添加英语课程选择、列表和详情页面
- 添加语文课程首页
- 实现课程目录切换和视频播放功能
- 更新页面路由配置
- 优化首页导航逻辑和样式

pages.json

@@ -47,6 +47,34 @@
 				"navigationStyle": "custom",
 				"disableScroll": true
 			}
+		},
+		{
+			"path": "pages/chinese/index",
+			"style": {
+				"navigationStyle": "custom",
+				"disableScroll": true
+			}
+		},
+		{
+			"path": "pages/english/index",
+			"style": {
+				"navigationStyle": "custom",
+				"disableScroll": true
+			}
+		},
+		{
+			"path": "pages/english/select",
+			"style": {
+				"navigationStyle": "custom",
+				"disableScroll": true
+			}
+		},
+		{
+			"path": "pages/english/detail",
+			"style": {
+				"navigationStyle": "custom",
+				"disableScroll": true
+			}
 		}
 	],
 	"globalStyle": {

pages/catalog/index.uvue

@@ -6,13 +6,16 @@ import Progress from './components/progress.uvue'
 import Back from '@/components/back.uvue'
 import Loading from '@/components/loading.uvue'
 import { config } from '@/config'
+import { dict } from '@/.cool/store'
 import { router } from "@/.cool";
+
 const isLoading = ref(true)
 const visible = ref<boolean>(false)
 const dataList = ref<SubjectCatalogResult[]>([])
 const catalog = ref<SubjectCatalogResult>()
 async function getDataList() {
-  const res = await fetchSubjectConfigInfo({ id: router.query().id })
+  const id = dict.getValueByLabelMapByType('index_subject_id')['物理']
+  const res = await fetchSubjectConfigInfo({ id })
   dataList.value = res.catalogList || []
   catalog.value = res?.catalogList?.[0]
 }
@@ -68,7 +71,7 @@ function handleDetail(item: SubjectCatalogResult) {
           <text class="text-[14px] text-[#666]">{{
             course.assistantTitle }}</text>
           <view>
-            <Progress :progress="30" />
+            <Progress :num="2" :percentage="course.sortNum" />
           </view>
         </view>
       </scroll-view>
@@ -90,7 +93,7 @@ function handleDetail(item: SubjectCatalogResult) {
         <text class="text-[14px] text-white font-bold text-stroke-custom">学习报告</text>
       </view>
     </view>
-    <cl-popup v-model="visible" :show-header="false" direction="center" :size="500">
+    <cl-popup v-model="visible" :show-header="false" direction="center" :size="600">
       <view class="p-4">
         <cl-row :gutter="0">
           <cl-col :span="6" v-for="item in dataList || []" :key="item.id" :pt="{
@@ -137,7 +140,8 @@ function handleDetail(item: SubjectCatalogResult) {
 
   .light-text {
     font-size: 16px;
-    width: 100px;
+    min-width: 100px;
+    padding-right: 5px;
   }
 }
 

pages/chinese/index.uvue

@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { fetchSubjectConfigInfo } from '@/services/subject/info'
+import type { SubjectCatalogResult } from '@/services/subject/catalog'
+import Progress from '../catalog/components/progress.uvue'
+import Back from '@/components/back.uvue'
+import Loading from '@/components/loading.uvue'
+import { config } from '@/config'
+import { router } from "@/.cool";
+import { dict } from '@/.cool/store'
+const isLoading = ref(true)
+const visible = ref<boolean>(false)
+const dataList = ref<SubjectCatalogResult[]>([])
+const catalog = ref<SubjectCatalogResult>()
+async function getDataList() {
+  const id = dict.getValueByLabelMapByType('index_subject_id')['语文']
+  const res = await fetchSubjectConfigInfo({ id })
+  dataList.value = res.catalogList || []
+  catalog.value = res?.catalogList?.[0]
+}
+onMounted(async () => {
+  try {
+    await getDataList()
+    isLoading.value = false
+  } catch (err) {
+    console.log(err);
+    isLoading.value = false
+  }
+})
+function handleSelect(item: SubjectCatalogResult) {
+  catalog.value = item
+  visible.value = false
+}
+function handleDetail(item: SubjectCatalogResult) {
+  router.push({
+    path: "/pages/english/detail",
+    query: {
+      id: item.id,
+    }
+  });
+}
+</script>
+
+<template>
+  <Loading v-show="isLoading" />
+  <cl-page v-show="!isLoading">
+    <Back />
+    <img src="https://oss.xiaoxiongcode.com/static/语文/图层 4.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>
+
+    </view>
+    <!-- 顶部右侧光标签 -->
+    <view class="light-tag" @tap="visible = true">
+      <image class="light-icon" v-if="catalog?.fileList?.[0]?.url" :src="config.baseUrl + catalog?.fileList?.[0]?.url">
+      </image>
+      <text class="light-text">{{ catalog?.name }}</text>
+      <cl-icon name="arrow-left-right-line" color="primary"></cl-icon>
+    </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 catalog?.courseList || []" :key="course.id"
+          @tap="handleDetail(course)">
+          <cl-image :src="config.baseUrl + course?.fileList?.[0]?.url" 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>
+            <Progress :progress="30" />
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <view class="footer">
+      <view>
+        <cl-image src="https://oss.xiaoxiongcode.com/static/home/4.png" mode="heightFix"
+          class=" !h-[40px] mb-[2px] rounded-xl"></cl-image>
+        <text class="text-[14px] text-white font-bold text-stroke-custom">虚拟实验</text>
+      </view>
+      <view>
+        <cl-image src="https://oss.xiaoxiongcode.com/static/home/5.png" mode="heightFix"
+          class=" !h-[40px] mb-[2px] rounded-xl"></cl-image>
+        <text class="text-[14px] text-white font-bold text-stroke-custom">我的收获</text>
+      </view>
+      <view>
+        <cl-image src="https://oss.xiaoxiongcode.com/static/home/6.png" mode="heightFix"
+          class=" !h-[40px] mb-[2px] rounded-xl"></cl-image>
+        <text class="text-[14px] text-white font-bold text-stroke-custom">学习报告</text>
+      </view>
+    </view>
+    <cl-popup v-model="visible" :show-header="false" direction="center" :size="600">
+      <view class="p-4">
+        <cl-row :gutter="0">
+          <cl-col :span="6" v-for="item in dataList || []" :key="item.id" :pt="{
+            className: '!p-2'
+          }" @tap="handleSelect(item)">
+            <view class="select-item" :class="{ selected: item.id === catalog?.id }">
+              <image :src="config.baseUrl + item?.fileList?.[0]?.url" class="w-[30rpx] h-[30rpx] mb-[2px]"></image>
+              <text>{{ item.name }}</text>
+            </view>
+          </cl-col>
+        </cl-row>
+      </view>
+    </cl-popup>
+  </cl-page>
+</template>
+
+
+
+<style lang="scss" scoped>
+.boxs {
+  @apply w-[100vw] h-[50vh] absolute top-1/2 left-[50vh] z-[1];
+  transform: translateY(-50%);
+}
+
+.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;
+}
+
+.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;
+    min-width: 100px;
+    padding-right: 5px;
+  }
+}
+
+.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>

pages/english/detail.uvue

@@ -0,0 +1,123 @@
+<script setup lang='ts'>
+import Back from '@/components/back.uvue'
+import Loading from '@/components/loading.uvue'
+import { ref, onMounted, watchEffect, nextTick, onUnmounted } from 'vue'
+import { type SubjectCourseResult, fetchSubjectCourseApp, updateSubjectProgress } from '@/services/subject/course'
+import { router } from '@/.cool'
+const isLoading = ref(true)
+const showProgress = ref(true)
+const showControls = ref(true)
+const showVideo = ref(true)
+
+const data = ref({
+  videoSrc: 'https://oss.xiaoxiongcode.com/course-1/animate/第1集_观察.mp4',
+})
+//当前进度
+
+const course = ref<SubjectCourseResult>()
+//通过路由参数获取课程id
+async function fetchCatalog() {
+  course.value = await fetchSubjectCourseApp({ id: router.query().id })
+  data.value.videoSrc = course.value?.videoPath || ''
+}
+onMounted(async () => {
+  await fetchCatalog()
+  isLoading.value = false
+  setTimeout(() => {
+    isLoading.value = false
+  }, 1000)
+})
+async function handleEnded() {
+
+}
+
+function handleControlsToggle(e) {
+  showControls.value = e.detail.show
+}
+
+
+
+</script>
+<template>
+  <Loading v-show="isLoading" />
+  <cl-page v-show="!isLoading">
+    <view class="w-full h-full">
+      <video id="video1" class="w-full h-full " :src="data.videoSrc" :show-center-play-btn="false"
+        :show-background-playback-button="false" :show-fullscreen-btn="false" :show-casting-button="false" autoplay
+        @controlstoggle="handleControlsToggle" @ended="handleEnded">
+      </video>
+      <view class="video-fullscreen_title" v-show="showControls">
+        <Back />
+        <view class="text-[20px] font-bold text-white">
+          {{ course?.mainTitle }}
+        </view>
+      </view>
+    </view>
+  </cl-page>
+</template>
+<style lang="scss" scoped>
+.translate50 {
+  transform: translateY(-50%);
+}
+
+.course-detail-page {
+  @apply flex flex-row items-center;
+  background-color: #3498DB;
+  height: 100vh;
+  color: black;
+  transition: all 1s ease-in-out;
+
+}
+
+.video-container {
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  transform: translate(0, 0);
+  animation: spin 2s linear 1;
+  transition: all 2s ease-in-out;
+}
+
+@keyframes spin {
+  0% {
+    opacity: 50%;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.hidden {
+  opacity: 0;
+  transition: all 3s ease-in-out;
+}
+
+.video-fullscreen_title {
+  @apply absolute top-3 left-0 pl-[80px] w-[100vw] z-10 flex items-center justify-between flex-row;
+  color: #fff;
+
+  .control-progress {
+    @apply flex flex-row gap-[3px] relative justify-end;
+    flex: 1;
+
+    .before {
+      @apply absolute top-1/2 right-0 w-[340px] h-[40px] bg-[#2BA0F3] rounded-l-full;
+      transform: translateY(-30%);
+    }
+  }
+}
+
+video::-webkit-media-controls-fullscreen-button,
+video::-webkit-media-controls-enter-fullscreen-button,
+video::-webkit-media-controls-rotate-button,
+video::-webkit-media-controls-seek-back-button,
+video::-webkit-media-controls-seek-forward-button {
+  display: none !important;
+}
+
+.mic {
+  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+}
+</style>

pages/english/index.uvue

@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { fetchSubjectConfigInfo } from '@/services/subject/info'
+import type { SubjectCatalogResult } from '@/services/subject/catalog'
+import Progress from '../catalog/components/progress.uvue'
+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<SubjectCatalogResult[]>([])
+const catalog = ref<SubjectCatalogResult>()
+async function getDataList() {
+  const res = await fetchSubjectConfigInfo({ id: router.query().id })
+  dataList.value = res.catalogList || []
+  catalog.value = res?.catalogList?.[0]
+}
+onMounted(async () => {
+  try {
+    await getDataList()
+    isLoading.value = false
+  } catch (err) {
+    console.log(err);
+    isLoading.value = false
+  }
+})
+function handleSelect(item: SubjectCatalogResult) {
+  catalog.value = item
+  visible.value = false
+}
+function handleDetail(item: SubjectCatalogResult) {
+  router.push({
+    path: "/pages/english/detail",
+    query: {
+      id: item.id,
+    }
+  });
+}
+</script>
+
+<template>
+  <Loading v-show="isLoading" />
+  <cl-page v-show="!isLoading">
+    <Back />
+    <img src="https://oss.xiaoxiongcode.com/static/home/2.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>
+
+    </view>
+    <!-- 顶部右侧光标签 -->
+    <view class="light-tag" @tap="visible = true">
+      <image class="light-icon" v-if="catalog?.fileList?.[0]?.url" :src="config.baseUrl + catalog?.fileList?.[0]?.url">
+      </image>
+      <text class="light-text">{{ catalog?.name }}</text>
+      <cl-icon name="arrow-left-right-line" color="primary"></cl-icon>
+    </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 catalog?.courseList || []" :key="course.id"
+          @tap="handleDetail(course)">
+          <cl-image :src="config.baseUrl + course?.fileList?.[0]?.url" 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>
+            <Progress :progress="30" />
+          </view> -->
+        </view>
+      </scroll-view>
+    </view>
+    <view class="footer">
+      <view>
+        <cl-image src="https://oss.xiaoxiongcode.com/static/home/4.png" mode="heightFix"
+          class=" !h-[40px] mb-[2px] rounded-xl"></cl-image>
+        <text class="text-[14px] text-white font-bold text-stroke-custom">虚拟实验</text>
+      </view>
+      <view>
+        <cl-image src="https://oss.xiaoxiongcode.com/static/home/5.png" mode="heightFix"
+          class=" !h-[40px] mb-[2px] rounded-xl"></cl-image>
+        <text class="text-[14px] text-white font-bold text-stroke-custom">我的收获</text>
+      </view>
+      <view>
+        <cl-image src="https://oss.xiaoxiongcode.com/static/home/6.png" mode="heightFix"
+          class=" !h-[40px] mb-[2px] rounded-xl"></cl-image>
+        <text class="text-[14px] text-white font-bold text-stroke-custom">学习报告</text>
+      </view>
+    </view>
+    <cl-popup v-model="visible" :show-header="false" direction="center" :size="600">
+      <view class="p-4">
+        <cl-row :gutter="0">
+          <cl-col :span="6" v-for="item in dataList || []" :key="item.id" :pt="{
+            className: '!p-2'
+          }" @tap="handleSelect(item)">
+            <view class="select-item" :class="{ selected: item.id === catalog?.id }">
+              <image :src="config.baseUrl + item?.fileList?.[0]?.url" class="w-[30rpx] h-[30rpx] mb-[2px]"></image>
+              <text>{{ item.name }}</text>
+            </view>
+          </cl-col>
+        </cl-row>
+      </view>
+    </cl-popup>
+  </cl-page>
+</template>
+
+
+
+<style lang="scss" scoped>
+.boxs {
+  @apply w-[100vw] h-[50vh] absolute top-1/2 left-[50vh] z-[1];
+  transform: translateY(-50%);
+}
+
+.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;
+    min-width: 100px;
+    padding-right: 5px;
+  }
+}
+
+.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>

pages/english/select.uvue

@@ -0,0 +1,140 @@
+<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>

pages/index/home.uvue

@@ -2,6 +2,8 @@
 import { computed, onMounted } from 'vue'
 import { dict } from '@/.cool/store'
 import { router } from '@/.cool'
+import { user } from '@/.cool'
+
 const menuList = computed(() => {
 	return [
 		...dict.getChildrenList('index_subject_id'),
@@ -37,15 +39,14 @@ function handlePage(val: any) {
 	}
 	switch (val.code) {
 		case 'physics':
-			params.query.id = val.value
 			params.path = "/pages/catalog/index"
 			break;
-		// case 'chinese':
-		// 	url = '/pages/index/chinese'
-		// 	break;
-		// case 'english':
-		// 	url = '/pages/index/english'
-		// 	break;
+		case 'chinese':
+			params.path = '/pages/chinese/index'
+			break;
+		case 'english':
+			params.path = '/pages/english/select'
+			break;
 		// case 'mix':
 		// 	url = '/pages/index/mix'
 		// 	break;
@@ -69,13 +70,15 @@ onMounted(() => {
 function handleView(url) {
 	router.push({ path: url })
 }
+const userInfo = computed(() => user.info.value?.userInfo)
 
 </script>
 <template>
 	<cl-page>
 		<img src="https://oss.xiaoxiongcode.com/static/home/11.png" alt="" class="w-full h-full object-cover" />
 		<view class="menus ">
-			<view v-for="item in menuList" :key="item.code" class="flex flex-col items-center justify-center gap-1"
+			<view v-for="item in menuList" :key="item.code"
+				class="flex flex-col items-center justify-center gap-1 active:scale-[.9] transition-all duration-300"
 				@tap="handlePage(item)">
 				<cl-image :src="icons[item.code]" mode="aspectFill" width="40" height="40"></cl-image>
 				<text class="text-[12px]">{{ item.label }}</text>
@@ -83,31 +86,31 @@ function handleView(url) {
 		</view>
 		<view class="bottom">
 			<view class=" progress">
-				<view class="text-[30px] font-bold">学习进度</view>
+				<view class="text-[26px] font-bold">学习进度</view>
 				<view class=" w-full flex flex-row items-center justify-center gap-2">
 
 					<cl-progress class="flex-1" color="linear-gradient(0deg, #1FA5F5 37%, #A2D8FF 100%)" :value="50"
-						:show-text="false" :strokeWidth="20"
+						:show-text="false" :strokeWidth="16"
 						:pt="{ outer: { className: '!rounded-full' }, inner: { className: '!rounded-full' } }"></cl-progress>
 
-					<view class="text-[14px] w-[100px] rounded-full text-black font-bold text-center check
-               to-pink-500 h-[30px] ">
+					<view class="text-[12px] w-[100px] rounded-full text-black font-bold text-center check
+               to-pink-500 h-[20px] ">
 						今日打卡
 					</view>
 
 				</view>
 			</view>
 			<view class="flex-1 flex flex-col items-center justify-between gap-2 bg1 py-3">
-				<cl-image src="https://oss.xiaoxiongcode.com/static/home/17.png" mode="widthFix" width="50%" height="auto" />
+				<cl-image src="https://oss.xiaoxiongcode.com/static/home/17.png" mode="widthFix" width="40%" height="auto" />
 				<text class="text-[14px]">趣味虚拟实验</text>
 			</view>
 			<view class="flex-1 flex flex-col items-center justify-between gap-1 bg2 py-3"
 				@tap="handleView('/pages/card/index')">
-				<cl-image src="https://oss.xiaoxiongcode.com/static/home/19.png" mode="widthFix" width="80%" height="auto" />
+				<cl-image src="https://oss.xiaoxiongcode.com/static/home/19.png" mode="widthFix" width="70%" height="auto" />
 				<text class="text-[14px]">我的收货</text>
 			</view>
 			<view class="flex-1 flex flex-col items-center justify-between gap-1 bg3 py-3">
-				<cl-image src="https://oss.xiaoxiongcode.com/static/home/18.png" mode="widthFix" width="45%" height="auto" />
+				<cl-image src="https://oss.xiaoxiongcode.com/static/home/18.png" mode="widthFix" width="35%" height="auto" />
 				<text class="text-[14px]">学习报告</text>
 			</view>
 		</view>
@@ -126,7 +129,7 @@ function handleView(url) {
 </template>
 <style lang="scss" scoped>
 .content {
-	@apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white w-[100vh] border-[3px] border-[#fff] border-solid rounded-[30px] px-10 py-4 h-[44vh] flex flex-row items-center justify-between gap-4;
+	@apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white w-[120vh] border-[3px] border-[#fff] border-solid rounded-[30px] px-10 py-4 h-[44vh] flex flex-row items-center justify-between gap-4;
 	background: linear-gradient(0deg, #C7F0FE 0%, #30B9FF 100%);
 
 }
@@ -137,37 +140,37 @@ function handleView(url) {
 }
 
 .bottom {
-	@apply absolute bottom-[1vh] left-1/2 w-full max-w-[900px] rounded-[20px] px-10 py-1 flex flex-row items-center justify-between gap-5;
+	@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-[100px] rounded-[50px] flex justify-center gap-2 px-[30px] gap-3;
+		@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: 30px;
+		line-height: 20px;
 	}
 }
 
 .bg1 {
 	background: linear-gradient(0deg, #7597FA 0%, #C1DAFF 100%);
 	border-radius: 28px;
-	height: 100px;
+	height: 80px;
 }
 
 .bg2 {
 	background: linear-gradient(0deg, #3CD3DE 0%, #ADFBFF 100%);
 	border-radius: 28px;
-	height: 100px;
+	height: 80px;
 }
 
 .bg3 {
 	background: linear-gradient(0deg, #FFCE4A 0%, #FFEC88 100%);
 	border-radius: 28px;
-	height: 100px;
+	height: 80px;
 }
 
 .ft {

services/subject/info.ts

@@ -48,3 +48,6 @@ export function fetchSubjectInfo(parameter: any) {
 //         },
 //     })
 // }
+export function querySubjectInfo(parameter: any) {
+    return useGet(`/subject/info`, parameter) as Promise<SubjectInfoResult[]>
+}