赋能场景详情-初步完成

front/src/views/home/integrationServicesDetails.vue

@@ -23,13 +23,44 @@
       </div>
     </div>
 
-    <!-- 组合能力 -->
+    <!-- 场景痛点 -->
+    <div
+      id="integration-pain-point"
+      class="pain-point scrollBox"
+    >
+      <div class="title-1">
+        <DetalsTitle title="场景痛点" type="PAIN POINT"></DetalsTitle>
+      </div>
+      <div class="flex-row-center">
+        <div class="bg"></div>
+        <div class="content">
+          <div class="content-item" v-for="(item, i) in painPoint" :key="i">{{i+1}}.{{item.description}}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 解决方案 -->
+    <div
+      id="integration-solution"
+      class="solution scrollBox"
+    >
+      <div class="title-1">
+        <DetalsTitle title="解决方案" type="SOLUTION"></DetalsTitle>
+      </div>
+      <div class="flex-row-center">
+        <div class="content">
+          <div class="content-item" v-for="(item, i) in solution" :key="i">{{i+1}}.{{item.description}}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 使用能力 -->
     <div
       id="integration-combination-ability"
       class="combination-ability scrollBox"
     >
       <div class="title-1">
-        <DetalsTitle title="组合能力" type="COMBINATION ABILITY"></DetalsTitle>
+        <DetalsTitle title="使用能力" type="COMBINATION ABILITY"></DetalsTitle>
       </div>
       <div class="flex-row-center combine-content">
         <div class="combine-item" v-for="(item, i) in combineList" :key="i">
@@ -43,48 +74,23 @@
       </div>
     </div>
 
-    <!-- 使用方式 -->
+    <!-- 构建步骤 -->
-    <div id="integration-use-way" class="use-way scrollBox">
+    <div
+      id="integration-step"
+      class="step scrollBox"
+    >
       <div class="title-1">
-        <DetalsTitle title="使用方式" type="USE WAY"></DetalsTitle>
+        <DetalsTitle title="构建步骤" type="STEP"></DetalsTitle>
       </div>
-      <div class="content">
+      <div class="flex-row-center">
-        <div class="content-card flex-row-between left word-bg">
+        <div style="height: 300px;">
-          <div class="content-card-item left-item">
+          <el-steps direction="vertical" :active="step.length">
-            <div class="card-title">文档</div>
+            <el-step v-for="(item, i) in step" :key="i" :title="item.question" :description="item.answer"></el-step>
-            <!-- <div class="card-text">文档描述文档描述文档描述文档描述</div> -->
+          </el-steps>
-          </div>
-          <div class="content-card-item btn-box">
-            <div class="btn" @click="handleOpenUrl('技术文档')">技术文档</div>
-            <div class="btn" @click="handleOpenUrl('使用手册')">使用手册</div>
-          </div>
-        </div>
-        <div class="content-card flex-row-start">
-          <div
-            class="right-item content-card-item"
-            v-for="(use, i) in useWayShowList"
-            :key="i"
-          >
-            <div class="card-title title">{{ use.title }}</div>
-            <div
-              class="card-text"
-              v-for="(d, k) in Object.keys(use.info)"
-              :key="k"
-            >
-              {{ use.info[d] }}:{{ detailInfoObj[d] || '--' }}
-            </div>
-          </div>
         </div>
       </div>
     </div>
 
-    <!-- 常见问题-->
-    <application-common-problem
-      :dataList="detailInfoObj"
-      id="common-problem"
-      class="scrollBox"
-    ></application-common-problem>
-
     <home-footer></home-footer>
   </div>
 </template>
@@ -102,6 +108,9 @@
   const router = useRouter()
   const scrollTop = ref(0)
   const domArr = ref([])
+  const painPoint = ref([])
+  const solution = ref([])
+  const step=ref([])
   const id = router.currentRoute.value.query.id
   document.documentElement.style.transition = 'all 0.3s ease'
   document.documentElement.scrollTop = 0
@@ -117,20 +126,24 @@
 
   const navList = ref([
     {
-      name: '组合能力',
+      name: '场景痛点',
+      key: 'integration-pain-point',
+    },
+    {
+      name: '解决方案',
+      key: 'integration-solution',
+    },
+    {
+      name: '使用能力',
       key: 'integration-combination-ability',
     },
     {
-      name: '使用方式',
+      name: '构建步骤',
-      key: 'integration-use-way',
+      key: 'integration-step',
-    },
-    {
-      name: '常见问题',
-      key: 'common-problem',
     },
   ])
 
-  const selectNow = ref('integration-combination-ability')
+  const selectNow = ref('integration-pain-point')
 
   const useWayShowList = ref([
     {
@@ -214,9 +227,12 @@
           attrType: '常见问题',
           attrValue: questionValue.attrValue || '[]',
         }
+        painPoint.value = JSON.parse(fuseAttrList.find((v) => v.attrType === '场景痛点').attrValue) || []
+        solution.value = JSON.parse(fuseAttrList.find((v) => v.attrType === '解决方案').attrValue) || []
+        step.value = JSON.parse(fuseAttrList.find((v) => v.attrType === '使用步骤').attrValue) || []
         let areaObj = {
           attrType: '应用领域',
-          attrValue: detailInfoObj.value.applicationArea,
+          attrValue: fuseAttrList.find((v) => v.attrType === '应用领域').attrValue,
         }
         combineList.value.map((item) => {
           let arr = (
@@ -409,6 +425,43 @@
     }
   }
 
+  .pain-point {
+    padding: 0.8rem 0;
+    background: rgb(247, 248, 250);
+    .bg {
+        height: 2rem;
+        width: 2rem;
+        background: url('~@/assets/home/rhfw_square.png') no-repeat;
+        background-size: 100%;
+        margin-top: 0.3rem;
+    }
+    .content {
+        height: 2rem;
+        width: 6rem;
+        .content-item {
+          margin: 0.1rem;
+        }
+    }
+  }
+
+  .solution {
+    padding: 0.8rem 0;
+    background: rgb(247, 248, 250);
+    .content {
+        height: 2rem;
+        width: 8rem;
+        .content-item {
+          margin: 0.3rem;
+        }
+    }
+  }
+
+  .step {
+    padding: 0.8rem 0;
+    background: rgb(247, 248, 250);
+
+  }
+
   .combination-ability {
     padding: 0.8rem 0;
     background: rgb(247, 248, 250);