bug826-应用详情-功能介绍

front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue

@@ -10,7 +10,7 @@
         <div
           v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
           :key="itemSonTitle.name"
-          @click="tabSwitch(itemSonTitle.name)"
+          @click="tabSwitch(itemSonTitle.name, indexSonTitle)"
           class="tab-son"
           :class="
             tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
@@ -21,7 +21,8 @@
             <div
               class="tab-top"
               :class="
-                tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
+                (tabInitialize() == itemSonTitle.name ? 'tab-top-down' : '') &&
+                dataIndex == indexSonTitle
               "
             >
               {{ itemSonTitle.name }}
@@ -29,12 +30,20 @@
           </a-tooltip>
           <div
             class="tab-bottom"
-            v-if="tabInitialize() == itemSonTitle.name"
+            v-if="
+              tabInitialize() == itemSonTitle.name && dataIndex == indexSonTitle
+            "
           ></div>
         </div>
       </div>
-      <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
-        <div class="content" v-if="tabindex == itemSonTitle.name">
+      <template
+        v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
+        :key="itemSonTitle"
+      >
+        <div
+          class="content"
+          v-if="tabindex == itemSonTitle.name && dataIndex == indexSonTitle"
+        >
           <div class="content-left">
             <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
             <a-image
@@ -60,6 +69,7 @@
   import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
   import { ref, defineProps, watch } from 'vue'
   const flag = ref(true)
+  let dataIndex = ref(0)
   let dataFrom = ref([])
   // tab切换方法
   let tabindex = ref('场景说明一')
@@ -105,8 +115,9 @@
     return tabindex.value
   }
   //tab切换点击事件
-  function tabSwitch(name) {
+  function tabSwitch(name, index) {
     tabindex.value = name
+    dataIndex.value = index
     return tabindex.value
   }
 </script>