|
|
@@ -1,883 +1,447 @@
|
|
|
<template>
|
|
|
- <view class="study-record-container">
|
|
|
- <!-- 学科标签页 -->
|
|
|
- <view class="subject-tabs">
|
|
|
- <scroll-view scroll-x class="tabs-scroll" :scroll-left="tabScrollLeft">
|
|
|
- <view class="tabs-container">
|
|
|
- <view
|
|
|
- v-for="subject in subjectList"
|
|
|
- :key="subject.id"
|
|
|
- class="tab-item"
|
|
|
- :class="{ active: activeSubject === subject.id }"
|
|
|
- @click="switchSubject(subject.id)"
|
|
|
- >
|
|
|
- <view class="subject-icon">
|
|
|
- <text>{{ subject.icon }}</text>
|
|
|
- </view>
|
|
|
- <text class="subject-name">{{ subject.name }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 当前学科信息 -->
|
|
|
- <view class="subject-info">
|
|
|
- <view class="info-card">
|
|
|
- <view class="subject-header">
|
|
|
- <view class="subject-title">
|
|
|
- <text class="subject-name">{{ currentSubjectInfo.name }}</text>
|
|
|
- <text class="subject-icon-large">{{ currentSubjectInfo.icon }}</text>
|
|
|
- </view>
|
|
|
- <text class="subject-description">{{ currentSubjectInfo.description }}</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="course-info">
|
|
|
- <view class="info-item">
|
|
|
- <text class="label">当前课程</text>
|
|
|
- <text class="value">{{ currentCourse.courseName }}</text>
|
|
|
- </view>
|
|
|
- <view class="info-row">
|
|
|
- <view class="info-col">
|
|
|
- <text class="label">等级</text>
|
|
|
- <text class="value level-badge">{{ currentCourse.level }}</text>
|
|
|
- </view>
|
|
|
- <view class="info-col">
|
|
|
- <text class="label">版本</text>
|
|
|
- <text class="value">{{ currentCourse.version }}</text>
|
|
|
- </view>
|
|
|
- <view class="info-col">
|
|
|
- <text class="label">单元</text>
|
|
|
- <text class="value">{{ currentCourse.unit }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 学习进度 -->
|
|
|
- <view class="progress-section">
|
|
|
- <view class="progress-header">
|
|
|
- <text class="section-title">学习进度</text>
|
|
|
- <text class="progress-percent">{{ progress }}%</text>
|
|
|
- </view>
|
|
|
- <view class="progress-bar">
|
|
|
- <view class="progress-fill" :style="{ width: progress + '%' }"></view>
|
|
|
- </view>
|
|
|
- <view class="continue-study">
|
|
|
- <button class="continue-btn" @click="continueStudy">
|
|
|
- <text class="btn-text">继续学习</text>
|
|
|
- <text class="btn-icon">→</text>
|
|
|
- </button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 课程目录 -->
|
|
|
- <view class="course-directory">
|
|
|
- <view class="directory-header">
|
|
|
- <text class="section-title">以下为当前等级课程目录</text>
|
|
|
- <view class="level-badges">
|
|
|
- <view
|
|
|
- v-for="level in levels"
|
|
|
- :key="level"
|
|
|
- class="level-badge"
|
|
|
- :class="{ active: currentLevel === level }"
|
|
|
- @click="switchLevel(level)"
|
|
|
- >
|
|
|
- <text>{{ level }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 使用 z-paging 实现滚动监听 -->
|
|
|
- <z-paging
|
|
|
- ref="paging"
|
|
|
- @scroll="onScroll"
|
|
|
- @query="loadCourseData"
|
|
|
- :refresher-enabled="false"
|
|
|
- :loading-more-enabled="false"
|
|
|
- :auto="true"
|
|
|
- :fixed="false"
|
|
|
- :hide-empty-view="true"
|
|
|
- >
|
|
|
- <!-- 当前等级课程列表 -->
|
|
|
- <view
|
|
|
- v-for="(unit, unitIndex) in currentLevelCourses"
|
|
|
- :key="unit.id"
|
|
|
- :id="'unit-' + unitIndex"
|
|
|
- class="unit-container"
|
|
|
- :class="{ 'last-unit': unit.isLastUnit }"
|
|
|
- >
|
|
|
- <!-- 单元信息 -->
|
|
|
- <view class="unit-header">
|
|
|
- <text class="unit-level">{{ unit.level }}</text>
|
|
|
- <text class="unit-title">{{ unit.title }}</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 节列表 -->
|
|
|
- <view
|
|
|
- v-for="(section, sectionIndex) in unit.sections"
|
|
|
- :key="section.id"
|
|
|
- class="section-item"
|
|
|
- :class="{
|
|
|
- 'current-section': section.id === currentSectionId,
|
|
|
- 'completed': section.completed
|
|
|
- }"
|
|
|
- @click="goToSection(section)"
|
|
|
- >
|
|
|
- <view class="section-order">
|
|
|
- <text v-if="section.type === 'test'" class="test-icon">📝</text>
|
|
|
- <text v-else class="section-number">第{{ section.order }}节</text>
|
|
|
- </view>
|
|
|
- <view class="section-content">
|
|
|
- <view class="section-main">
|
|
|
- <text class="section-name">{{ section.name }}</text>
|
|
|
- <view v-if="section.completed" class="completed-badge">
|
|
|
- <text>已完成</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <text v-if="section.description" class="section-description">
|
|
|
- {{ section.description }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <view class="section-action">
|
|
|
- <text class="action-icon">›</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 最后一个单元的提示 -->
|
|
|
- <view v-if="unit.isLastUnit" class="last-unit-tip">
|
|
|
- <text class="tip-text">本级别最后一单元啦~</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 查看更多 -->
|
|
|
- <view class="view-more" @click="viewMoreCourses">
|
|
|
- <text class="more-text">查看更多内容</text>
|
|
|
- <text class="more-icon">↓</text>
|
|
|
- </view>
|
|
|
- </z-paging>
|
|
|
-
|
|
|
- <!-- 当前单元提示 -->
|
|
|
- <view v-if="currentUnitTitle" class="current-unit-tip">
|
|
|
- <text>{{ currentUnitTitle }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="container">
|
|
|
+ <view class="icon-title-navBar-box">
|
|
|
+ <view class="nav-bar-icon" @click="handleBack"></view>
|
|
|
+ <view class="nav-bar-title">学习</view>
|
|
|
+ </view>
|
|
|
+ <!-- z-paging 列表 -->
|
|
|
+ <z-paging ref="paging" @scroll="onScroll" @query="loadData" :refresher-enabled="false"
|
|
|
+ :loading-more-enabled="false" :auto="false" :fixed="false" :hide-empty-view="true">
|
|
|
+
|
|
|
+ <!-- 单元列表 -->
|
|
|
+ <view v-for="(danyuan, danyuanIndex) in danyuanList" :key="danyuan.danyuanId"
|
|
|
+ :id="'danyuan-' + danyuanIndex" class="danyuan-item">
|
|
|
+ <!-- 当前学科信息 -->
|
|
|
+ <view class="subject-info" v-if="subjectDetail">
|
|
|
+ <text class="course-name">{{ subjectDetail.chanpinName }}</text>
|
|
|
+ <text class="course-name">等级:{{ subjectDetail.dengjiName }}</text>
|
|
|
+ <text class="course-name">版本:{{ subjectDetail.dengjiName }}</text>
|
|
|
+ <text class="course-name">单元:{{ subjectDetail.curDanyuanName }}</text>
|
|
|
+ <text class="course-name">课程:{{ subjectDetail.chanpinName }}</text>
|
|
|
+ </view>
|
|
|
+ <!-- 单元标题 -->
|
|
|
+ <view class="danyuan-header">
|
|
|
+ <text class="danyuan-title">{{ danyuan.danyuanName }}</text>
|
|
|
+ <text class="danyuan-intro">{{ danyuan.danyuanIntro }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 节列表 -->
|
|
|
+ <view v-if="danyuan.jieList && danyuan.jieList.length > 0">
|
|
|
+ <view v-for="jie in danyuan.jieList" :key="jie.jieId" class="jie-item">
|
|
|
+ <text class="jie-name">{{ jie.number }}. {{ jie.jieName }}</text>
|
|
|
+ <text class="jie-desc">{{ jie.jieIntro }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 无课程内容提示 -->
|
|
|
+ <view v-else class="empty-jie">
|
|
|
+ <text class="empty-text">暂无课程内容</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </z-paging>
|
|
|
+
|
|
|
+ <!-- 回到顶部按钮 -->
|
|
|
+ <view v-if="showBackToTop" class="back-to-top" @click="scrollToTop">
|
|
|
+ <text class="back-to-top-icon">↑</text>
|
|
|
+ <text class="back-to-top-text">顶部</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 当前单元提示 -->
|
|
|
+ <view v-if="currentUnitName" class="current-unit-tip">
|
|
|
+ <text>{{ currentUnitName }}</text>
|
|
|
+ </view>
|
|
|
+<!--
|
|
|
+ <CustomTabBar :currentTabNumber="0"></CustomTabBar> -->
|
|
|
+
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 当前选中的学科
|
|
|
- activeSubject: 'math',
|
|
|
-
|
|
|
- // 学科列表
|
|
|
- subjectList: [
|
|
|
- {
|
|
|
- id: 'chinese',
|
|
|
- name: '语文',
|
|
|
- icon: '📚',
|
|
|
- description: '语言文学与文化传承'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 'math',
|
|
|
- name: '数学',
|
|
|
- icon: '🧮',
|
|
|
- description: '逻辑思维与问题解决'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 'english',
|
|
|
- name: '英语',
|
|
|
- icon: '🔤',
|
|
|
- description: '国际交流与语言能力'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 'physics',
|
|
|
- name: '物理',
|
|
|
- icon: '⚛️',
|
|
|
- description: '自然规律与科学探索'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 'chemistry',
|
|
|
- name: '化学',
|
|
|
- icon: '🧪',
|
|
|
- description: '物质变化与实验科学'
|
|
|
- }
|
|
|
- ],
|
|
|
-
|
|
|
- // 当前课程信息
|
|
|
- currentCourse: {
|
|
|
- courseName: '数学图解母题',
|
|
|
- level: 'L1',
|
|
|
- version: '通用版',
|
|
|
- unit: '第一单元'
|
|
|
- },
|
|
|
-
|
|
|
- // 学习进度
|
|
|
- progress: 65,
|
|
|
-
|
|
|
- // 等级列表
|
|
|
- levels: ['L1', 'L2', 'L3', 'L4'],
|
|
|
- currentLevel: 'L1',
|
|
|
-
|
|
|
- // 当前等级的课程数据
|
|
|
- currentLevelCourses: [],
|
|
|
-
|
|
|
- // 当前正在学习的节ID
|
|
|
- currentSectionId: 2,
|
|
|
-
|
|
|
- // 滚动相关
|
|
|
- currentUnitTitle: '',
|
|
|
- unitPositions: [],
|
|
|
-
|
|
|
- // 标签页滚动位置
|
|
|
- tabScrollLeft: 0
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- computed: {
|
|
|
- // 当前学科信息
|
|
|
- currentSubjectInfo() {
|
|
|
- return this.subjectList.find(item => item.id === this.activeSubject) || {}
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- mounted() {
|
|
|
- // 初始化加载数学数据
|
|
|
- this.loadMathData()
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- // 切换学科
|
|
|
- switchSubject(subjectId) {
|
|
|
- this.activeSubject = subjectId
|
|
|
-
|
|
|
- // 根据学科加载数据
|
|
|
- switch(subjectId) {
|
|
|
- case 'math':
|
|
|
- this.loadMathData()
|
|
|
- break
|
|
|
- case 'chinese':
|
|
|
- this.loadChineseData()
|
|
|
- break
|
|
|
- case 'english':
|
|
|
- this.loadEnglishData()
|
|
|
- break
|
|
|
- // 其他学科...
|
|
|
- }
|
|
|
-
|
|
|
- // 滚动标签到可视区域
|
|
|
- this.scrollTabToView(subjectId)
|
|
|
- },
|
|
|
-
|
|
|
- // 滚动标签到可视区域
|
|
|
- scrollTabToView(subjectId) {
|
|
|
- const index = this.subjectList.findIndex(item => item.id === subjectId)
|
|
|
- if (index > 2) { // 如果靠后，向右滚动
|
|
|
- this.tabScrollLeft = (index - 2) * 100
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 加载数学数据
|
|
|
- loadMathData() {
|
|
|
- this.currentCourse = {
|
|
|
- courseName: '数学图解母题',
|
|
|
- level: 'L1',
|
|
|
- version: '通用版',
|
|
|
- unit: '第一单元'
|
|
|
- }
|
|
|
-
|
|
|
- this.currentLevelCourses = [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- level: 'L1',
|
|
|
- title: '认识厘米和米',
|
|
|
- sections: [
|
|
|
- { id: 1, order: 1, name: '用尺子测量长度', description: '学习使用尺子测量物体长度', completed: true, type: 'lesson' },
|
|
|
- { id: 2, order: 2, name: '解决长度问题', description: '应用长度知识解决问题', completed: false, type: 'lesson' },
|
|
|
- { id: 3, order: 3, name: '解决长度问题', description: '深入理解长度概念', completed: false, type: 'lesson' },
|
|
|
- { id: 4, name: '单元测试', description: '检验本单元学习成果', completed: false, type: 'test' }
|
|
|
- ],
|
|
|
- isLastUnit: false
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- level: 'L2',
|
|
|
- title: '认识厘米和米',
|
|
|
- sections: [
|
|
|
- { id: 5, order: 1, name: '用尺子测量长度', description: '复习基础测量方法', completed: false, type: 'lesson' },
|
|
|
- { id: 6, order: 2, name: '解决长度问题', description: '复杂场景下的应用', completed: false, type: 'lesson' },
|
|
|
- { id: 7, order: 3, name: '解决长度问题', description: '综合能力训练', completed: false, type: 'lesson' },
|
|
|
- { id: 8, name: '单元测试', description: '进阶测试', completed: false, type: 'test' }
|
|
|
- ],
|
|
|
- isLastUnit: true
|
|
|
- }
|
|
|
- ]
|
|
|
-
|
|
|
- this.progress = 65
|
|
|
- this.currentSectionId = 2
|
|
|
- },
|
|
|
-
|
|
|
- // 加载语文数据
|
|
|
- loadChineseData() {
|
|
|
- this.currentCourse = {
|
|
|
- courseName: '语文经典阅读',
|
|
|
- level: 'L1',
|
|
|
- version: '人教版',
|
|
|
- unit: '第一单元'
|
|
|
- }
|
|
|
-
|
|
|
- this.currentLevelCourses = [
|
|
|
- {
|
|
|
- id: 11,
|
|
|
- level: 'L1',
|
|
|
- title: '诗词鉴赏',
|
|
|
- sections: [
|
|
|
- { id: 11, order: 1, name: '唐诗三百首', description: '经典唐诗赏析', completed: true, type: 'lesson' },
|
|
|
- { id: 12, order: 2, name: '宋词精选', description: '婉约派与豪放派', completed: false, type: 'lesson' },
|
|
|
- { id: 13, order: 3, name: '古文观止', description: '文言文阅读理解', completed: false, type: 'lesson' },
|
|
|
- { id: 14, name: '单元测试', description: '文学常识测试', completed: false, type: 'test' }
|
|
|
- ],
|
|
|
- isLastUnit: false
|
|
|
- }
|
|
|
- ]
|
|
|
-
|
|
|
- this.progress = 45
|
|
|
- this.currentSectionId = 12
|
|
|
- },
|
|
|
-
|
|
|
- // 加载英语数据
|
|
|
- loadEnglishData() {
|
|
|
- this.currentCourse = {
|
|
|
- courseName: '英语口语训练',
|
|
|
- level: 'L2',
|
|
|
- version: '国际版',
|
|
|
- unit: '第二单元'
|
|
|
- }
|
|
|
-
|
|
|
- this.currentLevelCourses = [
|
|
|
- {
|
|
|
- id: 21,
|
|
|
- level: 'L2',
|
|
|
- title: '日常会话',
|
|
|
- sections: [
|
|
|
- { id: 21, order: 1, name: '自我介绍', description: '学习基础自我介绍', completed: true, type: 'lesson' },
|
|
|
- { id: 22, order: 2, name: '购物对话', description: '商场购物常用英语', completed: true, type: 'lesson' },
|
|
|
- { id: 23, order: 3, name: '餐厅点餐', description: '餐厅用餐英语表达', completed: false, type: 'lesson' },
|
|
|
- { id: 24, name: '口语测试', description: '情景对话测试', completed: false, type: 'test' }
|
|
|
- ],
|
|
|
- isLastUnit: false
|
|
|
- }
|
|
|
- ]
|
|
|
-
|
|
|
- this.progress = 75
|
|
|
- this.currentSectionId = 23
|
|
|
- },
|
|
|
-
|
|
|
- // z-paging 加载数据
|
|
|
- loadCourseData(pageNo, pageSize) {
|
|
|
- // 数据已经在切换学科时加载了，这里直接完成
|
|
|
- this.$refs.paging.complete(this.currentLevelCourses)
|
|
|
-
|
|
|
- // 计算单元位置
|
|
|
- this.$nextTick(() => {
|
|
|
- this.calculateUnitPositions()
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 计算单元位置
|
|
|
- calculateUnitPositions() {
|
|
|
- if (!this.currentLevelCourses.length) return
|
|
|
-
|
|
|
- const query = uni.createSelectorQuery().in(this)
|
|
|
- this.unitPositions = []
|
|
|
-
|
|
|
- this.currentLevelCourses.forEach((unit, index) => {
|
|
|
- query.select(`#unit-${index}`).boundingClientRect(data => {
|
|
|
- if (data) {
|
|
|
- this.unitPositions[index] = {
|
|
|
- top: data.top,
|
|
|
- title: unit.title
|
|
|
- }
|
|
|
- }
|
|
|
- }).exec()
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 滚动事件
|
|
|
- onScroll(e) {
|
|
|
- const scrollTop = e.detail.scrollTop
|
|
|
-
|
|
|
- // 判断当前单元
|
|
|
- for (let i = this.unitPositions.length - 1; i >= 0; i--) {
|
|
|
- if (this.unitPositions[i] && scrollTop >= this.unitPositions[i].top - 100) {
|
|
|
- const newTitle = this.currentLevelCourses[i]?.title
|
|
|
- if (newTitle && newTitle !== this.currentUnitTitle) {
|
|
|
- this.currentUnitTitle = newTitle
|
|
|
- console.log('切换到单元:', newTitle)
|
|
|
- }
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 切换等级
|
|
|
- switchLevel(level) {
|
|
|
- this.currentLevel = level
|
|
|
- // 这里可以根据等级重新加载数据
|
|
|
- console.log('切换到等级:', level)
|
|
|
- },
|
|
|
-
|
|
|
- // 继续学习
|
|
|
- continueStudy() {
|
|
|
- const currentSection = this.findCurrentSection()
|
|
|
- if (currentSection) {
|
|
|
- this.goToSection(currentSection)
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 查找当前正在学习的节
|
|
|
- findCurrentSection() {
|
|
|
- for (const unit of this.currentLevelCourses) {
|
|
|
- for (const section of unit.sections) {
|
|
|
- if (section.id === this.currentSectionId) {
|
|
|
- return section
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- return null
|
|
|
- },
|
|
|
-
|
|
|
- // 进入节
|
|
|
- goToSection(section) {
|
|
|
- console.log('进入节:', section.name)
|
|
|
- // 这里实现跳转到学习页面的逻辑
|
|
|
- // uni.navigateTo({
|
|
|
- // url: `/pages/study/study?id=${section.id}`
|
|
|
- // })
|
|
|
- },
|
|
|
-
|
|
|
- // 查看更多
|
|
|
- viewMoreCourses() {
|
|
|
- console.log('查看更多内容')
|
|
|
- // 这里可以实现跳转到完整课程列表
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ import {
|
|
|
+ shuxueChanpinBanben
|
|
|
+ } from "@/api/chanpinneirong.js"
|
|
|
+ import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeSubjectId: 2,
|
|
|
+
|
|
|
+ // 学科详情数据
|
|
|
+ subjectDetail: null,
|
|
|
+
|
|
|
+ // 单元列表
|
|
|
+ danyuanList: [],
|
|
|
+
|
|
|
+ // 当前单元名称
|
|
|
+ currentUnitName: '',
|
|
|
+
|
|
|
+ // 单元位置信息
|
|
|
+ unitPositions: [],
|
|
|
+
|
|
|
+ // 新增：是否显示回到顶部按钮
|
|
|
+ showBackToTop: false,
|
|
|
+
|
|
|
+ // 新增：显示回到顶部按钮的阈值（滚动多少距离后显示）
|
|
|
+ backToTopThreshold: 500
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ CustomTabBar
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //初始化加载数据
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.$refs.paging.reload()
|
|
|
+ // })
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ aaaa(){
|
|
|
+ this.$refs.paging.reload()
|
|
|
+ },
|
|
|
+ handleBack() {
|
|
|
+
|
|
|
+ },
|
|
|
+ // z-paging 加载数据
|
|
|
+ async loadData() {
|
|
|
+ // 目前只处理数学学科
|
|
|
+ if (this.activeSubjectId !== 2) {
|
|
|
+ this.$refs.paging.complete([])
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 调用数学API
|
|
|
+ const req = {
|
|
|
+ banbenId: 7
|
|
|
+ }
|
|
|
+ const res = await shuxueChanpinBanben(req)
|
|
|
+
|
|
|
+ if (res.code === 0 && res.data) {
|
|
|
+ // 直接使用后端返回的数据
|
|
|
+ this.subjectDetail = res.data
|
|
|
+ this.danyuanList = res.data.danyuanList || []
|
|
|
+
|
|
|
+ // 告诉z-paging加载完成
|
|
|
+ this.$refs.paging.complete(this.danyuanList)
|
|
|
+
|
|
|
+ // 计算单元位置
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.calculateUnitPositions()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载失败:', error)
|
|
|
+ this.$refs.paging.complete(false)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 计算单元位置
|
|
|
+ calculateUnitPositions() {
|
|
|
+ if (!this.danyuanList || this.danyuanList.length === 0) return
|
|
|
+ // 清空位置信息
|
|
|
+ this.unitPositions = []
|
|
|
+ // 使用 $nextTick 确保DOM已更新
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 稍微延迟确保渲染完成
|
|
|
+ setTimeout(() => {
|
|
|
+ const query = uni.createSelectorQuery().in(this)
|
|
|
+
|
|
|
+ // 一次性查询所有单元
|
|
|
+ const selectors = this.danyuanList.map((_, index) => {
|
|
|
+ return query.select(`#danyuan-${index}`).boundingClientRect()
|
|
|
+ })
|
|
|
+ // 执行查询
|
|
|
+ query.exec((results) => {
|
|
|
+ if (results && results.length === this.danyuanList.length) {
|
|
|
+ results.forEach((rect, index) => {
|
|
|
+ if (rect) {
|
|
|
+ // 保存相对位置（注意：这是相对于屏幕的位置）
|
|
|
+ this.$set(this.unitPositions, index, {
|
|
|
+ top: rect.top,
|
|
|
+ height: rect.height,
|
|
|
+ name: this.danyuanList[index]
|
|
|
+ .danyuanName
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log('单元位置计算完成:', this.unitPositions)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 100)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 滚动事件 - 修改后版本
|
|
|
+ onScroll(e) {
|
|
|
+ const scrollTop = e.detail.scrollTop
|
|
|
+ console.log('滚动位置:', scrollTop)
|
|
|
+
|
|
|
+ // 新增：控制回到顶部按钮的显示/隐藏
|
|
|
+ this.showBackToTop = scrollTop > this.backToTopThreshold
|
|
|
+
|
|
|
+ // 查找当前滚动到的单元
|
|
|
+ let currentUnitName = ''
|
|
|
+
|
|
|
+ for (let i = this.unitPositions.length - 1; i >= 0; i--) {
|
|
|
+ const position = this.unitPositions[i]
|
|
|
+ if (position && scrollTop >= position.top - 50) {
|
|
|
+ currentUnitName = position.name
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新当前单元提示
|
|
|
+ if (currentUnitName && currentUnitName !== this.currentUnitName) {
|
|
|
+ this.currentUnitName = currentUnitName
|
|
|
+ console.log('切换到单元:', currentUnitName)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 新增：回到顶部方法
|
|
|
+ scrollToTop() {
|
|
|
+ console.log('执行回到顶部')
|
|
|
+
|
|
|
+ // 方法1: 使用z-paging的scrollToTop方法（最简单）
|
|
|
+ if (this.$refs.paging) {
|
|
|
+ this.$refs.paging.scrollToTop({
|
|
|
+ animated: true,
|
|
|
+ duration: 300
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 方法2: 对于H5环境，额外滚动整个页面
|
|
|
+ // #ifdef H5
|
|
|
+ setTimeout(() => {
|
|
|
+ window.scrollTo({
|
|
|
+ top: 0,
|
|
|
+ behavior: 'smooth'
|
|
|
+ })
|
|
|
+ }, 100)
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // 方法3: 对于App环境，使用uni的pageScrollTo
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ uni.pageScrollTo({
|
|
|
+ scrollTop: 0,
|
|
|
+ duration: 300
|
|
|
+ })
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // 隐藏回到顶部按钮
|
|
|
+ this.showBackToTop = false
|
|
|
+
|
|
|
+ // 可选：显示提示
|
|
|
+ uni.showToast({
|
|
|
+ title: '回到顶部',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 800
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.study-record-container {
|
|
|
- min-height: 100vh;
|
|
|
- background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
|
- padding-bottom: 40rpx;
|
|
|
-}
|
|
|
-
|
|
|
-/* 学科标签页 */
|
|
|
-.subject-tabs {
|
|
|
- background: white;
|
|
|
- padding: 20rpx 0;
|
|
|
- box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
-}
|
|
|
-
|
|
|
-.tabs-scroll {
|
|
|
- white-space: nowrap;
|
|
|
- height: 100rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.tabs-container {
|
|
|
- display: inline-flex;
|
|
|
- padding: 0 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.tab-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- padding: 0 40rpx;
|
|
|
- transition: all 0.3s;
|
|
|
-}
|
|
|
-
|
|
|
-.tab-item.active {
|
|
|
- transform: translateY(-10rpx);
|
|
|
-}
|
|
|
-
|
|
|
-.subject-icon {
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- background: #f0f2f5;
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 40rpx;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- transition: all 0.3s;
|
|
|
-}
|
|
|
-
|
|
|
-.tab-item.active .subject-icon {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- color: white;
|
|
|
- transform: scale(1.1);
|
|
|
-}
|
|
|
-
|
|
|
-.subject-name {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-
|
|
|
-.tab-item.active .subject-name {
|
|
|
- color: #667eea;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-/* 学科信息卡片 */
|
|
|
-.subject-info {
|
|
|
- padding: 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.info-card {
|
|
|
- background: white;
|
|
|
- border-radius: 24rpx;
|
|
|
- padding: 40rpx;
|
|
|
- box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
|
|
|
-}
|
|
|
-
|
|
|
-.subject-header {
|
|
|
- margin-bottom: 40rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.subject-title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 20rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.subject-name {
|
|
|
- font-size: 40rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-
|
|
|
-.subject-icon-large {
|
|
|
- font-size: 48rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.subject-description {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #666;
|
|
|
- line-height: 1.5;
|
|
|
-}
|
|
|
-
|
|
|
-.course-info {
|
|
|
- margin-bottom: 40rpx;
|
|
|
- padding-bottom: 40rpx;
|
|
|
- border-bottom: 1rpx solid #f0f0f0;
|
|
|
-}
|
|
|
-
|
|
|
-.info-item {
|
|
|
- margin-bottom: 24rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.label {
|
|
|
- display: block;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #999;
|
|
|
- margin-bottom: 8rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.value {
|
|
|
- font-size: 32rpx;
|
|
|
- color: #333;
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-
|
|
|
-.info-row {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-
|
|
|
-.info-col {
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
-
|
|
|
-.level-badge {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- color: white;
|
|
|
- padding: 8rpx 20rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- font-size: 26rpx;
|
|
|
-}
|
|
|
-
|
|
|
-/* 学习进度 */
|
|
|
-.progress-section {
|
|
|
- margin-bottom: 20rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.progress-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 20rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.section-title {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-
|
|
|
-.progress-percent {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #667eea;
|
|
|
-}
|
|
|
-
|
|
|
-.progress-bar {
|
|
|
- height: 16rpx;
|
|
|
- background: #f0f2f5;
|
|
|
- border-radius: 8rpx;
|
|
|
- margin-bottom: 40rpx;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.progress-fill {
|
|
|
- height: 100%;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- border-radius: 8rpx;
|
|
|
- transition: width 0.5s ease;
|
|
|
-}
|
|
|
-
|
|
|
-.continue-study {
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.continue-btn {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- padding: 24rpx 48rpx;
|
|
|
- border-radius: 50rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 500;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
|
|
|
-}
|
|
|
-
|
|
|
-.btn-text {
|
|
|
- margin-right: 10rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.btn-icon {
|
|
|
- font-size: 36rpx;
|
|
|
-}
|
|
|
-
|
|
|
-/* 课程目录 */
|
|
|
-.course-directory {
|
|
|
- margin: 0 30rpx;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-.directory-header {
|
|
|
- margin-bottom: 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.level-badges {
|
|
|
- display: flex;
|
|
|
- margin-top: 20rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.level-badge {
|
|
|
- padding: 12rpx 24rpx;
|
|
|
- background: #f0f2f5;
|
|
|
- border-radius: 20rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
- transition: all 0.3s;
|
|
|
-}
|
|
|
-
|
|
|
-.level-badge.active {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- color: white;
|
|
|
-}
|
|
|
-
|
|
|
-/* 单元容器 */
|
|
|
-.unit-container {
|
|
|
- background: white;
|
|
|
- border-radius: 20rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- overflow: hidden;
|
|
|
- box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
|
-}
|
|
|
-
|
|
|
-.unit-container.last-unit {
|
|
|
- border: 2rpx solid #667eea;
|
|
|
-}
|
|
|
-
|
|
|
-.unit-header {
|
|
|
- background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
|
|
|
- padding: 30rpx;
|
|
|
- border-bottom: 1rpx solid #f0f0f0;
|
|
|
-}
|
|
|
-
|
|
|
-.unit-level {
|
|
|
- background: #667eea;
|
|
|
- color: white;
|
|
|
- padding: 8rpx 20rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.unit-title {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-
|
|
|
-/* 节项 */
|
|
|
-.section-item {
|
|
|
- padding: 30rpx;
|
|
|
- border-bottom: 1rpx solid #f0f0f0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- transition: all 0.3s;
|
|
|
-}
|
|
|
-
|
|
|
-.section-item:last-child {
|
|
|
- border-bottom: none;
|
|
|
-}
|
|
|
-
|
|
|
-.section-item.current-section {
|
|
|
- background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
|
|
|
-}
|
|
|
-
|
|
|
-.section-item.completed {
|
|
|
- opacity: 0.8;
|
|
|
-}
|
|
|
-
|
|
|
-.section-item:active {
|
|
|
- background: #f0f2f5;
|
|
|
-}
|
|
|
-
|
|
|
-.section-order {
|
|
|
- width: 120rpx;
|
|
|
- flex-shrink: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.test-icon {
|
|
|
- font-size: 36rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.section-number {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #667eea;
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-
|
|
|
-.section-content {
|
|
|
- flex: 1;
|
|
|
- min-width: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.section-main {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 10rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.section-name {
|
|
|
- font-size: 30rpx;
|
|
|
- color: #333;
|
|
|
- font-weight: 500;
|
|
|
- flex: 1;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
-
|
|
|
-.completed-badge {
|
|
|
- background: #52c41a;
|
|
|
- color: white;
|
|
|
- padding: 6rpx 16rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.section-description {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #999;
|
|
|
- display: block;
|
|
|
- line-height: 1.4;
|
|
|
-}
|
|
|
-
|
|
|
-.section-action {
|
|
|
- width: 60rpx;
|
|
|
- flex-shrink: 0;
|
|
|
- text-align: right;
|
|
|
-}
|
|
|
-
|
|
|
-.action-icon {
|
|
|
- font-size: 36rpx;
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-
|
|
|
-/* 最后单元提示 */
|
|
|
-.last-unit-tip {
|
|
|
- padding: 30rpx;
|
|
|
- background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.tip-text {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #667eea;
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-
|
|
|
-/* 查看更多 */
|
|
|
-.view-more {
|
|
|
- background: white;
|
|
|
- border-radius: 20rpx;
|
|
|
- padding: 30rpx;
|
|
|
- text-align: center;
|
|
|
- margin-top: 20rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-
|
|
|
-.more-text {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #667eea;
|
|
|
- margin-right: 10rpx;
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-
|
|
|
-.more-icon {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #667eea;
|
|
|
-}
|
|
|
-
|
|
|
-/* 当前单元提示 */
|
|
|
-.current-unit-tip {
|
|
|
- position: fixed;
|
|
|
- bottom: 100rpx;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- background: rgba(102, 126, 234, 0.9);
|
|
|
- color: white;
|
|
|
- padding: 20rpx 40rpx;
|
|
|
- border-radius: 50rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- z-index: 1000;
|
|
|
- box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.3);
|
|
|
-}
|
|
|
+ .container {
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 学科标签页 */
|
|
|
+ .subject-tabs {
|
|
|
+ background-color: white;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs-scroll {
|
|
|
+ white-space: nowrap;
|
|
|
+ height: 80rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs-content {
|
|
|
+ display: inline-flex;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-item {
|
|
|
+ padding: 0 40rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #666;
|
|
|
+ position: relative;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-item.active .tab-text {
|
|
|
+ color: #4a6fe3;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-item.active .tab-text::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 4rpx;
|
|
|
+ background-color: #4a6fe3;
|
|
|
+ border-radius: 2rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 学科信息 */
|
|
|
+ .subject-info {
|
|
|
+ padding: 30rpx;
|
|
|
+ background-color: white;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .course-name {
|
|
|
+ display: block;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .current-info {
|
|
|
+ display: block;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 单元样式 */
|
|
|
+ .danyuan-item {
|
|
|
+ background-color: white;
|
|
|
+ margin: 20rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .danyuan-header {
|
|
|
+ background: #4a6fe3;
|
|
|
+ padding: 30rpx;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .danyuan-title {
|
|
|
+ display: block;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .danyuan-intro {
|
|
|
+ font-size: 28rpx;
|
|
|
+ opacity: 0.9;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 节样式 */
|
|
|
+ .jie-item {
|
|
|
+ padding: 24rpx 30rpx;
|
|
|
+ border-bottom: 1rpx solid #f0f0f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jie-item:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jie-name {
|
|
|
+ display: block;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jie-desc {
|
|
|
+ display: block;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 空课程提示 */
|
|
|
+ .empty-jie {
|
|
|
+ padding: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 新增：回到顶部按钮样式 */
|
|
|
+ .back-to-top {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 120rpx;
|
|
|
+ right: 30rpx;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ background-color: rgba(74, 111, 227, 0.9);
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 999;
|
|
|
+ box-shadow: 0 4rpx 20rpx rgba(74, 111, 227, 0.3);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .back-to-top:active {
|
|
|
+ transform: scale(0.95);
|
|
|
+ background-color: rgba(74, 111, 227, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .back-to-top-icon {
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: white;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .back-to-top-text {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: white;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 当前单元提示 */
|
|
|
+ .current-unit-tip {
|
|
|
+ position: fixed;
|
|
|
+ top: 200rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ background-color: rgba(74, 111, 227, 0.9);
|
|
|
+ color: white;
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ z-index: 1000;
|
|
|
+ box-shadow: 0 4rpx 20rpx rgba(74, 111, 227, 0.3);
|
|
|
+ animation: fadeInOut 3s ease-in-out;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes fadeInOut {
|
|
|
+
|
|
|
+ 0%,
|
|
|
+ 100% {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateX(-50%) translateY(-20rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ 10%,
|
|
|
+ 90% {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translateX(-50%) translateY(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
wangguoyu