From ea665df41ef55e4a3a3625aba9c2a89c4cb5363b Mon Sep 17 00:00:00 2001
From: "851673013@qq.com" <851673013@qq.com>
Date: Thu, 14 Jul 2022 15:12:40 +0800
Subject: [PATCH] bug568

---
 .../AlgorithmApplicationScenarios.vue         |   6 +-
 .../Business/BusinessApplicationScenarios.vue | 126 ++++++++++--------
 .../DeveloperApplicationScenarios.vue         |   6 +-
 .../LayerServiceApplicationScenarios.vue      | 126 ++++++++++--------
 4 files changed, 152 insertions(+), 112 deletions(-)

diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios.vue
index 016bb3ee..436aec93 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios.vue
@@ -35,7 +35,7 @@
       </div>
       <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
         <div class="content" v-if="tabindex == itemSonTitle.name">
-          <div class="content-right">
+          <div class="content-left">
             <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
             <a-image
               :width="635"
@@ -121,13 +121,13 @@
     log(index, title)
     if (index == 0) {
       if (title == '应用场景') {
-        return 'content-right'
+        return 'content-left'
       } else {
         return 'content-left'
       }
     } else {
       if (title == '应用场景') {
-        return 'content-left'
+        return 'content-right'
       } else {
         return 'content-right'
       }
diff --git a/front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue b/front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue
index 4ba703cb..436aec93 100644
--- a/front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue
@@ -1,10 +1,10 @@
 <!-- 应用场景-->
 <template>
-  <div class="function-intorduction" v-if="flag">
+  <div class="application-scenarios-and-case" v-if="flag">
     <div class="application-scenarios-and-case-son">
       <!-- {{ dataFrom.attrType }} -->
       <div class="title">
-        <DetalsTitle :title="dataFrom.attrType" type="SCENE"></DetalsTitle>
+        <DetalsTitle :title="dataFrom.attrType" :type="SCENE"></DetalsTitle>
       </div>
       <div class="tab">
         <div
@@ -44,9 +44,9 @@
               v-if="itemSonTitle.img"
             ></a-image>
           </div>
-          <div class="content-right">
-            <div class="content-right-scene">
-              <!-- <div class="content-top">{{ itemSonTitle.name }}</div>-->
+          <div :class="contentLocation(1, dataFrom.attrType)">
+            <div class="content-right-scene" :class="'content-right-case'">
+              <div class="content-top">{{ itemSonTitle.name }}</div>
               <a-tooltip>
                 <template #title>{{ itemSonTitle.desc }}</template>
                 <div class="content-bottom">{{ itemSonTitle.desc }}</div>
@@ -97,11 +97,15 @@
       }
     }
   )
+  const { log } = console
   //滚动条样式
   function tabIndexClass(index, title, content) {
     if (title == '应用场景' && index == 0 && content.length > 6) {
       return 'tab-son-class'
     }
+    if (title == '应用案例' && index == 0 && content.length > 6) {
+      return 'tab-son-class-two'
+    }
   }
   //初始化tab切换（判断标题不同，点击事件的判断变量不同）
   function tabInitialize() {
@@ -112,10 +116,27 @@
     tabindex.value = name
     return tabindex.value
   }
+  //内容位置初始化
+  function contentLocation(index, title) {
+    log(index, title)
+    if (index == 0) {
+      if (title == '应用场景') {
+        return 'content-left'
+      } else {
+        return 'content-left'
+      }
+    } else {
+      if (title == '应用场景') {
+        return 'content-right'
+      } else {
+        return 'content-right'
+      }
+    }
+  }
 </script>
 
 <style lang="less" scoped>
