Explorar o código

```
feat(LearningSystem): 添加学习系统页面筛选条件展开收起功能

- 启用开发环境API基础URL配置
- 新增国际化词条:展开和收起
- 实现学习阶段、课程分类、技能标签筛选项的展开收起交互
- 添加对应的响应式数据控制展开状态
- 优化样式实现高度过渡动画效果
```

zhangningning hai 1 mes
pai
achega
c33bd46945
Modificáronse 4 ficheiros con 44 adicións e 4 borrados
  1. 1 1
      .env.development
  2. 2 0
      src/locales/en.js
  3. 2 0
      src/locales/zh-CN.js
  4. 39 3
      src/pages/LearningSystem/LearningSystem.vue

+ 1 - 1
.env.development

@@ -1,5 +1,5 @@
 # 乔功
-# VITE_API_BASE_URL=http://192.168.100.134:8080/api
+VITE_API_BASE_URL=http://192.168.100.134:8080/api
 # 高运甲
 VITE_API_BASE_URL=http://192.168.100.89:8080/api
 

+ 2 - 0
src/locales/en.js

@@ -109,6 +109,8 @@ export default {
     rmb:"RMB",
     exitFullscreen:"Exit Fullscreen",
     fullscreenEdit:"Fullscreen Edit",
+    expand:"Expand",
+    collapse:"Collapse",
   },
   login: {
     smsLogin: 'Captcha Login',

+ 2 - 0
src/locales/zh-CN.js

@@ -115,6 +115,8 @@ export default {
     rmb:'人民币',
     exitFullscreen:"退出全屏",
     fullscreenEdit:"全屏编辑",
+    expand:"展开",
+    collapse:"收起",
   },
   login: {
     smsLogin: '验证码登录',

+ 39 - 3
src/pages/LearningSystem/LearningSystem.vue

@@ -24,7 +24,7 @@
       </div>
       <Breadcrumb />
       <div class="padding12 bg_color_fff border_radius_16 box_shadow_card">
-        <div class="typeList flex-between typeborder">
+        <div class="typeList flex-between typeborder" :class="{isShow:isShowStudyStage}">
           <div class="gray font_size14 typeName">{{$t('common.studyStage')}}:</div>
           <div class="flex_1 gap10">
             <div class="font_size14 typeItem"  :class="{'active':searchFom.studyStage === ''}"
@@ -39,8 +39,16 @@
               {{item.dictLabel}}
             </div>
           </div>
+          <div>
+            <el-link type="primary" v-if="!isShowStudyStage" @click="isShowStudyStage = true;">
+              {{$t('common.expand')}}<el-icon><ArrowDown /></el-icon>
+            </el-link>
+            <el-link type="primary" v-else @click="isShowStudyStage = false;">
+              {{$t('common.collapse')}}<el-icon><ArrowDown /></el-icon>
+            </el-link>
+          </div>
         </div>
-        <div class="typeList flex-between typeborder">
+        <div class="typeList flex-between typeborder" :class="{isShow:isShowCourseCategory}">
           <div class="gray font_size14 typeName">{{$t('common.courseCategory')}}:</div>
           <div class="flex_1 gap10">
             <div class="font_size14 typeItem"  :class="{'active':searchFom.courseCategory === ''}"
@@ -55,8 +63,16 @@
               {{item.dictLabel}}
             </div>
           </div>
+          <div>
+            <el-link type="primary" v-if="!isShowCourseCategory" @click="isShowCourseCategory = true;">
+              {{$t('common.expand')}}<el-icon><ArrowDown /></el-icon>
+            </el-link>
+            <el-link type="primary" v-else @click="isShowCourseCategory = false;">
+              {{$t('common.collapse')}}<el-icon><ArrowDown /></el-icon>
+            </el-link>
+          </div>
         </div>
-        <div class="typeList flex-between">
+        <div class="typeList flex-between" :class="{isShow:isShowSkillTag}">
           <div class="gray font_size14 typeName">{{$t('common.skillTag')}}:</div>
           <div class="flex_1 gap10">
             <div class="font_size14 typeItem"  :class="{'active':searchFom.skillTag === ''}"
@@ -71,6 +87,14 @@
               {{item.dictLabel}}
             </div>
           </div>
+          <div>
+            <el-link type="primary" v-if="!isShowSkillTag" @click="isShowSkillTag = true;">
+              {{$t('common.expand')}}<el-icon><ArrowDown /></el-icon>
+            </el-link>
+            <el-link type="primary" v-else @click="isShowSkillTag = false;">
+              {{$t('common.collapse')}}<el-icon><ArrowDown /></el-icon>
+            </el-link>
+          </div>
         </div>
       </div>
       <!-- 列表 -->
@@ -157,6 +181,13 @@
 
   const openLoginDialog = inject('openLoginDialog')
 
+  // 学习阶段
+  const isShowStudyStage = ref(false);
+  // 课程分类
+  const isShowCourseCategory = ref(false);
+  // 技能标签
+  const isShowSkillTag = ref(false);
+
 
 
   // 一级分类列表
@@ -243,6 +274,11 @@
 .LearningSystem {
   .typeList{
     padding: 20px 0;
+    height: 71.75px;
+    overflow: hidden;
+    &.isShow{
+      height: auto;
+    }
     &.typeborder{
       border-bottom: 1px dashed #DCDFE6;
     }