Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3c386700 1 parent 8a6f38bf

refactor(StudyPage): 调整布局并移除未使用的VanCell组件 

- 将学习记录标签的顶部布局调整为固定定位，并添加背景色和边框
- 移除未使用的VanCell组件以简化代码
- 添加新的课程数据以丰富学习记录内容
Inline Side-by-side
Showing 2 changed files with 40 additions and 3 deletions
...@@ -28,7 +28,6 @@ declare module 'vue' { ...@@ -28,7 +28,6 @@ declare module 'vue' {
28 TermsPopup: typeof import('./components/ui/TermsPopup.vue')['default'] 28 TermsPopup: typeof import('./components/ui/TermsPopup.vue')['default']
29 UploadVideoPopup: typeof import('./components/ui/UploadVideoPopup.vue')['default'] 29 UploadVideoPopup: typeof import('./components/ui/UploadVideoPopup.vue')['default']
30 VanButton: typeof import('vant/es')['Button'] 30 VanButton: typeof import('vant/es')['Button']
31 - VanCell: typeof import('vant/es')['Cell']
32 VanCellGroup: typeof import('vant/es')['CellGroup'] 31 VanCellGroup: typeof import('vant/es')['CellGroup']
33 VanCheckbox: typeof import('vant/es')['Checkbox'] 32 VanCheckbox: typeof import('vant/es')['Checkbox']
34 VanDatePicker: typeof import('vant/es')['DatePicker'] 33 VanDatePicker: typeof import('vant/es')['DatePicker']
......
...@@ -29,8 +29,8 @@ ...@@ -29,8 +29,8 @@
29 <van-tabs v-model:active="activeTab" sticky shrink> 29 <van-tabs v-model:active="activeTab" sticky shrink>
30 <!-- 学习记录标签 --> 30 <!-- 学习记录标签 -->
31 <van-tab title="学习记录" name="record"> 31 <van-tab title="学习记录" name="record">
32 - <div class="p-4"> 32 + <div class=" bg-white z-10 px-4 py-3 border-b border-gray-100" style="position: sticky; top: 44px;">
33 - <div class="flex space-x-4 mb-4"> 33 + <div class="flex space-x-4">
34 <button class="rounded-full px-4 py-1 text-xs transition-colors" 34 <button class="rounded-full px-4 py-1 text-xs transition-colors"
35 :class="courseType === 'column' ? 'bg-green-500 text-white' : 'bg-gray-100 text-gray-600'" 35 :class="courseType === 'column' ? 'bg-green-500 text-white' : 'bg-gray-100 text-gray-600'"
36 @click="courseType = 'column'"> 36 @click="courseType = 'column'">
...@@ -42,6 +42,8 @@ ...@@ -42,6 +42,8 @@
42 单课 42 单课
43 </button> 43 </button>
44 </div> 44 </div>
45 + </div>
46 + <div class="p-4">
45 <course-list v-if="courseType === 'column'" :courses="columnCourses" /> 47 <course-list v-if="courseType === 'column'" :courses="columnCourses" />
46 <course-list v-else :courses="singleCourses" /> 48 <course-list v-else :courses="singleCourses" />
47 </div> 49 </div>
...@@ -133,6 +135,42 @@ const columnCourses = ref([ ...@@ -133,6 +135,42 @@ const columnCourses = ref([
133 duration: 3600, // 1小时 135 duration: 3600, // 1小时
134 studyTime: 10, 136 studyTime: 10,
135 }, 137 },
138 + {
139 + id: 1,
140 + title: "考前赋能冥想",
141 + type: "video",
142 + thumbnail: "https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg",
143 + progress: 100,
144 + duration: 1200, // 20分钟
145 + studyTime: 1200,
146 + },
147 + {
148 + id: 2,
149 + title: "开学礼·让的智慧·心法老师·20241001（上）",
150 + type: "audio",
151 + thumbnail: "https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg",
152 + progress: 1,
153 + duration: 3600, // 1小时
154 + studyTime: 10,
155 + },
156 + {
157 + id: 1,
158 + title: "考前赋能冥想",
159 + type: "video",
160 + thumbnail: "https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg",
161 + progress: 100,
162 + duration: 1200, // 20分钟
163 + studyTime: 1200,
164 + },
165 + {
166 + id: 2,
167 + title: "开学礼·让的智慧·心法老师·20241001（上）",
168 + type: "video",
169 + thumbnail: "https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg",
170 + progress: 1,
171 + duration: 3600, // 1小时
172 + studyTime: 10,
173 + },
136 ]); 174 ]);
137 175
138 const singleCourses = ref([ 176 const singleCourses = ref([
......