Pārlūkot izejas kodu

试题列表页面增加折叠功能

刘洋 1 gadu atpakaļ
vecāks
revīzija
6147a674ad

+ 6 - 0
src/assets/styles/pages.scss

@@ -1160,7 +1160,13 @@
     padding: 15px 12px;
     background-color: #fff;
     border-radius: 10px;
+    transition:all .2s;
     overflow:auto;
+    &.collapse{
+      width:0;
+      overflow:hidden;
+      padding:0;
+    }
     .el-tree-node > .el-tree-node__children{
       overflow:visible;
     }

+ 37 - 1
src/modules/question/views/QuestionManage.vue

@@ -154,13 +154,19 @@
     </div>
 
     <div class="folder-question">
-      <div class="folder-list">
+      <div class="folder-list" :class="{ collapse: treeCollapse }">
         <question-folder
           ref="QuestionFolder"
           is-edit
           @selected="folderFilterSelected"
         ></question-folder>
       </div>
+      <div class="collapse-icon-box">
+        <div class="icon-circle" @click="treeCollapse = !treeCollapse">
+          <i class="el-icon-caret-right" v-if="treeCollapse"></i>
+          <i class="el-icon-caret-left" v-else></i>
+        </div>
+      </div>
       <div class="question-list">
         <div class="icon-btn-group">
           <svg-btn
@@ -393,6 +399,7 @@ export default {
   },
   data() {
     return {
+      treeCollapse: false,
       filter: {
         courseId: "",
         questionType: "",
@@ -684,6 +691,35 @@ export default {
 </script>
 <style lang="scss" scoped>
 .question-manage {
+  .collapse-icon-box {
+    width: 0;
+    position: relative;
+    overflow: visible;
+    .icon-circle {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 2px solid #6d5ff6;
+      position: absolute;
+      left: calc(50% - 9px);
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+      cursor: pointer;
+      &:hover {
+        background-color: #6d5ff6;
+        i {
+          color: #fff;
+        }
+      }
+      i {
+        font-size: 14px;
+        color: #6d5ff6;
+      }
+    }
+  }
   .folder-question {
     min-height: calc(100vh - 306px);
   }