test

src/views/projectManage/publishTask/components/checkboxList.vue

@@ -46,9 +46,9 @@ export default {
 .checkboxList {
   width: 800px;
   .checkbox {
-    width: 130px;
+    // width: 130px;
     // margin-right: 50px;
-    margin: 10px 0px;
+    margin: 10px 40px 10px 0;
   }
 }
 

src/views/projectManage/publishTask/components/step.vue

@@ -56,6 +56,7 @@ export default {
     width: 130px;
     text-align: center;
     margin: 16px 0px 16px 50%;
+    padding-left: 16px;
     background: #fff;
     cursor: pointer;
     position: relative;

src/views/projectManage/publishTask/index.vue

@@ -26,7 +26,7 @@
           <div v-for="(item, index) in data.templates" :key="item.parentTemplateId">
             <div v-if="item.type === 1" class="item">
               <p :id="`s${item.parentTemplateId}`" class="title">
-                <el-checkbox v-if="!edit" v-model="item.isCheck" :label="item.name" @change="updateCheckItemHandle(item)">{{ item.name }}</el-checkbox>
+                <el-checkbox v-if="!edit" v-model="item.isCheck" :label="item.name" class="fontRest" @change="updateCheckItemHandle(item)">{{ item.name }}</el-checkbox>
                 <span v-else class="fontName">{{ item.name }}</span>
               </p>
               <onlineCheckList
@@ -42,7 +42,7 @@
             </div>
             <div v-else class="item">
               <p :id="`s${item.parentTemplateId}`" class="title">
-                <el-checkbox v-if="!edit" v-model="item.isCheck" :label="item.name" @change="updateCheckItemHandle(item)">{{ item.name }}</el-checkbox>
+                <el-checkbox v-if="!edit" v-model="item.isCheck" :label="item.name" class="fontRest" @change="updateCheckItemHandle(item)">{{ item.name }}</el-checkbox>
                 <span v-else class="fontName">{{ item.name }}</span>
               </p>
               <normal-area
@@ -72,7 +72,7 @@
         </div>
         <actionDynamic :comments="commentlist" :change-record="changeRecordList" @addComment="createCommentHandle" />
       </section>
-      <div v-if="!showEmpty" class="step">
+      <div v-if="!showEmpty && showStep" class="step">
         <step :data="data.templates" :type-list="data.templates" @goto="scrollToHandle" />
       </div>
     </div>
@@ -140,6 +140,7 @@ export default {
       description: '<p style="color:red;">123</p>',
       edit: false, // 是否是编辑状态
       showEmpty: true,
+      showStep: true,
       openEdit: true,
       data: {},
       temList: [],
@@ -155,8 +156,24 @@ export default {
     this.getList()
     // 获取评论列表
     this.getCommentList()
+    // 监听滚动条
+    const container = document.getElementsByClassName('main-wrapper')[0]
+    container.addEventListener('scroll', this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
   },
   methods: {
+    // 监听滚动条
+    handleScroll() {
+      const fullHeight = document.getElementsByClassName('main-wrapper')[0].scrollHeight
+      const top = document.getElementsByClassName('main-wrapper')[0].scrollTop
+      console.log(fullHeight, top, fullHeight - top)
+      if (fullHeight - top <= 1000) {
+        this.showStep = false
+      } else {
+        if (!this.showStep) {
+          this.showStep = true
+        }
+      }
+    },
     // 获取checklist详情
     async getList() {
       if (this.taskId) {
@@ -421,7 +438,7 @@ export default {
     scrollToHandle(targe) {
       const anchorH = document.getElementById(targe).offsetTop
       const container = document.getElementsByClassName('main-wrapper')[0]
-      container.scrollTop = anchorH - 20
+      container.scrollTop = anchorH - 30
     },
 
     // 解绑删除任务
@@ -498,6 +515,9 @@ export default {
       font-size: 14px;
       margin-bottom: 16px;
       margin-top: 40px;
+      .fontRest {
+        color: #444;
+      }
     }
     .item {
       width: 690px;