赋能案例 滚动条联动

front/src/views/assignCase/components/AssignCaseDetailPage.vue

@@ -2,7 +2,7 @@
  * @Author: hisense.zhangfeihu
  * @Date: 2022-06-13 10:22:27
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-04 15:32:52
+ * @LastEditTime: 2022-07-05 11:25:25
  * @Description: 赋能案例-详情页
 -->
 <template>
@@ -131,19 +131,16 @@
     tabName.value = '案例背景'
     selectOne(val).then((res) => {
       res.data.data.infoList.map((item, index) => {
-        console.log('res.data.data.infoList', res.data.data.infoList)
         if (item.attrType == '图片') {
           res.data.data.infoList.splice(index, 1)
         }
       })
       res.data.data.infoList.map((item, index) => {
-        console.log('res.data.data.infoList', res.data.data.infoList)
         if (item.attrType == '应用领域') {
           res.data.data.infoList.splice(index, 1)
         }
       })
       dataFrom.value = res.data.data
-      console.log('dataFrom.value', dataFrom.value)
     })
   }
   //其他案例
@@ -165,7 +162,6 @@
         }
       })
       dataList.value = res.data.data.records
-      console.log('dataList.value', dataList.value)
     })
   }
   //监听路由发生变化
@@ -181,70 +177,98 @@
   //tab点击事件
   const tabSwitch = (item, index) => {
     tabName.value = item.attrType
-    if (index != 0 && index != 3) {
+    let top =
-      let top =
+      document.querySelector(
-        document.querySelector(
-          '#assign-case-detail-page-content-center-card' + index
-        ).offsetTop -
-        document.querySelector(
-          '#assign-case-detail-page-content-center-card' + (index - 1)
-        ).offsetHeight
-      let view = document.getElementById(
-        'assign-case-detail-page-content-left-border-id'
-      )
-      view.style.top =
-        document.querySelector(
-          '#assign-case-detail-page-content-center-card' + (index - 1)
-        ).offsetHeight + 'px'
-      console.log('view.style.top', view.style.top)
-      document.documentElement.scrollTop = top
-      document.body.scrollTop = top
-    } else if (index == 0) {
-      let top = 0
-      let view = document.getElementById(
-        'assign-case-detail-page-content-left-border-id'
-      )
-      document.documentElement.scrollTop = top
-      document.body.scrollTop = top
-      view.style.top = '490px'
-    } else if (index == 3) {
-      let top = document.querySelector(
         '#assign-case-detail-page-content-center-card' + index
-      ).offsetTop
+      ).offsetTop -
-      let view = document.getElementById(
+      330 -
-        'assign-case-detail-page-content-left-border-id'
+      60 * index
-      )
+    document.documentElement.scrollTop = top
-      document.documentElement.scrollTop = top
+    document.body.scrollTop = top
-      document.body.scrollTop = top
-      view.style.top = '220px'
-    }
   }
   onMounted(() => {
-    init()
+    // init()
     // console.clear()
     window.addEventListener('scroll', () => {
-      domArr.value = document.querySelectorAll(
+      let top = document.documentElement.scrollTop
-        '.assign-case-detail-page-content-center-card'
+      if (
-      )
+        top <
-      scrollTop.value =
+        100 +
-        document.documentElement.scrollTop || document.body.scrollTop
+          document.querySelector(
-      for (let i = 0; i < domArr.value.length; i++) {
+            '#assign-case-detail-page-content-center-card0'
-        if (i === 0) {
+          ).offsetHeight -
-          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+          1
-            selectNow.value = domArr.value[i].id
+      ) {
-          }
+        tabName.value = '案例背景'
-        } else if (i == domArr.value.length - 1) {
+      } else if (
-          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+        top >=
-            selectNow.value = domArr.value[i].id
+          100 +
-          }
+            document.querySelector(
-        } else {
+              '#assign-case-detail-page-content-center-card0'
-          if (
+            ).offsetHeight &&
-            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+        top <
-            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+          100 +
-          ) {
+            document.querySelector(
-            selectNow.value = domArr.value[i].id
+              '#assign-case-detail-page-content-center-card0'
-          }
+            ).offsetHeight +
-        }
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card1'
+            ).offsetHeight -
+            1
+      ) {
+        tabName.value = '业务挑战'
+      } else if (
+        top >=
+          100 +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card0'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card1'
+            ).offsetHeight &&
+        top <
+          100 +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card0'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card1'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card2'
+            ).offsetHeight -
+            1
+      ) {
+        tabName.value = '解决方案'
+      } else if (
+        top >=
+          100 +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card0'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card1'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card2'
+            ).offsetHeight &&
+        top <
+          100 +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card0'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card1'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card2'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card3'
+            ).offsetHeight -
+            1
+      ) {
+        tabName.value = '案例成效'
       }
     })
   })
@@ -327,7 +351,7 @@
           padding-top: 5px;
           padding-bottom: 5px;
           position: fixed;
-          top: 4.9rem;
+          top: 3.9rem;
           div {
             height: 0.3rem;
             padding-right: 0.7rem;