-  .function-intorduction {
+  .application-scenarios-and-case {
     width: 100%;
     background: #f7f8fa;
     display: flex;
@@ -123,63 +144,62 @@
     align-items: center;
     overflow-x: unset;
     .application-scenarios-and-case-son {
-      padding-top: 0.8rem;
-      padding-bottom: 0.8rem;
+      padding-top: 80px;
+      padding-bottom: 80px;
       display: flex;
       flex-direction: column;
       align-items: center;
       overflow: unset;
       .tab {
-        max-width: 13rem;
+        max-width: 1300px;
         overflow-x: auto;
         display: flex;
         justify-content: center;
         color: #808080;
-        border-bottom: 0.01rem #e4e6f5 solid;
-        margin-top: 0.45rem;
-        margin-bottom: 0.4rem;
+        border-bottom: 1px #e4e6f5 solid;
+        margin-top: 45px;
+        margin-bottom: 40px;
         cursor: pointer;
-        padding-left: 0.4rem;
-        padding-right: 0.4rem;
+        padding-left: 40px;
+        padding-right: 40px;
         .tab-son {
           display: flex;
           flex-direction: column;
           align-items: center;
-          text-align: center;
-          margin-right: 1rem;
+          margin-right: 100px;
           .tab-top {
-            min-width: 1.2rem;
-            font-size: 0.24rem;
-            line-height: 0.24rem;
-            margin-bottom: 0.2rem;
-            max-width: 2rem;
-            height: 0.24rem;
+            min-width: 120px;
+            font-size: 24px;
+            line-height: 24px;
+            margin-bottom: 20px;
+            max-width: 200px;
+            height: 24px;
             display: -webkit-box;
             overflow: hidden;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
           }
           .tab-top-down {
-            min-width: 1.2rem;
+            min-width: 120px;
             color: #526aff;
-            margin-bottom: 0.16rem;
+            margin-bottom: 16px;
           }
           .tab-bottom {
-            height: 0.04rem;
-            width: 0.6rem;
+            height: 4px;
+            width: 60px;
             background: #526aff;
           }
         }
         .tab-son-class {
-          margin-left: 4.3rem;
-          margin-bottom: 0.02rem;
+          margin-left: 430px;
+          margin-bottom: 2px;
         }
         .tab-son-class-two {
-          margin-left: 2.3rem;
-          margin-bottom: 0.02rem;
+          margin-left: 230px;
+          margin-bottom: 2px;
         }
         .tab-son:last-child {
-          margin-right: 0rem;
+          margin-right: 0px;
         }
       }
       .tab::-webkit-scrollbar-thumb {
@@ -189,57 +209,57 @@
         display: flex;
         position: relative;
         width: 100%;
-        min-width: 13rem;
-        height: 3.4rem;
+        min-width: 1300px;
+        height: 340px;
         .content-left {
           position: absolute;
           left: 0;
-          min-width: 6.2rem;
-          :deep(.ant-image-img) {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-          }
+          min-width: 620px;
           // text-align: center;
           .content-top {
             text-align: left;
           }
         }
         .content-right {
-          width: 6.2rem;
-          height: 3.4rem;
+          width: 620px;
+          height: 340px;
           position: absolute;
           right: 0;
           display: flex;
           justify-content: center;
+          :deep(.ant-image-img) {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
         }
         .content-right-scene,
         .content-right-case {
-          width: 6.2rem;
-          height: 3.4rem;
+          width: 620px;
+          height: 340px;
           display: flex;
           flex-direction: column;
           justify-content: center;
         }
         .content-left-scene,
         .content-left-case {
-          height: 3.4rem;
-          width: 6.35rem;
-          border-radius: 0.1rem;
+          height: 340px;
+          width: 635px;
+          border-radius: 10px;
           background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
           background-position: center;
-          background-size: 6.35rem 3.4rem;
+          background-size: 635px 340px;
         }
         .content-top {
-          font-size: 0.22rem;
-          line-height: 0.22rem;
+          font-size: 22px;
+          line-height: 22px;
           color: #000000;
-          margin-bottom: 0.35rem;
+          margin-bottom: 35px;
         }
         .content-bottom {
-          font-size: 0.18rem;
+          font-size: 18px;
           color: #999999;
-          line-height: 0.26rem;
+          line-height: 26px;
           display: -webkit-box;
           overflow: hidden;
           -webkit-line-clamp: 6;
@@ -248,7 +268,7 @@
       }
     }
     .application-scenarios-and-case-son:first-child {
-      padding-top: 1rem;
+      padding-top: 100px;
     }
   }
 </style>
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue b/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue
index 016bb3ee..436aec93 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue
@@ -35,7 +35,7 @@
       </div>
       <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
         <div class="content" v-if="tabindex == itemSonTitle.name">
-          <div class="content-right">
+          <div class="content-left">
             <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
             <a-image
               :width="635"
@@ -121,13 +121,13 @@
     log(index, title)
     if (index == 0) {
       if (title == '应用场景') {
-        return 'content-right'
+        return 'content-left'
       } else {
         return 'content-left'
       }
     } else {
       if (title == '应用场景') {
-        return 'content-left'
+        return 'content-right'
       } else {
         return 'content-right'
       }
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue
index 4ba703cb..436aec93 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue
@@ -1,10 +1,10 @@
 <!-- 应用场景-->
 <template>
-  <div class="function-intorduction" v-if="flag">
+  <div class="application-scenarios-and-case" v-if="flag">
     <div class="application-scenarios-and-case-son">
       <!-- {{ dataFrom.attrType }} -->
       <div class="title">
-        <DetalsTitle :title="dataFrom.attrType" type="SCENE"></DetalsTitle>
+        <DetalsTitle :title="dataFrom.attrType" :type="SCENE"></DetalsTitle>
       </div>
       <div class="tab">
         <div
@@ -44,9 +44,9 @@
               v-if="itemSonTitle.img"
             ></a-image>
           </div>
-          <div class="content-right">
-            <div class="content-right-scene">
-              <!-- <div class="content-top">{{ itemSonTitle.name }}</div>-->
+          <div :class="contentLocation(1, dataFrom.attrType)">
+            <div class="content-right-scene" :class="'content-right-case'">
+              <div class="content-top">{{ itemSonTitle.name }}</div>
               <a-tooltip>
                 <template #title>{{ itemSonTitle.desc }}</template>
                 <div class="content-bottom">{{ itemSonTitle.desc }}</div>
@@ -97,11 +97,15 @@
       }
     }
   )
+  const { log } = console
   //滚动条样式
   function tabIndexClass(index, title, content) {
     if (title == '应用场景' && index == 0 && content.length > 6) {
       return 'tab-son-class'
     }
+    if (title == '应用案例' && index == 0 && content.length > 6) {
+      return 'tab-son-class-two'
+    }
   }
   //初始化tab切换（判断标题不同，点击事件的判断变量不同）
   function tabInitialize() {
@@ -112,10 +116,27 @@
     tabindex.value = name
     return tabindex.value
   }
+  //内容位置初始化
+  function contentLocation(index, title) {
+    log(index, title)
+    if (index == 0) {
+      if (title == '应用场景') {
+        return 'content-left'
+      } else {
+        return 'content-left'
+      }
+    } else {
+      if (title == '应用场景') {
+        return 'content-right'
+      } else {
+        return 'content-right'
+      }
+    }
+  }
 </script>
 
 <style lang="less" scoped>
-  .function-intorduction {
+  .application-scenarios-and-case {
     width: 100%;
     background: #f7f8fa;
     display: flex;
@@ -123,63 +144,62 @@
     align-items: center;
     overflow-x: unset;
     .application-scenarios-and-case-son {
-      padding-top: 0.8rem;
-      padding-bottom: 0.8rem;
+      padding-top: 80px;
+      padding-bottom: 80px;
       display: flex;
       flex-direction: column;
       align-items: center;
       overflow: unset;
       .tab {
-        max-width: 13rem;
+        max-width: 1300px;
         overflow-x: auto;
         display: flex;
         justify-content: center;
         color: #808080;
-        border-bottom: 0.01rem #e4e6f5 solid;
-        margin-top: 0.45rem;
-        margin-bottom: 0.4rem;
+        border-bottom: 1px #e4e6f5 solid;
+        margin-top: 45px;
+        margin-bottom: 40px;
         cursor: pointer;
-        padding-left: 0.4rem;
-        padding-right: 0.4rem;
+        padding-left: 40px;
+        padding-right: 40px;
         .tab-son {
           display: flex;
           flex-direction: column;
           align-items: center;
-          text-align: center;
-          margin-right: 1rem;
+          margin-right: 100px;
           .tab-top {
-            min-width: 1.2rem;
-            font-size: 0.24rem;
-            line-height: 0.24rem;
-            margin-bottom: 0.2rem;
-            max-width: 2rem;
-            height: 0.24rem;
+            min-width: 120px;
+            font-size: 24px;
+            line-height: 24px;
+            margin-bottom: 20px;
+            max-width: 200px;
+            height: 24px;
             display: -webkit-box;
             overflow: hidden;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
           }
           .tab-top-down {
-            min-width: 1.2rem;
+            min-width: 120px;
             color: #526aff;
-            margin-bottom: 0.16rem;
+            margin-bottom: 16px;
           }
           .tab-bottom {
-            height: 0.04rem;
-            width: 0.6rem;
+            height: 4px;
+            width: 60px;
             background: #526aff;
           }
         }
         .tab-son-class {
-          margin-left: 4.3rem;
-          margin-bottom: 0.02rem;
+          margin-left: 430px;
+          margin-bottom: 2px;
         }
         .tab-son-class-two {
-          margin-left: 2.3rem;
-          margin-bottom: 0.02rem;
+          margin-left: 230px;
+          margin-bottom: 2px;
         }
         .tab-son:last-child {
-          margin-right: 0rem;
+          margin-right: 0px;
         }
       }
       .tab::-webkit-scrollbar-thumb {
@@ -189,57 +209,57 @@
         display: flex;
         position: relative;
         width: 100%;
-        min-width: 13rem;
-        height: 3.4rem;
+        min-width: 1300px;
+        height: 340px;
         .content-left {
           position: absolute;
           left: 0;
-          min-width: 6.2rem;
-          :deep(.ant-image-img) {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-          }
+          min-width: 620px;
           // text-align: center;
           .content-top {
             text-align: left;
           }
         }
         .content-right {
-          width: 6.2rem;
-          height: 3.4rem;
+          width: 620px;
+          height: 340px;
           position: absolute;
           right: 0;
           display: flex;
           justify-content: center;
+          :deep(.ant-image-img) {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
         }
         .content-right-scene,
         .content-right-case {
-          width: 6.2rem;
-          height: 3.4rem;
+          width: 620px;
+          height: 340px;
           display: flex;
           flex-direction: column;
           justify-content: center;
         }
         .content-left-scene,
         .content-left-case {
-          height: 3.4rem;
-          width: 6.35rem;
-          border-radius: 0.1rem;
+          height: 340px;
+          width: 635px;
+          border-radius: 10px;
           background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
           background-position: center;
-          background-size: 6.35rem 3.4rem;
+          background-size: 635px 340px;
         }
         .content-top {
-          font-size: 0.22rem;
-          line-height: 0.22rem;
+          font-size: 22px;
+          line-height: 22px;
           color: #000000;
-          margin-bottom: 0.35rem;
+          margin-bottom: 35px;
         }
         .content-bottom {
-          font-size: 0.18rem;
+          font-size: 18px;
           color: #999999;
-          line-height: 0.26rem;
+          line-height: 26px;
           display: -webkit-box;
           overflow: hidden;
           -webkit-line-clamp: 6;
@@ -248,7 +268,7 @@
       }
     }
     .application-scenarios-and-case-son:first-child {
-      padding-top: 1rem;
+      padding-top: 100px;
     }
   }
 </style>