From ae188ef656e6d3a2de28b54d8df6071f2195ac8f Mon Sep 17 00:00:00 2001
From: a0049873 <79py69t9wb@privaterelay.appleid.com>
Date: Tue, 5 Jul 2022 11:28:30 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B5=8B=E8=83=BD=E6=A1=88=E4=BE=8B=20?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=E8=81=94=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AssignCaseDetailPage.vue       | 154 ++++++++++--------
 1 file changed, 89 insertions(+), 65 deletions(-)

diff --git a/front/src/views/assignCase/components/AssignCaseDetailPage.vue b/front/src/views/assignCase/components/AssignCaseDetailPage.vue
index dd6bf0a5..fdde065e 100644
--- a/front/src/views/assignCase/components/AssignCaseDetailPage.vue
+++ b/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 =
-        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(
+    let top =
+      document.querySelector(
         '#assign-case-detail-page-content-center-card' + index
-      ).offsetTop
-      let view = document.getElementById(
-        'assign-case-detail-page-content-left-border-id'
-      )
-      document.documentElement.scrollTop = top
-      document.body.scrollTop = top
-      view.style.top = '220px'
-    }
+      ).offsetTop -
+      330 -
+      60 * index
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
   }
   onMounted(() => {
-    init()
+    // init()
     // console.clear()
     window.addEventListener('scroll', () => {
-      domArr.value = document.querySelectorAll(
-        '.assign-case-detail-page-content-center-card'
-      )
-      scrollTop.value =
-        document.documentElement.scrollTop || document.body.scrollTop
-      for (let i = 0; i < domArr.value.length; i++) {
-        if (i === 0) {
-          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-            selectNow.value = domArr.value[i].id
-          }
-        } else if (i == domArr.value.length - 1) {
-          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-            selectNow.value = domArr.value[i].id
-          }
-        } else {
-          if (
-            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-          ) {
-            selectNow.value = domArr.value[i].id
-          }
-        }
+      let top = document.documentElement.scrollTop
+      if (
+        top <
+        100 +
+          document.querySelector(
+            '#assign-case-detail-page-content-center-card0'
+          ).offsetHeight -
+          1
+      ) {
+        tabName.value = '案例背景'
+      } else if (
+        top >=
+          100 +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card0'
+            ).offsetHeight &&
+        top <
+          100 +
+            document.querySelector(
+              '#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;